@alfakit/vue 0.1.1 → 0.1.6

package/dist/components/layout/SectionComponent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Collapsible","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_unref","Icon","_createCommentVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString","ActionList","_createVNode","MixedContent","CollapsibleTrigger","Button","_normalizeClass","CollapsibleContent","DeferredSchema","SchemaRenderer","Icon_default","Button_default","ActionList_default","SchemaRenderer_default","Collapsible_default","CollapsibleContent_default","CollapsibleTrigger_default","DeferredSchema_default","MixedContent_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","SectionComponent_vue_vue_type_script_setup_true_lang_default","props","__props","open","ref","sectionForm","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","heading","headingTag","hasHeader","key","stored","readPersisted","setOpen","next","writePersisted","hasFooterActions","hasFooter","t","useT","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","createElementBlock","unref","createCommentVNode","resolveDynamicComponent","createTextVNode","toDisplayString","createVNode","ChevronDownIcon","normalizeClass","cn","loaded","schemaGapClass","actionsAlignmentClass"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p v-if=\"props.component.description\" class=\"text-muted-foreground mt-1 text-sm\">\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p v-if=\"props.component.description\" class=\"text-muted-foreground mt-1 text-sm\">\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAMqC,IAAQC,GACRC,IAAOC,EAAI,CAACH,EAAM,UAAU,SAAS,GAErCI,IAAcC,EAAqB,GACnCC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BT,EAAM,SAAS,GAC1DU,IAAUC,QAAgBP,IAAcI,EAAa,QAAQF,CAAY,GACzEM,IAAUD,QAAeE,EAAWb,EAAM,UAAU,YAAY,CAAC,GACjEc,IAAYH,QAChB,GACEX,EAAM,UAAU,WAChBA,EAAM,UAAU,eAChBA,EAAM,UAAU,QAChBA,EAAM,UAAU,eAAe,UAC/BA,EAAM,UAAU,aAAa,OAEjC;EAGA,QAAgB;GACd,IAAMe,IAAMf,EAAM,UAAU;GAE5B,IAAI,CAACe,GAAK;GAEV,IAAMC,IAASC,EAAcF,CAAG;GAEhC,AAAIC,MAAW,SAAM,EAAK,QAAQA,MAAW;EAC/C,CAAC;EAED,SAASE,EAAQ,GAAe;GAG9B,AAFA,EAAK,QAAQC,GAETnB,EAAM,UAAU,oBAClBoB,EAAepB,EAAM,UAAU,kBAAkBmB,IAAO,aAAa,WAAW;EAEpF;EACA,IAAME,IAAmBV,QAAe,EAAQX,EAAM,UAAU,eAAe,MAAO,GAChFsB,IAAYX,QAAeU,EAAiB,SAAS,EAAQrB,EAAM,UAAU,QAAQ,MAAO,GAC5FuB,IAAIC,EAAK;mBAKLxB,EAAM,UAAU,SADxBrC,EAAA,GAAAC,EA2FcC,GAAA;;GAzFX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAoFU,CApFVC,EAoFU,WApFVC,EAoFU;IAnFR,aAAU;IACV,OAAM;GACE,GAAAgC,EAAM,UAAU,eAAe,GAAA,CAE5Bc,EAAA,SAAXnD,EAAA,GAAAM,EAuCM,OAvCNyB,GAuCM;IArCIM,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAWM,OAXN4B,GAWM,CARIK,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAEnB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eAAzBrC,EAAA,GAAAM,EAEI,KAFJ2B,GAEIrB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAsCqBK,GAAA,EAtCD,YAAA,GAAQ,GAAA;IAC1B,SAAAhB,QAoCM,CApCNC,EAoCM,OAAA;KAnCJ,gBAAa;KACZ,OAAKc,EAAeX,EAAAuE,CAAA,CAAE,CAAA,qDAAmFzC,EAAM,UAAU,aAAS,aAAA,CAAA;IAOnIjC,GAAAA,CAAAA,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAiBX,EAAAuE,CAAA,CAAE,CAAA,wDAA0FzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQlI,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK;;;;;EAM7DrC,GAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAC,EA0FcC,GAAA;;GAxFX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAmFU,CAnFVC,EAmFU,WAnFVC,EAmFU;IAlFR,aAAU;IACV,gBAAa;IACZ,OAAOE,EAAAuE,CAAA,CAAE,CAAA,uCAAwCzC,EAAM,UAAU,aAAS,aAAA;GACnE,GAAAA,EAAM,UAAU,eAAe,GAAA,CAG/Bc,EAAA,SADRnD,EAAA,GAAAM,EA+CM,OAAA;;IA7CH,OAAKY,EAAaX,EAAAuE,CAAA,CAAE,CAAA,uDAAiFzC,EAAM,UAAU,WAAO,WAAA,CAAA;;IAQrHA,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAWM,OAXN8B,GAWM,CARIG,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAEnB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eAAzBrC,EAAA,GAAAM,EAEI,KAFJ6B,GAEIvB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,GAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EA4BqBK,GAAA,MAAA;IA3BnB,SAAAhB,QAQM,CARNC,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAeX,EAAAuE,CAAA,CAAE,CAAA,wDAAsFzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQ5H,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK"}
+{"version":3,"file":"SectionComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Collapsible","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_unref","Icon","_createCommentVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString","ActionList","_createVNode","MixedContent","CollapsibleTrigger","Button","_normalizeClass","CollapsibleContent","DeferredSchema","SchemaRenderer","Icon_default","Button_default","ActionList_default","SchemaRenderer_default","DeferredSchema_default","Collapsible_default","CollapsibleContent_default","MixedContent_default","CollapsibleTrigger_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","SectionComponent_vue_vue_type_script_setup_true_lang_default","props","__props","open","ref","sectionForm","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","heading","headingTag","hasHeader","key","stored","readPersisted","setOpen","next","writePersisted","hasFooterActions","hasFooter","t","useT","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","createElementBlock","unref","createCommentVNode","resolveDynamicComponent","createTextVNode","toDisplayString","createVNode","ChevronDownIcon","normalizeClass","cn","loaded","schemaGapClass","actionsAlignmentClass"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAMqC,IAAQC,GACRC,IAAOC,EAAI,CAACH,EAAM,UAAU,SAAS,GAErCI,IAAcC,EAAqB,GACnCC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BT,EAAM,SAAS,GAC1DU,IAAUC,QAAgBP,IAAcI,EAAa,QAAQF,CAAY,GACzEM,IAAUD,QAAeE,EAAWb,EAAM,UAAU,YAAY,CAAC,GACjEc,IAAYH,QAChB,GACEX,EAAM,UAAU,WAChBA,EAAM,UAAU,eAChBA,EAAM,UAAU,QAChBA,EAAM,UAAU,eAAe,UAC/BA,EAAM,UAAU,aAAa,OAEjC;EAGA,QAAgB;GACd,IAAMe,IAAMf,EAAM,UAAU;GAE5B,IAAI,CAACe,GAAK;GAEV,IAAMC,IAASC,EAAcF,CAAG;GAEhC,AAAIC,MAAW,SAAM,EAAK,QAAQA,MAAW;EAC/C,CAAC;EAED,SAASE,EAAQ,GAAe;GAG9B,AAFA,EAAK,QAAQC,GAETnB,EAAM,UAAU,oBAClBoB,EAAepB,EAAM,UAAU,kBAAkBmB,IAAO,aAAa,WAAW;EAEpF;EACA,IAAME,IAAmBV,QAAe,EAAQX,EAAM,UAAU,eAAe,MAAO,GAChFsB,IAAYX,QAAeU,EAAiB,SAAS,EAAQrB,EAAM,UAAU,QAAQ,MAAO,GAC5FuB,IAAIC,EAAK;mBAKLxB,EAAM,UAAU,SADxBrC,EAAA,GAAAC,EA8FcC,GAAA;;GA5FX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAuFU,CAvFVC,EAuFU,WAvFVC,EAuFU;IAtFR,aAAU;IACV,OAAM;GACE,GAAAgC,EAAM,UAAU,eAAe,GAAA,CAE5Bc,EAAA,SAAXnD,EAAA,GAAAM,EA0CM,OA1CNyB,GA0CM;IAxCIM,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAcM,OAdN4B,GAcM,CAXIK,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAGpB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eADxBrC,EAAA,GAAAM,EAKI,KALJ2B,GAKIrB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAsCqBK,GAAA,EAtCD,YAAA,GAAQ,GAAA;IAC1B,SAAAhB,QAoCM,CApCNC,EAoCM,OAAA;KAnCJ,gBAAa;KACZ,OAAKc,EAAeX,EAAAuE,CAAA,CAAE,CAAA,qDAAmFzC,EAAM,UAAU,aAAS,aAAA,CAAA;IAOnIjC,GAAAA,CAAAA,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAiBX,EAAAuE,CAAA,CAAE,CAAA,wDAA0FzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQlI,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK;;;;;EAM7DrC,GAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAC,EA6FcC,GAAA;;GA3FX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAsFU,CAtFVC,EAsFU,WAtFVC,EAsFU;IArFR,aAAU;IACV,gBAAa;IACZ,OAAOE,EAAAuE,CAAA,CAAE,CAAA,uCAAwCzC,EAAM,UAAU,aAAS,aAAA;GACnE,GAAAA,EAAM,UAAU,eAAe,GAAA,CAG/Bc,EAAA,SADRnD,EAAA,GAAAM,EAkDM,OAAA;;IAhDH,OAAKY,EAAaX,EAAAuE,CAAA,CAAE,CAAA,uDAAiFzC,EAAM,UAAU,WAAO,WAAA,CAAA;;IAQrHA,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAcM,OAdN8B,GAcM,CAXIG,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAGpB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eADxBrC,EAAA,GAAAM,EAKI,KALJ6B,GAKIvB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,GAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EA4BqBK,GAAA,MAAA;IA3BnB,SAAAhB,QAQM,CARNC,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAeX,EAAAuE,CAAA,CAAE,CAAA,wDAAsFzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQ5H,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK"}

package/dist/components/layout/TabsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsComponent.js","names":["_sfc_main","TabsComponent_vue_vue_type_script_setup_true_lang_default","TabsComponent_default"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\nconst fromQuery = props.component.queryStringKey\n  ? new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey)\n  : null\nconst active = ref<string>(\n  tabs.value.find((tab) => tab.key === fromQuery)?.key ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger v-for=\"tab in tabs\" :key=\"tab.key\" :value=\"tab.key\">\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TabsComponent.js","names":["_sfc_main","TabsComponent_vue_vue_type_script_setup_true_lang_default","TabsComponent_default"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport {\n  componentHasErrors,\n  readPersisted,\n  schemaGapClass,\n  tabFromQuery,\n  tabQueryValue,\n  tabToReveal,\n  writePersisted,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\n// The tab's readable value (`?tab=billing-address`), or its key in links from older versions.\nconst fromQuery = props.component.queryStringKey\n  ? tabFromQuery(\n      tabs.value,\n      new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey),\n    )\n  : null\nconst active = ref<string>(\n  fromQuery ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\n// Tabs holding a field with a validation error are marked, and when a submit brings new\n// errors while the open tab has none, the first tab with an error opens.\nconst TAB_INVALID_CLASSES =\n  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'\nconst t = useT()\nconst store = useOptionalFormStore()\nconst errors = useStoreSelector(\n  store?.store ?? {\n    get: () => ({ errors: {} as Record<string, string[]> }),\n    subscribe: () => () => {},\n  },\n  (state) => state.errors,\n)\nconst invalidTabs = computed(\n  () =>\n    new Set(\n      tabs.value.filter((tab) => componentHasErrors(tab, errors.value)).map((tab) => tab.key),\n    ),\n)\n\nwatch(\n  errors,\n  (next, previous) => {\n    const reveal = tabToReveal(tabs.value, active.value, previous ?? {}, next)\n\n    if (reveal !== null) active.value = reveal\n  },\n  { immediate: true },\n)\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const tab = tabs.value.find((item) => item.key === value)\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, tab ? tabQueryValue(tab) : value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.key\"\n        :value=\"tab.key\"\n        :data-invalid=\"invalidTabs.has(tab.key) || undefined\"\n        :class=\"invalidTabs.has(tab.key) ? TAB_INVALID_CLASSES : undefined\"\n      >\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n        <template v-if=\"invalidTabs.has(tab.key)\">\n          <span aria-hidden=\"true\" class=\"bg-destructive size-1.5 shrink-0 rounded-full\"></span>\n          <span class=\"sr-only\">({{ t('translatable.has_errors') }})</span>\n        </template>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":""}

package/dist/components/layout/TabsComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsComponent.vue"],"names":[],"mappings":"AAoHA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAc/C,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,UAAU,CAAA;CAAE,CAAC;;AAsP7C,wBAMG"}
+{"version":3,"file":"TabsComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsComponent.vue"],"names":[],"mappings":"AA4KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAyB/C,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,UAAU,CAAA;CAAE,CAAC;;AA+S7C,wBAMG"}

package/dist/components/layout/TabsComponent.vue_vue_type_script_setup_true_lang.js

@@ -1,77 +1,98 @@
-import { cn as e } from "../../lib/utils.js";
-import t from "../../lib/Icon.js";
-import n from "../schema/SchemaRenderer.js";
-import r from "../ui/Tabs.js";
-import i from "../ui/TabsContent.js";
-import a from "../ui/TabsList.js";
-import o from "../ui/TabsTrigger.js";
-import s from "./DeferredSchema.js";
-import c from "./TabBadge.js";
-import { readPersisted as l, schemaGapClass as u, writePersisted as d } from "@alfakit/core";
-import { usePage as f } from "@inertiajs/vue3";
-import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeProps as x, normalizeClass as S, onMounted as C, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, watch as k, withCtx as A } from "vue";
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import { useStoreSelector as n } from "../../composables/use-store.js";
+import r from "../../lib/Icon.js";
+import { useOptionalFormStore as i } from "../form/form-context.js";
+import a from "../schema/SchemaRenderer.js";
+import o from "../ui/Tabs.js";
+import s from "../ui/TabsContent.js";
+import c from "../ui/TabsList.js";
+import l from "../ui/TabsTrigger.js";
+import u from "./DeferredSchema.js";
+import d from "./TabBadge.js";
+import { componentHasErrors as f, readPersisted as p, schemaGapClass as m, tabFromQuery as h, tabQueryValue as g, tabToReveal as _, writePersisted as v } from "@alfakit/core";
+import { usePage as y } from "@inertiajs/vue3";
+import { Fragment as b, computed as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, defineComponent as O, mergeProps as k, normalizeClass as A, onMounted as j, openBlock as M, ref as N, renderList as P, toDisplayString as F, unref as I, watch as L, withCtx as R } from "vue";
 //#region src/components/layout/TabsComponent.vue?vue&type=script&setup=true&lang.ts
-var j = /*@__PURE__*/ b({
+var z = { class: "sr-only" }, B = "text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive", V = /*@__PURE__*/ O({
 	__name: "TabsComponent",
 	props: { component: {} },
-	setup(b) {
-		let j = b, M = m(() => j.component.schema ?? []), N = f(), P = j.component.queryStringKey ? new URL(N.url, "http://localhost").searchParams.get(j.component.queryStringKey) : null, F = T(M.value.find((e) => e.key === P)?.key ?? M.value[Math.max(0, j.component.activeTab - 1)]?.key ?? M.value[0]?.key ?? "");
-		C(() => {
-			let e = j.component.persistTab;
-			if (!e || P) return;
-			let t = l(e.key, e.storage);
-			t && M.value.some((e) => e.key === t) && (F.value = t);
+	setup(O) {
+		let V = O, H = x(() => V.component.schema ?? []), U = y(), W = V.component.queryStringKey ? h(H.value, new URL(U.url, "http://localhost").searchParams.get(V.component.queryStringKey)) : null, G = N(W ?? H.value[Math.max(0, V.component.activeTab - 1)]?.key ?? H.value[0]?.key ?? "");
+		j(() => {
+			let e = V.component.persistTab;
+			if (!e || W) return;
+			let t = p(e.key, e.storage);
+			t && H.value.some((e) => e.key === t) && (G.value = t);
 		});
-		function I(e) {
-			F.value = e;
-			let t = j.component.persistTab;
-			t && d(t.key, e, t.storage);
+		let K = e(), q = i(), J = n(q?.store ?? {
+			get: () => ({ errors: {} }),
+			subscribe: () => () => {}
+		}, (e) => e.errors), Y = x(() => new Set(H.value.filter((e) => f(e, J.value)).map((e) => e.key)));
+		L(J, (e, t) => {
+			let n = _(H.value, G.value, t ?? {}, e);
+			n !== null && (G.value = n);
+		}, { immediate: !0 });
+		function X(e) {
+			G.value = e;
+			let t = V.component.persistTab;
+			t && v(t.key, e, t.storage);
 		}
-		return k(F, (e) => {
-			if (!j.component.queryStringKey || typeof window > "u") return;
-			let t = new URL(window.location.href);
-			t.searchParams.set(j.component.queryStringKey, e), window.history.replaceState(window.history.state, "", t);
-		}, { immediate: !0 }), (l, d) => (w(), h(r, x({
-			"data-surface": j.component.contained ? "tabs" : void 0,
-			"model-value": F.value,
-			orientation: j.component.vertical ? "vertical" : "horizontal",
-			class: O(e)(j.component.contained && "bg-card rounded-xl border shadow-xs", j.component.vertical && "flex-row")
-		}, j.component.extraAttributes, { "onUpdate:modelValue": d[0] ||= (e) => I(String(e)) }), {
-			default: A(() => [y(a, {
-				"data-scrollable": j.component.scrollable === !1 ? "false" : void 0,
-				class: S(O(e)(j.component.contained && "m-2", j.component.vertical ? "self-start" : j.component.scrollable === !1 ? "h-auto max-w-full flex-wrap justify-start" : "relative max-w-full overflow-x-auto"))
+		return L(G, (e) => {
+			if (!V.component.queryStringKey || typeof window > "u") return;
+			let t = H.value.find((t) => t.key === e), n = new URL(window.location.href);
+			n.searchParams.set(V.component.queryStringKey, t ? g(t) : e), window.history.replaceState(window.history.state, "", n);
+		}, { immediate: !0 }), (e, n) => (M(), S(o, k({
+			"data-surface": V.component.contained ? "tabs" : void 0,
+			"model-value": G.value,
+			orientation: V.component.vertical ? "vertical" : "horizontal",
+			class: I(t)(V.component.contained && "bg-card rounded-xl border shadow-xs", V.component.vertical && "flex-row")
+		}, V.component.extraAttributes, { "onUpdate:modelValue": n[0] ||= (e) => X(String(e)) }), {
+			default: R(() => [D(c, {
+				"data-scrollable": V.component.scrollable === !1 ? "false" : void 0,
+				class: A(I(t)(V.component.contained && "m-2", V.component.vertical ? "self-start" : V.component.scrollable === !1 ? "h-auto max-w-full flex-wrap justify-start" : "relative max-w-full overflow-x-auto"))
 			}, {
-				default: A(() => [(w(!0), _(p, null, E(M.value, (e) => (w(), h(o, {
+				default: R(() => [(M(!0), w(b, null, P(H.value, (e) => (M(), S(l, {
 					key: e.key,
-					value: e.key
+					value: e.key,
+					"data-invalid": Y.value.has(e.key) || void 0,
+					class: A(Y.value.has(e.key) ? B : void 0)
 				}, {
-					default: A(() => [
-						e.icon && e.iconPosition !== "after" ? (w(), h(O(t), {
+					default: R(() => [
+						e.icon && e.iconPosition !== "after" ? (M(), S(I(r), {
 							key: 0,
 							name: e.icon
-						}, null, 8, ["name"])) : g("", !0),
-						v(" " + D(e.label) + " ", 1),
-						e.icon && e.iconPosition === "after" ? (w(), h(O(t), {
+						}, null, 8, ["name"])) : C("", !0),
+						E(" " + F(e.label) + " ", 1),
+						e.icon && e.iconPosition === "after" ? (M(), S(I(r), {
 							key: 1,
 							name: e.icon
-						}, null, 8, ["name"])) : g("", !0),
-						y(c, { tab: e }, null, 8, ["tab"])
+						}, null, 8, ["name"])) : C("", !0),
+						D(d, { tab: e }, null, 8, ["tab"]),
+						Y.value.has(e.key) ? (M(), w(b, { key: 2 }, [n[1] ||= T("span", {
+							"aria-hidden": "true",
+							class: "bg-destructive size-1.5 shrink-0 rounded-full"
+						}, null, -1), T("span", z, "(" + F(I(K)("translatable.has_errors")) + ")", 1)], 64)) : C("", !0)
 					]),
 					_: 2
-				}, 1032, ["value"]))), 128))]),
+				}, 1032, [
+					"value",
+					"data-invalid",
+					"class"
+				]))), 128))]),
 				_: 1
-			}, 8, ["data-scrollable", "class"]), (w(!0), _(p, null, E(M.value, (t) => (w(), h(i, {
-				key: t.key,
-				value: t.key,
+			}, 8, ["data-scrollable", "class"]), (M(!0), w(b, null, P(H.value, (e) => (M(), S(s, {
+				key: e.key,
+				value: e.key,
 				"force-mount": "",
-				class: S(O(e)("data-[state=inactive]:hidden", j.component.contained ? "p-6 pt-4" : "pt-4"))
+				class: A(I(t)("data-[state=inactive]:hidden", V.component.contained ? "p-6 pt-4" : "pt-4"))
 			}, {
-				default: A(() => [y(s, { component: t }, {
-					default: A(({ component: e }) => [y(n, {
+				default: R(() => [D(u, { component: e }, {
+					default: R(({ component: e }) => [D(a, {
 						components: e.schema ?? [],
 						columns: e.columns,
 						attributes: e.extraAttributes,
-						class: S(O(u)(e) || void 0)
+						class: A(I(m)(e) || void 0)
 					}, null, 8, [
 						"components",
 						"columns",
@@ -92,6 +113,6 @@ var j = /*@__PURE__*/ b({
 	}
 });
 //#endregion
-export { j as default };
+export { V as default };
 
 //# sourceMappingURL=TabsComponent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/layout/TabsComponent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Tabs","_mergeProps","_unref","_withCtx","_createVNode","TabsList","_normalizeClass","_createElementBlock","_Fragment","_renderList","TabsTrigger","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","TabBadge","TabsContent","DeferredSchema","SchemaRenderer","Icon_default","SchemaRenderer_default","Tabs_default","TabsContent_default","TabsList_default","TabsTrigger_default","DeferredSchema_default","TabBadge_default","TabsComponent_vue_vue_type_script_setup_true_lang_default","props","__props","tabs","computed","page","usePage","fromQuery","active","ref","tab","persist","stored","readPersisted","changeTab","value","writePersisted","watch","url","openBlock","createBlock","mergeProps","unref","cn","_cache","$event","withCtx","createVNode","normalizeClass","createElementBlock","Fragment","renderList","createCommentVNode","createTextVNode","toDisplayString","loaded","schemaGapClass"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\nconst fromQuery = props.component.queryStringKey\n  ? new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey)\n  : null\nconst active = ref<string>(\n  tabs.value.find((tab) => tab.key === fromQuery)?.key ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger v-for=\"tab in tabs\" :key=\"tab.key\" :value=\"tab.key\">\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TabsComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Tabs","_mergeProps","_unref","_withCtx","_createVNode","TabsList","_normalizeClass","_createElementBlock","_Fragment","_renderList","TabsTrigger","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","TabBadge","_createElementVNode","TabsContent","DeferredSchema","SchemaRenderer","Icon_default","SchemaRenderer_default","Tabs_default","TabsContent_default","TabsList_default","TabsTrigger_default","DeferredSchema_default","TabBadge_default","_hoisted_1","TAB_INVALID_CLASSES","TabsComponent_vue_vue_type_script_setup_true_lang_default","props","__props","tabs","computed","page","usePage","fromQuery","tabFromQuery","active","ref","persist","stored","readPersisted","tab","t","useT","store","useOptionalFormStore","errors","useStoreSelector","state","invalidTabs","componentHasErrors","reveal","tabToReveal","previous","next","changeTab","value","writePersisted","watch","item","url","tabQueryValue","openBlock","createBlock","mergeProps","unref","cn","_cache","$event","withCtx","createVNode","normalizeClass","createElementBlock","Fragment","renderList","createCommentVNode","createTextVNode","toDisplayString","createElementVNode","loaded","schemaGapClass"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport {\n  componentHasErrors,\n  readPersisted,\n  schemaGapClass,\n  tabFromQuery,\n  tabQueryValue,\n  tabToReveal,\n  writePersisted,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\n// The tab's readable value (`?tab=billing-address`), or its key in links from older versions.\nconst fromQuery = props.component.queryStringKey\n  ? tabFromQuery(\n      tabs.value,\n      new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey),\n    )\n  : null\nconst active = ref<string>(\n  fromQuery ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\n// Tabs holding a field with a validation error are marked, and when a submit brings new\n// errors while the open tab has none, the first tab with an error opens.\nconst TAB_INVALID_CLASSES =\n  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'\nconst t = useT()\nconst store = useOptionalFormStore()\nconst errors = useStoreSelector(\n  store?.store ?? {\n    get: () => ({ errors: {} as Record<string, string[]> }),\n    subscribe: () => () => {},\n  },\n  (state) => state.errors,\n)\nconst invalidTabs = computed(\n  () =>\n    new Set(\n      tabs.value.filter((tab) => componentHasErrors(tab, errors.value)).map((tab) => tab.key),\n    ),\n)\n\nwatch(\n  errors,\n  (next, previous) => {\n    const reveal = tabToReveal(tabs.value, active.value, previous ?? {}, next)\n\n    if (reveal !== null) active.value = reveal\n  },\n  { immediate: true },\n)\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const tab = tabs.value.find((item) => item.key === value)\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, tab ? tabQueryValue(tab) : value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.key\"\n        :value=\"tab.key\"\n        :data-invalid=\"invalidTabs.has(tab.key) || undefined\"\n        :class=\"invalidTabs.has(tab.key) ? TAB_INVALID_CLASSES : undefined\"\n      >\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n        <template v-if=\"invalidTabs.has(tab.key)\">\n          <span aria-hidden=\"true\" class=\"bg-destructive size-1.5 shrink-0 rounded-full\"></span>\n          <span class=\"sr-only\">({{ t('translatable.has_errors') }})</span>\n        </template>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":"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"}

package/dist/components/notifications/NotificationsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.js","names":["_sfc_main","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","NotificationsMenu_default"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n} from '@alfakit/core'\nimport { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"NotificationsMenu.js","names":["_sfc_main","NotificationsMenu_vue_vue_type_script_setup_true_lang_default","NotificationsMenu_default"],"sources":["../../../src/components/notifications/NotificationsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n} from '@alfakit/core'\nimport { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'\nimport { computed, onMounted, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport ScrollArea from '../ui/ScrollArea.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport NotificationActionButton from './NotificationActionButton.vue'\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n * `variant=\"sidebar\"`: a full-width row with a label, for layouts that put it in the sidebar.\n */\nconst props = withDefaults(defineProps<{ variant?: 'topbar' | 'sidebar' }>(), {\n  variant: 'topbar',\n})\nconst t = useT()\nconst direction = useDirection()\nconst panel = usePanel()\nconst config = computed(() => panel.value.databaseNotifications)\nconst endpoints = panel.value.endpoints\n\nconst center =\n  endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n    ? new NotificationCenter(\n        {\n          notifications: endpoints.notifications,\n          notificationsReadAll: endpoints.notificationsReadAll,\n          notificationsDestroyAll: endpoints.notificationsDestroyAll,\n        },\n        config.value?.unreadCount ?? 0,\n      )\n    : null\n\nconst open = ref(false)\nconst state = useStore(\n  center?.store ?? {\n    get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n    subscribe: () => () => {},\n  },\n)\n\n// Polling starts in the browser only: a server render must not leave timers behind.\nonMounted(() => {\n  watch(\n    () => config.value?.pollingInterval,\n    (interval) => center?.startPolling(interval),\n    { immediate: true },\n  )\n})\n\nwatch(open, (isOpen) => {\n  if (isOpen) void center?.load()\n})\n\n// Every visit brings the server's unread count (another user after impersonating, or\n// notifications read in another tab): follow it instead of waiting for the next poll.\nwatch(\n  () => config.value?.unreadCount,\n  (count) => {\n    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {\n      center.store.update({ unreadCount: count })\n    }\n  },\n)\n\n// Realtime notifications announce stored ones, so the unread count updates right away.\nlet stopListening: (() => void) | null = null\nonMounted(() => {\n  stopListening = center ? onDatabaseNotificationsSent(() => void center.load()) : null\n})\nonScopeDispose(() => stopListening?.())\n\n// `openDatabaseNotifications()`: opened from code or an action.\nlet stopOpenListener: (() => void) | null = null\nonMounted(() => {\n  stopOpenListener = onOpenDatabaseNotifications(() => (open.value = true))\n})\nonScopeDispose(() => stopOpenListener?.())\n\nonScopeDispose(() => center?.stopPolling())\nconst format = useFormatter()\n</script>\n\n<template>\n  <Popover v-if=\"config && center\" :open=\"open\" @update:open=\"open = $event\">\n    <PopoverTrigger as-child>\n      <Button\n        v-if=\"props.variant === 'sidebar'\"\n        type=\"button\"\n        variant=\"ghost\"\n        class=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n        data-slot=\"notifications-trigger\"\n        data-variant=\"sidebar\"\n      >\n        <!-- In a collapsed (icon) sidebar only the bell and its badge stay visible. -->\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span class=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">{{\n          t('notifications', {}, 'Notifications')\n        }}</span>\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}\n          <span class=\"sr-only\">{{ t('unread_notifications', {}, 'unread') }}</span></span\n        >\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"relative\"\n        data-slot=\"notifications-trigger\"\n        :aria-label=\"t('notifications', {}, 'Notifications')\"\n      >\n        <Icon\n          name=\"alfakit::panels.topbar.open-database-notifications-button\"\n          :fallback=\"BellIcon\"\n        />\n        <span\n          v-if=\"state.unreadCount > 0\"\n          class=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\"\n          >{{ state.unreadCount > 99 ? '99+' : state.unreadCount }}</span\n        >\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      :align=\"props.variant === 'sidebar' ? 'start' : 'end'\"\n      :side=\"props.variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'\"\n      class=\"w-80 p-0 sm:w-96\"\n    >\n      <div class=\"flex items-center justify-between border-b px-3 py-2\">\n        <span class=\"text-sm font-semibold\">{{ t('notifications', {}, 'Notifications') }}</span>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"state.unreadCount > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('mark_all_read', {}, 'Mark all as read')\"\n            @click=\"void center.markAllAsRead()\"\n            ><CheckCheckIcon\n          /></Button>\n          <Button\n            v-if=\"state.notifications.length > 0\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :title=\"t('clear_notifications', {}, 'Clear notifications')\"\n            @click=\"void center.clear()\"\n            ><Trash2Icon\n          /></Button>\n        </div>\n      </div>\n      <ScrollArea class=\"max-h-96\">\n        <div\n          v-if=\"state.loading && state.notifications.length === 0\"\n          class=\"flex justify-center py-8\"\n        >\n          <Spinner />\n        </div>\n        <p\n          v-else-if=\"state.notifications.length === 0\"\n          class=\"text-muted-foreground px-3 py-8 text-center text-sm\"\n        >\n          {{ t('no_notifications', {}, 'You have no notifications.') }}\n        </p>\n        <ul v-else class=\"divide-y\">\n          <li\n            v-for=\"notification in state.notifications\"\n            :key=\"notification.id\"\n            :class=\"cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')\"\n            :style=\"\n              notification.color\n                ? notificationTintStyles(cssColor(notification.color)).item\n                : undefined\n            \"\n          >\n            <Icon\n              v-if=\"notification.icon\"\n              :name=\"notification.icon\"\n              :class=\"\n                cn(\n                  'mt-0.5 size-5 shrink-0',\n                  notification.iconColor && textColorClasses[notification.iconColor],\n                )\n              \"\n            />\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <p class=\"text-sm font-medium\">{{ notification.title }}</p>\n                <button\n                  v-if=\"!notification.readAt\"\n                  type=\"button\"\n                  class=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                  :aria-label=\"t('mark_as_read', {}, 'Mark as read')\"\n                  @click=\"void center.markAsRead(notification.id)\"\n                >\n                  <span class=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <p\n                v-if=\"notification.body\"\n                class=\"text-muted-foreground text-sm\"\n                v-html=\"notification.body\"\n              />\n              <time v-if=\"notification.date\" class=\"text-muted-foreground text-xs\">{{\n                format.relative(notification.date)\n              }}</time>\n              <div v-if=\"notification.actions\" class=\"flex flex-wrap gap-1\">\n                <NotificationActionButton\n                  v-for=\"action in notification.actions\"\n                  :key=\"action.name\"\n                  :action=\"action\"\n                  :on-mark-as-read=\"() => void center!.markAsRead(notification.id)\"\n                  :on-mark-as-unread=\"() => void center!.markAsUnread(notification.id)\"\n                />\n              </div>\n            </div>\n          </li>\n        </ul>\n        <div\n          v-if=\"state.hasMore && state.notifications.length > 0\"\n          class=\"flex justify-center border-t p-2\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            :disabled=\"state.loading\"\n            @click=\"void center!.loadMore()\"\n          >\n            <Spinner v-if=\"state.loading\" />\n            {{ t('load_more', {}, 'Load more') }}\n          </Button>\n        </div>\n      </ScrollArea>\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/notifications/NotificationsMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationsMenu.vue"],"names":[],"mappings":"AA8QA;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAC;;aAAvB,QAAQ,GAAG,SAAS;;AAylBnD,wBAOG"}
+{"version":3,"file":"NotificationsMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/NotificationsMenu.vue"],"names":[],"mappings":"AAyRA;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAC;;aAAvB,QAAQ,GAAG,SAAS;;AAomBnD,wBAOG"}