@leaflink/stash 51.1.0 → 51.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { defineComponent as m, computed as s, createElementBlock as w, openBlock as n, createElementVNode as e, createBlock as h, renderSlot as p, resolveDynamicComponent as u, mergeProps as _, withCtx as f, toDisplayString as v, createVNode as x } from "vue";
|
|
2
|
+
import b from "./Icon.js";
|
|
3
|
+
const g = { class: "stash-section-header" }, k = {
|
|
4
|
+
class: "stash-section-header__content tw-flex-wrap tw-items-center tw-justify-between tw-px-6 tw-py-3 md:tw-flex",
|
|
5
|
+
"data-test": "stash-section-header|content"
|
|
6
|
+
}, y = { "data-test": "stash-section-header|title" }, C = { class: "stash-section-header__action-label tw-m-0 tw-text-ice-900" }, E = { class: "stash-section-header__action-icon tw-size-6 tw-items-center tw-rounded-full tw-bg-ice-200 tw-p-[2px] tw-text-ice-900" }, S = /* @__PURE__ */ m({
|
|
7
|
+
__name: "SectionHeader",
|
|
8
|
+
props: {
|
|
9
|
+
actionLabel: { default: "View All" },
|
|
10
|
+
actionIcon: { default: "arrow-right" },
|
|
11
|
+
to: { default: void 0 }
|
|
12
|
+
},
|
|
13
|
+
emits: ["actionEvent"],
|
|
14
|
+
setup(a, { emit: i }) {
|
|
15
|
+
const t = a, c = i, r = s(() => t.to ? "router-link" : "button"), l = s(() => t.to ? {
|
|
16
|
+
to: t.to
|
|
17
|
+
} : {});
|
|
18
|
+
return (d, o) => (n(), w("div", g, [
|
|
19
|
+
e("div", k, [
|
|
20
|
+
e("div", y, [
|
|
21
|
+
e("h2", null, [
|
|
22
|
+
p(d.$slots, "default")
|
|
23
|
+
])
|
|
24
|
+
]),
|
|
25
|
+
(n(), h(u(r.value), _(l.value, {
|
|
26
|
+
"data-test": "stash-section-header|action",
|
|
27
|
+
class: "stash-section-header__action tw-flex tw-items-center tw-gap-3 max-md:tw-pt-3",
|
|
28
|
+
onClick: o[0] || (o[0] = () => {
|
|
29
|
+
t.to || c("actionEvent");
|
|
30
|
+
})
|
|
31
|
+
}), {
|
|
32
|
+
default: f(() => [
|
|
33
|
+
e("span", C, v(t.actionLabel), 1),
|
|
34
|
+
e("span", E, [
|
|
35
|
+
x(b, {
|
|
36
|
+
name: t.actionIcon,
|
|
37
|
+
size: "dense"
|
|
38
|
+
}, null, 8, ["name"])
|
|
39
|
+
])
|
|
40
|
+
]),
|
|
41
|
+
_: 1
|
|
42
|
+
}, 16))
|
|
43
|
+
]),
|
|
44
|
+
o[1] || (o[1] = e("div", { class: "stash-section-header__divider tw-h-px tw-bg-ice-200" }, null, -1))
|
|
45
|
+
]));
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
export {
|
|
49
|
+
S as default
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=SectionHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SectionHeader.js","sources":["../src/components/SectionHeader/SectionHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { RouteLocationRaw } from 'vue-router';\n\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n interface SectionHeaderProps {\n /**\n * The text label for the action button\n */\n actionLabel?: string;\n /**\n * The icon name for the action button\n */\n actionIcon?: IconName;\n /**\n * If the action button should be a router link, this is where it will link to.\n */\n to?: RouteLocationRaw;\n }\n\n const props = withDefaults(defineProps<SectionHeaderProps>(), {\n actionLabel: 'View All',\n actionIcon: 'arrow-right',\n to: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the action button is clicked. Not emitted if the action button is a router link.\n */\n actionEvent: [];\n }>();\n\n const is = computed(() => {\n if (props.to) {\n return 'router-link';\n }\n\n return 'button';\n });\n const actionRootAttrs = computed(() => {\n if (props.to) {\n return {\n to: props.to,\n };\n }\n return {};\n });\n</script>\n<template>\n <div class=\"stash-section-header\">\n <div\n class=\"stash-section-header__content tw-flex-wrap tw-items-center tw-justify-between tw-px-6 tw-py-3 md:tw-flex\"\n data-test=\"stash-section-header|content\"\n >\n <div data-test=\"stash-section-header|title\">\n <h2>\n <!-- @slot Header content -->\n <slot></slot>\n </h2>\n </div>\n <component\n :is=\"is\"\n v-bind=\"actionRootAttrs\"\n data-test=\"stash-section-header|action\"\n class=\"stash-section-header__action tw-flex tw-items-center tw-gap-3 max-md:tw-pt-3\"\n @click=\"\n () => {\n if (!props.to) {\n emit('actionEvent');\n }\n }\n \"\n >\n <span class=\"stash-section-header__action-label tw-m-0 tw-text-ice-900\">\n {{ props.actionLabel }}\n </span>\n\n <span\n class=\"stash-section-header__action-icon tw-size-6 tw-items-center tw-rounded-full tw-bg-ice-200 tw-p-[2px] tw-text-ice-900\"\n >\n <Icon :name=\"props.actionIcon\" size=\"dense\" />\n </span>\n </component>\n </div>\n <div class=\"stash-section-header__divider tw-h-px tw-bg-ice-200\" />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","is","computed","actionRootAttrs"],"mappings":";;;;;;;;;;;;;;AAsBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGF,QACR,GACKM,IAAkBD,EAAS,MAC3BL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IACZ,IAEK,CAAC,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { ComponentOptionsMixin } from 'vue';
|
|
2
|
+
import { ComponentProvideOptions } from 'vue';
|
|
3
|
+
import { DefineComponent } from 'vue';
|
|
4
|
+
import { ExtractPropTypes } from 'vue';
|
|
5
|
+
import { PropType } from 'vue';
|
|
6
|
+
import { PublicProps } from 'vue';
|
|
7
|
+
import { RouteLocationAsPathGeneric } from 'vue-router';
|
|
8
|
+
import { RouteLocationAsRelativeGeneric } from 'vue-router';
|
|
9
|
+
import { RouteLocationRaw } from 'vue-router';
|
|
10
|
+
|
|
11
|
+
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
12
|
+
|
|
13
|
+
declare type __VLS_Prettify<T> = {
|
|
14
|
+
[K in keyof T]: T[K];
|
|
15
|
+
} & {};
|
|
16
|
+
|
|
17
|
+
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
18
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
19
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
20
|
+
} : {
|
|
21
|
+
type: PropType<T[K]>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare type __VLS_WithDefaults<P, D> = {
|
|
27
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
28
|
+
default: D[K];
|
|
29
|
+
}> : P[K];
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
33
|
+
new (): {
|
|
34
|
+
$slots: S;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SectionHeaderProps>, {
|
|
39
|
+
actionLabel: string;
|
|
40
|
+
actionIcon: string;
|
|
41
|
+
to: undefined;
|
|
42
|
+
}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
43
|
+
actionEvent: () => void;
|
|
44
|
+
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SectionHeaderProps>, {
|
|
45
|
+
actionLabel: string;
|
|
46
|
+
actionIcon: string;
|
|
47
|
+
to: undefined;
|
|
48
|
+
}>>> & Readonly<{
|
|
49
|
+
onActionEvent?: (() => any) | undefined;
|
|
50
|
+
}>, {
|
|
51
|
+
to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
|
|
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";
|
|
54
|
+
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
55
|
+
default?(_: {}): any;
|
|
56
|
+
}>;
|
|
57
|
+
export default _default;
|
|
58
|
+
|
|
59
|
+
declare type IconName = (typeof iconNames)[number];
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* To add a new icon, follow these steps:
|
|
63
|
+
*
|
|
64
|
+
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
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"];
|
|
67
|
+
|
|
68
|
+
declare interface SectionHeaderProps {
|
|
69
|
+
/**
|
|
70
|
+
* The text label for the action button
|
|
71
|
+
*/
|
|
72
|
+
actionLabel?: string;
|
|
73
|
+
/**
|
|
74
|
+
* The icon name for the action button
|
|
75
|
+
*/
|
|
76
|
+
actionIcon?: IconName;
|
|
77
|
+
/**
|
|
78
|
+
* If the action button should be a router link, this is where it will link to.
|
|
79
|
+
*/
|
|
80
|
+
to?: RouteLocationRaw;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export { }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leaflink/stash",
|
|
3
|
-
"version": "51.1.
|
|
3
|
+
"version": "51.1.1",
|
|
4
4
|
"description": "LeafLink's design system.",
|
|
5
5
|
"homepage": "https://stash.leaflink.com",
|
|
6
6
|
"main": "./dist/index.ts",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"url": "https://github.com/LeafLink/stash/issues"
|
|
63
63
|
},
|
|
64
64
|
"engines": {
|
|
65
|
-
"node": "^22 || ^20 || ^18"
|
|
65
|
+
"node": "^24 || ^22 || ^20 || ^18"
|
|
66
66
|
},
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|