@skdx/vue 0.26.0

package/dist/combobox/Combobox.vue.d.cts

@@ -0,0 +1,153 @@
+import { type ComboboxFilter } from './context.cjs';
+/**
+ * Root of a WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus
+ * always stays on `SkdxComboboxInput`; the highlighted option is tracked as
+ * virtual focus via `aria-activedescendant` rather than moved with
+ * `tabindex`. Owns the selected value, the input's draft text, and the
+ * popup's open state, handing all three down to every other `SkdxCombobox*`
+ * part via context. Renders no DOM of its own.
+ *
+ * Filtering is the consumer's job by default (`filter: 'manual'`): you filter
+ * your data by `inputValue` and render only the `SkdxComboboxItem`s that match,
+ * which is what an async or server-side search needs. Pass a `filter`
+ * predicate instead and the component filters its own items.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxComboboxContent`'s enter
+ * or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:value`, `v-model:input-value`, `v-model:open`) or
+ * uncontrolled (`default-value`, `default-input-value`, `default-open`).
+ *
+ * With a `name`, visually-hidden native inputs mirror the *selection* — never
+ * the draft text — so the combobox participates in native form submission, one
+ * input per selected value, and a `required` combobox with nothing selected
+ * reports `valueMissing`. `checkValidity()`/`reportValidity()` are exposed on
+ * the root and delegate to those inputs. Resetting the form restores the
+ * selection and the draft text the combobox was declared with, emitting
+ * `value-change`/`input-value-change` so a controlled parent follows.
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage. A `string[]` when `multiple`. Pair with `v-model:value` or `@value-change`. */
+    value?: string | string[];
+    /** Initially selected option's value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the listbox gets `aria-multiselectable`, and committing an option toggles
+     * it, clears the draft text, and leaves the listbox open.
+     */
+    multiple?: boolean;
+    /**
+     * Lets Enter commit the draft text itself when no option is highlighted, so
+     * the combobox can create values that aren't in the list. Off by default —
+     * a combobox that silently accepts unmatched text is the wrong control for
+     * a closed set of options.
+     */
+    allowCustomValue?: boolean;
+    /**
+     * How `SkdxComboboxItem`s are filtered against the draft text. `'manual'`
+     * filters nothing: the consumer renders only the matching items, which is
+     * what async or server-side search needs. A predicate moves filtering
+     * inside the component — every item is measured (its `textValue`, or its
+     * rendered text) and the rejected ones render nothing at all, so they leave
+     * the option count, the highlight order, and `SkdxComboboxEmpty` exactly as
+     * if the consumer had removed them.
+     */
+    filter?: ComboboxFilter;
+    /**
+     * Keeps the first option highlighted whenever the (filtered) list changes
+     * while open, so Enter always has an obvious target. Off by default: it
+     * makes Enter commit something the user never pointed at, which is wrong
+     * when the draft text is itself a valid answer.
+     */
+    autoHighlight?: boolean;
+    /**
+     * Marks results as in flight: `aria-busy`/`data-loading` on the input and
+     * the content, and no result-count announcement (a count measured
+     * mid-fetch announces "0 results available" once per request).
+     */
+    loading?: boolean;
+    /** The text field's draft text, for controlled usage. Pair with `v-model:input-value` or `@input-value-change`. */
+    inputValue?: string;
+    /** Initial draft text, for uncontrolled usage. */
+    defaultInputValue?: string;
+    /** Whether the listbox popup is open, for controlled usage. Pair with `v-model:open` or `@open-change`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Marks the combobox as invalid, exposed as `aria-invalid`/`data-invalid` on the input. */
+    invalid?: boolean;
+    /** Makes the input read-only, exposed as the native `readonly` attribute plus `aria-readonly`/`data-readonly`. */
+    readOnly?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) each
+     * time the number of rendered `SkdxComboboxItem`s changes while the listbox
+     * is open — filtering is silent for screen-reader users otherwise. Return
+     * an empty string to announce nothing.
+     */
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Name for native form participation via hidden inputs — one per selected
+     * value, so a `multiple` combobox submits the repeated `name=value` pairs a
+     * native `<select multiple>` does. The draft text is never submitted.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Marks the hidden form inputs required, so a combobox with nothing
+     * selected reports `valueMissing`. Only meaningful with `name`.
+     * @default false
+     */
+    required?: boolean;
+};
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:inputValue": (value: string) => any;
+    "input-value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    loading: boolean;
+    filter: ComboboxFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    required: boolean;
+    name: string;
+    value: string | string[];
+    invalid: boolean;
+    defaultValue: string | string[];
+    multiple: boolean;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    allowCustomValue: boolean;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/Combobox.vue.d.ts

@@ -0,0 +1,153 @@
+import { type ComboboxFilter } from './context.js';
+/**
+ * Root of a WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus
+ * always stays on `SkdxComboboxInput`; the highlighted option is tracked as
+ * virtual focus via `aria-activedescendant` rather than moved with
+ * `tabindex`. Owns the selected value, the input's draft text, and the
+ * popup's open state, handing all three down to every other `SkdxCombobox*`
+ * part via context. Renders no DOM of its own.
+ *
+ * Filtering is the consumer's job by default (`filter: 'manual'`): you filter
+ * your data by `inputValue` and render only the `SkdxComboboxItem`s that match,
+ * which is what an async or server-side search needs. Pass a `filter`
+ * predicate instead and the component filters its own items.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxComboboxContent`'s enter
+ * or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:value`, `v-model:input-value`, `v-model:open`) or
+ * uncontrolled (`default-value`, `default-input-value`, `default-open`).
+ *
+ * With a `name`, visually-hidden native inputs mirror the *selection* — never
+ * the draft text — so the combobox participates in native form submission, one
+ * input per selected value, and a `required` combobox with nothing selected
+ * reports `valueMissing`. `checkValidity()`/`reportValidity()` are exposed on
+ * the root and delegate to those inputs. Resetting the form restores the
+ * selection and the draft text the combobox was declared with, emitting
+ * `value-change`/`input-value-change` so a controlled parent follows.
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage. A `string[]` when `multiple`. Pair with `v-model:value` or `@value-change`. */
+    value?: string | string[];
+    /** Initially selected option's value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the listbox gets `aria-multiselectable`, and committing an option toggles
+     * it, clears the draft text, and leaves the listbox open.
+     */
+    multiple?: boolean;
+    /**
+     * Lets Enter commit the draft text itself when no option is highlighted, so
+     * the combobox can create values that aren't in the list. Off by default —
+     * a combobox that silently accepts unmatched text is the wrong control for
+     * a closed set of options.
+     */
+    allowCustomValue?: boolean;
+    /**
+     * How `SkdxComboboxItem`s are filtered against the draft text. `'manual'`
+     * filters nothing: the consumer renders only the matching items, which is
+     * what async or server-side search needs. A predicate moves filtering
+     * inside the component — every item is measured (its `textValue`, or its
+     * rendered text) and the rejected ones render nothing at all, so they leave
+     * the option count, the highlight order, and `SkdxComboboxEmpty` exactly as
+     * if the consumer had removed them.
+     */
+    filter?: ComboboxFilter;
+    /**
+     * Keeps the first option highlighted whenever the (filtered) list changes
+     * while open, so Enter always has an obvious target. Off by default: it
+     * makes Enter commit something the user never pointed at, which is wrong
+     * when the draft text is itself a valid answer.
+     */
+    autoHighlight?: boolean;
+    /**
+     * Marks results as in flight: `aria-busy`/`data-loading` on the input and
+     * the content, and no result-count announcement (a count measured
+     * mid-fetch announces "0 results available" once per request).
+     */
+    loading?: boolean;
+    /** The text field's draft text, for controlled usage. Pair with `v-model:input-value` or `@input-value-change`. */
+    inputValue?: string;
+    /** Initial draft text, for uncontrolled usage. */
+    defaultInputValue?: string;
+    /** Whether the listbox popup is open, for controlled usage. Pair with `v-model:open` or `@open-change`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Marks the combobox as invalid, exposed as `aria-invalid`/`data-invalid` on the input. */
+    invalid?: boolean;
+    /** Makes the input read-only, exposed as the native `readonly` attribute plus `aria-readonly`/`data-readonly`. */
+    readOnly?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) each
+     * time the number of rendered `SkdxComboboxItem`s changes while the listbox
+     * is open — filtering is silent for screen-reader users otherwise. Return
+     * an empty string to announce nothing.
+     */
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Name for native form participation via hidden inputs — one per selected
+     * value, so a `multiple` combobox submits the repeated `name=value` pairs a
+     * native `<select multiple>` does. The draft text is never submitted.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Marks the hidden form inputs required, so a combobox with nothing
+     * selected reports `valueMissing`. Only meaningful with `name`.
+     * @default false
+     */
+    required?: boolean;
+};
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:inputValue": (value: string) => any;
+    "input-value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    loading: boolean;
+    filter: ComboboxFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    required: boolean;
+    name: string;
+    value: string | string[];
+    invalid: boolean;
+    defaultValue: string | string[];
+    multiple: boolean;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    allowCustomValue: boolean;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/Combobox.vue.js

@@ -0,0 +1 @@
+import e from"./Combobox.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/combobox/Combobox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const N=require("../utils/useFormReset.cjs"),H=require("../utils/useOpenChangeComplete.cjs"),F=require("../utils/useSelection.cjs"),M=require("../utils/liveAnnouncer.cjs"),P=require("../utils/PopperRoot.vue.cjs"),v=require("./context.cjs");let t=require("vue");var X=["name","^value","required"],z=(0,t.defineComponent)({inheritAttrs:!1,__name:"Combobox",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!1},filter:{type:[String,Function],default:"manual"},autoHighlight:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},getResultCountLabel:{type:Function,default:v.defaultGetResultCountLabel},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(m,{expose:b,emit:w}){const l=m,r=w,A=(0,t.ref)(null),d=(0,t.ref)(null),a=(0,t.ref)(null),o=(0,t.ref)(new Map),V=(0,t.ref)(null),O=(0,t.ref)(l.defaultValue),k=(0,t.computed)(()=>l.value!==void 0?l.value:O.value),c=(0,t.computed)(()=>F.toValues(k.value)),_=(0,t.ref)(l.defaultInputValue),B=(0,t.computed)(()=>l.inputValue!==void 0?l.inputValue:_.value),I=(0,t.ref)(l.defaultOpen),s=(0,t.computed)(()=>l.open??I.value);H.useOpenChangeComplete(s,d,e=>r("open-change-complete",e));function y(e){l.value===void 0&&(O.value=e),r("update:value",e),r("value-change",e)}function g(e){l.inputValue===void 0&&(_.value=e),r("update:inputValue",e),r("input-value-change",e)}function C(e){l.open===void 0&&(I.value=e),r("update:open",e),r("open-change",e)}function x(e,u){if(!l.multiple){y(e),g(u),C(!1);return}y(F.nextSelection(c.value,e,l.multiple)),g("")}function E(e){V.value=e,C(!0)}function R(e,u){const n=o.value.get(e);if(n?.value===u.value&&n.text===u.text)return;const i=new Map(o.value);i.set(e,u),o.value=i}function S(e){if(!o.value.has(e))return;const u=new Map(o.value);u.delete(e),o.value=u}let p;(0,t.watch)(s,e=>{if(p!==void 0&&cancelAnimationFrame(p),!e){a.value=null;return}p=requestAnimationFrame(()=>{const u=V.value;if(V.value=null,!u)return;const n=d.value?.querySelectorAll(v.OPTION_SELECTOR);if(!n||n.length===0)return;const i=u==="last"?n[n.length-1]:n[0];a.value===null&&(a.value=i.id)})});const q=(0,t.computed)(()=>o.value.size);(0,t.watch)([o,a],([,e])=>{if(e===null)return;const u=Array.from(d.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);u.some(n=>n.id===e)||(a.value=u[0]?.id??null)},{flush:"post"});let f;(0,t.watch)([()=>l.autoHighlight,s,a,q],([e,u,n])=>{!e||!u||n!==null||typeof document>"u"||(f!==void 0&&cancelAnimationFrame(f),f=requestAnimationFrame(()=>{const i=d.value?.querySelector(v.OPTION_SELECTOR);i&&(a.value=i.id)}))},{immediate:!0}),(0,t.onBeforeUnmount)(()=>{p!==void 0&&cancelAnimationFrame(p),f!==void 0&&cancelAnimationFrame(f)}),(0,t.watch)([s,q,()=>l.loading],([e,u,n])=>{e&&!n&&M.announce(l.getResultCountLabel(u))},{immediate:!0}),(0,t.provide)(v.COMBOBOX_CONTEXT,{inputRef:A,contentRef:d,contentId:v.nextComboboxContentId(),get multiple(){return l.multiple},selectedValues:c,isSelected:e=>c.value.includes(e),selectItem:x,inputValue:B,onInputValueChange:g,open:s,setOpen:C,activeId:a,setActiveId:e=>{a.value=e},openWithHighlight:E,itemCount:q,registerItem:R,unregisterItem:S,getItem:e=>o.value.get(e),matchesFilter:e=>l.filter==="manual"||l.filter(e,B.value),get invalid(){return l.invalid},get readOnly(){return l.readOnly},loading:(0,t.computed)(()=>l.loading),get allowCustomValue(){return l.allowCustomValue}});const h=(0,t.ref)([]),L=l.value??l.defaultValue??(l.multiple?[]:""),T=l.inputValue??l.defaultInputValue;return N.useFormReset(()=>h.value[0],()=>{y(L),g(T)}),b({checkValidity:()=>h.value[0]?.checkValidity()??!0,reportValidity:()=>h.value[0]?.reportValidity()??!0}),(e,u)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[(0,t.createVNode)(P.default,null,{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default")]),_:3}),m.name?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(c.value.length>0?c.value:[""],(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("input",{key:n||i,ref_for:!0,ref_key:"hiddenEls",ref:h,type:"text","aria-hidden":"true",tabindex:"-1",name:m.name,"^value":n,required:m.required,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,X))),128)):(0,t.createCommentVNode)("",!0)],64))}});exports.default=z;

package/dist/combobox/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useFormReset as e}from"../utils/useFormReset.js";import{useOpenChangeComplete as t}from"../utils/useOpenChangeComplete.js";import{nextSelection as l,toValues as a}from"../utils/useSelection.js";import{announce as u}from"../utils/liveAnnouncer.js";import n from"../utils/PopperRoot.vue.js";import{COMBOBOX_CONTEXT as o,OPTION_SELECTOR as i,defaultGetResultCountLabel as r,nextComboboxContentId as d}from"./context.js";import{Fragment as s,computed as p,createCommentVNode as v,createElementBlock as m,createVNode as c,defineComponent as f,onBeforeUnmount as g,openBlock as h,provide as y,ref as V,renderList as C,renderSlot as O,watch as x,withCtx as B}from"vue";var I=["name","^value","required"],A=/* @__PURE__ */f({inheritAttrs:!1,__name:"Combobox",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!1},filter:{type:[String,Function],default:"manual"},autoHighlight:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},getResultCountLabel:{type:Function,default:r},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(r,{expose:f,emit:A}){const F=r,b=A,q=V(null),w=V(null),R=V(null),S=V(/* @__PURE__ */new Map),k=V(null),_=V(F.defaultValue),j=p(()=>void 0!==F.value?F.value:_.value),E=p(()=>a(j.value)),L=V(F.defaultInputValue),M=p(()=>void 0!==F.inputValue?F.inputValue:L.value),N=V(F.defaultOpen),T=p(()=>F.open??N.value);function H(e){void 0===F.value&&(_.value=e),b("update:value",e),b("value-change",e)}function P(e){void 0===F.inputValue&&(L.value=e),b("update:inputValue",e),b("input-value-change",e)}function X(e){void 0===F.open&&(N.value=e),b("update:open",e),b("open-change",e)}let z;t(T,w,e=>b("open-change-complete",e)),x(T,e=>{void 0!==z&&cancelAnimationFrame(z),e?z=requestAnimationFrame(()=>{const e=k.value;if(k.value=null,!e)return;const t=w.value?.querySelectorAll(i);if(!t||0===t.length)return;const l="last"===e?t[t.length-1]:t[0];null===R.value&&(R.value=l.id)}):R.value=null});const G=p(()=>S.value.size);let U;x([S,R],([,e])=>{if(null===e)return;const t=Array.from(w.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);t.some(t=>t.id===e)||(R.value=t[0]?.id??null)},{flush:"post"}),x([()=>F.autoHighlight,T,R,G],([e,t,l])=>{!e||!t||null!==l||typeof document>"u"||(void 0!==U&&cancelAnimationFrame(U),U=requestAnimationFrame(()=>{const e=w.value?.querySelector(i);e&&(R.value=e.id)}))},{immediate:!0}),g(()=>{void 0!==z&&cancelAnimationFrame(z),void 0!==U&&cancelAnimationFrame(U)}),x([T,G,()=>F.loading],([e,t,l])=>{e&&!l&&u(F.getResultCountLabel(t))},{immediate:!0}),y(o,{inputRef:q,contentRef:w,contentId:d(),get multiple(){return F.multiple},selectedValues:E,isSelected:e=>E.value.includes(e),selectItem:function(e,t){if(!F.multiple)return H(e),P(t),void X(!1);H(l(E.value,e,F.multiple)),P("")},inputValue:M,onInputValueChange:P,open:T,setOpen:X,activeId:R,setActiveId:e=>{R.value=e},openWithHighlight:function(e){k.value=e,X(!0)},itemCount:G,registerItem:function(e,t){const l=S.value.get(e);if(l?.value===t.value&&l.text===t.text)return;const a=new Map(S.value);a.set(e,t),S.value=a},unregisterItem:function(e){if(!S.value.has(e))return;const t=new Map(S.value);t.delete(e),S.value=t},getItem:e=>S.value.get(e),matchesFilter:e=>"manual"===F.filter||F.filter(e,M.value),get invalid(){return F.invalid},get readOnly(){return F.readOnly},loading:p(()=>F.loading),get allowCustomValue(){return F.allowCustomValue}});const W=V([]),$=F.value??F.defaultValue??(F.multiple?[]:""),D=F.inputValue??F.defaultInputValue;return e(()=>W.value[0],()=>{H($),P(D)}),f({checkValidity:()=>W.value[0]?.checkValidity()??!0,reportValidity:()=>W.value[0]?.reportValidity()??!0}),(e,t)=>(h(),m(s,null,[c(n,null,{default:B(()=>[O(e.$slots,"default")]),_:3}),r.name?(h(!0),m(s,{key:0},C(E.value.length>0?E.value:[""],(e,t)=>(h(),m("input",{key:e||t,ref_for:!0,ref_key:"hiddenEls",ref:W,type:"text","aria-hidden":"true",tabindex:"-1",name:r.name,"^value":e,required:r.required,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,I))),128)):v("",!0)],64))}});export{A as default};

package/dist/combobox/ComboboxContent.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ComboboxContent.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/combobox/ComboboxContent.vue.d.cts

@@ -0,0 +1,81 @@
+import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/**
+ * The listbox popup for a `SkdxCombobox`, positioned relative to the input
+ * via floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults
+ * to `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`,
+ * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
+ * `false` — against `collisionBoundary` when one is given, otherwise the
+ * listbox's clipping ancestors. Renders a `<div role="listbox">` with
+ * `data-state` and `data-side`/`data-align` from the popper, the measurement
+ * custom properties `--skdx-combobox-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin` (so the listbox can match the input's
+ * width and the available height from CSS alone), plus
+ * `aria-multiselectable="true"`
+ * while the root is `multiple` and `aria-busy`/`data-loading` while it is
+ * `loading`. Prevents `mousedown` from
+ * stealing focus off the input (real DOM focus must never leave
+ * `SkdxComboboxInput`).
+ *
+ * Closes on Escape or on an outside interaction (pointer-down or focus moving
+ * out) unless `escape-key-down`/`pointer-down-outside`/`focus-outside`/
+ * `interact-outside` call `event.preventDefault()`. `interact-outside` fires
+ * for either kind of outside interaction, immediately before the specific
+ * event and with the same event object, so one veto covers both. Escape is
+ * owned here rather than in `SkdxComboboxInput` precisely so the veto lands
+ * before anything has closed. Mounts only while open unless `forceMount` is
+ * set. Must be used inside `SkdxCombobox`.
+ */
+type __VLS_Props = {
+    /** Preferred side of the input to render on. */
+    side?: Side;
+    /** Alignment of the listbox along the chosen side, relative to the input. */
+    align?: Align;
+    /** Distance in pixels between the listbox and the input along `side`. */
+    sideOffset?: number;
+    /** Offset in pixels along `align`, shifting the listbox perpendicular to `side`. */
+    alignOffset?: number;
+    /** Flips to the opposite side when there isn't room to render on the preferred side. */
+    avoidCollisions?: boolean;
+    /** Minimum distance in pixels kept from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     * @default undefined — the listbox's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /** Keep this listbox mounted even while closed, instead of unmounting it. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "pointer-down-outside": (event: PointerEvent) => any;
+    "interact-outside": (event: InteractOutsideEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
+    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
+    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
+    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+}>, {
+    forceMount: boolean;
+    side: Side;
+    align: Align;
+    sideOffset: number;
+    alignOffset: number;
+    avoidCollisions: boolean;
+    collisionPadding: number | Partial<Record<PhysicalSide, number>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/ComboboxContent.vue.d.ts

@@ -0,0 +1,81 @@
+import { type Align, type PhysicalSide, type Side } from '../utils/popper.js';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
+/**
+ * The listbox popup for a `SkdxCombobox`, positioned relative to the input
+ * via floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults
+ * to `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`,
+ * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
+ * `false` — against `collisionBoundary` when one is given, otherwise the
+ * listbox's clipping ancestors. Renders a `<div role="listbox">` with
+ * `data-state` and `data-side`/`data-align` from the popper, the measurement
+ * custom properties `--skdx-combobox-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin` (so the listbox can match the input's
+ * width and the available height from CSS alone), plus
+ * `aria-multiselectable="true"`
+ * while the root is `multiple` and `aria-busy`/`data-loading` while it is
+ * `loading`. Prevents `mousedown` from
+ * stealing focus off the input (real DOM focus must never leave
+ * `SkdxComboboxInput`).
+ *
+ * Closes on Escape or on an outside interaction (pointer-down or focus moving
+ * out) unless `escape-key-down`/`pointer-down-outside`/`focus-outside`/
+ * `interact-outside` call `event.preventDefault()`. `interact-outside` fires
+ * for either kind of outside interaction, immediately before the specific
+ * event and with the same event object, so one veto covers both. Escape is
+ * owned here rather than in `SkdxComboboxInput` precisely so the veto lands
+ * before anything has closed. Mounts only while open unless `forceMount` is
+ * set. Must be used inside `SkdxCombobox`.
+ */
+type __VLS_Props = {
+    /** Preferred side of the input to render on. */
+    side?: Side;
+    /** Alignment of the listbox along the chosen side, relative to the input. */
+    align?: Align;
+    /** Distance in pixels between the listbox and the input along `side`. */
+    sideOffset?: number;
+    /** Offset in pixels along `align`, shifting the listbox perpendicular to `side`. */
+    alignOffset?: number;
+    /** Flips to the opposite side when there isn't room to render on the preferred side. */
+    avoidCollisions?: boolean;
+    /** Minimum distance in pixels kept from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     * @default undefined — the listbox's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /** Keep this listbox mounted even while closed, instead of unmounting it. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "pointer-down-outside": (event: PointerEvent) => any;
+    "interact-outside": (event: InteractOutsideEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
+    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
+    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
+    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+}>, {
+    forceMount: boolean;
+    side: Side;
+    align: Align;
+    sideOffset: number;
+    alignOffset: number;
+    avoidCollisions: boolean;
+    collisionPadding: number | Partial<Record<PhysicalSide, number>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/ComboboxContent.vue.js

@@ -0,0 +1 @@
+import t from"./ComboboxContent.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/combobox/ComboboxContent.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const _=require("../utils/composeRefs.cjs"),C=require("../utils/useDismiss.cjs"),r=require("../utils/popper.cjs"),v=require("./context.cjs");let e=require("vue");var x=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],O=(0,e.defineComponent)({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(i,{emit:d}){const l=i,n=d,s=(0,e.inject)(v.COMBOBOX_CONTEXT);if(!s)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const t=s,u=(0,e.inject)(r.POPPER_CONTEXT);if(!u)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const a=(0,e.ref)(null),c=_.composeRefs(a,t.contentRef);C.useDismiss({enabled:t.open,onEscapeKeyDown:o=>{n("escape-key-down",o),o.defaultPrevented||t.setOpen(!1)},onPointerDownOutside:o=>{n("pointer-down-outside",o),o.defaultPrevented||t.setOpen(!1)},onFocusOutside:o=>{n("focus-outside",o),o.defaultPrevented||t.setOpen(!1)},onInteractOutside:o=>n("interact-outside",o)},[a,t.inputRef]);const{style:f,placedSide:p,placedAlign:m}=r.usePopperPosition(u.anchor,a,t.open,()=>({...l,component:"combobox"}));function b(o){o.preventDefault()}return(o,w)=>i.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-combobox__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(c),role:"listbox","aria-multiselectable":(0,e.unref)(t).multiple?!0:void 0,"aria-busy":(0,e.unref)(t).loading.value?!0:void 0,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-loading":(0,e.unref)(t).loading.value?"":void 0,"data-multiple":(0,e.unref)(t).multiple?"":void 0,"data-side":(0,e.unref)(p),"data-align":(0,e.unref)(m),style:(0,e.normalizeStyle)((0,e.unref)(f)),onMousedown:b},[(0,e.renderSlot)(o.$slots,"default")],44,x)):(0,e.createCommentVNode)("",!0)}});exports.default=O;

package/dist/combobox/ComboboxContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as o}from"../utils/useDismiss.js";import{POPPER_CONTEXT as t,usePopperPosition as a}from"../utils/popper.js";import{COMBOBOX_CONTEXT as n}from"./context.js";import{createCommentVNode as s,createElementBlock as i,defineComponent as d,inject as l,normalizeStyle as u,openBlock as r,ref as p,renderSlot as c,unref as m}from"vue";var f=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],b=/* @__PURE__ */d({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(d,{emit:b}){const v=d,x=b,C=l(n);if(!C)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const O=C,w=l(t);if(!w)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const y=p(null),g=e(y,O.contentRef);o({enabled:O.open,onEscapeKeyDown:e=>{x("escape-key-down",e),e.defaultPrevented||O.setOpen(!1)},onPointerDownOutside:e=>{x("pointer-down-outside",e),e.defaultPrevented||O.setOpen(!1)},onFocusOutside:e=>{x("focus-outside",e),e.defaultPrevented||O.setOpen(!1)},onInteractOutside:e=>x("interact-outside",e)},[y,O.inputRef]);const{style:k,placedSide:P,placedAlign:B}=a(w.anchor,y,O.open,()=>({...v,component:"combobox"}));function E(e){e.preventDefault()}return(e,o)=>d.forceMount||m(O).open.value?(r(),i("div",{key:0,class:"skdx-combobox__content","data-part":"content",id:m(O).contentId,ref:m(g),role:"listbox","aria-multiselectable":!!m(O).multiple||void 0,"aria-busy":!!m(O).loading.value||void 0,"data-state":m(O).open.value?"open":"closed","data-loading":m(O).loading.value?"":void 0,"data-multiple":m(O).multiple?"":void 0,"data-side":m(P),"data-align":m(B),style:u(m(k)),onMousedown:E},[c(e.$slots,"default")],44,f)):s("",!0)}});export{b as default};

package/dist/combobox/ComboboxEmpty.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ComboboxEmpty.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/combobox/ComboboxEmpty.vue.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Fallback shown in place of the item list when no `SkdxComboboxItem`s are
+ * currently registered (e.g. the consumer's filtered results are empty).
+ * Renders a `<div role="presentation">`; renders nothing while at least one
+ * item is registered. Must be used inside `SkdxCombobox`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/ComboboxEmpty.vue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Fallback shown in place of the item list when no `SkdxComboboxItem`s are
+ * currently registered (e.g. the consumer's filtered results are empty).
+ * Renders a `<div role="presentation">`; renders nothing while at least one
+ * item is registered. Must be used inside `SkdxCombobox`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/combobox/ComboboxEmpty.vue.js

@@ -0,0 +1 @@
+import t from"./ComboboxEmpty.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/combobox/ComboboxEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let e=require("vue");var n={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},u=(0,e.defineComponent)({__name:"ComboboxEmpty",setup(_){const t=(0,e.inject)(r.COMBOBOX_CONTEXT);if(!t)throw new Error("SkdxComboboxEmpty must be used within SkdxCombobox.");return(o,m)=>(0,e.unref)(t).itemCount.value===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",n,[(0,e.renderSlot)(o.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=u;

package/dist/combobox/ComboboxEmpty.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{COMBOBOX_CONTEXT as e}from"./context.js";import{createCommentVNode as o,createElementBlock as t,defineComponent as a,inject as r,openBlock as s,renderSlot as m,unref as n}from"vue";var p={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},d=/* @__PURE__ */a({__name:"ComboboxEmpty",setup(a){const d=r(e);if(!d)throw new Error("SkdxComboboxEmpty must be used within SkdxCombobox.");return(e,a)=>0===n(d).itemCount.value?(s(),t("div",p,[m(e.$slots,"default")])):o("",!0)}});export{d as default};

package/dist/combobox/ComboboxInput.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ComboboxInput.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/combobox/ComboboxInput.vue.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Text field that drives a `SkdxCombobox`'s filtering and keeps real DOM
+ * focus for the whole interaction, and doubles as the popper anchor the
+ * listbox positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls` pointing at the content,
+ * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
+ * virtually-focused option, `autocomplete="off"`, and
+ * `aria-invalid`/`data-invalid`, the native `readonly` attribute with
+ * `aria-readonly`/`data-readonly`, and `aria-busy`/`data-loading` from the
+ * root's `invalid`/`readOnly`/`loading` props.
+ * Typing opens the listbox and updates the draft text; Arrow Down/Up open
+ * the listbox (or move the highlight by one option when already open);
+ * Enter commits the highlighted option — or, with `allowCustomValue` and
+ * nothing highlighted, the draft text itself; Escape closes the listbox —
+ * handled by `SkdxComboboxContent` whenever one is mounted, so the cancelable
+ * `escape-key-down` it emits can still veto the close. Must be used inside
+ * `SkdxCombobox`.
+ */
+type __VLS_Props = {};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/combobox/ComboboxInput.vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Text field that drives a `SkdxCombobox`'s filtering and keeps real DOM
+ * focus for the whole interaction, and doubles as the popper anchor the
+ * listbox positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls` pointing at the content,
+ * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
+ * virtually-focused option, `autocomplete="off"`, and
+ * `aria-invalid`/`data-invalid`, the native `readonly` attribute with
+ * `aria-readonly`/`data-readonly`, and `aria-busy`/`data-loading` from the
+ * root's `invalid`/`readOnly`/`loading` props.
+ * Typing opens the listbox and updates the draft text; Arrow Down/Up open
+ * the listbox (or move the highlight by one option when already open);
+ * Enter commits the highlighted option — or, with `allowCustomValue` and
+ * nothing highlighted, the draft text itself; Escape closes the listbox —
+ * handled by `SkdxComboboxContent` whenever one is mounted, so the cancelable
+ * `escape-key-down` it emits can still veto the close. Must be used inside
+ * `SkdxCombobox`.
+ */
+type __VLS_Props = {};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/combobox/ComboboxInput.vue.js

@@ -0,0 +1 @@
+import t from"./ComboboxInput.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/combobox/ComboboxInput.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const m=require("../utils/reassertValue.cjs"),_=require("../utils/popper.cjs"),c=require("./context.cjs");let t=require("vue");var x=["aria-expanded","aria-controls","aria-activedescendant","readonly","aria-invalid","aria-readonly","aria-busy","data-invalid","data-readonly","data-loading","data-multiple","value"],y=(0,t.defineComponent)({__name:"ComboboxInput",setup(b){const l=(0,t.inject)(c.COMBOBOX_CONTEXT);if(!l)throw new Error("SkdxComboboxInput must be used within SkdxCombobox.");const e=l,r=(0,t.inject)(_.POPPER_CONTEXT);if(!r)throw new Error("SkdxComboboxInput must be used within SkdxCombobox.");const i=(0,t.ref)(null);(0,t.onMounted)(()=>{e.inputRef.value=i.value,r.setAnchor(i.value)}),(0,t.onBeforeUnmount)(()=>{r.anchor.value===i.value&&r.setAnchor(null)});function d(a){const n=e.contentRef.value;if(!n)return;const u=Array.from(n.querySelectorAll(c.OPTION_SELECTOR));if(u.length===0)return;let o=u.findIndex(s=>s.id===e.activeId.value)+a;o<0&&(o=0),o>=u.length&&(o=u.length-1),e.setActiveId(u[o].id)}function f(){if(!e.activeId.value)return;const a=e.getItem(e.activeId.value);a&&e.selectItem(a.value,a.text||a.value)}function v(a){const n=a.target;e.onInputValueChange(n.value),e.open.value||e.setOpen(!0),m.reassertValue(n,()=>e.inputValue.value)}function p(a){a.key==="ArrowDown"?(a.preventDefault(),e.open.value?d(1):e.openWithHighlight("first")):a.key==="ArrowUp"?(a.preventDefault(),e.open.value?d(-1):e.openWithHighlight("last")):a.key==="Enter"?e.activeId.value?(a.preventDefault(),f()):e.allowCustomValue&&e.inputValue.value!==""&&(a.preventDefault(),e.selectItem(e.inputValue.value,e.inputValue.value)):a.key==="Escape"&&e.open.value&&!e.contentRef.value&&(a.preventDefault(),e.setOpen(!1))}return(a,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("input",{class:"skdx-combobox__input","data-part":"input",ref_key:"elRef",ref:i,type:"text",role:"combobox","aria-expanded":(0,t.unref)(e).open.value,"aria-controls":(0,t.unref)(e).contentId,"aria-autocomplete":"list","aria-activedescendant":(0,t.unref)(e).activeId.value??void 0,autocomplete:"off",readonly:(0,t.unref)(e).readOnly||void 0,"aria-invalid":(0,t.unref)(e).invalid?!0:void 0,"aria-readonly":(0,t.unref)(e).readOnly?!0:void 0,"aria-busy":(0,t.unref)(e).loading.value?!0:void 0,"data-invalid":(0,t.unref)(e).invalid?"":void 0,"data-readonly":(0,t.unref)(e).readOnly?"":void 0,"data-loading":(0,t.unref)(e).loading.value?"":void 0,"data-multiple":(0,t.unref)(e).multiple?"":void 0,value:(0,t.unref)(e).inputValue.value,onInput:v,onKeydown:p},null,40,x))}});exports.default=y;