@leaflink/stash 51.4.0 → 51.5.1

package/dist/DescriptionListDetail.js

@@ -8,7 +8,7 @@ const p = ["data-variant"], h = /* @__PURE__ */ a({
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
     const { variant: e } = t;
     return (s, _) => (r(), o("dd", {
-      class: c(["stash-description-list-detail tw-flex-1 tw-text-ice-700", {
+      class: c(["stash-description-list-detail tw-flex-1 tw-text-ice-900", {
         "md:tw-text-right": i(e) === "space-between"
       }]),
       "data-test": "stash-description-list-detail",

package/dist/DescriptionListDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail tw-flex-1 tw-text-ice-700\"\n    :class=\"{\n      'md:tw-text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,MAAYH;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail tw-flex-1 tw-text-ice-900\"\n    :class=\"{\n      'md:tw-text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,MAAYH;;;;;;;;;;;;"}

package/dist/DescriptionListGroup.js

@@ -1,26 +1,26 @@
-import { defineComponent as n, inject as o, createElementBlock as r, openBlock as p, unref as t, normalizeClass as d, renderSlot as c } from "vue";
+import { defineComponent as n, inject as r, createElementBlock as o, openBlock as d, unref as t, normalizeClass as p, renderSlot as c } from "vue";
 import { D as l } from "./DescriptionList.keys-BHlHYV6b.js";
-const w = ["data-divide", "data-variant"], v = /* @__PURE__ */ n({
+const m = ["data-divide", "data-variant"], v = /* @__PURE__ */ n({
   __name: "DescriptionListGroup",
-  setup(m) {
-    const s = o(l.key);
-    if (!s)
+  setup(w) {
+    const i = r(l.key);
+    if (!i)
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
-    const { divide: i, variant: e } = s;
-    return (a, u) => (p(), r("div", {
-      class: d(["stash-description-list-group", {
-        "md:tw-flex md:tw-gap-x-6": t(e) === "columns" || t(e) === "space-between",
+    const { divide: s, variant: e } = i;
+    return (a, u) => (d(), o("div", {
+      class: p(["stash-description-list-group", {
+        "md:tw-flex md:tw-items-start md:tw-gap-x-6": t(e) === "columns" || t(e) === "space-between",
         "tw-justify-between": t(e) === "space-between",
-        "md:tw-flex": t(e) === "inline",
-        "tw-py-1.5 first:tw-pt-0 last:tw-pb-0": !t(i),
-        "tw-py-3 first:tw-pt-0 last:tw-pb-0": t(i)
+        "md:tw-flex md:tw-items-start": t(e) === "inline",
+        "tw-py-1.5 first:tw-pt-0 last:tw-pb-0": !t(s),
+        "tw-py-3 first:tw-pt-0 last:tw-pb-0": t(s)
       }]),
       "data-test": "stash-description-list-group",
-      "data-divide": t(i),
+      "data-divide": t(s),
       "data-variant": t(e)
     }, [
       c(a.$slots, "default")
-    ], 10, w));
+    ], 10, m));
   }
 });
 export {

package/dist/DescriptionListGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:tw-flex md:tw-gap-x-6': variant === 'columns' || variant === 'space-between',\n      'tw-justify-between': variant === 'space-between',\n      'md:tw-flex': variant === 'inline',\n      'tw-py-1.5 first:tw-pt-0 last:tw-pb-0': !divide,\n      'tw-py-3 first:tw-pt-0 last:tw-pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant"],"mappings":";;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:tw-flex md:tw-items-start md:tw-gap-x-6': variant === 'columns' || variant === 'space-between',\n      'tw-justify-between': variant === 'space-between',\n      'md:tw-flex md:tw-items-start': variant === 'inline',\n      'tw-py-1.5 first:tw-pt-0 last:tw-pb-0': !divide,\n      'tw-py-3 first:tw-pt-0 last:tw-pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant"],"mappings":";;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;;;;;;;;;;;;;;;;;"}

package/dist/DescriptionListTerm.js

@@ -1,17 +1,14 @@
-import { defineComponent as o, inject as r, createElementBlock as i, openBlock as n, unref as e, normalizeClass as c, renderSlot as d, createCommentVNode as m } from "vue";
-import { D as l } from "./DescriptionList.keys-BHlHYV6b.js";
-const p = ["data-variant"], w = {
-  key: 0,
-  class: "tw-hidden md:tw-inline"
-}, k = /* @__PURE__ */ o({
+import { defineComponent as a, inject as o, createElementBlock as r, openBlock as c, unref as e, normalizeClass as p, renderSlot as n } from "vue";
+import { D as d } from "./DescriptionList.keys-BHlHYV6b.js";
+const m = ["data-variant"], _ = /* @__PURE__ */ a({
   __name: "DescriptionListTerm",
-  setup(_) {
-    const s = r(l.key);
-    if (!s)
+  setup(l) {
+    const i = o(d.key);
+    if (!i)
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
-    const { variant: t } = s;
-    return (a, u) => (n(), i("dt", {
-      class: c(["stash-description-list-term tw-font-medium tw-text-ice-900", {
+    const { variant: t } = i;
+    return (s, w) => (c(), r("dt", {
+      class: p(["stash-description-list-term tw-flex tw-items-center tw-gap-x-1 tw-font-bold tw-text-ice-900", {
         "md:tw-max-w-40 md:tw-basis-2/5": e(t) === "columns",
         "tw-mr-1.5": e(t) === "inline",
         "tw-pb-1.5": e(t) === "stacked",
@@ -20,12 +17,13 @@ const p = ["data-variant"], w = {
       "data-test": "stash-description-list-term",
       "data-variant": e(t)
     }, [
-      d(a.$slots, "default"),
-      e(t) === "inline" ? (n(), i("span", w, ":")) : m("", !0)
-    ], 10, p));
+      n(s.$slots, "prepend"),
+      n(s.$slots, "default"),
+      n(s.$slots, "append")
+    ], 10, m));
   }
 });
 export {
-  k as default
+  _ as default
 };
 //# sourceMappingURL=DescriptionListTerm.js.map

package/dist/DescriptionListTerm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term tw-font-medium tw-text-ice-900\"\n    :class=\"{\n      'md:tw-max-w-40 md:tw-basis-2/5': variant === 'columns',\n      'tw-mr-1.5': variant === 'inline',\n      'tw-pb-1.5': variant === 'stacked',\n      'tw-pb-1.5 md:tw-pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot><span v-if=\"variant === 'inline'\" class=\"tw-hidden md:tw-inline\">:</span>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,MAAYH;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term tw-flex tw-items-center tw-gap-x-1 tw-font-bold tw-text-ice-900\"\n    :class=\"{\n      'md:tw-max-w-40 md:tw-basis-2/5': variant === 'columns',\n      'tw-mr-1.5': variant === 'inline',\n      'tw-pb-1.5': variant === 'stacked',\n      'tw-pb-1.5 md:tw-pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Prepend slot, for rendering a prepended element -->\n    <slot name=\"prepend\"></slot>\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot>\n    <!-- @slot Append slot, for rendering an appended element -->\n    <slot name=\"append\"></slot>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,MAAYH;;;;;;;;;;;;;;;;;"}

package/dist/DescriptionListTerm.vue.d.ts

@@ -10,7 +10,9 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    prepend?(_: {}): any;
     default?(_: {}): any;
+    append?(_: {}): any;
 }>;
 export default _default;
 

package/dist/Dialog.js

@@ -82,7 +82,7 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
               "data-test": "stash-dialog|body-content"
             }, [
               a("div", {
-                class: o(["tw-flex tw-items-center", x.value && "tw-mb-1.5"])
+                class: o(["tw-flex tw-items-start", x.value && "tw-mb-1.5"])
               }, [
                 t.status ? (l(), f(Q, {
                   key: 0,

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"tw-flex tw-items-center\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"tw-text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'tw-w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  .dialog {\n    background: rgb(0 0 0 / 30%);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    place-content: center;\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: theme('zIndex.dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @apply tw-shadow-3xl;\n\n    background: var(--color-white);\n    color: var(--color-ice-700);\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    max-height: 100vh;\n    max-width: 360px;\n    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n\n    @media screen('md') {\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: theme('spacing.6') var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n    padding: theme('spacing.6') var(--grid-gutter);\n\n    @media screen('md') {\n      border-bottom-left-radius: theme('borderRadius.DEFAULT');\n      border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, theme('spacing.3'), 0);\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAkBRC,IAAQC,GAKRC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GACvBC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,EAAI,GAKXE,IAAsBC,EAAS,MAAMhB,EAAM,gBAAgBA,EAAM,QAAQiB,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBF,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWJ,EAAM,WAAW,GAEpEmB,IAAaH;AAAA,MAAqB,MACtChB,EAAM,SAASoB,EAAYC,EAAWrB,EAAM,MAAM,CAAC,IAAIoB,EAAY;AAAA,IACrE,GACME,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAC/E,GACMC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IACvE,GAEMC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAAA;AAGhB,mBAAe0B,EAAcC,GAAc;AACzC,UAAI,CAAAjB,EAAa,OAIjB;AAAA,QAAAA,EAAa,QAAQ;AAEjB,YAAA;AACI,gBAAAZ,EAAM,UAAU6B,CAAK;AAAA,QAAA,UAC3B;AACA,UAAAjB,EAAa,QAAQ;AAAA,QAAA;AAAA;AAAA,IACvB;AAGF,WAAAkB,EAAY,MAAM;AACZ,MAAA9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM,MAAM;AAAA,MAAA,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"tw-flex tw-items-start\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"tw-text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'tw-w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  .dialog {\n    background: rgb(0 0 0 / 30%);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    place-content: center;\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: theme('zIndex.dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @apply tw-shadow-3xl;\n\n    background: var(--color-white);\n    color: var(--color-ice-700);\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    max-height: 100vh;\n    max-width: 360px;\n    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n\n    @media screen('md') {\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: theme('spacing.6') var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n    padding: theme('spacing.6') var(--grid-gutter);\n\n    @media screen('md') {\n      border-bottom-left-radius: theme('borderRadius.DEFAULT');\n      border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, theme('spacing.3'), 0);\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAkBRC,IAAQC,GAKRC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GACvBC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,EAAI,GAKXE,IAAsBC,EAAS,MAAMhB,EAAM,gBAAgBA,EAAM,QAAQiB,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBF,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWJ,EAAM,WAAW,GAEpEmB,IAAaH;AAAA,MAAqB,MACtChB,EAAM,SAASoB,EAAYC,EAAWrB,EAAM,MAAM,CAAC,IAAIoB,EAAY;AAAA,IACrE,GACME,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAC/E,GACMC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IACvE,GAEMC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAAA;AAGhB,mBAAe0B,EAAcC,GAAc;AACzC,UAAI,CAAAjB,EAAa,OAIjB;AAAA,QAAAA,EAAa,QAAQ;AAEjB,YAAA;AACI,gBAAAZ,EAAM,UAAU6B,CAAK;AAAA,QAAA,UAC3B;AACA,UAAAjB,EAAa,QAAQ;AAAA,QAAA;AAAA;AAAA,IACvB;AAGF,WAAAkB,EAAY,MAAM;AACZ,MAAA9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM,MAAM;AAAA,MAAA,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}