@polymarbot/nuxt-layer-shadcn-ui 0.1.0

package/app/components/ui/SearchSelect/index.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts" generic="TValue extends string | number = string, TMeta = unknown">
+import { debounce } from 'lodash-es'
+import type { SelectOption } from '../Select/types'
+import type { SearchSelectProps } from './types'
+
+type Option = SelectOption<TValue, TMeta>
+
+const T = useTranslations('components.ui.SearchSelect')
+
+const props = withDefaults(defineProps<SearchSelectProps<TValue, TMeta>>(), {
+  modelValue: undefined,
+  defaultOptions: () => [],
+  autoLoad: false,
+  loadMethod: undefined,
+  loadValueOptionMethod: undefined,
+  loadLimit: 20,
+  placeholder: undefined,
+  disabled: false,
+  searchPlaceholder: undefined,
+  emptyText: undefined,
+  searchEmptyText: undefined,
+  createNewTo: undefined,
+  createNewText: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TValue | undefined]
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const keyword = ref('')
+const isLoading = ref(false)
+const fetchedValueOption = shallowRef<Option | null>(null)
+const pagination = usePagination<Option>([], { limit: props.loadLimit })
+
+// -- Data loading --
+
+async function fetchOptions (offset: number, limit: number) {
+  if (!props.loadMethod) return
+  const result = await props.loadMethod({ keyword: keyword.value, offset, limit })
+  pagination.update(result.items, { total: result.total })
+}
+
+async function loadMore () {
+  if (!props.loadMethod || isLoading.value) return
+  const next = pagination.next.value
+  if (!next) return
+
+  isLoading.value = true
+  try {
+    await fetchOptions(next.offset, next.limit)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function resetAndLoad () {
+  if (!props.loadMethod) return
+
+  fetchedValueOption.value = null
+  pagination.reset([], { limit: props.loadLimit })
+  isLoading.value = true
+  try {
+    await fetchOptions(0, props.loadLimit)
+
+    // Fetch value option if not found in loaded results
+    if (model.value != null && !isValueInOptions(model.value)) {
+      fetchValueOption(model.value)
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// -- Value option fetching --
+
+function isValueInOptions (value: TValue): boolean {
+  if (props.defaultOptions?.some(opt => opt.value === value)) return true
+  if (pagination.items.value.some(opt => opt.value === value)) return true
+  if (fetchedValueOption.value?.value === value) return true
+  return false
+}
+
+async function fetchValueOption (value: TValue) {
+  if (!props.loadValueOptionMethod) return
+  if (fetchedValueOption.value?.value === value) return
+
+  try {
+    fetchedValueOption.value = await props.loadValueOptionMethod(value)
+  } catch {
+    fetchedValueOption.value = null
+  }
+}
+
+// -- Displayed options (deduplication) --
+
+const displayedOptions = computed<Option[]>(() => {
+  const fetched = fetchedValueOption.value
+  const defaults = props.defaultOptions ?? []
+  const loaded = pagination.items.value
+
+  const priorityValues = new Set<TValue>(defaults.map(opt => opt.value))
+  const priorityOptions: Option[] = []
+
+  if (fetched && !priorityValues.has(fetched.value)) {
+    priorityOptions.push(fetched)
+    priorityValues.add(fetched.value)
+  }
+  priorityOptions.push(...defaults)
+
+  const dedupedLoaded = loaded.filter(opt => !priorityValues.has(opt.value))
+
+  return [ ...priorityOptions, ...dedupedLoaded ]
+})
+
+const hasMore = computed(() => !!props.loadMethod && !!pagination.next.value)
+
+// -- Filter (bypass client-side filtering, delegate to server) --
+
+const filterFunction: SelectFilterFunction = items => items
+
+// -- Search --
+
+const debouncedSearch = debounce(() => resetAndLoad(), 300)
+
+function handleSearch (value: string) {
+  keyword.value = value
+  debouncedSearch()
+}
+
+// -- Empty text --
+
+const computedEmptyText = computed(() => {
+  if (keyword.value) return props.searchEmptyText ?? T('noSearchItems')
+  return props.emptyText ?? T('noItems')
+})
+
+// -- Popover open/close --
+
+function handleOpen () {
+  if (props.loadMethod && displayedOptions.value.length === 0) {
+    resetAndLoad()
+  }
+}
+
+function handleClose () {
+  if (keyword.value) {
+    keyword.value = ''
+    debouncedSearch.cancel()
+    resetAndLoad()
+  }
+}
+
+// -- Auto-load --
+
+function shouldAutoLoad (): boolean {
+  if (!props.autoLoad || !props.loadMethod) return false
+  if (pagination.items.value.length === 0) return true
+  if (model.value != null) return !isValueInOptions(model.value)
+  return false
+}
+
+watch(
+  [ () => props.autoLoad, () => model.value ?? undefined ],
+  () => {
+    if (shouldAutoLoad()) resetAndLoad()
+  },
+  { immediate: true },
+)
+
+// -- Value option lookup for value slot --
+
+function findOptionByValue (value: TValue | undefined): Option | undefined {
+  if (value == null) return undefined
+  return displayedOptions.value.find(opt => opt.value === value)
+}
+
+defineExpose({ refresh: resetAndLoad })
+</script>
+
+<template>
+  <Select
+    v-model="model"
+    :options="displayedOptions"
+    :filter="filterFunction"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :searchPlaceholder="searchPlaceholder"
+    :emptyText="computedEmptyText"
+    @search="handleSearch"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <template
+      v-if="$slots.value"
+      #value="slotProps"
+    >
+      <slot
+        name="value"
+        v-bind="slotProps"
+        :option="findOptionByValue(model)"
+      />
+    </template>
+
+    <template
+      v-if="$slots.option"
+      #option="slotProps"
+    >
+      <slot
+        name="option"
+        v-bind="slotProps"
+      />
+    </template>
+
+    <template #listEnd>
+      <EffectIntersectionChecker
+        v-if="hasMore"
+        :disabled="isLoading"
+        class="flex items-center justify-center py-2"
+        @show="loadMore"
+      >
+        <Icon
+          name="loader-circle"
+          class="size-4 animate-spin text-muted-foreground"
+        />
+      </EffectIntersectionChecker>
+    </template>
+
+    <template
+      v-if="createNewTo || $slots.footer"
+      #footer
+    >
+      <slot name="footer">
+        <div class="border-t border-border">
+          <WebLink
+            :to="createNewTo!"
+            target="_blank"
+            unstyled
+            class="
+              flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground
+              transition-colors
+              hover:bg-accent
+            "
+          >
+            <Icon
+              name="plus"
+              class="size-4"
+            />
+            {{ createNewText ?? T('createNew') }}
+          </WebLink>
+        </div>
+      </slot>
+    </template>
+  </Select>
+</template>

package/app/components/ui/SearchSelect/types.ts

@@ -0,0 +1,39 @@
+import type { SelectOption } from '../Select/types'
+
+/** Result returned by loadMethod */
+export interface SearchSelectLoadMethodResult<V extends string | number = string, M = unknown> {
+  items: SelectOption<V, M>[]
+  total: number
+}
+
+/** Parameters passed to loadMethod */
+export interface SearchSelectLoadMethodParams {
+  keyword: string
+  offset: number
+  limit: number
+}
+
+export interface SearchSelectProps<V extends string | number = string, M = unknown> {
+  modelValue?: V
+  /** Default options displayed at the top (always visible, not affected by search) */
+  defaultOptions?: SelectOption<V, M>[]
+  /** Auto-load on mount or when selected value is not in options */
+  autoLoad?: boolean
+  /** Async function to load options */
+  loadMethod?: (params: SearchSelectLoadMethodParams) => Promise<SearchSelectLoadMethodResult<V, M>>
+  /** Async function to load a single option by value (called if value not found after first load) */
+  loadValueOptionMethod?: (value: V) => Promise<SelectOption<V, M> | null>
+  /** Items per request (default: 20) */
+  loadLimit?: number
+  placeholder?: string
+  disabled?: boolean
+  searchPlaceholder?: string
+  /** Message when no options available (no search keyword) */
+  emptyText?: string
+  /** Message when search returns no results */
+  searchEmptyText?: string
+  /** Link URL for "Create new" footer action */
+  createNewTo?: string
+  /** Custom text for "Create new" link */
+  createNewText?: string
+}

package/app/components/ui/Select/en.json

@@ -0,0 +1,6 @@
+{
+  "itemsSelected": "{count} selected",
+  "noItems": "No options",
+  "placeholder": "Please select",
+  "searchPlaceholder": "Search..."
+}

package/app/components/ui/Select/index.stories.ts

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Select from './index.vue'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select as any,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Select },
+    setup () {
+      const selected = ref<string>()
+      const filtered = ref<string>()
+      const multiple = ref<string[]>([])
+      const scrollable = ref<string>()
+      const grouped = ref<string>()
+
+      const frameworks = [
+        { label: 'React', value: 'react' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Angular', value: 'angular' },
+        { label: 'Svelte', value: 'svelte' },
+      ]
+
+      const withDisabled = [
+        { label: 'React', value: 'react' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Angular', value: 'angular', disabled: true },
+        { label: 'Svelte', value: 'svelte' },
+      ]
+
+      const manyOptions = Array.from({ length: 50 }, (_, i) => ({
+        label: `Option ${i + 1}`,
+        value: `option-${i + 1}`,
+      }))
+
+      const withGroups = [
+        { label: 'React', value: 'react', group: 'Frontend' },
+        { label: 'Vue', value: 'vue', group: 'Frontend' },
+        { label: 'Angular', value: 'angular', group: 'Frontend' },
+        { label: 'Node.js', value: 'node', group: 'Backend' },
+        { label: 'Django', value: 'django', group: 'Backend' },
+        { label: 'Rails', value: 'rails', group: 'Backend' },
+      ]
+
+      return { args, selected, filtered, multiple, scrollable, grouped, frameworks, withDisabled, manyOptions, withGroups }
+    },
+    template: `
+      <div class="space-y-10 max-w-sm">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Select
+            v-model="selected"
+            :options="frameworks"
+            v-bind="args"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected ?? 'none' }}</div>
+        </section>
+
+        <!-- With Filter -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Filter</h3>
+          <Select
+            v-model="filtered"
+            :options="manyOptions"
+            placeholder="Search and select"
+            filter
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ filtered ?? 'none' }}</div>
+        </section>
+
+        <!-- Multiple -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Multiple</h3>
+          <Select
+            v-model="multiple"
+            :options="frameworks"
+            placeholder="Select frameworks"
+            multiple
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ multiple.length > 0 ? multiple.join(', ') : 'none' }}</div>
+        </section>
+
+        <!-- With Disabled Options -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Disabled Options</h3>
+          <Select
+            :options="withDisabled"
+            placeholder="Select a framework"
+          />
+        </section>
+
+        <!-- Scrollable (50 items) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Scrollable (50 items)</h3>
+          <Select
+            v-model="scrollable"
+            :options="manyOptions"
+            placeholder="Select an option"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ scrollable ?? 'none' }}</div>
+        </section>
+
+        <!-- Grouped -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Grouped</h3>
+          <Select
+            v-model="grouped"
+            :options="withGroups"
+            placeholder="Select a framework"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ grouped ?? 'none' }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/Select/index.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts" generic="TValue extends string | number = string, TMeta = unknown">
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/command'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/input-group'
+import {
+  Popover as ShadcnPopover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/popover'
+import type { SelectOption, SelectProps } from './types'
+
+type Option = SelectOption<TValue, TMeta>
+
+const T = useTranslations('components.ui.Select')
+
+const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
+  options: () => [],
+  modelValue: undefined,
+  placeholder: undefined,
+  disabled: false,
+  filter: false,
+  searchPlaceholder: undefined,
+  emptyText: undefined,
+  multiple: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TValue | TValue[]]
+  'search': [value: string]
+  'open': []
+  'close': []
+}>()
+
+const open = ref(false)
+
+watch(open, value => {
+  if (value && props.disabled) {
+    open.value = false
+    return
+  }
+  value ? emit('open') : emit('close')
+})
+
+// -- Filter --
+
+const commandFilterFunction = computed(() => {
+  return typeof props.filter === 'function' ? props.filter : undefined
+})
+
+// -- Selection --
+
+function isSelected (value: TValue): boolean {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(value)
+  }
+  return props.modelValue === value
+}
+
+function handleSelect (optionValue: TValue) {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    const current = props.modelValue
+    const newValue = current.includes(optionValue)
+      ? current.filter(v => v !== optionValue)
+      : [ ...current, optionValue ]
+    emit('update:modelValue', newValue)
+  } else {
+    emit('update:modelValue', optionValue)
+    open.value = false
+  }
+}
+
+// -- Selected display --
+
+const selectedOption = computed(() => {
+  if (props.multiple) return undefined
+  return props.options?.find(opt => opt.value === props.modelValue)
+})
+
+const selectedOptions = computed(() => {
+  if (!props.multiple || !Array.isArray(props.modelValue)) return []
+  return props.modelValue
+    .map(val => props.options?.find(opt => opt.value === val))
+    .filter((opt): opt is Option => !!opt)
+})
+
+// -- Grouping --
+
+type OptionGroupEntry = { label: string | undefined, items: Option[] }
+
+const groupedOptions = computed<OptionGroupEntry[]>(() => {
+  const groups: OptionGroupEntry[] = []
+  const map = new Map<string | undefined, OptionGroupEntry>()
+
+  for (const opt of props.options ?? []) {
+    const key = opt.group
+    let group = map.get(key)
+    if (!group) {
+      group = { label: key, items: []}
+      map.set(key, group)
+      groups.push(group)
+    }
+    group.items.push(opt)
+  }
+
+  return groups
+})
+
+// -- Command modelValue (sync selection state with ListboxRoot) --
+
+const commandModelValue = computed(() => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.map(String)
+  }
+  return props.modelValue !== undefined ? String(props.modelValue) : ''
+})
+
+// -- Clear --
+
+const hasValue = computed(() => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.length > 0
+  }
+  return props.modelValue !== undefined && props.modelValue !== null
+})
+
+const showClearButton = computed(() => hasValue.value && !props.disabled)
+
+function handleClear (event: MouseEvent) {
+  event.stopPropagation()
+  if (props.multiple) {
+    emit('update:modelValue', [] as TValue[])
+  } else {
+    emit('update:modelValue', undefined as unknown as TValue)
+  }
+}
+</script>
+
+<template>
+  <ShadcnPopover v-model:open="open">
+    <PopoverTrigger asChild>
+      <InputGroup
+        role="combobox"
+        tabindex="0"
+        :aria-expanded="open"
+        :data-disabled="disabled || undefined"
+        :data-state="open ? 'open' : 'closed'"
+        class="
+          cursor-pointer
+          data-[state=open]:border-ring data-[state=open]:ring-[3px]
+          data-[state=open]:ring-ring/50
+        "
+      >
+        <span
+          class="
+            line-clamp-1 flex flex-1 items-center gap-2 px-3 py-1 text-base
+            whitespace-nowrap
+            md:text-sm
+          "
+        >
+          <template v-if="multiple && selectedOptions.length > 0">
+            <slot
+              name="value"
+              :options="selectedOptions"
+            >
+              {{ selectedOptions.length >= 3 ? T('itemsSelected', { count: selectedOptions.length }) : selectedOptions.map(opt => opt.label).join(', ') }}
+            </slot>
+          </template>
+          <template v-else-if="!multiple && selectedOption">
+            <slot
+              name="value"
+              :option="selectedOption"
+            >
+              {{ selectedOption.label }}
+            </slot>
+          </template>
+          <span
+            v-else
+            class="text-muted-foreground"
+          >
+            {{ placeholder ?? T('placeholder') }}
+          </span>
+        </span>
+        <InputGroupAddon
+          v-if="showClearButton"
+          align="inline-end"
+        >
+          <InputGroupButton
+            size="icon-xs"
+            @click="handleClear"
+          >
+            <Icon name="x" />
+          </InputGroupButton>
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <Icon
+            name="chevron-down"
+            class="size-4 opacity-50"
+          />
+        </InputGroupAddon>
+      </InputGroup>
+    </PopoverTrigger>
+    <PopoverContent class="w-(--reka-popover-trigger-width) p-0">
+      <Command
+        :modelValue="commandModelValue"
+        :filterFunction="commandFilterFunction"
+        :multiple="multiple"
+        highlightOnHover
+        @update:searchTerm="(value: string) => emit('search', value)"
+      >
+        <CommandInput
+          v-if="!!filter"
+          :placeholder="searchPlaceholder ?? T('searchPlaceholder')"
+        />
+        <CommandList>
+          <CommandEmpty>
+            {{ emptyText ?? T('noItems') }}
+          </CommandEmpty>
+
+          <template
+            v-for="(group, index) in groupedOptions"
+            :key="group.label ?? '_ungrouped'"
+          >
+            <CommandSeparator v-if="index > 0 && group.label" />
+            <CommandGroup :heading="group.label">
+              <CommandItem
+                v-for="option in group.items"
+                :key="String(option.value)"
+                :value="String(option.value)"
+                :disabled="option.disabled"
+                @select="handleSelect(option.value)"
+              >
+                <slot
+                  name="option"
+                  :option="option"
+                  :selected="isSelected(option.value)"
+                >
+                  {{ option.label }}
+                </slot>
+                <Icon
+                  name="check"
+                  :class="cn(
+                    'ml-auto size-4 shrink-0',
+                    isSelected(option.value) ? 'opacity-100' : 'opacity-0',
+                  )"
+                />
+              </CommandItem>
+            </CommandGroup>
+          </template>
+
+          <slot name="listEnd" />
+        </CommandList>
+      </Command>
+      <slot name="footer" />
+    </PopoverContent>
+  </ShadcnPopover>
+</template>