@stachelock/ui 0.2.13 → 0.3.0

package/dist/SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js

@@ -0,0 +1,303 @@
+import { defineComponent as O, watch as _, onBeforeUnmount as G, ref as B, computed as m, createElementBlock as d, openBlock as n, createVNode as i, unref as r, withCtx as u, createElementVNode as c, createBlock as g, normalizeClass as f, createCommentVNode as v, resolveDynamicComponent as z, toDisplayString as h, Teleport as X, Transition as J, normalizeStyle as Q, withModifiers as H, Fragment as Y, renderList as Z } from "vue";
+import { useField as ee } from "vee-validate";
+import le from "./forms/FormFieldWrapper.js";
+import { g as se } from "./id-DafBB_QF.js";
+import { I as te, j as ae, A as re, F as oe } from "./listbox-p2_4hUSD.js";
+import { r as ne } from "./ChevronUpDownIcon-Bq_fsgrb.js";
+import { r as ie } from "./CheckIcon-BGlsmVwT.js";
+const de = { class: "sl-w-full" }, ue = { class: "sl-relative" }, ce = { class: "sl-flex sl-items-center sl-gap-2" }, pe = {
+  key: 1,
+  class: "sl-block sl-truncate sl-text-left"
+}, me = {
+  key: 2,
+  class: "sl-block sl-truncate sl-text-left sl-text-gray-500 dark:sl-text-slate-300"
+}, fe = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, ve = { class: "sl-block sl-truncate sl-font-medium" }, he = { class: "sl-flex sl-items-center sl-gap-2" }, be = {
+  key: 0,
+  class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
+}, ge = { key: 0 }, C = 224, y = 4, Ce = /* @__PURE__ */ O({
+  __name: "SelectInput",
+  props: {
+    name: {},
+    items: {},
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    rules: {},
+    validateOnMount: { type: Boolean },
+    successMessage: {},
+    tertiaryLabel: {},
+    buttonClass: {},
+    multiple: { type: Boolean, default: !1 },
+    showAll: { type: Boolean, default: !1 },
+    itemKey: { default: "id" },
+    itemText: { default: "name" },
+    modelValue: {},
+    boxShadow: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(N, { emit: P }) {
+    const R = O({
+      props: {
+        open: { type: Boolean, required: !0 },
+        updateFn: { type: Function, required: !0 }
+      },
+      setup(e) {
+        const l = () => {
+          e.open && e.updateFn();
+        };
+        return _(() => e.open, (a) => {
+          a ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
+        }, { immediate: !0 }), G(() => {
+          window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
+        }), () => null;
+      }
+    }), V = B(null), w = B({
+      top: "0px",
+      left: "0px",
+      width: "200px"
+    });
+    function M() {
+      const e = V.value?.$el;
+      if (!e) return;
+      const l = e.getBoundingClientRect(), a = window.innerHeight, o = a - l.bottom - y, p = l.top - y;
+      o < C && p > o ? w.value = {
+        bottom: `${a - l.top + y}px`,
+        left: `${l.left}px`,
+        width: `${l.width}px`,
+        maxHeight: `${Math.min(p, C)}px`
+      } : w.value = {
+        top: `${l.bottom + y}px`,
+        left: `${l.left}px`,
+        width: `${l.width}px`,
+        maxHeight: `${Math.min(o, C)}px`
+      };
+    }
+    const t = N, K = P, S = se(t.name), { value: F, errorMessage: $, handleChange: E, meta: b, setTouched: j } = ee(
+      () => t.name,
+      t.rules,
+      {
+        validateOnMount: t.validateOnMount,
+        initialValue: t.modelValue
+      }
+    ), s = B(
+      t.multiple ? Array.isArray(t.modelValue) ? t.modelValue : [] : t.modelValue
+    );
+    _(
+      () => t.modelValue,
+      (e) => {
+        if (t.multiple) {
+          const l = Array.isArray(e) ? e : [];
+          l !== s.value && (s.value = l, F.value = l);
+        } else
+          e !== s.value && (s.value = e, F.value = e);
+      },
+      { immediate: !0 }
+    ), _(
+      s,
+      (e) => {
+        K("update:modelValue", e);
+      }
+    );
+    const U = m(() => {
+      const e = [
+        "sl-relative",
+        "sl-w-full",
+        "sl-cursor-default",
+        "sl-rounded-md",
+        "sl-bg-white",
+        "dark:sl-bg-slate-900",
+        "sl-text-gray-900",
+        "dark:sl-text-slate-100",
+        "sl-py-2",
+        "sl-pl-3",
+        "sl-pr-10",
+        "sl-text-left",
+        "sl-border",
+        "sl-text-sm",
+        "focus:sl-outline-none",
+        "focus:sl-ring-2",
+        "focus:sl-ring-stachelock-500",
+        "focus:sl-border-stachelock-500",
+        "sl-transition-all",
+        "sl-duration-200"
+      ];
+      return t.disabled ? e.push(
+        "sl-bg-gray-50",
+        "dark:sl-bg-slate-800",
+        "sl-text-gray-500",
+        "dark:sl-text-slate-300",
+        "sl-cursor-not-allowed",
+        "sl-border-gray-200",
+        "dark:sl-border-slate-700"
+      ) : $.value ? e.push(
+        "sl-border-red-300",
+        "dark:sl-border-red-500",
+        "focus:sl-ring-red-500",
+        "focus:sl-border-red-500"
+      ) : b.valid && b.touched ? e.push(
+        "sl-border-green-300",
+        "dark:sl-border-green-500",
+        "focus:sl-ring-green-500",
+        "focus:sl-border-green-500"
+      ) : e.push(
+        "sl-border-gray-300",
+        "dark:sl-border-slate-600",
+        "hover:sl-border-gray-400",
+        "dark:hover:sl-border-slate-500"
+      ), e.join(" ");
+    }), k = (e) => e[t.itemKey], x = (e) => e[t.itemText] || e.toString(), I = m(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 0 ? "" : s.value.length === 1 ? x(s.value[0]) : `${s.value.length} items selected` : x(s.value) : ""), L = m(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 1 ? s.value[0].icon : null : s.value.icon : null), D = m(() => t.items.filter((e) => !e.disabled)), W = (e) => {
+      s.value = e, j(!0), E(e);
+    }, T = m(() => {
+      if (!t.multiple || !Array.isArray(s.value)) return !1;
+      const e = D.value;
+      if (e.length === 0) return !1;
+      const l = new Set(s.value.map((a) => k(a)));
+      return e.every((a) => l.has(k(a)));
+    }), q = () => {
+      t.multiple && (T.value ? s.value = [] : s.value = [...D.value], E(s.value));
+    };
+    return (e, l) => (n(), d("div", de, [
+      i(le, {
+        id: r(S),
+        name: e.name,
+        label: e.label,
+        disabled: e.disabled,
+        optional: !e.rules,
+        "tertiary-label": e.tertiaryLabel,
+        "box-shadow": e.boxShadow,
+        "error-message": r($),
+        "success-message": e.successMessage,
+        "is-valid": r(b).valid,
+        "is-touched": r(b).touched
+      }, {
+        "success-message": u(() => [
+          e.successMessage ? (n(), d("span", ge, h(e.successMessage), 1)) : v("", !0)
+        ]),
+        default: u(() => [
+          i(r(te), {
+            modelValue: s.value,
+            "onUpdate:modelValue": [
+              l[1] || (l[1] = (a) => s.value = a),
+              W
+            ],
+            disabled: e.disabled,
+            multiple: e.multiple
+          }, {
+            default: u(({ open: a }) => [
+              c("div", ue, [
+                i(r(R), {
+                  open: a,
+                  "update-fn": M
+                }, null, 8, ["open"]),
+                i(r(ae), {
+                  ref_key: "listboxButtonRef",
+                  ref: V,
+                  id: r(S),
+                  class: f([
+                    U.value,
+                    e.buttonClass
+                  ]),
+                  onClick: M
+                }, {
+                  default: u(() => [
+                    c("span", ce, [
+                      L.value ? (n(), g(z(L.value), {
+                        key: 0,
+                        class: "sl-h-4 sl-w-4 sl-flex-shrink-0",
+                        "aria-hidden": "true"
+                      })) : v("", !0),
+                      I.value ? (n(), d("span", pe, h(I.value), 1)) : (n(), d("span", me, h(e.placeholder || "Select an option"), 1))
+                    ]),
+                    c("span", fe, [
+                      i(r(ne), {
+                        class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
+                        "aria-hidden": "true"
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["id", "class"]),
+                (n(), g(X, { to: "body" }, [
+                  i(J, {
+                    "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
+                    "leave-from-class": "sl-opacity-100",
+                    "leave-to-class": "sl-opacity-0"
+                  }, {
+                    default: u(() => [
+                      i(r(re), {
+                        class: "sl-fixed sl-z-[9999] sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
+                        style: Q(w.value)
+                      }, {
+                        default: u(() => [
+                          e.multiple && e.showAll ? (n(), d("li", {
+                            key: 0,
+                            role: "button",
+                            tabindex: "0",
+                            onMousedown: l[0] || (l[0] = H(() => {
+                            }, ["prevent"])),
+                            onClick: H(q, ["prevent", "stop"]),
+                            class: f([
+                              "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 sl-text-gray-900 dark:sl-text-slate-200",
+                              "hover:sl-bg-stachelock-600 hover:sl-text-white"
+                            ])
+                          }, [
+                            c("span", ve, h(T.value ? "Unselect All" : "Select All"), 1)
+                          ], 32)) : v("", !0),
+                          (n(!0), d(Y, null, Z(e.items, (o) => (n(), g(r(oe), {
+                            key: k(o),
+                            value: o,
+                            as: "template",
+                            disabled: o.disabled
+                          }, {
+                            default: u(({ active: p, selected: A }) => [
+                              c("li", {
+                                class: f([
+                                  "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
+                                  p ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
+                                  o.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
+                                ])
+                              }, [
+                                c("div", he, [
+                                  o.icon ? (n(), g(z(o.icon), {
+                                    key: 0,
+                                    class: f(["sl-h-4 sl-w-4 sl-flex-shrink-0", p ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
+                                    "aria-hidden": "true"
+                                  }, null, 8, ["class"])) : v("", !0),
+                                  c("span", {
+                                    class: f([
+                                      "sl-block sl-truncate",
+                                      A ? "sl-font-medium" : "sl-font-normal"
+                                    ])
+                                  }, h(x(o)), 3)
+                                ]),
+                                A ? (n(), d("span", be, [
+                                  i(r(ie), {
+                                    class: "sl-h-5 sl-w-5",
+                                    "aria-hidden": "true"
+                                  })
+                                ])) : v("", !0)
+                              ], 2)
+                            ]),
+                            _: 2
+                          }, 1032, ["value", "disabled"]))), 128))
+                        ]),
+                        _: 1
+                      }, 8, ["style"])
+                    ]),
+                    _: 1
+                  })
+                ]))
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "disabled", "multiple"])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched"])
+    ]));
+  }
+});
+export {
+  Ce as _
+};
+//# sourceMappingURL=SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js.map

package/dist/SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js","sources":["../src/components/inputs/SelectInput.vue"],"sourcesContent":["<!--\n  @component SelectInput\n  @description Dropdown select input with Headless UI integration.\n  \n  A select/dropdown component built on Headless UI's Listbox with support\n  for single and multiple selection, icons, and validation.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - items (SelectItem[], required): Options array with id/name or custom keys\n  - label (string, optional): Display label\n  - placeholder (string, optional): Placeholder text\n  - disabled (boolean, optional): Disabled state\n  - multiple (boolean, optional): Enable multiple selection\n  - showAll (boolean, optional): Show \"Select All\" option for multiple\n  - itemKey (string, optional): Property for item key (default: 'id')\n  - itemText (string, optional): Property for item text (default: 'name')\n  - rules (Schema, optional): Validation rules\n  - modelValue (any, optional): Selected value(s) via v-model\n  \n  @emits\n  - update:modelValue: Emitted when selection changes\n  \n  @example\n  <SelectInput\n    name=\"country\"\n    label=\"Country\"\n    :items=\"countries\"\n    v-model=\"form.country\"\n    placeholder=\"Select a country\"\n  />\n  \n  @example Multiple selection with Select All\n  <SelectInput\n    name=\"languages\"\n    label=\"Languages\"\n    :items=\"languages\"\n    v-model=\"form.languages\"\n    multiple\n    show-all\n  />\n-->\n<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"label\"\n      :disabled=\"disabled\"\n      :optional=\"!rules\"\n      :tertiary-label=\"tertiaryLabel\"\n      :box-shadow=\"boxShadow\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n    >\n      <Listbox\n        v-model=\"selectedValue\"\n        :disabled=\"disabled\"\n        :multiple=\"multiple\"\n        @update:model-value=\"handleChange\"\n        v-slot=\"{ open }\"\n      >\n        <div class=\"sl-relative\">\n          <!-- Track open state changes to sync position updates -->\n          <DropdownPositionTracker :open=\"open\" :update-fn=\"updateDropdownPosition\" />\n          <ListboxButton\n            ref=\"listboxButtonRef\"\n            :id=\"id\"\n            :class=\"[\n              selectClasses,\n              buttonClass\n            ]\"\n            @click=\"updateDropdownPosition\"\n          >\n            <span class=\"sl-flex sl-items-center sl-gap-2\">\n              <!-- Selected item icon -->\n              <component\n                v-if=\"selectedIcon\"\n                :is=\"selectedIcon\"\n                class=\"sl-h-4 sl-w-4 sl-flex-shrink-0\"\n                aria-hidden=\"true\"\n              />\n              \n              <!-- Selected value display -->\n              <span\n                v-if=\"displayValue\"\n                class=\"sl-block sl-truncate sl-text-left\"\n              >\n                {{ displayValue }}\n              </span>\n              <span\n                v-else\n                class=\"sl-block sl-truncate sl-text-left sl-text-gray-500 dark:sl-text-slate-300\"\n              >\n                {{ placeholder || 'Select an option' }}\n              </span>\n            </span>\n            \n            <span class=\"sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2\">\n              <ChevronUpDownIcon\n                class=\"sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300\"\n                aria-hidden=\"true\"\n              />\n            </span>\n          </ListboxButton>\n\n          <Teleport to=\"body\">\n            <transition\n              leave-active-class=\"sl-transition sl-duration-100 sl-ease-in\"\n              leave-from-class=\"sl-opacity-100\"\n              leave-to-class=\"sl-opacity-0\"\n            >\n              <ListboxOptions\n                class=\"sl-fixed sl-z-[9999] sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm\"\n                :style=\"dropdownStyle\"\n              >\n                <!-- Show All option for multiple select -->\n                <li\n                  v-if=\"multiple && showAll\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  @mousedown.prevent\n                  @click.prevent.stop=\"toggleSelectAll\"\n                  :class=\"[\n                    'sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 sl-text-gray-900 dark:sl-text-slate-200',\n                    'hover:sl-bg-stachelock-600 hover:sl-text-white',\n                  ]\"\n                >\n                  <span class=\"sl-block sl-truncate sl-font-medium\">\n                    {{ isAllSelected ? 'Unselect All' : 'Select All' }}\n                  </span>\n                </li>\n\n                <!-- Regular options -->\n                <ListboxOption\n                  v-for=\"item in items\"\n                  :key=\"getItemKey(item)\"\n                  :value=\"item\"\n                  as=\"template\"\n                  :disabled=\"item.disabled\"\n                  v-slot=\"{ active, selected }\"\n                >\n                  <li\n                    :class=\"[\n                      'sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9',\n                      active ? 'sl-bg-stachelock-600 sl-text-white' : 'sl-text-gray-900 dark:sl-text-slate-200',\n                      item.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : ''\n                    ]\"\n                  >\n                    <div class=\"sl-flex sl-items-center sl-gap-2\">\n                      <!-- Item icon -->\n                      <component\n                        v-if=\"item.icon\"\n                        :is=\"item.icon\"\n                        class=\"sl-h-4 sl-w-4 sl-flex-shrink-0\"\n                        :class=\"active ? 'sl-text-white' : 'sl-text-gray-400 dark:sl-text-slate-300'\"\n                        aria-hidden=\"true\"\n                      />\n                      \n                      <span\n                        :class=\"[\n                          'sl-block sl-truncate',\n                          selected ? 'sl-font-medium' : 'sl-font-normal'\n                        ]\"\n                      >\n                        {{ getItemText(item) }}\n                      </span>\n                    </div>\n\n                    <span\n                      v-if=\"selected\"\n                      class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4\"\n                    >\n                      <CheckIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n                    </span>\n                  </li>\n                </ListboxOption>\n              </ListboxOptions>\n            </transition>\n          </Teleport>\n        </div>\n      </Listbox>\n      \n      <template #success-message>\n        <span v-if=\"successMessage\">{{ successMessage }}</span>\n      </template>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * SelectInput - Dropdown select with Headless UI\n * \n * Provides a styled select/dropdown component with single and multiple\n * selection modes. Uses Headless UI's Listbox for accessibility.\n * \n * ## Features\n * - Single and multiple selection modes\n * - \"Select All\" option for multiple mode\n * - Item icons support\n * - vee-validate integration\n * - Accessible keyboard navigation\n * - Customizable item key/text properties\n * - Teleported dropdown to avoid z-index/overflow issues\n * \n * @module components/inputs/SelectInput\n * @see {@link SelectItem} for item interface\n */\nimport { computed, ref, watch, onBeforeUnmount, defineComponent } from 'vue'\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n} from '@headlessui/vue'\nimport { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'\nimport { useField } from 'vee-validate'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\n\n/**\n * DropdownPositionTracker - Renderless component that watches HeadlessUI open state\n * and triggers position updates when dropdown opens or scroll/resize occurs\n */\nconst DropdownPositionTracker = defineComponent({\n  props: {\n    open: { type: Boolean, required: true },\n    updateFn: { type: Function, required: true }\n  },\n  setup(props) {\n    // Define handleScroll in setup scope so it's a stable reference\n    const handleScroll = () => {\n      if (props.open) {\n        props.updateFn()\n      }\n    }\n    \n    // Watch the open prop and trigger position update + attach scroll listeners\n    watch(() => props.open, (isOpen) => {\n      if (isOpen) {\n        // Update position immediately when opening\n        props.updateFn()\n        // Add scroll/resize listeners - use capture to catch scroll events from any container\n        window.addEventListener('scroll', handleScroll, true)\n        window.addEventListener('resize', handleScroll)\n      } else {\n        // Remove listeners when closed\n        window.removeEventListener('scroll', handleScroll, true)\n        window.removeEventListener('resize', handleScroll)\n      }\n    }, { immediate: true })\n    \n    // Cleanup on unmount\n    onBeforeUnmount(() => {\n      window.removeEventListener('scroll', handleScroll, true)\n      window.removeEventListener('resize', handleScroll)\n    })\n    \n    // Render nothing\n    return () => null\n  }\n})\n\n// Refs for floating dropdown positioning\nconst listboxButtonRef = ref<InstanceType<typeof ListboxButton> | null>(null)\nconst dropdownStyle = ref<Record<string, string>>({\n  top: '0px',\n  left: '0px',\n  width: '200px'\n})\n\n// Estimated dropdown height for flip calculation (max-h-56 = 14rem = 224px)\nconst DROPDOWN_MAX_HEIGHT = 224\nconst DROPDOWN_GAP = 4\n\nfunction updateDropdownPosition() {\n  // Get the actual DOM element from the Headless UI component\n  const el = listboxButtonRef.value?.$el as HTMLElement | undefined\n  if (!el) return\n  \n  const rect = el.getBoundingClientRect()\n  const viewportHeight = window.innerHeight\n  \n  // Calculate available space below and above the button\n  const spaceBelow = viewportHeight - rect.bottom - DROPDOWN_GAP\n  const spaceAbove = rect.top - DROPDOWN_GAP\n  \n  // Determine if we should flip to show above\n  const shouldFlipAbove = spaceBelow < DROPDOWN_MAX_HEIGHT && spaceAbove > spaceBelow\n  \n  if (shouldFlipAbove) {\n    // Position above the button\n    dropdownStyle.value = {\n      bottom: `${viewportHeight - rect.top + DROPDOWN_GAP}px`,\n      left: `${rect.left}px`,\n      width: `${rect.width}px`,\n      maxHeight: `${Math.min(spaceAbove, DROPDOWN_MAX_HEIGHT)}px`\n    }\n  } else {\n    // Position below the button (default)\n    dropdownStyle.value = {\n      top: `${rect.bottom + DROPDOWN_GAP}px`,\n      left: `${rect.left}px`,\n      width: `${rect.width}px`,\n      maxHeight: `${Math.min(spaceBelow, DROPDOWN_MAX_HEIGHT)}px`\n    }\n  }\n}\n\ninterface SelectItem {\n  [key: string]: any\n  icon?: any\n  disabled?: boolean\n}\n\ninterface Props {\n  name: string\n  items: SelectItem[]\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  rules?: ValidationRule\n  validateOnMount?: boolean\n  successMessage?: string\n  tertiaryLabel?: string\n  buttonClass?: string\n  multiple?: boolean\n  showAll?: boolean\n  itemKey?: string\n  itemText?: string\n  modelValue?: any\n  boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  itemKey: 'id',\n  itemText: 'name',\n  multiple: false,\n  showAll: false,\n  boxShadow: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n}>()\n\nconst id = generateId(props.name)\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleChange: handleValidation, meta, setTouched } = useField(\n  () => props.name,\n  props.rules,\n  {\n    validateOnMount: props.validateOnMount,\n    initialValue: props.modelValue\n  }\n)\n\nconst selectedValue = ref<any>(\n  props.multiple\n    ? (Array.isArray(props.modelValue) ? props.modelValue : [])\n    : props.modelValue\n)\n\n// Watch for external changes\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (props.multiple) {\n      const coerced = Array.isArray(newValue) ? newValue : []\n      if (coerced !== selectedValue.value) {\n        selectedValue.value = coerced\n        value.value = coerced\n      }\n    } else {\n      if (newValue !== selectedValue.value) {\n        selectedValue.value = newValue\n        value.value = newValue\n      }\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  selectedValue,\n  (newValue) => {\n    emit('update:modelValue', newValue)\n  }\n)\n\nconst selectClasses = computed(() => {\n  const baseClasses = [\n    'sl-relative',\n    'sl-w-full',\n    'sl-cursor-default',\n    'sl-rounded-md',\n    'sl-bg-white',\n    'dark:sl-bg-slate-900',\n    'sl-text-gray-900',\n    'dark:sl-text-slate-100',\n    'sl-py-2',\n    'sl-pl-3',\n    'sl-pr-10',\n    'sl-text-left',\n    'sl-border',\n    'sl-text-sm',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-500',\n    'focus:sl-border-stachelock-500',\n    'sl-transition-all',\n    'sl-duration-200'\n  ]\n\n  if (props.disabled) {\n    baseClasses.push(\n      'sl-bg-gray-50',\n      'dark:sl-bg-slate-800',\n      'sl-text-gray-500',\n      'dark:sl-text-slate-300',\n      'sl-cursor-not-allowed',\n      'sl-border-gray-200',\n      'dark:sl-border-slate-700'\n    )\n  } else if (errorMessage.value) {\n    baseClasses.push(\n      'sl-border-red-300',\n      'dark:sl-border-red-500',\n      'focus:sl-ring-red-500',\n      'focus:sl-border-red-500'\n    )\n  } else if (meta.valid && meta.touched) {\n    baseClasses.push(\n      'sl-border-green-300',\n      'dark:sl-border-green-500',\n      'focus:sl-ring-green-500',\n      'focus:sl-border-green-500'\n    )\n  } else {\n    baseClasses.push(\n      'sl-border-gray-300',\n      'dark:sl-border-slate-600',\n      'hover:sl-border-gray-400',\n      'dark:hover:sl-border-slate-500'\n    )\n  }\n\n  return baseClasses.join(' ')\n})\n\nconst getItemKey = (item: SelectItem): any => {\n  return item[props.itemKey]\n}\n\nconst getItemText = (item: SelectItem): string => {\n  return item[props.itemText] || item.toString()\n}\n\nconst displayValue = computed(() => {\n  if (!selectedValue.value) return ''\n  \n  if (props.multiple && Array.isArray(selectedValue.value)) {\n    if (selectedValue.value.length === 0) return ''\n    if (selectedValue.value.length === 1) {\n      return getItemText(selectedValue.value[0])\n    }\n    return `${selectedValue.value.length} items selected`\n  }\n  \n  return getItemText(selectedValue.value)\n})\n\nconst selectedIcon = computed(() => {\n  if (!selectedValue.value) return null\n  \n  if (props.multiple && Array.isArray(selectedValue.value)) {\n    return selectedValue.value.length === 1 ? selectedValue.value[0].icon : null\n  }\n  \n  return selectedValue.value.icon\n})\n\nconst allItems = computed(() => {\n  return props.items.filter(item => !item.disabled)\n})\n\nconst handleChange = (value: any) => {\n  selectedValue.value = value\n  setTouched(true)\n  handleValidation(value)\n}\n\nconst isAllSelected = computed(() => {\n  if (!props.multiple || !Array.isArray(selectedValue.value)) return false\n  const selectable = allItems.value\n  if (selectable.length === 0) return false\n  // Compare by item key instead of reference for reliable equality check\n  const selectedKeys = new Set((selectedValue.value as any[]).map(item => getItemKey(item)))\n  return selectable.every(item => selectedKeys.has(getItemKey(item)))\n})\n\nconst toggleSelectAll = () => {\n  if (!props.multiple) return\n  if (isAllSelected.value) {\n    selectedValue.value = []\n  } else {\n    selectedValue.value = [...allItems.value]\n  }\n  handleValidation(selectedValue.value)\n}\n</script>\n\n\n"],"names":["DROPDOWN_MAX_HEIGHT","DROPDOWN_GAP","DropdownPositionTracker","defineComponent","props","handleScroll","watch","isOpen","onBeforeUnmount","listboxButtonRef","ref","dropdownStyle","updateDropdownPosition","el","rect","viewportHeight","spaceBelow","spaceAbove","__props","emit","__emit","id","generateId","value","errorMessage","handleValidation","meta","setTouched","useField","selectedValue","newValue","coerced","selectClasses","computed","baseClasses","getItemKey","item","getItemText","displayValue","selectedIcon","allItems","handleChange","isAllSelected","selectable","selectedKeys","toggleSelectAll","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","Listbox","$event","multiple","_withCtx","open","_createElementVNode","_hoisted_2","ListboxButton","_normalizeClass","buttonClass","_hoisted_3","_createBlock","_resolveDynamicComponent","_hoisted_4","_toDisplayString","_hoisted_5","placeholder","_hoisted_6","ChevronUpDownIcon","_Teleport","_Transition","ListboxOptions","showAll","_hoisted_7","_Fragment","_renderList","items","ListboxOption","active","selected","_hoisted_8","_hoisted_9","CheckIcon"],"mappings":"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"}