@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/widgets/ChartFilters.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFilters.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Popover","_withCtx","_createVNode","PopoverTrigger","Button","_unref","Icon","PopoverContent","SchemaRenderer","_createElementVNode","TableTriggerButton","_createElementBlock","_createCommentVNode","Icon_default","Button_default","SchemaRenderer_default","Popover_default","PopoverContent_default","PopoverTrigger_default","TableTriggerButton_default","_hoisted_1","_hoisted_2","ChartFilters_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","open","ref","store","FormStore","state","useStore","applied","provideForm","onScopeDispose","apply","values","router","chartFiltersUrl","resolvePartialProps","reset","submit","resetView","computed","triggerButtonView","applyView","openBlock","createBlock","_cache","$event","withCtx","createVNode","unref","FilterIcon","createElementVNode","createElementBlock","createCommentVNode"],"sources":["../../../src/components/widgets/ChartFilters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartFiltersFormSchema } from '@alfakit/core'\nimport { FormStore, chartFiltersUrl, resolvePartialProps, triggerButtonView } from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { FilterIcon } from '@lucide/vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { provideForm } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport TableTriggerButton from '../table/TableTriggerButton.vue'\n\n/**\n * The `filtersSchema()` form of a chart widget, in a popover. Values live in the query\n * string; the chart reloads on every change, or on \"Apply\" with deferred filters. The\n * parent re-mounts it (by key) when the server sends new filter state.\n */\nconst props = defineProps<{ form: ChartFiltersFormSchema; widgetId: string }>()\nconst t = useT()\nconst open = ref(false)\nconst store = new FormStore(props.form, { token: '', component: `chartFilters:${props.widgetId}` })\nconst state = useStore(store.store)\nlet applied = JSON.stringify(props.form.state)\n\nprovideForm(store)\nonScopeDispose(() => store.destroy())\n\nconst apply = (values: Record<string, unknown> | null) => {\n  if (typeof window === 'undefined') return\n\n  applied = JSON.stringify(values ?? {})\n  router.visit(chartFiltersUrl(window.location.href, props.form.queryKey, props.widgetId, values), {\n    only: resolvePartialProps(['page']),\n    preserveScroll: true,\n    preserveState: true,\n    replace: true,\n  })\n}\n\n// Live filters apply as the user changes them.\nwatch(\n  () => state.value.values,\n  (values) => {\n    if (!props.form.deferred && JSON.stringify(values) !== applied) apply(values)\n  },\n)\n\nconst reset = () => {\n  apply(null)\n  open.value = false\n}\n\nconst submit = () => {\n  apply(state.value.values)\n  open.value = false\n}\n\n// `filtersResetAction()` / `filtersApplyAction()` restyle the buttons.\nconst resetView = computed(() =>\n  triggerButtonView(props.form, 'filtersReset', {\n    label: t('table.reset_filters', {}, 'Reset'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  triggerButtonView(props.form, 'filtersApply', {\n    label: t('table_filters.apply', {}, 'Apply'),\n    variant: 'default',\n  }),\n)\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        data-slot=\"chart-filters-trigger\"\n        :aria-label=\"t('table.filters', {}, 'Filters')\"\n        ><Icon name=\"alfakit::widgets.chart.filter\" :fallback=\"FilterIcon\"\n      /></Button>\n    </PopoverTrigger>\n    <PopoverContent align=\"end\" class=\"flex w-80 flex-col gap-4\" data-slot=\"chart-filters\">\n      <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" />\n      <div class=\"flex items-center justify-between gap-2\">\n        <TableTriggerButton\n          v-if=\"resetView\"\n          :view=\"resetView\"\n          data-slot=\"chart-filters-reset\"\n          @click=\"reset\"\n        />\n        <span v-else />\n        <TableTriggerButton\n          v-if=\"props.form.deferred && applyView\"\n          :view=\"applyView\"\n          data-slot=\"chart-filters-apply\"\n          @click=\"submit\"\n        />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAMyB,IAAQC,GACRC,IAAIC,EAAK,GACTC,IAAOC,EAAI,EAAK,GAChBC,IAAQ,IAAIC,EAAUP,EAAM,MAAM;GAAE,OAAO;GAAI,WAAW,gBAAgBA,EAAM;EAAW,CAAC,GAC5FQ,IAAQC,EAASH,EAAM,KAAK,GAC9BI,IAAU,KAAK,UAAUV,EAAM,KAAK,KAAK;EAG7C,AADAW,EAAYL,CAAK,GACjBM,QAAqBN,EAAM,QAAQ,CAAC;EAEpC,IAAMO,KAAS,MAA2C;GACxD,AAAI,OAAO,SAAW,QAEtB,IAAU,KAAK,UAAUC,KAAU,CAAC,CAAC,GACrCC,EAAO,MAAMC,EAAgB,OAAO,SAAS,MAAMhB,EAAM,KAAK,UAAUA,EAAM,UAAUc,CAAM,GAAG;IAC/F,MAAMG,EAAoB,CAAC,MAAM,CAAC;IAClC,gBAAgB;IAChB,eAAe;IACf,SAAS;GACX,CAAC;EACH;EAGA,QACQT,EAAM,MAAM,SACjB,MAAW;GACV,AAAI,CAACR,EAAM,KAAK,YAAY,KAAK,UAAUc,CAAM,MAAMJ,KAASG,EAAMC,CAAM;EAC9E,CACF;EAEA,IAAMI,UAAc;GAElB,AADAL,EAAM,IAAI,GACV,EAAK,QAAQ;EACf,GAEMM,UAAe;GAEnB,AADAN,EAAML,EAAM,MAAM,MAAM,GACxB,EAAK,QAAQ;EACf,GAGMY,IAAYC,QAChBC,EAAkBtB,EAAM,MAAM,gBAAgB;GAC5C,OAAOE,EAAE,uBAAuB,CAAC,GAAG,OAAO;GAC3C,SAAS;EACX,CAAC,CACH,GACMqB,IAAYF,QAChBC,EAAkBtB,EAAM,MAAM,gBAAgB;GAC5C,OAAOE,EAAE,uBAAuB,CAAC,GAAG,OAAO;GAC3C,SAAS;EACX,CAAC,CACH;oBAIE3B,EAAA,GAAAC,EA6BUC,GAAA;GA7BO,MAAM2B,EAAA;GAAA,iBAAA,AAAAsB,EAAA,QAAA,MAAA,EAAI,QAAAC;;GACzB,SAAAjD,QASiB,CATjBC,EASiBC,GAAA,EATD,YAAA,GAAQ,GAAA;IACtB,SAAAF,QAOW,CAPXC,EAOWE,GAAA;KANT,MAAK;KACL,SAAQ;KACR,MAAK;KACL,aAAU;KACT,cAAYC,EAAAoB,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,SAAA;;KACb,SAAAxB,QACD,CADCC,EACDG,EAAAC,CAAA,GAAA;MADO,MAAK;MAAiC,UAAUD,EAAAiD,CAAA;;;;;GAG3DpD,CAAAA,GAAAA,EAiBiBK,GAAA;IAjBD,OAAM;IAAM,OAAM;IAA2B,aAAU;;IACrE,SAAAN,QAA0E,CAA1EC,EAA0EM,GAAA;KAAzD,YAAYH,EAAA0B,CAAA,CAAK,CAAC;KAAa,SAAS1B,EAAA0B,CAAA,CAAK,CAAC;IAC/DtB,GAAAA,MAAAA,GAAAA,CAAAA,cAAAA,SAAAA,CAAAA,GAAAA,EAcM,OAdNW,GAcM,CAZIuB,EAAA,SADR7C,EAAA,GAAAC,EAKEW,GAAA;;KAHC,MAAMiC,EAAA;KACP,aAAU;KACT,SAAOF;IAEV3C,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAa,EAAe,QAAAU,CAAA,IAEPE,EAAM,KAAK,YAAYuB,EAAA,SAD/BhD,EAAA,GAAAC,EAKEW,GAAA;;KAHC,MAAMoC,EAAA;KACP,aAAU;KACT,SAAOJ"}

package/dist/components/widgets/ChartSkeleton.js

@@ -0,0 +1,7 @@
+import e from "./ChartSkeleton.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/widgets/ChartSkeleton.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ChartSkeleton.js.map

package/dist/components/widgets/ChartSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSkeleton.js","names":["_sfc_main","ChartSkeleton_vue_vue_type_script_setup_true_lang_default","ChartSkeleton_default"],"sources":["../../../src/components/widgets/ChartSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartWidgetSchema } from '@alfakit/core'\nimport Card from '../ui/Card.vue'\nimport CardContent from '../ui/CardContent.vue'\nimport Skeleton from '../ui/Skeleton.vue'\n\nconst props = defineProps<{ widget: ChartWidgetSchema }>()\n</script>\n\n<template>\n  <Card class=\"gap-4 py-4\" aria-busy=\"true\">\n    <CardContent class=\"flex flex-col gap-4 px-5\">\n      <Skeleton v-if=\"props.widget.heading\" class=\"h-5 w-1/3\" aria-hidden=\"true\" />\n      <Skeleton :style=\"{ height: props.widget.maxHeight ?? '18rem' }\" aria-hidden=\"true\" />\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/widgets/ChartSkeleton.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ChartWidgetSchema } from '@alfakit/core';
+type __VLS_Props = {
+    widget: ChartWidgetSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ChartSkeleton.vue.d.ts.map

package/dist/components/widgets/ChartSkeleton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSkeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/ChartSkeleton.vue"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAKtD,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;;AAsFjD,wBAMG"}

package/dist/components/widgets/ChartSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import e from "../ui/Skeleton.js";
+import t from "../ui/Card.js";
+import n from "../ui/CardContent.js";
+import { createBlock as r, createCommentVNode as i, createVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, withCtx as l } from "vue";
+//#region src/components/widgets/ChartSkeleton.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ o({
+	__name: "ChartSkeleton",
+	props: { widget: {} },
+	setup(o) {
+		let u = o;
+		return (o, d) => (c(), r(t, {
+			class: "gap-4 py-4",
+			"aria-busy": "true"
+		}, {
+			default: l(() => [a(n, { class: "flex flex-col gap-4 px-5" }, {
+				default: l(() => [u.widget.heading ? (c(), r(e, {
+					key: 0,
+					class: "h-5 w-1/3",
+					"aria-hidden": "true"
+				})) : i("", !0), a(e, {
+					style: s({ height: u.widget.maxHeight ?? "18rem" }),
+					"aria-hidden": "true"
+				}, null, 8, ["style"])]),
+				_: 1
+			})]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=ChartSkeleton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/widgets/ChartSkeleton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSkeleton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Card","_withCtx","_createVNode","CardContent","Skeleton","_createCommentVNode","_normalizeStyle","Skeleton_default","Card_default","CardContent_default","ChartSkeleton_vue_vue_type_script_setup_true_lang_default","props","__props","openBlock","createBlock","withCtx","createVNode","createCommentVNode","normalizeStyle"],"sources":["../../../src/components/widgets/ChartSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartWidgetSchema } from '@alfakit/core'\nimport Card from '../ui/Card.vue'\nimport CardContent from '../ui/CardContent.vue'\nimport Skeleton from '../ui/Skeleton.vue'\n\nconst props = defineProps<{ widget: ChartWidgetSchema }>()\n</script>\n\n<template>\n  <Card class=\"gap-4 py-4\" aria-busy=\"true\">\n    <CardContent class=\"flex flex-col gap-4 px-5\">\n      <Skeleton v-if=\"props.widget.heading\" class=\"h-5 w-1/3\" aria-hidden=\"true\" />\n      <Skeleton :style=\"{ height: props.widget.maxHeight ?? '18rem' }\" aria-hidden=\"true\" />\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":";;;;;;;;;EAMA,IAAMa,IAAQC;oBAIZd,EAAA,GAAAC,EAKOC,GAAA;GALD,OAAM;GAAa,aAAU;;GACjC,SAAAC,QAGc,CAHdC,EAGcC,GAAA,EAHD,OAAM,2BAA0B,GAAA;IAC3C,SAAAF,QAA6E,CAA7DU,EAAM,OAAO,WAA7Bb,EAAA,GAAAC,EAA6EK,GAAA;;KAAvC,OAAM;KAAY,eAAY;IACpEF,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAsFE,GAAA;KAA3E,OAAKE,EAAA,EAAA,QAAYK,EAAM,OAAO,aAAS,QAAA,CAAA;KAAe,eAAY"}

package/dist/components/widgets/ChartWidget.js

@@ -0,0 +1,7 @@
+import e from "./ChartWidget.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/widgets/ChartWidget.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ChartWidget.js.map

package/dist/components/widgets/ChartWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget.js","names":["_sfc_main","ChartWidget_vue_vue_type_script_setup_true_lang_default","ChartWidget_default"],"sources":["../../../src/components/widgets/ChartWidget.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartWidgetSchema } from '@alfakit/core'\nimport {\n  buildChartConfig,\n  getChartPlugins,\n  observeThemeChanges,\n  resolvePartialProps,\n  widgetPollTarget,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { Chart, registerables, type ChartConfiguration, type Plugin } from 'chart.js'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { onMounted, onScopeDispose, ref, toRaw, useId, watch } from 'vue'\nimport { useDirection, useLocalization, usePollComponent, useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport ChartEmptyState from './ChartEmptyState.vue'\nimport ChartFilters from './ChartFilters.vue'\nimport Card from '../ui/Card.vue'\nimport CardContent from '../ui/CardContent.vue'\nimport CardDescription from '../ui/CardDescription.vue'\nimport CardHeader from '../ui/CardHeader.vue'\nimport CardTitle from '../ui/CardTitle.vue'\nimport { useLiveUpdates } from '../realtime/use-live-updates'\n\nconst t = useT()\n\nChart.register(...registerables)\n\nconst props = defineProps<{ widget: ChartWidgetSchema }>()\nconst canvas = ref<HTMLCanvasElement | null>(null)\nconst direction = useDirection()\nconst localization = useLocalization()\n// Bumped when the theme or dark mode changes so colours are re-read from CSS.\nconst themeVersion = ref(0)\nlet chart: Chart | null = null\n\nconst buildConfig = (): ChartConfiguration => {\n  void themeVersion.value\n\n  return buildChartConfig({\n    type: props.widget.chartType,\n    data: toRaw(props.widget.data),\n    options: toRaw(props.widget.options),\n    rtl: direction.value === 'rtl',\n    locale: localization.value?.tag ?? 'en',\n    color: props.widget.color,\n  }) as unknown as ChartConfiguration\n}\n\nconst collapsed = ref(false)\nconst bodyId = useId()\n\nconst create = () => {\n  chart?.destroy()\n\n  // `createAlfakit({ chartPlugins })`, registered before the chart is drawn.\n  const plugins = getChartPlugins() as Plugin[]\n\n  if (plugins.length > 0) Chart.register(...plugins)\n\n  chart = canvas.value ? new Chart(canvas.value, buildConfig()) : null\n}\n\nlet stopObservingTheme: (() => void) | null = null\n\nonMounted(() => {\n  create()\n  stopObservingTheme = observeThemeChanges(() => themeVersion.value++)\n})\n\n// The chart is only re-created when its type changes or its canvas comes back (after\n// being collapsed or empty); polling, theme, direction and locale changes update it in place.\nwatch(() => props.widget.chartType, create)\nwatch(canvas, (element) => {\n  if (element) {\n    create()\n  } else {\n    chart?.destroy()\n    chart = null\n  }\n})\nwatch(\n  () => [\n    props.widget.data,\n    props.widget.options,\n    props.widget.color,\n    direction.value,\n    localization.value?.tag,\n    themeVersion.value,\n  ],\n  () => {\n    if (!chart) return\n\n    const config = buildConfig()\n    chart.data = config.data\n    chart.options = config.options ?? {}\n    chart.update()\n  },\n  { deep: true },\n)\n\n// Polls refresh only this widget, share one request with other components on the same\n// interval and pause while the tab is hidden.\nconst pollComponent = usePollComponent()\n\nwatch(\n  [() => widgetPollTarget(props.widget), () => props.widget.pollingInterval],\n  ([target, pollingInterval], _old, onCleanup) => onCleanup(pollComponent(target, pollingInterval)),\n  { immediate: true },\n)\n\n// `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\nuseLiveUpdates(() => ({\n  live: props.widget.live,\n  target: widgetPollTarget(props.widget),\n  polling: Boolean(props.widget.pollingInterval),\n}))\n\nonScopeDispose(() => {\n  stopObservingTheme?.()\n  chart?.destroy()\n  chart = null\n})\n\nconst setFilter = (event: Event) => {\n  const url = new URL(window.location.href)\n  url.searchParams.set(\n    `widgetFilters[${props.widget.id}]`,\n    (event.target as HTMLSelectElement).value,\n  )\n  router.visit(url.toString(), {\n    only: resolvePartialProps(['page']),\n    preserveScroll: true,\n    preserveState: true,\n    replace: true,\n  })\n}\n</script>\n\n<template>\n  <Card class=\"gap-4 py-4\" :data-chart-type=\"props.widget.chartType\">\n    <CardHeader\n      v-if=\"\n        props.widget.heading ||\n        props.widget.description ||\n        props.widget.filters ||\n        props.widget.filtersForm ||\n        props.widget.collapsible\n      \"\n      class=\"px-5\"\n    >\n      <div class=\"flex items-start justify-between gap-3\">\n        <div class=\"min-w-0\">\n          <CardTitle v-if=\"props.widget.heading\" class=\"text-base\">{{\n            props.widget.heading\n          }}</CardTitle>\n          <CardDescription v-if=\"props.widget.description\">{{\n            props.widget.description\n          }}</CardDescription>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\">\n          <select\n            v-if=\"props.widget.filters\"\n            :value=\"props.widget.filter ?? ''\"\n            :aria-label=\"t('chart_filter', {}, 'Chart filter')\"\n            class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n            @change=\"setFilter\"\n          >\n            <option\n              v-for=\"filter in props.widget.filters\"\n              :key=\"filter.value\"\n              :value=\"filter.value\"\n            >\n              {{ filter.label }}\n            </option>\n          </select>\n          <ChartFilters\n            v-if=\"props.widget.filtersForm\"\n            :key=\"JSON.stringify(props.widget.filtersForm.state)\"\n            :form=\"props.widget.filtersForm\"\n            :widget-id=\"props.widget.id\"\n          />\n          <Button\n            v-if=\"props.widget.collapsible\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-expanded=\"!collapsed\"\n            :aria-controls=\"bodyId\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n            @click=\"collapsed = !collapsed\"\n            ><ChevronDownIcon\n              :class=\"cn('transition-transform', collapsed && '-rotate-90 rtl:rotate-90')\"\n          /></Button>\n        </div>\n      </div>\n    </CardHeader>\n    <CardContent v-if=\"!collapsed\" :id=\"bodyId\" class=\"px-5\">\n      <ChartEmptyState v-if=\"props.widget.empty\" :widget=\"props.widget\" />\n      <div\n        v-else\n        data-slot=\"chart-canvas\"\n        :style=\"{ height: props.widget.maxHeight ?? '18rem', color: cssColor('gray') }\"\n      >\n        <canvas\n          ref=\"canvas\"\n          role=\"img\"\n          :aria-label=\"props.widget.heading ?? t('chart', {}, 'Chart')\"\n          :aria-describedby=\"props.widget.assistiveContent ? `${bodyId}-assistive` : undefined\"\n        />\n        <!-- `getChartAssistiveContent()`: the chart's values for screen readers. -->\n        <div\n          v-if=\"props.widget.assistiveContent\"\n          :id=\"`${bodyId}-assistive`\"\n          class=\"sr-only\"\n          data-slot=\"chart-assistive-content\"\n          v-html=\"props.widget.assistiveContent\"\n        />\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/widgets/ChartWidget.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ChartWidgetSchema } from '@alfakit/core';
+type __VLS_Props = {
+    widget: ChartWidgetSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ChartWidget.vue.d.ts.map

package/dist/components/widgets/ChartWidget.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget.vue.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/ChartWidget.vue"],"names":[],"mappings":"AAkOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AA6BtD,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;;AA+WjD,wBAMG"}

package/dist/components/widgets/ChartWidget.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,159 @@
+import { useDirection as e, useLocalization as t, usePollComponent as n, useT as r } from "../../context.js";
+import { cn as ee } from "../../lib/utils.js";
+import { cssColor as te } from "../../lib/colors.js";
+import ne from "../ui/Button2.js";
+import { useLiveUpdates as re } from "../realtime/use-live-updates.js";
+import ie from "../ui/Card.js";
+import ae from "../ui/CardContent.js";
+import i from "../ui/CardDescription.js";
+import a from "../ui/CardHeader.js";
+import o from "../ui/CardTitle.js";
+import s from "./ChartEmptyState.js";
+import c from "./ChartFilters.js";
+import { buildChartConfig as l, getChartPlugins as u, observeThemeChanges as d, resolvePartialProps as f, widgetPollTarget as p } from "@alfakit/core";
+import { router as m } from "@inertiajs/vue3";
+import { Fragment as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as oe, defineComponent as x, normalizeClass as se, normalizeStyle as ce, onMounted as S, onScopeDispose as C, openBlock as w, ref as T, renderList as E, toDisplayString as D, toRaw as O, unref as k, useId as A, watch as j, withCtx as M } from "vue";
+import { ChevronDownIcon as N } from "@lucide/vue";
+import { Chart as P, registerables as F } from "chart.js";
+//#region src/components/widgets/ChartWidget.vue?vue&type=script&setup=true&lang.ts
+var I = { class: "flex items-start justify-between gap-3" }, L = { class: "min-w-0" }, le = { class: "flex shrink-0 items-center gap-1" }, R = ["value", "aria-label"], z = ["value"], B = ["aria-label", "aria-describedby"], V = ["id", "innerHTML"], H = /*@__PURE__*/ x({
+	__name: "ChartWidget",
+	props: { widget: {} },
+	setup(x) {
+		let H = r();
+		P.register(...F);
+		let U = x, W = T(null), G = e(), K = t(), q = T(0), J = null, Y = () => (q.value, l({
+			type: U.widget.chartType,
+			data: O(U.widget.data),
+			options: O(U.widget.options),
+			rtl: G.value === "rtl",
+			locale: K.value?.tag ?? "en",
+			color: U.widget.color
+		})), X = T(!1), Z = A(), Q = () => {
+			J?.destroy();
+			let e = u();
+			e.length > 0 && P.register(...e), J = W.value ? new P(W.value, Y()) : null;
+		}, $ = null;
+		S(() => {
+			Q(), $ = d(() => q.value++);
+		}), j(() => U.widget.chartType, Q), j(W, (e) => {
+			e ? Q() : (J?.destroy(), J = null);
+		}), j(() => [
+			U.widget.data,
+			U.widget.options,
+			U.widget.color,
+			G.value,
+			K.value?.tag,
+			q.value
+		], () => {
+			if (!J) return;
+			let e = Y();
+			J.data = e.data, J.options = e.options ?? {}, J.update();
+		}, { deep: !0 });
+		let ue = n();
+		j([() => p(U.widget), () => U.widget.pollingInterval], ([e, t], n, r) => r(ue(e, t)), { immediate: !0 }), re(() => ({
+			live: U.widget.live,
+			target: p(U.widget),
+			polling: !!U.widget.pollingInterval
+		})), C(() => {
+			$?.(), J?.destroy(), J = null;
+		});
+		let de = (e) => {
+			let t = new URL(window.location.href);
+			t.searchParams.set(`widgetFilters[${U.widget.id}]`, e.target.value), m.visit(t.toString(), {
+				only: f(["page"]),
+				preserveScroll: !0,
+				preserveState: !0,
+				replace: !0
+			});
+		};
+		return (e, t) => (w(), g(ie, {
+			class: "gap-4 py-4",
+			"data-chart-type": U.widget.chartType
+		}, {
+			default: M(() => [U.widget.heading || U.widget.description || U.widget.filters || U.widget.filtersForm || U.widget.collapsible ? (w(), g(a, {
+				key: 0,
+				class: "px-5"
+			}, {
+				default: M(() => [y("div", I, [y("div", L, [U.widget.heading ? (w(), g(o, {
+					key: 0,
+					class: "text-base"
+				}, {
+					default: M(() => [b(D(U.widget.heading), 1)]),
+					_: 1
+				})) : _("", !0), U.widget.description ? (w(), g(i, { key: 1 }, {
+					default: M(() => [b(D(U.widget.description), 1)]),
+					_: 1
+				})) : _("", !0)]), y("div", le, [
+					U.widget.filters ? (w(), v("select", {
+						key: 0,
+						value: U.widget.filter ?? "",
+						"aria-label": k(H)("chart_filter", {}, "Chart filter"),
+						class: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+						onChange: de
+					}, [(w(!0), v(h, null, E(U.widget.filters, (e) => (w(), v("option", {
+						key: e.value,
+						value: e.value
+					}, D(e.label), 9, z))), 128))], 40, R)) : _("", !0),
+					U.widget.filtersForm ? (w(), g(c, {
+						key: JSON.stringify(U.widget.filtersForm.state),
+						form: U.widget.filtersForm,
+						"widget-id": U.widget.id
+					}, null, 8, ["form", "widget-id"])) : _("", !0),
+					U.widget.collapsible ? (w(), g(ne, {
+						key: 2,
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-expanded": !X.value,
+						"aria-controls": k(Z),
+						"aria-label": k(H)("toggle_section", {}, "Toggle section"),
+						onClick: t[0] ||= (e) => X.value = !X.value
+					}, {
+						default: M(() => [oe(k(N), { class: se(k(ee)("transition-transform", X.value && "-rotate-90 rtl:rotate-90")) }, null, 8, ["class"])]),
+						_: 1
+					}, 8, [
+						"aria-expanded",
+						"aria-controls",
+						"aria-label"
+					])) : _("", !0)
+				])])]),
+				_: 1
+			})) : _("", !0), X.value ? _("", !0) : (w(), g(ae, {
+				key: 1,
+				id: k(Z),
+				class: "px-5"
+			}, {
+				default: M(() => [U.widget.empty ? (w(), g(s, {
+					key: 0,
+					widget: U.widget
+				}, null, 8, ["widget"])) : (w(), v("div", {
+					key: 1,
+					"data-slot": "chart-canvas",
+					style: ce({
+						height: U.widget.maxHeight ?? "18rem",
+						color: k(te)("gray")
+					})
+				}, [y("canvas", {
+					ref_key: "canvas",
+					ref: W,
+					role: "img",
+					"aria-label": U.widget.heading ?? k(H)("chart", {}, "Chart"),
+					"aria-describedby": U.widget.assistiveContent ? `${k(Z)}-assistive` : void 0
+				}, null, 8, B), U.widget.assistiveContent ? (w(), v("div", {
+					key: 0,
+					id: `${k(Z)}-assistive`,
+					class: "sr-only",
+					"data-slot": "chart-assistive-content",
+					innerHTML: U.widget.assistiveContent
+				}, null, 8, V)) : _("", !0)], 4))]),
+				_: 1
+			}, 8, ["id"]))]),
+			_: 1
+		}, 8, ["data-chart-type"]));
+	}
+});
+//#endregion
+export { H as default };
+
+//# sourceMappingURL=ChartWidget.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/widgets/ChartWidget.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Card","_withCtx","CardHeader","_createElementVNode","CardTitle","_createTextVNode","_toDisplayString","_createCommentVNode","CardDescription","_createElementBlock","_unref","_Fragment","_renderList","ChartFilters","Button","_createVNode","_normalizeClass","CardContent","ChartEmptyState","_normalizeStyle","Button_default","Card_default","CardContent_default","CardDescription_default","CardHeader_default","CardTitle_default","ChartEmptyState_default","ChartFilters_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","ChartWidget_vue_vue_type_script_setup_true_lang_default","t","useT","registerables","props","__props","canvas","ref","direction","useDirection","localization","useLocalization","themeVersion","chart","buildConfig","buildChartConfig","toRaw","collapsed","bodyId","useId","create","plugins","getChartPlugins","Chart","stopObservingTheme","onMounted","observeThemeChanges","watch","element","config","pollComponent","usePollComponent","widgetPollTarget","target","pollingInterval","onCleanup","useLiveUpdates","onScopeDispose","setFilter","url","event","router","resolvePartialProps","openBlock","createBlock","withCtx","createElementVNode","createTextVNode","toDisplayString","createCommentVNode","createElementBlock","unref","Fragment","renderList","filter","_cache","createVNode","ChevronDownIcon","normalizeClass","cn","normalizeStyle","cssColor"],"sources":["../../../src/components/widgets/ChartWidget.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartWidgetSchema } from '@alfakit/core'\nimport {\n  buildChartConfig,\n  getChartPlugins,\n  observeThemeChanges,\n  resolvePartialProps,\n  widgetPollTarget,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { Chart, registerables, type ChartConfiguration, type Plugin } from 'chart.js'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { onMounted, onScopeDispose, ref, toRaw, useId, watch } from 'vue'\nimport { useDirection, useLocalization, usePollComponent, useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport ChartEmptyState from './ChartEmptyState.vue'\nimport ChartFilters from './ChartFilters.vue'\nimport Card from '../ui/Card.vue'\nimport CardContent from '../ui/CardContent.vue'\nimport CardDescription from '../ui/CardDescription.vue'\nimport CardHeader from '../ui/CardHeader.vue'\nimport CardTitle from '../ui/CardTitle.vue'\nimport { useLiveUpdates } from '../realtime/use-live-updates'\n\nconst t = useT()\n\nChart.register(...registerables)\n\nconst props = defineProps<{ widget: ChartWidgetSchema }>()\nconst canvas = ref<HTMLCanvasElement | null>(null)\nconst direction = useDirection()\nconst localization = useLocalization()\n// Bumped when the theme or dark mode changes so colours are re-read from CSS.\nconst themeVersion = ref(0)\nlet chart: Chart | null = null\n\nconst buildConfig = (): ChartConfiguration => {\n  void themeVersion.value\n\n  return buildChartConfig({\n    type: props.widget.chartType,\n    data: toRaw(props.widget.data),\n    options: toRaw(props.widget.options),\n    rtl: direction.value === 'rtl',\n    locale: localization.value?.tag ?? 'en',\n    color: props.widget.color,\n  }) as unknown as ChartConfiguration\n}\n\nconst collapsed = ref(false)\nconst bodyId = useId()\n\nconst create = () => {\n  chart?.destroy()\n\n  // `createAlfakit({ chartPlugins })`, registered before the chart is drawn.\n  const plugins = getChartPlugins() as Plugin[]\n\n  if (plugins.length > 0) Chart.register(...plugins)\n\n  chart = canvas.value ? new Chart(canvas.value, buildConfig()) : null\n}\n\nlet stopObservingTheme: (() => void) | null = null\n\nonMounted(() => {\n  create()\n  stopObservingTheme = observeThemeChanges(() => themeVersion.value++)\n})\n\n// The chart is only re-created when its type changes or its canvas comes back (after\n// being collapsed or empty); polling, theme, direction and locale changes update it in place.\nwatch(() => props.widget.chartType, create)\nwatch(canvas, (element) => {\n  if (element) {\n    create()\n  } else {\n    chart?.destroy()\n    chart = null\n  }\n})\nwatch(\n  () => [\n    props.widget.data,\n    props.widget.options,\n    props.widget.color,\n    direction.value,\n    localization.value?.tag,\n    themeVersion.value,\n  ],\n  () => {\n    if (!chart) return\n\n    const config = buildConfig()\n    chart.data = config.data\n    chart.options = config.options ?? {}\n    chart.update()\n  },\n  { deep: true },\n)\n\n// Polls refresh only this widget, share one request with other components on the same\n// interval and pause while the tab is hidden.\nconst pollComponent = usePollComponent()\n\nwatch(\n  [() => widgetPollTarget(props.widget), () => props.widget.pollingInterval],\n  ([target, pollingInterval], _old, onCleanup) => onCleanup(pollComponent(target, pollingInterval)),\n  { immediate: true },\n)\n\n// `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\nuseLiveUpdates(() => ({\n  live: props.widget.live,\n  target: widgetPollTarget(props.widget),\n  polling: Boolean(props.widget.pollingInterval),\n}))\n\nonScopeDispose(() => {\n  stopObservingTheme?.()\n  chart?.destroy()\n  chart = null\n})\n\nconst setFilter = (event: Event) => {\n  const url = new URL(window.location.href)\n  url.searchParams.set(\n    `widgetFilters[${props.widget.id}]`,\n    (event.target as HTMLSelectElement).value,\n  )\n  router.visit(url.toString(), {\n    only: resolvePartialProps(['page']),\n    preserveScroll: true,\n    preserveState: true,\n    replace: true,\n  })\n}\n</script>\n\n<template>\n  <Card class=\"gap-4 py-4\" :data-chart-type=\"props.widget.chartType\">\n    <CardHeader\n      v-if=\"\n        props.widget.heading ||\n        props.widget.description ||\n        props.widget.filters ||\n        props.widget.filtersForm ||\n        props.widget.collapsible\n      \"\n      class=\"px-5\"\n    >\n      <div class=\"flex items-start justify-between gap-3\">\n        <div class=\"min-w-0\">\n          <CardTitle v-if=\"props.widget.heading\" class=\"text-base\">{{\n            props.widget.heading\n          }}</CardTitle>\n          <CardDescription v-if=\"props.widget.description\">{{\n            props.widget.description\n          }}</CardDescription>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\">\n          <select\n            v-if=\"props.widget.filters\"\n            :value=\"props.widget.filter ?? ''\"\n            :aria-label=\"t('chart_filter', {}, 'Chart filter')\"\n            class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n            @change=\"setFilter\"\n          >\n            <option\n              v-for=\"filter in props.widget.filters\"\n              :key=\"filter.value\"\n              :value=\"filter.value\"\n            >\n              {{ filter.label }}\n            </option>\n          </select>\n          <ChartFilters\n            v-if=\"props.widget.filtersForm\"\n            :key=\"JSON.stringify(props.widget.filtersForm.state)\"\n            :form=\"props.widget.filtersForm\"\n            :widget-id=\"props.widget.id\"\n          />\n          <Button\n            v-if=\"props.widget.collapsible\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-expanded=\"!collapsed\"\n            :aria-controls=\"bodyId\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n            @click=\"collapsed = !collapsed\"\n            ><ChevronDownIcon\n              :class=\"cn('transition-transform', collapsed && '-rotate-90 rtl:rotate-90')\"\n          /></Button>\n        </div>\n      </div>\n    </CardHeader>\n    <CardContent v-if=\"!collapsed\" :id=\"bodyId\" class=\"px-5\">\n      <ChartEmptyState v-if=\"props.widget.empty\" :widget=\"props.widget\" />\n      <div\n        v-else\n        data-slot=\"chart-canvas\"\n        :style=\"{ height: props.widget.maxHeight ?? '18rem', color: cssColor('gray') }\"\n      >\n        <canvas\n          ref=\"canvas\"\n          role=\"img\"\n          :aria-label=\"props.widget.heading ?? t('chart', {}, 'Chart')\"\n          :aria-describedby=\"props.widget.assistiveContent ? `${bodyId}-assistive` : undefined\"\n        />\n        <!-- `getChartAssistiveContent()`: the chart's values for screen readers. -->\n        <div\n          v-if=\"props.widget.assistiveContent\"\n          :id=\"`${bodyId}-assistive`\"\n          class=\"sr-only\"\n          data-slot=\"chart-assistive-content\"\n          v-html=\"props.widget.assistiveContent\"\n        />\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/components/widgets/DashboardCustomizer.js

@@ -0,0 +1,7 @@
+import e from "./DashboardCustomizer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/widgets/DashboardCustomizer.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=DashboardCustomizer.js.map

package/dist/components/widgets/DashboardCustomizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardCustomizer.js","names":["_sfc_main","DashboardCustomizer_vue_vue_type_script_setup_true_lang_default","DashboardCustomizer_default"],"sources":["../../../src/components/widgets/DashboardCustomizer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  DashboardCustomizeSchema,\n  LazyWidgetSchema,\n  WidgetsBlock,\n  WidgetSchema,\n} from '@alfakit/core'\nimport {\n  columnSpanClasses,\n  DashboardEditor,\n  dashboardMoveForKey,\n  gridColumnsClasses,\n  isLazyPlaceholder,\n} from '@alfakit/core'\nimport {\n  CheckIcon,\n  EyeOffIcon,\n  GripVerticalIcon,\n  LayoutDashboardIcon,\n  PlusIcon,\n  RotateCcwIcon,\n  XIcon,\n} from '@lucide/vue'\nimport { router } from '@inertiajs/vue3'\nimport { computed, nextTick, useId, watch } from 'vue'\nimport { useDirection, useT } from '../../context'\nimport { useStore } from '../../composables/use-store'\nimport { cn } from '../../lib/utils'\nimport LazyPlaceholder from '../panel/LazyPlaceholder.vue'\nimport Button from '../ui/Button.vue'\nimport WidgetRenderer from './WidgetRenderer.vue'\n\n/**\n * A customizable dashboard (`Dashboard::customizable()`): the widget grid plus an \"Edit\n * dashboard\" mode (drag or arrow keys on the handle to move, resize, hide, add from the\n * library). Mirrors the React renderer.\n */\nconst props = defineProps<{ block: WidgetsBlock; customize: DashboardCustomizeSchema }>()\n\nconst t = useT()\nconst dir = useDirection()\nconst helpId = useId()\nconst editor = new DashboardEditor(props.customize, { t, onSaved: () => router.reload() })\n\nwatch(\n  () => props.customize,\n  (customize) => editor.sync(customize),\n)\n\nconst state = useStore(editor.store)\nconst widgets = computed(() => new Map(props.block.widgets.map((widget) => [widget.id, widget])))\nconst visible = computed(() => state.value.layout.filter((item) => !item.hidden))\nconst available = computed(() => {\n  void state.value\n\n  return editor.available()\n})\n\nfunction cellSpan(id: string) {\n  const widget = widgets.value.get(id)\n  const library = editor.widget(id)\n\n  if (state.value.editing && library) {\n    const span = editor.spanOf(id)\n\n    return library.spans.find((option) => option.value === span)?.columnSpan ?? widget?.columnSpan\n  }\n\n  return widget?.columnSpan\n}\n\nfunction onHandleKeydown(event: KeyboardEvent, id: string) {\n  const move = dashboardMoveForKey(event.key, dir.value)\n\n  if (move === null) return\n\n  event.preventDefault()\n  const target = event.currentTarget as HTMLElement\n  editor.move(id, move)\n  void nextTick(() => target.focus())\n}\n\nfunction onDragStart(event: DragEvent, id: string) {\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = 'move'\n    event.dataTransfer.setData('text/plain', id)\n  }\n\n  editor.dragStart(id)\n}\n\ninterface Cell {\n  id: string\n  label: string\n  widget: WidgetSchema | null\n  lazy: LazyWidgetSchema | null\n}\n\nconst cells = computed<Cell[]>(() =>\n  visible.value.map((entry) => {\n    const widget = widgets.value.get(entry.id)\n    const lazy = widget && isLazyPlaceholder(widget) ? (widget as LazyWidgetSchema) : null\n\n    return {\n      id: entry.id,\n      label: editor.label(entry.id),\n      widget: widget && !lazy ? (widget as WidgetSchema) : null,\n      lazy,\n    }\n  }),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"dashboard\"\n    :data-editing=\"state.editing ? '' : undefined\"\n    class=\"flex flex-col gap-4\"\n  >\n    <div\n      data-slot=\"dashboard-toolbar\"\n      role=\"toolbar\"\n      :aria-label=\"t('dashboard.customize.toolbar', {}, 'Dashboard layout')\"\n      class=\"flex flex-wrap items-center justify-end gap-2\"\n    >\n      <template v-if=\"state.editing\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          :disabled=\"state.saving\"\n          @click=\"editor.resetDraft()\"\n        >\n          <RotateCcwIcon aria-hidden=\"true\" />\n          {{ t('dashboard.customize.reset', {}, 'Reset to default') }}\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"state.saving\"\n          @click=\"editor.cancel()\"\n        >\n          <XIcon aria-hidden=\"true\" />\n          {{ t('dashboard.customize.cancel', {}, 'Cancel') }}\n        </Button>\n        <Button type=\"button\" size=\"sm\" :disabled=\"state.saving\" @click=\"editor.save()\">\n          <CheckIcon aria-hidden=\"true\" />\n          {{ t('dashboard.customize.save', {}, 'Save') }}\n        </Button>\n      </template>\n      <Button v-else type=\"button\" variant=\"outline\" size=\"sm\" @click=\"editor.start()\">\n        <LayoutDashboardIcon aria-hidden=\"true\" />\n        {{ t('dashboard.customize.edit', {}, 'Edit dashboard') }}\n      </Button>\n    </div>\n\n    <p v-if=\"state.error\" role=\"alert\" class=\"text-destructive text-sm\">{{ state.error }}</p>\n\n    <p v-if=\"state.editing\" :id=\"helpId\" class=\"sr-only\">\n      {{\n        t(\n          'dashboard.customize.move_help',\n          {},\n          'Use the arrow keys to move the widget, Home or End to move it to the start or end.',\n        )\n      }}\n    </p>\n\n    <p\n      v-if=\"visible.length === 0\"\n      data-slot=\"dashboard-empty\"\n      class=\"text-muted-foreground rounded-xl border border-dashed p-6 text-center text-sm\"\n    >\n      {{ t('dashboard.customize.empty', {}, 'No widgets on this dashboard yet.') }}\n    </p>\n    <div\n      v-else\n      data-slot=\"widgets\"\n      :class=\"cn('grid gap-6', gridColumnsClasses(props.block.columns))\"\n    >\n      <template v-for=\"entry in cells\" :key=\"entry.id\">\n        <div v-if=\"!state.editing\" :class=\"cn('min-w-0', columnSpanClasses(cellSpan(entry.id)))\">\n          <WidgetRenderer v-if=\"entry.widget\" :widget=\"entry.widget\" />\n          <LazyPlaceholder\n            v-else-if=\"entry.lazy\"\n            :variant=\"entry.lazy.type === 'TableWidget' ? 'table' : 'widget'\"\n          />\n        </div>\n        <div\n          v-else\n          data-slot=\"dashboard-widget\"\n          :data-dragging=\"state.dragging === entry.id ? '' : undefined\"\n          role=\"group\"\n          :aria-label=\"entry.label\"\n          :class=\"\n            cn(\n              'relative min-w-0 rounded-xl border-2 border-dashed p-1',\n              state.dragging === entry.id && 'opacity-50',\n              columnSpanClasses(cellSpan(entry.id)),\n            )\n          \"\n          @dragover=\"state.dragging !== null && $event.preventDefault()\"\n          @drop.prevent=\"editor.dropOn(entry.id)\"\n        >\n          <div\n            data-slot=\"dashboard-widget-controls\"\n            class=\"bg-background/95 absolute inset-x-2 top-2 z-10 flex items-center gap-1 rounded-md border p-1 shadow-sm\"\n          >\n            <button\n              type=\"button\"\n              data-slot=\"dashboard-widget-handle\"\n              draggable=\"true\"\n              :aria-label=\"t('dashboard.customize.move', { widget: entry.label }, 'Move :widget')\"\n              :aria-describedby=\"helpId\"\n              :aria-roledescription=\"t('dashboard.customize.sortable', {}, 'sortable')\"\n              class=\"hover:bg-accent focus-visible:ring-ring/50 cursor-grab rounded p-1 outline-none focus-visible:ring-[3px] active:cursor-grabbing\"\n              @dragstart=\"onDragStart($event, entry.id)\"\n              @dragend=\"editor.dragEnd()\"\n              @keydown=\"onHandleKeydown($event, entry.id)\"\n            >\n              <GripVerticalIcon class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">{{ entry.label }}</span>\n            <select\n              v-if=\"(editor.widget(entry.id)?.spans.length ?? 0) > 1\"\n              data-slot=\"dashboard-widget-span\"\n              :aria-label=\"\n                t('dashboard.customize.size', { widget: entry.label }, 'Size of :widget')\n              \"\n              class=\"border-input bg-background h-7 rounded-md border px-1 text-xs\"\n              :value=\"editor.spanOf(entry.id)\"\n              @change=\"editor.setSpan(entry.id, Number(($event.target as HTMLSelectElement).value))\"\n            >\n              <option\n                v-for=\"option in editor.widget(entry.id)!.spans\"\n                :key=\"option.value\"\n                :value=\"option.value\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              :aria-label=\"t('dashboard.customize.hide', { widget: entry.label }, 'Hide :widget')\"\n              @click=\"editor.hide(entry.id)\"\n            >\n              <EyeOffIcon aria-hidden=\"true\" />\n            </Button>\n          </div>\n          <!-- The widget itself is inert while editing: focus stays on the controls. -->\n          <div inert class=\"pointer-events-none pt-12 select-none\" aria-hidden=\"true\">\n            <WidgetRenderer v-if=\"entry.widget\" :widget=\"entry.widget\" />\n            <LazyPlaceholder\n              v-else-if=\"entry.lazy\"\n              :variant=\"entry.lazy.type === 'TableWidget' ? 'table' : 'widget'\"\n            />\n            <div\n              v-else\n              class=\"bg-card text-muted-foreground flex min-h-24 items-center justify-center rounded-xl border border-dashed p-6 text-sm\"\n            >\n              {{\n                t(\n                  'dashboard.customize.pending',\n                  { widget: entry.label },\n                  ':widget appears once you save.',\n                )\n              }}\n            </div>\n          </div>\n        </div>\n      </template>\n    </div>\n\n    <section\n      v-if=\"state.editing\"\n      data-slot=\"dashboard-library\"\n      :aria-label=\"t('dashboard.customize.library', {}, 'Widget library')\"\n      class=\"bg-muted/40 flex flex-col gap-3 rounded-xl border p-4\"\n    >\n      <h2 class=\"text-sm font-medium\">{{ t('dashboard.customize.add', {}, 'Add widget') }}</h2>\n      <p v-if=\"available.length === 0\" class=\"text-muted-foreground text-sm\">\n        {{ t('dashboard.customize.library_empty', {}, 'Every widget is on the dashboard.') }}\n      </p>\n      <ul v-else class=\"flex flex-wrap gap-2\">\n        <li v-for=\"widget in available\" :key=\"widget.id\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            :title=\"widget.description\"\n            :aria-label=\"\n              t('dashboard.customize.add_widget', { widget: widget.label }, 'Add :widget')\n            \"\n            @click=\"editor.add(widget.id)\"\n          >\n            <PlusIcon aria-hidden=\"true\" />\n            {{ widget.label }}\n          </Button>\n        </li>\n      </ul>\n    </section>\n\n    <div data-slot=\"dashboard-announcer\" role=\"status\" aria-live=\"polite\" class=\"sr-only\">\n      {{ state.announcement }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/widgets/DashboardCustomizer.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DashboardCustomizeSchema, WidgetsBlock } from '@alfakit/core';
+/**
+ * A customizable dashboard (`Dashboard::customizable()`): the widget grid plus an "Edit
+ * dashboard" mode (drag or arrow keys on the handle to move, resize, hide, add from the
+ * library). Mirrors the React renderer.
+ */
+type __VLS_Props = {
+    block: WidgetsBlock;
+    customize: DashboardCustomizeSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=DashboardCustomizer.vue.d.ts.map

package/dist/components/widgets/DashboardCustomizer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardCustomizer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/DashboardCustomizer.vue"],"names":[],"mappings":"AAwTA,OAAO,KAAK,EACV,wBAAwB,EAExB,YAAY,EAEb,MAAM,eAAe,CAAA;AA0BtB;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,SAAS,EAAE,wBAAwB,CAAA;CAAE,CAAC;;AAupBhF,wBAMG"}

package/dist/components/widgets/DashboardCustomizer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,245 @@
+import { useDirection as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStore as r } from "../../composables/use-store.js";
+import i from "../ui/Button2.js";
+import a from "../panel/LazyPlaceholder.js";
+import o from "./WidgetRenderer.js";
+import { DashboardEditor as s, columnSpanClasses as c, dashboardMoveForKey as ee, gridColumnsClasses as te, isLazyPlaceholder as ne } from "@alfakit/core";
+import { router as re } from "@inertiajs/vue3";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, nextTick as ie, normalizeClass as v, openBlock as y, renderList as b, toDisplayString as x, unref as S, useId as ae, watch as oe, withCtx as C, withModifiers as se } from "vue";
+import { CheckIcon as ce, EyeOffIcon as le, GripVerticalIcon as w, LayoutDashboardIcon as T, PlusIcon as E, RotateCcwIcon as D, XIcon as O } from "@lucide/vue";
+//#region src/components/widgets/DashboardCustomizer.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-editing"], A = ["aria-label"], j = {
+	key: 0,
+	role: "alert",
+	class: "text-destructive text-sm"
+}, M = ["id"], N = {
+	key: 2,
+	"data-slot": "dashboard-empty",
+	class: "text-muted-foreground rounded-xl border border-dashed p-6 text-center text-sm"
+}, P = [
+	"data-dragging",
+	"aria-label",
+	"onDrop"
+], F = {
+	"data-slot": "dashboard-widget-controls",
+	class: "bg-background/95 absolute inset-x-2 top-2 z-10 flex items-center gap-1 rounded-md border p-1 shadow-sm"
+}, I = [
+	"aria-label",
+	"aria-describedby",
+	"aria-roledescription",
+	"onDragstart",
+	"onKeydown"
+], L = { class: "min-w-0 flex-1 truncate text-sm font-medium" }, R = [
+	"aria-label",
+	"value",
+	"onChange"
+], ue = ["value"], z = {
+	inert: "",
+	class: "pointer-events-none pt-12 select-none",
+	"aria-hidden": "true"
+}, B = {
+	key: 2,
+	class: "bg-card text-muted-foreground flex min-h-24 items-center justify-center rounded-xl border border-dashed p-6 text-sm"
+}, V = ["aria-label"], H = { class: "text-sm font-medium" }, U = {
+	key: 0,
+	class: "text-muted-foreground text-sm"
+}, de = {
+	key: 1,
+	class: "flex flex-wrap gap-2"
+}, fe = {
+	"data-slot": "dashboard-announcer",
+	role: "status",
+	"aria-live": "polite",
+	class: "sr-only"
+}, W = /*@__PURE__*/ _({
+	__name: "DashboardCustomizer",
+	props: {
+		block: {},
+		customize: {}
+	},
+	setup(_) {
+		let W = _, G = t(), K = e(), q = ae(), J = new s(W.customize, {
+			t: G,
+			onSaved: () => re.reload()
+		});
+		oe(() => W.customize, (e) => J.sync(e));
+		let Y = r(J.store), X = u(() => new Map(W.block.widgets.map((e) => [e.id, e]))), Z = u(() => Y.value.layout.filter((e) => !e.hidden)), Q = u(() => (Y.value, J.available()));
+		function $(e) {
+			let t = X.value.get(e), n = J.widget(e);
+			if (Y.value.editing && n) {
+				let r = J.spanOf(e);
+				return n.spans.find((e) => e.value === r)?.columnSpan ?? t?.columnSpan;
+			}
+			return t?.columnSpan;
+		}
+		function pe(e, t) {
+			let n = ee(e.key, K.value);
+			if (n === null) return;
+			e.preventDefault();
+			let r = e.currentTarget;
+			J.move(t, n), ie(() => r.focus());
+		}
+		function me(e, t) {
+			e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t)), J.dragStart(t);
+		}
+		let he = u(() => Z.value.map((e) => {
+			let t = X.value.get(e.id), n = t && ne(t) ? t : null;
+			return {
+				id: e.id,
+				label: J.label(e.id),
+				widget: t && !n ? t : null,
+				lazy: n
+			};
+		}));
+		return (e, t) => (y(), p("div", {
+			"data-slot": "dashboard",
+			"data-editing": S(Y).editing ? "" : void 0,
+			class: "flex flex-col gap-4"
+		}, [
+			m("div", {
+				"data-slot": "dashboard-toolbar",
+				role: "toolbar",
+				"aria-label": S(G)("dashboard.customize.toolbar", {}, "Dashboard layout"),
+				class: "flex flex-wrap items-center justify-end gap-2"
+			}, [S(Y).editing ? (y(), p(l, { key: 0 }, [
+				g(i, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					disabled: S(Y).saving,
+					onClick: t[0] ||= (e) => S(J).resetDraft()
+				}, {
+					default: C(() => [g(S(D), { "aria-hidden": "true" }), h(" " + x(S(G)("dashboard.customize.reset", {}, "Reset to default")), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				g(i, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					disabled: S(Y).saving,
+					onClick: t[1] ||= (e) => S(J).cancel()
+				}, {
+					default: C(() => [g(S(O), { "aria-hidden": "true" }), h(" " + x(S(G)("dashboard.customize.cancel", {}, "Cancel")), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				g(i, {
+					type: "button",
+					size: "sm",
+					disabled: S(Y).saving,
+					onClick: t[2] ||= (e) => S(J).save()
+				}, {
+					default: C(() => [g(S(ce), { "aria-hidden": "true" }), h(" " + x(S(G)("dashboard.customize.save", {}, "Save")), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			], 64)) : (y(), d(i, {
+				key: 1,
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: t[3] ||= (e) => S(J).start()
+			}, {
+				default: C(() => [g(S(T), { "aria-hidden": "true" }), h(" " + x(S(G)("dashboard.customize.edit", {}, "Edit dashboard")), 1)]),
+				_: 1
+			}))], 8, A),
+			S(Y).error ? (y(), p("p", j, x(S(Y).error), 1)) : f("", !0),
+			S(Y).editing ? (y(), p("p", {
+				key: 1,
+				id: S(q),
+				class: "sr-only"
+			}, x(S(G)("dashboard.customize.move_help", {}, "Use the arrow keys to move the widget, Home or End to move it to the start or end.")), 9, M)) : f("", !0),
+			Z.value.length === 0 ? (y(), p("p", N, x(S(G)("dashboard.customize.empty", {}, "No widgets on this dashboard yet.")), 1)) : (y(), p("div", {
+				key: 3,
+				"data-slot": "widgets",
+				class: v(S(n)("grid gap-6", S(te)(W.block.columns)))
+			}, [(y(!0), p(l, null, b(he.value, (e) => (y(), p(l, { key: e.id }, [S(Y).editing ? (y(), p("div", {
+				key: 1,
+				"data-slot": "dashboard-widget",
+				"data-dragging": S(Y).dragging === e.id ? "" : void 0,
+				role: "group",
+				"aria-label": e.label,
+				class: v(S(n)("relative min-w-0 rounded-xl border-2 border-dashed p-1", S(Y).dragging === e.id && "opacity-50", S(c)($(e.id)))),
+				onDragover: t[5] ||= (e) => S(Y).dragging !== null && e.preventDefault(),
+				onDrop: se((t) => S(J).dropOn(e.id), ["prevent"])
+			}, [m("div", F, [
+				m("button", {
+					type: "button",
+					"data-slot": "dashboard-widget-handle",
+					draggable: "true",
+					"aria-label": S(G)("dashboard.customize.move", { widget: e.label }, "Move :widget"),
+					"aria-describedby": S(q),
+					"aria-roledescription": S(G)("dashboard.customize.sortable", {}, "sortable"),
+					class: "hover:bg-accent focus-visible:ring-ring/50 cursor-grab rounded p-1 outline-none focus-visible:ring-[3px] active:cursor-grabbing",
+					onDragstart: (t) => me(t, e.id),
+					onDragend: t[4] ||= (e) => S(J).dragEnd(),
+					onKeydown: (t) => pe(t, e.id)
+				}, [g(S(w), {
+					class: "size-4",
+					"aria-hidden": "true"
+				})], 40, I),
+				m("span", L, x(e.label), 1),
+				(S(J).widget(e.id)?.spans.length ?? 0) > 1 ? (y(), p("select", {
+					key: 0,
+					"data-slot": "dashboard-widget-span",
+					"aria-label": S(G)("dashboard.customize.size", { widget: e.label }, "Size of :widget"),
+					class: "border-input bg-background h-7 rounded-md border px-1 text-xs",
+					value: S(J).spanOf(e.id),
+					onChange: (t) => S(J).setSpan(e.id, Number(t.target.value))
+				}, [(y(!0), p(l, null, b(S(J).widget(e.id).spans, (e) => (y(), p("option", {
+					key: e.value,
+					value: e.value
+				}, x(e.label), 9, ue))), 128))], 40, R)) : f("", !0),
+				g(i, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					"aria-label": S(G)("dashboard.customize.hide", { widget: e.label }, "Hide :widget"),
+					onClick: (t) => S(J).hide(e.id)
+				}, {
+					default: C(() => [g(S(le), { "aria-hidden": "true" })]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])
+			]), m("div", z, [e.widget ? (y(), d(o, {
+				key: 0,
+				widget: e.widget
+			}, null, 8, ["widget"])) : e.lazy ? (y(), d(a, {
+				key: 1,
+				variant: e.lazy.type === "TableWidget" ? "table" : "widget"
+			}, null, 8, ["variant"])) : (y(), p("div", B, x(S(G)("dashboard.customize.pending", { widget: e.label }, ":widget appears once you save.")), 1))])], 42, P)) : (y(), p("div", {
+				key: 0,
+				class: v(S(n)("min-w-0", S(c)($(e.id))))
+			}, [e.widget ? (y(), d(o, {
+				key: 0,
+				widget: e.widget
+			}, null, 8, ["widget"])) : e.lazy ? (y(), d(a, {
+				key: 1,
+				variant: e.lazy.type === "TableWidget" ? "table" : "widget"
+			}, null, 8, ["variant"])) : f("", !0)], 2))], 64))), 128))], 2)),
+			S(Y).editing ? (y(), p("section", {
+				key: 4,
+				"data-slot": "dashboard-library",
+				"aria-label": S(G)("dashboard.customize.library", {}, "Widget library"),
+				class: "bg-muted/40 flex flex-col gap-3 rounded-xl border p-4"
+			}, [m("h2", H, x(S(G)("dashboard.customize.add", {}, "Add widget")), 1), Q.value.length === 0 ? (y(), p("p", U, x(S(G)("dashboard.customize.library_empty", {}, "Every widget is on the dashboard.")), 1)) : (y(), p("ul", de, [(y(!0), p(l, null, b(Q.value, (e) => (y(), p("li", { key: e.id }, [g(i, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				title: e.description,
+				"aria-label": S(G)("dashboard.customize.add_widget", { widget: e.label }, "Add :widget"),
+				onClick: (t) => S(J).add(e.id)
+			}, {
+				default: C(() => [g(S(E), { "aria-hidden": "true" }), h(" " + x(e.label), 1)]),
+				_: 2
+			}, 1032, [
+				"title",
+				"aria-label",
+				"onClick"
+			])]))), 128))]))], 8, V)) : f("", !0),
+			m("div", fe, x(S(Y).announcement), 1)
+		], 8, k));
+	}
+});
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=DashboardCustomizer.vue_vue_type_script_setup_true_lang.js.map