@skdx/vue 0.26.0

package/dist/meter/Meter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{METER_CONTEXT as a,getMeterPercent as e,getMeterRange as t}from"./context.js";import{computed as l,createElementBlock as u,defineComponent as v,openBlock as r,provide as m,renderSlot as o}from"vue";var n=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","data-value","data-min","data-max","data-range"],d=/* @__PURE__ */v({__name:"Meter",props:{value:{default:0},min:{default:0},max:{default:100},low:{default:void 0},high:{default:void 0},optimum:{default:void 0},getValueLabel:{type:Function,default:(a,t,l)=>`${Math.round(e(a,t,l))}%`}},setup(e){const v=e,d=l(()=>v.min),i=l(()=>Math.max(v.max,v.min)),s=l(()=>Math.min(Math.max(v.value,d.value),i.value)),p=l(()=>t(s.value,d.value,i.value,v.low,v.high,v.optimum)),x=l(()=>v.getValueLabel(s.value,d.value,i.value));return m(a,{value:s,min:d,max:i,range:p}),(a,e)=>(r(),u("div",{class:"skdx-meter","data-part":"root","data-skdx-component":"meter",role:"meter","aria-valuemin":d.value,"aria-valuemax":i.value,"aria-valuenow":s.value,"aria-valuetext":x.value,"data-value":s.value,"data-min":d.value,"data-max":i.value,"data-range":p.value},[o(a.$slots,"default")],8,n))}});export{d as default};

package/dist/meter/MeterIndicator.vue.cjs

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

package/dist/meter/MeterIndicator.vue.d.cts

@@ -0,0 +1,9 @@
+/**
+ * The visual fill of a `<SkdxMeter>`. Mirrors the root's `data-value` /
+ * `data-min` / `data-max` / `data-range` and sets a `--skdx-meter` CSS custom
+ * property (a percentage) so width/transform can be driven purely from CSS.
+ * Must be used inside `<SkdxMeter>`.
+ */
+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/meter/MeterIndicator.vue.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The visual fill of a `<SkdxMeter>`. Mirrors the root's `data-value` /
+ * `data-min` / `data-max` / `data-range` and sets a `--skdx-meter` CSS custom
+ * property (a percentage) so width/transform can be driven purely from CSS.
+ * Must be used inside `<SkdxMeter>`.
+ */
+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/meter/MeterIndicator.vue.js

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

package/dist/meter/MeterIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let e=require("vue");var u=["data-value","data-min","data-max","data-range"],d=(0,e.defineComponent)({__name:"MeterIndicator",setup(l){const a=(0,e.inject)(r.METER_CONTEXT);if(!a)throw new Error("<SkdxMeterIndicator> must be used inside <SkdxMeter>.");const t=a,n=(0,e.computed)(()=>`${r.getMeterPercent(t.value.value,t.min.value,t.max.value)}%`);return(c,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-meter__indicator","data-part":"indicator","data-value":(0,e.unref)(t).value.value,"data-min":(0,e.unref)(t).min.value,"data-max":(0,e.unref)(t).max.value,"data-range":(0,e.unref)(t).range.value,style:(0,e.normalizeStyle)({"--skdx-meter":n.value})},null,12,u))}});exports.default=d;

package/dist/meter/MeterIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{METER_CONTEXT as a,getMeterPercent as e}from"./context.js";import{computed as t,createElementBlock as r,defineComponent as n,inject as d,normalizeStyle as l,openBlock as s,unref as o}from"vue";var u=["data-value","data-min","data-max","data-range"],m=/* @__PURE__ */n({__name:"MeterIndicator",setup(n){const m=d(a);if(!m)throw new Error("<SkdxMeterIndicator> must be used inside <SkdxMeter>.");const i=m,v=t(()=>`${e(i.value.value,i.min.value,i.max.value)}%`);return(a,e)=>(s(),r("div",{class:"skdx-meter__indicator","data-part":"indicator","data-value":o(i).value.value,"data-min":o(i).min.value,"data-max":o(i).max.value,"data-range":o(i).range.value,style:l({"--skdx-meter":v.value})},null,12,u))}});export{m as default};

package/dist/meter/context.cjs

@@ -0,0 +1 @@
+var p=Symbol("skdx-meter-context");function s(t,e,r){return r===e?0:(t-e)/(r-e)*100}function E(t,e,r,M,u,i){if(M==null&&u==null&&i==null)return;const n=Math.min(Math.max(M??e,e),r),o=Math.min(Math.max(u??r,n),r),c=Math.min(Math.max(i??(e+r)/2,e),r);return c<n?t<=n?"optimum":t<=o?"suboptimal":"poor":c>o?t>=o?"optimum":t>=n?"suboptimal":"poor":t>=n&&t<=o?"optimum":"suboptimal"}exports.METER_CONTEXT=p;exports.getMeterPercent=s;exports.getMeterRange=E;

package/dist/meter/context.d.cts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** Which band of the range the current value falls in, once low/high/optimum are supplied. */
+export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
+/** @internal Shape a Meter provides so its Indicator part can mirror the range. */
+export interface MeterContext {
+    value: ComputedRef<number>;
+    min: ComputedRef<number>;
+    max: ComputedRef<number>;
+    range: ComputedRef<MeterRange | undefined>;
+}
+/** @internal Injection key a Meter provides so its indicator mirrors the current value, range and band. */
+export declare const METER_CONTEXT: InjectionKey<MeterContext>;
+/**
+ * @internal Position of value within [min, max] as a percentage. 0 when the
+ * range is empty (max === min), so a degenerate range yields 0% not NaN%.
+ */
+export declare function getMeterPercent(value: number, min: number, max: number): number;
+/**
+ * @internal The band value falls in, following the HTML <meter> element's
+ * region rules. Returns undefined when no threshold was supplied — a meter
+ * with no thresholds has no good or bad end, so it emits no data-range at all
+ * rather than pretending everything is optimal.
+ */
+export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;

package/dist/meter/context.d.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** Which band of the range the current value falls in, once low/high/optimum are supplied. */
+export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
+/** @internal Shape a Meter provides so its Indicator part can mirror the range. */
+export interface MeterContext {
+    value: ComputedRef<number>;
+    min: ComputedRef<number>;
+    max: ComputedRef<number>;
+    range: ComputedRef<MeterRange | undefined>;
+}
+/** @internal Injection key a Meter provides so its indicator mirrors the current value, range and band. */
+export declare const METER_CONTEXT: InjectionKey<MeterContext>;
+/**
+ * @internal Position of value within [min, max] as a percentage. 0 when the
+ * range is empty (max === min), so a degenerate range yields 0% not NaN%.
+ */
+export declare function getMeterPercent(value: number, min: number, max: number): number;
+/**
+ * @internal The band value falls in, following the HTML <meter> element's
+ * region rules. Returns undefined when no threshold was supplied — a meter
+ * with no thresholds has no good or bad end, so it emits no data-range at all
+ * rather than pretending everything is optimal.
+ */
+export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;

package/dist/meter/context.js

@@ -0,0 +1 @@
+var t=/* @__PURE__ */Symbol("skdx-meter-context");function a(t,a,m){return m===a?0:(t-a)/(m-a)*100}function m(t,a,m,n,e,o){if(null==n&&null==e&&null==o)return;const r=Math.min(Math.max(n??a,a),m),u=Math.min(Math.max(e??m,r),m),i=Math.min(Math.max(o??(a+m)/2,a),m);return i<r?t<=r?"optimum":t<=u?"suboptimal":"poor":i>u?t>=u?"optimum":t>=r?"suboptimal":"poor":t>=r&&t<=u?"optimum":"suboptimal"}export{t as METER_CONTEXT,a as getMeterPercent,m as getMeterRange};

package/dist/meter/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Meter.vue.cjs"),r=require("./MeterIndicator.vue.cjs");exports.SkdxMeter=e.default;exports.SkdxMeterIndicator=r.default;

package/dist/meter/index.d.cts

@@ -0,0 +1,3 @@
+export { default as SkdxMeter } from './Meter.vue.cjs';
+export { default as SkdxMeterIndicator } from './MeterIndicator.vue.cjs';
+export type { MeterRange } from './context.cjs';

package/dist/meter/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SkdxMeter } from './Meter.vue.js';
+export { default as SkdxMeterIndicator } from './MeterIndicator.vue.js';
+export type { MeterRange } from './context.js';

package/dist/meter/index.js

@@ -0,0 +1 @@
+import e from"./Meter.vue.js";import r from"./MeterIndicator.vue.js";export{e as SkdxMeter,r as SkdxMeterIndicator};

package/dist/multi-select/MultiSelect.vue.cjs

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

package/dist/multi-select/MultiSelect.vue.d.cts

@@ -0,0 +1,156 @@
+import { type MultiSelectFilter } from './context.cjs';
+/**
+ * The Vue implementation of the shared MultiSelect contract (see
+ * `@skdx/shared`'s `multiSelectContract`). A text field with a listbox of
+ * options where every chosen value shows up as a removable tag. Owns the
+ * `string[]` selection, the draft text and the popup's open state, and hands
+ * them to every other `SkdxMultiSelect*` part via provide/inject. Renders no DOM
+ * of its own — the "field" box that visually contains the tags and the input is
+ * yours to lay out.
+ *
+ * The popup **stays open across selections** (`closeOnSelect` defaults to
+ * `false`): picking five things should cost five clicks, not five clicks and
+ * five reopenings. Backspace on an empty input removes the last tag, which is
+ * the gesture every tag field has trained users to expect.
+ *
+ * The tag half is not reimplemented here: `SkdxMultiSelectTagList`/
+ * `SkdxMultiSelectTag`/`SkdxMultiSelectTagRemove` are thin bindings over the
+ * existing `SkdxTagGroup`/`SkdxTag`/`SkdxTagDelete`, which already own the
+ * single-tab-stop roving focus and the "move focus to the neighbour *before*
+ * the removal lands" rule that makes clearing several tags in a row possible
+ * from the keyboard.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxMultiSelectContent`'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`).
+ */
+type __VLS_Props = {
+    /**
+     * Selected values in selection order, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string[];
+    /**
+     * Initially selected values, for uncontrolled usage.
+     * @default [] — nothing selected, so no tags are rendered.
+     */
+    defaultValue?: string[];
+    /**
+     * The draft text in the input, for controlled usage. Pair with
+     * `v-model:input-value` or `@input-value-change` — typically used to filter
+     * the option list, since filtering is the consumer's job unless `filter` is
+     * supplied.
+     * @default undefined — uncontrolled, tracks its own draft text internally.
+     */
+    inputValue?: string;
+    /**
+     * Initial draft text, for uncontrolled usage.
+     * @default '' — the field starts empty, so the option list starts unfiltered.
+     */
+    defaultInputValue?: string;
+    /**
+     * Whether the option popup is open, for controlled usage. Pair with
+     * `v-model:open` or `@open-change`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false — the popup waits for a keystroke or an arrow key.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Largest number of values that can be selected. Once reached, unselected
+     * options become `aria-disabled` and stop responding rather than silently
+     * swallowing clicks; already-selected ones stay removable, so the way out of
+     * a full selection is always visible.
+     * @default undefined — no cap.
+     */
+    max?: number;
+    /**
+     * Close the popup after each selection.
+     * @default false — the whole ergonomic point of a multi-select: picking five things should cost five clicks, not five clicks and five reopenings.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Predicate deciding which `SkdxMultiSelectItem`s survive the current draft
+     * text. Rejected items render nothing at all, so they leave the option count
+     * and the highlight order exactly as if the consumer had removed them.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items.
+     */
+    filter?: MultiSelectFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, tags cannot be
+     * removed, and the popup can never open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the selection but blocks any change to it — the input is natively
+     * `readonly` and still focusable (unlike `disabled`), tags are not
+     * removable, and no option can be toggled.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `SkdxMultiSelectInput`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) after
+     * every selection change. Toggling an option changes `aria-selected` on a
+     * node the user is not focused on, so without this a screen-reader user gets
+     * no confirmation that anything happened. Return an empty string to announce
+     * nothing.
+     * @default defaultGetSelectionLabel — e.g. `"2 selected"`.
+     */
+    getSelectionLabel?: (count: number) => string;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string[]) => any;
+    "value-change": (value: 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[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: MultiSelectFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    value: string[];
+    invalid: boolean;
+    defaultValue: string[];
+    max: number;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    closeOnSelect: boolean;
+    getSelectionLabel: (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/multi-select/MultiSelect.vue.d.ts

@@ -0,0 +1,156 @@
+import { type MultiSelectFilter } from './context.js';
+/**
+ * The Vue implementation of the shared MultiSelect contract (see
+ * `@skdx/shared`'s `multiSelectContract`). A text field with a listbox of
+ * options where every chosen value shows up as a removable tag. Owns the
+ * `string[]` selection, the draft text and the popup's open state, and hands
+ * them to every other `SkdxMultiSelect*` part via provide/inject. Renders no DOM
+ * of its own — the "field" box that visually contains the tags and the input is
+ * yours to lay out.
+ *
+ * The popup **stays open across selections** (`closeOnSelect` defaults to
+ * `false`): picking five things should cost five clicks, not five clicks and
+ * five reopenings. Backspace on an empty input removes the last tag, which is
+ * the gesture every tag field has trained users to expect.
+ *
+ * The tag half is not reimplemented here: `SkdxMultiSelectTagList`/
+ * `SkdxMultiSelectTag`/`SkdxMultiSelectTagRemove` are thin bindings over the
+ * existing `SkdxTagGroup`/`SkdxTag`/`SkdxTagDelete`, which already own the
+ * single-tab-stop roving focus and the "move focus to the neighbour *before*
+ * the removal lands" rule that makes clearing several tags in a row possible
+ * from the keyboard.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxMultiSelectContent`'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`).
+ */
+type __VLS_Props = {
+    /**
+     * Selected values in selection order, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string[];
+    /**
+     * Initially selected values, for uncontrolled usage.
+     * @default [] — nothing selected, so no tags are rendered.
+     */
+    defaultValue?: string[];
+    /**
+     * The draft text in the input, for controlled usage. Pair with
+     * `v-model:input-value` or `@input-value-change` — typically used to filter
+     * the option list, since filtering is the consumer's job unless `filter` is
+     * supplied.
+     * @default undefined — uncontrolled, tracks its own draft text internally.
+     */
+    inputValue?: string;
+    /**
+     * Initial draft text, for uncontrolled usage.
+     * @default '' — the field starts empty, so the option list starts unfiltered.
+     */
+    defaultInputValue?: string;
+    /**
+     * Whether the option popup is open, for controlled usage. Pair with
+     * `v-model:open` or `@open-change`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false — the popup waits for a keystroke or an arrow key.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Largest number of values that can be selected. Once reached, unselected
+     * options become `aria-disabled` and stop responding rather than silently
+     * swallowing clicks; already-selected ones stay removable, so the way out of
+     * a full selection is always visible.
+     * @default undefined — no cap.
+     */
+    max?: number;
+    /**
+     * Close the popup after each selection.
+     * @default false — the whole ergonomic point of a multi-select: picking five things should cost five clicks, not five clicks and five reopenings.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Predicate deciding which `SkdxMultiSelectItem`s survive the current draft
+     * text. Rejected items render nothing at all, so they leave the option count
+     * and the highlight order exactly as if the consumer had removed them.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items.
+     */
+    filter?: MultiSelectFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, tags cannot be
+     * removed, and the popup can never open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the selection but blocks any change to it — the input is natively
+     * `readonly` and still focusable (unlike `disabled`), tags are not
+     * removable, and no option can be toggled.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `SkdxMultiSelectInput`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) after
+     * every selection change. Toggling an option changes `aria-selected` on a
+     * node the user is not focused on, so without this a screen-reader user gets
+     * no confirmation that anything happened. Return an empty string to announce
+     * nothing.
+     * @default defaultGetSelectionLabel — e.g. `"2 selected"`.
+     */
+    getSelectionLabel?: (count: number) => string;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string[]) => any;
+    "value-change": (value: 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[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: MultiSelectFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    value: string[];
+    invalid: boolean;
+    defaultValue: string[];
+    max: number;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    closeOnSelect: boolean;
+    getSelectionLabel: (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/multi-select/MultiSelect.vue.js

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

package/dist/multi-select/MultiSelect.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const T=require("../utils/useOpenChangeComplete.cjs"),E=require("../utils/liveAnnouncer.cjs"),R=require("../utils/PopperRoot.vue.cjs"),v=require("./context.cjs");let l=require("vue");var k=(0,l.defineComponent)({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSelectionLabel:{type:Function,default:v.defaultGetSelectionLabel}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(q,{emit:C}){const t=q,i=C,V=(0,l.ref)(null),f=(0,l.ref)(null),r=(0,l.ref)(null),a=(0,l.ref)(new Map),p=(0,l.ref)(null),O=(0,l.ref)(t.defaultValue),o=(0,l.computed)(()=>t.value===void 0?O.value:t.value),y=(0,l.ref)(t.defaultInputValue),g=(0,l.computed)(()=>t.inputValue===void 0?y.value:t.inputValue),S=(0,l.ref)(t.defaultOpen),s=(0,l.computed)(()=>t.open??S.value);T.useOpenChangeComplete(s,f,e=>i("open-change-complete",e));const m=(0,l.computed)(()=>t.disabled||t.readOnly),A=(0,l.computed)(()=>t.max!==void 0&&o.value.length>=t.max);function h(e){e!==o.value&&(t.value===void 0&&(O.value=e),i("update:value",e),i("value-change",e))}function I(e){e!==g.value&&(t.inputValue===void 0&&(y.value=e),i("update:inputValue",e),i("input-value-change",e))}function _(e){e!==s.value&&(t.open===void 0&&(S.value=e),i("update:open",e),i("open-change",e))}function B(e){if(m.value)return;const n=o.value;let u=n;n.includes(e)?u=n.filter(c=>c!==e):(t.max===void 0||n.length<t.max)&&(u=[...n,e]),h(u),I(""),t.closeOnSelect&&_(!1)}function b(e){if(m.value)return;const n=o.value;h(n.includes(e)?n.filter(u=>u!==e):n)}function L(){if(m.value)return;const e=o.value;h(e.length===0?e:e.slice(0,-1))}function M(e){p.value=e,_(!0)}function w(e,n){const u=a.value.get(e);if(u?.value===n.value&&u.text===n.text)return;const c=new Map(a.value);c.set(e,n),a.value=c}function x(e){if(!a.value.has(e))return;const n=new Map(a.value);n.delete(e),a.value=n}let d;(0,l.watch)(s,e=>{if(d!==void 0&&cancelAnimationFrame(d),!e){r.value=null;return}d=requestAnimationFrame(()=>{const n=p.value;if(p.value=null,!n)return;const u=f.value?.querySelectorAll(v.OPTION_SELECTOR);if(!u||u.length===0)return;const c=n==="last"?u[u.length-1]:u[0];r.value===null&&(r.value=c.id)})}),(0,l.onBeforeUnmount)(()=>{d!==void 0&&cancelAnimationFrame(d)});const F=(0,l.computed)(()=>a.value.size);return(0,l.watch)([a,r],([,e])=>{if(e===null)return;const n=Array.from(f.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);n.some(u=>u.id===e)||(r.value=n[0]?.id??null)},{flush:"post"}),(0,l.watch)(()=>o.value.length,e=>E.announce(t.getSelectionLabel(e))),(0,l.provide)(v.MULTI_SELECT_CONTEXT,{inputRef:V,contentRef:f,listId:v.nextMultiSelectListId(),value:o,isSelected:e=>o.value.includes(e),toggle:B,deselect:b,removeLast:L,atMax:A,inputValue:g,onInputValueChange:I,open:s,setOpen:_,activeId:r,setActiveId:e=>{r.value=e},openWithHighlight:M,itemCount:F,registerItem:w,unregisterItem:x,getItem:e=>a.value.get(e),matchesFilter:e=>t.filter===void 0||t.filter(e,g.value),get disabled(){return t.disabled},get readOnly(){return t.readOnly},get invalid(){return t.invalid}}),(e,n)=>((0,l.openBlock)(),(0,l.createBlock)(R.default,null,{default:(0,l.withCtx)(()=>[(0,l.renderSlot)(e.$slots,"default")]),_:3}))}});exports.default=k;

package/dist/multi-select/MultiSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import{announce as t}from"../utils/liveAnnouncer.js";import l from"../utils/PopperRoot.vue.js";import{MULTI_SELECT_CONTEXT as a,OPTION_SELECTOR as n,defaultGetSelectionLabel as u,nextMultiSelectListId as o}from"./context.js";import{computed as i,createBlock as d,defineComponent as v,onBeforeUnmount as r,openBlock as s,provide as c,ref as p,renderSlot as f,watch as m,withCtx as g}from"vue";var h=/* @__PURE__ */v({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSelectionLabel:{type:Function,default:u}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(u,{emit:v}){const h=u,y=v,O=p(null),S=p(null),x=p(null),I=p(/* @__PURE__ */new Map),V=p(null),C=p(h.defaultValue),A=i(()=>void 0===h.value?C.value:h.value),B=p(h.defaultInputValue),b=i(()=>void 0===h.inputValue?B.value:h.inputValue),L=p(h.defaultOpen),M=i(()=>h.open??L.value);e(M,S,e=>y("open-change-complete",e));const F=i(()=>h.disabled||h.readOnly),T=i(()=>void 0!==h.max&&A.value.length>=h.max);function _(e){e!==A.value&&(void 0===h.value&&(C.value=e),y("update:value",e),y("value-change",e))}function w(e){e!==b.value&&(void 0===h.inputValue&&(B.value=e),y("update:inputValue",e),y("input-value-change",e))}function E(e){e!==M.value&&(void 0===h.open&&(L.value=e),y("update:open",e),y("open-change",e))}let j;m(M,e=>{void 0!==j&&cancelAnimationFrame(j),e?j=requestAnimationFrame(()=>{const e=V.value;if(V.value=null,!e)return;const t=S.value?.querySelectorAll(n);if(!t||0===t.length)return;const l="last"===e?t[t.length-1]:t[0];null===x.value&&(x.value=l.id)}):x.value=null}),r(()=>{void 0!==j&&cancelAnimationFrame(j)});const R=i(()=>I.value.size);return m([I,x],([,e])=>{if(null===e)return;const t=Array.from(S.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);t.some(t=>t.id===e)||(x.value=t[0]?.id??null)},{flush:"post"}),m(()=>A.value.length,e=>t(h.getSelectionLabel(e))),c(a,{inputRef:O,contentRef:S,listId:o(),value:A,isSelected:e=>A.value.includes(e),toggle:function(e){if(F.value)return;const t=A.value;let l=t;t.includes(e)?l=t.filter(t=>t!==e):(void 0===h.max||t.length<h.max)&&(l=[...t,e]),_(l),w(""),h.closeOnSelect&&E(!1)},deselect:function(e){if(F.value)return;const t=A.value;_(t.includes(e)?t.filter(t=>t!==e):t)},removeLast:function(){if(F.value)return;const e=A.value;_(0===e.length?e:e.slice(0,-1))},atMax:T,inputValue:b,onInputValueChange:w,open:M,setOpen:E,activeId:x,setActiveId:e=>{x.value=e},openWithHighlight:function(e){V.value=e,E(!0)},itemCount:R,registerItem:function(e,t){const l=I.value.get(e);if(l?.value===t.value&&l.text===t.text)return;const a=new Map(I.value);a.set(e,t),I.value=a},unregisterItem:function(e){if(!I.value.has(e))return;const t=new Map(I.value);t.delete(e),I.value=t},getItem:e=>I.value.get(e),matchesFilter:e=>void 0===h.filter||h.filter(e,b.value),get disabled(){return h.disabled},get readOnly(){return h.readOnly},get invalid(){return h.invalid}}),(e,t)=>(s(),d(l,null,{default:g(()=>[f(e.$slots,"default")]),_:3}))}});export{h as default};

package/dist/multi-select/MultiSelectContent.vue.cjs

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

package/dist/multi-select/MultiSelectContent.vue.d.cts

@@ -0,0 +1,103 @@
+import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/**
+ * The popup shell of an `SkdxMultiSelect`, positioned relative to the input via
+ * floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults to
+ * `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`, flipping and
+ * shifting to avoid viewport collisions unless `avoidCollisions` is `false`.
+ * Renders a plain `<div>` with `data-state`, `data-side` and `data-align`, and
+ * writes the four measurement custom properties
+ * `--skdx-multi-select-available-width`, `--skdx-multi-select-available-height`,
+ * `--skdx-multi-select-trigger-width` and `--skdx-multi-select-transform-origin`
+ * onto itself after each reposition — so a panel whose height must stop at the
+ * viewport edge is CSS, not JavaScript.
+ *
+ * Carries **no ARIA role**: the listbox is `SkdxMultiSelectList`, one level in,
+ * leaving room for a "3 of 8 selected" header or a footer that is not an option.
+ * Prevents `mousedown` from stealing focus off the input, which is what lets the
+ * popup stay open across a run of selections.
+ *
+ * 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 `SkdxMultiSelectInput` precisely so the veto lands before
+ * anything has closed. Mounts only while open unless `forceMount` is set. Must
+ * be used inside `SkdxMultiSelect`.
+ */
+type __VLS_Props = {
+    /**
+     * Preferred side of the input to render on.
+     * @default 'bottom' — the popup hangs below the field, flipping above it only when there is no room.
+     */
+    side?: Side;
+    /**
+     * Alignment of the popup along the chosen side, relative to the input.
+     * @default 'start' — the popup's leading edge lines up with the field's.
+     */
+    align?: Align;
+    /**
+     * Distance in pixels between the popup and the input along `side`.
+     * @default 4 — a small gap, so the popup reads as a separate surface.
+     */
+    sideOffset?: number;
+    /**
+     * Offset in pixels along `align`, shifting the popup perpendicular to `side`.
+     * @default 0 — no perpendicular shift.
+     */
+    alignOffset?: number;
+    /**
+     * Flips to the opposite side when there isn't room to render on the preferred side.
+     * @default true — a popup that would render off-screen flips instead.
+     */
+    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.
+     * @default 8 — the popup never touches the viewport edge.
+     */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * popup's clipping ancestors. Use it to keep the options inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     * @default undefined — the popup's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Keep this popup mounted even while closed, instead of unmounting it.
+     * @default false — the popup leaves the DOM entirely while closed.
+     */
+    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;
+    };
+};