@skdx/vue 0.27.0 → 0.29.0

package/dist/mentions/Mentions.vue.d.cts

@@ -0,0 +1,210 @@
+import { type MentionsFilter, type MentionsHighlightChangeDetail, type MentionsOption, type MentionsQueryChangeDetail, type MentionsSerializer, type MentionsValueChangeDetail } from './context.cjs';
+/**
+ * A multi-line field whose trigger characters open a caret-anchored listbox, and choosing an item replaces only the typed token.
+ *
+ * @example
+ * ```vue
+ * <SkdxMentions :options="[{ value: 'alice', label: 'Alice' }]" aria-label="Message" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The field's full text, for controlled usage; pair with `v-model:value`.
+     * @default undefined — uncontrolled, tracks its own text internally.
+     */
+    value?: string | undefined;
+    /**
+     * Initial text of the field, and the text a form reset restores.
+     * @default '' — the field opens empty.
+     */
+    defaultValue?: string;
+    /**
+     * Characters that open a mention when typed at a word boundary, read one character at a time.
+     * @default '@' — a single people-mention trigger.
+     */
+    triggers?: string | readonly string[];
+    /**
+     * Mentionable collection as data, rendered as one Item per entry by the derived anatomy.
+     * @default undefined — the default slot must compose the field itself.
+     */
+    options?: MentionsOption[] | undefined;
+    /**
+     * Narrows Items against the active query: `'manual'` filters nothing, a predicate filters and ranks.
+     * @default 'manual' — with `options` supplied, a case-insensitive match on the query.
+     */
+    filter?: MentionsFilter;
+    /**
+     * Builds the text that replaces the typed token when an item is chosen.
+     * @default (item) => `${item.trigger}${item.textValue}` — the trigger character followed by the item's text.
+     */
+    serialize?: MentionsSerializer;
+    /**
+     * Whether a single space follows an inserted mention, skipped where the text already continues with whitespace.
+     * @default true
+     */
+    appendSpace?: boolean;
+    /**
+     * How many spaces a query may contain before the mention is abandoned.
+     * @default 0 — the first space ends it, which is what a handle needs.
+     */
+    allowedSpaces?: number;
+    /**
+     * Whether a trigger only opens a mention at the start of the value or after a non-word character.
+     * @default true — keeps "user@example.com" from opening a popup mid-address.
+     */
+    requireWordBoundary?: boolean;
+    /**
+     * Controlled open state of the popup; pair with `v-model:open`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean | undefined;
+    /**
+     * Initial open state of the popup, for uncontrolled usage.
+     * @default false — the popup waits for a trigger character.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Keeps the first item highlighted whenever the filtered list changes while open, so Enter always has a target.
+     * @default true — the opposite of Combobox, since a mention popup exists only to be committed.
+     */
+    autoHighlight?: boolean;
+    /**
+     * Wraps arrow navigation around the ends of the item list.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Marks items as in flight, exposed as `aria-busy`/`data-loading`, and suppresses the result-count announcement.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Grows the field to fit its content instead of showing a scrollbar.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * The field's opening size, and the floor auto-resize will not shrink below.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows?: number;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number | undefined;
+    /**
+     * Disables the field so no mention can ever open, and no text can be entered.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Makes the field read-only while keeping it focusable; trigger detection is suspended.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Form field name the field's full text is submitted under.
+     * @default undefined — the field submits nothing at all.
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` this field submits into, so it can live outside that form's subtree.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Marks the field required for native constraint validation while its text is empty.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Formats the polite announcement when the rendered item count changes while open; return an empty string to announce nothing.
+     * @default defaultGetResultCountLabel — e.g. `"3 results available"`.
+     */
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Accessible name for the derived Input and Content, neither of which takes a name from content.
+     * @default undefined — the Input is unnamed, which axe reports under `aria-input-field-name`.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Placeholder text forwarded to the derived Input.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+};
+type __VLS_Slots = {
+    /** Manual composition of the field, popup and items, replacing the derived `options` anatomy. */
+    default?(): unknown;
+    /** Body of a derived mention row, for markup its `label` string cannot express; `highlighted` is that row's virtual focus state. */
+    option?(props: {
+        option: MentionsOption;
+        highlighted: boolean;
+    }): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus to the text field, which is where this component keeps real DOM focus. */
+    focus: () => void | undefined;
+    /** Reports whether the field satisfies its constraints, delegating to the real textarea; true with none mounted. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the real textarea, like `HTMLTextAreaElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string) => any;
+    "value-change": (detail: MentionsValueChangeDetail) => any;
+    "open-change-complete": (open: boolean) => any;
+    "highlight-change": (detail: MentionsHighlightChangeDetail) => any;
+    "query-change": (detail: MentionsQueryChangeDetail | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (detail: MentionsValueChangeDetail) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    "onHighlight-change"?: (detail: MentionsHighlightChangeDetail) => any;
+    "onQuery-change"?: (detail: MentionsQueryChangeDetail | null) => any;
+}>, {
+    form: string | undefined;
+    filter: MentionsFilter;
+    loading: boolean;
+    disabled: boolean;
+    placeholder: string | undefined;
+    name: string | undefined;
+    open: boolean | undefined;
+    defaultOpen: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    required: boolean;
+    value: string | undefined;
+    ariaLabel: string | undefined;
+    invalid: boolean;
+    options: MentionsOption[] | undefined;
+    loop: boolean;
+    allowedSpaces: number;
+    requireWordBoundary: boolean;
+    autoResize: boolean;
+    maxRows: number | undefined;
+    minRows: number;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
+    triggers: string | readonly string[];
+    serialize: MentionsSerializer;
+    appendSpace: 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/mentions/Mentions.vue.d.ts

@@ -0,0 +1,210 @@
+import { type MentionsFilter, type MentionsHighlightChangeDetail, type MentionsOption, type MentionsQueryChangeDetail, type MentionsSerializer, type MentionsValueChangeDetail } from './context.js';
+/**
+ * A multi-line field whose trigger characters open a caret-anchored listbox, and choosing an item replaces only the typed token.
+ *
+ * @example
+ * ```vue
+ * <SkdxMentions :options="[{ value: 'alice', label: 'Alice' }]" aria-label="Message" />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The field's full text, for controlled usage; pair with `v-model:value`.
+     * @default undefined — uncontrolled, tracks its own text internally.
+     */
+    value?: string | undefined;
+    /**
+     * Initial text of the field, and the text a form reset restores.
+     * @default '' — the field opens empty.
+     */
+    defaultValue?: string;
+    /**
+     * Characters that open a mention when typed at a word boundary, read one character at a time.
+     * @default '@' — a single people-mention trigger.
+     */
+    triggers?: string | readonly string[];
+    /**
+     * Mentionable collection as data, rendered as one Item per entry by the derived anatomy.
+     * @default undefined — the default slot must compose the field itself.
+     */
+    options?: MentionsOption[] | undefined;
+    /**
+     * Narrows Items against the active query: `'manual'` filters nothing, a predicate filters and ranks.
+     * @default 'manual' — with `options` supplied, a case-insensitive match on the query.
+     */
+    filter?: MentionsFilter;
+    /**
+     * Builds the text that replaces the typed token when an item is chosen.
+     * @default (item) => `${item.trigger}${item.textValue}` — the trigger character followed by the item's text.
+     */
+    serialize?: MentionsSerializer;
+    /**
+     * Whether a single space follows an inserted mention, skipped where the text already continues with whitespace.
+     * @default true
+     */
+    appendSpace?: boolean;
+    /**
+     * How many spaces a query may contain before the mention is abandoned.
+     * @default 0 — the first space ends it, which is what a handle needs.
+     */
+    allowedSpaces?: number;
+    /**
+     * Whether a trigger only opens a mention at the start of the value or after a non-word character.
+     * @default true — keeps "user@example.com" from opening a popup mid-address.
+     */
+    requireWordBoundary?: boolean;
+    /**
+     * Controlled open state of the popup; pair with `v-model:open`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean | undefined;
+    /**
+     * Initial open state of the popup, for uncontrolled usage.
+     * @default false — the popup waits for a trigger character.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Keeps the first item highlighted whenever the filtered list changes while open, so Enter always has a target.
+     * @default true — the opposite of Combobox, since a mention popup exists only to be committed.
+     */
+    autoHighlight?: boolean;
+    /**
+     * Wraps arrow navigation around the ends of the item list.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Marks items as in flight, exposed as `aria-busy`/`data-loading`, and suppresses the result-count announcement.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Grows the field to fit its content instead of showing a scrollbar.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * The field's opening size, and the floor auto-resize will not shrink below.
+     * @default 2 — the platform's own `rows` default.
+     */
+    minRows?: number;
+    /**
+     * Caps auto-resize growth to this many rows, based on computed line-height.
+     * @default undefined — grows without limit.
+     */
+    maxRows?: number | undefined;
+    /**
+     * Disables the field so no mention can ever open, and no text can be entered.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Makes the field read-only while keeping it focusable; trigger detection is suspended.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Form field name the field's full text is submitted under.
+     * @default undefined — the field submits nothing at all.
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` this field submits into, so it can live outside that form's subtree.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Marks the field required for native constraint validation while its text is empty.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Formats the polite announcement when the rendered item count changes while open; return an empty string to announce nothing.
+     * @default defaultGetResultCountLabel — e.g. `"3 results available"`.
+     */
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Accessible name for the derived Input and Content, neither of which takes a name from content.
+     * @default undefined — the Input is unnamed, which axe reports under `aria-input-field-name`.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Placeholder text forwarded to the derived Input.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+};
+type __VLS_Slots = {
+    /** Manual composition of the field, popup and items, replacing the derived `options` anatomy. */
+    default?(): unknown;
+    /** Body of a derived mention row, for markup its `label` string cannot express; `highlighted` is that row's virtual focus state. */
+    option?(props: {
+        option: MentionsOption;
+        highlighted: boolean;
+    }): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus to the text field, which is where this component keeps real DOM focus. */
+    focus: () => void | undefined;
+    /** Reports whether the field satisfies its constraints, delegating to the real textarea; true with none mounted. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the real textarea, like `HTMLTextAreaElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string) => any;
+    "value-change": (detail: MentionsValueChangeDetail) => any;
+    "open-change-complete": (open: boolean) => any;
+    "highlight-change": (detail: MentionsHighlightChangeDetail) => any;
+    "query-change": (detail: MentionsQueryChangeDetail | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (detail: MentionsValueChangeDetail) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    "onHighlight-change"?: (detail: MentionsHighlightChangeDetail) => any;
+    "onQuery-change"?: (detail: MentionsQueryChangeDetail | null) => any;
+}>, {
+    form: string | undefined;
+    filter: MentionsFilter;
+    loading: boolean;
+    disabled: boolean;
+    placeholder: string | undefined;
+    name: string | undefined;
+    open: boolean | undefined;
+    defaultOpen: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    required: boolean;
+    value: string | undefined;
+    ariaLabel: string | undefined;
+    invalid: boolean;
+    options: MentionsOption[] | undefined;
+    loop: boolean;
+    allowedSpaces: number;
+    requireWordBoundary: boolean;
+    autoResize: boolean;
+    maxRows: number | undefined;
+    minRows: number;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
+    triggers: string | readonly string[];
+    serialize: MentionsSerializer;
+    appendSpace: 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/mentions/Mentions.vue.js

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

package/dist/mentions/Mentions.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const U=require("../utils/liveAnnouncer.cjs"),X=require("../utils/useFormReset.cjs"),j=require("../utils/reassertValue.cjs"),L=require("../utils/useControllable.cjs"),Y=require("../utils/useOpenChangeComplete.cjs"),N=require("../utils/scoredFilter.cjs"),C=require("../utils/mentions.cjs"),Z=require("./caret-rect.cjs"),d=require("./context.cjs"),x=require("./MentionsAnatomy.vue.cjs");let u=require("vue");var ee=(0,u.defineComponent)({inheritAttrs:!1,__name:"Mentions",props:{value:{default:void 0},defaultValue:{default:""},triggers:{default:"@"},options:{default:void 0},filter:{type:[String,Function],default:"manual"},serialize:{type:Function,default:d.defaultMentionSerialize},appendSpace:{type:Boolean,default:!0},allowedSpaces:{default:0},requireWordBoundary:{type:Boolean,default:!0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},autoHighlight:{type:Boolean,default:!0},loop:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},autoResize:{type:Boolean,default:!1},minRows:{default:2},maxRows:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},getResultCountLabel:{type:Function,default:d.defaultGetResultCountLabel},ariaLabel:{default:void 0},placeholder:{default:void 0}},emits:["update:value","value-change","query-change","update:open","open-change","open-change-complete","highlight-change"],setup(y,{expose:P,emit:E}){const l=y,c=E,o=(0,u.ref)(null),v=(0,u.ref)(null),s=(0,u.ref)(null),a=(0,u.ref)(new Map),i=(0,u.shallowRef)(null);let g=null,O="auto",w=null,F=null;const M=L.useControllable({controlled:()=>l.value,defaultValue:()=>l.defaultValue}),S=(0,u.computed)(()=>M.value.value??""),I=L.useControllable({controlled:()=>l.open,defaultValue:()=>l.defaultOpen,onChange:e=>{c("update:open",e),c("open-change",e)}}),m=(0,u.computed)(()=>I.value.value??!1);Y.useOpenChangeComplete(m,v,e=>c("open-change-complete",e));const z=(0,u.computed)(()=>d.triggerList(l.triggers)),A=(0,u.computed)(()=>z.value[0]??"@"),T=(0,u.computed)(()=>i.value?.trigger??A.value);function V(e,t,n){const r=S.value;M.set(e)&&(c("update:value",e),c("value-change",{value:e,previousValue:r,reason:t,mention:n}))}function h(e){I.set(e)}function B(e){const t=e&&JSON.stringify([e.trigger,e.query,e.start,e.end]);i.value=e,t!==F&&(F=t,c("query-change",e&&{trigger:e.trigger,query:e.query,start:e.start,end:e.end}))}const $=(0,u.computed)(()=>{const e=o.value;return e?C.caretAnchor(()=>Z.measureCaretRect(e,i.value?.end??0),e):null});function H(){const e=o.value;if(!e)return;const t=l.disabled||l.readOnly?null:C.findMentionToken(e.value,e.selectionStart??0,{triggers:l.triggers,allowedSpaces:l.allowedSpaces,requireWordBoundary:l.requireWordBoundary});t===null&&(g=null),B(t),h(t!==null&&!C.isMentionDismissed(t,g))}function W(){i.value&&(g=i.value.start),h(!1)}function K(e,t,n){const r=o.value,p=i.value;if(!r||!p||l.disabled||l.readOnly)return;const k=l.serialize({value:e,textValue:t,trigger:p.trigger}),R=C.insertMention(r.value,p,k,l.appendSpace);r.value=R.value,r.setSelectionRange(R.caret,R.caret),g=null,V(R.value,n,{trigger:p.trigger,value:e,text:k,start:p.start,end:p.end}),B(null),h(!1),j.reassertValue(r,()=>S.value)}function D(e,t){const n=a.value.get(e);if(n?.value===t.value&&n.text===t.text&&n.trigger===t.trigger)return;const r=new Map(a.value);r.set(e,t),a.value=r}function G(e){if(!a.value.has(e))return;const t=new Map(a.value);t.delete(e),a.value=t}const b=(0,u.computed)(()=>a.value.size),_=(0,u.computed)(()=>typeof l.filter=="function"?l.filter:l.options?d.defaultOptionsFilter:void 0);function J(e,t){if(t!==T.value)return!1;const n=_.value;return typeof n!="function"?!0:N.filterKeeps(n(e,i.value?.query??""))}function Q(e){const t=_.value;if(typeof t!="function")return null;const n=a.value.get(e);if(!n)return null;const r=t(n.text,i.value?.query??"");return typeof r=="number"?r:null}function q(){const e=v.value;return e?N.orderByScore(e,d.OPTION_SELECTOR,Q):[]}(0,u.watch)([a,i,_],()=>q(),{flush:"post"}),(0,u.watch)(m,e=>{e||(s.value=null)}),(0,u.watch)((0,u.computed)(()=>s.value?a.value.get(s.value)?.value??null:null),e=>{if(e===w)return;const t=w;w=e,c("highlight-change",{value:e,previousValue:t,reason:O}),O="auto"}),(0,u.watch)([a,s],([,e])=>{if(e===null)return;const t=q();t.some(n=>n.id===e)||(s.value=t[0]?.id??null)},{flush:"post"});let f;return(0,u.watch)([()=>l.autoHighlight,m,s,b],([e,t,n])=>{!e||!t||n!==null||typeof document>"u"||(f!==void 0&&cancelAnimationFrame(f),f=requestAnimationFrame(()=>{f=void 0;const r=q()[0];r&&(s.value=r.id,v.value&&d.scrollIntoPopup(v.value,r))}))},{immediate:!0,flush:"post"}),(0,u.onBeforeUnmount)(()=>{f!==void 0&&cancelAnimationFrame(f)}),(0,u.watch)([m,b,()=>l.loading],([e,t,n])=>{e&&!n&&U.announce(l.getResultCountLabel(t))},{immediate:!0}),X.useFormReset(()=>o.value,()=>{const e=l.value??l.defaultValue,t=o.value;t&&(t.value=e),V(e,"programmatic",null),g=null,B(null),h(!1)}),(0,u.provide)(d.MENTIONS_CONTEXT,{fieldRef:o,contentRef:v,contentId:d.nextMentionsContentId(),value:S,setValue:V,open:m,setOpen:h,token:i,activeTrigger:T,defaultTrigger:A,detect:H,dismiss:W,insertItem:K,anchor:$,activeId:s,setActiveId:(e,t="auto")=>{O=t,s.value=e},itemCount:b,registerItem:D,unregisterItem:G,getItem:e=>a.value.get(e),isOption:J,orderedOptions:q,get loop(){return l.loop},get autoResize(){return l.autoResize},get minRows(){return l.minRows},get maxRows(){return l.maxRows},get disabled(){return l.disabled},get readOnly(){return l.readOnly},get invalid(){return l.invalid},get required(){return l.required},get loading(){return l.loading},get name(){return l.name},get form(){return l.form}}),P({focus:()=>o.value?.focus(),checkValidity:()=>o.value?.checkValidity()??!0,reportValidity:()=>o.value?.reportValidity()??!0,setCustomValidity:e=>o.value?.setCustomValidity(e)}),(e,t)=>(0,u.renderSlot)(e.$slots,"default",{},()=>[(0,u.createVNode)(x.default,(0,u.mergeProps)(e.$attrs,{options:y.options??[],triggers:z.value,"aria-label":y.ariaLabel,placeholder:y.placeholder}),(0,u.createSlots)({_:2},[e.$slots.option?{name:"option",fn:(0,u.withCtx)(n=>[(0,u.renderSlot)(e.$slots,"option",(0,u.normalizeProps)((0,u.guardReactiveProps)(n)))]),key:"0"}:void 0]),1040,["options","triggers","aria-label","placeholder"])])}});exports.default=ee;

package/dist/mentions/Mentions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{announce as e}from"../utils/liveAnnouncer.js";import{useFormReset as t}from"../utils/useFormReset.js";import{reassertValue as a}from"../utils/reassertValue.js";import{useControllable as l}from"../utils/useControllable.js";import{useOpenChangeComplete as n}from"../utils/useOpenChangeComplete.js";import{filterKeeps as o,orderByScore as u}from"../utils/scoredFilter.js";import{caretAnchor as r,findMentionToken as i,insertMention as s,isMentionDismissed as d}from"../utils/mentions.js";import{measureCaretRect as p}from"./caret-rect.js";import{MENTIONS_CONTEXT as c,OPTION_SELECTOR as f,defaultGetResultCountLabel as v,defaultMentionSerialize as g,defaultOptionsFilter as m,nextMentionsContentId as y,scrollIntoPopup as h,triggerList as R}from"./context.js";import C from"./MentionsAnatomy.vue.js";import{computed as O,createSlots as V,createVNode as B,defineComponent as b,guardReactiveProps as w,mergeProps as S,normalizeProps as q,onBeforeUnmount as x,provide as I,ref as M,renderSlot as j,shallowRef as F,watch as z,withCtx as A}from"vue";var T=/* @__PURE__ */b({inheritAttrs:!1,__name:"Mentions",props:{value:{default:void 0},defaultValue:{default:""},triggers:{default:"@"},options:{default:void 0},filter:{type:[String,Function],default:"manual"},serialize:{type:Function,default:g},appendSpace:{type:Boolean,default:!0},allowedSpaces:{default:0},requireWordBoundary:{type:Boolean,default:!0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},autoHighlight:{type:Boolean,default:!0},loop:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},autoResize:{type:Boolean,default:!1},minRows:{default:2},maxRows:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},getResultCountLabel:{type:Function,default:v},ariaLabel:{default:void 0},placeholder:{default:void 0}},emits:["update:value","value-change","query-change","update:open","open-change","open-change-complete","highlight-change"],setup(v,{expose:g,emit:b}){const T=v,L=b,N=M(null),k=M(null),P=M(null),_=M(/* @__PURE__ */new Map),E=F(null);let $=null,W="auto",H=null,D=null;const G=l({controlled:()=>T.value,defaultValue:()=>T.defaultValue}),J=O(()=>G.value.value??""),K=l({controlled:()=>T.open,defaultValue:()=>T.defaultOpen,onChange:e=>{L("update:open",e),L("open-change",e)}}),U=O(()=>K.value.value??!1);n(U,k,e=>L("open-change-complete",e));const X=O(()=>R(T.triggers)),Q=O(()=>X.value[0]??"@"),Y=O(()=>E.value?.trigger??Q.value);function Z(e,t,a){const l=J.value;G.set(e)&&(L("update:value",e),L("value-change",{value:e,previousValue:l,reason:t,mention:a}))}function ee(e){K.set(e)}function te(e){const t=e&&JSON.stringify([e.trigger,e.query,e.start,e.end]);E.value=e,t!==D&&(D=t,L("query-change",e&&{trigger:e.trigger,query:e.query,start:e.start,end:e.end}))}const ae=O(()=>{const e=N.value;return e?r(()=>p(e,E.value?.end??0),e):null}),le=O(()=>_.value.size),ne=O(()=>"function"==typeof T.filter?T.filter:T.options?m:void 0);function oe(e){const t=ne.value;if("function"!=typeof t)return null;const a=_.value.get(e);if(!a)return null;const l=t(a.text,E.value?.query??"");return"number"==typeof l?l:null}function ue(){const e=k.value;return e?u(e,f,oe):[]}let re;return z([_,E,ne],()=>ue(),{flush:"post"}),z(U,e=>{e||(P.value=null)}),z(O(()=>P.value?_.value.get(P.value)?.value??null:null),e=>{if(e===H)return;const t=H;H=e,L("highlight-change",{value:e,previousValue:t,reason:W}),W="auto"}),z([_,P],([,e])=>{if(null===e)return;const t=ue();t.some(t=>t.id===e)||(P.value=t[0]?.id??null)},{flush:"post"}),z([()=>T.autoHighlight,U,P,le],([e,t,a])=>{!e||!t||null!==a||typeof document>"u"||(void 0!==re&&cancelAnimationFrame(re),re=requestAnimationFrame(()=>{re=void 0;const e=ue()[0];e&&(P.value=e.id,k.value&&h(k.value,e))}))},{immediate:!0,flush:"post"}),x(()=>{void 0!==re&&cancelAnimationFrame(re)}),z([U,le,()=>T.loading],([t,a,l])=>{t&&!l&&e(T.getResultCountLabel(a))},{immediate:!0}),t(()=>N.value,()=>{const e=T.value??T.defaultValue,t=N.value;t&&(t.value=e),Z(e,"programmatic",null),$=null,te(null),ee(!1)}),I(c,{fieldRef:N,contentRef:k,contentId:y(),value:J,setValue:Z,open:U,setOpen:ee,token:E,activeTrigger:Y,defaultTrigger:Q,detect:function(){const e=N.value;if(!e)return;const t=T.disabled||T.readOnly?null:i(e.value,e.selectionStart??0,{triggers:T.triggers,allowedSpaces:T.allowedSpaces,requireWordBoundary:T.requireWordBoundary});null===t&&($=null),te(t),ee(null!==t&&!d(t,$))},dismiss:function(){E.value&&($=E.value.start),ee(!1)},insertItem:function(e,t,l){const n=N.value,o=E.value;if(!n||!o||T.disabled||T.readOnly)return;const u=T.serialize({value:e,textValue:t,trigger:o.trigger}),r=s(n.value,o,u,T.appendSpace);n.value=r.value,n.setSelectionRange(r.caret,r.caret),$=null,Z(r.value,l,{trigger:o.trigger,value:e,text:u,start:o.start,end:o.end}),te(null),ee(!1),a(n,()=>J.value)},anchor:ae,activeId:P,setActiveId:(e,t="auto")=>{W=t,P.value=e},itemCount:le,registerItem:function(e,t){const a=_.value.get(e);if(a?.value===t.value&&a.text===t.text&&a.trigger===t.trigger)return;const l=new Map(_.value);l.set(e,t),_.value=l},unregisterItem:function(e){if(!_.value.has(e))return;const t=new Map(_.value);t.delete(e),_.value=t},getItem:e=>_.value.get(e),isOption:function(e,t){if(t!==Y.value)return!1;const a=ne.value;return"function"!=typeof a||o(a(e,E.value?.query??""))},orderedOptions:ue,get loop(){return T.loop},get autoResize(){return T.autoResize},get minRows(){return T.minRows},get maxRows(){return T.maxRows},get disabled(){return T.disabled},get readOnly(){return T.readOnly},get invalid(){return T.invalid},get required(){return T.required},get loading(){return T.loading},get name(){return T.name},get form(){return T.form}}),g({focus:()=>N.value?.focus(),checkValidity:()=>N.value?.checkValidity()??!0,reportValidity:()=>N.value?.reportValidity()??!0,setCustomValidity:e=>N.value?.setCustomValidity(e)}),(e,t)=>j(e.$slots,"default",{},()=>[B(C,S(e.$attrs,{options:v.options??[],triggers:X.value,"aria-label":v.ariaLabel,placeholder:v.placeholder}),V({_:2},[e.$slots.option?{name:"option",fn:A(t=>[j(e.$slots,"option",q(w(t)))]),key:"0"}:void 0]),1040,["options","triggers","aria-label","placeholder"])])}});export{T as default};

package/dist/mentions/MentionsAnatomy.vue.cjs

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

package/dist/mentions/MentionsAnatomy.vue.d.cts

@@ -0,0 +1,29 @@
+import { type MentionsOption } from './context.cjs';
+/** @internal Default mentions anatomy: a textarea plus a caret-anchored popup rendering one Item per `options` entry. */
+type __VLS_Props = {
+    options: MentionsOption[];
+    /** The configured trigger characters, already read one character at a time. */
+    triggers: readonly string[];
+    /** Label for the Input and the popup, neither of which takes a name from content. */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /**
+     * Placeholder text forwarded to the Input.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+};
+type __VLS_Slots = {
+    option?(props: {
+        option: MentionsOption;
+        highlighted: boolean;
+    }): unknown;
+};
+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/mentions/MentionsAnatomy.vue.d.ts

@@ -0,0 +1,29 @@
+import { type MentionsOption } from './context.js';
+/** @internal Default mentions anatomy: a textarea plus a caret-anchored popup rendering one Item per `options` entry. */
+type __VLS_Props = {
+    options: MentionsOption[];
+    /** The configured trigger characters, already read one character at a time. */
+    triggers: readonly string[];
+    /** Label for the Input and the popup, neither of which takes a name from content. */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /**
+     * Placeholder text forwarded to the Input.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+};
+type __VLS_Slots = {
+    option?(props: {
+        option: MentionsOption;
+        highlighted: boolean;
+    }): unknown;
+};
+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/mentions/MentionsAnatomy.vue.js

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

package/dist/mentions/MentionsAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const o=require("../utils/injectRequired.cjs"),s=require("./context.cjs"),c=require("./MentionsContent.vue.cjs"),b=require("./MentionsEmpty.vue.cjs"),g=require("./MentionsInput.vue.cjs"),v=require("./MentionsItem.vue.cjs"),m=require("./MentionsPortal.vue.cjs");let e=require("vue");var q=(0,e.defineComponent)({inheritAttrs:!1,__name:"MentionsAnatomy",props:{options:{},triggers:{},ariaLabel:{},ariaLabelledby:{},placeholder:{}},setup(l){const r=l,a=o.injectRequired(s.MENTIONS_CONTEXT,"SkdxMentionsAnatomy must be used within SkdxMentions."),u=(0,e.computed)(()=>r.ariaLabel??r.placeholder),d=(0,e.computed)(()=>a.activeId.value?a.getItem(a.activeId.value)?.value??null:null);return(i,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(g.default,(0,e.mergeProps)(i.$attrs,{"aria-label":u.value,"aria-labelledby":l.ariaLabelledby,placeholder:l.placeholder}),null,16,["aria-label","aria-labelledby","placeholder"]),(0,e.createVNode)(m.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(c.default,{"aria-label":u.value,"aria-labelledby":l.ariaLabelledby},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.options,t=>((0,e.openBlock)(),(0,e.createBlock)(v.default,{key:`${t.trigger??l.triggers[0]}${t.value}`,value:t.value,trigger:t.trigger??l.triggers[0],"text-value":t.label,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"option",{option:t,highlighted:d.value===t.value},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label??t.value),1)])]),_:2},1032,["value","trigger","text-value","disabled"]))),128)),(0,e.createVNode)(b.default,null,{default:(0,e.withCtx)(()=>[...n[0]||(n[0]=[(0,e.createTextVNode)("No mentions found",-1)])]),_:1})]),_:3},8,["aria-label","aria-labelledby"])]),_:3})],64))}});exports.default=q;

package/dist/mentions/MentionsAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{injectRequired as e}from"../utils/injectRequired.js";import{MENTIONS_CONTEXT as a}from"./context.js";import l from"./MentionsContent.vue.js";import t from"./MentionsEmpty.vue.js";import r from"./MentionsInput.vue.js";import i from"./MentionsItem.vue.js";import o from"./MentionsPortal.vue.js";import{Fragment as s,computed as n,createBlock as u,createElementBlock as d,createTextVNode as m,createVNode as p,defineComponent as b,mergeProps as v,openBlock as g,renderList as c,renderSlot as f,toDisplayString as y,withCtx as h}from"vue";var j=/* @__PURE__ */b({inheritAttrs:!1,__name:"MentionsAnatomy",props:{options:{},triggers:{},ariaLabel:{},ariaLabelledby:{},placeholder:{}},setup(b){const j=b,M=e(a,"SkdxMentionsAnatomy must be used within SkdxMentions."),x=n(()=>j.ariaLabel??j.placeholder),_=n(()=>M.activeId.value?M.getItem(M.activeId.value)?.value??null:null);return(e,a)=>(g(),d(s,null,[p(r,v(e.$attrs,{"aria-label":x.value,"aria-labelledby":b.ariaLabelledby,placeholder:b.placeholder}),null,16,["aria-label","aria-labelledby","placeholder"]),p(o,null,{default:h(()=>[p(l,{"aria-label":x.value,"aria-labelledby":b.ariaLabelledby},{default:h(()=>[(g(!0),d(s,null,c(b.options,a=>(g(),u(i,{key:`${a.trigger??b.triggers[0]}${a.value}`,value:a.value,trigger:a.trigger??b.triggers[0],"text-value":a.label,disabled:a.disabled},{default:h(()=>[f(e.$slots,"option",{option:a,highlighted:_.value===a.value},()=>[m(y(a.label??a.value),1)])]),_:2},1032,["value","trigger","text-value","disabled"]))),128)),p(t,null,{default:h(()=>[...a[0]||(a[0]=[m("No mentions found",-1)])]),_:1})]),_:3},8,["aria-label","aria-labelledby"])]),_:3})],64))}});export{j as default};

package/dist/mentions/MentionsContent.vue.cjs

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

package/dist/mentions/MentionsContent.vue.d.cts

@@ -0,0 +1,75 @@
+import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/** The floating listbox of mentionable items, positioned against the caret rather than the field. */
+type __VLS_Props = {
+    /**
+     * Preferred side of the caret to render on.
+     * @default 'bottom' — hangs below the caret, flips above it only when there is no room.
+     */
+    side?: Side;
+    /**
+     * Alignment along the chosen side, relative to the caret.
+     * @default 'start' — leading edge lines up with the caret.
+     */
+    align?: Align;
+    /**
+     * Distance in pixels between the popup and the caret along `side`.
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Offset in pixels along `align`, shifting the popup perpendicular to `side`.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Flips to the opposite side when there isn't room to render on the preferred side.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * Minimum distance in pixels kept from the collision boundary (a number applies to all sides).
+     * @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.
+     * @default undefined — the popup's clipping ancestors.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Keep this popup mounted even while closed, for an exit transition.
+     * @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;
+    "onEscape-key-down"?: (event: KeyboardEvent) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
+}>, {
+    align: Align;
+    forceMount: boolean;
+    side: Side;
+    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;
+    };
+};