feat: implement dropdown filter bar (#6009)
This commit is contained in:
Truman Gao
240
packages/ui/src/stories/base/DropdownFilterBar.stories.ts
Normal file
240
packages/ui/src/stories/base/DropdownFilterBar.stories.ts
Normal file
@@ -0,0 +1,240 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import DropdownFilterBar from '../../components/base/DropdownFilterBar.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/DropdownFilterBar',
|
||||
component: DropdownFilterBar,
|
||||
} satisfies Meta<typeof DropdownFilterBar>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const defaultCategories = [
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Status',
|
||||
options: [
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'archived', label: 'Archived' },
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'Type',
|
||||
options: [
|
||||
{ value: 'mod', label: 'Mod' },
|
||||
{ value: 'plugin', label: 'Plugin' },
|
||||
{ value: 'resourcepack', label: 'Resource Pack' },
|
||||
{ value: 'modpack', label: 'Modpack' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const searchableCategories = [
|
||||
{
|
||||
key: 'country',
|
||||
label: 'Country',
|
||||
searchable: true,
|
||||
searchPlaceholder: 'Search countries...',
|
||||
options: [
|
||||
{ value: 'US', label: 'United States', searchTerms: ['USA', 'America'] },
|
||||
{ value: 'CA', label: 'Canada' },
|
||||
{ value: 'DE', label: 'Germany', searchTerms: ['Deutschland'] },
|
||||
{ value: 'JP', label: 'Japan' },
|
||||
{ value: 'BR', label: 'Brazil' },
|
||||
{ value: 'AU', label: 'Australia' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'version',
|
||||
label: 'Version',
|
||||
searchable: true,
|
||||
searchPlaceholder: 'Search versions...',
|
||||
submenuClass: 'w-[360px]',
|
||||
options: [
|
||||
{ value: '1.21.5', label: '1.21.5' },
|
||||
{ value: '1.21.4', label: '1.21.4' },
|
||||
{ value: '1.20.1', label: '1.20.1' },
|
||||
{ value: '1.19.2', label: '1.19.2' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({})
|
||||
return { categories: defaultCategories, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {},
|
||||
categories: defaultCategories,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithAppliedFilters: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({
|
||||
status: ['active'],
|
||||
type: ['mod', 'plugin'],
|
||||
})
|
||||
return { categories: defaultCategories, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {
|
||||
status: ['active'],
|
||||
type: ['mod', 'plugin'],
|
||||
},
|
||||
categories: defaultCategories,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithFilterIcon: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({
|
||||
status: ['draft'],
|
||||
})
|
||||
return { categories: defaultCategories, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories" use-filter-icon />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {
|
||||
status: ['draft'],
|
||||
},
|
||||
categories: defaultCategories,
|
||||
useFilterIcon: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const SearchableCategories: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({})
|
||||
return { categories: searchableCategories, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {},
|
||||
categories: searchableCategories,
|
||||
},
|
||||
}
|
||||
|
||||
export const CustomControls: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({})
|
||||
const releaseOnly = ref(true)
|
||||
const categories = [
|
||||
{
|
||||
key: 'version',
|
||||
label: 'Version',
|
||||
searchable: true,
|
||||
searchPlaceholder: 'Search versions...',
|
||||
submenuClass: 'w-[360px]',
|
||||
options: [
|
||||
{ value: '1.21.5', label: '1.21.5' },
|
||||
{ value: '1.21.4', label: '1.21.4' },
|
||||
{ value: '1.20.1', label: '1.20.1' },
|
||||
{ value: '25w15a', label: '25w15a' },
|
||||
],
|
||||
},
|
||||
]
|
||||
return { categories, releaseOnly, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories">
|
||||
<template #search-actions>
|
||||
<label class="ml-3 flex h-10 items-center gap-2 text-sm font-semibold text-secondary">
|
||||
<input v-model="releaseOnly" type="checkbox" />
|
||||
Release
|
||||
</label>
|
||||
</template>
|
||||
<template #category-footer="{ setSelectedValues }">
|
||||
<div class="border-0 border-t border-solid border-surface-5 px-6 py-2.5">
|
||||
<button
|
||||
type="button"
|
||||
class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
|
||||
@click="setSelectedValues(['1.21.5', '1.21.4'])"
|
||||
>
|
||||
Select recent versions
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DropdownFilterBar>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {},
|
||||
categories: searchableCategories,
|
||||
},
|
||||
}
|
||||
|
||||
export const EmptyCategory: Story = {
|
||||
render: () => ({
|
||||
components: { DropdownFilterBar },
|
||||
setup() {
|
||||
const selected = ref<Record<string, string[]>>({})
|
||||
const categories = [
|
||||
{
|
||||
key: 'empty',
|
||||
label: 'Empty',
|
||||
searchable: true,
|
||||
searchPlaceholder: 'Search empty options...',
|
||||
options: [],
|
||||
},
|
||||
]
|
||||
return { categories, selected }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DropdownFilterBar v-model="selected" :categories="categories" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
modelValue: {},
|
||||
categories: [
|
||||
{
|
||||
key: 'empty',
|
||||
label: 'Empty',
|
||||
searchable: true,
|
||||
searchPlaceholder: 'Search empty options...',
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CheckIcon } from '@modrinth/assets'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import MultiSelect from '../../components/base/MultiSelect.vue'
|
||||
|
||||
@@ -61,6 +62,89 @@ export const WithSelectAll: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const WithSelectionActions: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
searchable: true,
|
||||
showSelectionActions: true,
|
||||
searchPlaceholder: 'Search versions',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithTopSlot: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
modelValue: [],
|
||||
searchable: true,
|
||||
showSelectionActions: true,
|
||||
searchPlaceholder: 'Search languages',
|
||||
placeholder: 'All languages',
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { CheckIcon, MultiSelect },
|
||||
setup() {
|
||||
const selected = ref(args.modelValue)
|
||||
const isAllLanguagesSelected = computed(() => selected.value.length === 0)
|
||||
const selectAllLanguages = () => {
|
||||
selected.value = []
|
||||
}
|
||||
return { args, isAllLanguagesSelected, selectAllLanguages, selected }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="width: 400px;">
|
||||
<MultiSelect v-bind="args" v-model="selected">
|
||||
<template #top>
|
||||
<div class="px-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full cursor-pointer items-center gap-2.5 rounded-xl border-0 bg-transparent p-3 text-left text-contrast shadow-none transition-colors duration-150 hover:bg-surface-5 focus:bg-surface-5"
|
||||
:aria-selected="isAllLanguagesSelected"
|
||||
role="option"
|
||||
@click="selectAllLanguages"
|
||||
@keydown.enter.stop
|
||||
@keydown.space.stop
|
||||
>
|
||||
<span
|
||||
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
|
||||
:class="
|
||||
isAllLanguagesSelected
|
||||
? 'border-button-border bg-brand text-brand-inverted'
|
||||
: 'border-surface-5 bg-surface-2'
|
||||
"
|
||||
>
|
||||
<CheckIcon v-if="isAllLanguagesSelected" aria-hidden="true" stroke-width="3" />
|
||||
</span>
|
||||
<span class="font-semibold leading-tight text-primary">All languages</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const DropdownMinWidth: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
modelValue: ['en'],
|
||||
dropdownMinWidth: 320,
|
||||
placeholder: 'Languages',
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selected = ref(args.modelValue)
|
||||
return { args, selected }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="width: 11rem;">
|
||||
<MultiSelect v-bind="args" v-model="selected" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const ManySelected: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
@@ -77,6 +161,94 @@ export const TwoTagRows: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const CustomInputContent: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
modelValue: ['en', 'es'],
|
||||
fitContent: true,
|
||||
showChevron: false,
|
||||
clearable: false,
|
||||
triggerClass:
|
||||
'h-10 max-w-[16rem] border border-solid border-surface-5 bg-surface-4 px-3 py-1.5 hover:bg-surface-5 hover:brightness-100 active:brightness-100',
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selected = ref(args.modelValue)
|
||||
const selectedLabel = () => {
|
||||
if (selected.value.length === 0) return 'All languages'
|
||||
if (selected.value.length === 1) {
|
||||
const option = args.options.find((item) => item.value === selected.value[0])
|
||||
return option?.label ?? '1 selected'
|
||||
}
|
||||
return `${selected.value.length} selected`
|
||||
}
|
||||
return { args, selected, selectedLabel }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="width: 400px;">
|
||||
<MultiSelect v-bind="args" v-model="selected">
|
||||
<template #input-content="{ isOpen }">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="truncate">
|
||||
<span class="font-medium">Languages:</span>
|
||||
<span class="ml-1 font-semibold text-contrast">{{ selectedLabel() }}</span>
|
||||
</span>
|
||||
<span
|
||||
class="text-secondary transition-transform duration-150"
|
||||
:style="{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
|
||||
>
|
||||
⌄
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="-mr-1 inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent text-secondary shadow-none transition-colors hover:bg-transparent hover:text-contrast"
|
||||
@click.stop="selected = []"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const WithBottomSlot: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
modelValue: ['en', 'es'],
|
||||
searchable: true,
|
||||
includeSelectAllOption: true,
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selected = ref(args.modelValue)
|
||||
const minimum = ref('')
|
||||
return { args, selected, minimum }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="width: 400px;">
|
||||
<MultiSelect v-bind="args" v-model="selected">
|
||||
<template #bottom>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--color-surface-5); padding: 0.75rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);">Projects above</span>
|
||||
<input
|
||||
v-model="minimum"
|
||||
type="text"
|
||||
style="height: 2rem; width: 5rem; border: 1px solid var(--color-surface-5); border-radius: 0.5rem; background: var(--color-surface-3); color: var(--color-text-primary); text-align: center; font-weight: 600;"
|
||||
/>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);">downloads</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const NoOptions: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
|
||||
Reference in New Issue
Block a user