@revojs/ui 0.2.4 → 0.2.6

package/dist/components/select.d.ts

@@ -10,6 +10,7 @@ export interface SelectProps {
     options: Array<SelectOption>;
     label?: string;
     placeholder?: string;
+    emptyLabel?: string;
     name?: string;
     required?: boolean;
     disabled?: boolean;

package/dist/vue/components/button.vue

@@ -1,7 +1,7 @@
 <template>
     <component
         :is="is"
-        class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui border border-transparent font-[inherit] font-medium leading-none no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:opacity-50"
+        class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui border border-transparent font-[inherit] font-medium leading-normal no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:opacity-50"
         :class="[fonts[font], layouts[layout], sizes[size], texts[text], variants[variant]]"
         :type="attributes.type ?? 'button'"
         :disabled="disabled"

package/dist/vue/components/select.vue

@@ -6,62 +6,91 @@
 
         <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
 
-        <Popover
-            v-model="open"
-            class="w-full"
-            content-class="min-w-56 p-1"
-            trigger-class="w-full min-w-48"
-            trigger-layout="left"
-            match-trigger-width
-            :disabled="disabled"
+        <div ref="container">
+            <div
+                ref="trigger"
+                class="flex min-h-10 w-full cursor-text items-center gap-2 rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
+                :class="disabled ? 'cursor-not-allowed opacity-50' : ''"
+                @click="search?.focus()"
+            >
+                <input
+                    ref="search"
+                    v-model="query"
+                    role="combobox"
+                    class="w-full min-w-0 bg-transparent py-2 outline-none placeholder:opacity-50"
+                    :placeholder="placeholder ?? 'Select'"
+                    :aria-expanded="open"
+                    :aria-controls="listboxId"
+                    aria-autocomplete="list"
+                    :disabled="disabled"
+                    @focus="open = true"
+                    @input="open = true"
+                    @keydown.enter.prevent="open ? filtered.length > 0 && select(filtered[0]) : (open = true)"
+                    @keydown.escape="open = false"
+                    @keydown.arrow-down.prevent="open = true"
+                />
+
+                <button
+                    type="button"
+                    tabindex="-1"
+                    class="shrink-0 opacity-60 transition-transform"
+                    :class="open ? 'rotate-180' : ''"
+                    :disabled="disabled"
+                    @click.stop="open = !open"
+                >
+                    <Icon name="arrow-down-01" />
+                </button>
+            </div>
+        </div>
+
+        <div
+            ref="dropdown"
+            popover="manual"
+            :id="listboxId"
+            role="listbox"
+            :aria-label="label"
+            class="m-0 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
+            :style="panel"
         >
-            <template #trigger>
-                <span class="min-w-0 flex-1 truncate text-left" :class="valueVariants[valueState]">
-                    <slot name="value" :option="selected">
-                        {{ selected?.label ?? placeholder ?? "Select" }}
+            <Button
+                v-for="option in filtered"
+                :key="option.value"
+                class="w-full"
+                variant="ghost"
+                layout="left"
+                :disabled="option.disabled"
+                role="option"
+                :aria-selected="option.value === modelValue"
+                @click="select(option)"
+            >
+                <span class="flex w-full items-center justify-between gap-4 text-left">
+                    <slot name="option" :option="option" :selected="option.value === modelValue">
+                        {{ option.label }}
                     </slot>
+
+                    <Icon v-if="option.value === modelValue" name="tick-02" />
                 </span>
+            </Button>
 
-                <Icon name="arrow-down-01" class="opacity-60" />
-            </template>
-
-            <div role="listbox" :aria-label="label">
-                <Button
-                    v-for="option in options"
-                    :key="option.value"
-                    class="w-full"
-                    variant="ghost"
-                    layout="left"
-                    :disabled="option.disabled"
-                    role="option"
-                    :aria-selected="option.value === modelValue"
-                    @click="select(option)"
-                >
-                    <span class="flex w-full items-center justify-between gap-4 text-left">
-                        <slot name="option" :option="option" :selected="option.value === modelValue">
-                            {{ option.label }}
-                        </slot>
-
-                        <Icon v-if="option.value === modelValue" name="tick-02" />
-                    </span>
-                </Button>
-            </div>
-        </Popover>
+            <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
+                {{ emptyLabel }}
+            </p>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import type { SelectOption, SelectValue, SelectValueState } from "../../components/select.ts";
+import { computed, nextTick, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
+import type { SelectOption, SelectValue } from "../../components/select.ts";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
-import Popover from "./popover.vue";
 
 const {
     modelValue = undefined,
     options,
     label = undefined,
     placeholder = undefined,
+    emptyLabel = "No results found",
     name = undefined,
     required = false,
     disabled = false,
@@ -70,6 +99,7 @@ const {
     options: Array<SelectOption>;
     label?: string;
     placeholder?: string;
+    emptyLabel?: string;
     name?: string;
     required?: boolean;
     disabled?: boolean;
@@ -81,14 +111,35 @@ const emit = defineEmits<{
 
 const open = ref(false);
 
+const container = useTemplateRef("container");
+
+const trigger = useTemplateRef("trigger");
+
+const search = useTemplateRef("search");
+
+const dropdown = useTemplateRef("dropdown");
+
+const listboxId = `select-${useId()}`;
+
 const selected = computed(() => options.find((option) => option.value === modelValue));
 
-const valueState = computed<SelectValueState>(() => (selected.value ? "selected" : "placeholder"));
+const query = ref(selected.value?.label ?? "");
 
-const valueVariants: Record<SelectValueState, string> = {
-    placeholder: "opacity-60",
-    selected: "",
-};
+const panel = ref<Record<string, string>>({});
+
+const filtered = computed(() => {
+    const term = query.value.trim().toLowerCase();
+
+    return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
+});
+
+function handlePointerDown(event: PointerEvent) {
+    const target = event.target as Node;
+
+    if (!container.value?.contains(target) && !dropdown.value?.contains(target)) {
+        open.value = false;
+    }
+}
 
 function select(option: SelectOption) {
     if (!option.disabled) {
@@ -96,4 +147,79 @@ function select(option: SelectOption) {
         open.value = false;
     }
 }
+
+function updatePanel() {
+    const anchor = trigger.value;
+    const list = dropdown.value;
+
+    if (!anchor || !list) {
+        return;
+    }
+
+    const bounds = anchor.getBoundingClientRect();
+    const height = list.offsetHeight;
+    const width = bounds.width;
+    const left = Math.min(Math.max(8, bounds.left), window.innerWidth - width - 8);
+    const top =
+        bounds.bottom + height + 8 <= window.innerHeight ? bounds.bottom + 8 : Math.max(8, bounds.top - height - 8);
+
+    panel.value = {
+        bottom: "auto",
+        left: `${left}px`,
+        position: "fixed",
+        right: "auto",
+        top: `${top}px`,
+        width: `${width}px`,
+    };
+}
+
+watch(selected, (value) => {
+    if (!open.value) {
+        query.value = value?.label ?? "";
+    }
+});
+
+watch(open, async (value) => {
+    const list = dropdown.value;
+
+    if (!list) {
+        return;
+    }
+
+    if (value && !list.matches(":popover-open")) {
+        query.value = "";
+
+        document.addEventListener("pointerdown", handlePointerDown);
+
+        window.addEventListener("resize", updatePanel);
+
+        window.addEventListener("scroll", updatePanel, true);
+
+        list.showPopover();
+
+        await nextTick();
+
+        updatePanel();
+
+        search.value?.focus();
+    } else if (!value && list.matches(":popover-open")) {
+        document.removeEventListener("pointerdown", handlePointerDown);
+
+        window.removeEventListener("resize", updatePanel);
+
+        window.removeEventListener("scroll", updatePanel, true);
+
+        list.hidePopover();
+
+        query.value = selected.value?.label ?? "";
+    }
+});
+
+onUnmounted(() => {
+    document.removeEventListener("pointerdown", handlePointerDown);
+
+    window.removeEventListener("resize", updatePanel);
+
+    window.removeEventListener("scroll", updatePanel, true);
+});
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.4",
+    "version": "0.2.6",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -45,6 +45,6 @@
         "@vitejs/plugin-vue": "^6.0.9"
     },
     "optionalDependencies": {
-        "vue": "^3.5.42"
+        "vue": "^3.5.43"
     }
 }