lux
/
firefish
mirror of https://firefish.dev/firefish/firefish.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix all type errors of MkPagination

This commit is contained in:
Lhcfl 2024-04-04 14:38:21 +08:00
parent 93e80353eb
commit 6b89d666af
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/client/src/components/MkPagination.vue
View File

@ -66,7 +66,7 @@
</transition> </transition>
</template> </template>
<script lang="ts" setup generic="E extends keyof Endpoints"> <script lang="ts" setup generic="E extends PagingKey">
import type { ComputedRef } from "vue"; import type { ComputedRef } from "vue";
import { computed, isRef, onActivated, onDeactivated, ref, watch } from "vue"; import { computed, isRef, onActivated, onDeactivated, ref, watch } from "vue";
import type { Endpoints, TypeUtils } from "firefish-js"; import type { Endpoints, TypeUtils } from "firefish-js";
@ -81,7 +81,10 @@ import MkButton from "@/components/MkButton.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
export interface Paging<E extends keyof Endpoints = keyof Endpoints> { // biome-ignore lint/suspicious/noExplicitAny:
export type PagingKey = TypeUtils.EndpointsOf<any[]>;
export interface Paging<E extends PagingKey = PagingKey> {
endpoint: E; endpoint: E;
limit: number; limit: number;
params?: Endpoints[E]["req"] | ComputedRef<Endpoints[E]["req"]>; params?: Endpoints[E]["req"] | ComputedRef<Endpoints[E]["req"]>;
@ -117,14 +120,15 @@ const props = withDefaults(
const slots = defineSlots<{ const slots = defineSlots<{
default(props: { items: Item[] }): unknown; default(props: { items: Item[] }): unknown;
empty(props: null): never; empty(props: Record<string, never>): never;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(ev: "queue", count: number): void; (ev: "queue", count: number): void;
(ev: "status", error: boolean): void; (ev: "status", hasError: boolean): void;
}>(); }>();
type Param = Endpoints[E]["req"] | Record<string, never>;
type Item = Endpoints[E]["res"][number]; type Item = Endpoints[E]["res"][number];
const rootEl = ref<HTMLElement>(); const rootEl = ref<HTMLElement>();
@ -142,8 +146,9 @@ const error = ref(false);
const init = async (): Promise<void> => { const init = async (): Promise<void> => {
queue.value = []; queue.value = [];
fetching.value = true; fetching.value = true;
const params = props.pagination.params const params = props.pagination.params
? isRef(props.pagination.params) ? isRef<Param>(props.pagination.params)
? props.pagination.params.value ? props.pagination.params.value
: props.pagination.params : props.pagination.params
: {}; : {};
@ -155,7 +160,7 @@ const init = async (): Promise<void> => {
: (props.pagination.limit || 10) + 1, : (props.pagination.limit || 10) + 1,
}) })
.then( .then(
(res) => { (res: Item[]) => {
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
const item = res[i]; const item = res[i];
if (props.pagination.reversed) { if (props.pagination.reversed) {
@ -179,7 +184,7 @@ const init = async (): Promise<void> => {
error.value = false; error.value = false;
fetching.value = false; fetching.value = false;
}, },
(err) => { (_err) => {
error.value = true; error.value = true;
fetching.value = false; fetching.value = false;
}, },
@ -193,7 +198,7 @@ const reload = (): Promise<void> => {
const refresh = async (): Promise<void> => { const refresh = async (): Promise<void> => {
const params = props.pagination.params const params = props.pagination.params
? isRef(props.pagination.params) ? isRef<Param>(props.pagination.params)
? props.pagination.params.value ? props.pagination.params.value
: props.pagination.params : props.pagination.params
: {}; : {};
@ -204,7 +209,7 @@ const refresh = async (): Promise<void> => {
offset: 0, offset: 0,
}) })
.then( .then(
(res) => { (res: Item[]) => {
const ids = items.value.reduce( const ids = items.value.reduce(
(a, b) => { (a, b) => {
a[b.id] = true; a[b.id] = true;
@ -215,7 +220,7 @@ const refresh = async (): Promise<void> => {
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
const item = res[i]; const item = res[i];
if (!updateItem(item.id, (old) => item)) { if (!updateItem(item.id, (_old) => item)) {
append(item); append(item);
} }
delete ids[item.id]; delete ids[item.id];
@ -225,7 +230,7 @@ const refresh = async (): Promise<void> => {
removeItem((i) => i.id === id); removeItem((i) => i.id === id);
} }
}, },
(err) => { (_err) => {
error.value = true; error.value = true;
fetching.value = false; fetching.value = false;
}, },
@ -243,7 +248,7 @@ const fetchMore = async (): Promise<void> => {
moreFetching.value = true; moreFetching.value = true;
backed.value = true; backed.value = true;
const params = props.pagination.params const params = props.pagination.params
? isRef(props.pagination.params) ? isRef<Param>(props.pagination.params)
? props.pagination.params.value ? props.pagination.params.value
: props.pagination.params : props.pagination.params
: {}; : {};
@ -264,7 +269,7 @@ const fetchMore = async (): Promise<void> => {
}), }),
}) })
.then( .then(
(res) => { (res: Item[]) => {
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
const item = res[i]; const item = res[i];
if (props.pagination.reversed) { if (props.pagination.reversed) {
@ -288,7 +293,7 @@ const fetchMore = async (): Promise<void> => {
offset.value += res.length; offset.value += res.length;
moreFetching.value = false; moreFetching.value = false;
}, },
(err) => { (_err) => {
moreFetching.value = false; moreFetching.value = false;
}, },
); );
@ -304,7 +309,7 @@ const fetchMoreAhead = async (): Promise<void> => {
return; return;
moreFetching.value = true; moreFetching.value = true;
const params = props.pagination.params const params = props.pagination.params
? isRef(props.pagination.params) ? isRef<Param>(props.pagination.params)
? props.pagination.params.value ? props.pagination.params.value
: props.pagination.params : props.pagination.params
: {}; : {};
@ -325,7 +330,7 @@ const fetchMoreAhead = async (): Promise<void> => {
}), }),
}) })
.then( .then(
(res) => { (res: Item[]) => {
if (res.length > SECOND_FETCH_LIMIT) { if (res.length > SECOND_FETCH_LIMIT) {
res.pop(); res.pop();
items.value = props.pagination.reversed items.value = props.pagination.reversed
@ -341,7 +346,7 @@ const fetchMoreAhead = async (): Promise<void> => {
offset.value += res.length; offset.value += res.length;
moreFetching.value = false; moreFetching.value = false;
}, },
(err) => { (_err) => {
moreFetching.value = false; moreFetching.value = false;
}, },
); );
@ -433,7 +438,7 @@ const updateItem = (id: Item["id"], replacer: (old: Item) => Item): boolean => {
return true; return true;
}; };
if (props.pagination.params && isRef(props.pagination.params)) { if (props.pagination.params && isRef<Param>(props.pagination.params)) {
watch(props.pagination.params, init, { deep: true }); watch(props.pagination.params, init, { deep: true });
} }