@leaflink/stash 48.20.1 → 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/Accordion.js +43 -37
- package/dist/Accordion.js.map +1 -1
- package/dist/Accordion.vue.d.ts +5 -1
- package/dist/Dialog.js +65 -57
- package/dist/Dialog.js.map +1 -1
- package/dist/Dialog.vue.d.ts +7 -0
- package/dist/useDialog.d.ts +4 -0
- package/package.json +1 -1
package/dist/Accordion.js
CHANGED
|
@@ -1,68 +1,74 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
import
|
|
4
|
-
import { _ as
|
|
1
|
+
import { defineComponent as h, useSlots as _, useCssModule as g, ref as x, openBlock as n, createElementBlock as a, createElementVNode as o, normalizeClass as p, unref as i, withKeys as w, withModifiers as y, renderSlot as m, Fragment as b, createVNode as r, toDisplayString as $, withDirectives as k, vShow as C, withCtx as E } from "vue";
|
|
2
|
+
import { _ as M } from "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
|
|
3
|
+
import v from "./Icon.js";
|
|
4
|
+
import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
|
|
5
5
|
import "lodash-es/uniqueId";
|
|
6
6
|
import "./index-9e1095ef.js";
|
|
7
7
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
8
|
-
const
|
|
8
|
+
const z = {
|
|
9
9
|
class: "stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white",
|
|
10
10
|
"data-test": "stash-accordion"
|
|
11
|
-
},
|
|
11
|
+
}, A = { key: 0 }, B = { class: "tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900" }, D = { class: "tw-mx-[18px] tw-h-px tw-bg-ice-200" }, K = {
|
|
12
12
|
class: "stash-accordion__content tw-p-[18px]",
|
|
13
13
|
"data-test": "stash-accordion|content"
|
|
14
|
-
},
|
|
14
|
+
}, N = /* @__PURE__ */ h({
|
|
15
15
|
__name: "Accordion",
|
|
16
16
|
props: {
|
|
17
17
|
icon: { default: "circle-info" },
|
|
18
|
-
title: {}
|
|
18
|
+
title: { default: void 0 }
|
|
19
19
|
},
|
|
20
|
-
setup(
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
setup(f) {
|
|
21
|
+
const s = f, l = _(), c = g(), t = x(!1);
|
|
22
|
+
if (!s.title && !l.header)
|
|
23
|
+
throw new Error("Either a title prop or header slot must be provided");
|
|
24
|
+
return (d, e) => (n(), a("div", z, [
|
|
25
|
+
o("div", {
|
|
24
26
|
tabindex: "0",
|
|
25
27
|
"data-test": "stash-accordion|toggle",
|
|
26
|
-
class:
|
|
27
|
-
onClick: e[0] || (e[0] = (
|
|
28
|
+
class: p(["stash-accordion__toggle tw-flex tw-items-center", [i(c).toggle, t.value && i(c)["toggle--open"]]]),
|
|
29
|
+
onClick: e[0] || (e[0] = (u) => t.value = !t.value),
|
|
28
30
|
onKeypress: [
|
|
29
|
-
e[1] || (e[1] =
|
|
30
|
-
e[2] || (e[2] =
|
|
31
|
+
e[1] || (e[1] = w((u) => t.value = !t.value, ["enter"])),
|
|
32
|
+
e[2] || (e[2] = w(y((u) => t.value = !t.value, ["prevent"]), ["space"]))
|
|
31
33
|
]
|
|
32
34
|
}, [
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
i(l).header ? (n(), a("div", A, [
|
|
36
|
+
m(d.$slots, "header")
|
|
37
|
+
])) : (n(), a(b, { key: 1 }, [
|
|
38
|
+
r(v, {
|
|
39
|
+
class: "tw-text-blue-500",
|
|
40
|
+
size: "dense",
|
|
41
|
+
name: s.icon,
|
|
42
|
+
"data-test": "stash-accordion|toggle-icon"
|
|
43
|
+
}, null, 8, ["name"]),
|
|
44
|
+
o("div", B, $(s.title), 1)
|
|
45
|
+
], 64)),
|
|
46
|
+
r(v, {
|
|
47
|
+
class: p(["tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300", { "tw-rotate-180": t.value }]),
|
|
42
48
|
size: "dense",
|
|
43
49
|
name: "chevron-down",
|
|
44
50
|
"data-test": "stash-accordion|toggle-chevron"
|
|
45
51
|
}, null, 8, ["class"])
|
|
46
52
|
], 34),
|
|
47
|
-
|
|
48
|
-
[
|
|
53
|
+
k(o("hr", D, null, 512), [
|
|
54
|
+
[C, t.value]
|
|
49
55
|
]),
|
|
50
|
-
|
|
51
|
-
default:
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
r(M, { "is-expanded": t.value }, {
|
|
57
|
+
default: E(() => [
|
|
58
|
+
o("div", K, [
|
|
59
|
+
m(d.$slots, "default")
|
|
54
60
|
])
|
|
55
61
|
]),
|
|
56
62
|
_: 3
|
|
57
63
|
}, 8, ["is-expanded"])
|
|
58
64
|
]));
|
|
59
65
|
}
|
|
60
|
-
}),
|
|
61
|
-
toggle:
|
|
62
|
-
},
|
|
63
|
-
$style:
|
|
64
|
-
},
|
|
66
|
+
}), V = "_toggle_1lu5k_2", j = {
|
|
67
|
+
toggle: V
|
|
68
|
+
}, F = {
|
|
69
|
+
$style: j
|
|
70
|
+
}, P = /* @__PURE__ */ S(N, [["__cssModules", F]]);
|
|
65
71
|
export {
|
|
66
|
-
|
|
72
|
+
P as default
|
|
67
73
|
};
|
|
68
74
|
//# sourceMappingURL=Accordion.js.map
|
package/dist/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useCssModule } from 'vue';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AccordionProps {\n /**\n * The filename of the icon that will be displayed on the left side of the header\n */\n icon?: IconName;\n\n /**\n * Title of the Accordion, displayed in the header\n */\n title
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useCssModule, useSlots } from 'vue';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AccordionProps {\n /**\n * The filename of the icon that will be displayed on the left side of the header\n */\n icon?: IconName;\n\n /**\n * Title of the Accordion, displayed in the header\n */\n title?: string;\n }\n\n const props = withDefaults(defineProps<AccordionProps>(), {\n icon: 'circle-info',\n title: undefined,\n });\n const slots = useSlots();\n\n const classes = useCssModule();\n const isExpanded = ref(false);\n\n if (!props.title && !slots.header) {\n throw new Error('Either a title prop or header slot must be provided');\n }\n</script>\n\n<template>\n <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n <div\n tabindex=\"0\"\n data-test=\"stash-accordion|toggle\"\n class=\"stash-accordion__toggle tw-flex tw-items-center\"\n :class=\"[classes.toggle, isExpanded && classes['toggle--open']]\"\n @click=\"isExpanded = !isExpanded\"\n @keypress.enter=\"isExpanded = !isExpanded\"\n @keypress.space.prevent=\"isExpanded = !isExpanded\"\n >\n <div v-if=\"slots.header\">\n <!-- @slot Accordion header -->\n <slot name=\"header\"> </slot>\n </div>\n <template v-else>\n <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n {{ props.title }}\n </div>\n </template>\n\n <Icon\n class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n size=\"dense\"\n name=\"chevron-down\"\n data-test=\"stash-accordion|toggle-chevron\"\n :class=\"{ 'tw-rotate-180': isExpanded }\"\n />\n </div>\n <hr v-show=\"isExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n <Expand :is-expanded=\"isExpanded\">\n <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n <!-- @slot Accordion content -->\n <slot></slot>\n </div>\n </Expand>\n </div>\n</template>\n\n<style module>\n .toggle {\n @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n display: flex;\n cursor: pointer;\n gap: theme('gap[1.5]');\n padding: 17px;\n outline: none;\n border-radius: theme('borderRadius.DEFAULT');\n\n &:focus-visible {\n @apply tw-ring-4;\n border-color: var(--color-ice-900);\n padding: 15px;\n border-width: 2px;\n }\n\n &--open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-ice-100);\n }\n }\n\n &:active {\n background-color: var(--color-ice-200);\n }\n\n &:active + hr,\n &:hover + hr {\n opacity: 0;\n }\n }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","isExpanded","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAQC,GAIRC,IAAQC,KAERC,IAAUC,KACVC,IAAaC,EAAI,EAAK;AAE5B,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACnB,YAAA,IAAI,MAAM,qDAAqD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Accordion.vue.d.ts
CHANGED
|
@@ -40,16 +40,20 @@ export declare interface AccordionProps {
|
|
|
40
40
|
/**
|
|
41
41
|
* Title of the Accordion, displayed in the header
|
|
42
42
|
*/
|
|
43
|
-
title
|
|
43
|
+
title?: string;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
|
|
47
47
|
icon: string;
|
|
48
|
+
title: undefined;
|
|
48
49
|
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
|
|
49
50
|
icon: string;
|
|
51
|
+
title: undefined;
|
|
50
52
|
}>>> & Readonly<{}>, {
|
|
53
|
+
title: string;
|
|
51
54
|
icon: "close" | "copy" | "submit" | "sort" | "search" | "split" | "link" | "tag" | "menu" | "image" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "combine" | "compass" | "contact" | "contract" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "keyboard-return" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "storefront" | "swap-horizontal" | "swap-vertical" | "tag-star" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
|
|
52
55
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
56
|
+
header?(_: {}): any;
|
|
53
57
|
default?(_: {}): any;
|
|
54
58
|
}>;
|
|
55
59
|
export default _default;
|
package/dist/Dialog.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { defineComponent as
|
|
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
|
|
4
|
-
import { S as
|
|
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
|
|
7
|
-
import
|
|
8
|
-
import { _ as
|
|
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
|
|
13
|
+
const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "tw-mb-0"
|
|
16
|
-
},
|
|
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(
|
|
33
|
-
const t =
|
|
34
|
-
() => t.status ?
|
|
35
|
-
),
|
|
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 ?
|
|
39
|
-
),
|
|
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
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
|
49
|
-
t.open &&
|
|
50
|
-
|
|
55
|
+
return q(() => {
|
|
56
|
+
t.open && d.value && F(function() {
|
|
57
|
+
d.value.focus();
|
|
51
58
|
});
|
|
52
|
-
}), (u,
|
|
59
|
+
}), (u, dt) => (l(), f(P, { name: "fade" }, {
|
|
53
60
|
default: m(() => [
|
|
54
|
-
t.open ? (l(), p("dialog",
|
|
61
|
+
t.open ? (l(), p("dialog", Y({
|
|
55
62
|
key: 0,
|
|
56
63
|
ref_key: "root",
|
|
57
|
-
ref:
|
|
64
|
+
ref: d,
|
|
58
65
|
open: t.open,
|
|
59
66
|
tabindex: "0",
|
|
60
|
-
"aria-labelledby": e(
|
|
67
|
+
"aria-labelledby": e(w),
|
|
61
68
|
"aria-modal": "true",
|
|
62
69
|
class: ["stash-dialog", e(n).dialog],
|
|
63
|
-
"data-test": e(
|
|
64
|
-
}, e(
|
|
65
|
-
onKeydown:
|
|
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(
|
|
91
|
+
t.status ? (l(), f(Q, {
|
|
85
92
|
key: 0,
|
|
86
93
|
"data-test": "dialog-status-icon",
|
|
87
|
-
name:
|
|
88
|
-
title:
|
|
94
|
+
name: N.value,
|
|
95
|
+
title: V.value,
|
|
89
96
|
class: o(`tw-text-${k.value}`)
|
|
90
|
-
}, null, 8, ["name", "title", "class"])) :
|
|
97
|
+
}, null, 8, ["name", "title", "class"])) : i("", !0),
|
|
91
98
|
a("h3", {
|
|
92
|
-
id: e(
|
|
99
|
+
id: e(w),
|
|
93
100
|
class: o({ "tw-ml-1.5 tw-mt-px": t.status })
|
|
94
|
-
}, _(t.header), 11,
|
|
101
|
+
}, _(t.header), 11, W)
|
|
95
102
|
], 2),
|
|
96
|
-
x.value ? (l(), p("p",
|
|
97
|
-
e(h).default ?
|
|
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,
|
|
101
|
-
])) :
|
|
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",
|
|
114
|
+
a("div", et, [
|
|
108
115
|
a("div", {
|
|
109
116
|
class: o({ "button-grid": !t.alert })
|
|
110
117
|
}, [
|
|
111
|
-
t.alert ?
|
|
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
|
-
|
|
125
|
+
S(_(t.cancelText), 1)
|
|
119
126
|
]),
|
|
120
127
|
_: 1
|
|
121
128
|
})),
|
|
122
|
-
|
|
129
|
+
J(z, {
|
|
123
130
|
"data-test": "button|confirm",
|
|
124
|
-
disabled: t.disabled
|
|
125
|
-
|
|
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:
|
|
137
|
+
onClick: Z
|
|
130
138
|
}, {
|
|
131
139
|
default: m(() => [
|
|
132
|
-
|
|
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,
|
|
148
|
+
], 16, U)) : i("", !0)
|
|
141
149
|
]),
|
|
142
150
|
_: 3
|
|
143
151
|
}));
|
|
144
152
|
}
|
|
145
|
-
}),
|
|
146
|
-
dialog:
|
|
147
|
-
body:
|
|
148
|
-
grey:
|
|
149
|
-
content:
|
|
150
|
-
footer:
|
|
151
|
-
},
|
|
152
|
-
$style:
|
|
153
|
-
}, kt = /* @__PURE__ */
|
|
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
|
};
|
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 = 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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Dialog.vue.d.ts
CHANGED
|
@@ -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
|
*
|
package/dist/useDialog.d.ts
CHANGED
|
@@ -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
|
*
|