@leaflink/stash 45.1.2 → 45.1.3
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 +23 -23
- package/dist/Dialog.js.map +1 -1
- package/package.json +1 -1
package/dist/Dialog.js
CHANGED
|
@@ -30,42 +30,42 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
|
|
|
30
30
|
},
|
|
31
31
|
emits: ["update:open", "cancel"],
|
|
32
32
|
setup(M, { emit: y }) {
|
|
33
|
-
const t = M,
|
|
33
|
+
const t = M, b = Z(), i = z(), n = A(), g = G("dialog-header-"), d = C(!1), k = C(), E = l(() => t.confirmText || (t.alert ? c("ll.okay") : c("ll.confirm"))), h = l(() => !!b.default || t.description), N = l(
|
|
34
34
|
() => t.status ? B[S(t.status)] : B.Info
|
|
35
|
-
),
|
|
35
|
+
), v = l(
|
|
36
36
|
() => t.status ? I[S(t.status)] : I.Info
|
|
37
37
|
), V = l(() => t.dangerZone || t.status === J.Error);
|
|
38
|
-
function
|
|
38
|
+
function w() {
|
|
39
39
|
y("update:open", !1), y("cancel");
|
|
40
40
|
}
|
|
41
41
|
async function $(u) {
|
|
42
|
-
|
|
43
|
-
const x =
|
|
44
|
-
await x(u),
|
|
42
|
+
d.value = !0;
|
|
43
|
+
const x = i.onConfirm;
|
|
44
|
+
await x(u), d.value = !1;
|
|
45
45
|
}
|
|
46
46
|
return H(() => {
|
|
47
47
|
t.open && L(function() {
|
|
48
|
-
|
|
48
|
+
k.value.focus();
|
|
49
49
|
});
|
|
50
50
|
}), (u, x) => (s(), f(q, { name: "fade" }, {
|
|
51
51
|
default: m(() => [
|
|
52
52
|
t.open ? (s(), p("dialog", P({
|
|
53
53
|
key: 0,
|
|
54
54
|
ref_key: "root",
|
|
55
|
-
ref:
|
|
55
|
+
ref: k,
|
|
56
56
|
open: t.open,
|
|
57
57
|
tabindex: "0",
|
|
58
|
-
"aria-labelledby": e(
|
|
58
|
+
"aria-labelledby": e(g),
|
|
59
59
|
"aria-modal": "true",
|
|
60
60
|
class: e(n).dialog,
|
|
61
|
-
"data-test": e(
|
|
62
|
-
}, e(
|
|
63
|
-
onKeydown: Y(
|
|
61
|
+
"data-test": e(i)["data-test"] || "ll-dialog"
|
|
62
|
+
}, e(i), {
|
|
63
|
+
onKeydown: Y(w, ["esc"])
|
|
64
64
|
}), [
|
|
65
65
|
a("div", {
|
|
66
66
|
class: o([
|
|
67
67
|
e(n).body,
|
|
68
|
-
`tw-border-${
|
|
68
|
+
`tw-border-${v.value}`,
|
|
69
69
|
{
|
|
70
70
|
"tw-border-t-6": t.status
|
|
71
71
|
}
|
|
@@ -75,28 +75,28 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
|
|
|
75
75
|
class: o(e(n).content)
|
|
76
76
|
}, [
|
|
77
77
|
a("div", {
|
|
78
|
-
class: o(["tw-flex tw-items-center",
|
|
78
|
+
class: o(["tw-flex tw-items-center", h.value && "tw-mb-1.5"])
|
|
79
79
|
}, [
|
|
80
80
|
t.status ? (s(), f(O, {
|
|
81
81
|
key: 0,
|
|
82
82
|
"data-test": "dialog-status-icon",
|
|
83
83
|
name: N.value,
|
|
84
|
-
class: o(`tw-text-${
|
|
84
|
+
class: o(`tw-text-${v.value}`)
|
|
85
85
|
}, null, 8, ["name", "class"])) : r("", !0),
|
|
86
86
|
a("h3", {
|
|
87
|
-
id: e(
|
|
87
|
+
id: e(g),
|
|
88
88
|
class: o({ "tw-ml-1.5 tw-mt-px": t.status })
|
|
89
89
|
}, _(t.header), 11, U)
|
|
90
90
|
], 2),
|
|
91
|
-
|
|
92
|
-
e(
|
|
91
|
+
h.value ? (s(), p("p", W, [
|
|
92
|
+
e(b).default ? j(u.$slots, "default", { key: 0 }) : (s(), p("span", {
|
|
93
93
|
key: 1,
|
|
94
94
|
innerHTML: t.description
|
|
95
95
|
}, null, 8, X))
|
|
96
96
|
])) : r("", !0)
|
|
97
97
|
], 2),
|
|
98
98
|
a("footer", {
|
|
99
|
-
class: o(
|
|
99
|
+
class: o(e(n).footer)
|
|
100
100
|
}, [
|
|
101
101
|
a("div", tt, [
|
|
102
102
|
a("div", {
|
|
@@ -106,7 +106,7 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
|
|
|
106
106
|
key: 0,
|
|
107
107
|
"data-test": "button|cancel",
|
|
108
108
|
secondary: "",
|
|
109
|
-
onClick:
|
|
109
|
+
onClick: w
|
|
110
110
|
}, {
|
|
111
111
|
default: m(() => [
|
|
112
112
|
T(_(t.cancelText), 1)
|
|
@@ -115,7 +115,7 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
|
|
|
115
115
|
})),
|
|
116
116
|
F(D, {
|
|
117
117
|
"data-test": "button|confirm",
|
|
118
|
-
disabled: t.disabled ||
|
|
118
|
+
disabled: t.disabled || d.value,
|
|
119
119
|
color: V.value ? "red" : "blue",
|
|
120
120
|
class: o({
|
|
121
121
|
"tw-w-full": t.alert
|
|
@@ -144,8 +144,8 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
|
|
|
144
144
|
footer: nt
|
|
145
145
|
}, ct = {
|
|
146
146
|
$style: rt
|
|
147
|
-
},
|
|
147
|
+
}, vt = /* @__PURE__ */ Q(et, [["__cssModules", ct]]);
|
|
148
148
|
export {
|
|
149
|
-
|
|
149
|
+
vt as default
|
|
150
150
|
};
|
|
151
151
|
//# sourceMappingURL=Dialog.js.map
|
package/dist/Dialog.js.map
CHANGED
|
@@ -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 =\n 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 /**\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 or not\n * the alert prop is true.\n */\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 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=\"classes.dialog\"\n :data-test=\"attrs['data-test'] || 'll-dialog'\"\n v-bind=\"attrs\"\n @keydown.esc=\"cancel\"\n >\n <div\n :class=\"[\n classes.body,\n `tw-border-${statusColor}`,\n {\n 'tw-border-t-6': props.status,\n },\n ]\"\n >\n <div :class=\"classes.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 :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=\"classes.footer\"
|
|
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 =\n 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 /**\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 or not\n * the alert prop is true.\n */\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 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=\"classes.dialog\"\n :data-test=\"attrs['data-test'] || 'll-dialog'\"\n v-bind=\"attrs\"\n @keydown.esc=\"cancel\"\n >\n <div\n :class=\"[\n classes.body,\n `tw-border-${statusColor}`,\n {\n 'tw-border-t-6': props.status,\n },\n ]\"\n >\n <div :class=\"classes.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 :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=\"classes.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;\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":["slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","props","t","hasDescription","statusIcon","StatusIcons","capitalize","statusColor","StatusColors","computedDangerZone","StatusSeverities","cancel","emits","handleConfirm","event","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4FQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAQPE,IAAsBC,EAAS,MAAMC,EAAM,gBAAgBA,EAAM,QAAQC,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBH,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWa,EAAM,WAAW,GAEpEG,IAAaJ;AAAA,MAAqB,MACtCC,EAAM,SAASI,EAAYC,EAAWL,EAAM,MAAM,CAAC,IAAII,EAAY;AAAA,IAAA,GAE/DE,IAAcP;AAAA,MAAsB,MACxCC,EAAM,SAASO,EAAaF,EAAWL,EAAM,MAAM,CAAC,IAAIO,EAAa;AAAA,IAAA,GAGjEC,IAAqBT,EAAS,MAAMC,EAAM,cAAcA,EAAM,WAAWS,EAAiB,KAAK;AAErG,aAASC,IAAS;AAChB,MAAAC,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAeC,EAAcC,GAAc;AACzC,MAAAlB,EAAa,QAAQ;AAIrB,YAAMmB,IAAYzB,EAAM;AAIxB,YAAMyB,EAAUD,CAAK,GACrBlB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAoB,EAAY,MAAM;AAChB,MAAIf,EAAM,QAERgB,EAAS,WAAY;AACnB,QAAAnB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|