@leaflink/stash 48.21.0 → 48.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Dialog.js CHANGED
@@ -1,19 +1,19 @@
1
- import { defineComponent as H, useSlots as K, useAttrs as L, useCssModule as q, ref as S, computed as s, watchEffect as P, nextTick as Y, openBlock as l, createBlock as f, Transition as j, withCtx as m, createElementBlock as p, mergeProps as F, unref as e, withKeys as G, createElementVNode as a, normalizeClass as o, createCommentVNode as r, toDisplayString as _, renderSlot as J, createTextVNode as B, createVNode as O } from "vue";
1
+ import { defineComponent as A, useSlots as H, useAttrs as K, useCssModule as L, ref as T, computed as s, watchEffect as q, nextTick as F, openBlock as l, createBlock as f, Transition as P, withCtx as m, createElementBlock as p, mergeProps as Y, unref as e, withKeys as j, createElementVNode as a, normalizeClass as o, createCommentVNode as i, toDisplayString as _, renderSlot as G, createTextVNode as S, createVNode as J } from "vue";
2
2
  import y from "lodash-es/capitalize";
3
- import Q from "lodash-es/uniqueId";
4
- import { S as I, b as g, a as z } from "./statusLevels-a8b041f4.js";
3
+ import O from "lodash-es/uniqueId";
4
+ import { S as B, b as g, a as I } from "./statusLevels-a8b041f4.js";
5
5
  import { t as c } from "./locale.js";
6
- import D from "./Button.js";
7
- import R from "./Icon.js";
8
- import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
6
+ import z from "./Button.js";
7
+ import Q from "./Icon.js";
8
+ import { _ as R } from "./_plugin-vue_export-helper-dad06003.js";
9
9
  import "lodash-es/get";
10
10
  import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
11
11
  import "./index-9e1095ef.js";
12
12
  import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
13
- const W = ["open", "aria-labelledby", "data-test"], X = ["id"], tt = {
13
+ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
14
14
  key: 0,
15
15
  class: "tw-mb-0"
16
- }, et = ["innerHTML"], ot = { class: "tw-text-right" }, at = /* @__PURE__ */ H({
16
+ }, tt = ["innerHTML"], et = { class: "tw-text-right" }, ot = /* @__PURE__ */ A({
17
17
  name: "ll-dialog",
18
18
  inheritAttrs: !1,
19
19
  __name: "Dialog",
@@ -25,44 +25,51 @@ const W = ["open", "aria-labelledby", "data-test"], X = ["id"], tt = {
25
25
  description: { default: "" },
26
26
  cancelText: { default: c("ll.cancel") },
27
27
  confirmText: { default: "" },
28
+ onConfirm: { type: Function, default: () => {
29
+ } },
28
30
  alert: { type: Boolean, default: !1 },
29
31
  status: { default: void 0 }
30
32
  },
31
33
  emits: ["update:open", "cancel"],
32
- setup(M, { emit: E }) {
33
- const t = M, b = E, h = K(), d = L(), n = q(), v = Q("dialog-header-"), i = S(!1), w = S(), N = s(() => t.confirmText || (t.alert ? c("ll.okay") : c("ll.confirm"))), x = s(() => !!h.default || t.description), V = s(
34
- () => t.status ? I[y(t.status)] : I.Info
35
- ), $ = s(
34
+ setup(D, { emit: M }) {
35
+ const t = D, b = M, h = H(), v = K(), n = L(), w = O("dialog-header-"), r = T(!1), d = T(), E = s(() => t.confirmText || (t.alert ? c("ll.okay") : c("ll.confirm"))), x = s(() => !!h.default || t.description), N = s(
36
+ () => t.status ? B[y(t.status)] : B.Info
37
+ ), V = s(
36
38
  () => t.status ? g[y(t.status)] : g.Info
37
39
  ), k = s(
38
- () => t.status ? z[y(t.status)] : z.Info
39
- ), Z = s(() => t.dangerZone || t.status === g.Error);
40
+ () => t.status ? I[y(t.status)] : I.Info
41
+ ), $ = s(() => t.dangerZone || t.status === g.Error);
40
42
  function C() {
41
43
  b("update:open", !1), b("cancel");
42
44
  }
43
- async function A(u) {
44
- i.value = !0;
45
- const T = d.onConfirm;
46
- await T(u), i.value = !1;
45
+ async function Z(u) {
46
+ if (!r.value) {
47
+ r.value = !0;
48
+ try {
49
+ await t.onConfirm(u);
50
+ } finally {
51
+ r.value = !1;
52
+ }
53
+ }
47
54
  }
48
- return P(() => {
49
- t.open && Y(function() {
50
- w.value.focus();
55
+ return q(() => {
56
+ t.open && d.value && F(function() {
57
+ d.value.focus();
51
58
  });
52
- }), (u, T) => (l(), f(j, { name: "fade" }, {
59
+ }), (u, dt) => (l(), f(P, { name: "fade" }, {
53
60
  default: m(() => [
54
- t.open ? (l(), p("dialog", F({
61
+ t.open ? (l(), p("dialog", Y({
55
62
  key: 0,
56
63
  ref_key: "root",
57
- ref: w,
64
+ ref: d,
58
65
  open: t.open,
59
66
  tabindex: "0",
60
- "aria-labelledby": e(v),
67
+ "aria-labelledby": e(w),
61
68
  "aria-modal": "true",
62
69
  class: ["stash-dialog", e(n).dialog],
63
- "data-test": e(d)["data-test"] || "ll-dialog"
64
- }, e(d), {
65
- onKeydown: G(C, ["esc"])
70
+ "data-test": e(v)["data-test"] || "ll-dialog"
71
+ }, e(v), {
72
+ onKeydown: j(C, ["esc"])
66
73
  }), [
67
74
  a("div", {
68
75
  class: o(["stash-dialog__body", [
@@ -81,76 +88,77 @@ const W = ["open", "aria-labelledby", "data-test"], X = ["id"], tt = {
81
88
  a("div", {
82
89
  class: o(["tw-flex tw-items-center", x.value && "tw-mb-1.5"])
83
90
  }, [
84
- t.status ? (l(), f(R, {
91
+ t.status ? (l(), f(Q, {
85
92
  key: 0,
86
93
  "data-test": "dialog-status-icon",
87
- name: V.value,
88
- title: $.value,
94
+ name: N.value,
95
+ title: V.value,
89
96
  class: o(`tw-text-${k.value}`)
90
- }, null, 8, ["name", "title", "class"])) : r("", !0),
97
+ }, null, 8, ["name", "title", "class"])) : i("", !0),
91
98
  a("h3", {
92
- id: e(v),
99
+ id: e(w),
93
100
  class: o({ "tw-ml-1.5 tw-mt-px": t.status })
94
- }, _(t.header), 11, X)
101
+ }, _(t.header), 11, W)
95
102
  ], 2),
96
- x.value ? (l(), p("p", tt, [
97
- e(h).default ? J(u.$slots, "default", { key: 0 }) : (l(), p("span", {
103
+ x.value ? (l(), p("p", X, [
104
+ e(h).default ? G(u.$slots, "default", { key: 0 }) : (l(), p("span", {
98
105
  key: 1,
99
106
  innerHTML: t.description
100
- }, null, 8, et))
101
- ])) : r("", !0)
107
+ }, null, 8, tt))
108
+ ])) : i("", !0)
102
109
  ], 2),
103
110
  a("footer", {
104
111
  class: o(["stash-dialog__footer", e(n).footer]),
105
112
  "data-test": "stash-dialog|footer"
106
113
  }, [
107
- a("div", ot, [
114
+ a("div", et, [
108
115
  a("div", {
109
116
  class: o({ "button-grid": !t.alert })
110
117
  }, [
111
- t.alert ? r("", !0) : (l(), f(D, {
118
+ t.alert ? i("", !0) : (l(), f(z, {
112
119
  key: 0,
113
120
  "data-test": "button|cancel",
114
121
  secondary: "",
115
122
  onClick: C
116
123
  }, {
117
124
  default: m(() => [
118
- B(_(t.cancelText), 1)
125
+ S(_(t.cancelText), 1)
119
126
  ]),
120
127
  _: 1
121
128
  })),
122
- O(D, {
129
+ J(z, {
123
130
  "data-test": "button|confirm",
124
- disabled: t.disabled || i.value,
125
- color: Z.value ? "red" : "blue",
131
+ disabled: t.disabled,
132
+ "is-loading": r.value,
133
+ color: $.value ? "red" : "blue",
126
134
  class: o({
127
135
  "tw-w-full": t.alert
128
136
  }),
129
- onClick: A
137
+ onClick: Z
130
138
  }, {
131
139
  default: m(() => [
132
- B(_(N.value), 1)
140
+ S(_(E.value), 1)
133
141
  ]),
134
142
  _: 1
135
- }, 8, ["disabled", "color", "class"])
143
+ }, 8, ["disabled", "is-loading", "color", "class"])
136
144
  ], 2)
137
145
  ])
138
146
  ], 2)
139
147
  ], 2)
140
- ], 16, W)) : r("", !0)
148
+ ], 16, U)) : i("", !0)
141
149
  ]),
142
150
  _: 3
143
151
  }));
144
152
  }
145
- }), st = "_dialog_1fzac_2", lt = "_body_1fzac_19", nt = "_grey_1fzac_32", rt = "_content_1fzac_42", ct = "_footer_1fzac_47", dt = {
146
- dialog: st,
147
- body: lt,
148
- grey: nt,
149
- content: rt,
150
- footer: ct
151
- }, it = {
152
- $style: dt
153
- }, kt = /* @__PURE__ */ U(at, [["__cssModules", it]]);
153
+ }), at = "_dialog_1fzac_2", st = "_body_1fzac_19", lt = "_grey_1fzac_32", nt = "_content_1fzac_42", rt = "_footer_1fzac_47", it = {
154
+ dialog: at,
155
+ body: st,
156
+ grey: lt,
157
+ content: nt,
158
+ footer: rt
159
+ }, ct = {
160
+ $style: it
161
+ }, kt = /* @__PURE__ */ R(ot, [["__cssModules", ct]]);
154
162
  export {
155
163
  kt as default
156
164
  };
@@ -1 +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 * 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 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 isConfirming.value = true;\n\n // useAttrs returns a Record<string, unknown> type, which causes\n // TS errors when trying to call a passed listener\n const onConfirm = attrs.onConfirm as (event: Event) => void;\n\n // Call the parent confirm listener and await it. Using Async/Await lets\n // us await even non-promises. Pass the event so modifiers can work.\n await onConfirm(event);\n isConfirming.value = false;\n }\n\n watchEffect(() => {\n if (props.open) {\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 || 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","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEE,UAAMA,IAAQC,GAiBRC,IAAQC,GAKRC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAKPE,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,IAAA,GAE/DE,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAAA,GAEzEC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IAAA,GAGjEC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAe0B,EAAcC,GAAc;AACzC,MAAAjB,EAAa,QAAQ;AAIrB,YAAMkB,IAAYxB,EAAM;AAIxB,YAAMwB,EAAUD,CAAK,GACrBjB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAmB,EAAY,MAAM;AAChB,MAAI/B,EAAM,QAERgC,EAAS,WAAY;AACnB,QAAAlB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAKPE,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,IAAA,GAE/DE,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAAA,GAEzEC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IAAA,GAGjEC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,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,QACvB;AAAA;AAAA,IACF;AAEA,WAAAkB,EAAY,MAAM;AACZ,MAAA9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -40,6 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
40
40
  description: string;
41
41
  cancelText: any;
42
42
  confirmText: string;
43
+ onConfirm: () => undefined;
43
44
  alert: boolean;
44
45
  status: undefined;
45
46
  }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -53,6 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
53
54
  description: string;
54
55
  cancelText: any;
55
56
  confirmText: string;
57
+ onConfirm: () => undefined;
56
58
  alert: boolean;
57
59
  status: undefined;
58
60
  }>>> & Readonly<{
@@ -66,6 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
66
68
  dangerZone: boolean;
67
69
  cancelText: string;
68
70
  confirmText: string;
71
+ onConfirm: (event: Event) => void | Promise<void>;
69
72
  alert: boolean;
70
73
  status: "error" | "warning" | "info" | "success";
71
74
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
@@ -103,6 +106,10 @@ export declare interface DialogProps {
103
106
  * Confirm button text.
104
107
  */
105
108
  confirmText?: string;
109
+ /**
110
+ * Callback function when the confirm button is clicked.
111
+ */
112
+ onConfirm?: (event: Event) => Promise<void> | void;
106
113
  /**
107
114
  * Treats it like an Alert Dialog, with only the confirmation button showing.
108
115
  *
@@ -44,6 +44,10 @@ declare interface DialogProps {
44
44
  * Confirm button text.
45
45
  */
46
46
  confirmText?: string;
47
+ /**
48
+ * Callback function when the confirm button is clicked.
49
+ */
50
+ onConfirm?: (event: Event) => Promise<void> | void;
47
51
  /**
48
52
  * Treats it like an Alert Dialog, with only the confirmation button showing.
49
53
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leaflink/stash",
3
- "version": "48.21.0",
3
+ "version": "48.21.1",
4
4
  "description": "LeafLink's design system.",
5
5
  "homepage": "https://stash.leaflink.com",
6
6
  "main": "./dist/index.ts",