npm - @skdx/vue - Versions diffs - 0.26.0 - Mend

@skdx/vue 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3413) hide show

package/dist/tabs/index.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Tabs.vue.cjs"),r=require("./TabsList.vue.cjs"),t=require("./TabsTrigger.vue.cjs"),a=require("./TabsContent.vue.cjs");exports.SkdxTabs=e.default;exports.SkdxTabsContent=a.default;exports.SkdxTabsList=r.default;exports.SkdxTabsTrigger=t.default;

package/dist/tabs/index.d.cts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default as SkdxTabs } from './Tabs.vue.cjs';
+export { default as SkdxTabsList } from './TabsList.vue.cjs';
+export { default as SkdxTabsTrigger } from './TabsTrigger.vue.cjs';
+export { default as SkdxTabsContent } from './TabsContent.vue.cjs';

package/dist/tabs/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default as SkdxTabs } from './Tabs.vue.js';
+export { default as SkdxTabsList } from './TabsList.vue.js';
+export { default as SkdxTabsTrigger } from './TabsTrigger.vue.js';
+export { default as SkdxTabsContent } from './TabsContent.vue.js';

package/dist/tabs/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import s from"./Tabs.vue.js";import r from"./TabsList.vue.js";import a from"./TabsTrigger.vue.js";import o from"./TabsContent.vue.js";export{s as SkdxTabs,o as SkdxTabsContent,r as SkdxTabsList,a as SkdxTabsTrigger};

package/dist/tag/Tag.vue.cjs ADDED Viewed

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

package/dist/tag/Tag.vue.d.cts ADDED Viewed

@@ -0,0 +1,46 @@
+/**
+ * The Vue implementation of the shared Tag contract (see `@skdx/shared`'s
+ * `tagContract`). One removable entry inside a `<SkdxTagGroup>`: renders a
+ * `<span role="listitem">` that takes part in the group's roving tabindex and
+ * emits `delete` on `Delete` or `Backspace`, after moving focus to a
+ * neighbouring tag so the removal never drops focus to `<body>`.
+ *
+ * Give it a `<SkdxTagDelete>` child for a pointer affordance; the button
+ * borrows `value` for its accessible name, so it announces "Remove react"
+ * rather than joining a row of identical "Remove" buttons.
+ *
+ * Must be used inside `<SkdxTagGroup>` — the group owns the focus behaviour
+ * that makes a tag worth being a component at all. For a purely decorative
+ * label with no keyboard behaviour, use `<SkdxBadge>`.
+ *
+ * Unlike React and Svelte, where a missing `onDelete`/`ondelete` marks a tag
+ * static, this emits `delete` unconditionally: a Vue component cannot cheaply
+ * tell whether a parent is listening.
+ */
+type __VLS_Props = {
+    /** This tag's position in the rendered list; the group compares it against its own active index to place the single Tab stop. */
+    index: number;
+    /** This tag's text, used to name the delete button (`Remove react`). */
+    value?: string;
+    /** Disables this tag alone: it can't be removed and arrow-key navigation skips it. */
+    disabled?: 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, {
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: 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/tag/Tag.vue.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+/**
+ * The Vue implementation of the shared Tag contract (see `@skdx/shared`'s
+ * `tagContract`). One removable entry inside a `<SkdxTagGroup>`: renders a
+ * `<span role="listitem">` that takes part in the group's roving tabindex and
+ * emits `delete` on `Delete` or `Backspace`, after moving focus to a
+ * neighbouring tag so the removal never drops focus to `<body>`.
+ *
+ * Give it a `<SkdxTagDelete>` child for a pointer affordance; the button
+ * borrows `value` for its accessible name, so it announces "Remove react"
+ * rather than joining a row of identical "Remove" buttons.
+ *
+ * Must be used inside `<SkdxTagGroup>` — the group owns the focus behaviour
+ * that makes a tag worth being a component at all. For a purely decorative
+ * label with no keyboard behaviour, use `<SkdxBadge>`.
+ *
+ * Unlike React and Svelte, where a missing `onDelete`/`ondelete` marks a tag
+ * static, this emits `delete` unconditionally: a Vue component cannot cheaply
+ * tell whether a parent is listening.
+ */
+type __VLS_Props = {
+    /** This tag's position in the rendered list; the group compares it against its own active index to place the single Tab stop. */
+    index: number;
+    /** This tag's text, used to name the delete button (`Remove react`). */
+    value?: string;
+    /** Disables this tag alone: it can't be removed and arrow-key navigation skips it. */
+    disabled?: 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, {
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: 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/tag/Tag.vue.js ADDED Viewed

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

package/dist/tag/Tag.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const l=require("../tag-group/context.cjs"),_=require("./context.cjs");let e=require("vue");var m=["data-disabled","tabindex"],b=(0,e.defineComponent)({__name:"Tag",props:{index:{},value:{default:""},disabled:{type:Boolean,default:!1}},emits:["delete"],setup(c,{emit:p}){const t=c,v=p,o=(0,e.inject)(l.TAG_GROUP_CONTEXT);if(!o)throw new Error("<SkdxTag> must be used inside <SkdxTagGroup>.");const n=o,r=(0,e.ref)(null),d=(0,e.computed)(()=>t.disabled||n.disabled.value),f=(0,e.computed)(()=>n.tabStopIndex.value===t.index?0:-1);let u;(0,e.onMounted)(()=>{u=n.register()}),(0,e.onUnmounted)(()=>u?.());function s(){d.value||(n.setActiveIndex(l.focusTagNeighbor(r.value,t.index)),v("delete"))}function x(a){a.key!=="Delete"&&a.key!=="Backspace"||(a.preventDefault(),s())}return(0,e.provide)(_.TAG_CONTEXT,{value:(0,e.computed)(()=>t.value),disabled:d,remove:s}),(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-tag","data-part":"root","data-skdx-component":"tag",ref_key:"element",ref:r,role:"listitem","data-skdx-tag":"","data-disabled":d.value?"":void 0,tabindex:f.value,onFocusin:i[0]||(i[0]=g=>(0,e.unref)(n).setActiveIndex(t.index)),onKeydown:x},[(0,e.renderSlot)(a.$slots,"default")],40,m))}});exports.default=b;

package/dist/tag/Tag.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import{TAG_GROUP_CONTEXT as e,focusTagNeighbor as a}from"../tag-group/context.js";import{TAG_CONTEXT as t}from"./context.js";import{computed as d,createElementBlock as o,defineComponent as s,inject as n,onMounted as l,onUnmounted as i,openBlock as r,provide as u,ref as p,renderSlot as c,unref as m}from"vue";var f=["data-disabled","tabindex"],v=/* @__PURE__ */s({__name:"Tag",props:{index:{},value:{default:""},disabled:{type:Boolean,default:!1}},emits:["delete"],setup(s,{emit:v}){const x=s,b=v,g=n(e);if(!g)throw new Error("<SkdxTag> must be used inside <SkdxTagGroup>.");const k=g,T=p(null),_=d(()=>x.disabled||k.disabled.value),y=d(()=>k.tabStopIndex.value===x.index?0:-1);let A;function B(){_.value||(k.setActiveIndex(a(T.value,x.index)),b("delete"))}function E(e){"Delete"!==e.key&&"Backspace"!==e.key||(e.preventDefault(),B())}return l(()=>{A=k.register()}),i(()=>A?.()),u(t,{value:d(()=>x.value),disabled:_,remove:B}),(e,a)=>(r(),o("span",{class:"skdx-tag","data-part":"root","data-skdx-component":"tag",ref_key:"element",ref:T,role:"listitem","data-skdx-tag":"","data-disabled":_.value?"":void 0,tabindex:y.value,onFocusin:a[0]||(a[0]=e=>m(k).setActiveIndex(x.index)),onKeydown:E},[c(e.$slots,"default")],40,f))}});export{v as default};

package/dist/tag/TagDelete.vue.cjs ADDED Viewed

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

package/dist/tag/TagDelete.vue.d.cts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Removes its parent `<SkdxTag>` on click. Renders a `<button type="button">`
+ * named `Remove <value>` from the tag's own text, so a group of them reads as
+ * "Remove react", "Remove typescript" rather than a row of identical "Remove"
+ * buttons.
+ *
+ * It is deliberately **not** a Tab stop: the group has one, and the keyboard
+ * path to removal is `Delete`/`Backspace` on the tag itself. Must be used
+ * inside `<SkdxTag>`.
+ */
+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/tag/TagDelete.vue.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Removes its parent `<SkdxTag>` on click. Renders a `<button type="button">`
+ * named `Remove <value>` from the tag's own text, so a group of them reads as
+ * "Remove react", "Remove typescript" rather than a row of identical "Remove"
+ * buttons.
+ *
+ * It is deliberately **not** a Tab stop: the group has one, and the keyboard
+ * path to removal is `Delete`/`Backspace` on the tag itself. Must be used
+ * inside `<SkdxTag>`.
+ */
+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/tag/TagDelete.vue.js ADDED Viewed

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

package/dist/tag/TagDelete.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const n=require("./context.cjs");let e=require("vue");var u=["aria-label","disabled","data-disabled"],o=(0,e.defineComponent)({__name:"TagDelete",setup(s){const a=(0,e.inject)(n.TAG_CONTEXT);if(!a)throw new Error("<SkdxTagDelete> must be used inside <SkdxTag>.");const t=a,d=(0,e.computed)(()=>`Remove ${t.value.value}`.trim());return(r,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-tag__delete","data-part":"delete",type:"button","aria-label":d.value,disabled:(0,e.unref)(t).disabled.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,tabindex:-1,onClick:l[0]||(l[0]=i=>(0,e.unref)(t).remove())},[(0,e.renderSlot)(r.$slots,"default")],8,u))}});exports.default=o;

package/dist/tag/TagDelete.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import{TAG_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,inject as l,openBlock as s,renderSlot as o,unref as r}from"vue";var i=["aria-label","disabled","data-disabled"],n=/* @__PURE__ */d({__name:"TagDelete",setup(d){const n=l(e);if(!n)throw new Error("<SkdxTagDelete> must be used inside <SkdxTag>.");const u=n,b=a(()=>`Remove ${u.value.value}`.trim());return(e,a)=>(s(),t("button",{class:"skdx-tag__delete","data-part":"delete",type:"button","aria-label":b.value,disabled:r(u).disabled.value,"data-disabled":r(u).disabled.value?"":void 0,tabindex:-1,onClick:a[0]||(a[0]=e=>r(u).remove())},[o(e.$slots,"default")],8,i))}});export{n as default};

package/dist/tag/context.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ var T=Symbol("skdx-tag-context");exports.TAG_CONTEXT=T;

package/dist/tag/context.d.cts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Shape a tag provides so its `SkdxTagDelete` part can name itself and trigger the removal. */
+export interface TagContext {
+    /** The tag's own text, used to name the delete button as `Remove <value>`. */
+    value: ComputedRef<string>;
+    /** Whether this tag (or the whole group) is disabled. */
+    disabled: ComputedRef<boolean>;
+    /** Moves focus to a neighbouring tag and then emits `delete`; a no-op while disabled. */
+    remove: () => void;
+}
+/** @internal Injection key a tag provides so its delete part shares the tag's text, disabled flag and removal. */
+export declare const TAG_CONTEXT: InjectionKey<TagContext>;

package/dist/tag/context.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Shape a tag provides so its `SkdxTagDelete` part can name itself and trigger the removal. */
+export interface TagContext {
+    /** The tag's own text, used to name the delete button as `Remove <value>`. */
+    value: ComputedRef<string>;
+    /** Whether this tag (or the whole group) is disabled. */
+    disabled: ComputedRef<boolean>;
+    /** Moves focus to a neighbouring tag and then emits `delete`; a no-op while disabled. */
+    remove: () => void;
+}
+/** @internal Injection key a tag provides so its delete part shares the tag's text, disabled flag and removal. */
+export declare const TAG_CONTEXT: InjectionKey<TagContext>;

package/dist/tag/context.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ var t=/* @__PURE__ */Symbol("skdx-tag-context");export{t as TAG_CONTEXT};

package/dist/tag/index.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Tag.vue.cjs"),r=require("./TagDelete.vue.cjs");exports.SkdxTag=e.default;exports.SkdxTagDelete=r.default;

package/dist/tag/index.d.cts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as SkdxTag } from './Tag.vue.cjs';
2	+ export { default as SkdxTagDelete } from './TagDelete.vue.cjs';

package/dist/tag/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as SkdxTag } from './Tag.vue.js';
2	+ export { default as SkdxTagDelete } from './TagDelete.vue.js';

package/dist/tag/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import e from"./Tag.vue.js";import a from"./TagDelete.vue.js";export{e as SkdxTag,a as SkdxTagDelete};

package/dist/tag-group/TagGroup.vue.cjs ADDED Viewed

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

package/dist/tag-group/TagGroup.vue.d.cts ADDED Viewed

@@ -0,0 +1,40 @@
+import { type TagGroupOrientation } from './context.cjs';
+/**
+ * The Vue implementation of the shared TagGroup contract (see `@skdx/shared`'s
+ * `tagGroupContract`). A keyboard-navigable list of `<SkdxTag>`s: renders
+ * `<div role="list">` and gives the whole group a *single* Tab stop, with the
+ * arrow keys (plus `Home`/`End`) moving between tags.
+ *
+ * Its real job is the other half of that: when a tag is deleted, focus moves
+ * to the neighbouring tag (or to the group when the last one goes) instead of
+ * falling back to `<body>`, so deleting three tags in a row takes three
+ * `Delete` presses rather than three trips back through the document.
+ *
+ * The group holds no tag data — each `<SkdxTag>` emits its own `delete`, so the
+ * list can come from anywhere. Name the group with `aria-label` or
+ * `aria-labelledby`; `role="list"` has no implicit name.
+ */
+type __VLS_Props = {
+    /** Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right vs. Arrow Up/Down. */
+    orientation?: TagGroupOrientation;
+    /** Whether arrow-key navigation wraps from the last tag back to the first, and vice versa. */
+    loop?: boolean;
+    /** Disables every tag in the group: none can be removed, and each mirrors `data-disabled`. */
+    disabled?: 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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    orientation: TagGroupOrientation;
+    loop: boolean;
+}, {}, {}, {}, 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/tag-group/TagGroup.vue.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { type TagGroupOrientation } from './context.js';
+/**
+ * The Vue implementation of the shared TagGroup contract (see `@skdx/shared`'s
+ * `tagGroupContract`). A keyboard-navigable list of `<SkdxTag>`s: renders
+ * `<div role="list">` and gives the whole group a *single* Tab stop, with the
+ * arrow keys (plus `Home`/`End`) moving between tags.
+ *
+ * Its real job is the other half of that: when a tag is deleted, focus moves
+ * to the neighbouring tag (or to the group when the last one goes) instead of
+ * falling back to `<body>`, so deleting three tags in a row takes three
+ * `Delete` presses rather than three trips back through the document.
+ *
+ * The group holds no tag data — each `<SkdxTag>` emits its own `delete`, so the
+ * list can come from anywhere. Name the group with `aria-label` or
+ * `aria-labelledby`; `role="list"` has no implicit name.
+ */
+type __VLS_Props = {
+    /** Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right vs. Arrow Up/Down. */
+    orientation?: TagGroupOrientation;
+    /** Whether arrow-key navigation wraps from the last tag back to the first, and vice versa. */
+    loop?: boolean;
+    /** Disables every tag in the group: none can be removed, and each mirrors `data-disabled`. */
+    disabled?: 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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    orientation: TagGroupOrientation;
+    loop: boolean;
+}, {}, {}, {}, 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/tag-group/TagGroup.vue.js ADDED Viewed

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

package/dist/tag-group/TagGroup.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const s=require("../utils/useRovingFocus.cjs"),i=require("./context.cjs");let e=require("vue");var p=["data-orientation","data-disabled"],v=(0,e.defineComponent)({__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1}},setup(o){const a=o,n=(0,e.ref)(0),t=(0,e.ref)(0),d=(0,e.computed)(()=>s.useRovingFocus({orientation:a.orientation,loop:a.loop,itemSelector:i.TAG_SELECTOR}));return(0,e.provide)(i.TAG_GROUP_CONTEXT,{tabStopIndex:(0,e.computed)(()=>t.value===0?n.value:Math.min(n.value,t.value-1)),setActiveIndex(r){n.value=r},register(){return t.value+=1,()=>{t.value-=1}},disabled:(0,e.computed)(()=>a.disabled)}),(r,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:"list","data-skdx-tag-group":"","data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,tabindex:-1,onKeydown:u[0]||(u[0]=(...l)=>d.value&&d.value(...l))},[(0,e.renderSlot)(r.$slots,"default")],40,p))}});exports.default=v;

package/dist/tag-group/TagGroup.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import{useRovingFocus as a}from"../utils/useRovingFocus.js";import{TAG_GROUP_CONTEXT as e,TAG_SELECTOR as o}from"./context.js";import{computed as t,createElementBlock as d,defineComponent as s,openBlock as l,provide as i,ref as n,renderSlot as r}from"vue";var u=["data-orientation","data-disabled"],p=/* @__PURE__ */s({__name:"TagGroup",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1}},setup(s){const p=s,v=n(0),m=n(0),c=t(()=>a({orientation:p.orientation,loop:p.loop,itemSelector:o}));return i(e,{tabStopIndex:t(()=>0===m.value?v.value:Math.min(v.value,m.value-1)),setActiveIndex(a){v.value=a},register:()=>(m.value+=1,()=>{m.value-=1}),disabled:t(()=>p.disabled)}),(a,e)=>(l(),d("div",{class:"skdx-tag-group","data-part":"root","data-skdx-component":"tag-group",role:"list","data-skdx-tag-group":"","data-orientation":s.orientation,"data-disabled":s.disabled?"":void 0,tabindex:-1,onKeydown:e[0]||(e[0]=(...a)=>c.value&&c.value(...a))},[r(a.$slots,"default")],40,u))}});export{p as default};

package/dist/tag-group/context.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ var g="[data-skdx-tag-group]",c="[data-skdx-tag]",n=Symbol("skdx-tag-group-context");function u(o,T){const t=o?.closest("[data-skdx-tag-group]")??null,a=t?Array.from(t.querySelectorAll(c)):[],r=o?a.indexOf(o):-1,s=r===-1?void 0:a[r+1];return(s??a[r-1]??t)?.focus(),s?T:Math.max(T-1,0)}exports.TAG_GROUP_CONTEXT=n;exports.TAG_GROUP_SELECTOR=g;exports.TAG_SELECTOR=c;exports.focusTagNeighbor=u;

package/dist/tag-group/context.d.cts ADDED Viewed

@@ -0,0 +1,41 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Layout axis of a `SkdxTagGroup`, which also picks the arrow-key axis. Mirrors
+ * React's `TagGroupOrientation` (`packages/react/src/tag-group/types.ts:4`).
+ */
+export type TagGroupOrientation = 'horizontal' | 'vertical';
+/** @internal Marks the TagGroup root, so a tag being removed can find the group to fall back to. */
+export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
+/** @internal Marks a tag, so the group can discover its items from the DOM without a registration round-trip. */
+export declare const TAG_SELECTOR = "[data-skdx-tag]";
+/** @internal Shape a TagGroup provides so its `SkdxTag` children can join its single roving tab stop. */
+export interface TagGroupContext {
+    /** Index of the tag that currently owns the group's single tab stop, clamped to the number of mounted tags. */
+    tabStopIndex: ComputedRef<number>;
+    /** Claims the tab stop for the tag at `index` — on focus, and again after a removal shifts the indices. */
+    setActiveIndex: (index: number) => void;
+    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
+    register: () => () => void;
+    /** Whether the whole group is disabled. */
+    disabled: ComputedRef<boolean>;
+}
+/** @internal Injection key a TagGroup provides so its tags share the roving tab stop and the group-level disabled flag. */
+export declare const TAG_GROUP_CONTEXT: InjectionKey<TagGroupContext>;
+/**
+ * Moves focus off the tag at `index` *before* it is removed, and returns the
+ * index the newly focused tag will hold once the removal lands.
+ *
+ * Focus moves to the following tag, or to the preceding one when the removed
+ * tag was last, or to the group itself when it was the only one — never to
+ * `<body>`, which is what happens by default when the focused element is
+ * unmounted. Focus is moved first and the removal is left to the consumer, so
+ * this works the same whether their state update is synchronous or not: the
+ * neighbour element survives the re-render, so it keeps the focus it was
+ * given.
+ *
+ * Mirrors `packages/react/src/tag-group/TagGroup.tsx`'s `focusTagNeighbor` —
+ * duplicated rather than shared, because no framework package imports
+ * `@skdx/shared` at runtime.
+ * @internal
+ */
+export declare function focusTagNeighbor(tag: HTMLElement | null, index: number): number;

package/dist/tag-group/context.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Layout axis of a `SkdxTagGroup`, which also picks the arrow-key axis. Mirrors
+ * React's `TagGroupOrientation` (`packages/react/src/tag-group/types.ts:4`).
+ */
+export type TagGroupOrientation = 'horizontal' | 'vertical';
+/** @internal Marks the TagGroup root, so a tag being removed can find the group to fall back to. */
+export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
+/** @internal Marks a tag, so the group can discover its items from the DOM without a registration round-trip. */
+export declare const TAG_SELECTOR = "[data-skdx-tag]";
+/** @internal Shape a TagGroup provides so its `SkdxTag` children can join its single roving tab stop. */
+export interface TagGroupContext {
+    /** Index of the tag that currently owns the group's single tab stop, clamped to the number of mounted tags. */
+    tabStopIndex: ComputedRef<number>;
+    /** Claims the tab stop for the tag at `index` — on focus, and again after a removal shifts the indices. */
+    setActiveIndex: (index: number) => void;
+    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
+    register: () => () => void;
+    /** Whether the whole group is disabled. */
+    disabled: ComputedRef<boolean>;
+}
+/** @internal Injection key a TagGroup provides so its tags share the roving tab stop and the group-level disabled flag. */
+export declare const TAG_GROUP_CONTEXT: InjectionKey<TagGroupContext>;
+/**
+ * Moves focus off the tag at `index` *before* it is removed, and returns the
+ * index the newly focused tag will hold once the removal lands.
+ *
+ * Focus moves to the following tag, or to the preceding one when the removed
+ * tag was last, or to the group itself when it was the only one — never to
+ * `<body>`, which is what happens by default when the focused element is
+ * unmounted. Focus is moved first and the removal is left to the consumer, so
+ * this works the same whether their state update is synchronous or not: the
+ * neighbour element survives the re-render, so it keeps the focus it was
+ * given.
+ *
+ * Mirrors `packages/react/src/tag-group/TagGroup.tsx`'s `focusTagNeighbor` —
+ * duplicated rather than shared, because no framework package imports
+ * `@skdx/shared` at runtime.
+ * @internal
+ */
+export declare function focusTagNeighbor(tag: HTMLElement | null, index: number): number;

package/dist/tag-group/context.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ var a="[data-skdx-tag-group]",t="[data-skdx-tag]",o=/* @__PURE__ */Symbol("skdx-tag-group-context");function r(a,o){const r=a?.closest("[data-skdx-tag-group]")??null,s=r?Array.from(r.querySelectorAll(t)):[],d=a?s.indexOf(a):-1,e=-1===d?void 0:s[d+1];return(e??s[d-1]??r)?.focus(),e?o:Math.max(o-1,0)}export{o as TAG_GROUP_CONTEXT,a as TAG_GROUP_SELECTOR,t as TAG_SELECTOR,r as focusTagNeighbor};

package/dist/tag-group/index.cjs ADDED Viewed

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

package/dist/tag-group/index.d.cts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as SkdxTagGroup } from './TagGroup.vue.cjs';
2	+ export type { TagGroupOrientation } from './context.cjs';

package/dist/tag-group/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as SkdxTagGroup } from './TagGroup.vue.js';
2	+ export type { TagGroupOrientation } from './context.js';

package/dist/tag-group/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import o from"./TagGroup.vue.js";export{o as SkdxTagGroup};

package/dist/tags-input/TagsInput.vue.cjs ADDED Viewed

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

package/dist/tags-input/TagsInput.vue.d.cts ADDED Viewed

@@ -0,0 +1,74 @@
+/**
+ * The Vue implementation of the shared TagsInput contract (see
+ * `@skdx/shared`'s `tagsInputContract`). Owns the `string[]` of committed
+ * tags and `provide()`s it, plus add/remove, to `SkdxTagsInputItem` /
+ * `SkdxTagsInputItemDelete` / `SkdxTagsInputInput` children. Renders a plain
+ * `<div>`.
+ *
+ * Works controlled (`v-model:value`) or uncontrolled (`default-value`), and
+ * the draft text in `SkdxTagsInputInput` is separately controllable with
+ * `v-model:input-value` / `default-input-value`. A `validate` predicate can
+ * reject a candidate tag, and `delimiter`/`add-on-paste` decide how typed and
+ * pasted text is split into tags.
+ */
+type __VLS_Props = {
+    /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string[];
+    /** Initial tags, for uncontrolled usage — seeds the internally-tracked list. */
+    defaultValue?: string[];
+    /** Disables adding/removing tags and marks the root and its parts with `data-disabled`. */
+    disabled?: boolean;
+    /** Marks the field as invalid, exposed as `data-invalid` on the root and `SkdxTagsInputInput`. */
+    invalid?: boolean;
+    /** Makes `SkdxTagsInputInput` read-only, exposed as `aria-readonly`/`data-readonly` on the root and the input. */
+    readOnly?: boolean;
+    /** Maximum number of tags; further additions are no-ops once reached. */
+    max?: number;
+    /** Character that commits the draft as a tag while typing, and that pasted text is split on. */
+    delimiter?: string;
+    /** Commit pasted text as tags (split on `delimiter`) instead of dropping it into the draft field. */
+    addOnPaste?: boolean;
+    /**
+     * Decides whether a tag may be added, given the trimmed candidate and the
+     * tags accepted so far. Return `false` to reject it.
+     */
+    validate?: (tag: string, tags: string[]) => boolean;
+    /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
+    inputValue?: string;
+    /** Initial draft text, for uncontrolled usage. */
+    defaultInputValue?: string;
+};
+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, {
+    "update:value": (value: string[]) => any;
+    "value-change": (value: string[]) => any;
+    "update:inputValue": (inputValue: string) => any;
+    "input-value-change": (inputValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onUpdate:inputValue"?: ((inputValue: string) => any) | undefined;
+    "onInput-value-change"?: ((inputValue: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string[];
+    invalid: boolean;
+    defaultValue: string[];
+    max: number;
+    readOnly: boolean;
+    validate: (tag: string, tags: string[]) => boolean;
+    delimiter: string;
+    addOnPaste: boolean;
+    inputValue: string;
+    defaultInputValue: 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/tags-input/TagsInput.vue.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+/**
+ * The Vue implementation of the shared TagsInput contract (see
+ * `@skdx/shared`'s `tagsInputContract`). Owns the `string[]` of committed
+ * tags and `provide()`s it, plus add/remove, to `SkdxTagsInputItem` /
+ * `SkdxTagsInputItemDelete` / `SkdxTagsInputInput` children. Renders a plain
+ * `<div>`.
+ *
+ * Works controlled (`v-model:value`) or uncontrolled (`default-value`), and
+ * the draft text in `SkdxTagsInputInput` is separately controllable with
+ * `v-model:input-value` / `default-input-value`. A `validate` predicate can
+ * reject a candidate tag, and `delimiter`/`add-on-paste` decide how typed and
+ * pasted text is split into tags.
+ */
+type __VLS_Props = {
+    /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string[];
+    /** Initial tags, for uncontrolled usage — seeds the internally-tracked list. */
+    defaultValue?: string[];
+    /** Disables adding/removing tags and marks the root and its parts with `data-disabled`. */
+    disabled?: boolean;
+    /** Marks the field as invalid, exposed as `data-invalid` on the root and `SkdxTagsInputInput`. */
+    invalid?: boolean;
+    /** Makes `SkdxTagsInputInput` read-only, exposed as `aria-readonly`/`data-readonly` on the root and the input. */
+    readOnly?: boolean;
+    /** Maximum number of tags; further additions are no-ops once reached. */
+    max?: number;
+    /** Character that commits the draft as a tag while typing, and that pasted text is split on. */
+    delimiter?: string;
+    /** Commit pasted text as tags (split on `delimiter`) instead of dropping it into the draft field. */
+    addOnPaste?: boolean;
+    /**
+     * Decides whether a tag may be added, given the trimmed candidate and the
+     * tags accepted so far. Return `false` to reject it.
+     */
+    validate?: (tag: string, tags: string[]) => boolean;
+    /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
+    inputValue?: string;
+    /** Initial draft text, for uncontrolled usage. */
+    defaultInputValue?: string;
+};
+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, {
+    "update:value": (value: string[]) => any;
+    "value-change": (value: string[]) => any;
+    "update:inputValue": (inputValue: string) => any;
+    "input-value-change": (inputValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onUpdate:inputValue"?: ((inputValue: string) => any) | undefined;
+    "onInput-value-change"?: ((inputValue: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string[];
+    invalid: boolean;
+    defaultValue: string[];
+    max: number;
+    readOnly: boolean;
+    validate: (tag: string, tags: string[]) => boolean;
+    delimiter: string;
+    addOnPaste: boolean;
+    inputValue: string;
+    defaultInputValue: 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/tags-input/TagsInput.vue.js ADDED Viewed

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

package/dist/tags-input/TagsInput.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const _=require("./context.cjs");let t=require("vue");var h=["data-disabled","data-invalid","data-readonly"],T=(0,t.defineComponent)({__name:"TagsInput",props:{value:{default:void 0},defaultValue:{default:()=>[]},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},max:{default:void 0},delimiter:{default:","},addOnPaste:{type:Boolean,default:!0},validate:{type:Function,default:void 0},inputValue:{default:void 0},defaultInputValue:{default:""}},emits:["update:value","value-change","update:inputValue","input-value-change"],setup(d,{emit:p}){const e=d,l=p,s=(0,t.ref)(e.defaultValue),o=(0,t.computed)(()=>e.value===void 0?s.value:e.value),v=(0,t.ref)(e.defaultInputValue),f=(0,t.computed)(()=>e.inputValue===void 0?v.value:e.inputValue);function r(a){e.value===void 0&&(s.value=a),l("update:value",a),l("value-change",a)}function m(a){e.inputValue===void 0&&(v.value=a),l("update:inputValue",a),l("input-value-change",a)}function c(a){const n=o.value,u=[...n];for(const y of a){const i=y.trim();if(!(!i||u.includes(i))){if(e.max!==void 0&&u.length>=e.max)break;e.validate?.(i,u)!==!1&&u.push(i)}}u.length!==n.length&&r(u)}function g(a){c([a])}function V(a){r(o.value.filter((n,u)=>u!==a))}return(0,t.provide)(_.TAGS_INPUT_CONTEXT,{value:o,inputValue:f,setInputValue:m,disabled:(0,t.computed)(()=>e.disabled),invalid:(0,t.computed)(()=>e.invalid),readOnly:(0,t.computed)(()=>e.readOnly),delimiter:(0,t.computed)(()=>e.delimiter),addOnPaste:(0,t.computed)(()=>e.addOnPaste),addTag:g,addTags:c,removeTag:V}),(a,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-tags-input","data-part":"root","data-skdx-component":"tags-input","data-skdx-tags-input":"","data-disabled":d.disabled?"":void 0,"data-invalid":d.invalid?"":void 0,"data-readonly":d.readOnly?"":void 0},[(0,t.renderSlot)(a.$slots,"default")],8,h))}});exports.default=T;

package/dist/tags-input/TagsInput.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import{TAGS_INPUT_CONTEXT as a}from"./context.js";import{computed as e,createElementBlock as t,defineComponent as d,openBlock as l,provide as u,ref as n,renderSlot as i}from"vue";var o=["data-disabled","data-invalid","data-readonly"],v=/* @__PURE__ */d({__name:"TagsInput",props:{value:{default:void 0},defaultValue:{default:()=>[]},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},max:{default:void 0},delimiter:{default:","},addOnPaste:{type:Boolean,default:!0},validate:{type:Function,default:void 0},inputValue:{default:void 0},defaultInputValue:{default:""}},emits:["update:value","value-change","update:inputValue","input-value-change"],setup(d,{emit:v}){const s=d,p=v,f=n(s.defaultValue),r=e(()=>void 0===s.value?f.value:s.value),c=n(s.defaultInputValue),m=e(()=>void 0===s.inputValue?c.value:s.inputValue);function g(a){void 0===s.value&&(f.value=a),p("update:value",a),p("value-change",a)}function V(a){const e=r.value,t=[...e];for(const e of a){const a=e.trim();if(a&&!t.includes(a)){if(void 0!==s.max&&t.length>=s.max)break;!1!==s.validate?.(a,t)&&t.push(a)}}t.length!==e.length&&g(t)}return u(a,{value:r,inputValue:m,setInputValue:function(a){void 0===s.inputValue&&(c.value=a),p("update:inputValue",a),p("input-value-change",a)},disabled:e(()=>s.disabled),invalid:e(()=>s.invalid),readOnly:e(()=>s.readOnly),delimiter:e(()=>s.delimiter),addOnPaste:e(()=>s.addOnPaste),addTag:function(a){V([a])},addTags:V,removeTag:function(a){g(r.value.filter((e,t)=>t!==a))}}),(a,e)=>(l(),t("div",{class:"skdx-tags-input","data-part":"root","data-skdx-component":"tags-input","data-skdx-tags-input":"","data-disabled":d.disabled?"":void 0,"data-invalid":d.invalid?"":void 0,"data-readonly":d.readOnly?"":void 0},[i(a.$slots,"default")],8,o))}});export{v as default};