@xleddyl/443-components-vue 0.1.0 → 0.2.0

package/README.md

@@ -10,8 +10,8 @@ pnpm add @xleddyl/443-components-vue
 
 Optional integrations need their own peer dependencies, install only what you use:
 
-| Subpath           | Peer dependencies                                                                                                          |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Subpath                              | Peer dependencies                                                                                                          |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
 | `@xleddyl/443-components-vue/grid`   | `ag-grid-community`, `ag-grid-vue3`                                                                                        |
 | `@xleddyl/443-components-vue/editor` | `@tiptap/vue-3`, `@tiptap/starter-kit`, `@tiptap/pm`, `@tiptap/extension-placeholder`, `@tiptap/extension-character-count` |
 | `@xleddyl/443-components-vue/chart`  | `chart.js`, `vue-chartjs`                                                                                                  |
@@ -40,23 +40,29 @@ export default defineNuxtConfig({
 
 Every component is registered with the prefix (`Button.vue` becomes `<KButton>`) and every `use*` composable plus `toast` and `withLoading` is auto-imported.
 
-| Option           | Default         | Effect                                                                                                                                                                                                       |
-| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`         | `'K'`           | Component name prefix.                                                                                                                                                                                       |
-| `css`            | `true`          | Injects `@xleddyl/443-components-vue/style.css` (and the CSS of enabled optional groups).                                                                                                                                       |
-| `composables`    | `true`          | Auto-imports the composables.                                                                                                                                                                                |
-| `global`         | `false`         | Puts `k-root` and `data-theme` on `<html>` for apps that are dashboard only.                                                                                                                                 |
-| `theme.cookie`   | `'k-theme'`     | Cookie that stores the theme preference (SSR safe, no flash).                                                                                                                                                |
-| `theme.default`  | `'system'`      | `'light'`, `'dark'` or `'system'`.                                                                                                                                                                           |
-| `preset.default` | `'default'`     | Built-in preset: `'default'`, `'suedtirol'` or `'spotfish'`.                                                                                                                                                 |
-| `preset.cookie`  | `'k-preset'`    | Cookie that stores the preset preference (SSR safe, no flash).                                                                                                                                               |
-| `fonts`          | `true`          | Injects the self-hosted fonts of `preset.default` (`true`), of a list of presets (`['default', 'suedtirol']`) or none (`false`). Install the `@fontsource-variable/*` packages they need.                    |
-| `icons.dir`      | none            | Folder of `.svg` files registered as icons by file name (watched in dev).                                                                                                                                    |
-| `grid`           | `false`         | Registers `KDataGrid` and `KGridToolbar` and injects their CSS.                                                                                                                                              |
-| `editor`         | `false`         | Registers `KRichTextEditor` and injects its CSS.                                                                                                                                                             |
-| `chart`          | `false`         | Registers `KChartPanel`, `KChartLegend`, `KLineChart`, `KBarChart`, `KDoughnutChart` and injects their CSS.                                                                                                  |
-| `layouts`        | `false`         | Registers the ready Nuxt layouts `k-dashboard` and `k-auth` (configured from `app.config.ts`, see [Layouts](#layouts-and-page-templates)). Pass `{ dashboard: 'admin', auth: false }` to rename or skip one. |
-| `cssTarget`      | modern browsers | Sets `vite.build.cssTarget` when the host did not, so Lightning CSS keeps `light-dark()`. Pass `false` to leave the build target alone.                                                                      |
+| Option                    | Default                                   | Effect                                                                                                                                                                                                                                                                                   |
+| ------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `prefix`                  | `'K'`                                     | Component name prefix.                                                                                                                                                                                                                                                                   |
+| `css`                     | `true`                                    | Injects `@xleddyl/443-components-vue/style.css` (and the CSS of enabled optional groups).                                                                                                                                                                                                |
+| `cssLayers`               | `'theme, base, k, components, utilities'` | Cascade layer order declared before any other CSS. The library layer `k` sits after the `theme` and `base` layers of Tailwind (so preflight does not reset components) and before `components` and `utilities` (so host classes win). `false` declares nothing. See [Scoping](#scoping). |
+| `locale`                  | `'en'`                                    | Language of the built-in copy: `'en'`, `'it'`, or any code completed with `messages`. With `@nuxtjs/i18n` the current i18n locale wins. See [Languages](#languages).                                                                                                                     |
+| `messages`                | `{}`                                      | Overrides per locale code, for example `{ it: { common: { cancel: 'Indietro' } } }`.                                                                                                                                                                                                     |
+| `composables`             | `true`                                    | Auto-imports the composables.                                                                                                                                                                                                                                                            |
+| `global`                  | `false`                                   | Puts `k-root` and `data-theme` on `<html>` for apps that are dashboard only.                                                                                                                                                                                                             |
+| `theme.cookie`            | `'k-theme'`                               | Cookie that stores the theme preference (SSR safe, no flash).                                                                                                                                                                                                                            |
+| `theme.default`           | `'system'`                                | `'light'`, `'dark'` or `'system'`.                                                                                                                                                                                                                                                       |
+| `preset.default`          | `'default'`                               | Built-in preset: `'default'`, `'suedtirol'` or `'spotfish'`.                                                                                                                                                                                                                             |
+| `preset.cookie`           | `'k-preset'`                              | Cookie that stores the preset preference (SSR safe, no flash).                                                                                                                                                                                                                           |
+| `fonts`                   | `true`                                    | Injects the self-hosted fonts of `preset.default` (`true`), of a list of presets (`['default', 'suedtirol']`) or none (`false`). Install the `@fontsource-variable/*` packages they need.                                                                                                |
+| `icons.dir`               | none                                      | Folder of `.svg` files registered as icons by file name (watched in dev).                                                                                                                                                                                                                |
+| `icons.collections`       | `[]`                                      | Iconify collections usable as `prefix:name`, for example `['lucide', { prefix: 'heroicons', exclude: ['*-solid', '*-20-*', '*-16-*'] }]`. See [Icons](#icons).                                                                                                                           |
+| `icons.defaultCollection` | none                                      | Collection tried for names without a prefix that are not registered or built in.                                                                                                                                                                                                         |
+| `icons.aliases`           | `{}`                                      | Replaces any icon, built-ins included: `{ 'x-mark': 'lucide:x', logo: 'brand-logo' }` (a collection icon or a file of `icons.dir`).                                                                                                                                                      |
+| `grid`                    | `false`                                   | Registers `KDataGrid` and `KGridToolbar` and injects their CSS.                                                                                                                                                                                                                          |
+| `editor`                  | `false`                                   | Registers `KRichTextEditor` and injects its CSS.                                                                                                                                                                                                                                         |
+| `chart`                   | `false`                                   | Registers `KChartPanel`, `KChartLegend`, `KLineChart`, `KBarChart`, `KDoughnutChart` and injects their CSS.                                                                                                                                                                              |
+| `layouts`                 | `false`                                   | Registers the ready Nuxt layouts `k-dashboard` and `k-auth` (configured from `app.config.ts`, see [Layouts](#layouts-and-page-templates)). Pass `{ dashboard: 'admin', auth: false }` to rename or skip one.                                                                             |
+| `cssTarget`               | modern browsers                           | Sets `vite.build.cssTarget` when the host did not, so Lightning CSS keeps `light-dark()`. Pass `false` to leave the build target alone.                                                                                                                                                  |
 
 The module also adds the optional peer dependencies that are installed in the host to `vite.optimizeDeps.include`, so the first visit to a page with a grid, editor or chart does not trigger a dependency reload.
 
@@ -86,6 +92,8 @@ import { Button, OverlayHost, Root, toast } from '@xleddyl/443-components-vue'
 </template>
 ```
 
+Language and icon collections without Nuxt: `app.use(createLocale(it))` (or `createLocale(computed(() => ...))` to follow your own i18n), and `registerIconCollection('lucide', () => import('@iconify-json/lucide/icons.json'))`.
+
 Without Nuxt the theme and preset preferences are kept in `localStorage`; pass your own stores with `app.use(createTheme(ref('dark')))` and `app.use(createPreset(ref('suedtirol')))`. Import the fonts of the presets you use yourself (see [Presets](#presets)). Optional groups: `import { DataGrid } from '@xleddyl/443-components-vue/grid'` plus `import '@xleddyl/443-components-vue/grid/style.css'` (same for `editor` and `chart`). With a router, provide the link component once: `app.use(createLinkComponent(RouterLink))`.
 
 Vite 8 minifies CSS with Lightning CSS. Set `build.cssTarget` to browsers that support `light-dark()` (for example `['chrome123', 'edge123', 'firefox128', 'safari17.5']`) to keep the native function. See the theming notes below for what changes when it is transpiled.
@@ -159,9 +167,62 @@ Semantic color props are always called `tone` and accept `'neutral' | 'accent' |
 - The reset only matches `.k-root` and its descendants, wrapped in `:where()` (zero specificity). Markup outside a root keeps browser defaults.
 - All classes and keyframes are `k-` prefixed.
 - Everything sits in `@layer k.tokens, k.base, k.components, k.utilities`. Any unlayered host CSS wins, so overrides need no `!important`. The flip side: unlayered host element selectors (`button { ... }`) also reach library elements. Put global element styles in a layer or scope them.
+- Tailwind 4 puts its preflight in the `base` layer. The Nuxt module declares `@layer theme, base, k, components, utilities` before any stylesheet (option `cssLayers`), so preflight never resets library components while Tailwind utilities still win on them. Without Nuxt, put the same statement at the top of your first stylesheet. A host reset of your own belongs in `base` (or any layer declared before `k`).
 - The one exception is the dashboard frame: while an `AppShell` (`.k-shell`) is on the page, or with `k.global`, `html` and `body` get `overscroll-behavior: none` and `overflow-x: clip`, so the page never rubber bands or scrolls sideways. Only the content panel and the sidebar list scroll, with `overscroll-behavior: contain`.
 - Overlays stay inside the root in the DOM (native top layer through `<dialog>` and `popover`), so they inherit tokens.
 
+## Icons
+
+`<KIcon name="..." />` resolves a name in this order:
+
+1. Icons registered with `createIcons()`, `provideIcons()`, `k.icons.dir` or `k.icons.aliases`. A registered name replaces a built-in one, so `k.icons.aliases: { 'x-mark': 'lucide:x' }` changes the close icon of every component.
+2. The built-in Heroicons outline set (`builtinIcons`, the icons the components use).
+3. Iconify collections, written `prefix:name` (`heroicons:newspaper`, `lucide:file-text`). Names without a prefix also try `k.icons.defaultCollection`.
+
+Collections come from the `@iconify-json/*` packages (or `@iconify/json`), installed in the host:
+
+```sh
+pnpm add -D @iconify-json/heroicons @iconify-json/lucide
+```
+
+```ts
+k: {
+   icons: {
+      collections: ['lucide', { prefix: 'heroicons', exclude: ['*-solid', '*-20-*', '*-16-*'] }],
+      defaultCollection: 'heroicons',
+   },
+}
+```
+
+Each collection is a separate chunk loaded the first time one of its icons renders. The server loads every collection, records which ones a page used and the client loads those before hydration, so server rendered icons never flash. `include` and `exclude` take `*` wildcards and keep a collection small.
+
+## Languages
+
+The components have no hardcoded copy. Every label, placeholder, status text and validation message comes from a typed catalog (`KMessages`), with English (`en`) and Italian (`it`) built in. Plurals are `'one | other'` templates with a `{count}` parameter.
+
+```ts
+k: { locale: 'it', messages: { it: { common: { cancel: 'Indietro' } } } }
+```
+
+- With `@nuxtjs/i18n` the module follows the current i18n locale (a `de-CH` locale uses `de` overrides, then English).
+- A new language is a full `messages[code]` object, or `defineLocale({ code: 'de', messages: {...} })` passed to `createLocale()` / `provideLocale()` in plain Vue.
+- `useLocale()` returns `{ locale, t }` for your own components (`t('common.cancel')`).
+- The `*Label` and `*Text` props of each component still override a single instance.
+
+## Forms
+
+`useForm({ schema })` takes field definitions (`initial`, `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`). Any [Standard Schema](https://standardschema.dev) library (Zod 4, Valibot, ArkType) also works, per field (`schema` in the definition) or for the whole form (`validator`, issues are matched to fields by their first path segment):
+
+```ts
+const form = useForm({
+   schema: { email: { initial: '' }, password: { initial: '' } },
+   validator: z.object({ email: z.email(), password: z.string().min(12) }),
+   onSubmit: (values) => save(values),
+})
+```
+
+Built-in messages follow the active language. `messages` overrides them for one form.
+
 ## Components
 
 | Group     | Components                                                                                                                                                                                                                      |
@@ -220,7 +281,7 @@ await run(() => api.save(form))
 ```
 
 - Toasts stack behind the newest one (up to `max`, default 4) and expand on hover or focus, which also pauses their timers. Each tone has its own icon; `description` takes a string or a list of lines. `dismissible: false` hides the close button, `duration: Infinity` keeps a toast open, `progress` on the toaster shows a timer bar.
-- `useConfirm()` resolves `true` or `false`, `useAlert()` resolves when closed, `usePrompt()` resolves the string or `null`. Prompt options: `label`, `placeholder`, `value`, `type`, `required`, `requiredText`, `validate(value)` (return an error message to keep the dialog open), `onConfirm(value)`. Without a host they fall back to the native browser dialogs.
+- `useConfirm()` resolves `true` or `false`, `useAlert()` resolves when closed, `usePrompt()` resolves the string or `null`. `useConfirm()` and `useAlert()` also take `body`, a component rendered under the description (for example a list of the pages that use a file). Prompt options: `label`, `placeholder`, `value`, `type`, `required`, `requiredText`, `validate(value)` (return an error message to keep the dialog open), `onConfirm(value)`. Without a host they fall back to the native browser dialogs.
 - `modal.open(Component, props, options)` returns a promise for the result plus `id`, `close(result)` and `update(props)`. Options: `title`, `description`, `size`, `side` (drawers), `sheet`, `flush`, `dismissible`, `hideClose`, `closeLabel`, `as: 'modal' | 'drawer'`. Inside the component, `useModalContext<R>()` gives `close(result?)` and `setLoading(boolean)`. A component can open another modal on top; Escape and the backdrop resolve `undefined`. `modal.close(id?, result?)` and `modal.closeAll()` close from outside.
 - `useLoading()` is ref counted: `start()` returns a stop function, `wrap(promise | fn, options?)` and `withLoading(fn)` stop when settled, `active`, `count` and `blocking` are refs. The host shows a top progress bar after `delay`, and a blocking screen (a modal dialog, so the page is inert) for tasks started with `blocking: true`. `useLoadingState({ global? })` returns a scoped `{ loading, error, run }` for buttons and forms.
 

package/dist/chart/BarChart.vue.d.ts

@@ -20,7 +20,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -66,7 +66,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -75,7 +75,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -223,7 +223,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -269,7 +269,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -278,7 +278,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/chart/ChartLegend.vue.d.ts

@@ -3,14 +3,16 @@ declare const __VLS_export: import("vue").DefineComponent<{
     items: ChartLegendItem[];
     position?: ChartLegendPosition;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -118,7 +120,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -127,7 +129,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -163,7 +165,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -172,7 +174,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -185,7 +186,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
@@ -199,14 +199,16 @@ declare const __VLS_export: import("vue").DefineComponent<{
     items: ChartLegendItem[];
     position?: ChartLegendPosition;
     key?: PropertyKey | undefined;
-    ref?: import("vue").VNodeRef | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    style?: import("vue").StyleValue;
+    results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    style?: import("vue").StyleValue;
-    title?: string | undefined | undefined;
     onCopy?: ((payload: ClipboardEvent) => void) | undefined;
     onCut?: ((payload: ClipboardEvent) => void) | undefined;
     onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -314,7 +316,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -323,7 +325,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
     'aria-labelledby'?: string | undefined | undefined;
@@ -359,7 +361,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
@@ -368,7 +370,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     resource?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
@@ -381,7 +382,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     itemtype?: string | undefined | undefined;
     itemid?: string | undefined | undefined;
     itemref?: string | undefined | undefined;
-    results?: (string | number) | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
     inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;

package/dist/chart/ChartPanel.vue

@@ -18,12 +18,12 @@
             class="k-chart-skeleton"
             :style="{ height }"
             role="status"
-            :aria-label="loadingText"
+            :aria-label="loadingLabel"
          >
             <span v-for="bar in skeletonBars" :key="bar" :style="{ height: `${bar}%` }" />
          </div>
          <div v-else-if="empty" class="k-chart-empty" :style="{ height }">
-            <slot name="empty">{{ emptyText }}</slot>
+            <slot name="empty">{{ emptyLabel }}</slot>
          </div>
          <slot v-else />
       </div>
@@ -32,16 +32,20 @@
 </template>
 
 <script setup>
-import { useId } from "vue";
-defineProps({
+import { computed, useId } from "vue";
+import { useLocale } from "../composables/useLocale";
+const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   loading: { type: Boolean, required: false },
   empty: { type: Boolean, required: false },
-  emptyText: { type: String, required: false, default: "No data to show" },
-  loadingText: { type: String, required: false, default: "Loading chart" },
+  emptyText: { type: String, required: false },
+  loadingText: { type: String, required: false },
   height: { type: String, required: false, default: "16rem" }
 });
+const { t } = useLocale();
+const emptyLabel = computed(() => props.emptyText ?? t("chart.empty"));
+const loadingLabel = computed(() => props.loadingText ?? t("chart.loading"));
 const titleId = useId();
 const skeletonBars = [42, 68, 54, 86, 62, 74, 48, 92, 58, 70, 52, 80];
 </script>

package/dist/chart/ChartPanel.vue.d.ts

@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -72,7 +72,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -81,7 +81,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -226,7 +226,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -271,7 +271,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -280,7 +280,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -410,8 +410,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     height: string;
-    emptyText: string;
-    loadingText: 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/chart/ChartSummary.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -62,7 +62,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +71,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -216,7 +216,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -262,7 +262,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -271,7 +271,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/chart/DoughnutChart.vue.d.ts

@@ -24,7 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -70,7 +70,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -79,7 +79,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -227,7 +227,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -273,7 +273,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "location" | "time" | (boolean | "true" | "false") | "page" | "step" | "date" | undefined;
+    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -282,7 +282,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;