@enos5/enos-vue-default 1.17.2 → 1.18.0

package/README.md

@@ -1,128 +1,152 @@
-# `@enos5/enos-vue-default`
-
-Shared Vue 3 UI components from Enos, packaged as the Default workspace inside the monorepo.
-
-## Requirements
-
-- Node.js 20+
-- npm
-
-## Install
-
-From the workspace root:
-
-```bash
-npm install
-```
-
-Build this package:
-
-```bash
-npm run build -w @enos5/enos-vue-default
-```
-
-## Use In Another Project
-
-Install the published package:
-
-```bash
-npm install @enos5/enos-vue-default
-```
-
-This package expects these peer dependencies in the consuming app:
-
-- `vue`
-- `@inertiajs/vue3` (`^2.0.0` or `^3.0.0`)
-- `@heroicons/vue`
-- `vue-i18n`
-
-Rich text support uses TinyMCE and is bundled as a regular dependency in this library. The component set mirrors the Jetstream package except for `ApplicationLogo`, `AuthenticationCard`, `Banner`, `NavGroup`, `NavLink`, `NavMenu`, and `ResponsiveNavLink`.
-
-You can register everything globally:
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import { EnosVueDefault } from '@enos5/enos-vue-default'
-
-createApp(App).use(EnosVueDefault).mount('#app')
-```
-
-Or import individual components:
-
-```ts
-import { Button, ColorPicker, TextInput } from '@enos5/enos-vue-default'
-```
-
-`ColorPicker` resolves its built-in UI labels through `vue-i18n` using the English copy as keys. If your app wants localized picker chrome, define translations for keys such as `Color`, `Selected color`, `Pick color from screen`, `Hue`, `Opacity`, `Hex value`, `Saturation and brightness for {color}`, and `Rainbow color area for {color}`.
-
-`DateInput` and `DateRangeInput` default to English locale behavior. Pass `locale` to override that, and for native browser date fields remember the final picker UI is still browser-controlled, with `lang` used as the locale hint.
-
-Styles are loaded automatically when you import the package entrypoint, so consumers do not have to remember a separate CSS import.
-
-If a consuming app wants earlier stylesheet loading during `npm run dev`, it can opt into the stable stylesheet entry explicitly:
-
-```ts
-import '@enos5/enos-vue-default/styles.css'
-```
-
-That explicit import is optional. It mainly improves dev-mode first paint and avoids importing from `dist` directly.
-
-## Table column controls
-
-`TableList` keeps its existing behavior unless the new controls are enabled:
-
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TableList } from '@enos5/enos-vue-default'
-
-const hiddenColumns = ref(['brand'])
-const columns = [
-  { key: 'name', label: 'Name', hideable: false },
-  { key: 'brand', label: 'Brand' },
-  { key: 'status', label: 'Status', sticky: 'right', width: '8rem' },
-]
-</script>
-
-<template>
-  <TableList
-    v-model:hidden-columns="hiddenColumns"
-    :columns="columns"
-    :data="rows"
-    column-visibility
-    sticky-actions
-  >
-    <template #actions="{ item }">
-      <!-- row actions -->
-    </template>
-  </TableList>
-</template>
-```
-
-- `sticky-actions` keeps the dedicated `actions` slot column visible at the right edge during horizontal scrolling, keeps multi-button groups on one line, and right-aligns the whole group.
-- `column.sticky: 'right'` (or `true`) pins a regular data column. A regular column can render custom buttons through its named slot, but it remains distinct from the dedicated `actions` slot column. Multiple sticky columns calculate their right offsets automatically.
-- `column-visibility` displays the built-in settings button and dialog.
-- `v-model:hidden-columns` controls the hidden column keys. Without the model, `column.hidden: true` supplies the initial internal state.
-- `column.hideable: false` omits a required column from the settings dialog.
-- Checkbox and “Show all” changes remain drafts until the user confirms with “OK”. Cancel, Escape, and backdrop dismissal discard the draft.
-- The `columnVisibility*` label props localize the button, title, description, “Show all”, apply, and cancel labels.
-
-`TableListForm` supports the same `sticky-actions` prop and `column.sticky: 'right'` behavior. Column visibility is intentionally limited to `TableList` so an actively edited field cannot disappear from an editable row.
-
-## Publish To npm
-
-Before publishing, build the package and verify the tarball:
-
-```bash
-npm run build -w @enos5/enos-vue-default
-npm pack --dry-run -w packages/default
-```
-
-Then bump the version in `packages/default/package.json`, commit the change, and publish the workspace:
-
-```bash
-npm publish -w packages/default --access public
-```
-
-The first public release of this package needs `--access public`. After the package exists on npm, subsequent publishes can use the same command.
+# `@enos5/enos-vue-default`
+
+Shared Vue 3 UI components from Enos, packaged as the Default workspace inside the monorepo.
+
+## Requirements
+
+- Node.js 20+
+- npm
+
+## Install
+
+From the workspace root:
+
+```bash
+npm install
+```
+
+Build this package:
+
+```bash
+npm run build -w @enos5/enos-vue-default
+```
+
+## Use In Another Project
+
+Install the published package:
+
+```bash
+npm install @enos5/enos-vue-default
+```
+
+This package expects these peer dependencies in the consuming app:
+
+- `vue`
+- `@inertiajs/vue3` (`^2.0.0` or `^3.0.0`)
+- `@heroicons/vue`
+- `vue-i18n`
+
+Rich text support uses TinyMCE and is bundled as a regular dependency in this library. The component set mirrors the Jetstream package except for `ApplicationLogo`, `AuthenticationCard`, `Banner`, `NavGroup`, `NavLink`, `NavMenu`, and `ResponsiveNavLink`.
+
+You can register everything globally:
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { EnosVueDefault } from '@enos5/enos-vue-default'
+
+createApp(App).use(EnosVueDefault).mount('#app')
+```
+
+Or import individual components:
+
+```ts
+import { Button, ColorPicker, TextInput } from '@enos5/enos-vue-default'
+```
+
+`ColorPicker` resolves its built-in UI labels through `vue-i18n` using the English copy as keys. If your app wants localized picker chrome, define translations for keys such as `Color`, `Selected color`, `Pick color from screen`, `Hue`, `Opacity`, `Hex value`, `Saturation and brightness for {color}`, and `Rainbow color area for {color}`.
+
+`DateInput` and `DateRangeInput` default to English locale behavior. Pass `locale` to override that, and for native browser date fields remember the final picker UI is still browser-controlled, with `lang` used as the locale hint.
+
+Styles are loaded automatically when you import the package entrypoint, so consumers do not have to remember a separate CSS import.
+
+If a consuming app wants earlier stylesheet loading during `npm run dev`, it can opt into the stable stylesheet entry explicitly:
+
+```ts
+import '@enos5/enos-vue-default/styles.css'
+```
+
+That explicit import is optional. It mainly improves dev-mode first paint and avoids importing from `dist` directly.
+
+## Table column controls
+
+`TableList` keeps its existing behavior unless the new controls are enabled:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { TableList } from '@enos5/enos-vue-default'
+
+const hiddenColumns = ref(['brand'])
+const columns = [
+  { key: 'name', label: 'Name', hideable: false },
+  { key: 'brand', label: 'Brand' },
+  { key: 'status', label: 'Status', sticky: 'right', width: '8rem' },
+]
+</script>
+
+<template>
+  <TableList
+    v-model:hidden-columns="hiddenColumns"
+    :columns="columns"
+    :data="rows"
+    column-visibility
+    sticky-actions
+  >
+    <template #actions="{ item }">
+      <!-- row actions -->
+    </template>
+  </TableList>
+</template>
+```
+
+- `sticky-actions` keeps the dedicated `actions` slot column visible at the right edge during horizontal scrolling, keeps multi-button groups on one line, and right-aligns the whole group.
+- `column.sticky: 'right'` (or `true`) pins a regular data column. A regular column can render custom buttons through its named slot, but it remains distinct from the dedicated `actions` slot column. Multiple sticky columns calculate their right offsets automatically.
+- `column-visibility` displays the built-in settings button and dialog.
+- `v-model:hidden-columns` controls the hidden column keys. Without the model, `column.hidden: true` supplies the initial internal state.
+- `column.hideable: false` omits a required column from the settings dialog.
+- Checkbox and “Show all” changes remain drafts until the user confirms with “OK”. Cancel, Escape, and backdrop dismissal discard the draft.
+- The `columnVisibility*` label props localize the button, title, description, “Show all”, apply, and cancel labels.
+
+`TableListForm` supports the same `sticky-actions` prop and `column.sticky: 'right'` behavior. Column visibility is intentionally limited to `TableList` so an actively edited field cannot disappear from an editable row.
+
+## Publish To npm
+
+Before publishing, build the package and verify the tarball:
+
+```bash
+npm run build -w @enos5/enos-vue-default
+npm pack --dry-run -w packages/default
+```
+
+Then bump the version in `packages/default/package.json`, commit the change, and publish the workspace:
+
+```bash
+npm publish -w packages/default --access public
+```
+
+The first public release of this package needs `--access public`. After the package exists on npm, subsequent publishes can use the same command.
+
+## Floating action hints
+
+`FloatingActionHint` is available in the Default package. It requires a unique `id`, a `label`, and a `description`. Bind the default slot’s `descriptionId` to the action’s `aria-describedby`. The hint opens on hover or focus, closes on Escape or leaving the action, and follows viewport resizing and container scrolling. Its content is teleported to `body` to avoid clipping by ancestor containers.
+
+```vue
+<script setup lang="ts">
+import { FloatingActionHint } from '@enos5/enos-vue-default'
+</script>
+
+<template>
+  <FloatingActionHint
+    id="save-action-hint"
+    label="Save"
+    description="Save your changes without leaving this page."
+  >
+    <template #default="{ descriptionId }">
+      <button type="button" :aria-describedby="descriptionId">Save</button>
+    </template>
+  </FloatingActionHint>
+</template>
+```
+
+A runnable usage example is available in `examples/FloatingActionHint.vue`.

package/dist/{code-Cm7MgQif.js → code-mFVfv-JF.js}

@@ -1,4 +1,4 @@
-import { ot as __commonJSMin } from "./plugin-TP7ra_6S.js";
+import { st as __commonJSMin } from "./plugin-CkWJbkrp.js";
 //#endregion
 //#region ../../node_modules/tinymce/plugins/code/index.js
 (/* @__PURE__ */ __commonJSMin((() => {
@@ -84,4 +84,4 @@ import { ot as __commonJSMin } from "./plugin-TP7ra_6S.js";
 })))();
 //#endregion
 
-//# sourceMappingURL=code-Cm7MgQif.js.map
+//# sourceMappingURL=code-mFVfv-JF.js.map

package/dist/{code-Cm7MgQif.js.map → code-mFVfv-JF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-Cm7MgQif.js","names":[],"sources":["../../../node_modules/tinymce/plugins/code/plugin.js","../../../node_modules/tinymce/plugins/code/index.js"],"sourcesContent":["/**\n * TinyMCE version 8.6.0 (2026-06-03)\n */\n\n(function () {\n    'use strict';\n\n    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');\n\n    const setContent = (editor, html) => {\n        // We get a lovely \"Wrong document\" error in IE 11 if we\n        // don't move the focus to the editor before creating an undo\n        // transaction since it tries to make a bookmark for the current selection\n        editor.focus();\n        editor.undoManager.transact(() => {\n            editor.setContent(html);\n        });\n        editor.selection.setCursorLocation();\n        editor.nodeChanged();\n    };\n    const getContent = (editor) => {\n        return editor.getContent({ source_view: true });\n    };\n\n    const open = (editor) => {\n        const editorContent = getContent(editor);\n        editor.windowManager.open({\n            title: 'Source Code',\n            size: 'large',\n            body: {\n                type: 'panel',\n                items: [\n                    {\n                        type: 'textarea',\n                        name: 'code',\n                        spellcheck: false,\n                    }\n                ]\n            },\n            buttons: [\n                {\n                    type: 'cancel',\n                    name: 'cancel',\n                    text: 'Cancel'\n                },\n                {\n                    type: 'submit',\n                    name: 'save',\n                    text: 'Save',\n                    primary: true\n                }\n            ],\n            initialData: {\n                code: editorContent\n            },\n            onSubmit: (api) => {\n                setContent(editor, api.getData().code);\n                api.close();\n            }\n        });\n    };\n\n    const register$1 = (editor) => {\n        editor.addCommand('mceCodeEditor', () => {\n            open(editor);\n        });\n    };\n\n    const register = (editor) => {\n        const onAction = () => editor.execCommand('mceCodeEditor');\n        editor.ui.registry.addButton('code', {\n            icon: 'sourcecode',\n            tooltip: 'Source code',\n            onAction\n        });\n        editor.ui.registry.addMenuItem('code', {\n            icon: 'sourcecode',\n            text: 'Source code',\n            onAction\n        });\n    };\n\n    var Plugin = () => {\n        global.add('code', (editor) => {\n            register$1(editor);\n            register(editor);\n            return {};\n        });\n    };\n\n    Plugin();\n    /** *****\n     * DO NOT EXPORT ANYTHING\n     *\n     * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE\n     *******/\n\n})();\n","// Exports the \"code\" plugin for usage with module loaders\n// Usage:\n//   CommonJS:\n//     require('tinymce/plugins/code')\n//   ES2015:\n//     import 'tinymce/plugins/code'\nrequire('./plugin.js');"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;CAIA,CAAC,WAAY;EACT;EAEA,IAAI,SAAS,QAAQ,KAAK,MAAM,QAAQ,uBAAuB;EAE/D,MAAM,cAAc,QAAQ,SAAS;GAIjC,OAAO,MAAM;GACb,OAAO,YAAY,eAAe;IAC9B,OAAO,WAAW,IAAI;GAC1B,CAAC;GACD,OAAO,UAAU,kBAAkB;GACnC,OAAO,YAAY;EACvB;EACA,MAAM,cAAc,WAAW;GAC3B,OAAO,OAAO,WAAW,EAAE,aAAa,KAAK,CAAC;EAClD;EAEA,MAAM,QAAQ,WAAW;GACrB,MAAM,gBAAgB,WAAW,MAAM;GACvC,OAAO,cAAc,KAAK;IACtB,OAAO;IACP,MAAM;IACN,MAAM;KACF,MAAM;KACN,OAAO,CACH;MACI,MAAM;MACN,MAAM;MACN,YAAY;KAChB,CACJ;IACJ;IACA,SAAS,CACL;KACI,MAAM;KACN,MAAM;KACN,MAAM;IACV,GACA;KACI,MAAM;KACN,MAAM;KACN,MAAM;KACN,SAAS;IACb,CACJ;IACA,aAAa,EACT,MAAM,cACV;IACA,WAAW,QAAQ;KACf,WAAW,QAAQ,IAAI,QAAQ,EAAE,IAAI;KACrC,IAAI,MAAM;IACd;GACJ,CAAC;EACL;EAEA,MAAM,cAAc,WAAW;GAC3B,OAAO,WAAW,uBAAuB;IACrC,KAAK,MAAM;GACf,CAAC;EACL;EAEA,MAAM,YAAY,WAAW;GACzB,MAAM,iBAAiB,OAAO,YAAY,eAAe;GACzD,OAAO,GAAG,SAAS,UAAU,QAAQ;IACjC,MAAM;IACN,SAAS;IACT;GACJ,CAAC;GACD,OAAO,GAAG,SAAS,YAAY,QAAQ;IACnC,MAAM;IACN,MAAM;IACN;GACJ,CAAC;EACL;EAEA,IAAI,eAAe;GACf,OAAO,IAAI,SAAS,WAAW;IAC3B,WAAW,MAAM;IACjB,SAAS,MAAM;IACf,OAAO,CAAC;GACZ,CAAC;EACL;EAEA,OAAO;;;;;;CAOX,GAAG"}
+{"version":3,"file":"code-mFVfv-JF.js","names":[],"sources":["../../../node_modules/tinymce/plugins/code/plugin.js","../../../node_modules/tinymce/plugins/code/index.js"],"sourcesContent":["/**\n * TinyMCE version 8.6.0 (2026-06-03)\n */\n\n(function () {\n    'use strict';\n\n    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');\n\n    const setContent = (editor, html) => {\n        // We get a lovely \"Wrong document\" error in IE 11 if we\n        // don't move the focus to the editor before creating an undo\n        // transaction since it tries to make a bookmark for the current selection\n        editor.focus();\n        editor.undoManager.transact(() => {\n            editor.setContent(html);\n        });\n        editor.selection.setCursorLocation();\n        editor.nodeChanged();\n    };\n    const getContent = (editor) => {\n        return editor.getContent({ source_view: true });\n    };\n\n    const open = (editor) => {\n        const editorContent = getContent(editor);\n        editor.windowManager.open({\n            title: 'Source Code',\n            size: 'large',\n            body: {\n                type: 'panel',\n                items: [\n                    {\n                        type: 'textarea',\n                        name: 'code',\n                        spellcheck: false,\n                    }\n                ]\n            },\n            buttons: [\n                {\n                    type: 'cancel',\n                    name: 'cancel',\n                    text: 'Cancel'\n                },\n                {\n                    type: 'submit',\n                    name: 'save',\n                    text: 'Save',\n                    primary: true\n                }\n            ],\n            initialData: {\n                code: editorContent\n            },\n            onSubmit: (api) => {\n                setContent(editor, api.getData().code);\n                api.close();\n            }\n        });\n    };\n\n    const register$1 = (editor) => {\n        editor.addCommand('mceCodeEditor', () => {\n            open(editor);\n        });\n    };\n\n    const register = (editor) => {\n        const onAction = () => editor.execCommand('mceCodeEditor');\n        editor.ui.registry.addButton('code', {\n            icon: 'sourcecode',\n            tooltip: 'Source code',\n            onAction\n        });\n        editor.ui.registry.addMenuItem('code', {\n            icon: 'sourcecode',\n            text: 'Source code',\n            onAction\n        });\n    };\n\n    var Plugin = () => {\n        global.add('code', (editor) => {\n            register$1(editor);\n            register(editor);\n            return {};\n        });\n    };\n\n    Plugin();\n    /** *****\n     * DO NOT EXPORT ANYTHING\n     *\n     * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE\n     *******/\n\n})();\n","// Exports the \"code\" plugin for usage with module loaders\n// Usage:\n//   CommonJS:\n//     require('tinymce/plugins/code')\n//   ES2015:\n//     import 'tinymce/plugins/code'\nrequire('./plugin.js');"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;CAIA,CAAC,WAAY;EACT;EAEA,IAAI,SAAS,QAAQ,KAAK,MAAM,QAAQ,uBAAuB;EAE/D,MAAM,cAAc,QAAQ,SAAS;GAIjC,OAAO,MAAM;GACb,OAAO,YAAY,eAAe;IAC9B,OAAO,WAAW,IAAI;GAC1B,CAAC;GACD,OAAO,UAAU,kBAAkB;GACnC,OAAO,YAAY;EACvB;EACA,MAAM,cAAc,WAAW;GAC3B,OAAO,OAAO,WAAW,EAAE,aAAa,KAAK,CAAC;EAClD;EAEA,MAAM,QAAQ,WAAW;GACrB,MAAM,gBAAgB,WAAW,MAAM;GACvC,OAAO,cAAc,KAAK;IACtB,OAAO;IACP,MAAM;IACN,MAAM;KACF,MAAM;KACN,OAAO,CACH;MACI,MAAM;MACN,MAAM;MACN,YAAY;KAChB,CACJ;IACJ;IACA,SAAS,CACL;KACI,MAAM;KACN,MAAM;KACN,MAAM;IACV,GACA;KACI,MAAM;KACN,MAAM;KACN,MAAM;KACN,SAAS;IACb,CACJ;IACA,aAAa,EACT,MAAM,cACV;IACA,WAAW,QAAQ;KACf,WAAW,QAAQ,IAAI,QAAQ,EAAE,IAAI;KACrC,IAAI,MAAM;IACd;GACJ,CAAC;EACL;EAEA,MAAM,cAAc,WAAW;GAC3B,OAAO,WAAW,uBAAuB;IACrC,KAAK,MAAM;GACf,CAAC;EACL;EAEA,MAAM,YAAY,WAAW;GACzB,MAAM,iBAAiB,OAAO,YAAY,eAAe;GACzD,OAAO,GAAG,SAAS,UAAU,QAAQ;IACjC,MAAM;IACN,SAAS;IACT;GACJ,CAAC;GACD,OAAO,GAAG,SAAS,YAAY,QAAQ;IACnC,MAAM;IACN,MAAM;IACN;GACJ,CAAC;EACL;EAEA,IAAI,eAAe;GACf,OAAO,IAAI,SAAS,WAAW;IAC3B,WAAW,MAAM;IACjB,SAAS,MAAM;IACf,OAAO,CAAC;GACZ,CAAC;EACL;EAEA,OAAO;;;;;;CAOX,GAAG"}

package/dist/components/FloatingActionHint.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description: string;
+};
+declare var __VLS_1: {
+    descriptionId: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/SidebarMenuButton.vue.d.ts

@@ -30,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     variant: "default" | "outline";
     href: string;
     as: "button" | "a" | "link";
+    tooltip: string;
     external: boolean;
     target: string;
     rel: string;
@@ -37,7 +38,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     asChild: boolean;
     active: boolean;
     isActive: boolean;
-    tooltip: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/{default-Cgs8Tahv.js → default-CXSE-CfC.js}

@@ -1,4 +1,4 @@
-import { ot as __commonJSMin } from "./plugin-TP7ra_6S.js";
+import { st as __commonJSMin } from "./plugin-CkWJbkrp.js";
 //#endregion
 //#region ../../node_modules/tinymce/icons/default/index.js
 (/* @__PURE__ */ __commonJSMin((() => {
@@ -273,4 +273,4 @@ import { ot as __commonJSMin } from "./plugin-TP7ra_6S.js";
 })))();
 //#endregion
 
-//# sourceMappingURL=default-Cgs8Tahv.js.map
+//# sourceMappingURL=default-CXSE-CfC.js.map