refactor
This commit is contained in:
syuilo
parent
bf8636e516
commit
0121d19645
|
|
@ -39,13 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, nextTick, ref, watch, computed, toRefs, useSlots } from 'vue';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import type { VNode, VNodeChild } from 'vue';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
<script lang="ts">
|
||||
type ItemOption = {
|
||||
type?: 'option';
|
||||
value: string | number | null;
|
||||
|
|
@ -60,11 +54,32 @@ type ItemGroup = {
|
|||
|
||||
export type MkSelectItem = ItemOption | ItemGroup;
|
||||
|
||||
type ValuesOfItems<T> = T extends (infer U)[]
|
||||
? U extends { type: 'group'; items: infer V }
|
||||
? V extends (infer W)[]
|
||||
? W extends { value: infer X }
|
||||
? X
|
||||
: never
|
||||
: never
|
||||
: U extends { value: infer Y }
|
||||
? Y
|
||||
: never
|
||||
: never;
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup generic="T extends MkSelectItem[]">
|
||||
import { onMounted, nextTick, ref, watch, computed, toRefs, useSlots } from 'vue';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import type { VNode, VNodeChild } from 'vue';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
// TODO: itemsをslot内のoptionで指定する用法は廃止する(props.itemsを必須化する)
|
||||
// see: https://github.com/misskey-dev/misskey/issues/15558
|
||||
// あと型推論と相性が良くない
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string | number | null;
|
||||
modelValue: string;
|
||||
required?: boolean;
|
||||
readonly?: boolean;
|
||||
disabled?: boolean;
|
||||
|
|
@ -73,11 +88,11 @@ const props = defineProps<{
|
|||
inline?: boolean;
|
||||
small?: boolean;
|
||||
large?: boolean;
|
||||
items?: MkSelectItem[];
|
||||
items?: T;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', value: string | number | null): void;
|
||||
(ev: 'update:modelValue', value: ValuesOfItems<T>): void;
|
||||
}>();
|
||||
|
||||
const slots = useSlots();
|
||||
|
|
|
|||
|
|
@ -22,20 +22,46 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<option value="blocked">{{ i18n.ts.blocked }}</option>
|
||||
<option value="notResponding">{{ i18n.ts.notResponding }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model="sort">
|
||||
<MkSelect
|
||||
v-model="sort" :items="[{
|
||||
label: `${i18n.ts.pubSub} (${i18n.ts.descendingOrder})`,
|
||||
value: '+pubSub',
|
||||
}, {
|
||||
label: `${i18n.ts.pubSub} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-pubSub',
|
||||
}, {
|
||||
label: `${i18n.ts.notes} (${i18n.ts.descendingOrder})`,
|
||||
value: '+notes',
|
||||
}, {
|
||||
label: `${i18n.ts.notes} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-notes',
|
||||
}, {
|
||||
label: `${i18n.ts.users} (${i18n.ts.descendingOrder})`,
|
||||
value: '+users',
|
||||
}, {
|
||||
label: `${i18n.ts.users} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-users',
|
||||
}, {
|
||||
label: `${i18n.ts.following} (${i18n.ts.descendingOrder})`,
|
||||
value: '+following',
|
||||
}, {
|
||||
label: `${i18n.ts.following} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-following',
|
||||
}, {
|
||||
label: `${i18n.ts.followers} (${i18n.ts.descendingOrder})`,
|
||||
value: '+followers',
|
||||
}, {
|
||||
label: `${i18n.ts.followers} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-followers',
|
||||
}, {
|
||||
label: `${i18n.ts.registeredAt} (${i18n.ts.descendingOrder})`,
|
||||
value: '+firstRetrievedAt',
|
||||
}, {
|
||||
label: `${i18n.ts.registeredAt} (${i18n.ts.ascendingOrder})`,
|
||||
value: '-firstRetrievedAt',
|
||||
}] as const"
|
||||
>
|
||||
<template #label>{{ i18n.ts.sort }}</template>
|
||||
<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
<option value="+firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
|
||||
<option value="-firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
|
||||
</MkSelect>
|
||||
</FormSplit>
|
||||
</div>
|
||||
|
|
@ -52,6 +78,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { computed, markRaw, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
|
|
@ -62,7 +89,7 @@ import { Paginator } from '@/utility/paginator.js';
|
|||
|
||||
const host = ref('');
|
||||
const state = ref('federating');
|
||||
const sort = ref('+pubSub');
|
||||
const sort = ref<NonNullable<Misskey.entities.FederationInstancesRequest['sort']>>('+pubSub');
|
||||
const paginator = markRaw(new Paginator('federation/instances', {
|
||||
limit: 10,
|
||||
offsetMode: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue