@leaflink/stash 49.3.5 → 49.4.0
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 +53 -38
- package/dist/Accordion.js.map +1 -1
- package/dist/Accordion.vue.d.ts +21 -2
- package/dist/Dialog.vue.d.ts +1 -1
- package/dist/Modal.vue.d.ts +1 -1
- package/package.json +1 -1
package/dist/Accordion.js
CHANGED
|
@@ -1,74 +1,89 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
import
|
|
4
|
-
import { _ as
|
|
1
|
+
import { defineComponent as v, useSlots as x, useCssModule as y, ref as E, watch as b, openBlock as c, createElementBlock as i, createElementVNode as s, normalizeClass as m, unref as l, withKeys as h, withModifiers as k, renderSlot as w, Fragment as C, createVNode as r, toDisplayString as M, withDirectives as S, vShow as $, withCtx as z } from "vue";
|
|
2
|
+
import { _ as B } from "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
|
|
3
|
+
import _ from "./Icon.js";
|
|
4
|
+
import { _ as K } 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 A = {
|
|
9
9
|
class: "stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white",
|
|
10
10
|
"data-test": "stash-accordion"
|
|
11
|
-
},
|
|
11
|
+
}, D = ["onKeypress"], I = { key: 0 }, N = { class: "tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900" }, V = { class: "tw-mx-[18px] tw-h-px tw-bg-ice-200" }, j = {
|
|
12
12
|
class: "stash-accordion__content tw-p-[18px]",
|
|
13
13
|
"data-test": "stash-accordion|content"
|
|
14
|
-
},
|
|
14
|
+
}, F = /* @__PURE__ */ v({
|
|
15
15
|
__name: "Accordion",
|
|
16
16
|
props: {
|
|
17
17
|
icon: { default: "circle-info" },
|
|
18
|
-
title: { default: void 0 }
|
|
18
|
+
title: { default: void 0 },
|
|
19
|
+
isExpanded: { type: Boolean, default: !1 }
|
|
19
20
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
emits: ["toggle", "open", "close"],
|
|
22
|
+
setup(g, { emit: f }) {
|
|
23
|
+
const t = g, d = x(), n = f, p = y();
|
|
24
|
+
if (!t.title && !d.header)
|
|
23
25
|
throw new Error("Either a title prop or header slot must be provided");
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
const e = E(t.isExpanded);
|
|
27
|
+
b(
|
|
28
|
+
() => t.isExpanded,
|
|
29
|
+
(o) => {
|
|
30
|
+
e.value = o, u();
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
const a = () => {
|
|
34
|
+
e.value = !e.value, u();
|
|
35
|
+
};
|
|
36
|
+
function u() {
|
|
37
|
+
n("toggle", { isExpanded: e.value }), e.value ? n("open") : n("close");
|
|
38
|
+
}
|
|
39
|
+
return (o, J) => (c(), i("div", A, [
|
|
40
|
+
s("div", {
|
|
26
41
|
tabindex: "0",
|
|
27
42
|
"data-test": "stash-accordion|toggle",
|
|
28
|
-
class:
|
|
29
|
-
onClick:
|
|
43
|
+
class: m(["stash-accordion__toggle tw-flex tw-items-center", [l(p).toggle, e.value && l(p)["toggle--open"]]]),
|
|
44
|
+
onClick: a,
|
|
30
45
|
onKeypress: [
|
|
31
|
-
|
|
32
|
-
|
|
46
|
+
h(a, ["enter"]),
|
|
47
|
+
h(k(a, ["prevent"]), ["space"])
|
|
33
48
|
]
|
|
34
49
|
}, [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
])) : (
|
|
38
|
-
r(
|
|
50
|
+
l(d).header ? (c(), i("div", I, [
|
|
51
|
+
w(o.$slots, "header")
|
|
52
|
+
])) : (c(), i(C, { key: 1 }, [
|
|
53
|
+
r(_, {
|
|
39
54
|
class: "tw-text-blue-500",
|
|
40
55
|
size: "dense",
|
|
41
|
-
name:
|
|
56
|
+
name: t.icon,
|
|
42
57
|
"data-test": "stash-accordion|toggle-icon"
|
|
43
58
|
}, null, 8, ["name"]),
|
|
44
|
-
|
|
59
|
+
s("div", N, M(t.title), 1)
|
|
45
60
|
], 64)),
|
|
46
|
-
r(
|
|
47
|
-
class:
|
|
61
|
+
r(_, {
|
|
62
|
+
class: m(["tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300", { "tw-rotate-180": e.value }]),
|
|
48
63
|
size: "dense",
|
|
49
64
|
name: "chevron-down",
|
|
50
65
|
"data-test": "stash-accordion|toggle-chevron"
|
|
51
66
|
}, null, 8, ["class"])
|
|
52
|
-
],
|
|
53
|
-
|
|
54
|
-
[
|
|
67
|
+
], 42, D),
|
|
68
|
+
S(s("hr", V, null, 512), [
|
|
69
|
+
[$, e.value]
|
|
55
70
|
]),
|
|
56
|
-
r(
|
|
57
|
-
default:
|
|
58
|
-
|
|
59
|
-
|
|
71
|
+
r(B, { "is-expanded": e.value }, {
|
|
72
|
+
default: z(() => [
|
|
73
|
+
s("div", j, [
|
|
74
|
+
w(o.$slots, "default")
|
|
60
75
|
])
|
|
61
76
|
]),
|
|
62
77
|
_: 3
|
|
63
78
|
}, 8, ["is-expanded"])
|
|
64
79
|
]));
|
|
65
80
|
}
|
|
66
|
-
}),
|
|
67
|
-
toggle:
|
|
68
|
-
},
|
|
69
|
-
$style:
|
|
70
|
-
},
|
|
81
|
+
}), q = "_toggle_1lu5k_2", G = {
|
|
82
|
+
toggle: q
|
|
83
|
+
}, H = {
|
|
84
|
+
$style: G
|
|
85
|
+
}, W = /* @__PURE__ */ K(F, [["__cssModules", H]]);
|
|
71
86
|
export {
|
|
72
|
-
|
|
87
|
+
W as default
|
|
73
88
|
};
|
|
74
89
|
//# 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, 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
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useCssModule, useSlots, watch } 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 * Whether the Accordion is expanded or not\n */\n isExpanded?: boolean;\n }\n\n type ToggleState = {\n isExpanded: boolean;\n };\n\n const props = withDefaults(defineProps<AccordionProps>(), {\n icon: 'circle-info',\n title: undefined,\n isExpanded: false,\n });\n const slots = useSlots();\n\n const emits = defineEmits<{\n (e: 'toggle', state: ToggleState): void;\n (e: 'open'): void;\n (e: 'close'): void;\n }>();\n\n const classes = useCssModule();\n\n if (!props.title && !slots.header) {\n throw new Error('Either a title prop or header slot must be provided');\n }\n\n const localIsExpanded = ref(props.isExpanded);\n\n watch(\n () => props.isExpanded,\n (newVal) => {\n localIsExpanded.value = newVal;\n emitEvents();\n },\n );\n\n const toggle = () => {\n localIsExpanded.value = !localIsExpanded.value;\n emitEvents();\n };\n\n function emitEvents() {\n emits('toggle', { isExpanded: localIsExpanded.value });\n localIsExpanded.value ? emits('open') : emits('close');\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, localIsExpanded && classes['toggle--open']]\"\n @click=\"toggle\"\n @keypress.enter=\"toggle\"\n @keypress.space.prevent=\"toggle\"\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': localIsExpanded }\"\n />\n </div>\n <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n <Expand :is-expanded=\"localIsExpanded\">\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","emits","__emit","classes","useCssModule","localIsExpanded","ref","watch","newVal","emitEvents","toggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,KAERC,IAAQC,GAMRC,IAAUC;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACnB,YAAA,IAAI,MAAM,qDAAqD;AAGjE,UAAAM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,IAAAU;AAAA,MACE,MAAMV,EAAM;AAAA,MACZ,CAACW,MAAW;AACV,QAAAH,EAAgB,QAAQG,GACbC;MACb;AAAA,IAAA;AAGF,UAAMC,IAAS,MAAM;AACH,MAAAL,EAAA,QAAQ,CAACA,EAAgB,OAC9BI;IAAA;AAGb,aAASA,IAAa;AACpB,MAAAR,EAAM,UAAU,EAAE,YAAYI,EAAgB,MAAO,CAAA,GACrDA,EAAgB,QAAQJ,EAAM,MAAM,IAAIA,EAAM,OAAO;AAAA,IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Accordion.vue.d.ts
CHANGED
|
@@ -41,15 +41,30 @@ export declare interface AccordionProps {
|
|
|
41
41
|
* Title of the Accordion, displayed in the header
|
|
42
42
|
*/
|
|
43
43
|
title?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Whether the Accordion is expanded or not
|
|
46
|
+
*/
|
|
47
|
+
isExpanded?: boolean;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
|
|
47
51
|
icon: string;
|
|
48
52
|
title: undefined;
|
|
49
|
-
|
|
53
|
+
isExpanded: boolean;
|
|
54
|
+
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
55
|
+
toggle: (state: ToggleState) => void;
|
|
56
|
+
open: () => void;
|
|
57
|
+
close: () => void;
|
|
58
|
+
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AccordionProps>, {
|
|
50
59
|
icon: string;
|
|
51
60
|
title: undefined;
|
|
52
|
-
|
|
61
|
+
isExpanded: boolean;
|
|
62
|
+
}>>> & Readonly<{
|
|
63
|
+
onClose?: (() => any) | undefined;
|
|
64
|
+
onToggle?: ((state: ToggleState) => any) | undefined;
|
|
65
|
+
onOpen?: (() => any) | undefined;
|
|
66
|
+
}>, {
|
|
67
|
+
isExpanded: boolean;
|
|
53
68
|
title: string;
|
|
54
69
|
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";
|
|
55
70
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
@@ -62,4 +77,8 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
62
77
|
|
|
63
78
|
declare const iconNames: readonly ["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", "close", "combine", "compass", "contact", "contract", "copy", "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", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "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", "menu", "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", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "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"];
|
|
64
79
|
|
|
80
|
+
declare type ToggleState = {
|
|
81
|
+
isExpanded: boolean;
|
|
82
|
+
};
|
|
83
|
+
|
|
65
84
|
export { }
|
package/dist/Dialog.vue.d.ts
CHANGED
|
@@ -63,8 +63,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
|
|
|
63
63
|
}>, {
|
|
64
64
|
disabled: boolean;
|
|
65
65
|
header: string;
|
|
66
|
-
description: string;
|
|
67
66
|
open: boolean;
|
|
67
|
+
description: string;
|
|
68
68
|
dangerZone: boolean;
|
|
69
69
|
cancelText: string;
|
|
70
70
|
confirmText: string;
|
package/dist/Modal.vue.d.ts
CHANGED
|
@@ -69,8 +69,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
|
|
|
69
69
|
}>, {
|
|
70
70
|
title: string;
|
|
71
71
|
size: "medium" | "narrow" | "wide";
|
|
72
|
-
modelValue: boolean;
|
|
73
72
|
open: boolean;
|
|
73
|
+
modelValue: boolean;
|
|
74
74
|
position: "center" | "left" | "right";
|
|
75
75
|
isOpen: boolean;
|
|
76
76
|
hideClose: boolean;
|