npm - @alfakit/vue - Versions diffs - 0.1.8 → 0.1.10 - Mend

@alfakit/vue 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/dist/components/dev-tools/DevToolsInspector.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevToolsInspector.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Sheet","_withCtx","_createVNode","SheetTrigger","Button","_unref","SheetContent","_createElementVNode","SheetHeader","SheetTitle","_createTextVNode","_toDisplayString","SheetDescription","ScrollArea","_createElementBlock","_Fragment","_createCommentVNode","_renderList","Input","DevToolsJsonNode","Button_default","Input_default","Sheet_default","SheetContent_default","SheetDescription_default","SheetHeader_default","SheetTitle_default","SheetTrigger_default","ScrollArea_default","DevToolsJsonNode_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","_hoisted_28","_hoisted_29","_hoisted_30","_hoisted_31","_hoisted_32","_hoisted_33","_hoisted_34","_hoisted_35","_hoisted_36","_hoisted_37","DevToolsInspector_vue_vue_type_script_setup_true_lang_default","t","useT","formatter","useFormatter","direction","useDirection","props","useAlfakitProps","tools","computed","data","inspectableProps","payload","byteLength","query","ref","copied","serverTime","search","searchJson","roots","jsonEntries","parameters","stop","timer","onMounted","latestServerTiming","router","onBeforeUnmount","copy","prettyJson","time","value","openBlock","createBlock","withCtx","createVNode","unref","BracesIcon","createElementVNode","createTextVNode","toDisplayString","formatBytes","createElementBlock","Fragment","createCommentVNode","renderList","key","jsonScalar","item","ExternalLinkIcon","CheckIcon","CopyIcon","_cache","$event","entry"],"sources":["../../../src/components/dev-tools/DevToolsInspector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n byteLength,\n formatBytes,\n inspectableProps,\n jsonEntries,\n jsonScalar,\n latestServerTiming,\n prettyJson,\n searchJson,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { BracesIcon, CheckIcon, CopyIcon, ExternalLinkIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport { useAlfakitProps, useDirection, useFormatter, useT } from '../../context'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport DevToolsJsonNode from './DevToolsJsonNode.vue'\n\n/*\n The schema inspector: a floating developer button that opens a drawer with the page's\n * props as a searchable JSON tree (with a copy button), what the context token identifies,\n * the server time reported in `Server-Timing`, the payload size and editor links for the\n * PHP classes behind the page. Rendered only for pages that carry `alfakitDevTools`.\n /\nconst t = useT()\nconst formatter = useFormatter()\nconst direction = useDirection()\nconst props = useAlfakitProps()\nconst tools = computed(() => props.value.alfakitDevTools)\nconst data = computed(() => inspectableProps(props.value as unknown as Record<string, unknown>))\nconst payload = computed(() => byteLength(props.value))\nconst query = ref('')\nconst copied = ref(false)\nconst serverTime = ref<number \| null>(null)\nconst search = computed(() => searchJson(data.value, query.value))\nconst roots = computed(() => jsonEntries(data.value))\nconst parameters = computed(() => Object.entries(tools.value?.context.parameters ?? {}))\n\nlet stop: (() => void) \| undefined\nlet timer: ReturnType<typeof setTimeout> \| undefined\n\nonMounted(() => {\n serverTime.value = latestServerTiming()\n // Re-read after every visit: the latest response carries the newest header.\n stop = router.on('finish', () => {\n serverTime.value = latestServerTiming()\n })\n})\n\nonBeforeUnmount(() => {\n stop?.()\n clearTimeout(timer)\n})\n\nconst copy = () => {\n void navigator.clipboard?.writeText(prettyJson(data.value)).then(() => {\n copied.value = true\n clearTimeout(timer)\n timer = setTimeout(() => (copied.value = false), 2000)\n })\n}\n\nconst time = (value: number \| null) =>\n value === null ? t('dev_tools.never', {}, 'Never') : formatter.value.dateTime(value 1000)\n</script>\n\n<template>\n <Sheet v-if=\"tools\">\n <SheetTrigger as-child>\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"icon\"\n :aria-label=\"t('dev_tools.open', {}, 'Open schema inspector')\"\n data-slot=\"dev-tools-toggle\"\n class=\"fixed end-4 bottom-4 z-40 rounded-full shadow-md\"\n >\n <BracesIcon />\n </Button>\n </SheetTrigger>\n <SheetContent\n :side=\"direction === 'rtl' ? 'left' : 'right'\"\n class=\"flex w-full flex-col gap-0 p-0 sm:max-w-xl\"\n >\n <div data-slot=\"dev-tools\" class=\"flex min-h-0 flex-1 flex-col\">\n <SheetHeader class=\"border-b\">\n <SheetTitle class=\"flex items-center gap-2\">\n <BracesIcon class=\"size-4\" />\n {{ t('dev_tools.title', {}, 'Schema inspector') }}\n </SheetTitle>\n <SheetDescription class=\"truncate font-mono text-xs\" :title=\"tools.context.page\">\n {{ tools.context.page }}\n </SheetDescription>\n </SheetHeader>\n <ScrollArea class=\"min-h-0 flex-1\">\n <div class=\"space-y-5 p-4 text-sm\">\n <dl class=\"grid grid-cols-2 gap-3\">\n <div class=\"rounded-md border p-3\">\n <dt class=\"text-muted-foreground text-xs\">\n {{ t('dev_tools.server_time', {}, 'Server time') }}\n </dt>\n <dd class=\"font-mono text-sm font-semibold tabular-nums\">\n {{\n serverTime === null\n ? t('dev_tools.not_measured', {}, 'Not measured')\n : t(\n 'dev_tools.milliseconds',\n { value: formatter.number(serverTime) },\n ':value ms',\n )\n }}\n </dd>\n </div>\n <div class=\"rounded-md border p-3\">\n <dt class=\"text-muted-foreground text-xs\">\n {{ t('dev_tools.payload', {}, 'Payload size') }}\n </dt>\n <dd class=\"font-mono text-sm font-semibold tabular-nums\">\n {{ formatBytes(payload) }}\n </dd>\n </div>\n </dl>\n\n <section data-slot=\"dev-tools-context\">\n <h3 class=\"mb-2 text-sm font-medium\">\n {{ t('dev_tools.context', {}, 'Context token') }}\n </h3>\n <dl class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs\">\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.panel', {}, 'Panel') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.context.panel }}</dd>\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.page', {}, 'Page') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\" :title=\"tools.context.page\">\n {{ tools.context.page }}\n </dd>\n <template v-if=\"tools.context.component\">\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.component', {}, 'Component') }}\n </dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.context.component }}</dd>\n </template>\n <template v-if=\"tools.tenant !== null\">\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.tenant', {}, 'Tenant') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.tenant }}</dd>\n </template>\n <template v-for=\"[key, value] in parameters\" :key=\"key\">\n <dt class=\"text-muted-foreground\">{{ key }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ jsonScalar(value) }}</dd>\n </template>\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.bound_to_user', {}, 'Bound to the user') }}\n </dt>\n <dd>\n {{\n tools.context.boundToUser\n ? t('dev_tools.yes', {}, 'Yes')\n : t('dev_tools.no', {}, 'No')\n }}\n </dd>\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.issued_at', {}, 'Issued') }}</dt>\n <dd>{{ time(tools.context.issuedAt) }}</dd>\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.expires_at', {}, 'Expires') }}\n </dt>\n <dd>{{ time(tools.context.expiresAt) }}</dd>\n </dl>\n </section>\n\n <section data-slot=\"dev-tools-classes\">\n <h3 class=\"mb-2 text-sm font-medium\">{{ t('dev_tools.classes', {}, 'Classes') }}</h3>\n <ul class=\"divide-y rounded-md border text-xs\">\n <li\n v-for=\"item in tools.classes\"\n :key=\"item.role\"\n class=\"flex items-center gap-2 px-3 py-1.5\"\n >\n <span class=\"text-muted-foreground w-16 shrink-0\">\n {{ t(`dev_tools.roles.${item.role}`, {}, item.role) }}\n </span>\n <span\n class=\"min-w-0 flex-1 truncate font-mono\"\n :title=\"item.file ? `${item.file}:${item.line ?? 1}` : item.class\"\n >\n {{ item.class }}\n </span>\n <a\n v-if=\"item.url\"\n :href=\"item.url\"\n class=\"text-primary inline-flex shrink-0 items-center gap-1 hover:underline\"\n :aria-label=\"\n t(\n 'dev_tools.open_in_editor',\n { class: item.class, editor: tools.editor ?? '' },\n 'Open :class in :editor',\n )\n \"\n >\n <ExternalLinkIcon class=\"size-3.5\" />\n </a>\n </li>\n </ul>\n <p v-if=\"tools.editor === null\" class=\"text-muted-foreground mt-2 text-xs\">\n {{\n t(\n 'dev_tools.no_editor',\n {},\n 'Set APP_EDITOR (config app.editor) to open these classes in your editor.',\n )\n }}\n </p>\n </section>\n\n <section data-slot=\"dev-tools-schema\">\n <div class=\"mb-2 flex items-center gap-2\">\n <h3 class=\"me-auto text-sm font-medium\">\n {{ t('dev_tools.schema', {}, 'Schema') }}\n </h3>\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" @click=\"copy\">\n <CheckIcon v-if=\"copied\" />\n <CopyIcon v-else />\n {{\n copied\n ? t('dev_tools.copied', {}, 'Copied')\n : t('dev_tools.copy', {}, 'Copy JSON')\n }}\n </Button>\n </div>\n <Input\n v-model=\"query\"\n type=\"search\"\n :placeholder=\"t('dev_tools.search', {}, 'Search keys and values')\"\n :aria-label=\"t('dev_tools.search', {}, 'Search keys and values')\"\n class=\"mb-2 h-8\"\n />\n <p\n v-if=\"query.trim() !== '' && search.matches.size === 0\"\n class=\"text-muted-foreground text-sm\"\n >\n {{\n t('dev_tools.no_matches', { query: query.trim() }, 'Nothing matches “:query”.')\n }}\n </p>\n <ul\n v-else\n dir=\"ltr\"\n role=\"tree\"\n :aria-label=\"t('dev_tools.schema', {}, 'Schema')\"\n class=\"bg-muted/40 overflow-x-auto rounded-md p-2 text-start font-mono text-xs leading-relaxed\"\n >\n <DevToolsJsonNode\n v-for=\"entry in roots\"\n :key=\"entry.path\"\n :entry=\"entry\"\n :depth=\"0\"\n :search=\"search\"\n :query=\"query\"\n />\n </ul>\n </section>\n </div>\n </ScrollArea>\n </div>\n </SheetContent>\n </Sheet>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"DevToolsInspector.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Sheet","_withCtx","_createVNode","SheetTrigger","Button","_unref","SheetContent","_createElementVNode","SheetHeader","SheetTitle","_createTextVNode","_toDisplayString","SheetDescription","ScrollArea","_createElementBlock","_Fragment","_createCommentVNode","_renderList","Input","DevToolsJsonNode","Button_default","Input_default","Sheet_default","SheetContent_default","SheetDescription_default","SheetHeader_default","SheetTitle_default","SheetTrigger_default","ScrollArea_default","DevToolsJsonNode_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","_hoisted_28","_hoisted_29","_hoisted_30","_hoisted_31","_hoisted_32","_hoisted_33","_hoisted_34","_hoisted_35","_hoisted_36","_hoisted_37","DevToolsInspector_vue_vue_type_script_setup_true_lang_default","t","useT","formatter","useFormatter","direction","useDirection","props","useAlfakitProps","tools","computed","data","inspectableProps","payload","byteLength","query","ref","copied","serverTime","search","searchJson","roots","jsonEntries","parameters","stop","timer","onMounted","latestServerTiming","router","onBeforeUnmount","copy","prettyJson","time","value","openBlock","createBlock","withCtx","createVNode","unref","BracesIcon","createElementVNode","createTextVNode","toDisplayString","formatBytes","createElementBlock","Fragment","createCommentVNode","renderList","key","jsonScalar","item","ExternalLinkIcon","CheckIcon","CopyIcon","_cache","$event","entry"],"sources":["../../../src/components/dev-tools/DevToolsInspector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n byteLength,\n formatBytes,\n inspectableProps,\n jsonEntries,\n jsonScalar,\n latestServerTiming,\n prettyJson,\n searchJson,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { BracesIcon, CheckIcon, CopyIcon, ExternalLinkIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport { useAlfakitProps, useDirection, useFormatter, useT } from '../../context'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport DevToolsJsonNode from './DevToolsJsonNode.vue'\n\n/*\n The schema inspector: a floating developer button that opens a drawer with the page's\n * props as a searchable JSON tree (with a copy button), what the context token identifies,\n * the server time reported in `Server-Timing`, the payload size and editor links for the\n * PHP classes behind the page. Rendered only for pages that carry `alfakitDevTools`.\n /\nconst t = useT()\nconst formatter = useFormatter()\nconst direction = useDirection()\nconst props = useAlfakitProps()\nconst tools = computed(() => props.value.alfakitDevTools)\nconst data = computed(() => inspectableProps(props.value as unknown as Record<string, unknown>))\nconst payload = computed(() => byteLength(props.value))\nconst query = ref('')\nconst copied = ref(false)\nconst serverTime = ref<number \| null>(null)\nconst search = computed(() => searchJson(data.value, query.value))\nconst roots = computed(() => jsonEntries(data.value))\nconst parameters = computed(() => Object.entries(tools.value?.context.parameters ?? {}))\n\nlet stop: (() => void) \| undefined\nlet timer: ReturnType<typeof setTimeout> \| undefined\n\nonMounted(() => {\n serverTime.value = latestServerTiming()\n // Re-read after every visit: the latest response carries the newest header.\n stop = router.on('finish', () => {\n serverTime.value = latestServerTiming()\n })\n})\n\nonBeforeUnmount(() => {\n stop?.()\n clearTimeout(timer)\n})\n\nconst copy = () => {\n void navigator.clipboard?.writeText(prettyJson(data.value)).then(() => {\n copied.value = true\n clearTimeout(timer)\n timer = setTimeout(() => (copied.value = false), 2000)\n })\n}\n\nconst time = (value: number \| null) =>\n value === null ? t('dev_tools.never', {}, 'Never') : formatter.value.dateTime(value 1000)\n</script>\n\n<template>\n <Sheet v-if=\"tools\">\n <SheetTrigger as-child>\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"icon\"\n :aria-label=\"t('dev_tools.open', {}, 'Open schema inspector')\"\n data-slot=\"dev-tools-toggle\"\n class=\"fixed end-4 bottom-16 z-40 rounded-full shadow-md [[data-slot=starter-kit-root]_&]:end-auto [[data-slot=starter-kit-root]_&]:right-4\"\n >\n <BracesIcon />\n </Button>\n </SheetTrigger>\n <SheetContent\n :side=\"direction === 'rtl' ? 'left' : 'right'\"\n class=\"flex w-full flex-col gap-0 p-0 sm:max-w-xl\"\n >\n <div data-slot=\"dev-tools\" class=\"flex min-h-0 flex-1 flex-col\">\n <SheetHeader class=\"border-b\">\n <SheetTitle class=\"flex items-center gap-2\">\n <BracesIcon class=\"size-4\" />\n {{ t('dev_tools.title', {}, 'Schema inspector') }}\n </SheetTitle>\n <SheetDescription class=\"truncate font-mono text-xs\" :title=\"tools.context.page\">\n {{ tools.context.page }}\n </SheetDescription>\n </SheetHeader>\n <ScrollArea class=\"min-h-0 flex-1\">\n <div class=\"space-y-5 p-4 text-sm\">\n <dl class=\"grid grid-cols-2 gap-3\">\n <div class=\"rounded-md border p-3\">\n <dt class=\"text-muted-foreground text-xs\">\n {{ t('dev_tools.server_time', {}, 'Server time') }}\n </dt>\n <dd class=\"font-mono text-sm font-semibold tabular-nums\">\n {{\n serverTime === null\n ? t('dev_tools.not_measured', {}, 'Not measured')\n : t(\n 'dev_tools.milliseconds',\n { value: formatter.number(serverTime) },\n ':value ms',\n )\n }}\n </dd>\n </div>\n <div class=\"rounded-md border p-3\">\n <dt class=\"text-muted-foreground text-xs\">\n {{ t('dev_tools.payload', {}, 'Payload size') }}\n </dt>\n <dd class=\"font-mono text-sm font-semibold tabular-nums\">\n {{ formatBytes(payload) }}\n </dd>\n </div>\n </dl>\n\n <section data-slot=\"dev-tools-context\">\n <h3 class=\"mb-2 text-sm font-medium\">\n {{ t('dev_tools.context', {}, 'Context token') }}\n </h3>\n <dl class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs\">\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.panel', {}, 'Panel') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.context.panel }}</dd>\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.page', {}, 'Page') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\" :title=\"tools.context.page\">\n {{ tools.context.page }}\n </dd>\n <template v-if=\"tools.context.component\">\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.component', {}, 'Component') }}\n </dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.context.component }}</dd>\n </template>\n <template v-if=\"tools.tenant !== null\">\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.tenant', {}, 'Tenant') }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ tools.tenant }}</dd>\n </template>\n <template v-for=\"[key, value] in parameters\" :key=\"key\">\n <dt class=\"text-muted-foreground\">{{ key }}</dt>\n <dd class=\"min-w-0 truncate font-mono\">{{ jsonScalar(value) }}</dd>\n </template>\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.bound_to_user', {}, 'Bound to the user') }}\n </dt>\n <dd>\n {{\n tools.context.boundToUser\n ? t('dev_tools.yes', {}, 'Yes')\n : t('dev_tools.no', {}, 'No')\n }}\n </dd>\n <dt class=\"text-muted-foreground\">{{ t('dev_tools.issued_at', {}, 'Issued') }}</dt>\n <dd>{{ time(tools.context.issuedAt) }}</dd>\n <dt class=\"text-muted-foreground\">\n {{ t('dev_tools.expires_at', {}, 'Expires') }}\n </dt>\n <dd>{{ time(tools.context.expiresAt) }}</dd>\n </dl>\n </section>\n\n <section data-slot=\"dev-tools-classes\">\n <h3 class=\"mb-2 text-sm font-medium\">{{ t('dev_tools.classes', {}, 'Classes') }}</h3>\n <ul class=\"divide-y rounded-md border text-xs\">\n <li\n v-for=\"item in tools.classes\"\n :key=\"item.role\"\n class=\"flex items-center gap-2 px-3 py-1.5\"\n >\n <span class=\"text-muted-foreground w-16 shrink-0\">\n {{ t(`dev_tools.roles.${item.role}`, {}, item.role) }}\n </span>\n <span\n class=\"min-w-0 flex-1 truncate font-mono\"\n :title=\"item.file ? `${item.file}:${item.line ?? 1}` : item.class\"\n >\n {{ item.class }}\n </span>\n <a\n v-if=\"item.url\"\n :href=\"item.url\"\n class=\"text-primary inline-flex shrink-0 items-center gap-1 hover:underline\"\n :aria-label=\"\n t(\n 'dev_tools.open_in_editor',\n { class: item.class, editor: tools.editor ?? '' },\n 'Open :class in :editor',\n )\n \"\n >\n <ExternalLinkIcon class=\"size-3.5\" />\n </a>\n </li>\n </ul>\n <p v-if=\"tools.editor === null\" class=\"text-muted-foreground mt-2 text-xs\">\n {{\n t(\n 'dev_tools.no_editor',\n {},\n 'Set APP_EDITOR (config app.editor) to open these classes in your editor.',\n )\n }}\n </p>\n </section>\n\n <section data-slot=\"dev-tools-schema\">\n <div class=\"mb-2 flex items-center gap-2\">\n <h3 class=\"me-auto text-sm font-medium\">\n {{ t('dev_tools.schema', {}, 'Schema') }}\n </h3>\n <Button type=\"button\" variant=\"ghost\" size=\"sm\" @click=\"copy\">\n <CheckIcon v-if=\"copied\" />\n <CopyIcon v-else />\n {{\n copied\n ? t('dev_tools.copied', {}, 'Copied')\n : t('dev_tools.copy', {}, 'Copy JSON')\n }}\n </Button>\n </div>\n <Input\n v-model=\"query\"\n type=\"search\"\n :placeholder=\"t('dev_tools.search', {}, 'Search keys and values')\"\n :aria-label=\"t('dev_tools.search', {}, 'Search keys and values')\"\n class=\"mb-2 h-8\"\n />\n <p\n v-if=\"query.trim() !== '' && search.matches.size === 0\"\n class=\"text-muted-foreground text-sm\"\n >\n {{\n t('dev_tools.no_matches', { query: query.trim() }, 'Nothing matches “:query”.')\n }}\n </p>\n <ul\n v-else\n dir=\"ltr\"\n role=\"tree\"\n :aria-label=\"t('dev_tools.schema', {}, 'Schema')\"\n class=\"bg-muted/40 overflow-x-auto rounded-md p-2 text-start font-mono text-xs leading-relaxed\"\n >\n <DevToolsJsonNode\n v-for=\"entry in roots\"\n :key=\"entry.path\"\n :entry=\"entry\"\n :depth=\"0\"\n :search=\"search\"\n :query=\"query\"\n />\n </ul>\n </section>\n </div>\n </ScrollArea>\n </div>\n </SheetContent>\n </Sheet>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/CheckboxListField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxListField.js","names":["_sfc_main","CheckboxListField_vue_vue_type_script_setup_true_lang_default","CheckboxListField_default"],"sources":["../../../src/components/fields/CheckboxListField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CheckboxListSchema } from '@alfakit/core'\nimport { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Input from '../ui/Input.vue'\nimport Label from '../ui/Label.vue'\n\nconst props = defineProps<{ component: CheckboxListSchema }>()\nconst t = useT()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<Array<\n string \| number\n> \| null>(() => props.component)\nconst search = ref('')\n// `searchDebounce()`: the list is filtered by `query`, which trails the input.\nconst query = ref('')\nlet queryTimer: ReturnType<typeof setTimeout> \| undefined\n\nwatch(search, (term) => {\n clearTimeout(queryTimer)\n\n if (!props.component.searchDebounce) {\n query.value = term\n\n return\n }\n\n queryTimer = setTimeout(() => (query.value = term), props.component.searchDebounce)\n})\nonBeforeUnmount(() => clearTimeout(queryTimer))\n\nconst selected = computed(() => (value.value ?? []).map(String))\nconst options = computed(() =>\n props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nconst visible = computed(() =>\n options.value.filter((option) =>\n (props.component.allowHtml ? htmlLabelToText(option.label) : option.label)\n .toLowerCase()\n .includes(query.value.toLowerCase()),\n ),\n)\n\n/*\n `gridDirection('column')`: options flow down each column (CSS columns). Classes are\n * spelled out so Tailwind generates them.\n /\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n 2: 'md:columns-2',\n 3: 'md:columns-3',\n 4: 'md:columns-4',\n 5: 'md:columns-5',\n 6: 'md:columns-6',\n}\nconst columnFlow = computed(\n () => props.component.gridDirection === 'column' && (props.component.gridColumns ?? 1) > 1,\n)\n\nconst toggle = (key: string, checked: boolean) => {\n setValue(checked ? [...selected.value, key] : selected.value.filter((item) => item !== key))\n}\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <div class=\"flex flex-col gap-2\">\n <div\n v-if=\"props.component.searchable \|\| (props.component.bulkToggleable && !readOnly)\"\n class=\"flex items-center gap-2\"\n >\n <Input\n v-if=\"props.component.searchable\"\n v-model=\"search\"\n :placeholder=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n :aria-label=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n class=\"h-8\"\n />\n <div v-if=\"props.component.bulkToggleable && !readOnly\" class=\"flex gap-1\">\n <Button\n v-if=\"!props.component.selectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"select-all\"\n :disabled=\"disabled\"\n @click=\"\n setValue(options.filter((option) => !option.disabled).map((option) => option.value))\n \"\n >\n <Icon\n v-if=\"props.component.selectAllAction?.icon\"\n :name=\"props.component.selectAllAction.icon\"\n />\n {{ props.component.selectAllAction?.label ?? t('table.select_all', {}, 'Select all') }}\n </Button>\n <Button\n v-if=\"!props.component.deselectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"deselect-all\"\n :disabled=\"disabled\"\n @click=\"setValue([])\"\n >\n <Icon\n v-if=\"props.component.deselectAllAction?.icon\"\n :name=\"props.component.deselectAllAction.icon\"\n />\n {{\n props.component.deselectAllAction?.label ??\n t('table.deselect_all', {}, 'Deselect all')\n }}\n </Button>\n </div>\n </div>\n <div\n :data-grid-direction=\"props.component.gridDirection\"\n :class=\"\n cn(\n props.component.inline\n ? 'flex flex-wrap gap-4'\n : columnFlow\n ? cn(\n 'gap-x-3 :mb-3 *:break-inside-avoid',\n COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n )\n : 'grid gap-3',\n !props.component.inline &&\n !columnFlow &&\n gridColumnsClasses(\n props.component.gridColumns\n ? { default: 1, md: props.component.gridColumns }\n : { default: 1 },\n ),\n )\n \"\n role=\"group\"\n :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n :aria-describedby=\"aria['aria-describedby']\"\n >\n <div v-for=\"option in visible\" :key=\"option.value\" class=\"flex items-start gap-2\">\n <Checkbox\n :id=\"`${id}-${option.value}`\"\n :model-value=\"selected.includes(option.value)\"\n :disabled=\"disabled \|\| readOnly \|\| option.disabled\"\n :aria-invalid=\"aria['aria-invalid']\"\n class=\"mt-0.5\"\n @update:model-value=\"toggle(option.value, $event === true)\"\n />\n <div class=\"grid gap-0.5\">\n <Label\n :for=\"`${id}-${option.value}`\"\n :class=\"cn('font-normal', option.color && textColorClasses[option.color])\"\n ><Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" /><span\n v-if=\"props.component.allowHtml\"\n v-html=\"option.label\"\n /><template v-else>{{ option.label }}</template></Label\n >\n <p v-if=\"option.description\" class=\"text-muted-foreground text-xs\">\n {{ option.description }}\n </p>\n </div>\n </div>\n </div>\n <p\n v-if=\"props.component.searchable && query !== '' && visible.length === 0\"\n data-slot=\"checkbox-list-empty\"\n role=\"status\"\n class=\"text-muted-foreground text-sm\"\n >\n {{ props.component.noSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n </p>\n </div>\n </FieldWrapper>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"CheckboxListField.js","names":["_sfc_main","CheckboxListField_vue_vue_type_script_setup_true_lang_default","CheckboxListField_default"],"sources":["../../../src/components/fields/CheckboxListField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CheckboxListSchema } from '@alfakit/core'\nimport { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Input from '../ui/Input.vue'\nimport Label from '../ui/Label.vue'\n\nconst props = defineProps<{ component: CheckboxListSchema }>()\nconst t = useT()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<Array<\n string \| number\n> \| null>(() => props.component)\nconst search = ref('')\n// `searchDebounce()`: the list is filtered by `query`, which trails the input.\nconst query = ref('')\nlet queryTimer: ReturnType<typeof setTimeout> \| undefined\n\nwatch(search, (term) => {\n clearTimeout(queryTimer)\n\n if (!props.component.searchDebounce) {\n query.value = term\n\n return\n }\n\n queryTimer = setTimeout(() => (query.value = term), props.component.searchDebounce)\n})\nonBeforeUnmount(() => clearTimeout(queryTimer))\n\nconst selected = computed(() => (value.value ?? []).map(String))\nconst options = computed(() =>\n props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nconst visible = computed(() =>\n options.value.filter((option) =>\n (props.component.allowHtml ? htmlLabelToText(option.label) : option.label)\n .toLowerCase()\n .includes(query.value.toLowerCase()),\n ),\n)\n\n/*\n `gridDirection('column')`: options flow down each column (CSS columns). Classes are\n * spelled out so Tailwind generates them.\n /\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n 2: 'md:columns-2',\n 3: 'md:columns-3',\n 4: 'md:columns-4',\n 5: 'md:columns-5',\n 6: 'md:columns-6',\n}\nconst columnFlow = computed(\n () => props.component.gridDirection === 'column' && (props.component.gridColumns ?? 1) > 1,\n)\n\nconst toggle = (key: string, checked: boolean) => {\n setValue(checked ? [...selected.value, key] : selected.value.filter((item) => item !== key))\n}\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <div class=\"flex flex-col gap-2\">\n <div\n v-if=\"props.component.searchable \|\| (props.component.bulkToggleable && !readOnly)\"\n class=\"flex min-w-0 flex-wrap items-center gap-2\"\n >\n <Input\n v-if=\"props.component.searchable\"\n v-model=\"search\"\n :placeholder=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n :aria-label=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n class=\"h-8\"\n />\n <div v-if=\"props.component.bulkToggleable && !readOnly\" class=\"flex flex-wrap gap-1\">\n <Button\n v-if=\"!props.component.selectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"select-all\"\n :disabled=\"disabled\"\n @click=\"\n setValue(options.filter((option) => !option.disabled).map((option) => option.value))\n \"\n >\n <Icon\n v-if=\"props.component.selectAllAction?.icon\"\n :name=\"props.component.selectAllAction.icon\"\n />\n {{ props.component.selectAllAction?.label ?? t('table.select_all', {}, 'Select all') }}\n </Button>\n <Button\n v-if=\"!props.component.deselectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"deselect-all\"\n :disabled=\"disabled\"\n @click=\"setValue([])\"\n >\n <Icon\n v-if=\"props.component.deselectAllAction?.icon\"\n :name=\"props.component.deselectAllAction.icon\"\n />\n {{\n props.component.deselectAllAction?.label ??\n t('table.deselect_all', {}, 'Deselect all')\n }}\n </Button>\n </div>\n </div>\n <div\n :data-grid-direction=\"props.component.gridDirection\"\n :class=\"\n cn(\n props.component.inline\n ? 'flex flex-wrap gap-4'\n : columnFlow\n ? cn(\n 'gap-x-3 :mb-3 *:break-inside-avoid',\n COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n )\n : 'grid gap-3',\n !props.component.inline &&\n !columnFlow &&\n gridColumnsClasses(\n props.component.gridColumns\n ? { default: 1, md: props.component.gridColumns }\n : { default: 1 },\n ),\n )\n \"\n role=\"group\"\n :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n :aria-describedby=\"aria['aria-describedby']\"\n >\n <div v-for=\"option in visible\" :key=\"option.value\" class=\"flex items-start gap-2\">\n <Checkbox\n :id=\"`${id}-${option.value}`\"\n :model-value=\"selected.includes(option.value)\"\n :disabled=\"disabled \|\| readOnly \|\| option.disabled\"\n :aria-invalid=\"aria['aria-invalid']\"\n class=\"mt-0.5\"\n @update:model-value=\"toggle(option.value, $event === true)\"\n />\n <div class=\"grid gap-0.5\">\n <Label\n :for=\"`${id}-${option.value}`\"\n :class=\"cn('font-normal', option.color && textColorClasses[option.color])\"\n ><Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" /><span\n v-if=\"props.component.allowHtml\"\n v-html=\"option.label\"\n /><template v-else>{{ option.label }}</template></Label\n >\n <p v-if=\"option.description\" class=\"text-muted-foreground text-xs\">\n {{ option.description }}\n </p>\n </div>\n </div>\n </div>\n <p\n v-if=\"props.component.searchable && query !== '' && visible.length === 0\"\n data-slot=\"checkbox-list-empty\"\n role=\"status\"\n class=\"text-muted-foreground text-sm\"\n >\n {{ props.component.noSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n </p>\n </div>\n </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/CheckboxListField.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxListField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/CheckboxListField.vue"],"names":[],"mappings":"AAwLA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAcvD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;;~~AAmXrD~~,wBAMG"}
1	+ {"version":3,"file":"CheckboxListField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/CheckboxListField.vue"],"names":[],"mappings":"AAwLA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAcvD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;;AAsXrD,wBAMG"}

package/dist/components/fields/CheckboxListField.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -13,10 +13,10 @@ import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _
 //#region src/components/fields/CheckboxListField.vue?vue&type=script&setup=true&lang.ts
 var M = { class: "flex flex-col gap-2" }, N = {
 	key: 0,
-	class: "flex items-center gap-2"
+	class: "flex min-w-0 flex-wrap items-center gap-2"
 }, ee = {
 	key: 1,
-	class: "flex gap-1"
+	class: "flex flex-wrap gap-1"
 }, te = [
 	"data-grid-direction",
 	"aria-labelledby",

package/dist/components/fields/CheckboxListField.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxListField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_createElementBlock","Input","_createCommentVNode","Button","Icon","_createTextVNode","_toDisplayString","_normalizeClass","_Fragment","_renderList","_createVNode","Checkbox","Label","Icon_default","Button_default","Checkbox_default","Input_default","Label_default","FieldWrapper_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","CheckboxListField_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","useField","search","ref","query","queryTimer","watch","term","onBeforeUnmount","selected","computed","value","options","isOptionGroup","option","visible","htmlLabelToText","COLUMN_FLOW_CLASSES","columnFlow","toggle","checked","key","item","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","readOnly","createElementBlock","_cache","$event","createCommentVNode","disabled","setValue","createTextVNode","toDisplayString","normalizeClass","cn","gridColumnsClasses","fieldIds","aria","Fragment","renderList","createVNode","textColorClasses"],"sources":["../../../src/components/fields/CheckboxListField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CheckboxListSchema } from '@alfakit/core'\nimport { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Input from '../ui/Input.vue'\nimport Label from '../ui/Label.vue'\n\nconst props = defineProps<{ component: CheckboxListSchema }>()\nconst t = useT()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<Array<\n string \| number\n> \| null>(() => props.component)\nconst search = ref('')\n// `searchDebounce()`: the list is filtered by `query`, which trails the input.\nconst query = ref('')\nlet queryTimer: ReturnType<typeof setTimeout> \| undefined\n\nwatch(search, (term) => {\n clearTimeout(queryTimer)\n\n if (!props.component.searchDebounce) {\n query.value = term\n\n return\n }\n\n queryTimer = setTimeout(() => (query.value = term), props.component.searchDebounce)\n})\nonBeforeUnmount(() => clearTimeout(queryTimer))\n\nconst selected = computed(() => (value.value ?? []).map(String))\nconst options = computed(() =>\n props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nconst visible = computed(() =>\n options.value.filter((option) =>\n (props.component.allowHtml ? htmlLabelToText(option.label) : option.label)\n .toLowerCase()\n .includes(query.value.toLowerCase()),\n ),\n)\n\n/*\n `gridDirection('column')`: options flow down each column (CSS columns). Classes are\n * spelled out so Tailwind generates them.\n /\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n 2: 'md:columns-2',\n 3: 'md:columns-3',\n 4: 'md:columns-4',\n 5: 'md:columns-5',\n 6: 'md:columns-6',\n}\nconst columnFlow = computed(\n () => props.component.gridDirection === 'column' && (props.component.gridColumns ?? 1) > 1,\n)\n\nconst toggle = (key: string, checked: boolean) => {\n setValue(checked ? [...selected.value, key] : selected.value.filter((item) => item !== key))\n}\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <div class=\"flex flex-col gap-2\">\n <div\n v-if=\"props.component.searchable \|\| (props.component.bulkToggleable && !readOnly)\"\n class=\"flex items-center gap-2\"\n >\n <Input\n v-if=\"props.component.searchable\"\n v-model=\"search\"\n :placeholder=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n :aria-label=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n class=\"h-8\"\n />\n <div v-if=\"props.component.bulkToggleable && !readOnly\" class=\"flex gap-1\">\n <Button\n v-if=\"!props.component.selectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"select-all\"\n :disabled=\"disabled\"\n @click=\"\n setValue(options.filter((option) => !option.disabled).map((option) => option.value))\n \"\n >\n <Icon\n v-if=\"props.component.selectAllAction?.icon\"\n :name=\"props.component.selectAllAction.icon\"\n />\n {{ props.component.selectAllAction?.label ?? t('table.select_all', {}, 'Select all') }}\n </Button>\n <Button\n v-if=\"!props.component.deselectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"deselect-all\"\n :disabled=\"disabled\"\n @click=\"setValue([])\"\n >\n <Icon\n v-if=\"props.component.deselectAllAction?.icon\"\n :name=\"props.component.deselectAllAction.icon\"\n />\n {{\n props.component.deselectAllAction?.label ??\n t('table.deselect_all', {}, 'Deselect all')\n }}\n </Button>\n </div>\n </div>\n <div\n :data-grid-direction=\"props.component.gridDirection\"\n :class=\"\n cn(\n props.component.inline\n ? 'flex flex-wrap gap-4'\n : columnFlow\n ? cn(\n 'gap-x-3 :mb-3 *:break-inside-avoid',\n COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n )\n : 'grid gap-3',\n !props.component.inline &&\n !columnFlow &&\n gridColumnsClasses(\n props.component.gridColumns\n ? { default: 1, md: props.component.gridColumns }\n : { default: 1 },\n ),\n )\n \"\n role=\"group\"\n :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n :aria-describedby=\"aria['aria-describedby']\"\n >\n <div v-for=\"option in visible\" :key=\"option.value\" class=\"flex items-start gap-2\">\n <Checkbox\n :id=\"`${id}-${option.value}`\"\n :model-value=\"selected.includes(option.value)\"\n :disabled=\"disabled \|\| readOnly \|\| option.disabled\"\n :aria-invalid=\"aria['aria-invalid']\"\n class=\"mt-0.5\"\n @update:model-value=\"toggle(option.value, $event === true)\"\n />\n <div class=\"grid gap-0.5\">\n <Label\n :for=\"`${id}-${option.value}`\"\n :class=\"cn('font-normal', option.color && textColorClasses[option.color])\"\n ><Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" /><span\n v-if=\"props.component.allowHtml\"\n v-html=\"option.label\"\n /><template v-else>{{ option.label }}</template></Label\n >\n <p v-if=\"option.description\" class=\"text-muted-foreground text-xs\">\n {{ option.description }}\n </p>\n </div>\n </div>\n </div>\n <p\n v-if=\"props.component.searchable && query !== '' && visible.length === 0\"\n data-slot=\"checkbox-list-empty\"\n role=\"status\"\n class=\"text-muted-foreground text-sm\"\n >\n {{ props.component.noSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n </p>\n </div>\n </FieldWrapper>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"CheckboxListField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_createElementBlock","Input","_createCommentVNode","Button","Icon","_createTextVNode","_toDisplayString","_normalizeClass","_Fragment","_renderList","_createVNode","Checkbox","Label","Icon_default","Button_default","Checkbox_default","Input_default","Label_default","FieldWrapper_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","CheckboxListField_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","useField","search","ref","query","queryTimer","watch","term","onBeforeUnmount","selected","computed","value","options","isOptionGroup","option","visible","htmlLabelToText","COLUMN_FLOW_CLASSES","columnFlow","toggle","checked","key","item","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","readOnly","createElementBlock","_cache","$event","createCommentVNode","disabled","setValue","createTextVNode","toDisplayString","normalizeClass","cn","gridColumnsClasses","fieldIds","aria","Fragment","renderList","createVNode","textColorClasses"],"sources":["../../../src/components/fields/CheckboxListField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CheckboxListSchema } from '@alfakit/core'\nimport { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Input from '../ui/Input.vue'\nimport Label from '../ui/Label.vue'\n\nconst props = defineProps<{ component: CheckboxListSchema }>()\nconst t = useT()\nconst { value, setValue, error, id, disabled, readOnly, aria } = useField<Array<\n string \| number\n> \| null>(() => props.component)\nconst search = ref('')\n// `searchDebounce()`: the list is filtered by `query`, which trails the input.\nconst query = ref('')\nlet queryTimer: ReturnType<typeof setTimeout> \| undefined\n\nwatch(search, (term) => {\n clearTimeout(queryTimer)\n\n if (!props.component.searchDebounce) {\n query.value = term\n\n return\n }\n\n queryTimer = setTimeout(() => (query.value = term), props.component.searchDebounce)\n})\nonBeforeUnmount(() => clearTimeout(queryTimer))\n\nconst selected = computed(() => (value.value ?? []).map(String))\nconst options = computed(() =>\n props.component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n)\nconst visible = computed(() =>\n options.value.filter((option) =>\n (props.component.allowHtml ? htmlLabelToText(option.label) : option.label)\n .toLowerCase()\n .includes(query.value.toLowerCase()),\n ),\n)\n\n/*\n `gridDirection('column')`: options flow down each column (CSS columns). Classes are\n * spelled out so Tailwind generates them.\n /\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n 2: 'md:columns-2',\n 3: 'md:columns-3',\n 4: 'md:columns-4',\n 5: 'md:columns-5',\n 6: 'md:columns-6',\n}\nconst columnFlow = computed(\n () => props.component.gridDirection === 'column' && (props.component.gridColumns ?? 1) > 1,\n)\n\nconst toggle = (key: string, checked: boolean) => {\n setValue(checked ? [...selected.value, key] : selected.value.filter((item) => item !== key))\n}\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <div class=\"flex flex-col gap-2\">\n <div\n v-if=\"props.component.searchable \|\| (props.component.bulkToggleable && !readOnly)\"\n class=\"flex min-w-0 flex-wrap items-center gap-2\"\n >\n <Input\n v-if=\"props.component.searchable\"\n v-model=\"search\"\n :placeholder=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n :aria-label=\"props.component.searchPrompt ?? t('search', {}, 'Search')\"\n class=\"h-8\"\n />\n <div v-if=\"props.component.bulkToggleable && !readOnly\" class=\"flex flex-wrap gap-1\">\n <Button\n v-if=\"!props.component.selectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"select-all\"\n :disabled=\"disabled\"\n @click=\"\n setValue(options.filter((option) => !option.disabled).map((option) => option.value))\n \"\n >\n <Icon\n v-if=\"props.component.selectAllAction?.icon\"\n :name=\"props.component.selectAllAction.icon\"\n />\n {{ props.component.selectAllAction?.label ?? t('table.select_all', {}, 'Select all') }}\n </Button>\n <Button\n v-if=\"!props.component.deselectAllAction?.hidden\"\n type=\"button\"\n variant=\"link\"\n size=\"sm\"\n data-slot=\"deselect-all\"\n :disabled=\"disabled\"\n @click=\"setValue([])\"\n >\n <Icon\n v-if=\"props.component.deselectAllAction?.icon\"\n :name=\"props.component.deselectAllAction.icon\"\n />\n {{\n props.component.deselectAllAction?.label ??\n t('table.deselect_all', {}, 'Deselect all')\n }}\n </Button>\n </div>\n </div>\n <div\n :data-grid-direction=\"props.component.gridDirection\"\n :class=\"\n cn(\n props.component.inline\n ? 'flex flex-wrap gap-4'\n : columnFlow\n ? cn(\n 'gap-x-3 :mb-3 *:break-inside-avoid',\n COLUMN_FLOW_CLASSES[props.component.gridColumns ?? 1],\n )\n : 'grid gap-3',\n !props.component.inline &&\n !columnFlow &&\n gridColumnsClasses(\n props.component.gridColumns\n ? { default: 1, md: props.component.gridColumns }\n : { default: 1 },\n ),\n )\n \"\n role=\"group\"\n :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n :aria-describedby=\"aria['aria-describedby']\"\n >\n <div v-for=\"option in visible\" :key=\"option.value\" class=\"flex items-start gap-2\">\n <Checkbox\n :id=\"`${id}-${option.value}`\"\n :model-value=\"selected.includes(option.value)\"\n :disabled=\"disabled \|\| readOnly \|\| option.disabled\"\n :aria-invalid=\"aria['aria-invalid']\"\n class=\"mt-0.5\"\n @update:model-value=\"toggle(option.value, $event === true)\"\n />\n <div class=\"grid gap-0.5\">\n <Label\n :for=\"`${id}-${option.value}`\"\n :class=\"cn('font-normal', option.color && textColorClasses[option.color])\"\n ><Icon v-if=\"option.icon\" :name=\"option.icon\" class=\"size-4\" /><span\n v-if=\"props.component.allowHtml\"\n v-html=\"option.label\"\n /><template v-else>{{ option.label }}</template></Label\n >\n <p v-if=\"option.description\" class=\"text-muted-foreground text-xs\">\n {{ option.description }}\n </p>\n </div>\n </div>\n </div>\n <p\n v-if=\"props.component.searchable && query !== '' && visible.length === 0\"\n data-slot=\"checkbox-list-empty\"\n role=\"status\"\n class=\"text-muted-foreground text-sm\"\n >\n {{ props.component.noSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n </p>\n </div>\n </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/DatePickerField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerField.js","names":["_sfc_main","DatePickerField_vue_vue_type_script_setup_true_lang_default","DatePickerField_default"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n 'AlfakitCalendar',\n loadCalendar,\n defineComponent({\n name: 'AlfakitCalendarLoading',\n inheritAttrs: false,\n render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n formatPhpDate,\n LocaleFormatter,\n timeInputStep,\n wallClockNow,\n type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string \| null>(\n () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n props.component.locale\n ? new LocaleFormatter(\n props.component.locale,\n panelFormat.value.currencyCode,\n panelFormat.value.timeZone,\n )\n : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n props.component.displayFormat\n ? formatPhpDate(date, props.component.displayFormat, locale.value)\n : format.value.date(date, {\n ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n timeZone: undefined,\n })\n\nconst nativeType = computed(() =>\n !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n nativeType.value === 'time'\n ? props.component.hasSeconds\n ? 'HH:mm:ss'\n : 'HH:mm'\n : nativeType.value === 'datetime-local'\n ? props.component.hasSeconds\n ? \"yyyy-MM-dd'T'HH:mm:ss\"\n : \"yyyy-MM-dd'T'HH:mm\"\n : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string \| undefined {\n const date = parse(raw, storageFormat.value, new Date())\n\n return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n if (raw === '') {\n setValue(null)\n\n return\n }\n\n const date = parse(raw, nativeFormat.value, new Date())\n setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n if (!props.component.defaultFocusedDate) return undefined\n\n const date = parseStored(props.component.defaultFocusedDate)\n\n return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue \| undefined) => {\n if (!next) {\n setValue(null)\n\n return\n }\n\n const base = selectedDate.value\n const withTime = new Date(\n next.year,\n next.month - 1,\n next.day,\n base?.getHours() ?? 0,\n base?.getMinutes() ?? 0,\n base?.getSeconds() ?? 0,\n )\n setValue(formatDate(withTime, storageFormat.value))\n\n if (props.component.closeOnDateSelection && !props.component.hasTime) {\n open.value = false\n blur()\n }\n}\n\nconst timeValue = computed(() =>\n selectedDate.value\n ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n : '',\n)\n\nconst onTimeInput = (raw: string) => {\n const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n const next = new Date(\n base.getFullYear(),\n base.getMonth(),\n base.getDate(),\n Number(hours),\n Number(minutes),\n Number(seconds),\n )\n setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `\|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n () => (props.component.firstDayOfWeek ?? 1) as 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6,\n)\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <SelectAffixes :component=\"props.component\" :error=\"error\">\n <Input\n v-if=\"props.component.native \|\| !props.component.hasDate\"\n :id=\"id\"\n :type=\"nativeType\"\n :name=\"props.component.name\"\n :model-value=\"nativeValue\"\n :step=\"step\"\n :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n :disabled=\"disabled\"\n :readonly=\"readOnly\"\n :required=\"props.component.required\"\n :lang=\"props.component.locale\"\n :list=\"listId\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :aria-required=\"aria['aria-required']\"\n v-bind=\"props.component.extraInputAttributes\"\n @update:model-value=\"onNativeInput\"\n @blur=\"blur\"\n />\n <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n <PopoverTrigger as-child>\n <Button\n :id=\"id\"\n type=\"button\"\n data-input=\"\"\n variant=\"outline\"\n :disabled=\"disabled\"\n @pointerenter=\"loadCalendar\"\n @focus=\"loadCalendar\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :class=\"\n cn(\n 'w-full justify-start font-normal',\n !selectedDate && 'text-muted-foreground',\n error && 'border-destructive',\n )\n \"\n >\n <CalendarIcon class=\"size-4\" />\n {{\n selectedDate\n ? display(selectedDate)\n : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n }}\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\" align=\"start\">\n <Calendar\n :model-value=\"calendarValue\"\n :locale=\"locale\"\n :dir=\"direction\"\n :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n :week-starts-on=\"weekStartsOn\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :default-placeholder=\"focusedPlaceholder\"\n :is-date-disabled=\"isDateDisabled\"\n initial-focus\n @update:model-value=\"onSelect($event as DateValue \| undefined)\"\n />\n <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n <Input\n type=\"time\"\n :step=\"step\"\n :model-value=\"timeValue\"\n @update:model-value=\"onTimeInput\"\n @blur=\"blur\"\n />\n </div>\n </PopoverContent>\n </Popover>\n <datalist\n v-if=\"(props.component.native \|\| !props.component.hasDate) && props.component.datalist\"\n :id=\"listId\"\n >\n <option\n v-for=\"option in props.component.datalist\"\n :key=\"option\"\n :value=\"toNative(option) ?? option\"\n />\n </datalist>\n </SelectAffixes>\n </FieldWrapper>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"DatePickerField.js","names":["_sfc_main","DatePickerField_vue_vue_type_script_setup_true_lang_default","DatePickerField_default"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n 'AlfakitCalendar',\n loadCalendar,\n defineComponent({\n name: 'AlfakitCalendarLoading',\n inheritAttrs: false,\n render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n formatPhpDate,\n LocaleFormatter,\n timeInputStep,\n wallClockNow,\n type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string \| null>(\n () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n props.component.locale\n ? new LocaleFormatter(\n props.component.locale,\n panelFormat.value.currencyCode,\n panelFormat.value.timeZone,\n )\n : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n props.component.displayFormat\n ? formatPhpDate(date, props.component.displayFormat, locale.value)\n : format.value.date(date, {\n ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n timeZone: undefined,\n })\n\nconst nativeType = computed(() =>\n !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n nativeType.value === 'time'\n ? props.component.hasSeconds\n ? 'HH:mm:ss'\n : 'HH:mm'\n : nativeType.value === 'datetime-local'\n ? props.component.hasSeconds\n ? \"yyyy-MM-dd'T'HH:mm:ss\"\n : \"yyyy-MM-dd'T'HH:mm\"\n : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string \| undefined {\n const date = parse(raw, storageFormat.value, new Date())\n\n return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n if (raw === '') {\n setValue(null)\n\n return\n }\n\n const date = parse(raw, nativeFormat.value, new Date())\n setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n if (!props.component.defaultFocusedDate) return undefined\n\n const date = parseStored(props.component.defaultFocusedDate)\n\n return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue \| undefined) => {\n if (!next) {\n setValue(null)\n\n return\n }\n\n const base = selectedDate.value\n const withTime = new Date(\n next.year,\n next.month - 1,\n next.day,\n base?.getHours() ?? 0,\n base?.getMinutes() ?? 0,\n base?.getSeconds() ?? 0,\n )\n setValue(formatDate(withTime, storageFormat.value))\n\n if (props.component.closeOnDateSelection && !props.component.hasTime) {\n open.value = false\n blur()\n }\n}\n\nconst timeValue = computed(() =>\n selectedDate.value\n ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n : '',\n)\n\nconst onTimeInput = (raw: string) => {\n const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n const next = new Date(\n base.getFullYear(),\n base.getMonth(),\n base.getDate(),\n Number(hours),\n Number(minutes),\n Number(seconds),\n )\n setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `\|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n () => (props.component.firstDayOfWeek ?? 1) as 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6,\n)\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <SelectAffixes :component=\"props.component\" :error=\"error\">\n <Input\n v-if=\"props.component.native \|\| !props.component.hasDate\"\n :id=\"id\"\n :type=\"nativeType\"\n :name=\"props.component.name\"\n :model-value=\"nativeValue\"\n :step=\"step\"\n :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n :disabled=\"disabled\"\n :readonly=\"readOnly\"\n :required=\"props.component.required\"\n :lang=\"props.component.locale\"\n :list=\"listId\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :aria-required=\"aria['aria-required']\"\n v-bind=\"props.component.extraInputAttributes\"\n @update:model-value=\"onNativeInput\"\n @blur=\"blur\"\n />\n <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n <PopoverTrigger as-child>\n <Button\n :id=\"id\"\n type=\"button\"\n data-input=\"\"\n variant=\"outline\"\n :disabled=\"disabled\"\n @pointerenter=\"loadCalendar\"\n @focus=\"loadCalendar\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :class=\"\n cn(\n 'w-full justify-start font-normal',\n !selectedDate && 'text-muted-foreground',\n error && 'border-destructive',\n )\n \"\n >\n <CalendarIcon class=\"size-4\" />\n {{\n selectedDate\n ? display(selectedDate)\n : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n }}\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\" align=\"start\">\n <Calendar\n :model-value=\"calendarValue\"\n :calendar-label=\"props.component.label \|\| t('form.pick_date', {}, 'Pick a date')\"\n :locale=\"locale\"\n :dir=\"direction\"\n :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n :week-starts-on=\"weekStartsOn\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :default-placeholder=\"focusedPlaceholder\"\n :is-date-disabled=\"isDateDisabled\"\n initial-focus\n @update:model-value=\"onSelect($event as DateValue \| undefined)\"\n />\n <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n <Input\n type=\"time\"\n :step=\"step\"\n :model-value=\"timeValue\"\n @update:model-value=\"onTimeInput\"\n @blur=\"blur\"\n />\n </div>\n </PopoverContent>\n </Popover>\n <datalist\n v-if=\"(props.component.native \|\| !props.component.hasDate) && props.component.datalist\"\n :id=\"listId\"\n >\n <option\n v-for=\"option in props.component.datalist\"\n :key=\"option\"\n :value=\"toNative(option) ?? option\"\n />\n </datalist>\n </SelectAffixes>\n </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/DatePickerField.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/DatePickerField.vue"],"names":[],"mappings":"~~AAkSA~~,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;;eAmCU,gBAAgB;;eAAhB,gBAAgB;;AADhD,~~wBAkfK~~"}
1	+ {"version":3,"file":"DatePickerField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/DatePickerField.vue"],"names":[],"mappings":"AAmSA,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;;eAmCU,gBAAgB;;eAAhB,gBAAgB;;AADhD,wBAofK"}

package/dist/components/fields/DatePickerField.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -19,80 +19,80 @@ import { format as O, isValid as k, parse as A } from "date-fns";
 var ue = {
 	key: 0,
 	class: "border-t p-3"
-}, de = ["id"], fe = ["value"], j = () => import("../ui/Calendar.js").then((e) => e.default), M = c("AlfakitCalendar", j, x({
+}, de = ["id"], fe = ["value"], j = () => import("../ui/Calendar.js").then((e) => e.default), pe = c("AlfakitCalendar", j, x({
 	name: "AlfakitCalendarLoading",
 	inheritAttrs: !1,
 	render: () => S("div", {
 		"aria-busy": "true",
 		class: "h-[18.5rem] w-[15.5rem]"
 	})
-})), N = /*@__PURE__*/ x({
+})), M = /*@__PURE__*/ x({
 	__name: "DatePickerField",
 	props: { component: {} },
 	setup(c) {
-		let x = c, { value: S, setValue: N, blur: P, error: F, id: I, disabled: L, readOnly: R, aria: z } = o(() => x.component), B = se(!1), V = g(() => u(x.component.format)), pe = r(), H = e(), U = t(), me = n(), W = g(() => x.component.locale ?? me.value?.tag ?? "en"), he = g(() => x.component.locale ? new f(x.component.locale, U.value.currencyCode, U.value.timeZone) : U.value), G = g(() => x.component.datalist ? `${I}-list` : void 0), ge = (e) => x.component.displayFormat ? re(e, x.component.displayFormat, W.value) : he.value.date(e, {
+		let x = c, { value: S, setValue: M, blur: N, error: P, id: F, disabled: I, readOnly: L, aria: R } = o(() => x.component), z = se(!1), B = g(() => u(x.component.format)), V = r(), H = e(), U = t(), me = n(), W = g(() => x.component.locale ?? me.value?.tag ?? "en"), he = g(() => x.component.locale ? new f(x.component.locale, U.value.currencyCode, U.value.timeZone) : U.value), G = g(() => x.component.datalist ? `${F}-list` : void 0), ge = (e) => x.component.displayFormat ? re(e, x.component.displayFormat, W.value) : he.value.date(e, {
 			...x.component.hasDate ? { dateStyle: "medium" } : {},
 			...x.component.hasTime ? { timeStyle: "short" } : {},
 			timeZone: void 0
-		}), K = g(() => x.component.hasDate ? x.component.hasTime ? "datetime-local" : "date" : "time"), q = g(() => K.value === "time" ? x.component.hasSeconds ? "HH:mm:ss" : "HH:mm" : K.value === "datetime-local" ? x.component.hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd"), J = g(() => S.value ? A(S.value, V.value, /* @__PURE__ */ new Date()) : null), Y = g(() => J.value && k(J.value) ? J.value : void 0), _e = g(() => Y.value ? O(Y.value, q.value) : S.value ?? "");
+		}), K = g(() => x.component.hasDate ? x.component.hasTime ? "datetime-local" : "date" : "time"), q = g(() => K.value === "time" ? x.component.hasSeconds ? "HH:mm:ss" : "HH:mm" : K.value === "datetime-local" ? x.component.hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd"), J = g(() => S.value ? A(S.value, B.value, /* @__PURE__ */ new Date()) : null), Y = g(() => J.value && k(J.value) ? J.value : void 0), _e = g(() => Y.value ? O(Y.value, q.value) : S.value ?? "");
 		function X(e) {
-			let t = A(e, V.value, /* @__PURE__ */ new Date());
+			let t = A(e, B.value, /* @__PURE__ */ new Date());
 			return k(t) ? O(t, q.value) : void 0;
 		}
 		function Z(e) {
-			return A(e, V.value, /* @__PURE__ */ new Date());
+			return A(e, B.value, /* @__PURE__ */ new Date());
 		}
 		let ve = (e) => {
 			if (e === "") {
-				N(null);
+				M(null);
 				return;
 			}
 			let t = A(e, q.value, /* @__PURE__ */ new Date());
-			N(k(t) ? O(t, V.value) : e);
+			M(k(t) ? O(t, B.value) : e);
 		}, Q = (e) => new D(e.getFullYear(), e.getMonth() + 1, e.getDate()), ye = g(() => Y.value ? Q(Y.value) : void 0), be = g(() => x.component.minDate ? Q(Z(x.component.minDate)) : void 0), xe = g(() => x.component.maxDate ? Q(Z(x.component.maxDate)) : void 0), Se = g(() => (x.component.disabledDates ?? []).map((e) => Q(Z(e)).toString())), Ce = (e) => Se.value.includes(e.toString()), we = g(() => {
 			if (!x.component.defaultFocusedDate) return;
 			let e = Z(x.component.defaultFocusedDate);
 			return k(e) ? Q(e) : void 0;
 		}), $ = g(() => p(x.component)), Te = (e) => {
 			if (!e) {
-				N(null);
+				M(null);
 				return;
 			}
 			let t = Y.value, n = new Date(e.year, e.month - 1, e.day, t?.getHours() ?? 0, t?.getMinutes() ?? 0, t?.getSeconds() ?? 0);
-			N(O(n, V.value)), x.component.closeOnDateSelection && !x.component.hasTime && (B.value = !1, P());
+			M(O(n, B.value)), x.component.closeOnDateSelection && !x.component.hasTime && (z.value = !1, N());
 		}, Ee = g(() => Y.value ? O(Y.value, x.component.hasSeconds ? "HH:mm:ss" : "HH:mm") : ""), De = (e) => {
 			let t = Y.value ?? m(x.component.timezone), [n = "0", r = "0", i = "0"] = e.split(":"), a = new Date(t.getFullYear(), t.getMonth(), t.getDate(), Number(n), Number(r), Number(i));
-			N(O(a, V.value));
+			M(O(a, B.value));
 		}, Oe = g(() => x.component.firstDayOfWeek ?? 1);
 		return (e, t) => (C(), _(l, {
 			field: x.component,
-			"html-for": w(I),
-			error: w(F)
+			"html-for": w(F),
+			error: w(P)
 		}, {
 			default: T(() => [b(d, {
 				component: x.component,
-				error: w(F)
+				error: w(P)
 			}, {
 				default: T(() => [x.component.native || !x.component.hasDate ? (C(), _(s, ae({
 					key: 0,
-					id: w(I),
+					id: w(F),
 					type: K.value,
 					name: x.component.name,
 					"model-value": _e.value,
 					step: $.value,
 					min: x.component.minDate ? X(x.component.minDate) : void 0,
 					max: x.component.maxDate ? X(x.component.maxDate) : void 0,
-					disabled: w(L),
-					readonly: w(R),
+					disabled: w(I),
+					readonly: w(L),
 					required: x.component.required,
 					lang: x.component.locale,
 					list: G.value,
-					"aria-invalid": w(z)["aria-invalid"],
-					"aria-describedby": w(z)["aria-describedby"],
-					"aria-required": w(z)["aria-required"]
+					"aria-invalid": w(R)["aria-invalid"],
+					"aria-describedby": w(R)["aria-describedby"],
+					"aria-required": w(R)["aria-required"]
 				}, x.component.extraInputAttributes, {
 					"onUpdate:modelValue": ve,
-					onBlur: w(P)
+					onBlur: w(N)
 				}), null, 16, [
 					"id",
 					"type",
@@ -112,23 +112,23 @@ var ue = {
 					"onBlur"
 				])) : (C(), _(ee, {
 					key: 1,
-					open: B.value,
-					"onUpdate:open": t[1] ||= (e) => B.value = e && !w(R)
+					open: z.value,
+					"onUpdate:open": t[1] ||= (e) => z.value = e && !w(L)
 				}, {
 					default: T(() => [b(ne, { "as-child": "" }, {
 						default: T(() => [b(a, {
-							id: w(I),
+							id: w(F),
 							type: "button",
 							"data-input": "",
 							variant: "outline",
-							disabled: w(L),
+							disabled: w(I),
 							onPointerenter: j,
 							onFocus: j,
-							"aria-invalid": w(z)["aria-invalid"],
-							"aria-describedby": w(z)["aria-describedby"],
-							class: oe(w(i)("w-full justify-start font-normal", !Y.value && "text-muted-foreground", w(F) && "border-destructive"))
+							"aria-invalid": w(R)["aria-invalid"],
+							"aria-describedby": w(R)["aria-describedby"],
+							class: oe(w(i)("w-full justify-start font-normal", !Y.value && "text-muted-foreground", w(P) && "border-destructive"))
 						}, {
-							default: T(() => [b(w(E), { class: "size-4" }), ie(" " + le(Y.value ? ge(Y.value) : x.component.placeholder ?? w(pe)("form.pick_date", {}, "Pick a date")), 1)]),
+							default: T(() => [b(w(E), { class: "size-4" }), ie(" " + le(Y.value ? ge(Y.value) : x.component.placeholder ?? w(V)("form.pick_date", {}, "Pick a date")), 1)]),
 							_: 1
 						}, 8, [
 							"id",
@@ -142,8 +142,9 @@ var ue = {
 						class: "w-auto p-0",
 						align: "start"
 					}, {
-						default: T(() => [b(w(M), {
+						default: T(() => [b(w(pe), {
 							"model-value": ye.value,
+							"calendar-label": x.component.label || w(V)("form.pick_date", {}, "Pick a date"),
 							locale: W.value,
 							dir: w(H),
 							today: Q(w(m)(x.component.timezone)),
@@ -156,6 +157,7 @@ var ue = {
 							"onUpdate:modelValue": t[0] ||= (e) => Te(e)
 						}, null, 8, [
 							"model-value",
+							"calendar-label",
 							"locale",
 							"dir",
 							"today",
@@ -168,7 +170,7 @@ var ue = {
 							step: $.value,
 							"model-value": Ee.value,
 							"onUpdate:modelValue": De,
-							onBlur: w(P)
+							onBlur: w(N)
 						}, null, 8, [
 							"step",
 							"model-value",
@@ -195,6 +197,6 @@ var ue = {
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };
 //# sourceMappingURL=DatePickerField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/DatePickerField.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerField.vue_vue_type_script_setup_true_lang.js","names":["format","formatDate","_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","SelectAffixes","Input","_mergeProps","Popover","PopoverTrigger","Button","_normalizeClass","_createTextVNode","_toDisplayString","PopoverContent","_createElementBlock","_createCommentVNode","_Fragment","_renderList","Button_default","Input_default","Popover_default","PopoverContent_default","PopoverTrigger_default","FieldWrapper_default","SelectAffixes_default","_hoisted_1","_hoisted_2","_hoisted_3","loadCalendar","module","Calendar","lazyComponent","defineComponent","h","DatePickerField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","open","ref","storageFormat","computed","phpToDateFnsFormat","t","useT","direction","useDirection","panelFormat","useFormatter","localization","useLocalization","locale","format$1","LocaleFormatter","listId","id","display","formatPhpDate","date","nativeType","nativeFormat","parsed","value","parse","selectedDate","isValid","nativeValue","format","toNative","raw","parseStored","onNativeInput","toCalendarDate","CalendarDate","calendarValue","minValue","maxValue","disabledDates","isDateDisabled","focusedPlaceholder","step","timeInputStep","onSelect","next","base","withTime","setValue","blur","timeValue","onTimeInput","wallClockNow","hours","minutes","seconds","weekStartsOn","openBlock","createBlock","unref","error","withCtx","createVNode","mergeProps","disabled","readOnly","aria","_cache","$event","normalizeClass","cn","CalendarIcon","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","Fragment","renderList","option"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n 'AlfakitCalendar',\n loadCalendar,\n defineComponent({\n name: 'AlfakitCalendarLoading',\n inheritAttrs: false,\n render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n formatPhpDate,\n LocaleFormatter,\n timeInputStep,\n wallClockNow,\n type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string \| null>(\n () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n props.component.locale\n ? new LocaleFormatter(\n props.component.locale,\n panelFormat.value.currencyCode,\n panelFormat.value.timeZone,\n )\n : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n props.component.displayFormat\n ? formatPhpDate(date, props.component.displayFormat, locale.value)\n : format.value.date(date, {\n ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n timeZone: undefined,\n })\n\nconst nativeType = computed(() =>\n !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n nativeType.value === 'time'\n ? props.component.hasSeconds\n ? 'HH:mm:ss'\n : 'HH:mm'\n : nativeType.value === 'datetime-local'\n ? props.component.hasSeconds\n ? \"yyyy-MM-dd'T'HH:mm:ss\"\n : \"yyyy-MM-dd'T'HH:mm\"\n : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string \| undefined {\n const date = parse(raw, storageFormat.value, new Date())\n\n return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n if (raw === '') {\n setValue(null)\n\n return\n }\n\n const date = parse(raw, nativeFormat.value, new Date())\n setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n if (!props.component.defaultFocusedDate) return undefined\n\n const date = parseStored(props.component.defaultFocusedDate)\n\n return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue \| undefined) => {\n if (!next) {\n setValue(null)\n\n return\n }\n\n const base = selectedDate.value\n const withTime = new Date(\n next.year,\n next.month - 1,\n next.day,\n base?.getHours() ?? 0,\n base?.getMinutes() ?? 0,\n base?.getSeconds() ?? 0,\n )\n setValue(formatDate(withTime, storageFormat.value))\n\n if (props.component.closeOnDateSelection && !props.component.hasTime) {\n open.value = false\n blur()\n }\n}\n\nconst timeValue = computed(() =>\n selectedDate.value\n ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n : '',\n)\n\nconst onTimeInput = (raw: string) => {\n const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n const next = new Date(\n base.getFullYear(),\n base.getMonth(),\n base.getDate(),\n Number(hours),\n Number(minutes),\n Number(seconds),\n )\n setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `\|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n () => (props.component.firstDayOfWeek ?? 1) as 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6,\n)\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <SelectAffixes :component=\"props.component\" :error=\"error\">\n <Input\n v-if=\"props.component.native \|\| !props.component.hasDate\"\n :id=\"id\"\n :type=\"nativeType\"\n :name=\"props.component.name\"\n :model-value=\"nativeValue\"\n :step=\"step\"\n :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n :disabled=\"disabled\"\n :readonly=\"readOnly\"\n :required=\"props.component.required\"\n :lang=\"props.component.locale\"\n :list=\"listId\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :aria-required=\"aria['aria-required']\"\n v-bind=\"props.component.extraInputAttributes\"\n @update:model-value=\"onNativeInput\"\n @blur=\"blur\"\n />\n <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n <PopoverTrigger as-child>\n <Button\n :id=\"id\"\n type=\"button\"\n data-input=\"\"\n variant=\"outline\"\n :disabled=\"disabled\"\n @pointerenter=\"loadCalendar\"\n @focus=\"loadCalendar\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :class=\"\n cn(\n 'w-full justify-start font-normal',\n !selectedDate && 'text-muted-foreground',\n error && 'border-destructive',\n )\n \"\n >\n <CalendarIcon class=\"size-4\" />\n {{\n selectedDate\n ? display(selectedDate)\n : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n }}\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\" align=\"start\">\n <Calendar\n :model-value=\"calendarValue\"\n :locale=\"locale\"\n :dir=\"direction\"\n :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n :week-starts-on=\"weekStartsOn\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :default-placeholder=\"focusedPlaceholder\"\n :is-date-disabled=\"isDateDisabled\"\n initial-focus\n @update:model-value=\"onSelect($event as DateValue \| undefined)\"\n />\n <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n <Input\n type=\"time\"\n :step=\"step\"\n :model-value=\"timeValue\"\n @update:model-value=\"onTimeInput\"\n @blur=\"blur\"\n />\n </div>\n </PopoverContent>\n </Popover>\n <datalist\n v-if=\"(props.component.native \|\| !props.component.hasDate) && props.component.datalist\"\n :id=\"listId\"\n >\n <option\n v-for=\"option in props.component.datalist\"\n :key=\"option\"\n :value=\"toNative(option) ?? option\"\n />\n </datalist>\n </SelectAffixes>\n </FieldWrapper>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"DatePickerField.vue_vue_type_script_setup_true_lang.js","names":["format","formatDate","_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","SelectAffixes","Input","_mergeProps","Popover","PopoverTrigger","Button","_normalizeClass","_createTextVNode","_toDisplayString","PopoverContent","_createElementBlock","_createCommentVNode","_Fragment","_renderList","Button_default","Input_default","Popover_default","PopoverContent_default","PopoverTrigger_default","FieldWrapper_default","SelectAffixes_default","_hoisted_1","_hoisted_2","_hoisted_3","loadCalendar","module","Calendar","lazyComponent","defineComponent","h","DatePickerField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","open","ref","storageFormat","computed","phpToDateFnsFormat","t","useT","direction","useDirection","panelFormat","useFormatter","localization","useLocalization","locale","format$1","LocaleFormatter","listId","id","display","formatPhpDate","date","nativeType","nativeFormat","parsed","value","parse","selectedDate","isValid","nativeValue","format","toNative","raw","parseStored","onNativeInput","toCalendarDate","CalendarDate","calendarValue","minValue","maxValue","disabledDates","isDateDisabled","focusedPlaceholder","step","timeInputStep","onSelect","next","base","withTime","setValue","blur","timeValue","onTimeInput","wallClockNow","hours","minutes","seconds","weekStartsOn","openBlock","createBlock","unref","error","withCtx","createVNode","mergeProps","disabled","readOnly","aria","_cache","$event","normalizeClass","cn","CalendarIcon","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","Fragment","renderList","option"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n 'AlfakitCalendar',\n loadCalendar,\n defineComponent({\n name: 'AlfakitCalendarLoading',\n inheritAttrs: false,\n render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n formatPhpDate,\n LocaleFormatter,\n timeInputStep,\n wallClockNow,\n type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string \| null>(\n () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n props.component.locale\n ? new LocaleFormatter(\n props.component.locale,\n panelFormat.value.currencyCode,\n panelFormat.value.timeZone,\n )\n : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n props.component.displayFormat\n ? formatPhpDate(date, props.component.displayFormat, locale.value)\n : format.value.date(date, {\n ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n timeZone: undefined,\n })\n\nconst nativeType = computed(() =>\n !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n nativeType.value === 'time'\n ? props.component.hasSeconds\n ? 'HH:mm:ss'\n : 'HH:mm'\n : nativeType.value === 'datetime-local'\n ? props.component.hasSeconds\n ? \"yyyy-MM-dd'T'HH:mm:ss\"\n : \"yyyy-MM-dd'T'HH:mm\"\n : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string \| undefined {\n const date = parse(raw, storageFormat.value, new Date())\n\n return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n if (raw === '') {\n setValue(null)\n\n return\n }\n\n const date = parse(raw, nativeFormat.value, new Date())\n setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n if (!props.component.defaultFocusedDate) return undefined\n\n const date = parseStored(props.component.defaultFocusedDate)\n\n return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue \| undefined) => {\n if (!next) {\n setValue(null)\n\n return\n }\n\n const base = selectedDate.value\n const withTime = new Date(\n next.year,\n next.month - 1,\n next.day,\n base?.getHours() ?? 0,\n base?.getMinutes() ?? 0,\n base?.getSeconds() ?? 0,\n )\n setValue(formatDate(withTime, storageFormat.value))\n\n if (props.component.closeOnDateSelection && !props.component.hasTime) {\n open.value = false\n blur()\n }\n}\n\nconst timeValue = computed(() =>\n selectedDate.value\n ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n : '',\n)\n\nconst onTimeInput = (raw: string) => {\n const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n const next = new Date(\n base.getFullYear(),\n base.getMonth(),\n base.getDate(),\n Number(hours),\n Number(minutes),\n Number(seconds),\n )\n setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `\|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n () => (props.component.firstDayOfWeek ?? 1) as 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6,\n)\n</script>\n\n<template>\n <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n <SelectAffixes :component=\"props.component\" :error=\"error\">\n <Input\n v-if=\"props.component.native \|\| !props.component.hasDate\"\n :id=\"id\"\n :type=\"nativeType\"\n :name=\"props.component.name\"\n :model-value=\"nativeValue\"\n :step=\"step\"\n :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n :disabled=\"disabled\"\n :readonly=\"readOnly\"\n :required=\"props.component.required\"\n :lang=\"props.component.locale\"\n :list=\"listId\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :aria-required=\"aria['aria-required']\"\n v-bind=\"props.component.extraInputAttributes\"\n @update:model-value=\"onNativeInput\"\n @blur=\"blur\"\n />\n <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n <PopoverTrigger as-child>\n <Button\n :id=\"id\"\n type=\"button\"\n data-input=\"\"\n variant=\"outline\"\n :disabled=\"disabled\"\n @pointerenter=\"loadCalendar\"\n @focus=\"loadCalendar\"\n :aria-invalid=\"aria['aria-invalid']\"\n :aria-describedby=\"aria['aria-describedby']\"\n :class=\"\n cn(\n 'w-full justify-start font-normal',\n !selectedDate && 'text-muted-foreground',\n error && 'border-destructive',\n )\n \"\n >\n <CalendarIcon class=\"size-4\" />\n {{\n selectedDate\n ? display(selectedDate)\n : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n }}\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\" align=\"start\">\n <Calendar\n :model-value=\"calendarValue\"\n :calendar-label=\"props.component.label \|\| t('form.pick_date', {}, 'Pick a date')\"\n :locale=\"locale\"\n :dir=\"direction\"\n :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n :week-starts-on=\"weekStartsOn\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :default-placeholder=\"focusedPlaceholder\"\n :is-date-disabled=\"isDateDisabled\"\n initial-focus\n @update:model-value=\"onSelect($event as DateValue \| undefined)\"\n />\n <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n <Input\n type=\"time\"\n :step=\"step\"\n :model-value=\"timeValue\"\n @update:model-value=\"onTimeInput\"\n @blur=\"blur\"\n />\n </div>\n </PopoverContent>\n </Popover>\n <datalist\n v-if=\"(props.component.native \|\| !props.component.hasDate) && props.component.datalist\"\n :id=\"listId\"\n >\n <option\n v-for=\"option in props.component.datalist\"\n :key=\"option\"\n :value=\"toNative(option) ?? option\"\n />\n </datalist>\n </SelectAffixes>\n </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/RichEditorSuggestions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichEditorSuggestions.js","names":["_sfc_main","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","RichEditorSuggestions_default"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n suggestions: EditorSuggestions\n editor: Editor \| undefined\n id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n</script>\n\n<template>\n <div\n v-if=\"state.open && props.editor\"\n :id=\"props.id\"\n role=\"listbox\"\n :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n data-slot=\"rich-editor-suggestions\"\n class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n :style=\"\~~n state.coords\n ? { left: `${state.coords.left}px`, top: `${state.coords.bottom + 4}px` }\n : undefined\n \~~"\n >\n <div\n v-if=\"state.loading && state.items.length === 0\"\n class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n >\n {{ t('loading', {}, 'Loading…') }}\n </div>\n <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n {{ t('no_results', {}, 'No results.') }}\n </div>\n <template v-else>\n <div\n v-for=\"(item, index) in state.items\"\n :id=\"`${props.id}-${index}`\"\n :key=\"item.id\"\n role=\"option\"\n :aria-selected=\"index === state.index\"\n :class=\"\n cn(\n 'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n index === state.index && 'bg-accent text-accent-foreground',\n )\n \"\n @mousedown.prevent\n @mouseenter=\"props.suggestions.highlight(index)\"\n @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n >\n {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n </div>\n </template>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RichEditorSuggestions.js","names":["_sfc_main","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","RichEditorSuggestions_default"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { fixedContainingBlockOffset, type EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n suggestions: EditorSuggestions\n editor: Editor \| undefined\n id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n// Inside a modal the dialog's transform is the containing block of this fixed list.\nconst position = computed(() => {\n const coords = state.value.coords\n\n if (!coords) return undefined\n\n const offset = fixedContainingBlockOffset(props.editor?.view.dom)\n\n return { left: `${coords.left - offset.x}px`, top: `${coords.bottom + 4 - offset.y}px` }\n})\n</script>\n\n<template>\n <div\n v-if=\"state.open && props.editor\"\n :id=\"props.id\"\n role=\"listbox\"\n :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n data-slot=\"rich-editor-suggestions\"\n class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n :style=\"position\"\n >\n <div\n v-if=\"state.loading && state.items.length === 0\"\n class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n >\n {{ t('loading', {}, 'Loading…') }}\n </div>\n <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n {{ t('no_results', {}, 'No results.') }}\n </div>\n <template v-else>\n <div\n v-for=\"(item, index) in state.items\"\n :id=\"`${props.id}-${index}`\"\n :key=\"item.id\"\n role=\"option\"\n :aria-selected=\"index === state.index\"\n :class=\"\n cn(\n 'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n index === state.index && 'bg-accent text-accent-foreground',\n )\n \"\n @mousedown.prevent\n @mouseenter=\"props.suggestions.highlight(index)\"\n @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n >\n {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n </div>\n </template>\n </div>\n</template>\n"],"mappings":""}