feat: implement dropdown filter bar (#6009)

packages/ui/src/stories/base/MultiSelect.stories.ts

@@ -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,