@slexn/codecenter-ui 1.0.0

package/src/components/ui/model-selector/ModelSelector.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
+import { Check, ChevronDown, Search, X } from "@lucide/vue"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+import Dialog from "../dialog/Dialog.vue"
+import DialogContent from "../dialog/DialogContent.vue"
+import DialogTitle from "../dialog/DialogTitle.vue"
+import DialogTrigger from "../dialog/DialogTrigger.vue"
+import type {
+  ModelSelectorChangePayload,
+  ModelSelectorMode,
+  ModelSelectorOption,
+} from "./types"
+
+interface ModelSelectorProps {
+  class?: HTMLAttributes["class"]
+  contentClass?: HTMLAttributes["class"]
+  dialogClass?: HTMLAttributes["class"]
+  disabled?: boolean
+  emptyText?: string
+  label?: string
+  modalThreshold?: number
+  modalTitle?: string
+  mode?: ModelSelectorMode
+  modelValue?: string
+  models?: ModelSelectorOption[]
+  placeholder?: string
+  searchPlaceholder?: string
+  size?: "default" | "sm"
+  triggerClass?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<ModelSelectorProps>(), {
+  disabled: false,
+  emptyText: "No models found.",
+  label: "Model",
+  modalThreshold: 8,
+  modalTitle: "Select model",
+  mode: "auto",
+  modelValue: "",
+  models: () => [],
+  placeholder: "Select model",
+  searchPlaceholder: "Search models",
+  size: "default",
+})
+
+const emit = defineEmits<{
+  change: [payload: ModelSelectorChangePayload]
+  "update:modelValue": [value: string]
+}>()
+
+const dialogOpen = ref(false)
+const searchQuery = ref("")
+const searchInputRef = ref<HTMLInputElement | null>(null)
+
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => selectModel(value),
+})
+const selectedModel = computed(() =>
+  props.models.find((model) => model.value === props.modelValue),
+)
+const shouldUseDialog = computed(() => {
+  if (props.mode === "dialog") return true
+  if (props.mode === "select") return false
+
+  return props.models.length > props.modalThreshold
+})
+const normalizedSearchQuery = computed(() => normalizeSearchText(searchQuery.value))
+const filteredModels = computed(() => {
+  if (!normalizedSearchQuery.value) return props.models
+
+  return props.models.filter((model) =>
+    normalizeSearchText([
+      model.label,
+      model.value,
+    ].filter(Boolean).join(" ")).includes(normalizedSearchQuery.value),
+  )
+})
+const hasSelection = computed(() => Boolean(selectedModel.value))
+
+watch(dialogOpen, (open) => {
+  if (!open) {
+    searchQuery.value = ""
+    return
+  }
+
+  void nextTick(() => searchInputRef.value?.focus())
+})
+
+function normalizeSearchText(value: string) {
+  return value.trim().toLowerCase().replace(/\s+/g, " ")
+}
+
+function selectModel(value: string) {
+  const option = props.models.find((model) => model.value === value)
+
+  if (!option || option.disabled) return
+
+  emit("update:modelValue", value)
+  emit("change", {
+    option,
+    value,
+  })
+}
+
+function selectDialogModel(model: ModelSelectorOption) {
+  if (model.disabled) return
+
+  selectModel(model.value)
+  dialogOpen.value = false
+}
+
+function clearSearch() {
+  searchQuery.value = ""
+  void nextTick(() => searchInputRef.value?.focus())
+}
+
+function closeDialog() {
+  dialogOpen.value = false
+}
+</script>
+
+<template>
+  <div
+    data-slot="model-selector"
+    :class="cn('inline-flex min-w-0', props.class)"
+  >
+    <Select
+      v-if="!shouldUseDialog"
+      v-model="selectedValue"
+      :disabled="props.disabled"
+    >
+      <SelectTrigger
+        :aria-label="props.label"
+        :size="props.size"
+        :class="cn('min-w-0 max-w-full', props.triggerClass)"
+      >
+        <span
+          data-slot="select-value"
+          :class="cn(
+            'inline-flex min-w-0 items-center gap-2',
+            !hasSelection && 'text-muted-foreground',
+          )"
+        >
+          <component
+            :is="selectedModel?.icon"
+            v-if="selectedModel?.icon"
+            data-slot="model-selector-icon"
+          />
+          <span class="truncate">
+            {{ selectedModel?.label ?? props.placeholder }}
+          </span>
+        </span>
+      </SelectTrigger>
+      <SelectContent
+        search
+        :empty-text="props.emptyText"
+        :search-placeholder="props.searchPlaceholder"
+        :class="cn('w-72', props.contentClass)"
+      >
+        <SelectItem
+          v-for="model in props.models"
+          :key="model.value"
+          :disabled="model.disabled"
+          :text-value="model.label"
+          :value="model.value"
+        >
+          <span class="inline-flex min-w-0 items-center gap-2">
+            <component
+              :is="model.icon"
+              v-if="model.icon"
+              data-slot="model-selector-icon"
+            />
+            <span class="truncate">{{ model.label }}</span>
+          </span>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+
+    <Dialog
+      v-else
+      v-model:open="dialogOpen"
+    >
+      <DialogTrigger as-child>
+        <button
+          data-slot="model-selector-trigger"
+          :data-size="props.size"
+          :data-placeholder="hasSelection ? undefined : ''"
+          type="button"
+          :aria-label="props.label"
+          :disabled="props.disabled"
+          :class="cn(
+            'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit min-w-0 max-w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+            props.triggerClass,
+          )"
+        >
+          <span
+            data-slot="model-selector-value"
+            class="inline-flex min-w-0 items-center gap-2"
+          >
+            <component
+              :is="selectedModel?.icon"
+              v-if="selectedModel?.icon"
+              data-slot="model-selector-icon"
+            />
+            <span class="truncate">
+              {{ selectedModel?.label ?? props.placeholder }}
+            </span>
+          </span>
+          <ChevronDown class="size-4 opacity-50" />
+        </button>
+      </DialogTrigger>
+
+      <DialogContent
+        :aria-describedby="undefined"
+        :show-close-button="false"
+        :class="
+          cn(
+            'left-[50vw] w-[calc(100vw-4rem)] max-w-[calc(100vw-4rem)] gap-5 p-0 sm:max-w-2xl',
+            props.dialogClass,
+          )
+        "
+      >
+        <DialogTitle class="sr-only">{{ props.modalTitle }}</DialogTitle>
+
+        <div
+          data-slot="model-selector-dialog-body"
+          class="flex min-h-0 flex-col"
+        >
+          <div class="border-b px-4 py-3">
+            <div class="flex items-center gap-2">
+              <div class="relative min-w-0 flex-1">
+                <Search
+                  aria-hidden="true"
+                  class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+                />
+                <input
+                  ref="searchInputRef"
+                  v-model="searchQuery"
+                  data-slot="model-selector-search"
+                  type="text"
+                  role="searchbox"
+                  autocomplete="off"
+                  :placeholder="props.searchPlaceholder"
+                  class="h-9 w-full rounded-md border border-input bg-transparent py-1.5 pr-9 pl-9 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <button
+                  v-if="searchQuery"
+                  data-slot="model-selector-search-clear"
+                  type="button"
+                  aria-label="Clear search"
+                  class="absolute top-1/2 right-1.5 flex size-7 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                  @click="clearSearch"
+                >
+                  <X aria-hidden="true" class="size-4" />
+                </button>
+              </div>
+              <button
+                data-slot="model-selector-close"
+                type="button"
+                aria-label="Close"
+                class="flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                @click="closeDialog"
+              >
+                <X aria-hidden="true" class="size-4" />
+              </button>
+            </div>
+          </div>
+
+          <div
+            data-slot="model-selector-list"
+            role="listbox"
+            :aria-label="props.label"
+            class="max-h-[min(60vh,28rem)] overflow-y-auto p-2"
+          >
+            <button
+              v-for="model in filteredModels"
+              :key="model.value"
+              data-slot="model-selector-option"
+              type="button"
+              role="option"
+              :aria-selected="model.value === props.modelValue"
+              :disabled="model.disabled"
+              :class="cn(
+                'group flex w-full min-w-0 items-center gap-3 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground',
+              )"
+              @click="selectDialogModel(model)"
+            >
+              <component
+                :is="model.icon"
+                v-if="model.icon"
+                data-slot="model-selector-option-icon"
+                class="size-4 shrink-0"
+              />
+              <span
+                data-slot="model-selector-option-label"
+                class="min-w-0 flex-1 truncate font-medium"
+              >
+                {{ model.label }}
+              </span>
+              <Check
+                v-if="model.value === props.modelValue"
+                aria-hidden="true"
+                class="size-4 shrink-0"
+              />
+            </button>
+
+            <div
+              v-if="!filteredModels.length"
+              data-slot="model-selector-empty"
+              class="px-3 py-10 text-center text-sm text-muted-foreground"
+            >
+              {{ props.emptyText }}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

package/src/components/ui/model-selector/index.ts

@@ -0,0 +1,6 @@
+export { default as ModelSelector } from "./ModelSelector.vue"
+export type {
+  ModelSelectorChangePayload,
+  ModelSelectorMode,
+  ModelSelectorOption,
+} from "./types"

package/src/components/ui/model-selector/types.ts

@@ -0,0 +1,15 @@
+import type { Component } from "vue"
+
+export type ModelSelectorMode = "auto" | "dialog" | "select"
+
+export interface ModelSelectorOption {
+  disabled?: boolean
+  icon?: Component
+  label: string
+  value: string
+}
+
+export interface ModelSelectorChangePayload {
+  option?: ModelSelectorOption
+  value: string
+}