diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkPagination.vue | 42 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkPaginationControl.vue | 83 |
2 files changed, 85 insertions, 40 deletions
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index f069caeb44..679e8deaf5 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -6,25 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()" @contextmenu.prevent.stop="onContextmenu"> <div> - <div v-if="props.withControl" :class="$style.controls"> - <div :class="$style.control"> - <MkSelect v-model="order" :class="$style.order" :items="[{ label: i18n.ts._order.newest, value: 'newest' }, { label: i18n.ts._order.oldest, value: 'oldest' }]"> - <template #prefix><i class="ti ti-arrows-sort"></i></template> - </MkSelect> - <!-- TODO --> - <!-- <MkButton v-tooltip="i18n.ts.search" iconOnly transparent rounded @click="setSearchQuery"><i class="ti ti-search"></i></MkButton> --> - <MkButton v-tooltip="i18n.ts.dateAndTime" iconOnly transparent rounded :active="date != null" @click="date = date == null ? Date.now() : null"><i class="ti ti-calendar-clock"></i></MkButton> - <MkButton v-tooltip="i18n.ts.reload" iconOnly transparent rounded @click="paginator.reload()"><i class="ti ti-refresh"></i></MkButton> - </div> - - <MkInput - v-if="date != null" - type="date" - :modelValue="formatDateTimeString(new Date(date), 'yyyy-MM-dd')" - @update:modelValue="date = new Date($event).getTime()" - > - </MkInput> - </div> + <MkPaginationControl v-if="props.withControl" v-model:order="order" v-model:date="date" style="margin-bottom: 10px" @reload="paginator.reload()"/> <!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 --> <Transition @@ -72,10 +54,8 @@ import { i18n } from '@/i18n.js'; import { prefer } from '@/preferences.js'; import { usePagination } from '@/composables/use-pagination.js'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; -import MkSelect from '@/components/MkSelect.vue'; -import MkInput from '@/components/MkInput.vue'; +import MkPaginationControl from '@/components/MkPaginationControl.vue'; import * as os from '@/os.js'; -import { formatDateTimeString } from '@/utility/format-time-string.js'; type Paginator = ReturnType<typeof usePagination<T['endpoint']>>; @@ -141,24 +121,6 @@ defineExpose({ opacity: 0; } -.controls { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 10px; -} - -.control { - display: flex; - align-items: center; - gap: 4px; -} - -.order { - flex: 1; - margin-right: 6px; -} - .more { margin-left: auto; margin-right: auto; diff --git a/packages/frontend/src/components/MkPaginationControl.vue b/packages/frontend/src/components/MkPaginationControl.vue new file mode 100644 index 0000000000..ce19005504 --- /dev/null +++ b/packages/frontend/src/components/MkPaginationControl.vue @@ -0,0 +1,83 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="$style.root"> + <div :class="$style.control"> + <MkSelect v-model="order" :class="$style.order" :items="[{ label: i18n.ts._order.newest, value: 'newest' }, { label: i18n.ts._order.oldest, value: 'oldest' }]"> + <template #prefix><i class="ti ti-arrows-sort"></i></template> + </MkSelect> + <MkButton v-if="canSearch" v-tooltip="i18n.ts.search" iconOnly transparent rounded :active="search" @click="search = !search"><i class="ti ti-search"></i></MkButton> + <MkButton v-if="canFilter" v-tooltip="i18n.ts.filter" iconOnly transparent rounded :active="filterOpened" @click="filterOpened = !filterOpened"><i class="ti ti-filter"></i></MkButton> + <MkButton v-tooltip="i18n.ts.dateAndTime" iconOnly transparent rounded :active="date != null" @click="date = date == null ? Date.now() : null"><i class="ti ti-calendar-clock"></i></MkButton> + <MkButton v-tooltip="i18n.ts.reload" iconOnly transparent rounded @click="emit('reload')"><i class="ti ti-refresh"></i></MkButton> + </div> + + <MkInput + v-if="date != null" + type="date" + :modelValue="formatDateTimeString(new Date(date), 'yyyy-MM-dd')" + @update:modelValue="date = new Date($event).getTime()" + > + </MkInput> + + <slot v-if="filterOpened"></slot> +</div> +</template> + +<script lang="ts" setup generic="T extends PagingCtx"> +import { ref, watch } from 'vue'; +import type { PagingCtx } from '@/composables/use-pagination.js'; +import MkButton from '@/components/MkButton.vue'; +import { i18n } from '@/i18n.js'; +import MkSelect from '@/components/MkSelect.vue'; +import MkInput from '@/components/MkInput.vue'; +import { formatDateTimeString } from '@/utility/format-time-string.js'; + +const props = withDefaults(defineProps<{ + canSearch?: boolean; + canFilter?: boolean; + filterOpened?: boolean; +}>(), { + canSearch: false, + canFilter: false, + filterOpened: false, +}); + +const emit = defineEmits<{ + (ev: 'reload'): void; +}>(); + +const search = ref(false); +const filterOpened = ref(props.filterOpened); + +const order = defineModel<'newest' | 'oldest'>('order', { + default: 'newest', +}); + +const date = defineModel<number | null>('date', { + default: null, +}); +</script> + +<style lang="scss" module> +.root { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 10px; +} + +.control { + display: flex; + align-items: center; + gap: 4px; +} + +.order { + flex: 1; + margin-right: 6px; +} +</style> |