npm - @skdx/vue - Versions diffs - 0.27.0 → 0.28.0 - Mend

@skdx/vue 0.27.0 → 0.28.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 (3287) hide show

package/dist/editable/Editable.vue.d.ts CHANGED Viewed

@@ -1,34 +1,20 @@
-import { type EditableActivationMode, type EditableSubmitMode } from './context.js';
+import { type EditableActivationMode, type EditablePlaceholder, type EditableRevertDetail, type EditableSubmitMode } from './context.js';
 /**
- * The Vue implementation of the shared Editable contract (see
- * `@skdx/shared`'s `editableContract`). Root of a click-to-edit inline text
- * field: owns the text **and** the preview/edit mode, and `provide()`s both to
- * its parts. Renders a plain `<div>` carrying `data-state="editing" | "preview"`
- * and `data-empty` — how preview and input sit in the layout is entirely your CSS.
+ * Click-to-edit inline text field. Owns text and preview/edit mode, provides
+ * to parts, renders `<div data-state="editing"|"preview" data-empty>`. With a
+ * `name`, submits the committed value (not live draft) via hidden input.
  *
- * Both pieces of state are independently controllable, each with the usual
- * `v-model:x` pair plus a `default*` seed: `value`/`defaultValue`/`value-change`
- * for the text, `editing`/`defaultEditing`/`edit-change` for the mode. `value`
- * tracks the live draft, so it changes per keystroke; `value-commit` is the one
- * that fires once, on a successful submit.
+ * State is independently controllable: `value`/`defaultValue`/`value-change` +
+ * `value-commit` (fires once on submit), `editing`/`defaultEditing`/`edit-change`.
  *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activationMode` on the preview, or
- *   Enter/Space while the preview has focus, or `SkdxEditableEditTrigger`. The
- *   pre-edit text is snapshotted, then the input is focused with everything
- *   selected (`selectOnFocus`, default) or the caret at the end.
- * - **Submit** — the gestures named by `submitMode`, or
- *   `SkdxEditableSubmitTrigger`. Commits, unless `required` and the draft is
- *   blank, in which case the snapshot is restored instead and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submitMode` says, or
- *   `SkdxEditableCancelTrigger`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the unmounting input.
+ * Activation (preview click, Enter/Space, or `SkdxEditableEditTrigger`) snapshots
+ * text and focuses input (selected or caret at end). Submit (mode-named gestures or
+ * `SkdxEditableSubmitTrigger`) commits unless `required` and blank (then restores).
+ * Escape or `SkdxEditableCancelTrigger` restores. Both exits return focus to preview.
  *
  * @example
  * ```vue
- * <SkdxEditable default-value="Untitled" placeholder="Name this board" @value-commit="save">
+ * <SkdxEditable default-value="Untitled" @value-commit="save">
  *   <SkdxEditablePreview />
  *   <SkdxEditableInput aria-label="Board name" />
  * </SkdxEditable>
@@ -48,6 +34,13 @@ type __VLS_Props = {
      * @default '' — starts empty, so the preview shows `placeholder` and the root carries `data-empty`.
      */
     defaultValue?: string;
+    /**
+     * Renders `SkdxEditableTextarea` instead of `SkdxEditableInput` in the
+     * derived anatomy — the recipe's own `Enter`-inserts-a-newline field.
+     * Ignored once the default slot supplies its own editor.
+     * @default false — the derived anatomy is a single-line `SkdxEditableInput`.
+     */
+    multiline?: boolean;
     /**
      * Whether the input is showing instead of the preview, for controlled
      * usage. Pair with `v-model:editing` or `@edit-change`.
@@ -63,13 +56,22 @@ type __VLS_Props = {
      */
     defaultEditing?: boolean;
     /**
-     * Text rendered by `SkdxEditablePreview` when the value is empty, and set as
-     * the input's `placeholder`. It doubles as the preview's accessible name
-     * while empty, so an editable with no placeholder and no value renders a
-     * button with no name — always supply one, or an `aria-label` on the preview.
+     * Text rendered by `SkdxEditablePreview` when the value is empty, and set
+     * as the editor's `placeholder`. A plain string sets both; the object
+     * form — `{ edit, preview }` — sets them separately, since the preview's
+     * placeholder doubles as its accessible name while empty (a label, "Board
+     * name") while the editor's is a one-time hint ("Type a name and press Enter").
      * @default undefined — an empty value renders an empty preview.
      */
-    placeholder?: string;
+    placeholder?: string | EditablePlaceholder;
+    /**
+     * Where focus goes when the edit ends, overriding the default of the
+     * preview. A function rather than an element so the target is resolved at
+     * the moment focus moves, not at render, since it usually does not exist
+     * yet when the prop is written; returning `null` falls back to the preview.
+     * @default undefined — focus returns to `SkdxEditablePreview`.
+     */
+    finalFocusEl?: () => HTMLElement | null;
     /**
      * Blocks editing entirely and takes the preview out of the tab order.
      * @default false — the preview is a tab stop and can open an edit.
@@ -88,6 +90,15 @@ type __VLS_Props = {
      * @default false — an empty submit is committed like any other.
      */
     required?: boolean;
+    /**
+     * Marks the current value as invalid — a commit the server rejected, or a
+     * rule the surrounding `SkdxField` owns. Published as `data-invalid` on
+     * the root, preview and editor, and as `aria-invalid="true"` on the
+     * **editor only**, since the preview's `role="button"` lists it as
+     * deprecated (ARIA 1.2). Consumer-owned; the component never sets it.
+     * @default false — the value is treated as valid.
+     */
+    invalid?: boolean;
     /**
      * Maximum number of characters the input accepts, forwarded to the native
      * `maxlength` attribute.
@@ -96,9 +107,10 @@ type __VLS_Props = {
     maxLength?: number;
     /**
      * Which pointer gesture on `SkdxEditablePreview` enters edit mode.
-     * `'focus'` makes the field editable as soon as it is tabbed to —
-     * convenient in a form, hostile in a read-mostly page, where `'dblclick'`
-     * avoids editing on a stray click.
+     * `'focus'` is convenient in a form but hostile in a read-mostly page,
+     * where `'dblclick'` avoids a stray click; `'none'` matches no pointer
+     * gesture, for entry only via `SkdxEditableEditTrigger` or the controlled
+     * `editing` prop. Enter/Space on the focused preview opens the editor in every mode.
      * @default 'click' — a single click on the preview starts editing.
      */
     activationMode?: EditableActivationMode;
@@ -115,6 +127,28 @@ type __VLS_Props = {
      * @default true — entering edit mode selects everything.
      */
     selectOnFocus?: boolean;
+    /**
+     * Form field name. When set, the root renders one visually-hidden input
+     * carrying the **committed** value, so an Editable inside a form submits
+     * like any other control instead of leaving the consumer to serialise it
+     * themselves.
+     * @default undefined — no hidden input is rendered; the value is not part of any form.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` to submit with, mirroring the native `form`
+     * attribute, for an Editable rendered outside the `<form>` it belongs to;
+     * only meaningful alongside `name`, which renders the hidden input the attribute lands on.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string;
+    /**
+     * Whether the derived anatomy renders an `SkdxEditableSubmitTrigger` /
+     * `SkdxEditableCancelTrigger` pair after the editor; both render nothing
+     * outside edit mode. Ignored when children are given.
+     * @default false
+     */
+    showControls?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -124,27 +158,35 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "value-commit": (value: string) => any;
+    "value-revert": (detail: EditableRevertDetail) => any;
     "update:editing": (editing: boolean) => any;
     "edit-change": (editing: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onValue-change"?: ((value: string) => any) | undefined;
     "onValue-commit"?: ((value: string) => any) | undefined;
+    "onValue-revert"?: ((detail: EditableRevertDetail) => any) | undefined;
     "onUpdate:editing"?: ((editing: boolean) => any) | undefined;
     "onEdit-change"?: ((editing: boolean) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
-    required: boolean;
+    placeholder: string | EditablePlaceholder;
     value: string;
-    placeholder: string;
-    defaultValue: string;
-    activationMode: EditableActivationMode;
     readOnly: boolean;
+    required: boolean;
+    name: string;
+    invalid: boolean;
+    defaultValue: string;
     maxLength: number;
+    activationMode: EditableActivationMode;
+    showControls: boolean;
+    selectOnFocus: boolean;
     editing: boolean;
+    multiline: boolean;
     defaultEditing: boolean;
+    finalFocusEl: () => HTMLElement | null;
     submitMode: EditableSubmitMode;
-    selectOnFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/editable/Editable.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const E=require("./context.cjs");let t=require("vue");var B=["data-state","data-empty","data-disabled","data-readonly"],O=(0,t.defineComponent)({__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0}},emits:["update:value","value-change","value-commit","update:editing","edit-change"],setup(n,{emit:g}){const a=n,d=g,s=(0,t.ref)(a.defaultValue),l=(0,t.computed)(()=>a.value===void 0?s.value:a.value),f=(0,t.ref)(a.defaultEditing),u=(0,t.computed)(()=>a.editing===void 0?f.value:a.editing),v=(0,t.ref)(null),p=(0,t.ref)(null),o=(0,t.ref)(!1);let r=l.value;function c(e){e!==l.value&&(a.value===void 0&&(s.value=e),d("update:value",e),d("value-change",e))}function i(e){e!==u.value&&(a.editing===void 0&&(f.value=e),d("update:editing",e),d("edit-change",e))}function y(){a.disabled\|\|a.readOnly\|\|u.value\|\|(r=l.value,~~i(!0~~))}function b(){u.value&&(~~c(r~~),i(!1))}function h(){if(u.value){if(a.required&&l.value.trim()===""){c(r)~~,i(!1)~~;return}i(!1),d("value-commit",l.value)}}function m(){const e=v.value;e&&(e.focus(),a.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}function _(){const e=document.activeElement;e&&e!==document.body\|\|(o.value=!0,p.value?.focus(),o.value=!1)}~~return~~(0,t.watch)(u,async e=>{await(0,t.nextTick)(),e===u.value&&(e?m():_())}),(0,t.onMounted)(()=>{u.value&&m()}),(0,t.provide)(E.EDITABLE_CONTEXT,{value:l,editing:u,~~placeholder~~:(0,t.computed)(()=>a.~~placeholder~~),disabled:(0,t.computed)(()=>a.disabled),readOnly:(0,t.computed)(()=>a.readOnly),required:(0,t.computed)(()=>a.required),maxLength:(0,t.computed)(()=>a.maxLength),activationMode:(0,t.computed)(()=>a.activationMode),submitMode:(0,t.computed)(()=>a.submitMode),inputRef:v,previewRef:p,returningFocus:o,setValue:c,activate:y,submit:h,cancel:b}),(e,q)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":u.value?"editing":"preview","data-empty":l.value===""?"":void 0,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0},[(0,t.renderSlot)(e.$slots,"default")],8,B))}});exports.default=O;
1	+ const B=require("../utils/id.cjs"),E=require("./context.cjs"),_=require("./EditableAnatomy.vue.cjs");let e=require("vue");var T=["data-state","data-empty","data-disabled","data-readonly","data-invalid"],N=["name","form","^value"],R=(0,e.defineComponent)({inheritAttrs:!1,__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},multiline:{type:Boolean,default:!1},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},finalFocusEl:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0},name:{default:void 0},form:{default:void 0},showControls:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","value-revert","update:editing","edit-change"],setup(u,{emit:w}){const a=u,d=w,v=(0,e.ref)(a.defaultValue),i=(0,e.computed)(()=>a.value===void 0?v.value:a.value),f=(0,e.ref)(a.defaultEditing),l=(0,e.computed)(()=>a.editing===void 0?f.value:a.editing),m=(0,e.ref)(null),p=(0,e.ref)(null),n=(0,e.ref)(!1);let r=i.value;const q=(0,e.computed)(()=>l.value?r:i.value);function b(t){t!==i.value&&(a.value===void 0&&(v.value=t),d("update:value",t),d("value-change",t))}function c(t){t!==l.value&&(a.editing===void 0&&(f.value=t),d("update:editing",t),d("edit-change",t))}function k(){a.disabled\|\|a.readOnly\|\|l.value\|\|c(!0)}(0,e.watch)(l,t=>{t&&(r=i.value)},{flush:"sync"});function y(){const t=i.value,o=r;b(o),c(!1),d("value-revert",{value:o,previousValue:t})}function V(){l.value&&y()}function O(){if(l.value){if(a.required&&i.value.trim()===""){y();return}c(!1),d("value-commit",i.value)}}function h(){const t=m.value;t&&(t.focus(),a.selectOnFocus?t.select():t.setSelectionRange(t.value.length,t.value.length))}function x(){const t=document.activeElement;t&&t!==document.body\|\|(n.value=!0,(a.finalFocusEl?.()??p.value)?.focus(),n.value=!1)}(0,e.watch)(l,async t=>{await(0,e.nextTick)(),t===l.value&&(t?h():x())}),(0,e.onMounted)(()=>{l.value&&h()});const A=B.nextId("editable-editor"),F=B.nextId("editable-label"),M=(0,e.ref)(!1),g=(0,e.computed)(()=>E.splitPlaceholder(a.placeholder)),s=(0,e.useAttrs)(),I=(0,e.computed)(()=>s["aria-label"]),L=(0,e.computed)(()=>s["aria-labelledby"]),C=(0,e.computed)(()=>{const{"aria-label":t,"aria-labelledby":o,...P}=s;return P});return(0,e.provide)(E.EDITABLE_CONTEXT,{value:i,editing:l,editPlaceholder:(0,e.computed)(()=>g.value.edit),previewPlaceholder:(0,e.computed)(()=>g.value.preview),editorId:A,labelId:F,labelPresent:M,disabled:(0,e.computed)(()=>a.disabled),readOnly:(0,e.computed)(()=>a.readOnly),required:(0,e.computed)(()=>a.required),invalid:(0,e.computed)(()=>a.invalid),maxLength:(0,e.computed)(()=>a.maxLength),activationMode:(0,e.computed)(()=>a.activationMode),submitMode:(0,e.computed)(()=>a.submitMode),inputRef:m,previewRef:p,returningFocus:n,setValue:b,activate:k,submit:O,cancel:V}),(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":l.value?"editing":"preview","data-empty":i.value===""?"":void 0,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,"data-invalid":u.invalid?"":void 0},C.value),[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(_.default,{multiline:u.multiline,"show-controls":u.showControls,"aria-label":I.value,"aria-labelledby":L.value},null,8,["multiline","show-controls","aria-label","aria-labelledby"])]),u.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,form:u.form,"^value":q.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,N)):(0,e.createCommentVNode)("",!0)],16,T))}});exports.default=R;

package/dist/editable/Editable.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~EDITABLE_CONTEXT~~ as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,nextTick as l,onMounted as u,openBlock as i,provide as o,ref as n,renderSlot as v,watch as c}from"vue";var s=["data-state","data-empty","data-disabled","data-readonly"],r=/* @__PURE__ */d({__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0}},emits:["update:value","value-change","value-commit","update:editing","edit-change"],setup(d,{emit:r}){const f=d,p=r,m=n(f.defaultValue),g=a(()=>void 0===f.value?m.value:f.value),y=n(f.defaultEditing),b=a(()=>void 0===f.editing?y.value:f.editing),h=n(null),B=n(null),x=n(!1);let E=g.value;function O(e){e!==g.value&&(void 0===f.value&&(m.value=e),p("update:value",e),p("value-change",e))}function M(e){e!==b.value&&(void 0===f.editing&&(y.value=e),p("update:editing",e),p("edit-change",e))}function k(){const e=h.value;e&&(e.focus(),f.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}~~return c~~(b,async e=>{await l(),e===b.value&&(e?k():function(){const e=document.activeElement;e&&e!==document.body\|\|(x.value=!0,B.value?.focus(),x.value=!1)}())}),u(()=>{b.value&&k()}),o(e,{value:g,editing:b,~~placeholder~~:a(()=>f.~~placeholder~~),disabled:a(()=>f.disabled),readOnly:a(()=>f.readOnly),required:a(()=>f.required),maxLength:a(()=>f.maxLength),activationMode:a(()=>f.activationMode),submitMode:a(()=>f.submitMode),inputRef:h,previewRef:B,returningFocus:x,setValue:O,activate:function(){f.disabled\|\|f.readOnly\|\|b.value\|\|(~~E=g.value,M(~~!0))},submit:function(){if(b.value){if(f.required&&""===g.value.trim())return ~~O(E),~~void M(!1);M(!1),p("value-commit",g.value)}},cancel:function(){b.value&&(~~O(E~~)~~,M(!1))~~}}),(e,a)=>(i(),t("div",{class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":b.value?"editing":"preview","data-empty":""===g.value?"":void 0,"data-disabled":d.disabled?"":void 0,"data-readonly":d.readOnly?"":void 0},[v(e.$slots,"default")],8,s))}});export{r as default};
1	+ import{nextId as e}from"../utils/id.js";import{EDITABLE_CONTEXT as a,splitPlaceholder as l}from"./context.js";import t from"./EditableAnatomy.vue.js";import{computed as i,createCommentVNode as d,createElementBlock as o,createVNode as n,defineComponent as u,mergeProps as v,nextTick as r,onMounted as s,openBlock as c,provide as f,ref as m,renderSlot as p,useAttrs as b,watch as y}from"vue";var h=["data-state","data-empty","data-disabled","data-readonly","data-invalid"],g=["name","form","^value"],x=/* @__PURE__ */u({inheritAttrs:!1,__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},multiline:{type:Boolean,default:!1},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},finalFocusEl:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0},name:{default:void 0},form:{default:void 0},showControls:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","value-revert","update:editing","edit-change"],setup(u,{emit:x}){const B=u,w=x,E=m(B.defaultValue),O=i(()=>void 0===B.value?E.value:B.value),k=m(B.defaultEditing),M=i(()=>void 0===B.editing?k.value:B.editing),F=m(null),V=m(null),C=m(!1);let P=O.value;const q=i(()=>M.value?P:O.value);function A(e){e!==O.value&&(void 0===B.value&&(E.value=e),w("update:value",e),w("value-change",e))}function I(e){e!==M.value&&(void 0===B.editing&&(k.value=e),w("update:editing",e),w("edit-change",e))}function L(){const e=O.value,a=P;A(a),I(!1),w("value-revert",{value:a,previousValue:e})}function T(){const e=F.value;e&&(e.focus(),B.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}y(M,e=>{e&&(P=O.value)},{flush:"sync"}),y(M,async e=>{await r(),e===M.value&&(e?T():function(){const e=document.activeElement;e&&e!==document.body\|\|(C.value=!0,(B.finalFocusEl?.()??V.value)?.focus(),C.value=!1)}())}),s(()=>{M.value&&T()});const j=e("editable-editor"),N=e("editable-label"),R=m(!1),_=i(()=>l(B.placeholder)),S=b(),D=i(()=>S["aria-label"]),X=i(()=>S["aria-labelledby"]),$=i(()=>{const{"aria-label":e,"aria-labelledby":a,...l}=S;return l});return f(a,{value:O,editing:M,editPlaceholder:i(()=>_.value.edit),previewPlaceholder:i(()=>_.value.preview),editorId:j,labelId:N,labelPresent:R,disabled:i(()=>B.disabled),readOnly:i(()=>B.readOnly),required:i(()=>B.required),invalid:i(()=>B.invalid),maxLength:i(()=>B.maxLength),activationMode:i(()=>B.activationMode),submitMode:i(()=>B.submitMode),inputRef:F,previewRef:V,returningFocus:C,setValue:A,activate:function(){B.disabled\|\|B.readOnly\|\|M.value\|\|I(!0)},submit:function(){if(M.value){if(B.required&&""===O.value.trim())return void L();I(!1),w("value-commit",O.value)}},cancel:function(){M.value&&L()}}),(e,a)=>(c(),o("div",v({class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":M.value?"editing":"preview","data-empty":""===O.value?"":void 0,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,"data-invalid":u.invalid?"":void 0},$.value),[p(e.$slots,"default",{},()=>[n(t,{multiline:u.multiline,"show-controls":u.showControls,"aria-label":D.value,"aria-labelledby":X.value},null,8,["multiline","show-controls","aria-label","aria-labelledby"])]),u.name?(c(),o("input",{key:0,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,form:u.form,"^value":q.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,g)):d("",!0)],16,h))}});export{x as default};

package/dist/editable/EditableAnatomy.vue.cjs ADDED Viewed

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

package/dist/editable/EditableAnatomy.vue.d.cts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * The anatomy a `SkdxEditable` draws: Preview, Input or Textarea depending on `multiline`,
+ * and optional Submit/Cancel pair when `showControls` is set. `ariaLabel`/`ariaLabelledby` name the editor.
+ * Not exported from the package — must stay in step with React `EditableAnatomy.tsx`.
+ * @internal
+ */
+type __VLS_Props = {
+    multiline?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    showControls?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ariaLabel: string;
+    ariaLabelledby: string;
+    showControls: boolean;
+    multiline: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editable/EditableAnatomy.vue.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * The anatomy a `SkdxEditable` draws: Preview, Input or Textarea depending on `multiline`,
+ * and optional Submit/Cancel pair when `showControls` is set. `ariaLabel`/`ariaLabelledby` name the editor.
+ * Not exported from the package — must stay in step with React `EditableAnatomy.tsx`.
+ * @internal
+ */
+type __VLS_Props = {
+    multiline?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    showControls?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ariaLabel: string;
+    ariaLabelledby: string;
+    showControls: boolean;
+    multiline: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editable/EditableAnatomy.vue.js ADDED Viewed

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

package/dist/editable/EditableAnatomy.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const t=require("./EditableCancelTrigger.vue.cjs"),r=require("./EditableInput.vue.cjs"),i=require("./EditablePreview.vue.cjs"),u=require("./EditableSubmitTrigger.vue.cjs"),n=require("./EditableTextarea.vue.cjs");let e=require("vue");var d=(0,e.defineComponent)({__name:"EditableAnatomy",props:{multiline:{type:Boolean,default:!1},ariaLabel:{default:void 0},ariaLabelledby:{default:void 0},showControls:{type:Boolean,default:!1}},setup(a){return(o,l)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(i.default),a.multiline?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:0,"aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledby},null,8,["aria-label","aria-labelledby"])):((0,e.openBlock)(),(0,e.createBlock)(r.default,{key:1,"aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledby},null,8,["aria-label","aria-labelledby"])),a.showControls?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:2},[(0,e.createVNode)(u.default,null,{default:(0,e.withCtx)(()=>[...l[0]||(l[0]=[(0,e.createTextVNode)("Save",-1)])]),_:1}),(0,e.createVNode)(t.default,null,{default:(0,e.withCtx)(()=>[...l[1]||(l[1]=[(0,e.createTextVNode)("Cancel",-1)])]),_:1})],64)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=d;

package/dist/editable/EditableAnatomy.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import e from"./EditableCancelTrigger.vue.js";import a from"./EditableInput.vue.js";import l from"./EditablePreview.vue.js";import r from"./EditableSubmitTrigger.vue.js";import t from"./EditableTextarea.vue.js";import{Fragment as i,createBlock as o,createCommentVNode as b,createElementBlock as d,createTextVNode as n,createVNode as u,defineComponent as m,openBlock as s,withCtx as p}from"vue";var f=/* @__PURE__ */m({__name:"EditableAnatomy",props:{multiline:{type:Boolean,default:!1},ariaLabel:{default:void 0},ariaLabelledby:{default:void 0},showControls:{type:Boolean,default:!1}},setup:m=>(f,y)=>(s(),d(i,null,[u(l),m.multiline?(s(),o(t,{key:0,"aria-label":m.ariaLabel,"aria-labelledby":m.ariaLabelledby},null,8,["aria-label","aria-labelledby"])):(s(),o(a,{key:1,"aria-label":m.ariaLabel,"aria-labelledby":m.ariaLabelledby},null,8,["aria-label","aria-labelledby"])),m.showControls?(s(),d(i,{key:2},[u(r,null,{default:p(()=>[...y[0]||(y[0]=[n("Save",-1)])]),_:1}),u(e,null,{default:p(()=>[...y[1]||(y[1]=[n("Cancel",-1)])]),_:1})],64)):b("",!0)],64))});export{f as default};

package/dist/editable/EditableCancelTrigger.vue.d.cts CHANGED Viewed

@@ -1,12 +1,6 @@
 /**
- * A button that discards the current draft of a `SkdxEditable` and restores the
- * pre-edit text — the pointer equivalent of Escape. Renders nothing outside
- * edit mode.
- *
- * Like `SkdxEditableSubmitTrigger` it calls `preventDefault()` on mouse-down so
- * the input keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submitMode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * A button that discards the current draft and restores the pre-edit text.
+ * Prevents default on mouse-down to keep focus in the input.
  *
  * @example
  * ```vue

package/dist/editable/EditableCancelTrigger.vue.d.ts CHANGED Viewed

@@ -1,12 +1,6 @@
 /**
- * A button that discards the current draft of a `SkdxEditable` and restores the
- * pre-edit text — the pointer equivalent of Escape. Renders nothing outside
- * edit mode.
- *
- * Like `SkdxEditableSubmitTrigger` it calls `preventDefault()` on mouse-down so
- * the input keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submitMode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * A button that discards the current draft and restores the pre-edit text.
+ * Prevents default on mouse-down to keep focus in the input.
  *
  * @example
  * ```vue

package/dist/editable/EditableEditTrigger.vue.d.cts CHANGED Viewed

@@ -1,14 +1,8 @@
 /**
- * A button that opens an edit from *outside* the preview — a pencil icon in a
- * table row, an "Edit" item in a toolbar. Renders nothing while editing.
- * Disabled whenever the root is `disabled` or `readOnly`, since neither can be
- * edited.
- *
- * It is the discoverable counterpart to `activationMode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the input when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Button to open edit from outside the preview (pencil icon, "Edit" item in toolbar).
+ * Renders nothing while editing. Disabled when root is disabled or readOnly.
+ * Focus moves to input when edit opens, returns to preview when closed.
+ * Counterpart to `activationMode`: pair when preview is discoverable but dblclick is invisible.
  *
  * @example
  * ```vue

package/dist/editable/EditableEditTrigger.vue.d.ts CHANGED Viewed

@@ -1,14 +1,8 @@
 /**
- * A button that opens an edit from *outside* the preview — a pencil icon in a
- * table row, an "Edit" item in a toolbar. Renders nothing while editing.
- * Disabled whenever the root is `disabled` or `readOnly`, since neither can be
- * edited.
- *
- * It is the discoverable counterpart to `activationMode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the input when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Button to open edit from outside the preview (pencil icon, "Edit" item in toolbar).
+ * Renders nothing while editing. Disabled when root is disabled or readOnly.
+ * Focus moves to input when edit opens, returns to preview when closed.
+ * Counterpart to `activationMode`: pair when preview is discoverable but dblclick is invisible.
  *
  * @example
  * ```vue

package/dist/editable/EditableInput.vue.d.cts CHANGED Viewed

@@ -1,16 +1,7 @@
 /**
- * The single-line editor for a `SkdxEditable`. Renders nothing outside edit
- * mode, and a controlled `<input type="text">` inside it, taking its value,
- * `placeholder`, `disabled`, `readOnly`, `required` and `maxLength` from the
- * root — so the only attribute you normally pass is an accessible name.
- *
- * Key handling: Escape always cancels and restores the pre-edit text; Enter
- * submits when `submitMode` is `'enter'` or `'both'`; blur submits when it is
- * `'blur'` or `'both'`. For multi-line text where Enter has to mean *newline*,
- * use `SkdxEditableTextarea` instead.
- *
- * The root focuses this element and selects (or places the caret at the end
- * of) its content when edit mode opens; you do not have to focus it yourself.
+ * Single-line editor for `SkdxEditable` (renders in edit mode only). Escape
+ * cancels, Enter/blur submit based on `submitMode`. Auto-focused. Needs
+ * accessible name (not placeholder).
  *
  * @example
  * ```vue

package/dist/editable/EditableInput.vue.d.ts CHANGED Viewed

@@ -1,16 +1,7 @@
 /**
- * The single-line editor for a `SkdxEditable`. Renders nothing outside edit
- * mode, and a controlled `<input type="text">` inside it, taking its value,
- * `placeholder`, `disabled`, `readOnly`, `required` and `maxLength` from the
- * root — so the only attribute you normally pass is an accessible name.
- *
- * Key handling: Escape always cancels and restores the pre-edit text; Enter
- * submits when `submitMode` is `'enter'` or `'both'`; blur submits when it is
- * `'blur'` or `'both'`. For multi-line text where Enter has to mean *newline*,
- * use `SkdxEditableTextarea` instead.
- *
- * The root focuses this element and selects (or places the caret at the end
- * of) its content when edit mode opens; you do not have to focus it yourself.
+ * Single-line editor for `SkdxEditable` (renders in edit mode only). Escape
+ * cancels, Enter/blur submit based on `submitMode`. Auto-focused. Needs
+ * accessible name (not placeholder).
  *
  * @example
  * ```vue

package/dist/editable/EditableInput.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const o=require("../utils/reassertValue.cjs"),s=require("./context.cjs");let t=require("vue");var c=["value","placeholder","disabled","readonly","required","maxlength","data-empty"],p=(0,t.defineComponent)({__name:"EditableInput",setup(v){const r=(0,t.inject)(s.EDITABLE_CONTEXT);if(!r)throw new Error("<SkdxEditableInput> must be used inside <SkdxEditable>.");const e=r;function n(u){const a=u.target;e.setValue(a.value),o.reassertValue(a,()=>e.value.value)}function l(u){if(u.key==="Escape"){u.preventDefault(),e.cancel();return}u.key==="Enter"&&(e.submitMode.value==="enter"\|\|e.submitMode.value==="both")&&(u.preventDefault(),e.submit())}function i(){(e.submitMode.value==="blur"\|\|e.submitMode.value==="both")&&e.submit()}return(u,a)=>(0,t.unref)(e).editing.value?((0,t.openBlock)(),(0,t.createElementBlock)("input",{key:0,class:"skdx-editable__input","data-part":"input",ref:d=>(0,t.unref)(e).inputRef.value=d,type:"text",value:(0,t.unref)(e).value.value,placeholder:(0,t.unref)(e).~~placeholder~~.value,disabled:(0,t.unref)(e).disabled.value,readonly:(0,t.unref)(e).readOnly.value,required:(0,t.unref)(e).required.value,maxlength:(0,t.unref)(e).maxLength.value,"data-state":"editing","data-empty":(0,t.unref)(e).value.value===""?"":void 0,onInput:n,onKeydown:l,onBlur:i},null,40,c)):(0,t.createCommentVNode)("",!0)}});exports.default=p;
1	+ const o=require("../utils/reassertValue.cjs"),v=require("./context.cjs");let a=require("vue");var s=["id","value","placeholder","disabled","readonly","required","aria-required","aria-invalid","maxlength","data-empty","data-invalid"],c=(0,a.defineComponent)({__name:"EditableInput",setup(f){const r=(0,a.inject)(v.EDITABLE_CONTEXT);if(!r)throw new Error("<SkdxEditableInput> must be used inside <SkdxEditable>.");const e=r;function i(t){const u=t.target;e.setValue(u.value),o.reassertValue(u,()=>e.value.value)}function n(t){if(t.key==="Escape"){t.preventDefault(),e.cancel();return}t.key==="Enter"&&(e.submitMode.value==="enter"\|\|e.submitMode.value==="both")&&(t.preventDefault(),e.submit())}function l(){(e.submitMode.value==="blur"\|\|e.submitMode.value==="both")&&e.submit()}return(t,u)=>(0,a.unref)(e).editing.value?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,class:"skdx-editable__input","data-part":"input",ref:d=>(0,a.unref)(e).inputRef.value=d,type:"text",id:(0,a.unref)(e).editorId,value:(0,a.unref)(e).value.value,placeholder:(0,a.unref)(e).editPlaceholder.value,disabled:(0,a.unref)(e).disabled.value,readonly:(0,a.unref)(e).readOnly.value,required:(0,a.unref)(e).required.value,"aria-required":(0,a.unref)(e).required.value\|\|void 0,"aria-invalid":(0,a.unref)(e).invalid.value\|\|void 0,maxlength:(0,a.unref)(e).maxLength.value,"data-state":"editing","data-empty":(0,a.unref)(e).value.value===""?"":void 0,"data-invalid":(0,a.unref)(e).invalid.value?"":void 0,onInput:i,onKeydown:n,onBlur:l},null,40,s)):(0,a.createCommentVNode)("",!0)}});exports.default=c;

package/dist/editable/EditableInput.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{reassertValue as e}from"../utils/reassertValue.js";import{EDITABLE_CONTEXT as t}from"./context.js";import{createCommentVNode as a,createElementBlock as u,defineComponent as l,inject as n,openBlock as r,unref as d}from"vue";var o=["value","placeholder","disabled","readonly","required","maxlength","data-empty"],i=/* @__PURE__ */l({__name:"EditableInput",setup(l){const i=n(t);if(!i)throw new Error("<SkdxEditableInput> must be used inside <SkdxEditable>.");const s=i;function v(t){const a=t.target;s.setValue(a.value),e(a,()=>s.value.value)}function p(e){if("Escape"===e.key)return e.preventDefault(),void s.cancel();"Enter"===e.key&&("enter"===s.submitMode.value\|\|"both"===s.submitMode.value)&&(e.preventDefault(),s.submit())}function m(){("blur"===s.submitMode.value\|\|"both"===s.submitMode.value)&&s.submit()}return(e,t)=>d(s).editing.value?(r(),u("input",{key:0,class:"skdx-editable__input","data-part":"input",ref:e=>d(s).inputRef.value=e,type:"text",value:d(s).value.value,placeholder:d(s).~~placeholder~~.value,disabled:d(s).disabled.value,readonly:d(s).readOnly.value,required:d(s).required.value,maxlength:d(s).maxLength.value,"data-state":"editing","data-empty":""===d(s).value.value?"":void 0,onInput:v,onKeydown:p,onBlur:m},null,40,o)):a("",!0)}});export{i as default};
1	+ import{reassertValue as e}from"../utils/reassertValue.js";import{EDITABLE_CONTEXT as a}from"./context.js";import{createCommentVNode as t,createElementBlock as i,defineComponent as l,inject as u,openBlock as d,unref as r}from"vue";var n=["id","value","placeholder","disabled","readonly","required","aria-required","aria-invalid","maxlength","data-empty","data-invalid"],o=/* @__PURE__ */l({__name:"EditableInput",setup(l){const o=u(a);if(!o)throw new Error("<SkdxEditableInput> must be used inside <SkdxEditable>.");const s=o;function v(a){const t=a.target;s.setValue(t.value),e(t,()=>s.value.value)}function m(e){if("Escape"===e.key)return e.preventDefault(),void s.cancel();"Enter"===e.key&&("enter"===s.submitMode.value\|\|"both"===s.submitMode.value)&&(e.preventDefault(),s.submit())}function p(){("blur"===s.submitMode.value\|\|"both"===s.submitMode.value)&&s.submit()}return(e,a)=>r(s).editing.value?(d(),i("input",{key:0,class:"skdx-editable__input","data-part":"input",ref:e=>r(s).inputRef.value=e,type:"text",id:r(s).editorId,value:r(s).value.value,placeholder:r(s).editPlaceholder.value,disabled:r(s).disabled.value,readonly:r(s).readOnly.value,required:r(s).required.value,"aria-required":r(s).required.value\|\|void 0,"aria-invalid":r(s).invalid.value\|\|void 0,maxlength:r(s).maxLength.value,"data-state":"editing","data-empty":""===r(s).value.value?"":void 0,"data-invalid":r(s).invalid.value?"":void 0,onInput:v,onKeydown:m,onBlur:p},null,40,n)):t("",!0)}});export{o as default};

package/dist/editable/EditableLabel.vue.cjs ADDED Viewed

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

package/dist/editable/EditableLabel.vue.d.cts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * The accessible name for both halves of `SkdxEditable`. A real `<label>`
+ * whose `for` targets the editor, and element `SkdxEditablePreview` points
+ * `aria-labelledby` at. Renders in both modes (unlike editors/triggers).
+ */
+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/editable/EditableLabel.vue.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * The accessible name for both halves of `SkdxEditable`. A real `<label>`
+ * whose `for` targets the editor, and element `SkdxEditablePreview` points
+ * `aria-labelledby` at. Renders in both modes (unlike editors/triggers).
+ */
+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/editable/EditableLabel.vue.js ADDED Viewed

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

package/dist/editable/EditableLabel.vue_vue_type_script_setup_true_lang.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const a=require("./context.cjs");let e=require("vue");var n=["id","for"],d=(0,e.defineComponent)({__name:"EditableLabel",setup(o){const l=(0,e.inject)(a.EDITABLE_CONTEXT);if(!l)throw new Error("<SkdxEditableLabel> must be used inside <SkdxEditable>.");const t=l;return(0,e.onMounted)(()=>{t.labelPresent.value=!0}),(0,e.onBeforeUnmount)(()=>{t.labelPresent.value=!1}),(r,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",{class:"skdx-editable__label","data-part":"label",id:(0,e.unref)(t).labelId,for:(0,e.unref)(t).editorId},[(0,e.renderSlot)(r.$slots,"default")],8,n))}});exports.default=d;

package/dist/editable/EditableLabel.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1 @@

+ import{EDITABLE_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as l,onBeforeUnmount as o,onMounted as s,openBlock as r,renderSlot as n,unref as d}from"vue";var i=["id","for"],b=/* @__PURE__ */t({__name:"EditableLabel",setup(t){const b=l(e);if(!b)throw new Error("<SkdxEditableLabel> must be used inside <SkdxEditable>.");const u=b;return s(()=>{u.labelPresent.value=!0}),o(()=>{u.labelPresent.value=!1}),(e,t)=>(r(),a("label",{class:"skdx-editable__label","data-part":"label",id:d(u).labelId,for:d(u).editorId},[n(e.$slots,"default")],8,i))}});export{b as default};

package/dist/editable/EditablePreview.vue.d.cts CHANGED Viewed

@@ -1,19 +1,6 @@
 /**
- * The read-mode half of a `SkdxEditable`: the text as it currently stands, and
- * the thing you interact with to start editing it. Renders nothing while
- * editing — the input has taken its place — and a `role="button"` `<span>`
- * otherwise, with `data-state="preview"`, `data-empty`, `data-disabled` and
- * `data-readonly`.
- *
- * With an empty default slot it renders the value, falling back to the root's
- * `placeholder` when empty. Fill the slot to render the value yourself (a
- * heading, a truncated cell); it replaces the text entirely.
- *
- * It is a tab stop unless `disabled`, and Enter or Space opens the editor
- * whatever `activationMode` is set to — a click-to-edit affordance that only
- * responds to a mouse is not an affordance for half your users. This is also
- * the element focus comes back to when the edit ends.
- *
+ * Read-mode half of `SkdxEditable`: displays the current value and enters
+ * edit mode on activation.
  * @example
  * ```vue
  * <SkdxEditable default-value="Untitled" placeholder="Add a title">

package/dist/editable/EditablePreview.vue.d.ts CHANGED Viewed

@@ -1,19 +1,6 @@
 /**
- * The read-mode half of a `SkdxEditable`: the text as it currently stands, and
- * the thing you interact with to start editing it. Renders nothing while
- * editing — the input has taken its place — and a `role="button"` `<span>`
- * otherwise, with `data-state="preview"`, `data-empty`, `data-disabled` and
- * `data-readonly`.
- *
- * With an empty default slot it renders the value, falling back to the root's
- * `placeholder` when empty. Fill the slot to render the value yourself (a
- * heading, a truncated cell); it replaces the text entirely.
- *
- * It is a tab stop unless `disabled`, and Enter or Space opens the editor
- * whatever `activationMode` is set to — a click-to-edit affordance that only
- * responds to a mouse is not an affordance for half your users. This is also
- * the element focus comes back to when the edit ends.
- *
+ * Read-mode half of `SkdxEditable`: displays the current value and enters
+ * edit mode on activation.
  * @example
  * ```vue
  * <SkdxEditable default-value="Untitled" placeholder="Add a title">

package/dist/editable/EditablePreview.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const o=require("./context.cjs");let a=require("vue");var c=["tabindex","aria-~~disabled~~","aria-~~readonly~~","data-empty","data-disabled","data-readonly"],v=(0,a.defineComponent)({__name:"EditablePreview",setup(s){const i=(0,a.inject)(o.EDITABLE_CONTEXT);if(!i)throw new Error("<SkdxEditablePreview> must be used inside <SkdxEditable>.");const e=i;function r(){e.activationMode.value==="click"&&e.activate()}function n(){e.activationMode.value==="dblclick"&&e.activate()}function d(){e.activationMode.value==="focus"&&!e.returningFocus.value&&e.activate()}function l(t){t.key!=="Enter"&&t.key!==" "\|\|(t.preventDefault(),e.activate())}return(t,f)=>(0,a.unref)(e).editing.value?(0,a.createCommentVNode)("",!0):((0,a.openBlock)(),(0,a.createElementBlock)("span",{key:0,class:"skdx-editable__preview","data-part":"preview",ref:u=>(0,a.unref)(e).previewRef.value=u,role:"button",tabindex:(0,a.unref)(e).disabled.value?-1:0,"aria-~~disabled~~":(0,a.unref)(e).~~disabled~~.value\|\|void 0,"aria-~~readonly~~":(0,a.unref)(e).readOnly.value\|\|void 0,"data-state":"preview","data-empty":(0,a.unref)(e).value.value===""?"":void 0,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,onClick:r,onDblclick:n,onFocus:d,onKeydown:l},[(0,a.renderSlot)(t.$slots,"default",{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)((0,a.unref)(e).value.value\|\|(0,a.unref)(e).~~placeholder~~.value),1)])],40,c))}});exports.default=v;
1	+ const o=require("./context.cjs");let a=require("vue");var v=["tabindex","aria-labelledby","aria-disabled","data-empty","data-disabled","data-readonly","data-invalid"],c=(0,a.defineComponent)({__name:"EditablePreview",setup(f){const i=(0,a.inject)(o.EDITABLE_CONTEXT);if(!i)throw new Error("<SkdxEditablePreview> must be used inside <SkdxEditable>.");const e=i;function l(){e.activationMode.value==="click"&&e.activate()}function d(){e.activationMode.value==="dblclick"&&e.activate()}function n(){e.activationMode.value==="focus"&&!e.returningFocus.value&&e.activate()}function r(t){t.key!=="Enter"&&t.key!==" "\|\|(t.preventDefault(),e.activate())}return(t,s)=>(0,a.unref)(e).editing.value?(0,a.createCommentVNode)("",!0):((0,a.openBlock)(),(0,a.createElementBlock)("span",{key:0,class:"skdx-editable__preview","data-part":"preview",ref:u=>(0,a.unref)(e).previewRef.value=u,role:"button",tabindex:(0,a.unref)(e).disabled.value?-1:0,"aria-labelledby":(0,a.unref)(e).labelPresent.value?(0,a.unref)(e).labelId:void 0,"aria-disabled":(0,a.unref)(e).disabled.value\|\|(0,a.unref)(e).readOnly.value\|\|void 0,"data-state":"preview","data-empty":(0,a.unref)(e).value.value===""?"":void 0,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,"data-invalid":(0,a.unref)(e).invalid.value?"":void 0,onClick:l,onDblclick:d,onFocus:n,onKeydown:r},[(0,a.renderSlot)(t.$slots,"default",{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)((0,a.unref)(e).value.value\|\|(0,a.unref)(e).previewPlaceholder.value),1)])],40,v))}});exports.default=c;

package/dist/editable/EditablePreview.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{EDITABLE_CONTEXT as e}from"./context.js";import{createCommentVNode as a,createElementBlock as t,createTextVNode as i,defineComponent as d,inject as l,openBlock as o,renderSlot as n,toDisplayString as r,unref as v}from"vue";var s=["tabindex","aria-~~disabled~~","aria-~~readonly~~","data-empty","data-disabled","data-readonly"],u=/* @__PURE__ */d({__name:"EditablePreview",setup(d){const u=l(e);if(!u)throw new Error("<SkdxEditablePreview> must be used inside <SkdxEditable>.");const c=u;function b(){"click"===c.activationMode.value&&c.activate()}function p(){"dblclick"===c.activationMode.value&&c.activate()}function f(){"focus"===c.activationMode.value&&!c.returningFocus.value&&c.activate()}function y(e){"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),c.activate())}return(e,d)=>v(c).editing.value?a("",!0):(o(),t("span",{key:0,class:"skdx-editable__preview","data-part":"preview",ref:e=>v(c).previewRef.value=e,role:"button",tabindex:v(c).disabled.value?-1:0,"aria-~~disabled~~":v(c).~~disabled~~.value\|\|void 0,"aria-~~readonly~~":v(c).readOnly.value\|\|void 0,"data-state":"preview","data-empty":""===v(c).value.value?"":void 0,"data-disabled":v(c).disabled.value?"":void 0,"data-readonly":v(c).readOnly.value?"":void 0,onClick:b,onDblclick:p,onFocus:f,onKeydown:y},[n(e.$slots,"default",{},()=>[i(r(v(c).value.value\|\|v(c).~~placeholder~~.value),1)])],40,s))}});export{u as default};
1	+ import{EDITABLE_CONTEXT as e}from"./context.js";import{createCommentVNode as a,createElementBlock as t,createTextVNode as i,defineComponent as l,inject as d,openBlock as n,renderSlot as o,toDisplayString as v,unref as r}from"vue";var s=["tabindex","aria-labelledby","aria-disabled","data-empty","data-disabled","data-readonly","data-invalid"],u=/* @__PURE__ */l({__name:"EditablePreview",setup(l){const u=d(e);if(!u)throw new Error("<SkdxEditablePreview> must be used inside <SkdxEditable>.");const c=u;function b(){"click"===c.activationMode.value&&c.activate()}function p(){"dblclick"===c.activationMode.value&&c.activate()}function f(){"focus"===c.activationMode.value&&!c.returningFocus.value&&c.activate()}function y(e){"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),c.activate())}return(e,l)=>r(c).editing.value?a("",!0):(n(),t("span",{key:0,class:"skdx-editable__preview","data-part":"preview",ref:e=>r(c).previewRef.value=e,role:"button",tabindex:r(c).disabled.value?-1:0,"aria-labelledby":r(c).labelPresent.value?r(c).labelId:void 0,"aria-disabled":r(c).disabled.value\|\|r(c).readOnly.value\|\|void 0,"data-state":"preview","data-empty":""===r(c).value.value?"":void 0,"data-disabled":r(c).disabled.value?"":void 0,"data-readonly":r(c).readOnly.value?"":void 0,"data-invalid":r(c).invalid.value?"":void 0,onClick:b,onDblclick:p,onFocus:f,onKeydown:y},[o(e.$slots,"default",{},()=>[i(v(r(c).value.value\|\|r(c).previewPlaceholder.value),1)])],40,s))}});export{u as default};

package/dist/editable/EditableSubmitTrigger.vue.d.cts CHANGED Viewed

@@ -1,12 +1,6 @@
 /**
- * A button that commits the current draft of a `SkdxEditable`. Renders nothing
- * outside edit mode. Required when `submitMode="none"`, optional otherwise — a
- * visible "Save" next to Enter-to-submit is the discoverable version of the
- * same action.
- *
- * It calls `preventDefault()` on mouse-down so that pressing it does not blur
- * the input first: under `submitMode="both"` that blur would submit and unmount
- * this button, so the click would land on nothing.
+ * Button to commit editable draft. Hides outside edit mode. Required when `submitMode="none"`.
+ * Calls `preventDefault()` on mousedown to prevent blur-triggered submit.
  *
  * @example
  * ```vue

package/dist/editable/EditableSubmitTrigger.vue.d.ts CHANGED Viewed

@@ -1,12 +1,6 @@
 /**
- * A button that commits the current draft of a `SkdxEditable`. Renders nothing
- * outside edit mode. Required when `submitMode="none"`, optional otherwise — a
- * visible "Save" next to Enter-to-submit is the discoverable version of the
- * same action.
- *
- * It calls `preventDefault()` on mouse-down so that pressing it does not blur
- * the input first: under `submitMode="both"` that blur would submit and unmount
- * this button, so the click would land on nothing.
+ * Button to commit editable draft. Hides outside edit mode. Required when `submitMode="none"`.
+ * Calls `preventDefault()` on mousedown to prevent blur-triggered submit.
  *
  * @example
  * ```vue