@alfakit/vue 0.1.1 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @alfakit/vue
 
+## 0.1.6
+
+### Patch Changes
+
+- Released with AlfaKit 0.1.6 (the npm and PHP versions now match). Fixes from the full verification in React, Vue and Svelte: starter-kit copilot, dashboard widgets and discovered components, per-item form errors, stable template schemas in new blocks, CSP nonces, WCAG AA badge contrast, plural kanban counts and more (see the AlfaKit changelog for 0.1.6).
+- Updated dependencies
+  - @alfakit/core@0.1.6
+
+## 0.1.2
+
+### Patch Changes
+
+- Fixes from end-to-end QA in React, Vue and Svelte: modal field ids, errors in hidden tabs, per-row action spinners, one-time-code paste, RTL fixes (colours, key bindings, calendar), localised file sizes and named upload buttons, select placeholders, single toasts in starter kits, readable tab query values, enum group titles, tenant menu labels, Svelte hydration gate, plugin styles in starter-kit mode, and more (see the AlfaKit changelog for 0.1.2).
+- Updated dependencies
+  - @alfakit/core@0.1.2
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/AlfakitRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlfakitRoot.js","names":["_sfc_main","AlfakitRoot_vue_vue_type_script_setup_true_lang_default","AlfakitRoot_default"],"sources":["../src/AlfakitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  applyDocumentLocale,\n  applyPanelTheme,\n  PANEL_TOAST_OFFSET,\n  resolveToastPosition,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { ConfigProvider } from 'reka-ui'\nimport { computed, watch } from 'vue'\nimport ActionModals from './components/actions/ActionModals.vue'\nimport DevToolsSlot from './components/dev-tools/DevToolsSlot.vue'\nimport FlashToasts from './components/notifications/FlashToasts.vue'\nimport RealtimeNotifications from './components/notifications/RealtimeNotifications.vue'\nimport ImpersonationBanner from './components/panel/ImpersonationBanner.vue'\nimport PwaManager from './components/panel/PwaManager.vue'\nimport SchemaContractGuard from './components/panel/SchemaContractGuard.vue'\nimport Toaster from './components/ui/Toaster.vue'\nimport TooltipProvider from './components/ui/TooltipProvider.vue'\nimport { useAlfakit } from './context'\n\n/**\n * Persistent layout rendered inside Inertia's page tree, so modals and toasts can read page\n * props through `usePage()`. It follows the current page: the reading direction for reka-ui\n * primitives, modals and toasts.\n */\n/** Starter kit mode: Alfakit's toaster gets an id so the host's id-less one never doubles its toasts. */\ndefineProps<{ toasterId?: string }>()\n\nconst page = usePage<AlfakitPageProps>()\nconst { translator, registry } = useAlfakit()\n\n// Replace with createAlfakit({ components: { 'panel:impersonation-banner': … } }).\nconst impersonationBanner = registry.resolve('panel:impersonation-banner') ?? ImpersonationBanner\n\nconst panel = computed(() => page.props.alfakit as AlfakitPageProps['alfakit'] | undefined)\nconst localization = computed(() => panel.value?.localization)\nconst direction = computed(() => localization.value?.direction ?? 'ltr')\n\n// Every visit (including the redirect after a language switch, which is a POST + redirect\n// and so not a plain navigation) may carry new strings: update the translator synchronously,\n// before children re-render.\nwatch(\n  () => [panel.value?.translations, localization.value?.tag] as const,\n  ([translations, tag]) => {\n    if (!panel.value) return\n\n    translator.setTranslations(translations ?? {})\n    translator.setLocale(tag ?? 'en')\n  },\n  { immediate: true, flush: 'sync' },\n)\n\nwatch(localization, (value) => applyDocumentLocale(value), { immediate: true })\nwatch(panel, (value) => applyPanelTheme(value), { immediate: true })\n</script>\n\n<template>\n  <ConfigProvider :dir=\"direction\">\n    <TooltipProvider :delay-duration=\"0\">\n      <SchemaContractGuard :panel=\"panel\">\n        <slot />\n      </SchemaContractGuard>\n      <ActionModals />\n      <FlashToasts />\n      <RealtimeNotifications />\n      <!-- `Panel::pwa()`: service worker and the \"new version\" toast. -->\n      <PwaManager />\n      <!-- Schema inspector: renders (and loads its code) only with `alfakitDevTools`. -->\n      <DevToolsSlot />\n      <component\n        :is=\"impersonationBanner\"\n        v-if=\"panel?.impersonation\"\n        :impersonation=\"panel.impersonation\"\n      />\n      <Toaster\n        :id=\"toasterId\"\n        :position=\"resolveToastPosition(panel?.toastPosition, direction)\"\n        :offset=\"PANEL_TOAST_OFFSET\"\n        :mobile-offset=\"PANEL_TOAST_OFFSET\"\n        :dir=\"direction\"\n        rich-colors\n        close-button\n      />\n    </TooltipProvider>\n  </ConfigProvider>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AlfakitRoot.js","names":["_sfc_main","AlfakitRoot_vue_vue_type_script_setup_true_lang_default","AlfakitRoot_default"],"sources":["../src/AlfakitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  applyDocumentLocale,\n  applyPanelTheme,\n  PANEL_TOAST_OFFSET,\n  resolveToastPosition,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { ConfigProvider } from 'reka-ui'\nimport { computed, watch } from 'vue'\nimport ActionModals from './components/actions/ActionModals.vue'\nimport DevToolsSlot from './components/dev-tools/DevToolsSlot.vue'\nimport FlashToasts from './components/notifications/FlashToasts.vue'\nimport RealtimeNotifications from './components/notifications/RealtimeNotifications.vue'\nimport ImpersonationBanner from './components/panel/ImpersonationBanner.vue'\nimport PwaManager from './components/panel/PwaManager.vue'\nimport SchemaContractGuard from './components/panel/SchemaContractGuard.vue'\nimport Toaster from './components/ui/Toaster.vue'\nimport TooltipProvider from './components/ui/TooltipProvider.vue'\nimport { useAlfakit } from './context'\n\n/**\n * Persistent layout rendered inside Inertia's page tree, so modals and toasts can read page\n * props through `usePage()`. It follows the current page: the reading direction for reka-ui\n * primitives, modals and toasts.\n */\n/** Starter kit mode: Alfakit's toaster gets an id so the host's id-less one never doubles its toasts. */\ndefineProps<{ toasterId?: string }>()\n\nconst page = usePage<AlfakitPageProps>()\nconst { translator, registry } = useAlfakit()\n\n// Replace with createAlfakit({ components: { 'panel:impersonation-banner': … } }).\nconst impersonationBanner = registry.resolve('panel:impersonation-banner') ?? ImpersonationBanner\n\nconst panel = computed(() => page.props.alfakit as AlfakitPageProps['alfakit'] | undefined)\nconst localization = computed(() => panel.value?.localization)\nconst direction = computed(() => localization.value?.direction ?? 'ltr')\n\n// Every visit (including the redirect after a language switch, which is a POST + redirect\n// and so not a plain navigation) may carry new strings: update the translator synchronously,\n// before children re-render.\nwatch(\n  () => [panel.value?.translations, localization.value?.tag] as const,\n  ([translations, tag]) => {\n    if (!panel.value) return\n\n    translator.setTranslations(translations ?? {})\n    translator.setLocale(tag ?? 'en')\n  },\n  { immediate: true, flush: 'sync' },\n)\n\n// Starter kit mode: the host app owns `<html lang dir>` (its own pages and layout are not\n// mirrored); `AlfakitStarterKitRoot` puts the direction on Alfakit's own root element.\nwatch(\n  localization,\n  (value) => {\n    if (panel.value?.starterKit !== true) applyDocumentLocale(value)\n  },\n  { immediate: true },\n)\nwatch(panel, (value) => applyPanelTheme(value), { immediate: true })\n</script>\n\n<template>\n  <ConfigProvider :dir=\"direction\">\n    <TooltipProvider :delay-duration=\"0\">\n      <SchemaContractGuard :panel=\"panel\">\n        <slot />\n      </SchemaContractGuard>\n      <ActionModals />\n      <FlashToasts />\n      <RealtimeNotifications />\n      <!-- `Panel::pwa()`: service worker and the \"new version\" toast. -->\n      <PwaManager />\n      <!-- Schema inspector: renders (and loads its code) only with `alfakitDevTools`. -->\n      <DevToolsSlot />\n      <component\n        :is=\"impersonationBanner\"\n        v-if=\"panel?.impersonation\"\n        :impersonation=\"panel.impersonation\"\n      />\n      <Toaster\n        :id=\"toasterId\"\n        :position=\"resolveToastPosition(panel?.toastPosition, direction)\"\n        :offset=\"PANEL_TOAST_OFFSET\"\n        :mobile-offset=\"PANEL_TOAST_OFFSET\"\n        :dir=\"direction\"\n        rich-colors\n        close-button\n      />\n    </TooltipProvider>\n  </ConfigProvider>\n</template>\n"],"mappings":""}

package/dist/AlfakitRoot.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlfakitRoot.vue.d.ts","sourceRoot":"","sources":["../src/AlfakitRoot.vue"],"names":[],"mappings":"AA+GA;;;;GAIG;AACH,yGAAyG;AACzG,KAAK,WAAW,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAqI1C,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAiChD,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"AlfakitRoot.vue.d.ts","sourceRoot":"","sources":["../src/AlfakitRoot.vue"],"names":[],"mappings":"AAuHA;;;;GAIG;AACH,yGAAyG;AACzG,KAAK,WAAW,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA6I1C,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAiChD,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/AlfakitRoot.vue_vue_type_script_setup_true_lang.js

@@ -23,7 +23,9 @@ var D = /*@__PURE__*/ y({
 		}, {
 			immediate: !0,
 			flush: "sync"
-		}), w(M, (e) => d(e), { immediate: !0 }), w(j, (e) => f(e), { immediate: !0 }), (e, a) => (b(), g(C(E), { dir: N.value }, {
+		}), w(M, (e) => {
+			j.value?.starterKit !== !0 && d(e);
+		}, { immediate: !0 }), w(j, (e) => f(e), { immediate: !0 }), (e, a) => (b(), g(C(E), { dir: N.value }, {
 			default: T(() => [v(n, { "delay-duration": 0 }, {
 				default: T(() => [
 					v(l, { panel: j.value }, {

package/dist/AlfakitRoot.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlfakitRoot.vue_vue_type_script_setup_true_lang.js","names":["ImpersonationBanner","_openBlock","_createBlock","_unref","_withCtx","_createVNode","TooltipProvider","SchemaContractGuard","_renderSlot","ActionModals","FlashToasts","RealtimeNotifications","PwaManager","DevToolsSlot","_resolveDynamicComponent","_createCommentVNode","Toaster","ActionModals_default","TooltipProvider_default","FlashToasts_default","RealtimeNotifications_default","ImpersonationBanner_default","PwaManager_default","Toaster_default","DevToolsSlot_default","SchemaContractGuard_default","AlfakitRoot_vue_vue_type_script_setup_true_lang_default","page","usePage","useAlfakit","impersonationBanner","registry","panel","computed","localization","direction","watch","translations","tag","translator","applyDocumentLocale","value","applyPanelTheme","openBlock","createBlock","unref","ConfigProvider","withCtx","createVNode","renderSlot","_ctx","resolveDynamicComponent","createCommentVNode","__props","resolveToastPosition","PANEL_TOAST_OFFSET"],"sources":["../src/AlfakitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  applyDocumentLocale,\n  applyPanelTheme,\n  PANEL_TOAST_OFFSET,\n  resolveToastPosition,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { ConfigProvider } from 'reka-ui'\nimport { computed, watch } from 'vue'\nimport ActionModals from './components/actions/ActionModals.vue'\nimport DevToolsSlot from './components/dev-tools/DevToolsSlot.vue'\nimport FlashToasts from './components/notifications/FlashToasts.vue'\nimport RealtimeNotifications from './components/notifications/RealtimeNotifications.vue'\nimport ImpersonationBanner from './components/panel/ImpersonationBanner.vue'\nimport PwaManager from './components/panel/PwaManager.vue'\nimport SchemaContractGuard from './components/panel/SchemaContractGuard.vue'\nimport Toaster from './components/ui/Toaster.vue'\nimport TooltipProvider from './components/ui/TooltipProvider.vue'\nimport { useAlfakit } from './context'\n\n/**\n * Persistent layout rendered inside Inertia's page tree, so modals and toasts can read page\n * props through `usePage()`. It follows the current page: the reading direction for reka-ui\n * primitives, modals and toasts.\n */\n/** Starter kit mode: Alfakit's toaster gets an id so the host's id-less one never doubles its toasts. */\ndefineProps<{ toasterId?: string }>()\n\nconst page = usePage<AlfakitPageProps>()\nconst { translator, registry } = useAlfakit()\n\n// Replace with createAlfakit({ components: { 'panel:impersonation-banner': … } }).\nconst impersonationBanner = registry.resolve('panel:impersonation-banner') ?? ImpersonationBanner\n\nconst panel = computed(() => page.props.alfakit as AlfakitPageProps['alfakit'] | undefined)\nconst localization = computed(() => panel.value?.localization)\nconst direction = computed(() => localization.value?.direction ?? 'ltr')\n\n// Every visit (including the redirect after a language switch, which is a POST + redirect\n// and so not a plain navigation) may carry new strings: update the translator synchronously,\n// before children re-render.\nwatch(\n  () => [panel.value?.translations, localization.value?.tag] as const,\n  ([translations, tag]) => {\n    if (!panel.value) return\n\n    translator.setTranslations(translations ?? {})\n    translator.setLocale(tag ?? 'en')\n  },\n  { immediate: true, flush: 'sync' },\n)\n\nwatch(localization, (value) => applyDocumentLocale(value), { immediate: true })\nwatch(panel, (value) => applyPanelTheme(value), { immediate: true })\n</script>\n\n<template>\n  <ConfigProvider :dir=\"direction\">\n    <TooltipProvider :delay-duration=\"0\">\n      <SchemaContractGuard :panel=\"panel\">\n        <slot />\n      </SchemaContractGuard>\n      <ActionModals />\n      <FlashToasts />\n      <RealtimeNotifications />\n      <!-- `Panel::pwa()`: service worker and the \"new version\" toast. -->\n      <PwaManager />\n      <!-- Schema inspector: renders (and loads its code) only with `alfakitDevTools`. -->\n      <DevToolsSlot />\n      <component\n        :is=\"impersonationBanner\"\n        v-if=\"panel?.impersonation\"\n        :impersonation=\"panel.impersonation\"\n      />\n      <Toaster\n        :id=\"toasterId\"\n        :position=\"resolveToastPosition(panel?.toastPosition, direction)\"\n        :offset=\"PANEL_TOAST_OFFSET\"\n        :mobile-offset=\"PANEL_TOAST_OFFSET\"\n        :dir=\"direction\"\n        rich-colors\n        close-button\n      />\n    </TooltipProvider>\n  </ConfigProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA8BA,IAAM2B,IAAOC,EAA0B,GACjC,EAAE,eAAY,gBAAaC,EAAW,GAGtCC,IAAsBC,EAAS,QAAQ,4BAA4B,KAAK/B,GAExEgC,IAAQC,QAAeN,EAAK,MAAM,OAAkD,GACpFO,IAAeD,QAAeD,EAAM,OAAO,YAAY,GACvDG,IAAYF,QAAeC,EAAa,OAAO,aAAa,KAAK;SAKvEE,QACQ,CAACJ,EAAM,OAAO,cAAcE,EAAa,OAAO,GAAG,IACxD,CAACG,GAAcC,OAAS;GACvB,AAAKN,EAAM,UAEXO,EAAW,gBAAgBF,KAAgB,CAAC,CAAC,GAC7CE,EAAW,UAAUD,KAAO,IAAI;EAClC,GACA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC,GAEAF,EAAMF,IAAe,MAAUM,EAAoBC,CAAK,GAAG,EAAE,WAAW,GAAK,CAAC,GAC9EL,EAAMJ,IAAQ,MAAUU,EAAgBD,CAAK,GAAG,EAAE,WAAW,GAAK,CAAC,cAIjExC,EAAA,GAAAC,EA2BiBC,EAAA2C,CAAA,GAAA,EA3BA,KAAKX,EAAA,MAAS,GAAA;GAC7B,SAAA/B,QAyBkB,CAzBlBC,EAyBkBC,GAAA,EAzBA,kBAAgB,EAAC,GAAA;IACjC,SAAAF,QAEsB;KAFtBC,EAEsBE,GAAA,EAFA,OAAOyB,EAAA,MAAK,GAAA;MAChC,SAAA5B,QAAQ,CAARI,EAAQ0C,EAAA,QAAA,SAAA,CAAA,CAAA;;;KAEV7C,EAAgBI,CAAA;KAChBJ,EAAeK,CAAA;KACfL,EAAyBM,CAAA;KAEzBN,EAAcO,CAAA;KAEdP,EAAgBQ,CAAA;KAGRmB,EAAA,OAAO,iBAFf/B,EAAA,GAAAC,EAIEY,EAHKX,EAAA2B,CAAA,CAAmB,GAAA;;MAEvB,eAAeE,EAAA,MAAM;;KAExB3B,EAQEW,GAAA;MAPC,IAAIqC,EAAA;MACJ,UAAUlD,EAAAmD,CAAA,CAAoB,CAACtB,EAAA,OAAO,eAAeG,EAAA,KAAS;MAC9D,QAAQhC,EAAAoD,CAAA;MACR,iBAAepD,EAAAoD,CAAA;MACf,KAAKpB,EAAA;MACN,eAAA;MACA,gBAAA"}
+{"version":3,"file":"AlfakitRoot.vue_vue_type_script_setup_true_lang.js","names":["ImpersonationBanner","_openBlock","_createBlock","_unref","_withCtx","_createVNode","TooltipProvider","SchemaContractGuard","_renderSlot","ActionModals","FlashToasts","RealtimeNotifications","PwaManager","DevToolsSlot","_resolveDynamicComponent","_createCommentVNode","Toaster","ActionModals_default","TooltipProvider_default","FlashToasts_default","RealtimeNotifications_default","ImpersonationBanner_default","PwaManager_default","Toaster_default","DevToolsSlot_default","SchemaContractGuard_default","AlfakitRoot_vue_vue_type_script_setup_true_lang_default","page","usePage","useAlfakit","impersonationBanner","registry","panel","computed","localization","direction","watch","translations","tag","translator","applyDocumentLocale","value","applyPanelTheme","openBlock","createBlock","unref","ConfigProvider","withCtx","createVNode","renderSlot","_ctx","resolveDynamicComponent","createCommentVNode","__props","resolveToastPosition","PANEL_TOAST_OFFSET"],"sources":["../src/AlfakitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  applyDocumentLocale,\n  applyPanelTheme,\n  PANEL_TOAST_OFFSET,\n  resolveToastPosition,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { ConfigProvider } from 'reka-ui'\nimport { computed, watch } from 'vue'\nimport ActionModals from './components/actions/ActionModals.vue'\nimport DevToolsSlot from './components/dev-tools/DevToolsSlot.vue'\nimport FlashToasts from './components/notifications/FlashToasts.vue'\nimport RealtimeNotifications from './components/notifications/RealtimeNotifications.vue'\nimport ImpersonationBanner from './components/panel/ImpersonationBanner.vue'\nimport PwaManager from './components/panel/PwaManager.vue'\nimport SchemaContractGuard from './components/panel/SchemaContractGuard.vue'\nimport Toaster from './components/ui/Toaster.vue'\nimport TooltipProvider from './components/ui/TooltipProvider.vue'\nimport { useAlfakit } from './context'\n\n/**\n * Persistent layout rendered inside Inertia's page tree, so modals and toasts can read page\n * props through `usePage()`. It follows the current page: the reading direction for reka-ui\n * primitives, modals and toasts.\n */\n/** Starter kit mode: Alfakit's toaster gets an id so the host's id-less one never doubles its toasts. */\ndefineProps<{ toasterId?: string }>()\n\nconst page = usePage<AlfakitPageProps>()\nconst { translator, registry } = useAlfakit()\n\n// Replace with createAlfakit({ components: { 'panel:impersonation-banner': … } }).\nconst impersonationBanner = registry.resolve('panel:impersonation-banner') ?? ImpersonationBanner\n\nconst panel = computed(() => page.props.alfakit as AlfakitPageProps['alfakit'] | undefined)\nconst localization = computed(() => panel.value?.localization)\nconst direction = computed(() => localization.value?.direction ?? 'ltr')\n\n// Every visit (including the redirect after a language switch, which is a POST + redirect\n// and so not a plain navigation) may carry new strings: update the translator synchronously,\n// before children re-render.\nwatch(\n  () => [panel.value?.translations, localization.value?.tag] as const,\n  ([translations, tag]) => {\n    if (!panel.value) return\n\n    translator.setTranslations(translations ?? {})\n    translator.setLocale(tag ?? 'en')\n  },\n  { immediate: true, flush: 'sync' },\n)\n\n// Starter kit mode: the host app owns `<html lang dir>` (its own pages and layout are not\n// mirrored); `AlfakitStarterKitRoot` puts the direction on Alfakit's own root element.\nwatch(\n  localization,\n  (value) => {\n    if (panel.value?.starterKit !== true) applyDocumentLocale(value)\n  },\n  { immediate: true },\n)\nwatch(panel, (value) => applyPanelTheme(value), { immediate: true })\n</script>\n\n<template>\n  <ConfigProvider :dir=\"direction\">\n    <TooltipProvider :delay-duration=\"0\">\n      <SchemaContractGuard :panel=\"panel\">\n        <slot />\n      </SchemaContractGuard>\n      <ActionModals />\n      <FlashToasts />\n      <RealtimeNotifications />\n      <!-- `Panel::pwa()`: service worker and the \"new version\" toast. -->\n      <PwaManager />\n      <!-- Schema inspector: renders (and loads its code) only with `alfakitDevTools`. -->\n      <DevToolsSlot />\n      <component\n        :is=\"impersonationBanner\"\n        v-if=\"panel?.impersonation\"\n        :impersonation=\"panel.impersonation\"\n      />\n      <Toaster\n        :id=\"toasterId\"\n        :position=\"resolveToastPosition(panel?.toastPosition, direction)\"\n        :offset=\"PANEL_TOAST_OFFSET\"\n        :mobile-offset=\"PANEL_TOAST_OFFSET\"\n        :dir=\"direction\"\n        rich-colors\n        close-button\n      />\n    </TooltipProvider>\n  </ConfigProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA8BA,IAAM2B,IAAOC,EAA0B,GACjC,EAAE,eAAY,gBAAaC,EAAW,GAGtCC,IAAsBC,EAAS,QAAQ,4BAA4B,KAAK/B,GAExEgC,IAAQC,QAAeN,EAAK,MAAM,OAAkD,GACpFO,IAAeD,QAAeD,EAAM,OAAO,YAAY,GACvDG,IAAYF,QAAeC,EAAa,OAAO,aAAa,KAAK;SAKvEE,QACQ,CAACJ,EAAM,OAAO,cAAcE,EAAa,OAAO,GAAG,IACxD,CAACG,GAAcC,OAAS;GACvB,AAAKN,EAAM,UAEXO,EAAW,gBAAgBF,KAAgB,CAAC,CAAC,GAC7CE,EAAW,UAAUD,KAAO,IAAI;EAClC,GACA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC,GAIAF,EACEF,IACC,MAAU;GACT,AAAIF,EAAM,OAAO,eAAe,MAAMQ,EAAoBC,CAAK;EACjE,GACA,EAAE,WAAW,GAAK,CACpB,GACAL,EAAMJ,IAAQ,MAAUU,EAAgBD,CAAK,GAAG,EAAE,WAAW,GAAK,CAAC,cAIjExC,EAAA,GAAAC,EA2BiBC,EAAA2C,CAAA,GAAA,EA3BA,KAAKX,EAAA,MAAS,GAAA;GAC7B,SAAA/B,QAyBkB,CAzBlBC,EAyBkBC,GAAA,EAzBA,kBAAgB,EAAC,GAAA;IACjC,SAAAF,QAEsB;KAFtBC,EAEsBE,GAAA,EAFA,OAAOyB,EAAA,MAAK,GAAA;MAChC,SAAA5B,QAAQ,CAARI,EAAQ0C,EAAA,QAAA,SAAA,CAAA,CAAA;;;KAEV7C,EAAgBI,CAAA;KAChBJ,EAAeK,CAAA;KACfL,EAAyBM,CAAA;KAEzBN,EAAcO,CAAA;KAEdP,EAAgBQ,CAAA;KAGRmB,EAAA,OAAO,iBAFf/B,EAAA,GAAAC,EAIEY,EAHKX,EAAA2B,CAAA,CAAmB,GAAA;;MAEvB,eAAeE,EAAA,MAAM;;KAExB3B,EAQEW,GAAA;MAPC,IAAIqC,EAAA;MACJ,UAAUlD,EAAAmD,CAAA,CAAoB,CAACtB,EAAA,OAAO,eAAeG,EAAA,KAAS;MAC9D,QAAQhC,EAAAoD,CAAA;MACR,iBAAepD,EAAAoD,CAAA;MACf,KAAKpB,EAAA;MACN,eAAA;MACA,gBAAA"}

package/dist/components/actions/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["_sfc_main","ActionButton_vue_vue_type_script_setup_true_lang_default","ActionButton_default"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\nconst loading = useStoreSelector(runner.store, (state) => state.loading === props.action.name)\nconst processing = useStoreSelector(runner.store, (state) =>\n  state.modals.some((modal) => modal.action.name === props.action.name && modal.processing),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd v-if=\"shortcut\" class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\">{{\n        formatKeyBinding(shortcut)\n      }}</kbd>\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ActionButton.js","names":["_sfc_main","ActionButton_vue_vue_type_script_setup_true_lang_default","ActionButton_default"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  isActionLoading,\n  isActionProcessing,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\n// Only this run (this record's button), not the same action in every table row.\nconst loading = useStoreSelector(runner.store, (state) =>\n  isActionLoading(state, props.action, props.context),\n)\nconst processing = useStoreSelector(runner.store, (state) =>\n  isActionProcessing(state, props.action, props.context),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd\n        v-if=\"shortcut\"\n        dir=\"ltr\"\n        class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\"\n        >{{ formatKeyBinding(shortcut) }}</kbd\n      >\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/actions/ActionButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionButton.vue"],"names":[],"mappings":"AA+XA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAShE,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAoBhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF;;UARQ,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;qBAKnB,OAAO;;AAkxB3B,wBAOG"}
+{"version":3,"file":"ActionButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionButton.vue"],"names":[],"mappings":"AAuYA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAWhE,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAoBhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF;;UARQ,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;qBAKnB,OAAO;;AAoxB3B,wBAOG"}