@alfakit/vue 0.1.1 → 0.1.6

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

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Tooltip","_withCtx","_createVNode","TooltipTrigger","_normalizeClass","Button","_mergeProps","_createElementVNode","Spinner","_unref","Icon","_createCommentVNode","_createElementBlock","_toDisplayString","Badge","_createTextVNode","TooltipContent","_Fragment","Icon_default","Badge_default","Button_default","Spinner_default","Tooltip_default","TooltipContent_default","TooltipTrigger_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","BADGE_TRIGGER_CLASSES","ActionButton_vue_vue_type_script_setup_true_lang_default","props","__props","runner","useActionRunner","loading","useStoreSelector","state","processing","modal","variant","computed","isIconOnly","busy","isPlainLink","bindsKeys","bindsKeyBindings","buttonClasses","color","action","kind","cn","colorClass","outlineButtonColorClasses","ghostButtonColorClasses","textColorClasses","badgeColorClasses","solidButtonColorClasses","run","onCleanup","registerKeyBindings","onClick","event","sizeProp","size","resolveActionSize","iconButtonSize","LABEL_FROM","ICON_ONLY_BELOW","labeledFrom","labelClass","classes","t","useT","newTabHint","ariaLabel","name","tooltip","shortcut","disabledTooltip","openBlock","createBlock","withCtx","createVNode","normalizeClass","mergeProps","createElementVNode","unref","createCommentVNode","createElementBlock","toDisplayString","createTextVNode","Link","formatKeyBinding","Fragment"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\nconst loading = useStoreSelector(runner.store, (state) => state.loading === props.action.name)\nconst processing = useStoreSelector(runner.store, (state) =>\n  state.modals.some((modal) => modal.action.name === props.action.name && modal.processing),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd v-if=\"shortcut\" class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\">{{\n        formatKeyBinding(shortcut)\n      }}</kbd>\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GA4EMgC,IACJ;;;;;;;;;;;;;;;;;;;;;EAlCF,IAAME,IAAQC,GAKRC,IAASC,EAAgB,GACzBC,KAAUC,EAAiBH,EAAO,QAAQ,MAAUI,EAAM,YAAYN,EAAM,OAAO,IAAI,GACvFO,KAAaF,EAAiBH,EAAO,QAAQ,MACjDI,EAAM,OAAO,MAAM,MAAUE,EAAM,OAAO,SAASR,EAAM,OAAO,QAAQQ,EAAM,UAAU,CAC1F,GAEMC,IAAUC,QAEZV,EAAM,YACLA,EAAM,OAAO,WACV,YACCA,EAAM,OAAO,YACbA,EAAM,OAAO,aAAaA,EAAM,OAAO,YAAYA,EAAM,OAAO,MAAM,SAAS,UACxF,GACMW,IAAaD,QAAeD,EAAQ,UAAU,iBAAiB,CAACT,EAAM,OAAO,KAAK,GAClFY,IAAOF,QAAeN,GAAQ,SAASG,GAAW,KAAK,GAEvDM,IAAcH,QAClB,EACE,GAAM,OAAO,OAAQV,EAAM,OAAO,aAAcA,EAAM,OAAO,YAAaA,EAAM,OAAO,SAE3F,GAEMc,IAAYJ,QACVV,EAAM,mBAAmBe,EAAiBf,EAAM,QAAQA,EAAM,OAAO,CAC7E;EAMA,SAASgB,GAAc,GAAsB,GAAuC;GAClF,IAAMC,IAAQC,EAAO,SAAS;GAE9B,QAAQC,GAAR;IACE,KAAK,WACH,OAAOC,EAAG,wBAAwBC,EAAWC,IAA2BL,GAAO,MAAM,CAAC;IACxF,KAAK,SACH,OAAOI,EAAWE,GAAyBN,GAAO,MAAM;IAC1D,KAAK,QACH,OAAOG,EACL,iDACAC,EAAWG,GAAkBP,GAAO,SAAS,CAC/C;IACF,KAAK,eACH,OAAOI,EAAWE,GAAyBN,GAAO,MAAM;IAC1D,KAAK,SAEH,OAAOG,EAAGtB,GAAuBuB,EAAWI,GAAmBR,GAAO,SAAS,CAAC;IAClF,SACE,OAAOI,EAAWK,IAAyBT,GAAO,SAAS;GAC/D;EACF;EAEA,IAAMU,UACJ,MAAM3B,EAAM,YACRA,EAAM,UAAUA,EAAM,QAAQA,EAAM,OAAO,IAC3CE,EAAO,QAAQF,EAAM,QAAQA,EAAM,OAAO;EAEhD,IAAa,MAAc;GACzB,AAAKc,EAAU,SAAUd,EAAM,OAAO,eAItC4B,EAAUC,GAAoB,CAAC;IAAE,MAAM7B,EAAM,OAAO;IAAa,SAAS2B;GAAI,CAAC,CAAC,CAAC;EACnF,CAAC;EAED,IAAMG,KAAW,MAAsB;GACrC,AAAIjB,EAAY,UAIhBkB,EAAM,eAAe,GACrBJ,EAAI;EACN,GAEMK,IAAWtB,QAAe;GAC9B,IAAMuB,IAAOxB,EAAQ,UAAU,UAAU,OAAOyB,EAAkBlC,EAAM,OAAO,MAAMA,EAAM,IAAI;GAE/F,OAAOW,EAAW,QAAQwB,GAAeF,CAAI,IAAIA;EACnD,CAAC,GAEKG,KAAqC;GACzC,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GACMC,KAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GACMC,IAAc5B,QAClB,CAACC,EAAW,SAASX,EAAM,OAAO,QAAQA,EAAM,OAAO,cACnDA,EAAM,OAAO,cACb,IACN,GACMuC,IAAa7B,QAAgB4B,EAAY,QAAQF,GAAWE,EAAY,SAAS,KAAA,CAAU,GAC3FE,IAAU9B,QACdU,EACEJ,GAAchB,EAAM,QAAQS,EAAQ,KAAK,GACzC6B,EAAY,SAASD,GAAgBC,EAAY,QACjDtC,EAAM,KACR,CACF,GACMyC,KAAIC,EAAK,GACTC,IAAajC,QAAe+B,GAAE,oBAAoB,CAAC,GAAG,sBAAsB,CAAC,GAC7EG,IAAYlC,QAAe;GAC/B,IAAI,CAACC,EAAW,SAAS,CAAC2B,EAAY,OAAO;GAE7C,IAAMO,IAAO7C,EAAM,OAAO,SAASA,EAAM,OAAO,WAAWA,EAAM,OAAO;GAExE,OAAOa,EAAY,SAASb,EAAM,OAAO,kBAAkB,GAAG6C,EAAK,GAAGF,EAAW,UAAUE;EAC7F,CAAC,GACKC,IAAUpC,QACRV,EAAM,OAAO,YAAYW,EAAW,QAAQX,EAAM,OAAO,QAAQ,KAAA,EACzE,GACM+C,IAAWrC,QAAgBI,EAAU,QAAQd,EAAM,OAAO,cAAc,KAAK,KAAA,CAAU,GACvFgD,IAAkBtC,QAAe,GAAQV,EAAM,OAAO,YAAY8C,EAAQ,MAAM;mBAIrEA,EAAA,SAAWC,EAAA,SAA1BjF,EAAA,GAAAC,EA8GUC,IAAA,EAAA,KAAA,EAAA,GAAA;GA3GR,SAAAC,QAoGiB,CApGjBC,EAoGiBC,IAAA;IAnGd,YAAQ,CAAG6E,EAAA;IACX,IAAIA,EAAA,QAAe,SAAY,KAAA;IAC/B,UAAUA,EAAA,QAAe,IAAO,KAAA;IAChC,OAAK5E,EAAE4E,EAAA,QAAe,gBAAmB,KAAA,CAAS;IAClD,yBAAuBA,EAAA,QAAe,KAAQ,KAAA;;IAE/C,SAAA/E,QA+BS,CA9BD4C,EAAA,SAAeb,EAAM,OAAO,mBADpClC,EAAA,GAAAC,EA+BSM,GA/BTC,EA+BS;;KA7BP,YAAA;KACA,SAAQ;KACP,MAAM0D,EAAA;KACN,OAAOQ,EAAA;KACP,UAAUxC,EAAM,OAAO;KACvB,cAAY4C,EAAA;IACL,GAAA5C,EAAM,OAAO,eAAe,GAAA;KAEpC,SAAA/B,QAoBI,CApBJM,EAoBI,KAAA;MApBA,MAAMyB,EAAM,OAAO;MAAK,QAAO;MAAS,KAAI;;MAC/BY,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;OADC,MAAMsB,EAAM,OAAO;;MAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;OAAlD,OAAKR,EAAEmE,EAAA,KAAU;MAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;MACrDW,EAAA,QAA0C8C,EAAA,IAAA,EAAA,KAAvD3F,EAAA,GAAAc,EAAiE,QAAjEc,GAAiEb,EAApB8D,EAAA,KAAU,GAAA,CAAA;MAE/C3C,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;OADC,MAAMsB,EAAM,OAAO;;MAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;OALC,SAAQ;OACP,OAAKV,EAAiBK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;OAGlG,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;IAKf,CAAA,KAAAa,EAAA,SADb/C,EAAA,GAAAC,EA8BSM,GA9BTC,EA8BS;;KA5BP,YAAA;KACA,SAAQ;KACP,MAAM0D,EAAA;KACN,OAAOQ,EAAA;KACP,UAAUxC,EAAM,OAAO;KACvB,cAAY4C,EAAA;IACL,GAAA5C,EAAM,OAAO,eAAe,GAAA;KAEpC,SAAA/B,QAmBO,CAnBPC,EAmBOO,EAAAoF,CAAA,GAAA,EAnBA,MAAM7D,EAAM,OAAO,OAAG,IAAA,GAAA;MAC3B,SAAA/B,QAAuB;OAAR2C,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;QADC,MAAMsB,EAAM,OAAO;;OAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;QAAlD,OAAKR,EAAEmE,EAAA,KAAU;OAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;OAE1DA,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;QADC,MAAMsB,EAAM,OAAO;;OAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;QALC,SAAQ;QACP,OAAKV,EAAiBK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;QAGlG,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;IAI5BlC,CAAAA,MAAAA,EAAA,GAAAC,EA6BSM,GA7BTC,EA6BS;;KA3BP,MAAK;KACL,SAAQ;KACP,MAAM0D,EAAA;KACN,OAAOQ,EAAA;KACP,UAAUxC,EAAM,OAAO,YAAYY,EAAA;KACnC,cAAYgC,EAAA;IACL,GAAA5C,EAAM,OAAO,iBAAe,EAC5B,WAAO,CAAA,GAAA;KAEf,SAAA/B,QAAuB;MAAR2C,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;OADC,MAAMsB,EAAM,OAAO;;MAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;OAAlD,OAAKR,EAAEmE,EAAA,KAAU;MAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;MAE1DA,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;OADC,MAAMsB,EAAM,OAAO;;MAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;OALC,SAAQ;OACP,OAAKV,EAAeK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;OAGhG,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;GAI5B9B,CAAAA,GAAAA,EAKiBc,IAAA,MAAA;IAJf,SAAAf,QAAa,CAAVc,EAAAF,EAAAiE,EAAA,KAAO,IAAG,KACb,CAAA,GAAWC,EAAA,SAAXjF,EAAA,GAAAc,EAEQ,OAFRe,GAEQd,EADNJ,EAAAqF,CAAA,CAAgB,CAACf,EAAA,KAAQ,CAAA,GAAA,CAAA,KAAAU,EAAA,IAAA,EAAA,CAAA,CAAA;;;;EAI/B3F,CAAAA,MAAAA,EAAA,GAAAc,EA8FWK,IAAA,EAAA,KAAA,EAAA,GAAA,CA5FD4B,EAAA,SAAeb,EAAM,OAAO,mBADpClC,EAAA,GAAAC,EA+BSM,GA/BTC,EA+BS;;GA7BP,YAAA;GACA,SAAQ;GACP,MAAM0D,EAAA;GACN,OAAOQ,EAAA;GACP,UAAUxC,EAAM,OAAO;GACvB,cAAY4C,EAAA;EACL,GAAA5C,EAAM,OAAO,eAAe,GAAA;GAEpC,SAAA/B,QAoBI,CApBJM,EAoBI,KAAA;IApBA,MAAMyB,EAAM,OAAO;IAAK,QAAO;IAAS,KAAI;;IAC/BY,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;KADC,MAAMsB,EAAM,OAAO;;IAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;KAAlD,OAAKR,EAAEmE,EAAA,KAAU;IAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;IACrDW,EAAA,QAA0C8C,EAAA,IAAA,EAAA,KAAvD3F,EAAA,GAAAc,EAAiE,QAAjEiB,GAAiEhB,EAApB8D,EAAA,KAAU,GAAA,CAAA;IAE/C3C,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;KADC,MAAMsB,EAAM,OAAO;;IAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;KALC,SAAQ;KACP,OAAKV,EAAeK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;KAGhG,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;EAKf,CAAA,KAAAa,EAAA,SADb/C,EAAA,GAAAC,EA8BSM,GA9BTC,EA8BS;;GA5BP,YAAA;GACA,SAAQ;GACP,MAAM0D,EAAA;GACN,OAAOQ,EAAA;GACP,UAAUxC,EAAM,OAAO;GACvB,cAAY4C,EAAA;EACL,GAAA5C,EAAM,OAAO,eAAe,GAAA;GAEpC,SAAA/B,QAmBO,CAnBPC,EAmBOO,EAAAoF,CAAA,GAAA,EAnBA,MAAM7D,EAAM,OAAO,OAAG,IAAA,GAAA;IAC3B,SAAA/B,QAAuB;KAAR2C,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;MADC,MAAMsB,EAAM,OAAO;;KAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;MAAlD,OAAKR,EAAEmE,EAAA,KAAU;KAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;KAE1DA,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;MADC,MAAMsB,EAAM,OAAO;;KAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;MALC,SAAQ;MACP,OAAKV,EAAeK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;MAGhG,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;EAI5BlC,CAAAA,MAAAA,EAAA,GAAAC,EA6BSM,GA7BTC,EA6BS;;GA3BP,MAAK;GACL,SAAQ;GACP,MAAM0D,EAAA;GACN,OAAOQ,EAAA;GACP,UAAUxC,EAAM,OAAO,YAAYY,EAAA;GACnC,cAAYgC,EAAA;EACL,GAAA5C,EAAM,OAAO,iBAAe,EAC5B,WAAO,CAAA,GAAA;GAEf,SAAA/B,QAAuB;IAAR2C,EAAA,SAAf9C,EAAA,GAAAC,EAAuBS,GAAA,EAAA,KAAA,EAAA,CAAA,KAEVwB,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAD3DlC,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;KADC,MAAMsB,EAAM,OAAO;;IAETW,EAAA,QAAqD8C,EAAA,IAAA,EAAA,KAAlE3F,EAAA,GAAAc,EAA4E,QAAA;;KAAlD,OAAKR,EAAEmE,EAAA,KAAU;IAAK,GAAA1D,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA;IAE1DA,EAAM,OAAO,QAAQA,EAAM,OAAO,iBAAY,WAAA,CAAiBY,EAAA,SADvE9C,EAAA,GAAAC,EAGEU,EAAAC,CAAA,GAAA;;KADC,MAAMsB,EAAM,OAAO;;IAGdA,EAAM,OAAO,UAAU,KAAA,KAAaA,EAAM,OAAO,UAAK,QAD9DlC,EAAA,GAAAC,EAOCe,GAAA;;KALC,SAAQ;KACP,OAAKV,EAAaK,EAAA2C,CAAA,CAAE,CAAA,oBAAqB3C,EAAA4C,CAAA,CAAU,CAAC5C,EAAAgD,CAAA,GAAmBzB,EAAM,OAAO,YAAU,MAAA,CAAA,CAAA;;KAG9F,SAAA/B,QAAwB,CAArBc,EAAAF,EAAAmB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ActionButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Tooltip","_withCtx","_createVNode","TooltipTrigger","_normalizeClass","Button","_mergeProps","_createElementVNode","Spinner","_unref","Icon","_createCommentVNode","_createElementBlock","_toDisplayString","Badge","_createTextVNode","TooltipContent","_Fragment","Icon_default","Badge_default","Button_default","Spinner_default","Tooltip_default","TooltipContent_default","TooltipTrigger_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","BADGE_TRIGGER_CLASSES","ActionButton_vue_vue_type_script_setup_true_lang_default","props","__props","runner","useActionRunner","loading","useStoreSelector","isActionLoading","state","processing","isActionProcessing","variant","computed","isIconOnly","busy","isPlainLink","bindsKeys","bindsKeyBindings","buttonClasses","color","action","kind","cn","colorClass","outlineButtonColorClasses","ghostButtonColorClasses","textColorClasses","badgeColorClasses","solidButtonColorClasses","run","onCleanup","registerKeyBindings","onClick","event","sizeProp","size","resolveActionSize","iconButtonSize","LABEL_FROM","ICON_ONLY_BELOW","labeledFrom","labelClass","classes","t","useT","newTabHint","ariaLabel","name","tooltip","shortcut","disabledTooltip","openBlock","createBlock","withCtx","createVNode","normalizeClass","mergeProps","createElementVNode","unref","createCommentVNode","createElementBlock","toDisplayString","createTextVNode","Link","formatKeyBinding","Fragment"],"sources":["../../../src/components/actions/ActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema } from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  formatKeyBinding,\n  iconButtonSize,\n  isActionLoading,\n  isActionProcessing,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/vue3'\nimport { computed, watchEffect, type HTMLAttributes } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useActionRunner, useT } from '../../context'\nimport {\n  badgeColorClasses,\n  colorClass,\n  ghostButtonColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\n\nexport interface ActionButtonProps {\n  action: ActionSchema\n  context: ActionContext\n  size?: 'xs' | 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  /** Force a variant (e.g. menu items render as plain rows). */\n  variant?: ActionSchema['variant']\n  /** Bind the action's key bindings globally while mounted. */\n  withKeyBindings?: boolean\n  /** Override how the action runs (e.g. a form submits its values). */\n  onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'default',\n  withKeyBindings: true,\n})\n\nconst runner = useActionRunner()\n// Only this run (this record's button), not the same action in every table row.\nconst loading = useStoreSelector(runner.store, (state) =>\n  isActionLoading(state, props.action, props.context),\n)\nconst processing = useStoreSelector(runner.store, (state) =>\n  isActionProcessing(state, props.action, props.context),\n)\n\nconst variant = computed(\n  () =>\n    props.variant ??\n    (props.action.outlined\n      ? 'outline'\n      : (props.action.variant ??\n        (props.action.hasAction || props.action.hasModal || props.action.url ? 'link' : 'button'))),\n)\nconst isIconOnly = computed(() => variant.value === 'icon-button' || !props.action.label)\nconst busy = computed(() => loading.value || processing.value)\n// A disabled link renders as a disabled button so it cannot navigate.\nconst isPlainLink = computed(() =>\n  Boolean(\n    props.action.url && !props.action.hasAction && !props.action.hasModal && !props.action.disabled,\n  ),\n)\n// Record actions repeat per row: a global shortcut would run them for every record.\nconst bindsKeys = computed(\n  () => props.withKeyBindings && bindsKeyBindings(props.action, props.context),\n)\n\n/** The badge trigger style (`badge()` without an argument). */\nconst BADGE_TRIGGER_CLASSES =\n  \"h-auto min-h-6 gap-1 rounded-md border px-2 py-0.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5\"\n\nfunction buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): string {\n  const color = action.color ?? 'primary'\n\n  switch (kind) {\n    case 'outline':\n      return cn('bg-background border', colorClass(outlineButtonColorClasses, color, 'gray'))\n    case 'ghost':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'link':\n      return cn(\n        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',\n        colorClass(textColorClasses, color, 'primary'),\n      )\n    case 'icon-button':\n      return colorClass(ghostButtonColorClasses, color, 'gray')\n    case 'badge':\n      // `badge()`: a tinted pill in the action's colour.\n      return cn(BADGE_TRIGGER_CLASSES, colorClass(badgeColorClasses, color, 'primary'))\n    default:\n      return colorClass(solidButtonColorClasses, color, 'primary')\n  }\n}\n\nconst run = () =>\n  void (props.onTrigger\n    ? props.onTrigger(props.action, props.context)\n    : runner.trigger(props.action, props.context))\n\nwatchEffect((onCleanup) => {\n  if (!bindsKeys.value || !props.action.keyBindings) {\n    return\n  }\n\n  onCleanup(registerKeyBindings([{ keys: props.action.keyBindings, handler: run }]))\n})\n\nconst onClick = (event: MouseEvent) => {\n  if (isPlainLink.value) {\n    return // Plain link: let Inertia Link / anchor handle it.\n  }\n\n  event.preventDefault()\n  run()\n}\n\nconst sizeProp = computed(() => {\n  const size = variant.value === 'badge' ? 'xs' : resolveActionSize(props.action.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\n// `labeledFrom()`: icon only below the breakpoint; the label stays the accessible name.\nconst LABEL_FROM: Record<string, string> = {\n  sm: 'hidden sm:inline',\n  md: 'hidden md:inline',\n  lg: 'hidden lg:inline',\n  xl: 'hidden xl:inline',\n  '2xl': 'hidden 2xl:inline',\n}\nconst ICON_ONLY_BELOW: Record<string, string> = {\n  sm: 'max-sm:aspect-square max-sm:px-0',\n  md: 'max-md:aspect-square max-md:px-0',\n  lg: 'max-lg:aspect-square max-lg:px-0',\n  xl: 'max-xl:aspect-square max-xl:px-0',\n  '2xl': 'max-2xl:aspect-square max-2xl:px-0',\n}\nconst labeledFrom = computed(() =>\n  !isIconOnly.value && props.action.icon && props.action.labeledFrom\n    ? props.action.labeledFrom\n    : null,\n)\nconst labelClass = computed(() => (labeledFrom.value ? LABEL_FROM[labeledFrom.value] : undefined))\nconst classes = computed(() =>\n  cn(\n    buttonClasses(props.action, variant.value),\n    labeledFrom.value && ICON_ONLY_BELOW[labeledFrom.value],\n    props.class,\n  ),\n)\nconst t = useT()\nconst newTabHint = computed(() => t('opens_in_new_tab', {}, '(opens in a new tab)'))\nconst ariaLabel = computed(() => {\n  if (!isIconOnly.value && !labeledFrom.value) return undefined\n\n  const name = props.action.label ?? props.action.tooltip ?? props.action.name\n\n  return isPlainLink.value && props.action.openUrlInNewTab ? `${name} ${newTabHint.value}` : name\n})\nconst tooltip = computed(\n  () => props.action.tooltip ?? (isIconOnly.value ? props.action.label : undefined),\n)\nconst shortcut = computed(() => (bindsKeys.value ? props.action.keyBindings?.[0] : undefined))\nconst disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.value))\n</script>\n\n<template>\n  <Tooltip v-if=\"tooltip || shortcut\">\n    <!-- A disabled button gets no pointer or focus events: a focusable span carries the\n         tooltip (e.g. the reason from `authorizationTooltip()`). -->\n    <TooltipTrigger\n      :as-child=\"!disabledTooltip\"\n      :as=\"disabledTooltip ? 'span' : undefined\"\n      :tabindex=\"disabledTooltip ? 0 : undefined\"\n      :class=\"disabledTooltip ? 'inline-flex' : undefined\"\n      :data-disabled-tooltip=\"disabledTooltip ? '' : undefined\"\n    >\n      <Button\n        v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </a>\n      </Button>\n      <Button\n        v-else-if=\"isPlainLink\"\n        as-child\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n      >\n        <Link :href=\"props.action.url ?? '#'\">\n          <Spinner v-if=\"busy\" />\n          <Icon\n            v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n            :name=\"props.action.icon\"\n          />\n          <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n          <Icon\n            v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n            :name=\"props.action.icon\"\n          />\n          <Badge\n            v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n            variant=\"outline\"\n            :class=\"\n              cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n            \"\n            >{{ props.action.badge }}</Badge\n          >\n        </Link>\n      </Button>\n      <Button\n        v-else\n        type=\"button\"\n        variant=\"plain\"\n        :size=\"sizeProp\"\n        :class=\"classes\"\n        :disabled=\"props.action.disabled || busy\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"props.action.extraAttributes\"\n        @click=\"onClick\"\n      >\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      {{ tooltip }}\n      <kbd\n        v-if=\"shortcut\"\n        dir=\"ltr\"\n        class=\"ms-2 rounded border border-white/20 px-1 font-mono text-[10px]\"\n        >{{ formatKeyBinding(shortcut) }}</kbd\n      >\n    </TooltipContent>\n  </Tooltip>\n  <template v-else>\n    <Button\n      v-if=\"isPlainLink && props.action.openUrlInNewTab\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <a :href=\"props.action.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <span v-if=\"!isIconOnly\" class=\"sr-only\"> {{ newTabHint }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </a>\n    </Button>\n    <Button\n      v-else-if=\"isPlainLink\"\n      as-child\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n    >\n      <Link :href=\"props.action.url ?? '#'\">\n        <Spinner v-if=\"busy\" />\n        <Icon\n          v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n          :name=\"props.action.icon\"\n        />\n        <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n        <Icon\n          v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n          :name=\"props.action.icon\"\n        />\n        <Badge\n          v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n          variant=\"outline\"\n          :class=\"\n            cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n          \"\n          >{{ props.action.badge }}</Badge\n        >\n      </Link>\n    </Button>\n    <Button\n      v-else\n      type=\"button\"\n      variant=\"plain\"\n      :size=\"sizeProp\"\n      :class=\"classes\"\n      :disabled=\"props.action.disabled || busy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"props.action.extraAttributes\"\n      @click=\"onClick\"\n    >\n      <Spinner v-if=\"busy\" />\n      <Icon\n        v-else-if=\"props.action.icon && props.action.iconPosition !== 'after'\"\n        :name=\"props.action.icon\"\n      />\n      <span v-if=\"!isIconOnly\" :class=\"labelClass\">{{ props.action.label }}</span>\n      <Icon\n        v-if=\"props.action.icon && props.action.iconPosition === 'after' && !busy\"\n        :name=\"props.action.icon\"\n      />\n      <Badge\n        v-if=\"props.action.badge !== undefined && props.action.badge !== null\"\n        variant=\"outline\"\n        :class=\"\n          cn('ms-1 px-1.5 py-0', colorClass(badgeColorClasses, props.action.badgeColor, 'gray'))\n        \"\n        >{{ props.action.badge }}</Badge\n      >\n    </Button>\n  </template>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionGroupMenu.js","names":["_sfc_main","ActionGroupMenu_vue_vue_type_script_setup_true_lang_default","ActionGroupMenu_default"],"sources":["../../../src/components/actions/ActionGroupMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionButtonSize,\n  ActionContext,\n  ActionGroupSchema,\n  ActionSchema,\n} from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  flattenActionGroup,\n  iconButtonSize,\n  parseDropdownPlacement,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { computed, watchEffect } from 'vue'\nimport { useActionRunner, useT } from '../../context'\nimport { colorClass, ghostButtonColorClasses, outlineButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\nimport ActionButton from './ActionButton.vue'\nimport ActionGroupItems from './ActionGroupItems.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: ActionGroupSchema\n    context: ActionContext\n    size?: ActionButtonSize\n    onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n  }>(),\n  { size: 'default' },\n)\n\n/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */\nconst DROPDOWN_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-[calc(100vw-2rem)]',\n  screen: 'w-screen',\n}\n\n// `buttonGroup()` and `dropdown(false)`: the actions render inline instead of a dropdown.\nconst isInline = computed(() => Boolean(props.group.buttonGroup) || props.group.dropdown === false)\nconst inlineActions = computed(() =>\n  flattenActionGroup(props.group.actions).map((action) =>\n    props.group.buttonGroup && action.variant !== 'icon-button'\n      ? { ...action, variant: 'outline' as const }\n      : action,\n  ),\n)\nconst inlineSize = computed(() => resolveActionSize(props.group.size, props.size))\nconst contentClass = computed(() =>\n  cn(\n    props.group.dropdownWidth && DROPDOWN_WIDTHS[props.group.dropdownWidth],\n    props.group.maxHeight && 'overflow-y-auto',\n  ),\n)\nconst contentStyle = computed(() =>\n  props.group.maxHeight ? { maxHeight: props.group.maxHeight } : undefined,\n)\n\nconst t = useT()\nconst runner = useActionRunner()\nconst isIconOnly = computed(() => !props.group.label || props.group.variant === 'icon-button')\nconst buttonSize = computed(() => {\n  const size = resolveActionSize(props.group.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\nconst placement = computed(() => parseDropdownPlacement(props.group.dropdownPlacement))\nconst triggerClass = computed(() =>\n  cn(\n    props.group.color &&\n      colorClass(\n        props.group.variant === 'button' ? outlineButtonColorClasses : ghostButtonColorClasses,\n        props.group.color,\n      ),\n  ),\n)\n\n// Shortcuts of the actions inside the group work like those of standalone buttons (and,\n// like them, never for record rows).\nwatchEffect((onCleanup) => {\n  const bindings = flattenActionGroup(props.group.actions)\n    .filter((action) => bindsKeyBindings(action, props.context))\n    .map((action) => ({\n      keys: action.keyBindings ?? [],\n      handler: () => void runner.trigger(action, props.context),\n    }))\n\n  if (bindings.length) onCleanup(registerKeyBindings(bindings))\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isInline && props.group.buttonGroup\"\n    role=\"group\"\n    :aria-label=\"props.group.label ?? props.group.tooltip\"\n    data-slot=\"button-group\"\n    class=\"inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px\"\n  >\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </div>\n  <template v-else-if=\"isInline\">\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </template>\n  <DropdownMenu v-else>\n    <Tooltip v-if=\"props.group.tooltip\">\n      <TooltipTrigger as-child>\n        <DropdownMenuTrigger as-child>\n          <Button\n            type=\"button\"\n            :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n            :size=\"buttonSize\"\n            :class=\"triggerClass\"\n            :aria-label=\"\n              isIconOnly\n                ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n                : undefined\n            \"\n          >\n            <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n            <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n          </Button>\n        </DropdownMenuTrigger>\n      </TooltipTrigger>\n      <TooltipContent>{{ props.group.tooltip }}</TooltipContent>\n    </Tooltip>\n    <DropdownMenuTrigger v-else as-child>\n      <Button\n        type=\"button\"\n        :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n        :size=\"buttonSize\"\n        :class=\"triggerClass\"\n        :aria-label=\"\n          isIconOnly\n            ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n            : undefined\n        \"\n      >\n        <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n        <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      :side=\"placement.side\"\n      :align=\"placement.align\"\n      :side-offset=\"props.group.dropdownOffset ?? undefined\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\"\n    >\n      <ActionGroupItems :actions=\"props.group.actions\" :context=\"props.context\" />\n      <template v-if=\"props.group.actions.length === 0\">\n        <DropdownMenuSeparator />\n        <DropdownMenuItem disabled>—</DropdownMenuItem>\n      </template>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ActionGroupMenu.js","names":["_sfc_main","ActionGroupMenu_vue_vue_type_script_setup_true_lang_default","ActionGroupMenu_default"],"sources":["../../../src/components/actions/ActionGroupMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionButtonSize,\n  ActionContext,\n  ActionGroupSchema,\n  ActionSchema,\n} from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  flattenActionGroup,\n  iconButtonSize,\n  parseDropdownPlacement,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { computed, useTemplateRef, watchEffect } from 'vue'\nimport { useActionRunner, useT } from '../../context'\nimport { colorClass, ghostButtonColorClasses, outlineButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\nimport ActionButton from './ActionButton.vue'\nimport ActionGroupItems from './ActionGroupItems.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: ActionGroupSchema\n    context: ActionContext\n    size?: ActionButtonSize\n    onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n  }>(),\n  { size: 'default' },\n)\n\n// With a tooltip, the menu's trigger sits inside the tooltip's popper, so reka-ui hands the\n// trigger to the tooltip as its anchor and the menu would open off screen (at its unpositioned\n// `translate(0, -200%)`): anchor the menu to the button explicitly.\nconst tooltipTrigger = useTemplateRef<{ $el?: Element }>('tooltipTrigger')\nconst tooltipTriggerElement = computed(() =>\n  props.group.tooltip && tooltipTrigger.value?.$el instanceof Element\n    ? tooltipTrigger.value.$el\n    : undefined,\n)\n\n/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */\nconst DROPDOWN_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-[calc(100vw-2rem)]',\n  screen: 'w-screen',\n}\n\n// `buttonGroup()` and `dropdown(false)`: the actions render inline instead of a dropdown.\nconst isInline = computed(() => Boolean(props.group.buttonGroup) || props.group.dropdown === false)\nconst inlineActions = computed(() =>\n  flattenActionGroup(props.group.actions).map((action) =>\n    props.group.buttonGroup && action.variant !== 'icon-button'\n      ? { ...action, variant: 'outline' as const }\n      : action,\n  ),\n)\nconst inlineSize = computed(() => resolveActionSize(props.group.size, props.size))\nconst contentClass = computed(() =>\n  cn(\n    props.group.dropdownWidth && DROPDOWN_WIDTHS[props.group.dropdownWidth],\n    props.group.maxHeight && 'overflow-y-auto',\n  ),\n)\nconst contentStyle = computed(() =>\n  props.group.maxHeight ? { maxHeight: props.group.maxHeight } : undefined,\n)\n\nconst t = useT()\nconst runner = useActionRunner()\nconst isIconOnly = computed(() => !props.group.label || props.group.variant === 'icon-button')\nconst buttonSize = computed(() => {\n  const size = resolveActionSize(props.group.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\nconst placement = computed(() => parseDropdownPlacement(props.group.dropdownPlacement))\nconst triggerClass = computed(() =>\n  cn(\n    props.group.color &&\n      colorClass(\n        props.group.variant === 'button' ? outlineButtonColorClasses : ghostButtonColorClasses,\n        props.group.color,\n      ),\n  ),\n)\n\n// Shortcuts of the actions inside the group work like those of standalone buttons (and,\n// like them, never for record rows).\nwatchEffect((onCleanup) => {\n  const bindings = flattenActionGroup(props.group.actions)\n    .filter((action) => bindsKeyBindings(action, props.context))\n    .map((action) => ({\n      keys: action.keyBindings ?? [],\n      handler: () => void runner.trigger(action, props.context),\n    }))\n\n  if (bindings.length) onCleanup(registerKeyBindings(bindings))\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isInline && props.group.buttonGroup\"\n    role=\"group\"\n    :aria-label=\"props.group.label ?? props.group.tooltip\"\n    data-slot=\"button-group\"\n    class=\"inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px\"\n  >\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </div>\n  <template v-else-if=\"isInline\">\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </template>\n  <DropdownMenu v-else>\n    <Tooltip v-if=\"props.group.tooltip\">\n      <TooltipTrigger as-child>\n        <DropdownMenuTrigger as-child>\n          <Button\n            ref=\"tooltipTrigger\"\n            type=\"button\"\n            :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n            :size=\"buttonSize\"\n            :class=\"triggerClass\"\n            :aria-label=\"\n              isIconOnly\n                ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n                : undefined\n            \"\n          >\n            <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n            <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n          </Button>\n        </DropdownMenuTrigger>\n      </TooltipTrigger>\n      <TooltipContent>{{ props.group.tooltip }}</TooltipContent>\n    </Tooltip>\n    <DropdownMenuTrigger v-else as-child>\n      <Button\n        type=\"button\"\n        :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n        :size=\"buttonSize\"\n        :class=\"triggerClass\"\n        :aria-label=\"\n          isIconOnly\n            ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n            : undefined\n        \"\n      >\n        <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n        <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      :reference=\"tooltipTriggerElement\"\n      :side=\"placement.side\"\n      :align=\"placement.align\"\n      :side-offset=\"props.group.dropdownOffset ?? undefined\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\"\n    >\n      <ActionGroupItems :actions=\"props.group.actions\" :context=\"props.context\" />\n      <template v-if=\"props.group.actions.length === 0\">\n        <DropdownMenuSeparator />\n        <DropdownMenuItem disabled>—</DropdownMenuItem>\n      </template>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionGroupMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionGroupMenu.vue"],"names":[],"mappings":"AA+MA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACb,MAAM,eAAe,CAAA;AA0BtB,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,iBAAiB,CAAA;IACxB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF,CAAC;;UAFO,gBAAgB;;AAkY3B,wBAOG"}
+{"version":3,"file":"ActionGroupMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/actions/ActionGroupMenu.vue"],"names":[],"mappings":"AA2NA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACb,MAAM,eAAe,CAAA;AA0BtB,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,iBAAiB,CAAA;IACxB,OAAO,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnF,CAAC;;UAFO,gBAAgB;;AAuZ3B,wBAOG"}

package/dist/components/actions/ActionGroupMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +1,22 @@
 import { useActionRunner as e, useT as t } from "../../context.js";
 import { cn as n } from "../../lib/utils.js";
-import { colorClass as r, ghostButtonColorClasses as i, outlineButtonColorClasses as a } from "../../lib/colors.js";
-import o from "../../lib/Icon.js";
-import s from "../ui/Button2.js";
-import c from "../ui/Tooltip.js";
-import l from "../ui/TooltipContent.js";
-import u from "../ui/TooltipTrigger.js";
-import d from "./ActionButton.js";
-import f from "../ui/DropdownMenu.js";
-import ee from "../ui/DropdownMenuContent.js";
-import p from "../ui/DropdownMenuItem.js";
-import m from "../ui/DropdownMenuSeparator.js";
-import h from "../ui/DropdownMenuTrigger.js";
-import g from "./ActionGroupItems.js";
-import { bindsKeyBindings as _, flattenActionGroup as v, iconButtonSize as y, parseDropdownPlacement as b, registerKeyBindings as x, resolveActionSize as S } from "@alfakit/core";
-import { Fragment as C, computed as w, createBlock as T, createCommentVNode as E, createElementBlock as D, createTextVNode as O, createVNode as k, defineComponent as A, normalizeClass as j, normalizeStyle as te, openBlock as M, renderList as N, toDisplayString as P, unref as F, watchEffect as I, withCtx as L } from "vue";
+import { colorClass as r, ghostButtonColorClasses as i, outlineButtonColorClasses as ee } from "../../lib/colors.js";
+import a from "../../lib/Icon.js";
+import o from "../ui/Button2.js";
+import s from "../ui/Tooltip.js";
+import c from "../ui/TooltipContent.js";
+import l from "../ui/TooltipTrigger.js";
+import u from "./ActionButton.js";
+import te from "../ui/DropdownMenu.js";
+import d from "../ui/DropdownMenuContent.js";
+import f from "../ui/DropdownMenuItem.js";
+import p from "../ui/DropdownMenuSeparator.js";
+import m from "../ui/DropdownMenuTrigger.js";
+import ne from "./ActionGroupItems.js";
+import { bindsKeyBindings as h, flattenActionGroup as g, iconButtonSize as _, parseDropdownPlacement as v, registerKeyBindings as y, resolveActionSize as b } from "@alfakit/core";
+import { Fragment as x, computed as S, createBlock as C, createCommentVNode as w, createElementBlock as T, createTextVNode as E, createVNode as D, defineComponent as O, normalizeClass as k, normalizeStyle as re, openBlock as A, renderList as j, toDisplayString as M, unref as N, useTemplateRef as P, watchEffect as F, withCtx as I } from "vue";
 //#region src/components/actions/ActionGroupMenu.vue?vue&type=script&setup=true&lang.ts
-var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
+var L = ["aria-label"], R = { key: 0 }, z = { key: 0 }, B = /*@__PURE__*/ O({
 	__name: "ActionGroupMenu",
 	props: {
 		group: {},
@@ -24,8 +24,8 @@ var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
 		size: { default: "default" },
 		onTrigger: {}
 	},
-	setup(A) {
-		let V = A, H = {
+	setup(O) {
+		let B = O, V = P("tooltipTrigger"), H = S(() => B.group.tooltip && V.value?.$el instanceof Element ? V.value.$el : void 0), U = {
 			"3xs": "w-3xs",
 			"2xs": "w-2xs",
 			xs: "w-xs",
@@ -52,59 +52,61 @@ var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
 			"screen-2xl": "w-(--breakpoint-2xl)",
 			full: "w-[calc(100vw-2rem)]",
 			screen: "w-screen"
-		}, U = w(() => !!V.group.buttonGroup || V.group.dropdown === !1), W = w(() => v(V.group.actions).map((e) => V.group.buttonGroup && e.variant !== "icon-button" ? {
+		}, W = S(() => !!B.group.buttonGroup || B.group.dropdown === !1), G = S(() => g(B.group.actions).map((e) => B.group.buttonGroup && e.variant !== "icon-button" ? {
 			...e,
 			variant: "outline"
-		} : e)), G = w(() => S(V.group.size, V.size)), K = w(() => n(V.group.dropdownWidth && H[V.group.dropdownWidth], V.group.maxHeight && "overflow-y-auto")), q = w(() => V.group.maxHeight ? { maxHeight: V.group.maxHeight } : void 0), J = t(), Y = e(), X = w(() => !V.group.label || V.group.variant === "icon-button"), Z = w(() => {
-			let e = S(V.group.size, V.size);
-			return X.value ? y(e) : e;
-		}), Q = w(() => b(V.group.dropdownPlacement)), $ = w(() => n(V.group.color && r(V.group.variant === "button" ? a : i, V.group.color)));
-		return I((e) => {
-			let t = v(V.group.actions).filter((e) => _(e, V.context)).map((e) => ({
+		} : e)), K = S(() => b(B.group.size, B.size)), q = S(() => n(B.group.dropdownWidth && U[B.group.dropdownWidth], B.group.maxHeight && "overflow-y-auto")), J = S(() => B.group.maxHeight ? { maxHeight: B.group.maxHeight } : void 0), Y = t(), ie = e(), X = S(() => !B.group.label || B.group.variant === "icon-button"), Z = S(() => {
+			let e = b(B.group.size, B.size);
+			return X.value ? _(e) : e;
+		}), Q = S(() => v(B.group.dropdownPlacement)), $ = S(() => n(B.group.color && r(B.group.variant === "button" ? ee : i, B.group.color)));
+		return F((e) => {
+			let t = g(B.group.actions).filter((e) => h(e, B.context)).map((e) => ({
 				keys: e.keyBindings ?? [],
-				handler: () => void Y.trigger(e, V.context)
+				handler: () => void ie.trigger(e, B.context)
 			}));
-			t.length && e(x(t));
-		}), (e, t) => U.value && V.group.buttonGroup ? (M(), D("div", {
+			t.length && e(y(t));
+		}), (e, t) => W.value && B.group.buttonGroup ? (A(), T("div", {
 			key: 0,
 			role: "group",
-			"aria-label": V.group.label ?? V.group.tooltip,
+			"aria-label": B.group.label ?? B.group.tooltip,
 			"data-slot": "button-group",
 			class: "inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px"
-		}, [(M(!0), D(C, null, N(W.value, (e) => (M(), T(d, {
+		}, [(A(!0), T(x, null, j(G.value, (e) => (A(), C(u, {
 			key: e.name,
 			action: e,
-			context: V.context,
-			size: G.value,
-			"on-trigger": V.onTrigger
+			context: B.context,
+			size: K.value,
+			"on-trigger": B.onTrigger
 		}, null, 8, [
 			"action",
 			"context",
 			"size",
 			"on-trigger"
-		]))), 128))], 8, R)) : U.value ? (M(!0), D(C, { key: 1 }, N(W.value, (e) => (M(), T(d, {
+		]))), 128))], 8, L)) : W.value ? (A(!0), T(x, { key: 1 }, j(G.value, (e) => (A(), C(u, {
 			key: e.name,
 			action: e,
-			context: V.context,
-			size: G.value,
-			"on-trigger": V.onTrigger
+			context: B.context,
+			size: K.value,
+			"on-trigger": B.onTrigger
 		}, null, 8, [
 			"action",
 			"context",
 			"size",
 			"on-trigger"
-		]))), 128)) : (M(), T(f, { key: 2 }, {
-			default: L(() => [V.group.tooltip ? (M(), T(c, { key: 0 }, {
-				default: L(() => [k(u, { "as-child": "" }, {
-					default: L(() => [k(h, { "as-child": "" }, {
-						default: L(() => [k(s, {
+		]))), 128)) : (A(), C(te, { key: 2 }, {
+			default: I(() => [B.group.tooltip ? (A(), C(s, { key: 0 }, {
+				default: I(() => [D(l, { "as-child": "" }, {
+					default: I(() => [D(m, { "as-child": "" }, {
+						default: I(() => [D(o, {
+							ref_key: "tooltipTrigger",
+							ref: V,
 							type: "button",
-							variant: V.group.variant === "button" ? "outline" : "ghost",
+							variant: B.group.variant === "button" ? "outline" : "ghost",
 							size: Z.value,
-							class: j($.value),
-							"aria-label": X.value ? V.group.label ?? V.group.tooltip ?? F(J)("actions", {}, "Actions") : void 0
+							class: k($.value),
+							"aria-label": X.value ? B.group.label ?? B.group.tooltip ?? N(Y)("actions", {}, "Actions") : void 0
 						}, {
-							default: L(() => [k(F(o), { name: V.group.icon ?? "ellipsis-vertical" }, null, 8, ["name"]), X.value ? E("", !0) : (M(), D("span", z, P(V.group.label), 1))]),
+							default: I(() => [D(N(a), { name: B.group.icon ?? "ellipsis-vertical" }, null, 8, ["name"]), X.value ? w("", !0) : (A(), T("span", R, M(B.group.label), 1))]),
 							_: 1
 						}, 8, [
 							"variant",
@@ -115,23 +117,23 @@ var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
 						_: 1
 					})]),
 					_: 1
-				}), k(l, null, {
-					default: L(() => [O(P(V.group.tooltip), 1)]),
+				}), D(c, null, {
+					default: I(() => [E(M(B.group.tooltip), 1)]),
 					_: 1
 				})]),
 				_: 1
-			})) : (M(), T(h, {
+			})) : (A(), C(m, {
 				key: 1,
 				"as-child": ""
 			}, {
-				default: L(() => [k(s, {
+				default: I(() => [D(o, {
 					type: "button",
-					variant: V.group.variant === "button" ? "outline" : "ghost",
+					variant: B.group.variant === "button" ? "outline" : "ghost",
 					size: Z.value,
-					class: j($.value),
-					"aria-label": X.value ? V.group.label ?? V.group.tooltip ?? F(J)("actions", {}, "Actions") : void 0
+					class: k($.value),
+					"aria-label": X.value ? B.group.label ?? B.group.tooltip ?? N(Y)("actions", {}, "Actions") : void 0
 				}, {
-					default: L(() => [k(F(o), { name: V.group.icon ?? "ellipsis-vertical" }, null, 8, ["name"]), X.value ? E("", !0) : (M(), D("span", B, P(V.group.label), 1))]),
+					default: I(() => [D(N(a), { name: B.group.icon ?? "ellipsis-vertical" }, null, 8, ["name"]), X.value ? w("", !0) : (A(), T("span", z, M(B.group.label), 1))]),
 					_: 1
 				}, 8, [
 					"variant",
@@ -140,22 +142,24 @@ var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
 					"aria-label"
 				])]),
 				_: 1
-			})), k(ee, {
+			})), D(d, {
+				reference: H.value,
 				side: Q.value.side,
 				align: Q.value.align,
-				"side-offset": V.group.dropdownOffset ?? void 0,
-				class: j(K.value),
-				style: te(q.value)
+				"side-offset": B.group.dropdownOffset ?? void 0,
+				class: k(q.value),
+				style: re(J.value)
 			}, {
-				default: L(() => [k(g, {
-					actions: V.group.actions,
-					context: V.context
-				}, null, 8, ["actions", "context"]), V.group.actions.length === 0 ? (M(), D(C, { key: 0 }, [k(m), k(p, { disabled: "" }, {
-					default: L(() => [...t[0] ||= [O("—", -1)]]),
+				default: I(() => [D(ne, {
+					actions: B.group.actions,
+					context: B.context
+				}, null, 8, ["actions", "context"]), B.group.actions.length === 0 ? (A(), T(x, { key: 0 }, [D(p), D(f, { disabled: "" }, {
+					default: I(() => [...t[0] ||= [E("—", -1)]]),
 					_: 1
-				})], 64)) : E("", !0)]),
+				})], 64)) : w("", !0)]),
 				_: 1
 			}, 8, [
+				"reference",
 				"side",
 				"align",
 				"side-offset",
@@ -167,6 +171,6 @@ var R = ["aria-label"], z = { key: 0 }, B = { key: 0 }, V = /*@__PURE__*/ A({
 	}
 });
 //#endregion
-export { V as default };
+export { B as default };
 
 //# sourceMappingURL=ActionGroupMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/actions/ActionGroupMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroupMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","ActionButton","DropdownMenu","_withCtx","Tooltip","_createVNode","TooltipTrigger","DropdownMenuTrigger","Button","_normalizeClass","_unref","Icon","_toDisplayString","_createCommentVNode","TooltipContent","_createTextVNode","DropdownMenuContent","_normalizeStyle","ActionGroupItems","DropdownMenuSeparator","DropdownMenuItem","Icon_default","Button_default","Tooltip_default","TooltipContent_default","TooltipTrigger_default","ActionButton_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","ActionGroupItems_default","_hoisted_1","_hoisted_2","_hoisted_3","ActionGroupMenu_vue_vue_type_script_setup_true_lang_default","props","__props","DROPDOWN_WIDTHS","isInline","computed","inlineActions","flattenActionGroup","action","inlineSize","resolveActionSize","contentClass","cn","contentStyle","t","useT","runner","useActionRunner","isIconOnly","buttonSize","size","iconButtonSize","placement","parseDropdownPlacement","triggerClass","colorClass","outlineButtonColorClasses","ghostButtonColorClasses","watchEffect","bindings","bindsKeyBindings","onCleanup","registerKeyBindings","openBlock","createElementBlock","Fragment","renderList","createBlock","withCtx","createVNode","normalizeClass","unref","createCommentVNode","toDisplayString","createTextVNode","normalizeStyle","_cache"],"sources":["../../../src/components/actions/ActionGroupMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionButtonSize,\n  ActionContext,\n  ActionGroupSchema,\n  ActionSchema,\n} from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  flattenActionGroup,\n  iconButtonSize,\n  parseDropdownPlacement,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { computed, watchEffect } from 'vue'\nimport { useActionRunner, useT } from '../../context'\nimport { colorClass, ghostButtonColorClasses, outlineButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\nimport ActionButton from './ActionButton.vue'\nimport ActionGroupItems from './ActionGroupItems.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: ActionGroupSchema\n    context: ActionContext\n    size?: ActionButtonSize\n    onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n  }>(),\n  { size: 'default' },\n)\n\n/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */\nconst DROPDOWN_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-[calc(100vw-2rem)]',\n  screen: 'w-screen',\n}\n\n// `buttonGroup()` and `dropdown(false)`: the actions render inline instead of a dropdown.\nconst isInline = computed(() => Boolean(props.group.buttonGroup) || props.group.dropdown === false)\nconst inlineActions = computed(() =>\n  flattenActionGroup(props.group.actions).map((action) =>\n    props.group.buttonGroup && action.variant !== 'icon-button'\n      ? { ...action, variant: 'outline' as const }\n      : action,\n  ),\n)\nconst inlineSize = computed(() => resolveActionSize(props.group.size, props.size))\nconst contentClass = computed(() =>\n  cn(\n    props.group.dropdownWidth && DROPDOWN_WIDTHS[props.group.dropdownWidth],\n    props.group.maxHeight && 'overflow-y-auto',\n  ),\n)\nconst contentStyle = computed(() =>\n  props.group.maxHeight ? { maxHeight: props.group.maxHeight } : undefined,\n)\n\nconst t = useT()\nconst runner = useActionRunner()\nconst isIconOnly = computed(() => !props.group.label || props.group.variant === 'icon-button')\nconst buttonSize = computed(() => {\n  const size = resolveActionSize(props.group.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\nconst placement = computed(() => parseDropdownPlacement(props.group.dropdownPlacement))\nconst triggerClass = computed(() =>\n  cn(\n    props.group.color &&\n      colorClass(\n        props.group.variant === 'button' ? outlineButtonColorClasses : ghostButtonColorClasses,\n        props.group.color,\n      ),\n  ),\n)\n\n// Shortcuts of the actions inside the group work like those of standalone buttons (and,\n// like them, never for record rows).\nwatchEffect((onCleanup) => {\n  const bindings = flattenActionGroup(props.group.actions)\n    .filter((action) => bindsKeyBindings(action, props.context))\n    .map((action) => ({\n      keys: action.keyBindings ?? [],\n      handler: () => void runner.trigger(action, props.context),\n    }))\n\n  if (bindings.length) onCleanup(registerKeyBindings(bindings))\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isInline && props.group.buttonGroup\"\n    role=\"group\"\n    :aria-label=\"props.group.label ?? props.group.tooltip\"\n    data-slot=\"button-group\"\n    class=\"inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px\"\n  >\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </div>\n  <template v-else-if=\"isInline\">\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </template>\n  <DropdownMenu v-else>\n    <Tooltip v-if=\"props.group.tooltip\">\n      <TooltipTrigger as-child>\n        <DropdownMenuTrigger as-child>\n          <Button\n            type=\"button\"\n            :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n            :size=\"buttonSize\"\n            :class=\"triggerClass\"\n            :aria-label=\"\n              isIconOnly\n                ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n                : undefined\n            \"\n          >\n            <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n            <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n          </Button>\n        </DropdownMenuTrigger>\n      </TooltipTrigger>\n      <TooltipContent>{{ props.group.tooltip }}</TooltipContent>\n    </Tooltip>\n    <DropdownMenuTrigger v-else as-child>\n      <Button\n        type=\"button\"\n        :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n        :size=\"buttonSize\"\n        :class=\"triggerClass\"\n        :aria-label=\"\n          isIconOnly\n            ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n            : undefined\n        \"\n      >\n        <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n        <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      :side=\"placement.side\"\n      :align=\"placement.align\"\n      :side-offset=\"props.group.dropdownOffset ?? undefined\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\"\n    >\n      <ActionGroupItems :actions=\"props.group.actions\" :context=\"props.context\" />\n      <template v-if=\"props.group.actions.length === 0\">\n        <DropdownMenuSeparator />\n        <DropdownMenuItem disabled>—</DropdownMenuItem>\n      </template>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ActionGroupMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","ActionButton","DropdownMenu","_withCtx","Tooltip","_createVNode","TooltipTrigger","DropdownMenuTrigger","Button","_normalizeClass","_unref","Icon","_toDisplayString","_createCommentVNode","TooltipContent","_createTextVNode","DropdownMenuContent","_normalizeStyle","ActionGroupItems","DropdownMenuSeparator","DropdownMenuItem","Icon_default","Button_default","Tooltip_default","TooltipContent_default","TooltipTrigger_default","ActionButton_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","ActionGroupItems_default","_hoisted_1","_hoisted_2","_hoisted_3","ActionGroupMenu_vue_vue_type_script_setup_true_lang_default","props","__props","tooltipTrigger","useTemplateRef","tooltipTriggerElement","computed","DROPDOWN_WIDTHS","isInline","inlineActions","flattenActionGroup","action","inlineSize","resolveActionSize","contentClass","cn","contentStyle","t","useT","runner","useActionRunner","isIconOnly","buttonSize","size","iconButtonSize","placement","parseDropdownPlacement","triggerClass","colorClass","outlineButtonColorClasses","ghostButtonColorClasses","watchEffect","bindings","bindsKeyBindings","onCleanup","registerKeyBindings","openBlock","createElementBlock","Fragment","renderList","createBlock","withCtx","createVNode","normalizeClass","unref","createCommentVNode","toDisplayString","createTextVNode","normalizeStyle","_cache"],"sources":["../../../src/components/actions/ActionGroupMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionButtonSize,\n  ActionContext,\n  ActionGroupSchema,\n  ActionSchema,\n} from '@alfakit/core'\nimport {\n  bindsKeyBindings,\n  flattenActionGroup,\n  iconButtonSize,\n  parseDropdownPlacement,\n  registerKeyBindings,\n  resolveActionSize,\n} from '@alfakit/core'\nimport { computed, useTemplateRef, watchEffect } from 'vue'\nimport { useActionRunner, useT } from '../../context'\nimport { colorClass, ghostButtonColorClasses, outlineButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport Tooltip from '../ui/Tooltip.vue'\nimport TooltipContent from '../ui/TooltipContent.vue'\nimport TooltipTrigger from '../ui/TooltipTrigger.vue'\nimport ActionButton from './ActionButton.vue'\nimport ActionGroupItems from './ActionGroupItems.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: ActionGroupSchema\n    context: ActionContext\n    size?: ActionButtonSize\n    onTrigger?: (action: ActionSchema, context: ActionContext) => void | Promise<void>\n  }>(),\n  { size: 'default' },\n)\n\n// With a tooltip, the menu's trigger sits inside the tooltip's popper, so reka-ui hands the\n// trigger to the tooltip as its anchor and the menu would open off screen (at its unpositioned\n// `translate(0, -200%)`): anchor the menu to the button explicitly.\nconst tooltipTrigger = useTemplateRef<{ $el?: Element }>('tooltipTrigger')\nconst tooltipTriggerElement = computed(() =>\n  props.group.tooltip && tooltipTrigger.value?.$el instanceof Element\n    ? tooltipTrigger.value.$el\n    : undefined,\n)\n\n/** `dropdownWidth()`: widths of the dropdown, spelled out for Tailwind. */\nconst DROPDOWN_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-[calc(100vw-2rem)]',\n  screen: 'w-screen',\n}\n\n// `buttonGroup()` and `dropdown(false)`: the actions render inline instead of a dropdown.\nconst isInline = computed(() => Boolean(props.group.buttonGroup) || props.group.dropdown === false)\nconst inlineActions = computed(() =>\n  flattenActionGroup(props.group.actions).map((action) =>\n    props.group.buttonGroup && action.variant !== 'icon-button'\n      ? { ...action, variant: 'outline' as const }\n      : action,\n  ),\n)\nconst inlineSize = computed(() => resolveActionSize(props.group.size, props.size))\nconst contentClass = computed(() =>\n  cn(\n    props.group.dropdownWidth && DROPDOWN_WIDTHS[props.group.dropdownWidth],\n    props.group.maxHeight && 'overflow-y-auto',\n  ),\n)\nconst contentStyle = computed(() =>\n  props.group.maxHeight ? { maxHeight: props.group.maxHeight } : undefined,\n)\n\nconst t = useT()\nconst runner = useActionRunner()\nconst isIconOnly = computed(() => !props.group.label || props.group.variant === 'icon-button')\nconst buttonSize = computed(() => {\n  const size = resolveActionSize(props.group.size, props.size)\n\n  return isIconOnly.value ? iconButtonSize(size) : size\n})\nconst placement = computed(() => parseDropdownPlacement(props.group.dropdownPlacement))\nconst triggerClass = computed(() =>\n  cn(\n    props.group.color &&\n      colorClass(\n        props.group.variant === 'button' ? outlineButtonColorClasses : ghostButtonColorClasses,\n        props.group.color,\n      ),\n  ),\n)\n\n// Shortcuts of the actions inside the group work like those of standalone buttons (and,\n// like them, never for record rows).\nwatchEffect((onCleanup) => {\n  const bindings = flattenActionGroup(props.group.actions)\n    .filter((action) => bindsKeyBindings(action, props.context))\n    .map((action) => ({\n      keys: action.keyBindings ?? [],\n      handler: () => void runner.trigger(action, props.context),\n    }))\n\n  if (bindings.length) onCleanup(registerKeyBindings(bindings))\n})\n</script>\n\n<template>\n  <div\n    v-if=\"isInline && props.group.buttonGroup\"\n    role=\"group\"\n    :aria-label=\"props.group.label ?? props.group.tooltip\"\n    data-slot=\"button-group\"\n    class=\"inline-flex items-stretch rounded-md shadow-xs [&>*]:rounded-none [&>*]:shadow-none [&>*:first-child]:rounded-s-md [&>*:focus-visible]:z-10 [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px\"\n  >\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </div>\n  <template v-else-if=\"isInline\">\n    <ActionButton\n      v-for=\"action in inlineActions\"\n      :key=\"action.name\"\n      :action=\"action\"\n      :context=\"props.context\"\n      :size=\"inlineSize\"\n      :on-trigger=\"props.onTrigger\"\n    />\n  </template>\n  <DropdownMenu v-else>\n    <Tooltip v-if=\"props.group.tooltip\">\n      <TooltipTrigger as-child>\n        <DropdownMenuTrigger as-child>\n          <Button\n            ref=\"tooltipTrigger\"\n            type=\"button\"\n            :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n            :size=\"buttonSize\"\n            :class=\"triggerClass\"\n            :aria-label=\"\n              isIconOnly\n                ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n                : undefined\n            \"\n          >\n            <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n            <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n          </Button>\n        </DropdownMenuTrigger>\n      </TooltipTrigger>\n      <TooltipContent>{{ props.group.tooltip }}</TooltipContent>\n    </Tooltip>\n    <DropdownMenuTrigger v-else as-child>\n      <Button\n        type=\"button\"\n        :variant=\"props.group.variant === 'button' ? 'outline' : 'ghost'\"\n        :size=\"buttonSize\"\n        :class=\"triggerClass\"\n        :aria-label=\"\n          isIconOnly\n            ? (props.group.label ?? props.group.tooltip ?? t('actions', {}, 'Actions'))\n            : undefined\n        \"\n      >\n        <Icon :name=\"props.group.icon ?? 'ellipsis-vertical'\" />\n        <span v-if=\"!isIconOnly\">{{ props.group.label }}</span>\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      :reference=\"tooltipTriggerElement\"\n      :side=\"placement.side\"\n      :align=\"placement.align\"\n      :side-offset=\"props.group.dropdownOffset ?? undefined\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\"\n    >\n      <ActionGroupItems :actions=\"props.group.actions\" :context=\"props.context\" />\n      <template v-if=\"props.group.actions.length === 0\">\n        <DropdownMenuSeparator />\n        <DropdownMenuItem disabled>—</DropdownMenuItem>\n      </template>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionModal.js","names":["_sfc_main","ActionModal_vue_vue_type_script_setup_true_lang_default","ActionModal_default"],"sources":["../../../src/components/actions/ActionModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { OpenModal } from '@alfakit/core'\nimport {\n  actionFormComponent,\n  actionFormParams,\n  confirmModalClose,\n  FormStore,\n  guardModalUnload,\n  isModalSubmitVisible,\n  modalFooterAlignment,\n  nestedActionContext,\n  PASSWORD_CONFIRMATION_INPUT,\n  scheduleAutofocus,\n  slideOverSide,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { computed, nextTick, onMounted, onScopeDispose, ref, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useDirection, usePanel, useT } from '../../context'\nimport {\n  colorClass,\n  iconBackgroundColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { provideForm } from '../form/form-context'\nimport Slot from '../panel/Slot.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetFooter from '../ui/SheetFooter.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport ActionList from './ActionList.vue'\nimport ActionModalPassword from './ActionModalPassword.vue'\nimport { showToast } from '../notifications/flash-toasts'\n\nconst WIDTHS: Record<string, string> = {\n  '3xs': 'sm:max-w-3xs',\n  '2xs': 'sm:max-w-2xs',\n  xs: 'sm:max-w-xs',\n  sm: 'sm:max-w-sm',\n  md: 'sm:max-w-md',\n  lg: 'sm:max-w-lg',\n  xl: 'sm:max-w-xl',\n  '2xl': 'sm:max-w-2xl',\n  '3xl': 'sm:max-w-3xl',\n  '4xl': 'sm:max-w-4xl',\n  '5xl': 'sm:max-w-5xl',\n  '6xl': 'sm:max-w-6xl',\n  '7xl': 'sm:max-w-7xl',\n  none: 'sm:max-w-none',\n  min: 'sm:max-w-min',\n  max: 'sm:max-w-max',\n  fit: 'sm:max-w-fit',\n  prose: 'sm:max-w-prose',\n  container: 'sm:container',\n  'screen-sm': 'sm:max-w-(--breakpoint-sm)',\n  'screen-md': 'sm:max-w-(--breakpoint-md)',\n  'screen-lg': 'sm:max-w-(--breakpoint-lg)',\n  'screen-xl': 'sm:max-w-(--breakpoint-xl)',\n  'screen-2xl': 'sm:max-w-(--breakpoint-2xl)',\n  full: 'sm:max-w-[calc(100%-2rem)]',\n  screen: 'sm:max-w-[calc(100%-2rem)] h-[calc(100%-2rem)]',\n}\n\nconst FOOTER_JUSTIFY: Record<string, string> = {\n  start: 'sm:justify-start',\n  center: 'sm:justify-center',\n  end: 'sm:justify-end',\n  between: 'sm:justify-between',\n}\n\nconst props = withDefaults(defineProps<{ modal: OpenModal; hidden?: boolean }>(), {\n  hidden: false,\n})\n\nconst runner = useActionRunner()\nconst panel = usePanel()\nconst direction = useDirection()\nconst t = useT()\n\nconst action = props.modal.action\nconst context = props.modal.context\nconst schema = computed(() => props.modal.modal)\n\nconst form = (() => {\n  if (!schema.value.form) {\n    return null\n  }\n\n  return new FormStore(schema.value.form, {\n    token: context.token,\n    component: actionFormComponent(action, context),\n    record: context.record ?? null,\n    refreshUrl: panel.value.endpoints.schemaRefresh,\n    optionsUrl: panel.value.endpoints.schemaOptions,\n    validateUrl: panel.value.endpoints.schemaValidate,\n    // A halted wizard step shows what its hook sent.\n    onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n    params: actionFormParams(context),\n  })\n})()\n\nif (form) {\n  provideForm(form)\n}\n\nconst formState = form ? useStore(form.store) : null\n\nwatch(\n  () => props.modal.errors,\n  (errors) => form?.setErrors(errors),\n  { immediate: true },\n)\n\nonScopeDispose(() => form?.destroy())\n\n// Nested actions read this form (`$mountedActions`, `getRawData()`) and write into it\n// (`fillData()`).\nif (form) {\n  onScopeDispose(runner.registerModalForm(action, context, form))\n}\n\n// `extraModalWindowAttributes()`: `class` joins the window's classes.\nconst windowClass = computed(() => schema.value.windowAttributes?.class as string | undefined)\nconst windowAttributes = computed(() => {\n  const { class: _class, ...rest } = schema.value.windowAttributes ?? {}\n\n  return rest\n})\n\n// `extraModalOverlayAttributes()`: the backdrop is the content's previous sibling.\nconst modalId = useId()\n\n// A marker inside the content finds the window and its backdrop (the dialog primitives\n// render through a portal and don't pass other attributes on).\nconst setAttributes = (element: Element, attributes: Record<string, unknown>) => {\n  for (const [name, value] of Object.entries(attributes)) {\n    if (value === null || value === undefined || value === false) continue\n\n    if (name === 'class') {\n      element.classList.add(...String(value).split(/\\s+/).filter(Boolean))\n    } else {\n      element.setAttribute(name, value === true ? '' : String(value))\n    }\n  }\n}\n\nconst applyOverlayAttributes = () => {\n  if (props.hidden || typeof document === 'undefined') return\n\n  const element = document\n    .querySelector(`[data-alfakit-modal=\"${modalId}\"]`)\n    ?.closest('[role=\"dialog\"]')\n  const overlay = element?.previousElementSibling\n\n  if (element) setAttributes(element, windowAttributes.value)\n\n  if (overlay?.getAttribute('data-slot')?.endsWith('-overlay') && schema.value.overlayAttributes) {\n    setAttributes(overlay, schema.value.overlayAttributes)\n  }\n}\n\nonMounted(() => void nextTick(applyOverlayAttributes))\nwatch(\n  () => props.hidden,\n  () => void nextTick(applyOverlayAttributes),\n  { flush: 'post' },\n)\n\nconst footerJustify = computed(() => FOOTER_JUSTIFY[modalFooterAlignment(schema.value)])\nconst footerActionsClass = computed(() =>\n  modalFooterAlignment(schema.value) === 'end' ? 'sm:me-auto' : undefined,\n)\nconst side = computed(() => slideOverSide(schema.value.slideOverPosition, direction.value))\n\n// A wizard form reports its step, so the submit button waits for the last one.\nconst progress = form ? useStore(wizardProgressStore(form)) : null\nconst submitVisible = computed(() => isModalSubmitVisible(schema.value, progress?.value))\n\nconst password = ref('')\nconst passwordError = computed(() => props.modal.errors[PASSWORD_CONFIRMATION_INPUT]?.[0])\nconst footerContext = nestedActionContext(context, action)\n\nconst run = (createAnother: boolean) => {\n  const values = form?.state.values ?? {}\n  const options = {\n    ...(schema.value.passwordConfirmation ? { password: password.value } : {}),\n    ...(createAnother ? { createAnother: true } : {}),\n  }\n\n  if (Object.keys(options).length > 0) {\n    runner.execute(action, context, values, options)\n  } else {\n    runner.execute(action, context, values)\n  }\n}\nconst submit = () => run(false)\n// \"Create & create another\": the runner reloads the modal, and its fresh form fills this one.\nconst submitAnother = () => run(true)\n\nwatch(\n  () => schema.value.form,\n  (payload, previous) => {\n    if (payload && payload !== previous) form?.fill(payload)\n  },\n)\n\n// \"Create & create another\": back to the `autofocus()` field of the fresh form.\nwatch(\n  () => props.modal.refocus,\n  (refocus, _previous, onCleanup) => {\n    const components = schema.value.form?.components\n\n    if (!refocus || !components) return\n\n    onCleanup(\n      scheduleAutofocus(() => document.getElementById(`action-form-${action.name}`), components),\n    )\n  },\n)\n\n// Dismissing the modal (not submitting it): `cancelParentActionsOnClose()` applies.\nconst close = () => runner.cancelModal(action.name)\nconst unsavedMessage = t('unsaved_changes_close', {}, 'You have unsaved changes. Close anyway?')\n// Cancel, Escape, clicking away and the close button ask first when the form changed.\nconst requestClose = () => {\n  if (confirmModalClose(schema.value, form, unsavedMessage)) close()\n}\nonScopeDispose(guardModalUnload(schema.value, form, unsavedMessage))\nconst cancelClass = computed(() =>\n  schema.value.cancelColor ? colorClass(outlineButtonColorClasses, schema.value.cancelColor) : '',\n)\n// `createAnotherAction()`: the \"Create & create another\" button's colour.\nconst createAnotherClass = computed(() =>\n  schema.value.createAnotherColor\n    ? colorClass(outlineButtonColorClasses, schema.value.createAnotherColor)\n    : '',\n)\n// Every dialog needs an accessible name: without a heading it stays visually hidden.\nconst title = computed(() => schema.value.heading ?? action.label ?? t('actions', {}, 'Actions'))\n\nconst onOpenChange = (open: boolean) => {\n  if (!open && !props.modal.processing) {\n    requestClose()\n  }\n}\n\nconst hasFooter = computed(() =>\n  Boolean(\n    schema.value.submitLabel || schema.value.cancelLabel || schema.value.extraFooterActions?.length,\n  ),\n)\nconst hasBody = computed(() =>\n  Boolean(\n    schema.value.content || form || schema.value.contentFooter || schema.value.passwordConfirmation,\n  ),\n)\n</script>\n\n<template>\n  <Sheet\n    v-if=\"schema.slideOver\"\n    :open=\"!props.hidden\"\n    :modal=\"!schema.clickThrough\"\n    @update:open=\"onOpenChange\"\n  >\n    <SheetContent\n      :side=\"side\"\n      :class=\"\n        cn('flex w-full flex-col gap-0 p-0', WIDTHS[schema.width] ?? 'sm:max-w-md', windowClass)\n      \"\n      :show-close-button=\"schema.closeButton\"\n      @interact-outside=\"(event) => !schema.closeByClickingAway && event.preventDefault()\"\n      @escape-key-down=\"(event) => !schema.closeByEscaping && event.preventDefault()\"\n    >\n      <span :data-alfakit-modal=\"modalId\" hidden />\n      <SheetHeader class=\"border-b\">\n        <div\n          :class=\"\n            cn('flex gap-4', schema.alignment === 'center' && 'flex-col items-center text-center')\n          \"\n        >\n          <div\n            v-if=\"schema.icon\"\n            :class=\"\n              cn(\n                'flex size-10 shrink-0 items-center justify-center rounded-full',\n                colorClass(iconBackgroundColorClasses, schema.iconColor, 'primary'),\n              )\n            \"\n          >\n            <Icon :name=\"schema.icon\" class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <SheetTitle :class=\"cn(!schema.heading && 'sr-only')\">{{ title }}</SheetTitle>\n            <SheetDescription v-if=\"schema.description\"\n              ><span v-html=\"schema.description\"\n            /></SheetDescription>\n            <SheetDescription v-else class=\"sr-only\">{{ title }}</SheetDescription>\n          </div>\n        </div>\n      </SheetHeader>\n      <div class=\"flex-1 overflow-y-auto p-4\">\n        <div class=\"flex flex-col gap-6\">\n          <SchemaRenderer v-if=\"schema.content\" :components=\"schema.content\" />\n          <Slot\n            v-if=\"form && formState\"\n            name=\"modal.schema.before\"\n            :data=\"{ action: action.name }\"\n          />\n          <form\n            v-if=\"form && formState\"\n            :id=\"`action-form-${action.name}`\"\n            @submit.prevent=\"submit\"\n          >\n            <SchemaRenderer :components=\"formState.components\" :columns=\"formState.columns\" />\n          </form>\n          <Slot\n            v-if=\"form && formState\"\n            name=\"modal.schema.after\"\n            :data=\"{ action: action.name }\"\n          />\n          <SchemaRenderer v-if=\"schema.contentFooter\" :components=\"schema.contentFooter\" />\n          <ActionModalPassword\n            v-if=\"schema.passwordConfirmation\"\n            v-model=\"password\"\n            :error=\"passwordError\"\n            @submit=\"submit\"\n          />\n        </div>\n      </div>\n      <SheetFooter\n        v-if=\"hasFooter\"\n        :class=\"cn('border-t', schema.stickyFooter && 'bg-background sticky bottom-0')\"\n      >\n        <div\n          :class=\"\n            cn('flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center', footerJustify)\n          \"\n        >\n          <ActionList\n            v-if=\"schema.extraFooterActions\"\n            :actions=\"schema.extraFooterActions\"\n            :context=\"footerContext\"\n            :class=\"footerActionsClass\"\n          />\n          <Button\n            v-if=\"schema.cancelLabel\"\n            type=\"button\"\n            variant=\"outline\"\n            :class=\"cancelClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"requestClose\"\n            >{{ schema.cancelLabel }}</Button\n          >\n          <Button\n            v-if=\"schema.createAnotherLabel && schema.submitLabel && submitVisible\"\n            type=\"button\"\n            variant=\"outline\"\n            data-slot=\"create-another\"\n            :class=\"createAnotherClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"submitAnother\"\n            ><Icon v-if=\"schema.createAnotherIcon\" :name=\"schema.createAnotherIcon\" />{{\n              schema.createAnotherLabel\n            }}</Button\n          >\n          <Button\n            v-if=\"schema.submitLabel && submitVisible\"\n            type=\"button\"\n            :class=\"colorClass(solidButtonColorClasses, schema.submitColor, 'primary')\"\n            :disabled=\"props.modal.processing\"\n            :autofocus=\"schema.autofocus && !form\"\n            @click=\"submit\"\n          >\n            <Spinner v-if=\"props.modal.processing\" />\n            <Icon v-else-if=\"schema.submitIcon\" :name=\"schema.submitIcon\" />\n            {{ schema.submitLabel }}\n          </Button>\n        </div>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n  <Dialog v-else :open=\"!props.hidden\" :modal=\"!schema.clickThrough\" @update:open=\"onOpenChange\">\n    <DialogContent\n      :class=\"\n        cn(\n          'max-h-[calc(100vh-2rem)] overflow-y-auto',\n          WIDTHS[schema.width] ?? 'sm:max-w-lg',\n          windowClass,\n        )\n      \"\n      :show-close-button=\"schema.closeButton\"\n      @interact-outside=\"(event) => !schema.closeByClickingAway && event.preventDefault()\"\n      @escape-key-down=\"(event) => !schema.closeByEscaping && event.preventDefault()\"\n    >\n      <span :data-alfakit-modal=\"modalId\" hidden />\n      <!-- A sticky header stays pinned to the top of the scrolling dialog, edge to edge. -->\n      <DialogHeader\n        :class=\"\n          cn(\n            schema.stickyHeader &&\n              'bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4',\n          )\n        \"\n      >\n        <div\n          :class=\"\n            cn('flex gap-4', schema.alignment === 'center' && 'flex-col items-center text-center')\n          \"\n        >\n          <div\n            v-if=\"schema.icon\"\n            :class=\"\n              cn(\n                'flex size-10 shrink-0 items-center justify-center rounded-full',\n                colorClass(iconBackgroundColorClasses, schema.iconColor, 'primary'),\n              )\n            \"\n          >\n            <Icon :name=\"schema.icon\" class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <DialogTitle :class=\"cn(!schema.heading && 'sr-only')\">{{ title }}</DialogTitle>\n            <DialogDescription v-if=\"schema.description\"\n              ><span v-html=\"schema.description\"\n            /></DialogDescription>\n            <DialogDescription v-else class=\"sr-only\">{{ title }}</DialogDescription>\n          </div>\n        </div>\n      </DialogHeader>\n      <div v-if=\"hasBody\" class=\"flex flex-col gap-6\">\n        <SchemaRenderer v-if=\"schema.content\" :components=\"schema.content\" />\n        <Slot v-if=\"form && formState\" name=\"modal.schema.before\" :data=\"{ action: action.name }\" />\n        <form v-if=\"form && formState\" :id=\"`action-form-${action.name}`\" @submit.prevent=\"submit\">\n          <SchemaRenderer :components=\"formState.components\" :columns=\"formState.columns\" />\n        </form>\n        <Slot v-if=\"form && formState\" name=\"modal.schema.after\" :data=\"{ action: action.name }\" />\n        <SchemaRenderer v-if=\"schema.contentFooter\" :components=\"schema.contentFooter\" />\n        <ActionModalPassword\n          v-if=\"schema.passwordConfirmation\"\n          v-model=\"password\"\n          :error=\"passwordError\"\n          @submit=\"submit\"\n        />\n      </div>\n      <!-- A sticky footer stays pinned to the bottom of the scrolling dialog, edge to edge. -->\n      <DialogFooter\n        v-if=\"hasFooter\"\n        :class=\"\n          cn(\n            schema.stickyFooter &&\n              'bg-background sticky bottom-0 -mx-6 -mb-6 rounded-b-lg border-t px-6 py-4',\n          )\n        \"\n      >\n        <div\n          :class=\"\n            cn('flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center', footerJustify)\n          \"\n        >\n          <ActionList\n            v-if=\"schema.extraFooterActions\"\n            :actions=\"schema.extraFooterActions\"\n            :context=\"footerContext\"\n            :class=\"footerActionsClass\"\n          />\n          <Button\n            v-if=\"schema.cancelLabel\"\n            type=\"button\"\n            variant=\"outline\"\n            :class=\"cancelClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"requestClose\"\n            >{{ schema.cancelLabel }}</Button\n          >\n          <Button\n            v-if=\"schema.createAnotherLabel && schema.submitLabel && submitVisible\"\n            type=\"button\"\n            variant=\"outline\"\n            data-slot=\"create-another\"\n            :class=\"createAnotherClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"submitAnother\"\n            ><Icon v-if=\"schema.createAnotherIcon\" :name=\"schema.createAnotherIcon\" />{{\n              schema.createAnotherLabel\n            }}</Button\n          >\n          <Button\n            v-if=\"schema.submitLabel && submitVisible\"\n            type=\"button\"\n            :class=\"colorClass(solidButtonColorClasses, schema.submitColor, 'primary')\"\n            :disabled=\"props.modal.processing\"\n            :autofocus=\"schema.autofocus && !form\"\n            @click=\"submit\"\n          >\n            <Spinner v-if=\"props.modal.processing\" />\n            <Icon v-else-if=\"schema.submitIcon\" :name=\"schema.submitIcon\" />\n            {{ schema.submitLabel }}\n          </Button>\n        </div>\n      </DialogFooter>\n      <span class=\"sr-only\">{{ t('close', {}, 'Close') }}</span>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ActionModal.js","names":["_sfc_main","ActionModal_vue_vue_type_script_setup_true_lang_default","ActionModal_default"],"sources":["../../../src/components/actions/ActionModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { OpenModal } from '@alfakit/core'\nimport {\n  actionFormComponent,\n  formIdPrefix,\n  actionFormParams,\n  confirmModalClose,\n  FormStore,\n  guardModalUnload,\n  isModalSubmitVisible,\n  modalFooterAlignment,\n  nestedActionContext,\n  PASSWORD_CONFIRMATION_INPUT,\n  scheduleAutofocus,\n  slideOverSide,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { computed, nextTick, onMounted, onScopeDispose, ref, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useDirection, usePanel, useT } from '../../context'\nimport {\n  colorClass,\n  iconBackgroundColorClasses,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { provideForm } from '../form/form-context'\nimport Slot from '../panel/Slot.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetFooter from '../ui/SheetFooter.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport ActionList from './ActionList.vue'\nimport ActionModalPassword from './ActionModalPassword.vue'\nimport { showToast } from '../notifications/flash-toasts'\n\nconst WIDTHS: Record<string, string> = {\n  '3xs': 'sm:max-w-3xs',\n  '2xs': 'sm:max-w-2xs',\n  xs: 'sm:max-w-xs',\n  sm: 'sm:max-w-sm',\n  md: 'sm:max-w-md',\n  lg: 'sm:max-w-lg',\n  xl: 'sm:max-w-xl',\n  '2xl': 'sm:max-w-2xl',\n  '3xl': 'sm:max-w-3xl',\n  '4xl': 'sm:max-w-4xl',\n  '5xl': 'sm:max-w-5xl',\n  '6xl': 'sm:max-w-6xl',\n  '7xl': 'sm:max-w-7xl',\n  none: 'sm:max-w-none',\n  min: 'sm:max-w-min',\n  max: 'sm:max-w-max',\n  fit: 'sm:max-w-fit',\n  prose: 'sm:max-w-prose',\n  container: 'sm:container',\n  'screen-sm': 'sm:max-w-(--breakpoint-sm)',\n  'screen-md': 'sm:max-w-(--breakpoint-md)',\n  'screen-lg': 'sm:max-w-(--breakpoint-lg)',\n  'screen-xl': 'sm:max-w-(--breakpoint-xl)',\n  'screen-2xl': 'sm:max-w-(--breakpoint-2xl)',\n  full: 'sm:max-w-[calc(100%-2rem)]',\n  screen: 'sm:max-w-[calc(100%-2rem)] h-[calc(100%-2rem)]',\n}\n\nconst FOOTER_JUSTIFY: Record<string, string> = {\n  start: 'sm:justify-start',\n  center: 'sm:justify-center',\n  end: 'sm:justify-end',\n  between: 'sm:justify-between',\n}\n\nconst props = withDefaults(defineProps<{ modal: OpenModal; hidden?: boolean }>(), {\n  hidden: false,\n})\n\nconst runner = useActionRunner()\nconst panel = usePanel()\nconst direction = useDirection()\nconst t = useT()\n\nconst action = props.modal.action\nconst context = props.modal.context\nconst schema = computed(() => props.modal.modal)\n\nconst form = (() => {\n  if (!schema.value.form) {\n    return null\n  }\n\n  return new FormStore(schema.value.form, {\n    token: context.token,\n    component: actionFormComponent(action, context),\n    // Own field ids: the modal opens over a form whose fields may share names.\n    idPrefix: formIdPrefix(actionFormComponent(action, context)),\n    record: context.record ?? null,\n    refreshUrl: panel.value.endpoints.schemaRefresh,\n    optionsUrl: panel.value.endpoints.schemaOptions,\n    validateUrl: panel.value.endpoints.schemaValidate,\n    // A halted wizard step shows what its hook sent.\n    onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n    params: actionFormParams(context),\n  })\n})()\n\nif (form) {\n  provideForm(form)\n}\n\nconst formState = form ? useStore(form.store) : null\n\nwatch(\n  () => props.modal.errors,\n  (errors) => form?.setErrors(errors),\n  { immediate: true },\n)\n\nonScopeDispose(() => form?.destroy())\n\n// Nested actions read this form (`$mountedActions`, `getRawData()`) and write into it\n// (`fillData()`).\nif (form) {\n  onScopeDispose(runner.registerModalForm(action, context, form))\n}\n\n// `extraModalWindowAttributes()`: `class` joins the window's classes.\nconst windowClass = computed(() => schema.value.windowAttributes?.class as string | undefined)\nconst windowAttributes = computed(() => {\n  const { class: _class, ...rest } = schema.value.windowAttributes ?? {}\n\n  return rest\n})\n\n// `extraModalOverlayAttributes()`: the backdrop is the content's previous sibling.\nconst modalId = useId()\n\n// A marker inside the content finds the window and its backdrop (the dialog primitives\n// render through a portal and don't pass other attributes on).\nconst setAttributes = (element: Element, attributes: Record<string, unknown>) => {\n  for (const [name, value] of Object.entries(attributes)) {\n    if (value === null || value === undefined || value === false) continue\n\n    if (name === 'class') {\n      element.classList.add(...String(value).split(/\\s+/).filter(Boolean))\n    } else {\n      element.setAttribute(name, value === true ? '' : String(value))\n    }\n  }\n}\n\nconst applyOverlayAttributes = () => {\n  if (props.hidden || typeof document === 'undefined') return\n\n  const element = document\n    .querySelector(`[data-alfakit-modal=\"${modalId}\"]`)\n    ?.closest('[role=\"dialog\"]')\n  const overlay = element?.previousElementSibling\n\n  if (element) setAttributes(element, windowAttributes.value)\n\n  if (overlay?.getAttribute('data-slot')?.endsWith('-overlay') && schema.value.overlayAttributes) {\n    setAttributes(overlay, schema.value.overlayAttributes)\n  }\n}\n\nonMounted(() => void nextTick(applyOverlayAttributes))\nwatch(\n  () => props.hidden,\n  () => void nextTick(applyOverlayAttributes),\n  { flush: 'post' },\n)\n\nconst footerJustify = computed(() => FOOTER_JUSTIFY[modalFooterAlignment(schema.value)])\nconst footerActionsClass = computed(() =>\n  modalFooterAlignment(schema.value) === 'end' ? 'sm:me-auto' : undefined,\n)\nconst side = computed(() => slideOverSide(schema.value.slideOverPosition, direction.value))\n\n// A wizard form reports its step, so the submit button waits for the last one.\nconst progress = form ? useStore(wizardProgressStore(form)) : null\nconst submitVisible = computed(() => isModalSubmitVisible(schema.value, progress?.value))\n\nconst password = ref('')\nconst passwordError = computed(() => props.modal.errors[PASSWORD_CONFIRMATION_INPUT]?.[0])\nconst footerContext = nestedActionContext(context, action)\n\nconst run = (createAnother: boolean) => {\n  // A click that blurred a live field started a refresh: send the state it returns.\n  if (form) {\n    form.whenSettled(() => execute(createAnother))\n  } else {\n    execute(createAnother)\n  }\n}\n\nconst execute = (createAnother: boolean) => {\n  const values = form?.state.values ?? {}\n  const options = {\n    ...(schema.value.passwordConfirmation ? { password: password.value } : {}),\n    ...(createAnother ? { createAnother: true } : {}),\n  }\n\n  if (Object.keys(options).length > 0) {\n    runner.execute(action, context, values, options)\n  } else {\n    runner.execute(action, context, values)\n  }\n}\nconst submit = () => run(false)\n// \"Create & create another\": the runner reloads the modal, and its fresh form fills this one.\nconst submitAnother = () => run(true)\n\nwatch(\n  () => schema.value.form,\n  (payload, previous) => {\n    if (payload && payload !== previous) form?.fill(payload)\n  },\n)\n\n// \"Create & create another\": back to the `autofocus()` field of the fresh form.\nwatch(\n  () => props.modal.refocus,\n  (refocus, _previous, onCleanup) => {\n    const components = schema.value.form?.components\n\n    if (!refocus || !components) return\n\n    onCleanup(\n      scheduleAutofocus(() => document.getElementById(`action-form-${action.name}`), components),\n    )\n  },\n)\n\n// Dismissing the modal (not submitting it): `cancelParentActionsOnClose()` applies.\nconst close = () => runner.cancelModal(action.name)\nconst unsavedMessage = t('unsaved_changes_close', {}, 'You have unsaved changes. Close anyway?')\n// Cancel, Escape, clicking away and the close button ask first when the form changed.\nconst requestClose = () => {\n  if (confirmModalClose(schema.value, form, unsavedMessage)) close()\n}\nonScopeDispose(guardModalUnload(schema.value, form, unsavedMessage))\nconst cancelClass = computed(() =>\n  schema.value.cancelColor ? colorClass(outlineButtonColorClasses, schema.value.cancelColor) : '',\n)\n// `createAnotherAction()`: the \"Create & create another\" button's colour.\nconst createAnotherClass = computed(() =>\n  schema.value.createAnotherColor\n    ? colorClass(outlineButtonColorClasses, schema.value.createAnotherColor)\n    : '',\n)\n// Every dialog needs an accessible name: without a heading it stays visually hidden.\nconst title = computed(() => schema.value.heading ?? action.label ?? t('actions', {}, 'Actions'))\n\nconst onOpenChange = (open: boolean) => {\n  if (!open && !props.modal.processing) {\n    requestClose()\n  }\n}\n\nconst hasFooter = computed(() =>\n  Boolean(\n    schema.value.submitLabel || schema.value.cancelLabel || schema.value.extraFooterActions?.length,\n  ),\n)\nconst hasBody = computed(() =>\n  Boolean(\n    schema.value.content || form || schema.value.contentFooter || schema.value.passwordConfirmation,\n  ),\n)\n</script>\n\n<template>\n  <Sheet\n    v-if=\"schema.slideOver\"\n    :open=\"!props.hidden\"\n    :modal=\"!schema.clickThrough\"\n    @update:open=\"onOpenChange\"\n  >\n    <SheetContent\n      :side=\"side\"\n      :class=\"\n        cn('flex w-full flex-col gap-0 p-0', WIDTHS[schema.width] ?? 'sm:max-w-md', windowClass)\n      \"\n      :show-close-button=\"schema.closeButton\"\n      @interact-outside=\"(event) => !schema.closeByClickingAway && event.preventDefault()\"\n      @escape-key-down=\"(event) => !schema.closeByEscaping && event.preventDefault()\"\n    >\n      <span :data-alfakit-modal=\"modalId\" hidden />\n      <SheetHeader class=\"border-b\">\n        <div\n          :class=\"\n            cn('flex gap-4', schema.alignment === 'center' && 'flex-col items-center text-center')\n          \"\n        >\n          <div\n            v-if=\"schema.icon\"\n            :class=\"\n              cn(\n                'flex size-10 shrink-0 items-center justify-center rounded-full',\n                colorClass(iconBackgroundColorClasses, schema.iconColor, 'primary'),\n              )\n            \"\n          >\n            <Icon :name=\"schema.icon\" class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <SheetTitle :class=\"cn(!schema.heading && 'sr-only')\">{{ title }}</SheetTitle>\n            <SheetDescription v-if=\"schema.description\"\n              ><span v-html=\"schema.description\"\n            /></SheetDescription>\n            <SheetDescription v-else class=\"sr-only\">{{ title }}</SheetDescription>\n          </div>\n        </div>\n      </SheetHeader>\n      <div class=\"flex-1 overflow-y-auto p-4\">\n        <div class=\"flex flex-col gap-6\">\n          <SchemaRenderer v-if=\"schema.content\" :components=\"schema.content\" />\n          <Slot\n            v-if=\"form && formState\"\n            name=\"modal.schema.before\"\n            :data=\"{ action: action.name }\"\n          />\n          <form\n            v-if=\"form && formState\"\n            :id=\"`action-form-${action.name}`\"\n            @submit.prevent=\"submit\"\n          >\n            <SchemaRenderer :components=\"formState.components\" :columns=\"formState.columns\" />\n          </form>\n          <Slot\n            v-if=\"form && formState\"\n            name=\"modal.schema.after\"\n            :data=\"{ action: action.name }\"\n          />\n          <SchemaRenderer v-if=\"schema.contentFooter\" :components=\"schema.contentFooter\" />\n          <ActionModalPassword\n            v-if=\"schema.passwordConfirmation\"\n            v-model=\"password\"\n            :error=\"passwordError\"\n            @submit=\"submit\"\n          />\n        </div>\n      </div>\n      <SheetFooter\n        v-if=\"hasFooter\"\n        :class=\"cn('border-t', schema.stickyFooter && 'bg-background sticky bottom-0')\"\n      >\n        <div\n          :class=\"\n            cn('flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center', footerJustify)\n          \"\n        >\n          <ActionList\n            v-if=\"schema.extraFooterActions\"\n            :actions=\"schema.extraFooterActions\"\n            :context=\"footerContext\"\n            :class=\"footerActionsClass\"\n          />\n          <Button\n            v-if=\"schema.cancelLabel\"\n            type=\"button\"\n            variant=\"outline\"\n            :class=\"cancelClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"requestClose\"\n            >{{ schema.cancelLabel }}</Button\n          >\n          <Button\n            v-if=\"schema.createAnotherLabel && schema.submitLabel && submitVisible\"\n            type=\"button\"\n            variant=\"outline\"\n            data-slot=\"create-another\"\n            :class=\"createAnotherClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"submitAnother\"\n            ><Icon v-if=\"schema.createAnotherIcon\" :name=\"schema.createAnotherIcon\" />{{\n              schema.createAnotherLabel\n            }}</Button\n          >\n          <Button\n            v-if=\"schema.submitLabel && submitVisible\"\n            type=\"button\"\n            :class=\"colorClass(solidButtonColorClasses, schema.submitColor, 'primary')\"\n            :disabled=\"props.modal.processing\"\n            :autofocus=\"schema.autofocus && !form\"\n            @click=\"submit\"\n          >\n            <Spinner v-if=\"props.modal.processing\" />\n            <Icon v-else-if=\"schema.submitIcon\" :name=\"schema.submitIcon\" />\n            {{ schema.submitLabel }}\n          </Button>\n        </div>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n  <Dialog v-else :open=\"!props.hidden\" :modal=\"!schema.clickThrough\" @update:open=\"onOpenChange\">\n    <DialogContent\n      :class=\"\n        cn(\n          'max-h-[calc(100vh-2rem)] overflow-y-auto',\n          WIDTHS[schema.width] ?? 'sm:max-w-lg',\n          windowClass,\n        )\n      \"\n      :show-close-button=\"schema.closeButton\"\n      @interact-outside=\"(event) => !schema.closeByClickingAway && event.preventDefault()\"\n      @escape-key-down=\"(event) => !schema.closeByEscaping && event.preventDefault()\"\n    >\n      <span :data-alfakit-modal=\"modalId\" hidden />\n      <!-- A sticky header stays pinned to the top of the scrolling dialog, edge to edge. -->\n      <DialogHeader\n        :class=\"\n          cn(\n            schema.stickyHeader &&\n              'bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4',\n          )\n        \"\n      >\n        <div\n          :class=\"\n            cn('flex gap-4', schema.alignment === 'center' && 'flex-col items-center text-center')\n          \"\n        >\n          <div\n            v-if=\"schema.icon\"\n            :class=\"\n              cn(\n                'flex size-10 shrink-0 items-center justify-center rounded-full',\n                colorClass(iconBackgroundColorClasses, schema.iconColor, 'primary'),\n              )\n            \"\n          >\n            <Icon :name=\"schema.icon\" class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <DialogTitle :class=\"cn(!schema.heading && 'sr-only')\">{{ title }}</DialogTitle>\n            <DialogDescription v-if=\"schema.description\"\n              ><span v-html=\"schema.description\"\n            /></DialogDescription>\n            <DialogDescription v-else class=\"sr-only\">{{ title }}</DialogDescription>\n          </div>\n        </div>\n      </DialogHeader>\n      <div v-if=\"hasBody\" class=\"flex flex-col gap-6\">\n        <SchemaRenderer v-if=\"schema.content\" :components=\"schema.content\" />\n        <Slot v-if=\"form && formState\" name=\"modal.schema.before\" :data=\"{ action: action.name }\" />\n        <form v-if=\"form && formState\" :id=\"`action-form-${action.name}`\" @submit.prevent=\"submit\">\n          <SchemaRenderer :components=\"formState.components\" :columns=\"formState.columns\" />\n        </form>\n        <Slot v-if=\"form && formState\" name=\"modal.schema.after\" :data=\"{ action: action.name }\" />\n        <SchemaRenderer v-if=\"schema.contentFooter\" :components=\"schema.contentFooter\" />\n        <ActionModalPassword\n          v-if=\"schema.passwordConfirmation\"\n          v-model=\"password\"\n          :error=\"passwordError\"\n          @submit=\"submit\"\n        />\n      </div>\n      <!-- A sticky footer stays pinned to the bottom of the scrolling dialog, edge to edge. -->\n      <DialogFooter\n        v-if=\"hasFooter\"\n        :class=\"\n          cn(\n            schema.stickyFooter &&\n              'bg-background sticky bottom-0 -mx-6 -mb-6 rounded-b-lg border-t px-6 py-4',\n          )\n        \"\n      >\n        <div\n          :class=\"\n            cn('flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center', footerJustify)\n          \"\n        >\n          <ActionList\n            v-if=\"schema.extraFooterActions\"\n            :actions=\"schema.extraFooterActions\"\n            :context=\"footerContext\"\n            :class=\"footerActionsClass\"\n          />\n          <Button\n            v-if=\"schema.cancelLabel\"\n            type=\"button\"\n            variant=\"outline\"\n            :class=\"cancelClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"requestClose\"\n            >{{ schema.cancelLabel }}</Button\n          >\n          <Button\n            v-if=\"schema.createAnotherLabel && schema.submitLabel && submitVisible\"\n            type=\"button\"\n            variant=\"outline\"\n            data-slot=\"create-another\"\n            :class=\"createAnotherClass\"\n            :disabled=\"props.modal.processing\"\n            @click=\"submitAnother\"\n            ><Icon v-if=\"schema.createAnotherIcon\" :name=\"schema.createAnotherIcon\" />{{\n              schema.createAnotherLabel\n            }}</Button\n          >\n          <Button\n            v-if=\"schema.submitLabel && submitVisible\"\n            type=\"button\"\n            :class=\"colorClass(solidButtonColorClasses, schema.submitColor, 'primary')\"\n            :disabled=\"props.modal.processing\"\n            :autofocus=\"schema.autofocus && !form\"\n            @click=\"submit\"\n          >\n            <Spinner v-if=\"props.modal.processing\" />\n            <Icon v-else-if=\"schema.submitIcon\" :name=\"schema.submitIcon\" />\n            {{ schema.submitLabel }}\n          </Button>\n        </div>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}