@leaflink/stash 51.5.1 → 51.6.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/assets/icons/bank.svg +1 -0
- package/assets/icons/face-id.svg +1 -0
- package/assets/icons/face.svg +1 -0
- package/assets/icons/fingerprint.svg +3 -0
- package/assets/icons/reorder.svg +1 -0
- package/assets/illustrations/spot/check-circle.svg +1 -1
- package/assets/illustrations/spot/crm.svg +1 -1
- package/assets/illustrations/spot/delivery-completed.svg +1 -1
- package/assets/illustrations/spot/delivery.svg +1 -1
- package/assets/illustrations/spot/discover.svg +1 -1
- package/assets/illustrations/spot/money-transfer.svg +1 -1
- package/assets/illustrations/vignette/no-filters-result.svg +21 -0
- package/assets/spritesheet.svg +1 -1
- package/dist/Accordion.vue.d.ts +2 -2
- package/dist/AppNavigationItem.vue.d.ts +1 -1
- package/dist/Carousel.js +9 -9
- package/dist/Carousel.js.map +1 -1
- package/dist/DataViewToolbar.js +9 -9
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/EmptyState.js +1 -1
- package/dist/EmptyState.vue.d.ts +2 -1
- package/dist/HttpError.js +1 -1
- package/dist/Icon.js +15 -10
- package/dist/Icon.js.map +1 -1
- package/dist/Icon.vue.d.ts +1 -1
- package/dist/IconLabel.vue.d.ts +1 -1
- package/dist/Illustration.js +2 -2
- package/dist/Illustration.vue.d.ts +1 -0
- package/dist/{Illustration.vue_vue_type_script_setup_true_lang-DlY0OGCe.js → Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js} +2 -2
- package/dist/Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js.map +1 -0
- package/dist/ListView.vue.d.ts +18 -18
- package/dist/ObfuscateText.js +5 -5
- package/dist/ObfuscateText.js.map +1 -1
- package/dist/QuickAction.vue.d.ts +1 -1
- package/dist/SectionHeader.vue.d.ts +2 -2
- package/dist/SelectStatus.js +13 -13
- package/dist/SelectStatus.js.map +1 -1
- package/dist/SelectStatus.vue.d.ts +1 -1
- package/dist/Switch.js +8 -8
- package/dist/Switch.js.map +1 -1
- package/dist/Tab.js +5 -5
- package/dist/Tab.js.map +1 -1
- package/dist/TableCell.js +1 -1
- package/dist/TableHeaderCell.js +1 -1
- package/dist/TableHeaderRow.js +1 -1
- package/dist/TableRow.js +1 -1
- package/dist/TextEditor.vue.d.ts +1 -1
- package/dist/Toast.js +189 -184
- package/dist/Toast.js.map +1 -1
- package/dist/Toast.vue.d.ts +4 -0
- package/dist/Toasts.js +13 -12
- package/dist/Toasts.js.map +1 -1
- package/dist/Tooltip.js +8 -8
- package/dist/Tooltip.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/useToasts.d.ts +6 -0
- package/dist/useToasts.js +28 -23
- package/dist/useToasts.js.map +1 -1
- package/package.json +5 -4
- package/dist/Illustration.vue_vue_type_script_setup_true_lang-DlY0OGCe.js.map +0 -1
package/dist/ObfuscateText.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as n, ref as u, computed as r, createElementBlock as c, openBlock as a, createTextVNode as
|
|
1
|
+
import { defineComponent as n, ref as u, computed as r, createElementBlock as c, openBlock as a, createTextVNode as i, createBlock as f, createCommentVNode as m, toDisplayString as h, withCtx as p, createVNode as d, normalizeClass as g } from "vue";
|
|
2
2
|
import x from "./Button.js";
|
|
3
3
|
import C from "./Icon.js";
|
|
4
4
|
import b from "./utils/obfuscateText.js";
|
|
@@ -25,10 +25,10 @@ const k = {
|
|
|
25
25
|
position: t.position
|
|
26
26
|
}));
|
|
27
27
|
return (w, o) => (a(), c("span", k, [
|
|
28
|
-
|
|
29
|
-
t.showToggle ? (a(),
|
|
28
|
+
i(h(l.value) + " ", 1),
|
|
29
|
+
t.showToggle ? (a(), f(x, {
|
|
30
30
|
key: 0,
|
|
31
|
-
class: "tw-ml-1 tw-
|
|
31
|
+
class: "tw-ml-1 tw-size-auto tw-p-0",
|
|
32
32
|
icon: "",
|
|
33
33
|
type: "button",
|
|
34
34
|
onClick: o[0] || (o[0] = (T) => e.value = !e.value)
|
|
@@ -41,7 +41,7 @@ const k = {
|
|
|
41
41
|
}, null, 8, ["name", "class", "data-test"])
|
|
42
42
|
]),
|
|
43
43
|
_: 1
|
|
44
|
-
})) :
|
|
44
|
+
})) : m("", !0)
|
|
45
45
|
]));
|
|
46
46
|
}
|
|
47
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, ref } from 'vue';\n\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({ name: 'll-obfuscate-text' });\n\n import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n export interface ObfuscateTextProps extends ObfuscateTextOptions {\n /**\n * The full text\n */\n text: string;\n\n /**\n * Whether to obfuscate all characters.\n * @deprecated omit the lengthToKeep prop to achieve the same result\n */\n obfuscateAll?: boolean;\n\n /**\n * Displays a button for toggling text visibility\n */\n showToggle?: boolean;\n }\n\n const isFullTextVisible = ref(false);\n\n const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n maskChar: '•',\n maskCharCount: 10,\n lengthToKeep: 0,\n position: 'start',\n obfuscateAll: false,\n showToggle: false,\n });\n\n const obfuscatedText = computed(() => {\n if (props.showToggle && isFullTextVisible.value) {\n return props.text;\n }\n\n if (props.obfuscateAll) {\n return props.maskChar.repeat(props.maskCharCount);\n }\n\n return obfuscateText(props.text, {\n maskChar: props.maskChar,\n maskCharCount: props.maskCharCount,\n lengthToKeep: props.lengthToKeep,\n position: props.position,\n });\n });\n</script>\n\n<template>\n <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n {{ obfuscatedText }}\n <Button\n v-if=\"props.showToggle\"\n class=\"tw-ml-1 tw-
|
|
1
|
+
{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, ref } from 'vue';\n\n import Button from '../Button/Button.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({ name: 'll-obfuscate-text' });\n\n import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n export interface ObfuscateTextProps extends ObfuscateTextOptions {\n /**\n * The full text\n */\n text: string;\n\n /**\n * Whether to obfuscate all characters.\n * @deprecated omit the lengthToKeep prop to achieve the same result\n */\n obfuscateAll?: boolean;\n\n /**\n * Displays a button for toggling text visibility\n */\n showToggle?: boolean;\n }\n\n const isFullTextVisible = ref(false);\n\n const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n maskChar: '•',\n maskCharCount: 10,\n lengthToKeep: 0,\n position: 'start',\n obfuscateAll: false,\n showToggle: false,\n });\n\n const obfuscatedText = computed(() => {\n if (props.showToggle && isFullTextVisible.value) {\n return props.text;\n }\n\n if (props.obfuscateAll) {\n return props.maskChar.repeat(props.maskCharCount);\n }\n\n return obfuscateText(props.text, {\n maskChar: props.maskChar,\n maskCharCount: props.maskCharCount,\n lengthToKeep: props.lengthToKeep,\n position: props.position,\n });\n });\n</script>\n\n<template>\n <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n {{ obfuscatedText }}\n <Button\n v-if=\"props.showToggle\"\n class=\"tw-ml-1 tw-size-auto tw-p-0\"\n icon\n type=\"button\"\n @click=\"isFullTextVisible = !isFullTextVisible\"\n >\n <Icon\n :name=\"isFullTextVisible ? 'hide' : 'show'\"\n class=\"tw-cursor-pointer\"\n :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n :data-test=\"\n isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n \"\n />\n </Button>\n </span>\n</template>\n"],"names":["isFullTextVisible","ref","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -27,7 +27,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
27
27
|
*
|
|
28
28
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
29
29
|
*/
|
|
30
|
-
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", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
30
|
+
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", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "reorder", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
31
31
|
|
|
32
32
|
export declare interface QuickActionProps {
|
|
33
33
|
/**
|
|
@@ -50,7 +50,7 @@ onActionEvent?: (() => any) | undefined;
|
|
|
50
50
|
}>, {
|
|
51
51
|
to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
|
|
52
52
|
actionLabel: string;
|
|
53
|
-
actionIcon: "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" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "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" | "home" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "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" | "start" | "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-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
|
|
53
|
+
actionIcon: "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" | "bank" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "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" | "face-id" | "face" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "fingerprint" | "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" | "home" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "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" | "reorder" | "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" | "start" | "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-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
|
|
54
54
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
55
55
|
default?(_: {}): any;
|
|
56
56
|
}>;
|
|
@@ -63,7 +63,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
63
63
|
*
|
|
64
64
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
65
65
|
*/
|
|
66
|
-
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", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
66
|
+
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", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "reorder", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
67
67
|
|
|
68
68
|
declare interface SectionHeaderProps {
|
|
69
69
|
/**
|
package/dist/SelectStatus.js
CHANGED
|
@@ -2,11 +2,11 @@ import { defineComponent as S, useAttrs as g, useCssModule as C, computed as u,
|
|
|
2
2
|
import p from "./Icon.js";
|
|
3
3
|
import $ from "./Select.js";
|
|
4
4
|
import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
5
|
-
const N = { class: "tw-mr-6 tw-truncate" },
|
|
5
|
+
const N = { class: "tw-mr-6 tw-truncate" }, z = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "tw-flex tw-items-center",
|
|
8
8
|
"data-test": "select-status|value"
|
|
9
|
-
},
|
|
9
|
+
}, D = { class: "tw-ml-1.5 tw-mr-6 tw-truncate" }, I = { class: "tw-flex tw-min-w-0" }, L = /* @__PURE__ */ S({
|
|
10
10
|
name: "ll-select-status",
|
|
11
11
|
__name: "SelectStatus",
|
|
12
12
|
props: {
|
|
@@ -22,13 +22,13 @@ const N = { class: "tw-mr-6 tw-truncate" }, D = {
|
|
|
22
22
|
label: { default: void 0 }
|
|
23
23
|
},
|
|
24
24
|
emits: ["update:model-value"],
|
|
25
|
-
setup(
|
|
26
|
-
const _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = g(), v = C(), t =
|
|
25
|
+
setup(y, { emit: w }) {
|
|
26
|
+
const _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = g(), v = C(), t = y;
|
|
27
27
|
if (t.value)
|
|
28
28
|
throw new Error("ll-select-status: use :model-value or v-model instead of :value.");
|
|
29
29
|
if (h.onInput)
|
|
30
30
|
throw new Error("ll-select-status: use the @update:model-value event instead of @input");
|
|
31
|
-
const x =
|
|
31
|
+
const x = w, o = u(() => t.statusOptions.find((e) => e[t.trackBy] === t.modelValue)), B = u(() => {
|
|
32
32
|
const { color: e = "" } = o.value || {};
|
|
33
33
|
return _.includes(e);
|
|
34
34
|
});
|
|
@@ -65,11 +65,11 @@ const N = { class: "tw-mr-6 tw-truncate" }, D = {
|
|
|
65
65
|
selected: r(({ option: s }) => [
|
|
66
66
|
t.secondary ? (c(), f("div", {
|
|
67
67
|
key: 0,
|
|
68
|
-
class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-
|
|
68
|
+
class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-size-full tw-items-center tw-rounded tw-pl-3", [b(s.color)]]),
|
|
69
69
|
"data-test": "select-status|value"
|
|
70
70
|
}, [
|
|
71
71
|
a("span", N, n(s[t.displayBy]), 1)
|
|
72
|
-
], 2)) : (c(), f("div",
|
|
72
|
+
], 2)) : (c(), f("div", z, [
|
|
73
73
|
i(p, {
|
|
74
74
|
"data-test": "select-status|value-icon",
|
|
75
75
|
name: s.icon || "circle-status",
|
|
@@ -79,11 +79,11 @@ const N = { class: "tw-mr-6 tw-truncate" }, D = {
|
|
|
79
79
|
]),
|
|
80
80
|
style: m({ color: s.hexCode })
|
|
81
81
|
}, null, 8, ["name", "class", "style"]),
|
|
82
|
-
a("span",
|
|
82
|
+
a("span", D, n(s[t.displayBy]), 1)
|
|
83
83
|
]))
|
|
84
84
|
]),
|
|
85
85
|
option: r(({ option: s }) => [
|
|
86
|
-
a("div",
|
|
86
|
+
a("div", I, [
|
|
87
87
|
i(p, {
|
|
88
88
|
"data-test": "svg|status-color",
|
|
89
89
|
name: s.icon || "circle-status",
|
|
@@ -102,12 +102,12 @@ const N = { class: "tw-mr-6 tw-truncate" }, D = {
|
|
|
102
102
|
_: 1
|
|
103
103
|
}, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value", "label"]));
|
|
104
104
|
}
|
|
105
|
-
}),
|
|
106
|
-
select:
|
|
105
|
+
}), M = "_select_f7xpn_27", T = {
|
|
106
|
+
select: M,
|
|
107
107
|
"stash-select__chips": "_stash-select__chips_f7xpn_32"
|
|
108
108
|
}, A = {
|
|
109
|
-
$style:
|
|
110
|
-
}, q = /* @__PURE__ */ E(
|
|
109
|
+
$style: T
|
|
110
|
+
}, q = /* @__PURE__ */ E(L, [["__cssModules", A]]);
|
|
111
111
|
export {
|
|
112
112
|
q as default
|
|
113
113
|
};
|
package/dist/SelectStatus.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, useAttrs, useCssModule } from 'vue';\n\n import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n import Select from '../Select/Select.vue';\n\n defineOptions({\n name: 'll-select-status',\n });\n\n export type SelectStatusOption = {\n id: number | string | boolean;\n name: string;\n color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n icon?: IconName;\n };\n\n export interface SelectStatusProps {\n /**\n * Disables the component, if true\n */\n disabled?: boolean;\n /**\n * Which key of the prop option to use for display\n */\n displayBy?: string;\n /**\n * Sets the background color of the component to the color of the selected option\n */\n secondary?: boolean;\n /**\n * Allows option text to wrap to next line when set to true\n */\n noTruncate?: boolean;\n /**\n * Placeholder text\n */\n placeholder?: string;\n /**\n * The list of all options to select the status from\n * each object must have the following structure: { id: number | string, name: string, color?: string }\n */\n statusOptions: Array<SelectStatusOption>;\n /**\n * Default field to track the selected status by\n */\n trackBy?: string;\n /**\n * Sets the currently-selected option for the component\n */\n modelValue: number | string | boolean;\n /**\n * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n */\n value?: number | string | boolean | null;\n\n /**\n * Shows a label above the select\n */\n label?: string;\n }\n\n /**\n * Array containing the available dark fill colors that need a different text color.\n */\n const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n const attrs = useAttrs();\n const classes = useCssModule();\n\n const props = withDefaults(defineProps<SelectStatusProps>(), {\n disabled: false,\n displayBy: 'name',\n secondary: false,\n noTruncate: false,\n placeholder: 'Select Status',\n trackBy: 'id',\n value: null,\n label: undefined,\n });\n\n if (props.value) {\n throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n }\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:model-value', value: unknown): void;\n }>();\n\n const valueOption = computed(() => {\n return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n });\n\n const hasDarkFill = computed(() => {\n const { color = '' } = valueOption.value || {};\n return DARK_FILL_COLORS.includes(color);\n });\n\n /**\n * @param {string} color Valid color name\n * @return {string} tailwind class for given color\n */\n function getBgColor(color: SelectStatusOption['color']): string {\n // if there's no hyphen then it's a color name and has no shade, so we default to 500\n return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n }\n\n /**\n * @param {string} color Valid color name\n * @return {string} tailwind class for given color\n */\n function getTextColor(color: SelectStatusOption['color']): string {\n // if there's no hyphen then it's a color name and has no shade, so we default to 500\n return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n }\n\n function onSelect(value?: SelectStatusOption): void {\n emit('update:model-value', value?.[props.trackBy] ?? '');\n }\n</script>\n\n<template>\n <Select\n ref=\"select\"\n hide-search\n single\n :class=\"[\n classes.select,\n {\n 'stash-select-status--filled': props.secondary,\n 'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n },\n ]\"\n :disabled=\"props.disabled\"\n :icon=\"!props.disabled && 'caret-down'\"\n :options=\"props.statusOptions\"\n :placeholder=\"props.placeholder\"\n :track-by=\"props.trackBy\"\n :model-value=\"valueOption\"\n :label=\"props.label\"\n data-test=\"stash-select-status\"\n class=\"stash-select-status\"\n @update:model-value=\"onSelect\"\n >\n <template #selected=\"{ option }\">\n <div\n v-if=\"props.secondary\"\n class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-
|
|
1
|
+
{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, useAttrs, useCssModule } from 'vue';\n\n import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n import Select from '../Select/Select.vue';\n\n defineOptions({\n name: 'll-select-status',\n });\n\n export type SelectStatusOption = {\n id: number | string | boolean;\n name: string;\n color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n icon?: IconName;\n };\n\n export interface SelectStatusProps {\n /**\n * Disables the component, if true\n */\n disabled?: boolean;\n /**\n * Which key of the prop option to use for display\n */\n displayBy?: string;\n /**\n * Sets the background color of the component to the color of the selected option\n */\n secondary?: boolean;\n /**\n * Allows option text to wrap to next line when set to true\n */\n noTruncate?: boolean;\n /**\n * Placeholder text\n */\n placeholder?: string;\n /**\n * The list of all options to select the status from\n * each object must have the following structure: { id: number | string, name: string, color?: string }\n */\n statusOptions: Array<SelectStatusOption>;\n /**\n * Default field to track the selected status by\n */\n trackBy?: string;\n /**\n * Sets the currently-selected option for the component\n */\n modelValue: number | string | boolean;\n /**\n * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n */\n value?: number | string | boolean | null;\n\n /**\n * Shows a label above the select\n */\n label?: string;\n }\n\n /**\n * Array containing the available dark fill colors that need a different text color.\n */\n const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n const attrs = useAttrs();\n const classes = useCssModule();\n\n const props = withDefaults(defineProps<SelectStatusProps>(), {\n disabled: false,\n displayBy: 'name',\n secondary: false,\n noTruncate: false,\n placeholder: 'Select Status',\n trackBy: 'id',\n value: null,\n label: undefined,\n });\n\n if (props.value) {\n throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n }\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:model-value', value: unknown): void;\n }>();\n\n const valueOption = computed(() => {\n return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n });\n\n const hasDarkFill = computed(() => {\n const { color = '' } = valueOption.value || {};\n return DARK_FILL_COLORS.includes(color);\n });\n\n /**\n * @param {string} color Valid color name\n * @return {string} tailwind class for given color\n */\n function getBgColor(color: SelectStatusOption['color']): string {\n // if there's no hyphen then it's a color name and has no shade, so we default to 500\n return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n }\n\n /**\n * @param {string} color Valid color name\n * @return {string} tailwind class for given color\n */\n function getTextColor(color: SelectStatusOption['color']): string {\n // if there's no hyphen then it's a color name and has no shade, so we default to 500\n return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n }\n\n function onSelect(value?: SelectStatusOption): void {\n emit('update:model-value', value?.[props.trackBy] ?? '');\n }\n</script>\n\n<template>\n <Select\n ref=\"select\"\n hide-search\n single\n :class=\"[\n classes.select,\n {\n 'stash-select-status--filled': props.secondary,\n 'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n },\n ]\"\n :disabled=\"props.disabled\"\n :icon=\"!props.disabled && 'caret-down'\"\n :options=\"props.statusOptions\"\n :placeholder=\"props.placeholder\"\n :track-by=\"props.trackBy\"\n :model-value=\"valueOption\"\n :label=\"props.label\"\n data-test=\"stash-select-status\"\n class=\"stash-select-status\"\n @update:model-value=\"onSelect\"\n >\n <template #selected=\"{ option }\">\n <div\n v-if=\"props.secondary\"\n class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-size-full tw-items-center tw-rounded tw-pl-3\"\n data-test=\"select-status|value\"\n :class=\"[getBgColor(option.color)]\"\n >\n <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n </div>\n\n <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n <Icon\n data-test=\"select-status|value-icon\"\n :name=\"option.icon || 'circle-status'\"\n :class=\"[\n { [getTextColor(option.color)]: option.color },\n { 'tw-text-ice-700': !option.color && !option.hexCode },\n ]\"\n :style=\"{ color: option.hexCode }\"\n />\n <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n </div>\n </template>\n\n <template #option=\"{ option }\">\n <div class=\"tw-flex tw-min-w-0\">\n <Icon\n data-test=\"svg|status-color\"\n :name=\"option.icon || 'circle-status'\"\n :class=\"[\n { [getTextColor(option.color)]: option.color },\n { 'tw-text-ice-700': !option.color && !option.hexCode },\n ]\"\n class=\"!tw-shrink-0\"\n :style=\"{ color: option.hexCode }\"\n />\n <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n {{ option[props.displayBy] }}\n </span>\n </div>\n </template>\n </Select>\n</template>\n\n<style module>\n :global(.stash-select-status--filled .stash-select__content) {\n border: none;\n padding: 0;\n }\n\n :global(\n .stash-select-status--filled\n .stash-select--active\n .stash-select__content:focus-within\n .stash-select__border-selector\n ) {\n box-sizing: content-box;\n max-width: calc(100% - 2px);\n }\n\n :global(.stash-select-status--filled .stash-select-status--selected),\n :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n color: theme('colors.white');\n }\n\n :global(.stash-select-status--filled-dark .stash-select-status--selected),\n :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n color: var(--color-ice-900);\n }\n\n .select :global(.stash-select--disabled > .stash-select__content) {\n background-color: transparent;\n border-color: transparent;\n }\n\n .select :deep(.stash-select__chips) {\n margin: 0;\n }\n\n .select :global(.stash-select__options) {\n margin: 0;\n padding: 0;\n }\n\n .select ul {\n position: relative;\n }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAQC;AAWd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAO,IAAAJ,EAAY,SAAS,CAAC;AACtC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAEvD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,CAAK,KAAK,SAASA,CAAK;AAAA,IAAA;AAOjE,aAASE,EAAaF,GAA4C;AAEzD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,CAAK,KAAK,WAAWA,CAAK;AAAA,IAAA;AAGrE,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -67,7 +67,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
67
67
|
*
|
|
68
68
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
69
69
|
*/
|
|
70
|
-
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", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
70
|
+
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", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "reorder", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
71
71
|
|
|
72
72
|
export declare type SelectStatusOption = {
|
|
73
73
|
id: number | string | boolean;
|
package/dist/Switch.js
CHANGED
|
@@ -2,7 +2,7 @@ import { defineComponent as v, useAttrs as g, useSlots as y, useCssModule as C,
|
|
|
2
2
|
import T from "@leaflink/snitch";
|
|
3
3
|
import E from "lodash-es/uniqueId";
|
|
4
4
|
import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
5
|
-
const
|
|
5
|
+
const z = ["data-test"], D = ["for"], I = ["id", "disabled", "name", "value"], $ = /* @__PURE__ */ v({
|
|
6
6
|
name: "ll-switch",
|
|
7
7
|
inheritAttrs: !1,
|
|
8
8
|
__name: "Switch",
|
|
@@ -54,7 +54,7 @@ const D = ["data-test"], I = ["for"], $ = ["id", "disabled", "name", "value"], q
|
|
|
54
54
|
"data-test": "stash-switch|track"
|
|
55
55
|
}, null, 2),
|
|
56
56
|
c("span", {
|
|
57
|
-
class: s(["stash-switch__control tw-absolute tw-left-0 tw-
|
|
57
|
+
class: s(["stash-switch__control tw-absolute tw-left-0 tw-size-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow", [
|
|
58
58
|
a(n).control,
|
|
59
59
|
{
|
|
60
60
|
"stash-switch__control--on": t.checked,
|
|
@@ -74,7 +74,7 @@ const D = ["data-test"], I = ["for"], $ = ["id", "disabled", "name", "value"], q
|
|
|
74
74
|
tabindex: "0",
|
|
75
75
|
value: e.value,
|
|
76
76
|
class: "tw-sr-only"
|
|
77
|
-
}, null, 8,
|
|
77
|
+
}, null, 8, I), [
|
|
78
78
|
[V, h.value]
|
|
79
79
|
]),
|
|
80
80
|
t.label ? (d(), i("span", {
|
|
@@ -88,7 +88,7 @@ const D = ["data-test"], I = ["for"], $ = ["id", "disabled", "name", "value"], q
|
|
|
88
88
|
}, "stash-switch__label-text tw-relative tw-top-px tw-ml-1.5"]),
|
|
89
89
|
"data-test": "stash-switch|label-text"
|
|
90
90
|
}, _(t.label), 3)) : u("", !0)
|
|
91
|
-
], 16,
|
|
91
|
+
], 16, D),
|
|
92
92
|
t.hintText || a(f).hint ? (d(), i("span", {
|
|
93
93
|
key: 0,
|
|
94
94
|
class: s(["stash-switch__hint tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs", { "stash-switch__hint--disabled tw-text-ice-500": t.disabled }]),
|
|
@@ -98,14 +98,14 @@ const D = ["data-test"], I = ["for"], $ = ["id", "disabled", "name", "value"], q
|
|
|
98
98
|
M(_(t.hintText), 1)
|
|
99
99
|
])
|
|
100
100
|
], 2)) : u("", !0)
|
|
101
|
-
], 10,
|
|
101
|
+
], 10, z));
|
|
102
102
|
}
|
|
103
|
-
}),
|
|
104
|
-
control:
|
|
103
|
+
}), q = "_control_8a1ic_2", P = "_active_8a1ic_5", U = {
|
|
104
|
+
control: q,
|
|
105
105
|
active: P
|
|
106
106
|
}, j = {
|
|
107
107
|
$style: U
|
|
108
|
-
}, K = /* @__PURE__ */ N(
|
|
108
|
+
}, K = /* @__PURE__ */ N($, [["__cssModules", j]]);
|
|
109
109
|
export {
|
|
110
110
|
K as default
|
|
111
111
|
};
|
package/dist/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n export interface SwitchProps {\n /**\n * The current checked value, can be a boolean or an array of values\n */\n checked?: boolean | Array<string | number>;\n\n /**\n * Prevent the user from changing the switch state.\n */\n disabled?: boolean;\n\n /**\n * Displays text below the input; hidden when the isReadOnly prop is truthy.\n */\n hintText?: string;\n\n /**\n * Unique ID for the switch, required for accessibility purposes\n */\n id?: string;\n\n /**\n * Label text to display with switch\n */\n label?: string;\n\n /**\n * HTML name property\n */\n name?: string;\n\n /**\n * Value associated with switch when it is `checked`. This value is\n * used to compare against `checked` property when passed as an array.\n */\n value?: string | number;\n }\n\n defineOptions({\n name: 'll-switch',\n inheritAttrs: false,\n });\n\n const props = withDefaults(defineProps<SwitchProps>(), {\n checked: false,\n disabled: false,\n hintText: '',\n id: undefined,\n label: '',\n name: '',\n value: '',\n });\n\n const attrs = useAttrs();\n const slots = useSlots();\n const classes = useCssModule();\n\n const emit = defineEmits<{\n (e: 'update:checked', value: SwitchProps['checked']): void;\n }>();\n\n if (typeof props.value === 'boolean') {\n logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n }\n\n if (attrs.onChange) {\n throw new Error('ll-switch: use the @update:checked event instead of @change.');\n }\n\n const switchAttrs = computed(() => {\n const tempAttrs = { ...attrs };\n\n delete tempAttrs['data-test'];\n delete tempAttrs.class;\n\n return tempAttrs;\n });\n\n const internalValue = computed({\n get() {\n return props.checked;\n },\n set(value) {\n emit('update:checked', value);\n },\n });\n\n const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n <label\n :for=\"switchId\"\n :class=\"{ 'tw-pointer-events-none': props.disabled }\"\n class=\"tw-flex tw-cursor-pointer\"\n data-test=\"stash-switch|label\"\n v-bind=\"switchAttrs\"\n >\n <span\n class=\"tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]\"\n :class=\"{ [classes.active]: props.checked }\"\n >\n <span\n class=\"stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]\"\n :class=\"{\n 'tw-bg-blue-500': props.checked && !props.disabled,\n 'tw-bg-ice-700': !props.checked && !props.disabled,\n 'stash-switch__track--disabled tw-bg-ice-500': props.disabled,\n 'stash-switch__track--on': props.checked,\n 'stash-switch__track--off': !props.checked,\n }\"\n data-test=\"stash-switch|track\"\n ></span>\n <span\n class=\"stash-switch__control tw-absolute tw-left-0 tw-
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n export interface SwitchProps {\n /**\n * The current checked value, can be a boolean or an array of values\n */\n checked?: boolean | Array<string | number>;\n\n /**\n * Prevent the user from changing the switch state.\n */\n disabled?: boolean;\n\n /**\n * Displays text below the input; hidden when the isReadOnly prop is truthy.\n */\n hintText?: string;\n\n /**\n * Unique ID for the switch, required for accessibility purposes\n */\n id?: string;\n\n /**\n * Label text to display with switch\n */\n label?: string;\n\n /**\n * HTML name property\n */\n name?: string;\n\n /**\n * Value associated with switch when it is `checked`. This value is\n * used to compare against `checked` property when passed as an array.\n */\n value?: string | number;\n }\n\n defineOptions({\n name: 'll-switch',\n inheritAttrs: false,\n });\n\n const props = withDefaults(defineProps<SwitchProps>(), {\n checked: false,\n disabled: false,\n hintText: '',\n id: undefined,\n label: '',\n name: '',\n value: '',\n });\n\n const attrs = useAttrs();\n const slots = useSlots();\n const classes = useCssModule();\n\n const emit = defineEmits<{\n (e: 'update:checked', value: SwitchProps['checked']): void;\n }>();\n\n if (typeof props.value === 'boolean') {\n logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n }\n\n if (attrs.onChange) {\n throw new Error('ll-switch: use the @update:checked event instead of @change.');\n }\n\n const switchAttrs = computed(() => {\n const tempAttrs = { ...attrs };\n\n delete tempAttrs['data-test'];\n delete tempAttrs.class;\n\n return tempAttrs;\n });\n\n const internalValue = computed({\n get() {\n return props.checked;\n },\n set(value) {\n emit('update:checked', value);\n },\n });\n\n const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n <label\n :for=\"switchId\"\n :class=\"{ 'tw-pointer-events-none': props.disabled }\"\n class=\"tw-flex tw-cursor-pointer\"\n data-test=\"stash-switch|label\"\n v-bind=\"switchAttrs\"\n >\n <span\n class=\"tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]\"\n :class=\"{ [classes.active]: props.checked }\"\n >\n <span\n class=\"stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]\"\n :class=\"{\n 'tw-bg-blue-500': props.checked && !props.disabled,\n 'tw-bg-ice-700': !props.checked && !props.disabled,\n 'stash-switch__track--disabled tw-bg-ice-500': props.disabled,\n 'stash-switch__track--on': props.checked,\n 'stash-switch__track--off': !props.checked,\n }\"\n data-test=\"stash-switch|track\"\n ></span>\n <span\n class=\"stash-switch__control tw-absolute tw-left-0 tw-size-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow\"\n :class=\"[\n classes.control,\n {\n 'stash-switch__control--on': props.checked,\n 'stash-switch__control--off': !props.checked,\n 'stash-switch__control--disabled': props.disabled,\n },\n ]\"\n data-test=\"stash-switch|control\"\n ></span>\n </span>\n <input\n :id=\"switchId\"\n v-model=\"internalValue\"\n type=\"checkbox\"\n :disabled=\"props.disabled\"\n :name=\"props.name\"\n tabindex=\"0\"\n :value=\"value\"\n class=\"tw-sr-only\"\n />\n <span\n v-if=\"props.label\"\n :class=\"{\n 'tw-text-ice-900': props.checked && !props.disabled,\n 'tw-text-ice-700': !props.checked && !props.disabled,\n 'stash-switch__label-text--on': props.checked,\n 'stash-switch__label-text--off': !props.checked,\n 'stash-switch__label-text--disabled tw-text-ice-500': props.disabled,\n }\"\n class=\"stash-switch__label-text tw-relative tw-top-px tw-ml-1.5\"\n data-test=\"stash-switch|label-text\"\n >\n {{ props.label }}\n </span>\n </label>\n <span\n v-if=\"props.hintText || slots.hint\"\n class=\"stash-switch__hint tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs\"\n :class=\"{ 'stash-switch__hint--disabled tw-text-ice-500': props.disabled }\"\n data-test=\"stash-switch|hint\"\n >\n <!-- @slot for displaying hint text -->\n <slot name=\"hint\">{{ props.hintText }}</slot>\n </span>\n </div>\n</template>\n\n<style module>\n .control {\n transition: left 0.2s ease-in-out;\n\n .active & {\n @apply tw-left-3.5; /* track width - switch width */\n }\n }\n</style>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","classes","useCssModule","emit","__emit","logger","switchAttrs","computed","tempAttrs","internalValue","value","switchId","uniqueId"],"mappings":";;;;;;;;;;;;;;;;;;;AAgDE,UAAMA,IAAQC,GAURC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAOC;AAQb,QAJI,OAAOT,EAAM,SAAU,aACzBU,EAAO,KAAK,6FAA6F,GAGvGR,EAAM;AACF,YAAA,IAAI,MAAM,8DAA8D;AAG1E,UAAAS,IAAcC,EAAS,MAAM;AAC3B,YAAAC,IAAY,EAAE,GAAGX,EAAM;AAE7B,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAAA;AAAA,IAC9B,CACD,GAEKC,IAAWJ,EAAS,MAAMZ,EAAM,MAAMiB,EAAS,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Tab.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
|
|
2
|
+
import j from "@leaflink/snitch";
|
|
3
3
|
import D from "./Badge.js";
|
|
4
4
|
import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
|
|
5
5
|
import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
@@ -24,7 +24,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
|
|
|
24
24
|
}
|
|
25
25
|
const n = r(() => `tabpanel-${e.value}`);
|
|
26
26
|
k(async () => {
|
|
27
|
-
await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) &&
|
|
27
|
+
await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) && j.warn(
|
|
28
28
|
`The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
|
|
29
29
|
);
|
|
30
30
|
});
|
|
@@ -74,7 +74,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
|
|
|
74
74
|
"is-disabled": e.disabled
|
|
75
75
|
}, {
|
|
76
76
|
default: b(() => [
|
|
77
|
-
|
|
77
|
+
M(i.$slots, "default", {
|
|
78
78
|
isActive: t.value,
|
|
79
79
|
isDisabled: e.disabled,
|
|
80
80
|
variant: a(o)
|
|
@@ -89,7 +89,7 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
|
|
|
89
89
|
], 42, K));
|
|
90
90
|
}
|
|
91
91
|
}), z = {
|
|
92
|
-
"custom-shadow": "_custom-
|
|
92
|
+
"custom-shadow": "_custom-shadow_16n7s_3"
|
|
93
93
|
}, J = {
|
|
94
94
|
$style: z
|
|
95
95
|
}, Q = /* @__PURE__ */ V(S, [["__cssModules", J]]);
|
package/dist/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n import Badge from '../Badge/Badge.vue';\n import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n /**\n * Allowed attributes for the `<a>` element when the `href` prop is used.\n */\n type AnchorAttrs =\n | HTMLAnchorElement['download']\n | HTMLAnchorElement['hreflang']\n | HTMLAnchorElement['ping']\n | HTMLAnchorElement['referrerPolicy']\n | HTMLAnchorElement['rel']\n | HTMLAnchorElement['target']\n | HTMLAnchorElement['type'];\n\n export interface TabProps {\n /**\n * The tab identifier\n */\n value: string;\n\n /**\n * Router link `to` prop\n */\n to?: RouteLocationRaw;\n\n /**\n * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n */\n href?: string;\n\n /**\n * The badge's content\n */\n badge?: string | number;\n\n /**\n * Will render a plain text item if true.\n */\n disabled?: boolean;\n\n /**\n * Props for the `<a>` element when the `href` prop is used\n */\n anchorProps?: Record<AnchorAttrs, string>;\n\n /**\n * Props for the `<RouterLink>` element when the `to` prop is used\n */\n routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n }\n\n const props = defineProps<TabProps>();\n\n const classes = useCssModule();\n\n const tabsInjection = inject(TABS_INJECTION.key);\n\n if (!tabsInjection) {\n throw Error('The Tab component must be a child of the Tabs component.');\n }\n\n const { setActiveTab, activeTab, variant } = tabsInjection;\n\n const isTabActive = computed(() => {\n return props.value === activeTab.value;\n });\n\n const is = computed(() => {\n if (props.to) {\n return 'router-link';\n }\n\n if (props.href) {\n return 'a';\n }\n\n return 'button';\n });\n\n /**\n * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n */\n function onClick(tabValue: string) {\n if (props.disabled) {\n return;\n }\n\n setActiveTab(tabValue);\n }\n\n const panelId = computed(() => `tabpanel-${props.value}`);\n\n onMounted(async () => {\n await nextTick();\n\n if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n logger.warn(\n `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n );\n }\n });\n\n const dynamicComponentAttrs = computed(() => {\n if (props.to && props.routerLinkProps) {\n return toRefs(props.routerLinkProps);\n }\n\n if (props.href && props.anchorProps) {\n return toRefs(props.anchorProps);\n }\n\n return {};\n });\n</script>\n\n<template>\n <li\n :id=\"`tab-${props.value}`\"\n role=\"tab\"\n :aria-selected=\"isTabActive\"\n :aria-controls=\"panelId\"\n :aria-disabled=\"props.disabled\"\n class=\"stash-tab\"\n :class=\"[\n {\n 'stash-tab--active is-active': isTabActive,\n 'stash-tab--disabled': props.disabled,\n 'stash-tab--variant-line': variant === 'line',\n 'stash-tab--variant-enclosed': variant === 'enclosed',\n },\n ]\"\n @click=\"onClick(props.value)\"\n @keypress.enter=\"onClick(props.value)\"\n >\n <component\n v-bind=\"dynamicComponentAttrs\"\n :is=\"is\"\n :to=\"props.to\"\n :href=\"props.href\"\n class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n :class=\"[\n {\n 'tw-border-b-2': variant === 'line',\n 'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n 'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n 'focus:tw-no-underline': props.href,\n 'tw-pointer-events-none tw-text-ice-500': props.disabled,\n 'tw-text-ice-700': !props.disabled && !isTabActive,\n },\n [\n isTabActive\n ? 'tw-border-blue-500 tw-text-blue-500'\n : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n ],\n ]\"\n :tabindex=\"props.disabled ? -1 : 0\"\n >\n <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n <div class=\"tw-mt-0.5\">\n <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n </Badge>\n </div>\n </component>\n </li>\n</template>\n\n<style module>\n /* this removes the bottom shadow from the active tab */\n .custom-shadow {\n box-shadow: 0 -4px 4px
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n import Badge from '../Badge/Badge.vue';\n import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n /**\n * Allowed attributes for the `<a>` element when the `href` prop is used.\n */\n type AnchorAttrs =\n | HTMLAnchorElement['download']\n | HTMLAnchorElement['hreflang']\n | HTMLAnchorElement['ping']\n | HTMLAnchorElement['referrerPolicy']\n | HTMLAnchorElement['rel']\n | HTMLAnchorElement['target']\n | HTMLAnchorElement['type'];\n\n export interface TabProps {\n /**\n * The tab identifier\n */\n value: string;\n\n /**\n * Router link `to` prop\n */\n to?: RouteLocationRaw;\n\n /**\n * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n */\n href?: string;\n\n /**\n * The badge's content\n */\n badge?: string | number;\n\n /**\n * Will render a plain text item if true.\n */\n disabled?: boolean;\n\n /**\n * Props for the `<a>` element when the `href` prop is used\n */\n anchorProps?: Record<AnchorAttrs, string>;\n\n /**\n * Props for the `<RouterLink>` element when the `to` prop is used\n */\n routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n }\n\n const props = defineProps<TabProps>();\n\n const classes = useCssModule();\n\n const tabsInjection = inject(TABS_INJECTION.key);\n\n if (!tabsInjection) {\n throw Error('The Tab component must be a child of the Tabs component.');\n }\n\n const { setActiveTab, activeTab, variant } = tabsInjection;\n\n const isTabActive = computed(() => {\n return props.value === activeTab.value;\n });\n\n const is = computed(() => {\n if (props.to) {\n return 'router-link';\n }\n\n if (props.href) {\n return 'a';\n }\n\n return 'button';\n });\n\n /**\n * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n */\n function onClick(tabValue: string) {\n if (props.disabled) {\n return;\n }\n\n setActiveTab(tabValue);\n }\n\n const panelId = computed(() => `tabpanel-${props.value}`);\n\n onMounted(async () => {\n await nextTick();\n\n if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n logger.warn(\n `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n );\n }\n });\n\n const dynamicComponentAttrs = computed(() => {\n if (props.to && props.routerLinkProps) {\n return toRefs(props.routerLinkProps);\n }\n\n if (props.href && props.anchorProps) {\n return toRefs(props.anchorProps);\n }\n\n return {};\n });\n</script>\n\n<template>\n <li\n :id=\"`tab-${props.value}`\"\n role=\"tab\"\n :aria-selected=\"isTabActive\"\n :aria-controls=\"panelId\"\n :aria-disabled=\"props.disabled\"\n class=\"stash-tab\"\n :class=\"[\n {\n 'stash-tab--active is-active': isTabActive,\n 'stash-tab--disabled': props.disabled,\n 'stash-tab--variant-line': variant === 'line',\n 'stash-tab--variant-enclosed': variant === 'enclosed',\n },\n ]\"\n @click=\"onClick(props.value)\"\n @keypress.enter=\"onClick(props.value)\"\n >\n <component\n v-bind=\"dynamicComponentAttrs\"\n :is=\"is\"\n :to=\"props.to\"\n :href=\"props.href\"\n class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n :class=\"[\n {\n 'tw-border-b-2': variant === 'line',\n 'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n 'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n 'focus:tw-no-underline': props.href,\n 'tw-pointer-events-none tw-text-ice-500': props.disabled,\n 'tw-text-ice-700': !props.disabled && !isTabActive,\n },\n [\n isTabActive\n ? 'tw-border-blue-500 tw-text-blue-500'\n : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n ],\n ]\"\n :tabindex=\"props.disabled ? -1 : 0\"\n >\n <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n <div class=\"tw-mt-0.5\">\n <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n </Badge>\n </div>\n </component>\n </li>\n</template>\n\n<style module>\n /* this removes the bottom shadow from the active tab */\n .custom-shadow {\n box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAa,GAEvBC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAY,IAAAL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IAAA;AAGvB,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MACrM;AAAA,IACF,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAC,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/TableCell.js
CHANGED
|
@@ -3,7 +3,7 @@ import "lodash-es/cloneDeep";
|
|
|
3
3
|
import "lodash-es/get";
|
|
4
4
|
import "lodash-es/uniqueId";
|
|
5
5
|
import "./DataView.keys-aSOnA4AD.js";
|
|
6
|
-
import "./Illustration.vue_vue_type_script_setup_true_lang-
|
|
6
|
+
import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
|
|
7
7
|
import "@leaflink/snitch";
|
|
8
8
|
import { T as w } from "./Table.keys-LHQf6FEH.js";
|
|
9
9
|
import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
package/dist/TableHeaderCell.js
CHANGED
|
@@ -3,7 +3,7 @@ import "lodash-es/cloneDeep";
|
|
|
3
3
|
import "lodash-es/get";
|
|
4
4
|
import f from "./Icon.js";
|
|
5
5
|
import { D as b } from "./DataView.keys-aSOnA4AD.js";
|
|
6
|
-
import "./Illustration.vue_vue_type_script_setup_true_lang-
|
|
6
|
+
import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
|
|
7
7
|
import "lodash-es/uniqueId";
|
|
8
8
|
import "@leaflink/snitch";
|
|
9
9
|
import { T as N } from "./Table.keys-LHQf6FEH.js";
|
package/dist/TableHeaderRow.js
CHANGED
|
@@ -4,7 +4,7 @@ import v from "./Checkbox.js";
|
|
|
4
4
|
import { D as w } from "./DataView.keys-aSOnA4AD.js";
|
|
5
5
|
import "lodash-es/cloneDeep";
|
|
6
6
|
import "lodash-es/uniqueId";
|
|
7
|
-
import "./Illustration.vue_vue_type_script_setup_true_lang-
|
|
7
|
+
import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
|
|
8
8
|
import { T as N } from "./Table.keys-LHQf6FEH.js";
|
|
9
9
|
import h from "./TableHeaderCell.js";
|
|
10
10
|
import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
package/dist/TableRow.js
CHANGED
|
@@ -6,7 +6,7 @@ import { _ as U } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_q
|
|
|
6
6
|
import { _ as G } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
|
|
7
7
|
import "lodash-es/cloneDeep";
|
|
8
8
|
import "./DataView.keys-aSOnA4AD.js";
|
|
9
|
-
import "./Illustration.vue_vue_type_script_setup_true_lang-
|
|
9
|
+
import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
|
|
10
10
|
import y from "./TableCell.js";
|
|
11
11
|
import { T as H } from "./Table.keys-LHQf6FEH.js";
|
|
12
12
|
import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
package/dist/TextEditor.vue.d.ts
CHANGED
|
@@ -118,7 +118,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
118
118
|
*
|
|
119
119
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
120
120
|
*/
|
|
121
|
-
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", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
121
|
+
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", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "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", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "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", "reorder", "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", "start", "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-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
122
122
|
|
|
123
123
|
declare const TEXT_EDITOR_ALLOWED_CONTROLS: readonly ["bold", "italic", "underline", "link", "divider", "list"];
|
|
124
124
|
|