@leaflink/stash 42.4.4 → 42.5.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/README.md +3 -0
- package/dist/Alert.js +57 -54
- package/dist/Alert.js.map +1 -1
- package/dist/DatePicker.js +2631 -2578
- package/dist/DatePicker.js.map +1 -1
- package/dist/DatePicker.vue.d.ts +19 -0
- package/dist/Metric.js +43 -43
- package/dist/Metric.js.map +1 -1
- package/dist/Metric.vue.d.ts +24 -15
- package/dist/components.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -266,6 +266,9 @@ These peer dependencies need to be installed separately by the consumer of the p
|
|
|
266
266
|
|
|
267
267
|
## Testing
|
|
268
268
|
|
|
269
|
+
> [!TIP]
|
|
270
|
+
> If you are contributing to `@leaflink/stash`, please refer to this contributing [testing](CONTRIBUTING.md#testing) section for more details on how to properly test your changes.
|
|
271
|
+
|
|
269
272
|
To run tests, there's multiple npm scripts available to you:
|
|
270
273
|
|
|
271
274
|
* `npm run test` - Run all tests in watch mode.
|
package/dist/Alert.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { c as
|
|
3
|
-
import {
|
|
4
|
-
import N from "./
|
|
5
|
-
import
|
|
1
|
+
import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as B, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as w, unref as t, createElementVNode as f, renderSlot as m, createCommentVNode as o } from "vue";
|
|
2
|
+
import { c as y } from "./capitalize-667d9f60.js";
|
|
3
|
+
import { u as S } from "./uniqueId-847efe53.js";
|
|
4
|
+
import { b as M, a as N } from "./statusLevels-2c64f4f8.js";
|
|
5
|
+
import V from "./sticky.js";
|
|
6
|
+
import p from "./Icon.js";
|
|
6
7
|
import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
|
|
7
8
|
import "./toString-7d5bf363.js";
|
|
8
9
|
import "./isObjectLike-54341556.js";
|
|
9
10
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
|
|
10
|
-
import "./uniqueId-847efe53.js";
|
|
11
11
|
import "./index-79ce320f.js";
|
|
12
|
-
const z = { class: "tw-m-0" }, A = /* @__PURE__ */
|
|
12
|
+
const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
|
|
13
13
|
name: "ll-alert",
|
|
14
14
|
__name: "Alert",
|
|
15
15
|
props: {
|
|
@@ -20,75 +20,78 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ $({
|
|
|
20
20
|
sticky: { default: null },
|
|
21
21
|
variant: { default: "outlined" }
|
|
22
22
|
},
|
|
23
|
-
setup(
|
|
24
|
-
const e =
|
|
25
|
-
return (d,
|
|
23
|
+
setup(b) {
|
|
24
|
+
const e = b, g = S("close-icon"), _ = $(), a = C(), c = I(!0), u = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
|
|
25
|
+
return (d, v) => c.value ? B((i(), l("div", {
|
|
26
26
|
key: 0,
|
|
27
|
-
class:
|
|
27
|
+
class: r(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid", [
|
|
28
|
+
`stash-alert--${e.severity}`,
|
|
29
|
+
`stash-alert--${e.variant}`,
|
|
30
|
+
n.value,
|
|
28
31
|
{
|
|
32
|
+
"tw-my-6": e.variant === "outlined",
|
|
29
33
|
// Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.
|
|
30
|
-
"tw-
|
|
31
|
-
"tw-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
"tw-rounded": e.radius === "standard",
|
|
35
|
+
"tw-border-red": e.severity === "error",
|
|
36
|
+
"tw-border-orange": e.severity === "warning",
|
|
37
|
+
"tw-border-blue": e.severity === "info",
|
|
38
|
+
"tw-border-green": e.severity === "success",
|
|
39
|
+
"tw-bg-red": e.severity === "error" && e.variant === "filled",
|
|
40
|
+
"tw-bg-orange": e.severity === "warning" && e.variant === "filled",
|
|
41
|
+
"tw-bg-blue": e.severity === "info" && e.variant === "filled",
|
|
42
|
+
"tw-bg-green": e.severity === "success" && e.variant === "filled",
|
|
43
|
+
"tw-bg-red-100": e.severity === "error" && e.variant === "outlined",
|
|
44
|
+
"tw-bg-orange-100": e.severity === "warning" && e.variant === "outlined",
|
|
45
|
+
"tw-bg-blue-100": e.severity === "info" && e.variant === "outlined",
|
|
46
|
+
"tw-bg-green-100": e.severity === "success" && e.variant === "outlined"
|
|
47
|
+
}
|
|
35
48
|
]]),
|
|
36
49
|
"data-test": "stash-alert"
|
|
37
50
|
}, [
|
|
38
|
-
|
|
39
|
-
class:
|
|
40
|
-
name:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
w(p, {
|
|
52
|
+
class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${u.value}`]]),
|
|
53
|
+
name: u.value,
|
|
54
|
+
title: `${e.severity} icon`,
|
|
55
|
+
"data-test": "stash-alert|status-icon"
|
|
56
|
+
}, null, 8, ["class", "name", "title"]),
|
|
57
|
+
f("div", {
|
|
58
|
+
class: r(["tw-flex tw-flex-1 tw-px-2 tw-flex-wrap", {
|
|
45
59
|
"tw-justify-center": e.centered,
|
|
46
60
|
"tw-justify-between": !e.centered
|
|
47
61
|
}])
|
|
48
62
|
}, [
|
|
49
|
-
|
|
50
|
-
|
|
63
|
+
f("p", z, [
|
|
64
|
+
m(d.$slots, "default")
|
|
51
65
|
]),
|
|
52
|
-
|
|
66
|
+
t(_).link ? (i(), l("div", {
|
|
53
67
|
key: 0,
|
|
54
|
-
class:
|
|
55
|
-
s(o).link,
|
|
56
|
-
{
|
|
57
|
-
"tw-ml-2": e.centered
|
|
58
|
-
}
|
|
59
|
-
]]),
|
|
68
|
+
class: r(["stash-alert__link tw-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
|
|
60
69
|
"data-test": "stash-alert|link"
|
|
61
70
|
}, [
|
|
62
|
-
|
|
63
|
-
], 2)) :
|
|
71
|
+
m(d.$slots, "link")
|
|
72
|
+
], 2)) : o("", !0)
|
|
64
73
|
], 2),
|
|
65
|
-
e.permanent ?
|
|
74
|
+
e.permanent ? o("", !0) : (i(), l("button", {
|
|
66
75
|
key: 0,
|
|
67
|
-
class:
|
|
76
|
+
class: r(["stash-alert__close", [t(a).button, n.value]]),
|
|
68
77
|
type: "button",
|
|
69
78
|
"data-test": "stash-alert|close",
|
|
70
|
-
onClick:
|
|
79
|
+
onClick: v[0] || (v[0] = (q) => c.value = !1)
|
|
71
80
|
}, [
|
|
72
|
-
|
|
81
|
+
w(p, {
|
|
82
|
+
id: t(g),
|
|
83
|
+
name: "close",
|
|
84
|
+
title: "Dismiss alert"
|
|
85
|
+
}, null, 8, ["id"])
|
|
73
86
|
], 2))
|
|
74
87
|
], 2)), [
|
|
75
|
-
[
|
|
76
|
-
]) :
|
|
88
|
+
[t(V), e.sticky]
|
|
89
|
+
]) : o("", !0);
|
|
77
90
|
}
|
|
78
|
-
}),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
info: F,
|
|
82
|
-
success: q,
|
|
83
|
-
link: G,
|
|
84
|
-
"filled-error": "_filled-error_12xko_31",
|
|
85
|
-
"filled-info": "_filled-info_12xko_40",
|
|
86
|
-
"filled-warning": "_filled-warning_12xko_64",
|
|
87
|
-
"filled-success": "_filled-success_12xko_68"
|
|
88
|
-
}, J = {
|
|
89
|
-
$style: H
|
|
90
|
-
}, ee = /* @__PURE__ */ j(A, [["__cssModules", J]]);
|
|
91
|
+
}), D = {}, E = {
|
|
92
|
+
$style: D
|
|
93
|
+
}, U = /* @__PURE__ */ j(A, [["__cssModules", E]]);
|
|
91
94
|
export {
|
|
92
|
-
|
|
95
|
+
U as default
|
|
93
96
|
};
|
|
94
97
|
//# sourceMappingURL=Alert.js.map
|
package/dist/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import capitalize from 'lodash-es/capitalize';\n import { computed, ref, useCssModule, useSlots } from 'vue';\n\n import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n import vSticky from '../../directives/sticky/sticky';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-alert',\n });\n\n export interface AlertProps {\n /**\n * Determines if the alert is centered\n */\n centered?: boolean;\n\n /**\n * Determines if the alert is permanent (doesn't have a close button).\n */\n permanent?: boolean;\n\n /**\n * The type of border radius to use. Available types:\n *\n * - `none` - no border radius\n * - `standard` - 4px border radius\n */\n radius?: 'none' | 'standard';\n\n /**\n * The type of alert. Available types:\n *\n * - `info`\n * - `success`\n * - `warning`\n * - `error`\n */\n severity?: StatusSeverity;\n\n /**\n * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n */\n sticky?: number | null;\n\n /**\n * The variant of alert. Available variants:\n *\n * - `filled` - previously alert component\n * - `outlined` - previously banner component\n */\n variant?: 'outlined' | 'filled';\n }\n\n const props = withDefaults(defineProps<AlertProps>(), {\n centered: false,\n permanent: false,\n radius: 'standard',\n severity: 'info',\n sticky: null,\n variant: 'outlined',\n });\n\n const slots = useSlots();\n const classes = useCssModule();\n const show = ref(true);\n const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n const
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import capitalize from 'lodash-es/capitalize';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref, useCssModule, useSlots } from 'vue';\n\n import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n import vSticky from '../../directives/sticky/sticky';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-alert',\n });\n\n export interface AlertProps {\n /**\n * Determines if the alert is centered\n */\n centered?: boolean;\n\n /**\n * Determines if the alert is permanent (doesn't have a close button).\n */\n permanent?: boolean;\n\n /**\n * The type of border radius to use. Available types:\n *\n * - `none` - no border radius\n * - `standard` - 4px border radius\n */\n radius?: 'none' | 'standard';\n\n /**\n * The type of alert. Available types:\n *\n * - `info`\n * - `success`\n * - `warning`\n * - `error`\n */\n severity?: StatusSeverity;\n\n /**\n * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n */\n sticky?: number | null;\n\n /**\n * The variant of alert. Available variants:\n *\n * - `filled` - previously alert component\n * - `outlined` - previously banner component\n */\n variant?: 'outlined' | 'filled';\n }\n\n const props = withDefaults(defineProps<AlertProps>(), {\n centered: false,\n permanent: false,\n radius: 'standard',\n severity: 'info',\n sticky: null,\n variant: 'outlined',\n });\n\n const iconId = uniqueId('close-icon');\n const slots = useSlots();\n const classes = useCssModule();\n const show = ref(true);\n const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n const iconColor = computed<string>(() => {\n if (props.variant === 'filled' && ['warning', 'success'].includes(props.severity)) {\n return 'tw-text-ice-900';\n }\n\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return `tw-text-${color.value}`;\n });\n\n const computedTextColor = computed<string>(() => {\n if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return 'tw-text-ice-900';\n });\n</script>\n\n<template>\n <div\n v-if=\"show\"\n v-sticky=\"props.sticky\"\n class=\"stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid\"\n :class=\"[\n `stash-alert--${props.severity}`,\n `stash-alert--${props.variant}`,\n computedTextColor,\n {\n 'tw-my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n 'tw-rounded': props.radius === 'standard',\n 'tw-border-red': props.severity === 'error',\n 'tw-border-orange': props.severity === 'warning',\n 'tw-border-blue': props.severity === 'info',\n 'tw-border-green': props.severity === 'success',\n 'tw-bg-red': props.severity === 'error' && props.variant === 'filled',\n 'tw-bg-orange': props.severity === 'warning' && props.variant === 'filled',\n 'tw-bg-blue': props.severity === 'info' && props.variant === 'filled',\n 'tw-bg-green': props.severity === 'success' && props.variant === 'filled',\n 'tw-bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n 'tw-bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n 'tw-bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n 'tw-bg-green-100': props.severity === 'success' && props.variant === 'outlined',\n },\n ]\"\n data-test=\"stash-alert\"\n >\n <Icon\n class=\"stash-alert__icon\"\n :class=\"[classes.iconInfo, iconColor, `stash-alert__icon--${icon}`]\"\n :name=\"icon\"\n :title=\"`${props.severity} icon`\"\n data-test=\"stash-alert|status-icon\"\n />\n\n <!-- Alert text elements -->\n <div\n class=\"tw-flex tw-flex-1 tw-px-2 tw-flex-wrap\"\n :class=\"{\n 'tw-justify-center': props.centered,\n 'tw-justify-between': !props.centered,\n }\"\n >\n <p class=\"tw-m-0\">\n <slot></slot>\n </p>\n\n <div\n v-if=\"slots.link\"\n class=\"stash-alert__link tw-pointer tw-underline hover:tw-no-underline\"\n :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n data-test=\"stash-alert|link\"\n >\n <slot name=\"link\"></slot>\n </div>\n </div>\n\n <button\n v-if=\"!props.permanent\"\n class=\"stash-alert__close\"\n :class=\"[classes.button, computedTextColor]\"\n type=\"button\"\n data-test=\"stash-alert|close\"\n @click=\"show = false\"\n >\n <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n </button>\n </div>\n</template>\n\n<style module>\n :global(.stash-alert__link) {\n a,\n button {\n color: theme('colors.ice.900');\n cursor: pointer;\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n :global(.stash-alert--filled.stash-alert--error),\n :global(.stash-alert--filled.stash-alert--info) {\n :global(.stash-alert__link) a,\n :global(.stash-alert__link) button {\n color: theme('colors.white');\n }\n }\n</style>\n"],"names":["iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","props","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAiEQA,IAASC,EAAS,YAAY,GAC9BC,IAAQC,KACRC,IAAUC,KACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWC,EAAM,QAAQ,CAAC,CAAC,GACzEC,IAAQJ,EAAsB,MAAMK,EAAaH,EAAWC,EAAM,QAAQ,CAAC,CAAC,GAE5EG,IAAYN,EAAiB,MAC7BG,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,oBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,WAAWC,EAAM,KAAK,EAC9B,GAEKG,IAAoBP,EAAiB,MACrCG,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,iBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|