@stll/folio-vue 0.2.0 → 0.4.0

package/dist/ui/folio-ui.d.ts

@@ -46,6 +46,111 @@ export type FolioPopoverProps = {
     placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
     closeOnScroll?: boolean;
 };
+/**
+ * The Dialog prop subset folio's chrome relies on. Mirrors the Vue
+ * `ui/Dialog.vue` surface: `open` controls the modal's visibility (the default
+ * teleports to `document.body`, shows a click-to-close backdrop, and closes on
+ * Escape); `ariaLabel` is applied to the popup's `role="dialog"` element.
+ * `className` / `backdropClass` extend the popup/backdrop classes so a
+ * dialog-specific stylesheet still applies over the shared default. Consumers
+ * emit `update:open` / `close` (mirroring `Popover`'s `update:open` + `close`
+ * pair) and render the dialog body through the default slot. A design-system
+ * Dialog accepting a superset stays assignable as an override.
+ */
+export type FolioDialogProps = {
+    open: boolean;
+    ariaLabel?: string;
+    className?: string;
+    backdropClass?: string;
+    /** Close on backdrop mousedown (default true). */
+    closeOnBackdrop?: boolean;
+};
+/** One option in a folio Select. Mirrors the flat, data-driven shape the Vue
+ *  contract already uses for {@link FolioMenuItem}. */
+export type FolioSelectItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+/**
+ * The Select prop subset folio's chrome relies on. Mirrors the Vue
+ * `ui/Select.vue` surface: a single native-`<select>`-backed component driven
+ * by a flat `items` array (no listbox/positioner sub-parts, no `<optgroup>`
+ * grouping — chrome consumers that need grouping, e.g. the font picker, stay
+ * on a native `<select>` and are out of this contract's scope). `value` is the
+ * selected item's `value`; the component emits `change` with the new value.
+ */
+export type FolioSelectProps = {
+    value?: string;
+    items: FolioSelectItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+};
+/**
+ * The Input prop subset folio's chrome relies on: a thin wrapper over a native
+ * `<input>` supporting `v-model`. `className` / `size` are folio's shorthand
+ * (mirroring React's `FolioInputProps`); every other native `<input>`
+ * attribute (`type`, `placeholder`, `aria-*`, `min`/`max`/`step`, ...) falls
+ * through Vue's attribute inheritance and is not re-declared.
+ *
+ * A chrome consumer that needs imperative access (e.g. FindReplaceDialog's
+ * focus-and-select-on-open) does so through a template `ref`, which resolves
+ * to the component instance — so an override, like the default, should
+ * `defineExpose({ focus, select })` if it wants that behavior to keep working.
+ */
+export type FolioInputProps = {
+    className?: string;
+    size?: "sm" | "default" | "lg";
+};
+/**
+ * The Checkbox prop subset folio's chrome relies on. Mirrors React's
+ * `FolioCheckboxProps` (`checked` + a change callback): `checked` is the
+ * current state, and the component emits `update:checked` so a host uses
+ * `v-model:checked`. `className` extends the default indicator's classes.
+ */
+export type FolioCheckboxProps = {
+    checked?: boolean;
+    className?: string;
+};
+/**
+ * The DatePickerPopover prop subset folio's chrome relies on. Mirrors React's
+ * `FolioDatePickerPopoverProps`: `value` accepts an ISO string, a `Date`, or
+ * `null`; the component emits `change` with an ISO `yyyy-mm-dd` string (or
+ * `null` when cleared). See the module docblock — no Vue chrome consumer
+ * renders this yet (content-control widgets are not ported to Vue).
+ */
+export type FolioDatePickerPopoverProps = {
+    value: string | Date | null;
+    clearLabel?: string;
+    defaultOpen?: boolean;
+    showIcon?: boolean;
+};
+/**
+ * The OutlineRail prop subset folio's chrome relies on. Mirrors React's
+ * `FolioOutlineRailProps`, adapted to Vue's idiom for sharing a mutable DOM
+ * ref across a prop boundary: a `getScrollContainer` getter (the same
+ * `() => HTMLElement | null` shape `DecorationLayer.vue`'s
+ * `getPagesContainer` already uses) rather than a raw `Ref` — Vue's template
+ * compiler auto-unwraps a bare `Ref` referenced in a binding expression (even
+ * inside an inline arrow function), so passing the ref object itself across a
+ * prop is not the idiom here; a getter defers the read to click-time. The
+ * rail resolves each item's vertical position via `resolvePct` and navigates
+ * via `onJump` (both receive the resolved scroll container, as plain function
+ * props — the same idiom the existing {@link FolioMenuItem}`.onSelect` uses).
+ * `activeId` controls the highlighted entry. A design-system rail accepting a
+ * superset stays assignable as an override.
+ */
+export type FolioOutlineRailProps = {
+    items: OutlineItem[];
+    getScrollContainer: () => HTMLElement | null;
+    resolvePct?: (id: string, container: HTMLElement) => number | null;
+    onJump: (id: string, container: HTMLElement) => void;
+    activeId?: string | null;
+    topOffset?: number;
+    panelWidth?: number;
+    ariaLabel?: string;
+};
 /**
  * One entry in a folio menu. Mirrors the Vue `ui/MenuDropdown.vue` `MenuEntry`
  * shape so an external Menu stays assignable as an override.
@@ -65,9 +170,7 @@ export type FolioMenuProps = {
 };
 /**
  * One entry in the document outline. Mirrors the React contract's item shape so
- * a cross-framework design system can share it. The Vue adapter does not yet
- * inject an OutlineRail primitive (no Vue default exists); the type is exported
- * for parity with the React surface.
+ * a cross-framework design system can share it.
  */
 export type OutlineItem = {
     id: string;
@@ -88,15 +191,24 @@ export type OutlineItem = {
  * (unlike React's contravariant `ComponentType<P>`), so a default or override
  * accepting a *superset* of props would not be assignable to a prop-parameterized
  * slot. The per-primitive prop contract a host implements is documented by the
- * exported `Folio*Props` types ({@link FolioButtonProps},
- * {@link FolioColorPickerProps}, {@link FolioPopoverProps}, {@link FolioMenuProps});
- * consumers render the resolved component and pass those props at the call site.
+ * exported `Folio*Props` types ({@link FolioButtonProps}, {@link FolioDialogProps},
+ * {@link FolioSelectProps}, {@link FolioMenuProps}, {@link FolioPopoverProps},
+ * {@link FolioInputProps}, {@link FolioCheckboxProps},
+ * {@link FolioColorPickerProps}, {@link FolioDatePickerPopoverProps},
+ * {@link FolioOutlineRailProps}); consumers render the resolved component and
+ * pass those props at the call site.
  */
 export type FolioUIComponents = {
     Button: Component;
-    ColorPicker: Component;
-    Popover: Component;
+    Dialog: Component;
+    Select: Component;
     Menu: Component;
+    Popover: Component;
+    Input: Component;
+    Checkbox: Component;
+    ColorPicker: Component;
+    DatePickerPopover: Component;
+    OutlineRail: Component;
 };
 export declare const DEFAULT_COMPONENTS: FolioUIComponents;
 /**

package/dist/ui.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./PageSetupDialog-CGBaBVzo.cjs"),t=require("./ListButtons-D-zMJ7rl.cjs"),n=require("./TablePropertiesDialog-A-1Pm1f9.cjs");let r=require("vue");require("@stll/folio-core/utils/units");var i={class:`docx-editor-toolbar`},a={class:`docx-editor-toolbar__title-row`},o={class:`docx-editor-toolbar__title-left`},s={class:`docx-editor-toolbar__title-center`},c={class:`docx-editor-toolbar__title-right`},l=(0,r.defineComponent)({inheritAttrs:!1,__name:`EditorToolbar`,props:{showMenuBar:{type:Boolean,default:!0}},emits:[`menu-action`],setup(e){return(n,l)=>((0,r.openBlock)(),(0,r.createElementBlock)(`div`,i,[(0,r.renderSlot)(n.$slots,`title-bar`,{},()=>[(0,r.createElementVNode)(`div`,a,[(0,r.createElementVNode)(`div`,o,[(0,r.renderSlot)(n.$slots,`title-bar-left`,{},void 0,!0)]),(0,r.createElementVNode)(`div`,s,[(0,r.renderSlot)(n.$slots,`document-name`,{},void 0,!0),e.showMenuBar?((0,r.openBlock)(),(0,r.createBlock)(t.A,{key:0,onAction:l[0]||=e=>n.$emit(`menu-action`,e)})):(0,r.createCommentVNode)(``,!0)]),(0,r.createElementVNode)(`div`,c,[(0,r.renderSlot)(n.$slots,`title-bar-right`,{},void 0,!0)])])],!0),(0,r.renderSlot)(n.$slots,`toolbar`,{},()=>[(0,r.createVNode)(t.b,(0,r.normalizeProps)((0,r.guardReactiveProps)(n.$attrs)),null,16)],!0)]))}}),u=e.u(l,[[`__scopeId`,`data-v-f2023632`]]),d={},f={class:`docx-title-bar`},p={class:`docx-title-bar__left`},m={class:`docx-title-bar__center`},h={class:`docx-title-bar__right`};function g(e,t){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,f,[(0,r.createElementVNode)(`div`,p,[(0,r.renderSlot)(e.$slots,`left`,{},void 0,!0)]),(0,r.createElementVNode)(`div`,m,[(0,r.renderSlot)(e.$slots,`default`,{},void 0,!0)]),(0,r.createElementVNode)(`div`,h,[(0,r.renderSlot)(e.$slots,`right`,{},void 0,!0)])])}var _=e.u(d,[[`render`,g],[`__scopeId`,`data-v-ae11d49f`]]);function v(e){let t=e.trim();if(!t)return``;let n=null,r=``;for(let e of t){if((e===`"`||e===`'`)&&n===null){n=e,r+=e;continue}if(e===n){n=null,r+=e;continue}if(e===`,`&&n===null)break;r+=e}return r.trim().replace(/^['"]|['"]$/g,``)}var y=[`value`,`disabled`],b={key:0,label:`Sans-serif`},x=[`value`],S={key:1,label:`Serif`},C=[`value`],w={key:2,label:`Monospace`},T=[`value`],E={key:3,label:`Other`},D=[`value`],O=(0,r.defineComponent)({__name:`FontPicker`,props:{value:{},fonts:{},disabled:{type:Boolean,default:!1},className:{},placeholder:{default:`Font`},showPreview:{type:Boolean,default:!0}},emits:[`change`],setup(e,{emit:t}){let n=e,i=t,a=[{name:`Arial`,fontFamily:`Arial, Helvetica, sans-serif`,category:`sans-serif`},{name:`Calibri`,fontFamily:`"Calibri", Arial, sans-serif`,category:`sans-serif`},{name:`Helvetica`,fontFamily:`Helvetica, Arial, sans-serif`,category:`sans-serif`},{name:`Verdana`,fontFamily:`Verdana, Geneva, sans-serif`,category:`sans-serif`},{name:`Open Sans`,fontFamily:`"Open Sans", sans-serif`,category:`sans-serif`},{name:`Roboto`,fontFamily:`Roboto, sans-serif`,category:`sans-serif`},{name:`Times New Roman`,fontFamily:`"Times New Roman", Times, serif`,category:`serif`},{name:`Georgia`,fontFamily:`Georgia, serif`,category:`serif`},{name:`Cambria`,fontFamily:`Cambria, Georgia, serif`,category:`serif`},{name:`Garamond`,fontFamily:`Garamond, serif`,category:`serif`},{name:`Courier New`,fontFamily:`"Courier New", monospace`,category:`monospace`},{name:`Consolas`,fontFamily:`Consolas, monospace`,category:`monospace`}],o=(0,r.computed)(()=>n.fonts??a),s=(0,r.computed)(()=>{let e={"sans-serif":[],serif:[],monospace:[],other:[]};for(let t of o.value)e[t.category??`other`].push(t);return e}),c=(0,r.computed)(()=>{let e=n.value;if(!e)return n.placeholder;let t=e.toLowerCase();return o.value.find(n=>n.fontFamily===e||n.name.toLowerCase()===t||v(n.fontFamily).toLowerCase()===t)?.name??e});function l(e){if(!(e.target instanceof HTMLSelectElement))return;let t=e.target.value,n=o.value.find(e=>e.name===t);i(`change`,n?v(n.fontFamily)||n.name:t)}return(t,n)=>((0,r.openBlock)(),(0,r.createElementBlock)(`select`,{class:(0,r.normalizeClass)([`docx-font-picker`,e.className]),value:c.value,disabled:e.disabled,"aria-label":`Font family`,onChange:l},[s.value[`sans-serif`].length?((0,r.openBlock)(),(0,r.createElementBlock)(`optgroup`,b,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(s.value[`sans-serif`],t=>((0,r.openBlock)(),(0,r.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,r.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,r.toDisplayString)(t.name),13,x))),128))])):(0,r.createCommentVNode)(``,!0),s.value.serif.length?((0,r.openBlock)(),(0,r.createElementBlock)(`optgroup`,S,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(s.value.serif,t=>((0,r.openBlock)(),(0,r.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,r.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,r.toDisplayString)(t.name),13,C))),128))])):(0,r.createCommentVNode)(``,!0),s.value.monospace.length?((0,r.openBlock)(),(0,r.createElementBlock)(`optgroup`,w,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(s.value.monospace,t=>((0,r.openBlock)(),(0,r.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,r.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,r.toDisplayString)(t.name),13,T))),128))])):(0,r.createCommentVNode)(``,!0),s.value.other.length?((0,r.openBlock)(),(0,r.createElementBlock)(`optgroup`,E,[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(s.value.other,t=>((0,r.openBlock)(),(0,r.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,r.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,r.toDisplayString)(t.name),13,D))),128))])):(0,r.createCommentVNode)(``,!0)],42,y))}}),k=e.u(O,[[`__scopeId`,`data-v-1a9a9f88`]]),A={class:`docx-font-size`},j=[`disabled`],M=[`value`,`disabled`,`placeholder`],N=[`disabled`],P=(0,r.defineComponent)({__name:`FontSizePicker`,props:{value:{},sizes:{},disabled:{type:Boolean,default:!1},minSize:{default:1},maxSize:{default:1638},placeholder:{default:`11`}},emits:[`change`],setup(e,{emit:t}){let n=e,i=t,a=[8,9,10,11,12,14,16,18,20,24,28,36,48,72],o=(0,r.computed)(()=>n.sizes??a),s=(0,r.computed)(()=>n.value??parseInt(n.placeholder,10)??11),c=(0,r.computed)(()=>n.value===void 0?n.placeholder:String(n.value));function l(e){return o.value.find(t=>t>e)??Math.min(e+1,n.maxSize)}function u(e){return[...o.value].reverse().find(t=>t<e)??Math.max(e-1,n.minSize)}function d(){n.disabled||i(`change`,u(s.value))}function f(){n.disabled||i(`change`,l(s.value))}function p(e){if(!(e.target instanceof HTMLInputElement))return;let t=parseFloat(e.target.value);!isNaN(t)&&t>=n.minSize&&t<=n.maxSize&&i(`change`,Math.round(t*2)/2)}return(t,n)=>((0,r.openBlock)(),(0,r.createElementBlock)(`div`,A,[(0,r.createElementVNode)(`button`,{type:`button`,class:`docx-font-size__btn`,disabled:e.disabled||s.value<=e.minSize,title:`Decrease font size`,onClick:(0,r.withModifiers)(d,[`prevent`])},`−`,8,j),(0,r.createElementVNode)(`input`,{class:`docx-font-size__input`,type:`text`,value:c.value,disabled:e.disabled,placeholder:e.placeholder,onKeydown:[n[0]||=(0,r.withKeys)((0,r.withModifiers)(e=>{d(),e.stopPropagation()},[`prevent`]),[`up`]),n[1]||=(0,r.withKeys)((0,r.withModifiers)(e=>{f(),e.stopPropagation()},[`prevent`]),[`down`]),n[2]||=(0,r.withKeys)((0,r.withModifiers)(e=>p(e),[`prevent`]),[`enter`])],onBlur:n[3]||=e=>p(e)},null,40,M),(0,r.createElementVNode)(`button`,{type:`button`,class:`docx-font-size__btn`,disabled:e.disabled||s.value>=e.maxSize,title:`Increase font size`,onClick:(0,r.withModifiers)(f,[`prevent`])},`+`,8,N)]))}}),F=e.u(P,[[`__scopeId`,`data-v-4e8ada55`]]),I=[`value`,`disabled`],L=[`value`],R=(0,r.defineComponent)({__name:`LineSpacingPicker`,props:{value:{},options:{},disabled:{type:Boolean,default:!1},className:{}},emits:[`change`],setup(e,{emit:t}){let n=e,i=t,a=[{label:`Single`,value:1,twipsValue:240},{label:`1.15`,value:1.15,twipsValue:276},{label:`1.5`,value:1.5,twipsValue:360},{label:`Double`,value:2,twipsValue:480}],o=(0,r.computed)(()=>n.options??a),s=(0,r.computed)(()=>n.value??o.value[0]?.twipsValue??240);function c(e){if(!(e.target instanceof HTMLSelectElement))return;let t=parseInt(e.target.value,10);isNaN(t)||i(`change`,t)}return(t,n)=>((0,r.openBlock)(),(0,r.createElementBlock)(`select`,{class:(0,r.normalizeClass)([`docx-line-spacing`,e.className]),value:String(s.value),disabled:e.disabled,"aria-label":`Line spacing`,onChange:c},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(o.value,e=>((0,r.openBlock)(),(0,r.createElementBlock)(`option`,{key:e.twipsValue,value:String(e.twipsValue)},(0,r.toDisplayString)(e.label),9,L))),128))],42,I))}}),z=e.u(R,[[`__scopeId`,`data-v-fcda8ecc`]]),B=[`disabled`,`aria-expanded`,`title`,`onClick`],V={class:`docx-table-grid__panel`},H={class:`docx-table-grid__label`},U=[`onMouseenter`,`onClick`],W=(0,r.defineComponent)({__name:`TableGridPicker`,props:{disabled:{type:Boolean,default:!1},gridRows:{default:5},gridColumns:{default:5},tooltip:{default:`Insert table`}},emits:[`insert`],setup(e,{emit:n}){let i=e,a=n,o=(0,r.ref)(!1),s=(0,r.ref)({rows:1,cols:1}),c=(0,r.computed)(()=>{let e=[];for(let t=1;t<=i.gridRows;t++)for(let n=1;n<=i.gridColumns;n++)e.push({r:t,c:n});return e});function l(e,t){a(`insert`,e,t),o.value=!1}function u(){o.value=!1,s.value={rows:1,cols:1}}return(n,i)=>((0,r.openBlock)(),(0,r.createBlock)(t.N,{open:o.value,"onUpdate:open":i[0]||=e=>o.value=e,onClose:u},{trigger:(0,r.withCtx)(({toggle:n})=>[(0,r.createElementVNode)(`button`,{type:`button`,class:`docx-table-grid__btn`,disabled:e.disabled,"aria-expanded":o.value,"aria-haspopup":`grid`,title:e.tooltip,onClick:(0,r.withModifiers)(n,[`prevent`])},[(0,r.createVNode)(t.I,{name:`grid_on`,size:20})],8,B)]),panel:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,V,[(0,r.createElementVNode)(`div`,H,(0,r.toDisplayString)(s.value.rows)+` × `+(0,r.toDisplayString)(s.value.cols),1),(0,r.createElementVNode)(`div`,{class:`docx-table-grid__grid`,style:(0,r.normalizeStyle)({gridTemplateColumns:`repeat(${e.gridColumns}, 18px)`})},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(c.value,e=>((0,r.openBlock)(),(0,r.createElementBlock)(`button`,{key:`${e.r}-${e.c}`,class:(0,r.normalizeClass)([`docx-table-grid__cell`,{"docx-table-grid__cell--active":e.r<=s.value.rows&&e.c<=s.value.cols}]),onMouseenter:t=>s.value={rows:e.r,cols:e.c},onClick:(0,r.withModifiers)(t=>l(e.r,e.c),[`prevent`])},null,42,U))),128))],4)])]),_:1},8,[`open`]))}}),G=e.u(W,[[`__scopeId`,`data-v-34f6875c`]]),K=[`disabled`,`title`],q={key:0,class:`print-btn__icon`},J=(0,r.defineComponent)({__name:`PrintButton`,props:{disabled:{type:Boolean,default:!1},label:{default:`Print`},compact:{type:Boolean,default:!1}},emits:[`print`],setup(e,{emit:t}){let n=e,i=t;function a(){n.disabled||(i(`print`),window.print())}return(t,n)=>((0,r.openBlock)(),(0,r.createElementBlock)(`button`,{class:`print-btn`,disabled:e.disabled,title:e.label,onMousedown:(0,r.withModifiers)(a,[`prevent`])},[(0,r.createTextVNode)((0,r.toDisplayString)(e.compact?``:e.label)+` `,1),e.compact?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,q,`🖨`)):(0,r.createCommentVNode)(``,!0)],40,K))}}),Y=e.u(J,[[`__scopeId`,`data-v-3e413c06`]]),X={padding:`8px 10px`,borderRadius:8,backgroundColor:`var(--doc-card)`,cursor:`pointer`,boxShadow:`var(--doc-card-shadow)`},Z={padding:`10px 12px`,borderRadius:8,backgroundColor:`var(--doc-surface)`,cursor:`pointer`,boxShadow:`var(--doc-card-shadow-strong)`};exports.AddCommentCard=t.o,exports.AlignmentButtons=t.r,exports.Button=t.T,exports.CARD_STYLE_COLLAPSED=X,exports.CARD_STYLE_EXPANDED=Z,exports.ColorPicker=t.w,exports.CommentCard=t.l,exports.CommentMarginMarkers=t.F,exports.DocumentName=t.P,exports.EditingModeDropdown=t.E,exports.EditorToolbar=u,exports.FindReplaceDialog=e.a,exports.FontPicker=k,exports.FontSizePicker=F,exports.FootnotePropertiesDialog=n.i,exports.HorizontalRuler=t.y,exports.HyperlinkDialog=e.i,exports.IconGridDropdown=t.k,exports.ImagePositionDialog=n.r,exports.ImagePropertiesDialog=e.r,exports.ImageTransformDropdown=t.D,exports.ImageWrapDropdown=t.O,exports.InsertSymbolDialog=e.n,exports.InsertTableDialog=n.n,exports.LineSpacingPicker=z,exports.ListButtons=t.t,exports.MenuBar=t.A,exports.MenuDropdown=t.M,exports.PageSetupDialog=e.t,exports.Popover=t.N,exports.PrintButton=Y,exports.ReplyInput=t.u,exports.ReplyThread=t.d,exports.ResolvedCommentMarker=t.c,exports.StylePicker=t.i,exports.TableBorderColorPicker=t._,exports.TableBorderPicker=t.v,exports.TableBorderWidthPicker=t.g,exports.TableCellFillPicker=t.h,exports.TableGridInline=t.j,exports.TableGridPicker=G,exports.TableMoreDropdown=t.m,exports.TablePropertiesDialog=n.t,exports.TableStyleGallery=n.a,exports.TableToolbar=t.p,exports.TitleBar=_,exports.Toolbar=t.b,exports.TrackedChangeCard=t.s,exports.UnifiedSidebar=t.a,exports.VerticalRuler=t.f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./WatermarkDialog-SzyoSZmL.cjs"),t=require("./ListButtons-CC7_7-e3.cjs");let n=require("vue");require("@stll/folio-core/utils/units");var r={class:`docx-editor-toolbar`},i={class:`docx-editor-toolbar__title-row`},a={class:`docx-editor-toolbar__title-left`},o={class:`docx-editor-toolbar__title-center`},s={class:`docx-editor-toolbar__title-right`},c=(0,n.defineComponent)({inheritAttrs:!1,__name:`EditorToolbar`,props:{showMenuBar:{type:Boolean,default:!0}},emits:[`menu-action`],setup(e){return(c,l)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,r,[(0,n.renderSlot)(c.$slots,`title-bar`,{},()=>[(0,n.createElementVNode)(`div`,i,[(0,n.createElementVNode)(`div`,a,[(0,n.renderSlot)(c.$slots,`title-bar-left`,{},void 0,!0)]),(0,n.createElementVNode)(`div`,o,[(0,n.renderSlot)(c.$slots,`document-name`,{},void 0,!0),e.showMenuBar?((0,n.openBlock)(),(0,n.createBlock)(t.T,{key:0,onAction:l[0]||=e=>c.$emit(`menu-action`,e)})):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`div`,s,[(0,n.renderSlot)(c.$slots,`title-bar-right`,{},void 0,!0)])])],!0),(0,n.renderSlot)(c.$slots,`toolbar`,{},()=>[(0,n.createVNode)(t.b,(0,n.normalizeProps)((0,n.guardReactiveProps)(c.$attrs)),null,16)],!0)]))}}),l=e.F(c,[[`__scopeId`,`data-v-f2023632`]]),u={},d={class:`docx-title-bar`},f={class:`docx-title-bar__left`},p={class:`docx-title-bar__center`},m={class:`docx-title-bar__right`};function h(e,t){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[(0,n.createElementVNode)(`div`,f,[(0,n.renderSlot)(e.$slots,`left`,{},void 0,!0)]),(0,n.createElementVNode)(`div`,p,[(0,n.renderSlot)(e.$slots,`default`,{},void 0,!0)]),(0,n.createElementVNode)(`div`,m,[(0,n.renderSlot)(e.$slots,`right`,{},void 0,!0)])])}var g=e.F(u,[[`render`,h],[`__scopeId`,`data-v-ae11d49f`]]);function _(e){let t=e.trim();if(!t)return``;let n=null,r=``;for(let e of t){if((e===`"`||e===`'`)&&n===null){n=e,r+=e;continue}if(e===n){n=null,r+=e;continue}if(e===`,`&&n===null)break;r+=e}return r.trim().replace(/^['"]|['"]$/g,``)}var v=[`value`,`disabled`],y={key:0,label:`Sans-serif`},b=[`value`],x={key:1,label:`Serif`},S=[`value`],C={key:2,label:`Monospace`},w=[`value`],T={key:3,label:`Other`},E=[`value`],D=(0,n.defineComponent)({__name:`FontPicker`,props:{value:{},fonts:{},disabled:{type:Boolean,default:!1},className:{},placeholder:{default:`Font`},showPreview:{type:Boolean,default:!0}},emits:[`change`],setup(e,{emit:t}){let r=e,i=t,a=[{name:`Arial`,fontFamily:`Arial, Helvetica, sans-serif`,category:`sans-serif`},{name:`Calibri`,fontFamily:`"Calibri", Arial, sans-serif`,category:`sans-serif`},{name:`Helvetica`,fontFamily:`Helvetica, Arial, sans-serif`,category:`sans-serif`},{name:`Verdana`,fontFamily:`Verdana, Geneva, sans-serif`,category:`sans-serif`},{name:`Open Sans`,fontFamily:`"Open Sans", sans-serif`,category:`sans-serif`},{name:`Roboto`,fontFamily:`Roboto, sans-serif`,category:`sans-serif`},{name:`Times New Roman`,fontFamily:`"Times New Roman", Times, serif`,category:`serif`},{name:`Georgia`,fontFamily:`Georgia, serif`,category:`serif`},{name:`Cambria`,fontFamily:`Cambria, Georgia, serif`,category:`serif`},{name:`Garamond`,fontFamily:`Garamond, serif`,category:`serif`},{name:`Courier New`,fontFamily:`"Courier New", monospace`,category:`monospace`},{name:`Consolas`,fontFamily:`Consolas, monospace`,category:`monospace`}],o=(0,n.computed)(()=>r.fonts??a),s=(0,n.computed)(()=>{let e={"sans-serif":[],serif:[],monospace:[],other:[]};for(let t of o.value)e[t.category??`other`].push(t);return e}),c=(0,n.computed)(()=>{let e=r.value;if(!e)return r.placeholder;let t=e.toLowerCase();return o.value.find(n=>n.fontFamily===e||n.name.toLowerCase()===t||_(n.fontFamily).toLowerCase()===t)?.name??e});function l(e){if(!(e.target instanceof HTMLSelectElement))return;let t=e.target.value,n=o.value.find(e=>e.name===t);i(`change`,n?_(n.fontFamily)||n.name:t)}return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`select`,{class:(0,n.normalizeClass)([`docx-font-picker`,e.className]),value:c.value,disabled:e.disabled,"aria-label":`Font family`,onChange:l},[s.value[`sans-serif`].length?((0,n.openBlock)(),(0,n.createElementBlock)(`optgroup`,y,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(s.value[`sans-serif`],t=>((0,n.openBlock)(),(0,n.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,n.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,n.toDisplayString)(t.name),13,b))),128))])):(0,n.createCommentVNode)(``,!0),s.value.serif.length?((0,n.openBlock)(),(0,n.createElementBlock)(`optgroup`,x,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(s.value.serif,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,n.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,n.toDisplayString)(t.name),13,S))),128))])):(0,n.createCommentVNode)(``,!0),s.value.monospace.length?((0,n.openBlock)(),(0,n.createElementBlock)(`optgroup`,C,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(s.value.monospace,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,n.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,n.toDisplayString)(t.name),13,w))),128))])):(0,n.createCommentVNode)(``,!0),s.value.other.length?((0,n.openBlock)(),(0,n.createElementBlock)(`optgroup`,T,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(s.value.other,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`option`,{key:t.name,value:t.name,style:(0,n.normalizeStyle)(e.showPreview?{fontFamily:t.fontFamily}:void 0)},(0,n.toDisplayString)(t.name),13,E))),128))])):(0,n.createCommentVNode)(``,!0)],42,v))}}),O=e.F(D,[[`__scopeId`,`data-v-1a9a9f88`]]),k={class:`docx-font-size`},A=[`disabled`],j=[`value`,`disabled`,`placeholder`],M=[`disabled`],N=(0,n.defineComponent)({__name:`FontSizePicker`,props:{value:{},sizes:{},disabled:{type:Boolean,default:!1},minSize:{default:1},maxSize:{default:1638},placeholder:{default:`11`}},emits:[`change`],setup(e,{emit:t}){let r=e,i=t,a=[8,9,10,11,12,14,16,18,20,24,28,36,48,72],o=(0,n.computed)(()=>r.sizes??a),s=(0,n.computed)(()=>r.value??parseInt(r.placeholder,10)??11),c=(0,n.computed)(()=>r.value===void 0?r.placeholder:String(r.value));function l(e){return o.value.find(t=>t>e)??Math.min(e+1,r.maxSize)}function u(e){return[...o.value].reverse().find(t=>t<e)??Math.max(e-1,r.minSize)}function d(){r.disabled||i(`change`,u(s.value))}function f(){r.disabled||i(`change`,l(s.value))}function p(e){if(!(e.target instanceof HTMLInputElement))return;let t=parseFloat(e.target.value);!isNaN(t)&&t>=r.minSize&&t<=r.maxSize&&i(`change`,Math.round(t*2)/2)}return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,k,[(0,n.createElementVNode)(`button`,{type:`button`,class:`docx-font-size__btn`,disabled:e.disabled||s.value<=e.minSize,title:`Decrease font size`,onClick:(0,n.withModifiers)(d,[`prevent`])},`−`,8,A),(0,n.createElementVNode)(`input`,{class:`docx-font-size__input`,type:`text`,value:c.value,disabled:e.disabled,placeholder:e.placeholder,onKeydown:[r[0]||=(0,n.withKeys)((0,n.withModifiers)(e=>{d(),e.stopPropagation()},[`prevent`]),[`up`]),r[1]||=(0,n.withKeys)((0,n.withModifiers)(e=>{f(),e.stopPropagation()},[`prevent`]),[`down`]),r[2]||=(0,n.withKeys)((0,n.withModifiers)(e=>p(e),[`prevent`]),[`enter`])],onBlur:r[3]||=e=>p(e)},null,40,j),(0,n.createElementVNode)(`button`,{type:`button`,class:`docx-font-size__btn`,disabled:e.disabled||s.value>=e.maxSize,title:`Increase font size`,onClick:(0,n.withModifiers)(f,[`prevent`])},`+`,8,M)]))}}),P=e.F(N,[[`__scopeId`,`data-v-4e8ada55`]]),F=[`value`,`disabled`],I=[`value`],L=(0,n.defineComponent)({__name:`LineSpacingPicker`,props:{value:{},options:{},disabled:{type:Boolean,default:!1},className:{}},emits:[`change`],setup(e,{emit:t}){let r=e,i=t,a=[{label:`Single`,value:1,twipsValue:240},{label:`1.15`,value:1.15,twipsValue:276},{label:`1.5`,value:1.5,twipsValue:360},{label:`Double`,value:2,twipsValue:480}],o=(0,n.computed)(()=>r.options??a),s=(0,n.computed)(()=>r.value??o.value[0]?.twipsValue??240);function c(e){if(!(e.target instanceof HTMLSelectElement))return;let t=parseInt(e.target.value,10);isNaN(t)||i(`change`,t)}return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`select`,{class:(0,n.normalizeClass)([`docx-line-spacing`,e.className]),value:String(s.value),disabled:e.disabled,"aria-label":`Line spacing`,onChange:c},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`option`,{key:e.twipsValue,value:String(e.twipsValue)},(0,n.toDisplayString)(e.label),9,I))),128))],42,F))}}),R=e.F(L,[[`__scopeId`,`data-v-fcda8ecc`]]),z=[`disabled`,`aria-expanded`,`title`,`onClick`],B={class:`docx-table-grid__panel`},V={class:`docx-table-grid__label`},H=[`onMouseenter`,`onClick`],U=(0,n.defineComponent)({__name:`TableGridPicker`,props:{disabled:{type:Boolean,default:!1},gridRows:{default:5},gridColumns:{default:5},tooltip:{default:`Insert table`}},emits:[`insert`],setup(t,{emit:r}){let{Popover:i}=e.y(),a=t,o=r,s=(0,n.ref)(!1),c=(0,n.ref)({rows:1,cols:1}),l=(0,n.computed)(()=>{let e=[];for(let t=1;t<=a.gridRows;t++)for(let n=1;n<=a.gridColumns;n++)e.push({r:t,c:n});return e});function u(e,t){o(`insert`,e,t),s.value=!1}function d(){s.value=!1,c.value={rows:1,cols:1}}return(r,a)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(i),{open:s.value,"onUpdate:open":a[0]||=e=>s.value=e,onClose:d},{trigger:(0,n.withCtx)(({toggle:r})=>[(0,n.createElementVNode)(`button`,{type:`button`,class:`docx-table-grid__btn`,disabled:t.disabled,"aria-expanded":s.value,"aria-haspopup":`grid`,title:t.tooltip,onClick:(0,n.withModifiers)(r,[`prevent`])},[(0,n.createVNode)(e.P,{name:`grid_on`,size:20})],8,z)]),panel:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`div`,B,[(0,n.createElementVNode)(`div`,V,(0,n.toDisplayString)(c.value.rows)+` × `+(0,n.toDisplayString)(c.value.cols),1),(0,n.createElementVNode)(`div`,{class:`docx-table-grid__grid`,style:(0,n.normalizeStyle)({gridTemplateColumns:`repeat(${t.gridColumns}, 18px)`})},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(l.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:`${e.r}-${e.c}`,class:(0,n.normalizeClass)([`docx-table-grid__cell`,{"docx-table-grid__cell--active":e.r<=c.value.rows&&e.c<=c.value.cols}]),onMouseenter:t=>c.value={rows:e.r,cols:e.c},onClick:(0,n.withModifiers)(t=>u(e.r,e.c),[`prevent`])},null,42,H))),128))],4)])]),_:1},8,[`open`]))}}),W=e.F(U,[[`__scopeId`,`data-v-444ca123`]]),G=[`disabled`,`title`],K={key:0,class:`print-btn__icon`},q=(0,n.defineComponent)({__name:`PrintButton`,props:{disabled:{type:Boolean,default:!1},label:{default:`Print`},compact:{type:Boolean,default:!1}},emits:[`print`],setup(e,{emit:t}){let r=e,i=t;function a(){r.disabled||(i(`print`),window.print())}return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{class:`print-btn`,disabled:e.disabled,title:e.label,onMousedown:(0,n.withModifiers)(a,[`prevent`])},[(0,n.createTextVNode)((0,n.toDisplayString)(e.compact?``:e.label)+` `,1),e.compact?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,K,`🖨`)):(0,n.createCommentVNode)(``,!0)],40,G))}}),J=e.F(q,[[`__scopeId`,`data-v-3e413c06`]]),Y={padding:`8px 10px`,borderRadius:8,backgroundColor:`var(--doc-card)`,cursor:`pointer`,boxShadow:`var(--doc-card-shadow)`},X={padding:`10px 12px`,borderRadius:8,backgroundColor:`var(--doc-surface)`,cursor:`pointer`,boxShadow:`var(--doc-card-shadow-strong)`};exports.AddCommentCard=t.o,exports.AlignmentButtons=t.r,exports.Button=e.N,exports.CARD_STYLE_COLLAPSED=Y,exports.CARD_STYLE_EXPANDED=X,exports.Checkbox=e.M,exports.ColorPicker=e.D,exports.CommentCard=t.l,exports.CommentMarginMarkers=t.O,exports.DEFAULT_COMPONENTS=e.h,exports.DatePickerPopover=e.E,exports.Dialog=e.T,exports.DocumentName=t.D,exports.EditingModeDropdown=t.x,exports.EditorToolbar=l,exports.FindReplaceDialog=e.m,exports.FontPicker=O,exports.FontSizePicker=P,exports.FootnotePropertiesDialog=e.l,exports.HorizontalRuler=t.y,exports.HyperlinkDialog=e.p,exports.IconGridDropdown=t.w,exports.ImagePositionDialog=e.c,exports.ImagePropertiesDialog=e.f,exports.ImageTransformDropdown=t.S,exports.ImageWrapDropdown=t.C,exports.Input=e.w,exports.InsertImageDialog=e.s,exports.InsertSymbolDialog=e.d,exports.InsertTableDialog=e.a,exports.LineSpacingPicker=R,exports.ListButtons=t.t,exports.MenuBar=t.T,exports.MenuDropdown=e.S,exports.OutlineRail=e.x,exports.PageSetupDialog=e.u,exports.PasteSpecialDialog=e.i,exports.Popover=e.C,exports.PrintButton=J,exports.ReplyInput=t.u,exports.ReplyThread=t.d,exports.ResolvedCommentMarker=t.c,exports.Select=e.b,exports.SplitCellDialog=e.r,exports.StylePicker=t.i,exports.TableBorderColorPicker=t._,exports.TableBorderPicker=t.v,exports.TableBorderWidthPicker=t.g,exports.TableCellFillPicker=t.h,exports.TableGridInline=t.E,exports.TableGridPicker=W,exports.TableMoreDropdown=t.m,exports.TablePropertiesDialog=e.n,exports.TableStyleGallery=e.o,exports.TableToolbar=t.p,exports.TitleBar=g,exports.Toolbar=t.b,exports.TrackedChangeCard=t.s,exports.UnifiedSidebar=t.a,exports.VerticalRuler=t.f,exports.WatermarkDialog=e.t,exports.provideFolioUI=e._,exports.resolveFolioComponents=e.v,exports.useFolioUI=e.y;

package/dist/ui.d.ts

@@ -4,9 +4,9 @@
  * UI entry point — toolbar primitives, pickers, table/image controls, sidebar
  * cards, and dialogs. Mirrors `packages/react/src/ui.ts` (and upstream's Vue
  * `ui.ts`), limited to the components the fork has ported. Components without a
- * Vue equivalent yet (ResponsiveToolbar, ZoomControl, Tooltip, LoadingIndicator,
+ * Vue equivalent yet (ResponsiveToolbar, Tooltip, LoadingIndicator,
  * TableInsertButtons, TableMergeButton, UnsavedIndicator, PrintPreview, and the
- * InsertImage / KeyboardShortcuts / PasteSpecial / SplitCell dialogs) are omitted.
+ * KeyboardShortcuts dialog) are omitted.
  *
  * @example
  * ```ts
@@ -55,13 +55,25 @@ export { default as CommentMarginMarkers } from './components/CommentMarginMarke
 export { default as FindReplaceDialog } from './components/dialogs/FindReplaceDialog.vue';
 export { default as FootnotePropertiesDialog } from './components/dialogs/FootnotePropertiesDialog.vue';
 export { default as HyperlinkDialog } from './components/dialogs/HyperlinkDialog.vue';
+export { default as InsertImageDialog } from './components/dialogs/InsertImageDialog.vue';
 export { default as ImagePositionDialog } from './components/dialogs/ImagePositionDialog.vue';
 export { default as ImagePropertiesDialog } from './components/dialogs/ImagePropertiesDialog.vue';
 export { default as InsertSymbolDialog } from './components/dialogs/InsertSymbolDialog.vue';
 export { default as InsertTableDialog } from './components/dialogs/InsertTableDialog.vue';
 export { default as PageSetupDialog } from './components/dialogs/PageSetupDialog.vue';
+export { default as PasteSpecialDialog } from './components/dialogs/PasteSpecialDialog.vue';
+export { default as SplitCellDialog } from './components/dialogs/SplitCellDialog.vue';
 export { default as TablePropertiesDialog } from './components/dialogs/TablePropertiesDialog.vue';
+export { default as WatermarkDialog } from './components/dialogs/WatermarkDialog.vue';
 export { default as PrintButton } from './components/PrintButton.vue';
 export { default as HorizontalRuler } from './components/ui/HorizontalRuler.vue';
 export { default as VerticalRuler } from './components/ui/VerticalRuler.vue';
 export { CARD_STYLE_COLLAPSED, CARD_STYLE_EXPANDED } from './components/sidebar/cardStyles';
+export { default as Dialog } from './components/ui/Dialog.vue';
+export { default as Select } from './components/ui/Select.vue';
+export { default as Input } from './components/ui/Input.vue';
+export { default as Checkbox } from './components/ui/Checkbox.vue';
+export { default as DatePickerPopover } from './components/ui/DatePickerPopover.vue';
+export { default as OutlineRail } from './components/ui/OutlineRail.vue';
+export { DEFAULT_COMPONENTS, provideFolioUI, resolveFolioComponents, useFolioUI, } from './ui/folio-ui';
+export type { FolioCheckboxProps, FolioColorPickerProps, FolioDatePickerPopoverProps, FolioDialogProps, FolioInputProps, FolioMenuItem, FolioMenuProps, FolioOutlineRailProps, FolioPopoverProps, FolioSelectItem, FolioSelectProps, } from './ui/folio-ui';