@stll/folio-vue 0.2.0 → 0.3.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("./PageSetupDialog-GGWMpoe-.cjs"),t=require("./ListButtons-3UeVXRAK.cjs"),n=require("./TablePropertiesDialog-DYbjwevC.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.T,{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.E(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.E(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.E(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.E(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.E(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(t,{emit:n}){let{Popover:i}=e.u(),a=t,o=n,s=(0,r.ref)(!1),c=(0,r.ref)({rows:1,cols:1}),l=(0,r.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(n,a)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(i),{open:s.value,"onUpdate:open":a[0]||=e=>s.value=e,onClose:d},{trigger:(0,r.withCtx)(({toggle:n})=>[(0,r.createElementVNode)(`button`,{type:`button`,class:`docx-table-grid__btn`,disabled:t.disabled,"aria-expanded":s.value,"aria-haspopup":`grid`,title:t.tooltip,onClick:(0,r.withModifiers)(n,[`prevent`])},[(0,r.createVNode)(e.T,{name:`grid_on`,size:20})],8,B)]),panel:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,V,[(0,r.createElementVNode)(`div`,H,(0,r.toDisplayString)(c.value.rows)+` × `+(0,r.toDisplayString)(c.value.cols),1),(0,r.createElementVNode)(`div`,{class:`docx-table-grid__grid`,style:(0,r.normalizeStyle)({gridTemplateColumns:`repeat(${t.gridColumns}, 18px)`})},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(l.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<=c.value.rows&&e.c<=c.value.cols}]),onMouseenter:t=>c.value={rows:e.r,cols:e.c},onClick:(0,r.withModifiers)(t=>u(e.r,e.c),[`prevent`])},null,42,U))),128))],4)])]),_:1},8,[`open`]))}}),G=e.E(W,[[`__scopeId`,`data-v-444ca123`]]),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.E(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=e.w,exports.CARD_STYLE_COLLAPSED=X,exports.CARD_STYLE_EXPANDED=Z,exports.Checkbox=e.C,exports.ColorPicker=e.v,exports.CommentCard=t.l,exports.CommentMarginMarkers=t.O,exports.DEFAULT_COMPONENTS=e.o,exports.DatePickerPopover=e._,exports.Dialog=e.g,exports.DocumentName=t.D,exports.EditingModeDropdown=t.x,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.w,exports.ImagePositionDialog=n.r,exports.ImagePropertiesDialog=e.r,exports.ImageTransformDropdown=t.S,exports.ImageWrapDropdown=t.C,exports.Input=e.h,exports.InsertSymbolDialog=e.n,exports.InsertTableDialog=n.n,exports.LineSpacingPicker=z,exports.ListButtons=t.t,exports.MenuBar=t.T,exports.MenuDropdown=e.p,exports.OutlineRail=e.f,exports.PageSetupDialog=e.t,exports.Popover=e.m,exports.PrintButton=Y,exports.ReplyInput=t.u,exports.ReplyThread=t.d,exports.ResolvedCommentMarker=t.c,exports.Select=e.d,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=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,exports.provideFolioUI=e.c,exports.resolveFolioComponents=e.l,exports.useFolioUI=e.u;

package/dist/ui.d.ts

@@ -65,3 +65,11 @@ 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';

package/dist/ui.js

@@ -1,10 +1,10 @@
-import { a as e, i as t, n, r, t as i, u as a } from "./PageSetupDialog-DsjAfJy0.js";
-import { A as o, D as s, E as c, F as l, I as u, M as d, N as f, O as ee, P as p, T as m, _ as h, a as g, b as _, c as v, d as y, f as b, g as x, h as S, i as te, j as ne, k as re, l as ie, m as ae, o as oe, p as se, r as ce, s as le, t as ue, u as de, v as C, w, y as T } from "./ListButtons-B498PX1d.js";
-import { a as E, i as D, n as O, r as k, t as A } from "./TablePropertiesDialog-PyXEJC_o.js";
-import { Fragment as j, computed as M, createBlock as N, createCommentVNode as P, createElementBlock as F, createElementVNode as I, createTextVNode as L, createVNode as R, defineComponent as z, guardReactiveProps as B, normalizeClass as V, normalizeProps as H, normalizeStyle as U, openBlock as W, ref as G, renderList as K, renderSlot as q, toDisplayString as J, withCtx as Y, withKeys as X, withModifiers as Z } from "vue";
+import { C as e, E as t, T as n, _ as r, a as i, c as a, d as o, f as s, g as c, h as l, i as u, l as d, m as f, n as ee, o as te, p as ne, r as re, t as ie, u as p, v as ae, w as oe } from "./PageSetupDialog-Djs8aW5A.js";
+import { C as se, D as m, E as ce, O as le, S as ue, T as h, _ as g, a as _, b as v, c as de, d as fe, f as pe, g as me, h as he, i as ge, l as _e, m as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "./ListButtons-CDkmhg3v.js";
+import { a as A, i as j, n as M, r as N, t as P } from "./TablePropertiesDialog-B399kZgL.js";
+import { Fragment as F, computed as I, createBlock as L, createCommentVNode as R, createElementBlock as z, createElementVNode as B, createTextVNode as ve, createVNode as V, defineComponent as H, guardReactiveProps as ye, normalizeClass as U, normalizeProps as be, normalizeStyle as W, openBlock as G, ref as K, renderList as q, renderSlot as J, toDisplayString as Y, unref as xe, withCtx as X, withKeys as Z, withModifiers as Q } from "vue";
 import "@stll/folio-core/utils/units";
 //#region src/components/EditorToolbar.vue?vue&type=script&setup=true&lang.ts
-var fe = { class: "docx-editor-toolbar" }, pe = { class: "docx-editor-toolbar__title-row" }, me = { class: "docx-editor-toolbar__title-left" }, he = { class: "docx-editor-toolbar__title-center" }, ge = { class: "docx-editor-toolbar__title-right" }, _e = /*#__PURE__*/ a(/* @__PURE__ */ z({
+var Se = { class: "docx-editor-toolbar" }, Ce = { class: "docx-editor-toolbar__title-row" }, we = { class: "docx-editor-toolbar__title-left" }, Te = { class: "docx-editor-toolbar__title-center" }, Ee = { class: "docx-editor-toolbar__title-right" }, De = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	inheritAttrs: !1,
 	__name: "EditorToolbar",
 	props: { showMenuBar: {
@@ -13,27 +13,27 @@ var fe = { class: "docx-editor-toolbar" }, pe = { class: "docx-editor-toolbar__t
 	} },
 	emits: ["menu-action"],
 	setup(e) {
-		return (t, n) => (W(), F("div", fe, [q(t.$slots, "title-bar", {}, () => [I("div", pe, [
-			I("div", me, [q(t.$slots, "title-bar-left", {}, void 0, !0)]),
-			I("div", he, [q(t.$slots, "document-name", {}, void 0, !0), e.showMenuBar ? (W(), N(o, {
+		return (t, n) => (G(), z("div", Se, [J(t.$slots, "title-bar", {}, () => [B("div", Ce, [
+			B("div", we, [J(t.$slots, "title-bar-left", {}, void 0, !0)]),
+			B("div", Te, [J(t.$slots, "document-name", {}, void 0, !0), e.showMenuBar ? (G(), L(h, {
 				key: 0,
 				onAction: n[0] ||= (e) => t.$emit("menu-action", e)
-			})) : P("", !0)]),
-			I("div", ge, [q(t.$slots, "title-bar-right", {}, void 0, !0)])
-		])], !0), q(t.$slots, "toolbar", {}, () => [R(_, H(B(t.$attrs)), null, 16)], !0)]));
+			})) : R("", !0)]),
+			B("div", Ee, [J(t.$slots, "title-bar-right", {}, void 0, !0)])
+		])], !0), J(t.$slots, "toolbar", {}, () => [V(v, be(ye(t.$attrs)), null, 16)], !0)]));
 	}
-}), [["__scopeId", "data-v-f2023632"]]), ve = {}, ye = { class: "docx-title-bar" }, be = { class: "docx-title-bar__left" }, xe = { class: "docx-title-bar__center" }, Se = { class: "docx-title-bar__right" };
-function Ce(e, t) {
-	return W(), F("div", ye, [
-		I("div", be, [q(e.$slots, "left", {}, void 0, !0)]),
-		I("div", xe, [q(e.$slots, "default", {}, void 0, !0)]),
-		I("div", Se, [q(e.$slots, "right", {}, void 0, !0)])
+}), [["__scopeId", "data-v-f2023632"]]), Oe = {}, ke = { class: "docx-title-bar" }, Ae = { class: "docx-title-bar__left" }, je = { class: "docx-title-bar__center" }, Me = { class: "docx-title-bar__right" };
+function Ne(e, t) {
+	return G(), z("div", ke, [
+		B("div", Ae, [J(e.$slots, "left", {}, void 0, !0)]),
+		B("div", je, [J(e.$slots, "default", {}, void 0, !0)]),
+		B("div", Me, [J(e.$slots, "right", {}, void 0, !0)])
 	]);
 }
-var we = /*#__PURE__*/ a(ve, [["render", Ce], ["__scopeId", "data-v-ae11d49f"]]);
+var Pe = /*#__PURE__*/ t(Oe, [["render", Ne], ["__scopeId", "data-v-ae11d49f"]]);
 //#endregion
 //#region src/components/ui/fontPickerValue.ts
-function Q(e) {
+function $(e) {
 	let t = e.trim();
 	if (!t) return "";
 	let n = null, r = "";
@@ -53,19 +53,19 @@ function Q(e) {
 }
 //#endregion
 //#region src/components/ui/FontPicker.vue?vue&type=script&setup=true&lang.ts
-var Te = ["value", "disabled"], Ee = {
+var Fe = ["value", "disabled"], Ie = {
 	key: 0,
 	label: "Sans-serif"
-}, De = ["value"], Oe = {
+}, Le = ["value"], Re = {
 	key: 1,
 	label: "Serif"
-}, ke = ["value"], Ae = {
+}, ze = ["value"], Be = {
 	key: 2,
 	label: "Monospace"
-}, je = ["value"], Me = {
+}, Ve = ["value"], He = {
 	key: 3,
 	label: "Other"
-}, Ne = ["value"], Pe = /*#__PURE__*/ a(/* @__PURE__ */ z({
+}, Ue = ["value"], We = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	__name: "FontPicker",
 	props: {
 		value: {},
@@ -144,7 +144,7 @@ var Te = ["value", "disabled"], Ee = {
 				fontFamily: "Consolas, monospace",
 				category: "monospace"
 			}
-		], a = M(() => n.fonts ?? i), o = M(() => {
+		], a = I(() => n.fonts ?? i), o = I(() => {
 			let e = {
 				"sans-serif": [],
 				serif: [],
@@ -153,51 +153,51 @@ var Te = ["value", "disabled"], Ee = {
 			};
 			for (let t of a.value) e[t.category ?? "other"].push(t);
 			return e;
-		}), s = M(() => {
+		}), s = I(() => {
 			let e = n.value;
 			if (!e) return n.placeholder;
 			let t = e.toLowerCase();
-			return a.value.find((n) => n.fontFamily === e || n.name.toLowerCase() === t || Q(n.fontFamily).toLowerCase() === t)?.name ?? e;
+			return a.value.find((n) => n.fontFamily === e || n.name.toLowerCase() === t || $(n.fontFamily).toLowerCase() === t)?.name ?? e;
 		});
 		function c(e) {
 			if (!(e.target instanceof HTMLSelectElement)) return;
 			let t = e.target.value, n = a.value.find((e) => e.name === t);
-			r("change", n ? Q(n.fontFamily) || n.name : t);
+			r("change", n ? $(n.fontFamily) || n.name : t);
 		}
-		return (t, n) => (W(), F("select", {
-			class: V(["docx-font-picker", e.className]),
+		return (t, n) => (G(), z("select", {
+			class: U(["docx-font-picker", e.className]),
 			value: s.value,
 			disabled: e.disabled,
 			"aria-label": "Font family",
 			onChange: c
 		}, [
-			o.value["sans-serif"].length ? (W(), F("optgroup", Ee, [(W(!0), F(j, null, K(o.value["sans-serif"], (t) => (W(), F("option", {
+			o.value["sans-serif"].length ? (G(), z("optgroup", Ie, [(G(!0), z(F, null, q(o.value["sans-serif"], (t) => (G(), z("option", {
 				key: t.name,
 				value: t.name,
-				style: U(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
-			}, J(t.name), 13, De))), 128))])) : P("", !0),
-			o.value.serif.length ? (W(), F("optgroup", Oe, [(W(!0), F(j, null, K(o.value.serif, (t) => (W(), F("option", {
+				style: W(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
+			}, Y(t.name), 13, Le))), 128))])) : R("", !0),
+			o.value.serif.length ? (G(), z("optgroup", Re, [(G(!0), z(F, null, q(o.value.serif, (t) => (G(), z("option", {
 				key: t.name,
 				value: t.name,
-				style: U(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
-			}, J(t.name), 13, ke))), 128))])) : P("", !0),
-			o.value.monospace.length ? (W(), F("optgroup", Ae, [(W(!0), F(j, null, K(o.value.monospace, (t) => (W(), F("option", {
+				style: W(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
+			}, Y(t.name), 13, ze))), 128))])) : R("", !0),
+			o.value.monospace.length ? (G(), z("optgroup", Be, [(G(!0), z(F, null, q(o.value.monospace, (t) => (G(), z("option", {
 				key: t.name,
 				value: t.name,
-				style: U(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
-			}, J(t.name), 13, je))), 128))])) : P("", !0),
-			o.value.other.length ? (W(), F("optgroup", Me, [(W(!0), F(j, null, K(o.value.other, (t) => (W(), F("option", {
+				style: W(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
+			}, Y(t.name), 13, Ve))), 128))])) : R("", !0),
+			o.value.other.length ? (G(), z("optgroup", He, [(G(!0), z(F, null, q(o.value.other, (t) => (G(), z("option", {
 				key: t.name,
 				value: t.name,
-				style: U(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
-			}, J(t.name), 13, Ne))), 128))])) : P("", !0)
-		], 42, Te));
+				style: W(e.showPreview ? { fontFamily: t.fontFamily } : void 0)
+			}, Y(t.name), 13, Ue))), 128))])) : R("", !0)
+		], 42, Fe));
 	}
-}), [["__scopeId", "data-v-1a9a9f88"]]), Fe = { class: "docx-font-size" }, Ie = ["disabled"], Le = [
+}), [["__scopeId", "data-v-1a9a9f88"]]), Ge = { class: "docx-font-size" }, Ke = ["disabled"], qe = [
 	"value",
 	"disabled",
 	"placeholder"
-], Re = ["disabled"], ze = /*#__PURE__*/ a(/* @__PURE__ */ z({
+], Je = ["disabled"], Ye = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	__name: "FontSizePicker",
 	props: {
 		value: {},
@@ -227,7 +227,7 @@ var Te = ["value", "disabled"], Ee = {
 			36,
 			48,
 			72
-		], a = M(() => n.sizes ?? i), o = M(() => n.value ?? parseInt(n.placeholder, 10) ?? 11), s = M(() => n.value === void 0 ? n.placeholder : String(n.value));
+		], a = I(() => n.sizes ?? i), o = I(() => n.value ?? parseInt(n.placeholder, 10) ?? 11), s = I(() => n.value === void 0 ? n.placeholder : String(n.value));
 		function c(e) {
 			return a.value.find((t) => t > e) ?? Math.min(e + 1, n.maxSize);
 		}
@@ -245,41 +245,41 @@ var Te = ["value", "disabled"], Ee = {
 			let t = parseFloat(e.target.value);
 			!isNaN(t) && t >= n.minSize && t <= n.maxSize && r("change", Math.round(t * 2) / 2);
 		}
-		return (t, n) => (W(), F("div", Fe, [
-			I("button", {
+		return (t, n) => (G(), z("div", Ge, [
+			B("button", {
 				type: "button",
 				class: "docx-font-size__btn",
 				disabled: e.disabled || o.value <= e.minSize,
 				title: "Decrease font size",
-				onClick: Z(u, ["prevent"])
-			}, "−", 8, Ie),
-			I("input", {
+				onClick: Q(u, ["prevent"])
+			}, "−", 8, Ke),
+			B("input", {
 				class: "docx-font-size__input",
 				type: "text",
 				value: s.value,
 				disabled: e.disabled,
 				placeholder: e.placeholder,
 				onKeydown: [
-					n[0] ||= X(Z((e) => {
+					n[0] ||= Z(Q((e) => {
 						u(), e.stopPropagation();
 					}, ["prevent"]), ["up"]),
-					n[1] ||= X(Z((e) => {
+					n[1] ||= Z(Q((e) => {
 						d(), e.stopPropagation();
 					}, ["prevent"]), ["down"]),
-					n[2] ||= X(Z((e) => f(e), ["prevent"]), ["enter"])
+					n[2] ||= Z(Q((e) => f(e), ["prevent"]), ["enter"])
 				],
 				onBlur: n[3] ||= (e) => f(e)
-			}, null, 40, Le),
-			I("button", {
+			}, null, 40, qe),
+			B("button", {
 				type: "button",
 				class: "docx-font-size__btn",
 				disabled: e.disabled || o.value >= e.maxSize,
 				title: "Increase font size",
-				onClick: Z(d, ["prevent"])
-			}, "+", 8, Re)
+				onClick: Q(d, ["prevent"])
+			}, "+", 8, Je)
 		]));
 	}
-}), [["__scopeId", "data-v-4e8ada55"]]), $ = ["value", "disabled"], Be = ["value"], Ve = /*#__PURE__*/ a(/* @__PURE__ */ z({
+}), [["__scopeId", "data-v-4e8ada55"]]), Xe = ["value", "disabled"], Ze = ["value"], Qe = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	__name: "LineSpacingPicker",
 	props: {
 		value: {},
@@ -313,29 +313,29 @@ var Te = ["value", "disabled"], Ee = {
 				value: 2,
 				twipsValue: 480
 			}
-		], a = M(() => n.options ?? i), o = M(() => n.value ?? a.value[0]?.twipsValue ?? 240);
+		], a = I(() => n.options ?? i), o = I(() => n.value ?? a.value[0]?.twipsValue ?? 240);
 		function s(e) {
 			if (!(e.target instanceof HTMLSelectElement)) return;
 			let t = parseInt(e.target.value, 10);
 			isNaN(t) || r("change", t);
 		}
-		return (t, n) => (W(), F("select", {
-			class: V(["docx-line-spacing", e.className]),
+		return (t, n) => (G(), z("select", {
+			class: U(["docx-line-spacing", e.className]),
 			value: String(o.value),
 			disabled: e.disabled,
 			"aria-label": "Line spacing",
 			onChange: s
-		}, [(W(!0), F(j, null, K(a.value, (e) => (W(), F("option", {
+		}, [(G(!0), z(F, null, q(a.value, (e) => (G(), z("option", {
 			key: e.twipsValue,
 			value: String(e.twipsValue)
-		}, J(e.label), 9, Be))), 128))], 42, $));
+		}, Y(e.label), 9, Ze))), 128))], 42, Xe));
 	}
-}), [["__scopeId", "data-v-fcda8ecc"]]), He = [
+}), [["__scopeId", "data-v-fcda8ecc"]]), $e = [
 	"disabled",
 	"aria-expanded",
 	"title",
 	"onClick"
-], Ue = { class: "docx-table-grid__panel" }, We = { class: "docx-table-grid__label" }, Ge = ["onMouseenter", "onClick"], Ke = /*#__PURE__*/ a(/* @__PURE__ */ z({
+], et = { class: "docx-table-grid__panel" }, tt = { class: "docx-table-grid__label" }, nt = ["onMouseenter", "onClick"], rt = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	__name: "TableGridPicker",
 	props: {
 		disabled: {
@@ -348,62 +348,62 @@ var Te = ["value", "disabled"], Ee = {
 	},
 	emits: ["insert"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = G(!1), a = G({
+		let { Popover: r } = p(), i = e, a = t, o = K(!1), s = K({
 			rows: 1,
 			cols: 1
-		}), o = M(() => {
+		}), c = I(() => {
 			let e = [];
-			for (let t = 1; t <= n.gridRows; t++) for (let r = 1; r <= n.gridColumns; r++) e.push({
+			for (let t = 1; t <= i.gridRows; t++) for (let n = 1; n <= i.gridColumns; n++) e.push({
 				r: t,
-				c: r
+				c: n
 			});
 			return e;
 		});
-		function s(e, t) {
-			r("insert", e, t), i.value = !1;
+		function l(e, t) {
+			a("insert", e, t), o.value = !1;
 		}
-		function c() {
-			i.value = !1, a.value = {
+		function u() {
+			o.value = !1, s.value = {
 				rows: 1,
 				cols: 1
 			};
 		}
-		return (t, n) => (W(), N(f, {
-			open: i.value,
-			"onUpdate:open": n[0] ||= (e) => i.value = e,
-			onClose: c
+		return (t, i) => (G(), L(xe(r), {
+			open: o.value,
+			"onUpdate:open": i[0] ||= (e) => o.value = e,
+			onClose: u
 		}, {
-			trigger: Y(({ toggle: t }) => [I("button", {
+			trigger: X(({ toggle: t }) => [B("button", {
 				type: "button",
 				class: "docx-table-grid__btn",
 				disabled: e.disabled,
-				"aria-expanded": i.value,
+				"aria-expanded": o.value,
 				"aria-haspopup": "grid",
 				title: e.tooltip,
-				onClick: Z(t, ["prevent"])
-			}, [R(u, {
+				onClick: Q(t, ["prevent"])
+			}, [V(n, {
 				name: "grid_on",
 				size: 20
-			})], 8, He)]),
-			panel: Y(() => [I("div", Ue, [I("div", We, J(a.value.rows) + " × " + J(a.value.cols), 1), I("div", {
+			})], 8, $e)]),
+			panel: X(() => [B("div", et, [B("div", tt, Y(s.value.rows) + " × " + Y(s.value.cols), 1), B("div", {
 				class: "docx-table-grid__grid",
-				style: U({ gridTemplateColumns: `repeat(${e.gridColumns}, 18px)` })
-			}, [(W(!0), F(j, null, K(o.value, (e) => (W(), F("button", {
+				style: W({ gridTemplateColumns: `repeat(${e.gridColumns}, 18px)` })
+			}, [(G(!0), z(F, null, q(c.value, (e) => (G(), z("button", {
 				key: `${e.r}-${e.c}`,
-				class: V(["docx-table-grid__cell", { "docx-table-grid__cell--active": e.r <= a.value.rows && e.c <= a.value.cols }]),
-				onMouseenter: (t) => a.value = {
+				class: U(["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: Z((t) => s(e.r, e.c), ["prevent"])
-			}, null, 42, Ge))), 128))], 4)])]),
+				onClick: Q((t) => l(e.r, e.c), ["prevent"])
+			}, null, 42, nt))), 128))], 4)])]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-34f6875c"]]), qe = ["disabled", "title"], Je = {
+}), [["__scopeId", "data-v-444ca123"]]), it = ["disabled", "title"], at = {
 	key: 0,
 	class: "print-btn__icon"
-}, Ye = /*#__PURE__*/ a(/* @__PURE__ */ z({
+}, ot = /*#__PURE__*/ t(/* @__PURE__ */ H({
 	__name: "PrintButton",
 	props: {
 		disabled: {
@@ -422,20 +422,20 @@ var Te = ["value", "disabled"], Ee = {
 		function i() {
 			n.disabled || (r("print"), window.print());
 		}
-		return (t, n) => (W(), F("button", {
+		return (t, n) => (G(), z("button", {
 			class: "print-btn",
 			disabled: e.disabled,
 			title: e.label,
-			onMousedown: Z(i, ["prevent"])
-		}, [L(J(e.compact ? "" : e.label) + " ", 1), e.compact ? (W(), F("span", Je, "🖨")) : P("", !0)], 40, qe));
+			onMousedown: Q(i, ["prevent"])
+		}, [ve(Y(e.compact ? "" : e.label) + " ", 1), e.compact ? (G(), z("span", at, "🖨")) : R("", !0)], 40, it));
 	}
-}), [["__scopeId", "data-v-3e413c06"]]), Xe = {
+}), [["__scopeId", "data-v-3e413c06"]]), st = {
 	padding: "8px 10px",
 	borderRadius: 8,
 	backgroundColor: "var(--doc-card)",
 	cursor: "pointer",
 	boxShadow: "var(--doc-card-shadow)"
-}, Ze = {
+}, ct = {
 	padding: "10px 12px",
 	borderRadius: 8,
 	backgroundColor: "var(--doc-surface)",
@@ -443,4 +443,4 @@ var Te = ["value", "disabled"], Ee = {
 	boxShadow: "var(--doc-card-shadow-strong)"
 };
 //#endregion
-export { oe as AddCommentCard, ce as AlignmentButtons, m as Button, Xe as CARD_STYLE_COLLAPSED, Ze as CARD_STYLE_EXPANDED, w as ColorPicker, ie as CommentCard, l as CommentMarginMarkers, p as DocumentName, c as EditingModeDropdown, _e as EditorToolbar, e as FindReplaceDialog, Pe as FontPicker, ze as FontSizePicker, D as FootnotePropertiesDialog, T as HorizontalRuler, t as HyperlinkDialog, re as IconGridDropdown, k as ImagePositionDialog, r as ImagePropertiesDialog, s as ImageTransformDropdown, ee as ImageWrapDropdown, n as InsertSymbolDialog, O as InsertTableDialog, Ve as LineSpacingPicker, ue as ListButtons, o as MenuBar, d as MenuDropdown, i as PageSetupDialog, f as Popover, Ye as PrintButton, de as ReplyInput, y as ReplyThread, v as ResolvedCommentMarker, te as StylePicker, h as TableBorderColorPicker, C as TableBorderPicker, x as TableBorderWidthPicker, S as TableCellFillPicker, ne as TableGridInline, Ke as TableGridPicker, ae as TableMoreDropdown, A as TablePropertiesDialog, E as TableStyleGallery, se as TableToolbar, we as TitleBar, _ as Toolbar, le as TrackedChangeCard, g as UnifiedSidebar, b as VerticalRuler };
+export { b as AddCommentCard, S as AlignmentButtons, oe as Button, st as CARD_STYLE_COLLAPSED, ct as CARD_STYLE_EXPANDED, e as Checkbox, ae as ColorPicker, _e as CommentCard, le as CommentMarginMarkers, te as DEFAULT_COMPONENTS, r as DatePickerPopover, c as Dialog, m as DocumentName, O as EditingModeDropdown, De as EditorToolbar, i as FindReplaceDialog, We as FontPicker, Ye as FontSizePicker, j as FootnotePropertiesDialog, k as HorizontalRuler, u as HyperlinkDialog, D as IconGridDropdown, N as ImagePositionDialog, re as ImagePropertiesDialog, ue as ImageTransformDropdown, se as ImageWrapDropdown, l as Input, ee as InsertSymbolDialog, M as InsertTableDialog, Qe as LineSpacingPicker, w as ListButtons, h as MenuBar, ne as MenuDropdown, s as OutlineRail, ie as PageSetupDialog, f as Popover, ot as PrintButton, T as ReplyInput, fe as ReplyThread, de as ResolvedCommentMarker, o as Select, ge as StylePicker, g as TableBorderColorPicker, E as TableBorderPicker, me as TableBorderWidthPicker, he as TableCellFillPicker, ce as TableGridInline, rt as TableGridPicker, y as TableMoreDropdown, P as TablePropertiesDialog, A as TableStyleGallery, x as TableToolbar, Pe as TitleBar, v as Toolbar, C as TrackedChangeCard, _ as UnifiedSidebar, pe as VerticalRuler, a as provideFolioUI, d as resolveFolioComponents, p as useFolioUI };