@leaflink/stash 42.4.0 → 42.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Alert.js +58 -55
- package/dist/Alert.js.map +1 -1
- package/dist/Alert.vue.d.ts +16 -15
- package/dist/Avatar.js +31 -29
- package/dist/Avatar.js.map +1 -1
- package/dist/Avatar.vue.d.ts +131 -24
- package/dist/Chip.js +9 -8
- package/dist/Chip.js.map +1 -1
- package/dist/Chip.vue.d.ts +126 -19
- package/dist/Dialog.vue.d.ts +1 -1
- package/dist/Dropdown.js +2 -2
- package/dist/Dropdown.js.map +1 -1
- package/dist/FilterChip.js +23 -23
- package/dist/FilterChip.js.map +1 -1
- package/dist/Modal.js +12 -12
- package/dist/Modal.js.map +1 -1
- package/dist/components.css +1 -1
- package/package.json +1 -1
package/dist/Alert.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { defineComponent as b,
|
|
2
|
-
import { c as
|
|
3
|
-
import { b as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { _ as
|
|
1
|
+
import { defineComponent as $, useSlots as b, useCssModule as B, ref as S, computed as t, withDirectives as V, openBlock as n, createElementBlock as a, normalizeClass as l, unref as s, createVNode as _, createElementVNode as m, renderSlot as w, createCommentVNode as i } from "vue";
|
|
2
|
+
import { c as p } from "./capitalize-667d9f60.js";
|
|
3
|
+
import { b as I, a as M } from "./statusLevels-2c64f4f8.js";
|
|
4
|
+
import N from "./sticky.js";
|
|
5
|
+
import v from "./Icon.js";
|
|
6
|
+
import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
|
|
7
7
|
import "./toString-7d5bf363.js";
|
|
8
8
|
import "./isObjectLike-54341556.js";
|
|
9
9
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
|
|
10
10
|
import "./uniqueId-847efe53.js";
|
|
11
11
|
import "./index-79ce320f.js";
|
|
12
|
-
const z = /* @__PURE__ */
|
|
12
|
+
const z = { class: "tw-m-0" }, A = /* @__PURE__ */ $({
|
|
13
13
|
name: "ll-alert",
|
|
14
14
|
__name: "Alert",
|
|
15
15
|
props: {
|
|
@@ -21,71 +21,74 @@ const z = /* @__PURE__ */ b({
|
|
|
21
21
|
variant: { default: "outlined" }
|
|
22
22
|
},
|
|
23
23
|
setup(k) {
|
|
24
|
-
const e = k,
|
|
25
|
-
return (
|
|
24
|
+
const e = k, y = b(), o = B(), c = S(!0), x = t(() => I[p(e.severity)]), h = t(() => M[p(e.severity)]), r = t(() => e.variant === "filled"), C = t(() => r.value && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : r.value && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), u = t(() => r.value && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900"), g = t(() => r.value ? `filled-${e.severity}` : e.severity);
|
|
25
|
+
return (d, f) => c.value ? V((n(), a("div", {
|
|
26
26
|
key: 0,
|
|
27
|
-
class: l(["stash-alert
|
|
27
|
+
class: l(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6", [
|
|
28
28
|
{
|
|
29
|
-
|
|
29
|
+
// Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.
|
|
30
|
+
"tw-my-6": !r.value,
|
|
30
31
|
"tw-rounded": e.radius === "standard"
|
|
31
32
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
f.value
|
|
33
|
+
s(o)[g.value],
|
|
34
|
+
u.value
|
|
35
35
|
]]),
|
|
36
36
|
"data-test": "stash-alert"
|
|
37
37
|
}, [
|
|
38
|
-
v
|
|
39
|
-
class: l([
|
|
40
|
-
name:
|
|
38
|
+
_(v, {
|
|
39
|
+
class: l(["stash-alert__icon", [s(o).iconInfo, C.value]]),
|
|
40
|
+
name: x.value,
|
|
41
|
+
"data-test": "stash-alert|icon"
|
|
41
42
|
}, null, 8, ["class", "name"]),
|
|
42
|
-
|
|
43
|
-
class: l(["tw-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
t.$style.content
|
|
49
|
-
]])
|
|
43
|
+
m("div", {
|
|
44
|
+
class: l(["tw-flex tw-flex-1 tw-px-2 tw-flex-wrap", {
|
|
45
|
+
"tw-justify-center": e.centered,
|
|
46
|
+
"tw-justify-between": !e.centered
|
|
47
|
+
}])
|
|
50
48
|
}, [
|
|
51
|
-
|
|
49
|
+
m("p", z, [
|
|
50
|
+
w(d.$slots, "default")
|
|
51
|
+
]),
|
|
52
|
+
s(y).link ? (n(), a("div", {
|
|
53
|
+
key: 0,
|
|
54
|
+
class: l(["stash-alert__link", [
|
|
55
|
+
s(o).link,
|
|
56
|
+
{
|
|
57
|
+
"tw-ml-2": e.centered
|
|
58
|
+
}
|
|
59
|
+
]]),
|
|
60
|
+
"data-test": "stash-alert|link"
|
|
61
|
+
}, [
|
|
62
|
+
w(d.$slots, "link")
|
|
63
|
+
], 2)) : i("", !0)
|
|
52
64
|
], 2),
|
|
53
|
-
i(
|
|
65
|
+
e.permanent ? i("", !0) : (n(), a("button", {
|
|
54
66
|
key: 0,
|
|
55
|
-
class: l(
|
|
56
|
-
}, [
|
|
57
|
-
_(t.$slots, "link")
|
|
58
|
-
], 2)) : a("", !0),
|
|
59
|
-
e.permanent ? a("", !0) : (r(), o("button", {
|
|
60
|
-
key: 1,
|
|
61
|
-
class: l([t.$style.button, f.value]),
|
|
67
|
+
class: l(["stash-alert__close", [s(o).button, u.value]]),
|
|
62
68
|
type: "button",
|
|
63
|
-
|
|
69
|
+
"data-test": "stash-alert|close",
|
|
70
|
+
onClick: f[0] || (f[0] = (K) => c.value = !1)
|
|
64
71
|
}, [
|
|
65
|
-
v
|
|
72
|
+
_(v, { name: "close" })
|
|
66
73
|
], 2))
|
|
67
74
|
], 2)), [
|
|
68
|
-
[
|
|
69
|
-
]) :
|
|
75
|
+
[s(N), e.sticky]
|
|
76
|
+
]) : i("", !0);
|
|
70
77
|
}
|
|
71
|
-
}),
|
|
72
|
-
alert: A,
|
|
78
|
+
}), E = "_error_12xko_2", D = "_warning_12xko_6", F = "_info_12xko_10", q = "_success_12xko_14", G = "_link_12xko_18", H = {
|
|
73
79
|
error: E,
|
|
74
|
-
warning:
|
|
75
|
-
info:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
"filled-
|
|
79
|
-
"filled-
|
|
80
|
-
"filled-
|
|
81
|
-
success:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, K = {
|
|
86
|
-
$style: J
|
|
87
|
-
}, te = /* @__PURE__ */ N(z, [["__cssModules", K]]);
|
|
80
|
+
warning: D,
|
|
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]]);
|
|
88
91
|
export {
|
|
89
|
-
|
|
92
|
+
ee as default
|
|
90
93
|
};
|
|
91
94
|
//# 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, 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 (
|
|
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 isFilledVariant = computed<boolean>(() => {\n return props.variant === 'filled';\n });\n\n const iconColor = computed<string>(() => {\n if (isFilledVariant.value && ['warning', 'success'].includes(props.severity)) {\n return 'tw-text-ice-900';\n }\n\n if (isFilledVariant.value && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return `tw-text-${color.value}`;\n });\n\n const textColor = computed<string>(() => {\n if (isFilledVariant.value && ['info', 'error'].includes(props.severity)) {\n return 'tw-text-white';\n }\n\n return 'tw-text-ice-900';\n });\n\n const variantClass = computed<string>(() => {\n return isFilledVariant.value ? `filled-${props.severity}` : props.severity;\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\"\n :class=\"[\n {\n // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n 'tw-my-6': !isFilledVariant,\n 'tw-rounded': props.radius === 'standard',\n },\n classes[variantClass],\n textColor,\n ]\"\n data-test=\"stash-alert\"\n >\n <Icon class=\"stash-alert__icon\" :class=\"[classes.iconInfo, iconColor]\" :name=\"icon\" data-test=\"stash-alert|icon\" />\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\"\n :class=\"[\n classes.link,\n {\n 'tw-ml-2': props.centered,\n },\n ]\"\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, textColor]\"\n type=\"button\"\n data-test=\"stash-alert|close\"\n @click=\"show = false\"\n >\n <Icon name=\"close\" />\n </button>\n </div>\n</template>\n\n<style module>\n .error {\n @apply tw-bg-red-100 tw-border tw-border-solid tw-border-red;\n }\n\n .warning {\n @apply tw-bg-orange-100 tw-border tw-border-solid tw-border-orange;\n }\n\n .info {\n @apply tw-bg-blue-100 tw-border tw-border-solid tw-border-blue;\n }\n\n .success {\n @apply tw-bg-green-100 tw-border tw-border-solid tw-border-green;\n }\n\n .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 .filled-error {\n @apply tw-bg-red tw-border tw-border-solid tw-border-red;\n\n .link a,\n .link button {\n color: theme('colors.white');\n }\n }\n\n .filled-info {\n @apply tw-bg-blue tw-border tw-border-solid tw-border-blue;\n\n .link a,\n .link button {\n color: theme('colors.white');\n }\n }\n\n .link:not(:has(a, button)) {\n color: theme('colors.ice.900');\n cursor: pointer;\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n\n .filled-error &,\n .filled-info & {\n color: theme('colors.white');\n }\n }\n\n .filled-warning {\n @apply tw-bg-orange tw-border tw-border-solid tw-border-orange;\n }\n\n .filled-success {\n @apply tw-bg-green tw-border tw-border-solid tw-border-green;\n }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","props","color","StatusColors","isFilledVariant","iconColor","textColor","variantClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAgEQA,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,IAAkBN,EAAkB,MACjCG,EAAM,YAAY,QAC1B,GAEKI,IAAYP,EAAiB,MAC7BM,EAAgB,SAAS,CAAC,WAAW,SAAS,EAAE,SAASH,EAAM,QAAQ,IAClE,oBAGLG,EAAgB,SAAS,CAAC,QAAQ,OAAO,EAAE,SAASH,EAAM,QAAQ,IAC7D,kBAGF,WAAWC,EAAM,KAAK,EAC9B,GAEKI,IAAYR,EAAiB,MAC7BM,EAAgB,SAAS,CAAC,QAAQ,OAAO,EAAE,SAASH,EAAM,QAAQ,IAC7D,kBAGF,iBACR,GAEKM,IAAeT,EAAiB,MAC7BM,EAAgB,QAAQ,UAAUH,EAAM,QAAQ,KAAKA,EAAM,QACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Alert.vue.d.ts
CHANGED
|
@@ -39,33 +39,34 @@ export declare interface AlertProps {
|
|
|
39
39
|
*/
|
|
40
40
|
centered?: boolean;
|
|
41
41
|
/**
|
|
42
|
-
* Determines if the alert is permanent (
|
|
42
|
+
* Determines if the alert is permanent (doesn't have a close button).
|
|
43
43
|
*/
|
|
44
44
|
permanent?: boolean;
|
|
45
45
|
/**
|
|
46
|
-
* The type of border radius to use.
|
|
47
|
-
*
|
|
48
|
-
* `none` - no border radius
|
|
49
|
-
* `standard` - 4px border radius
|
|
46
|
+
* The type of border radius to use. Available types:
|
|
47
|
+
*
|
|
48
|
+
* - `none` - no border radius
|
|
49
|
+
* - `standard` - 4px border radius
|
|
50
50
|
*/
|
|
51
51
|
radius?: 'none' | 'standard';
|
|
52
52
|
/**
|
|
53
|
-
* The type of alert.
|
|
54
|
-
*
|
|
55
|
-
* `info
|
|
53
|
+
* The type of alert. Available types:
|
|
54
|
+
*
|
|
55
|
+
* - `info`
|
|
56
|
+
* - `success`
|
|
57
|
+
* - `warning`
|
|
58
|
+
* - `error`
|
|
56
59
|
*/
|
|
57
60
|
severity?: StatusSeverity;
|
|
58
61
|
/**
|
|
59
|
-
* Determines if the alert is sticky. By default it's not sticky
|
|
60
|
-
* Default: `null`
|
|
61
|
-
* Passed `number` is a top offset of alert
|
|
62
|
+
* Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.
|
|
62
63
|
*/
|
|
63
64
|
sticky?: number | null;
|
|
64
65
|
/**
|
|
65
|
-
* The variant of alert.
|
|
66
|
-
*
|
|
67
|
-
* `filled` - previously alert component
|
|
68
|
-
* `outlined` - previously banner component
|
|
66
|
+
* The variant of alert. Available variants:
|
|
67
|
+
*
|
|
68
|
+
* - `filled` - previously alert component
|
|
69
|
+
* - `outlined` - previously banner component
|
|
69
70
|
*/
|
|
70
71
|
variant?: 'outlined' | 'filled';
|
|
71
72
|
}
|
package/dist/Avatar.js
CHANGED
|
@@ -1,51 +1,53 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { S as
|
|
3
|
-
import
|
|
4
|
-
import { _ } from "./_plugin-vue_export-helper-dad06003.js";
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as m, useAttrs as f, computed as o, openBlock as r, createElementBlock as c, normalizeClass as i, toDisplayString as p } from "vue";
|
|
2
|
+
import { S as v } from "./colors-13e95ebf.js";
|
|
3
|
+
import b from "./utils/colorScheme.js";
|
|
4
|
+
import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
|
|
5
|
+
const C = ["alt", "src", "tabindex"], _ = ["tabindex"], g = /* @__PURE__ */ m({
|
|
6
6
|
name: "ll-avatar",
|
|
7
7
|
__name: "Avatar",
|
|
8
8
|
props: {
|
|
9
|
-
src: { default: "" },
|
|
10
9
|
name: { default: "" },
|
|
11
|
-
|
|
12
|
-
bgColor: { default: "" },
|
|
10
|
+
color: { default: v.Ice },
|
|
13
11
|
shade: { default: "light" },
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
src: { default: void 0 },
|
|
13
|
+
alt: { default: void 0 },
|
|
14
|
+
bgColor: { default: void 0 },
|
|
15
|
+
textColor: { default: void 0 }
|
|
16
16
|
},
|
|
17
|
-
setup(
|
|
18
|
-
const a =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
setup(n) {
|
|
18
|
+
const a = n, d = f(), s = o(
|
|
19
|
+
() => b({
|
|
20
|
+
shade: a.shade,
|
|
21
|
+
color: a.color
|
|
22
|
+
})
|
|
23
|
+
), u = o(() => {
|
|
22
24
|
const [t, l] = String(a.name).toUpperCase().split(" ");
|
|
23
25
|
return l ? t.charAt(0) + l.charAt(0) : t.charAt(0);
|
|
24
|
-
}), e = o(() => !!
|
|
25
|
-
return (t, l) => t.src ? (
|
|
26
|
+
}), e = o(() => !!d.onClick);
|
|
27
|
+
return (t, l) => t.src ? (r(), c("img", {
|
|
26
28
|
key: 0,
|
|
27
|
-
class:
|
|
29
|
+
class: i(["rounded-full", [t.$style.avatar, { [t.$style["is-clickable"]]: e.value }]]),
|
|
28
30
|
alt: t.alt,
|
|
29
31
|
src: t.src,
|
|
30
32
|
tabindex: e.value ? 0 : -1
|
|
31
|
-
}, null, 10,
|
|
33
|
+
}, null, 10, C)) : (r(), c("div", {
|
|
32
34
|
key: 1,
|
|
33
|
-
class:
|
|
35
|
+
class: i(["rounded-full text-center font-weight-bold cursor-default", [
|
|
34
36
|
t.$style.avatar,
|
|
35
|
-
`tw-text-${t.textColor ||
|
|
36
|
-
`tw-bg-${t.bgColor ||
|
|
37
|
+
`tw-text-${t.textColor || s.value.computedTextColor}`,
|
|
38
|
+
`tw-bg-${t.bgColor || s.value.computedBgColor}`,
|
|
37
39
|
{ [t.$style["is-clickable"]]: e.value }
|
|
38
40
|
]]),
|
|
39
41
|
tabindex: e.value ? 0 : -1
|
|
40
|
-
},
|
|
42
|
+
}, p(u.value), 11, _));
|
|
41
43
|
}
|
|
42
|
-
}),
|
|
43
|
-
avatar:
|
|
44
|
+
}), k = "_avatar_ml3fg_2", y = {
|
|
45
|
+
avatar: k,
|
|
44
46
|
"is-clickable": "_is-clickable_ml3fg_10"
|
|
45
|
-
},
|
|
46
|
-
$style:
|
|
47
|
-
},
|
|
47
|
+
}, $ = {
|
|
48
|
+
$style: y
|
|
49
|
+
}, M = /* @__PURE__ */ h(g, [["__cssModules", $]]);
|
|
48
50
|
export {
|
|
49
|
-
|
|
51
|
+
M as default
|
|
50
52
|
};
|
|
51
53
|
//# sourceMappingURL=Avatar.js.map
|
package/dist/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, useAttrs } from 'vue';\n\n import { StashPrimaryColor, StashPrimaryColors } from '../../../types/colors';\n import colorScheme from '../../utils/colorScheme';\n\n export interface AvatarProps {\n /**\n * The
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, useAttrs } from 'vue';\n\n import { StashColor, StashPrimaryColor, StashPrimaryColors } from '../../../types/colors';\n import colorScheme from '../../utils/colorScheme';\n\n export interface AvatarProps {\n /**\n * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n */\n name?: string;\n\n /**\n * The color for the chip that determines both the text and bg color. Needs to\n * be one of the brand colors in our design system (not a shade).\n */\n color?: StashPrimaryColor;\n\n /**\n * The shade of the provided color to use for the background color. This effects the inferred\n * text color unless a specific text color is provided. Currently only `light` and `main`\n * shades are supported. `dark` may be added in the future.\n */\n shade?: 'light' | 'main';\n\n /**\n * The image that will be displayed within the avatar\n */\n src?: string;\n\n /**\n * The alternative text to be displayed in case the image is unavailable\n */\n alt?: string;\n\n /**\n * The background color of the chip. Needs to be one of our design system colors.\n */\n bgColor?: StashColor;\n\n /**\n * The color of the chip text. Needs to be one of our design system colors.\n */\n textColor?: StashColor;\n }\n\n defineOptions({\n name: 'll-avatar',\n });\n\n const props = withDefaults(defineProps<AvatarProps>(), {\n src: undefined,\n name: '',\n alt: undefined,\n color: StashPrimaryColors.Ice,\n shade: 'light',\n bgColor: undefined,\n textColor: undefined,\n });\n\n const attrs = useAttrs();\n\n const computedColors = computed(() =>\n colorScheme({\n shade: props.shade,\n color: props.color,\n }),\n );\n\n const initials = computed(() => {\n const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n return initials;\n });\n\n const isClickable = computed(() => {\n return !!attrs.onClick;\n });\n</script>\n\n<template>\n <img\n v-if=\"src\"\n class=\"rounded-full\"\n :alt=\"alt\"\n :class=\"[$style.avatar, { [$style['is-clickable']]: isClickable }]\"\n :src=\"src\"\n :tabindex=\"isClickable ? 0 : -1\"\n />\n <div\n v-else\n class=\"rounded-full text-center font-weight-bold cursor-default\"\n :class=\"[\n $style.avatar,\n `tw-text-${textColor || computedColors.computedTextColor}`,\n `tw-bg-${bgColor || computedColors.computedBgColor}`,\n { [$style['is-clickable']]: isClickable },\n ]\"\n :tabindex=\"isClickable ? 0 : -1\"\n >\n {{ initials }}\n </div>\n</template>\n\n<style module>\n .avatar {\n display: inline-block;\n font-size: 0.875rem;\n height: var(--ll-space-4);\n line-height: calc(var(--ll-space-4) + 4px);\n width: var(--ll-space-4);\n }\n\n .is-clickable:hover,\n .is-clickable:focus,\n .is-clickable:active {\n outline: 1px solid var(--color-blue);\n outline-offset: -1px;\n }\n\n .is-clickable:focus,\n .is-clickable:active {\n box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n }\n</style>\n"],"names":["attrs","useAttrs","computedColors","computed","colorScheme","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KAERC,IAAiBC;AAAA,MAAS,MAC9BC,EAAY;AAAA,QACV,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACH,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Avatar.vue.d.ts
CHANGED
|
@@ -28,22 +28,15 @@ declare type __VLS_WithDefaults<P, D> = {
|
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export declare interface AvatarProps {
|
|
31
|
-
/**
|
|
32
|
-
* The image that will be displayed within the avatar
|
|
33
|
-
*/
|
|
34
|
-
src?: string;
|
|
35
31
|
/**
|
|
36
32
|
* The name of the user will be parsed and have its initial displayed in case the src prop is empty
|
|
37
33
|
*/
|
|
38
34
|
name?: string;
|
|
39
35
|
/**
|
|
40
|
-
* The
|
|
41
|
-
|
|
42
|
-
alt?: string;
|
|
43
|
-
/**
|
|
44
|
-
* The background color of the chip. Needs to be one of our design system colors.
|
|
36
|
+
* The color for the chip that determines both the text and bg color. Needs to
|
|
37
|
+
* be one of the brand colors in our design system (not a shade).
|
|
45
38
|
*/
|
|
46
|
-
|
|
39
|
+
color?: StashPrimaryColor;
|
|
47
40
|
/**
|
|
48
41
|
* The shade of the provided color to use for the background color. This effects the inferred
|
|
49
42
|
* text color unless a specific text color is provided. Currently only `light` and `main`
|
|
@@ -51,43 +44,157 @@ export declare interface AvatarProps {
|
|
|
51
44
|
*/
|
|
52
45
|
shade?: 'light' | 'main';
|
|
53
46
|
/**
|
|
54
|
-
* The
|
|
55
|
-
* be one of the brand colors in our design system (not a shade).
|
|
47
|
+
* The image that will be displayed within the avatar
|
|
56
48
|
*/
|
|
57
|
-
|
|
49
|
+
src?: string;
|
|
50
|
+
/**
|
|
51
|
+
* The alternative text to be displayed in case the image is unavailable
|
|
52
|
+
*/
|
|
53
|
+
alt?: string;
|
|
54
|
+
/**
|
|
55
|
+
* The background color of the chip. Needs to be one of our design system colors.
|
|
56
|
+
*/
|
|
57
|
+
bgColor?: StashColor;
|
|
58
58
|
/**
|
|
59
59
|
* The color of the chip text. Needs to be one of our design system colors.
|
|
60
60
|
*/
|
|
61
|
-
textColor?:
|
|
61
|
+
textColor?: StashColor;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
|
|
65
|
-
src:
|
|
65
|
+
src: undefined;
|
|
66
66
|
name: string;
|
|
67
|
-
alt:
|
|
67
|
+
alt: undefined;
|
|
68
68
|
color: StashPrimaryColors;
|
|
69
69
|
shade: string;
|
|
70
|
-
bgColor:
|
|
71
|
-
textColor:
|
|
70
|
+
bgColor: undefined;
|
|
71
|
+
textColor: undefined;
|
|
72
72
|
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
|
|
73
|
-
src:
|
|
73
|
+
src: undefined;
|
|
74
74
|
name: string;
|
|
75
|
-
alt:
|
|
75
|
+
alt: undefined;
|
|
76
76
|
color: StashPrimaryColors;
|
|
77
77
|
shade: string;
|
|
78
|
-
bgColor:
|
|
79
|
-
textColor:
|
|
78
|
+
bgColor: undefined;
|
|
79
|
+
textColor: undefined;
|
|
80
80
|
}>>>, {
|
|
81
81
|
name: string;
|
|
82
82
|
color: "blue" | "red" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow";
|
|
83
83
|
src: string;
|
|
84
84
|
alt: string;
|
|
85
85
|
shade: "main" | "light";
|
|
86
|
-
bgColor:
|
|
87
|
-
textColor:
|
|
86
|
+
bgColor: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
|
|
87
|
+
textColor: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
|
|
88
88
|
}, {}>;
|
|
89
89
|
export default _default;
|
|
90
90
|
|
|
91
|
+
declare type StashColor = `${StashColors}`;
|
|
92
|
+
|
|
93
|
+
declare enum StashColors {
|
|
94
|
+
Purple = "purple",
|
|
95
|
+
Purple900 = "purple-900",
|
|
96
|
+
Purple800 = "purple-800",
|
|
97
|
+
Purple700 = "purple-700",
|
|
98
|
+
Purple600 = "purple-600",
|
|
99
|
+
Purple500 = "purple-500",
|
|
100
|
+
Purple400 = "purple-400",
|
|
101
|
+
Purple300 = "purple-300",
|
|
102
|
+
Purple200 = "purple-200",
|
|
103
|
+
Purple100 = "purple-100",
|
|
104
|
+
Royal = "royal",
|
|
105
|
+
Royal900 = "royal-900",
|
|
106
|
+
Royal800 = "royal-800",
|
|
107
|
+
Royal700 = "royal-700",
|
|
108
|
+
Royal600 = "royal-600",
|
|
109
|
+
Royal500 = "royal-500",
|
|
110
|
+
Royal400 = "royal-400",
|
|
111
|
+
Royal300 = "royal-300",
|
|
112
|
+
Royal200 = "royal-200",
|
|
113
|
+
Royal100 = "royal-100",
|
|
114
|
+
Blue = "blue",
|
|
115
|
+
Blue900 = "blue-900",
|
|
116
|
+
Blue800 = "blue-800",
|
|
117
|
+
Blue700 = "blue-700",
|
|
118
|
+
Blue600 = "blue-600",
|
|
119
|
+
Blue500 = "blue-500",
|
|
120
|
+
Blue400 = "blue-400",
|
|
121
|
+
Blue300 = "blue-300",
|
|
122
|
+
Blue200 = "blue-200",
|
|
123
|
+
Blue100 = "blue-100",
|
|
124
|
+
Teal = "teal",
|
|
125
|
+
Teal900 = "teal-900",
|
|
126
|
+
Teal800 = "teal-800",
|
|
127
|
+
Teal700 = "teal-700",
|
|
128
|
+
Teal600 = "teal-600",
|
|
129
|
+
Teal500 = "teal-500",
|
|
130
|
+
Teal400 = "teal-400",
|
|
131
|
+
Teal300 = "teal-300",
|
|
132
|
+
Teal200 = "teal-200",
|
|
133
|
+
Teal100 = "teal-100",
|
|
134
|
+
Green = "green",
|
|
135
|
+
Green900 = "green-900",
|
|
136
|
+
Green800 = "green-800",
|
|
137
|
+
Green700 = "green-700",
|
|
138
|
+
Green600 = "green-600",
|
|
139
|
+
Green500 = "green-500",
|
|
140
|
+
Green400 = "green-400",
|
|
141
|
+
Green300 = "green-300",
|
|
142
|
+
Green200 = "green-200",
|
|
143
|
+
Green100 = "green-100",
|
|
144
|
+
Seafoam = "seafoam",
|
|
145
|
+
Seafoam900 = "seafoam-900",
|
|
146
|
+
Seafoam800 = "seafoam-800",
|
|
147
|
+
Seafoam700 = "seafoam-700",
|
|
148
|
+
Seafoam600 = "seafoam-600",
|
|
149
|
+
Seafoam500 = "seafoam-500",
|
|
150
|
+
Seafoam400 = "seafoam-400",
|
|
151
|
+
Seafoam300 = "seafoam-300",
|
|
152
|
+
Seafoam200 = "seafoam-200",
|
|
153
|
+
Seafoam100 = "seafoam-100",
|
|
154
|
+
Yellow = "yellow",
|
|
155
|
+
Yellow900 = "yellow-900",
|
|
156
|
+
Yellow800 = "yellow-800",
|
|
157
|
+
Yellow700 = "yellow-700",
|
|
158
|
+
Yellow600 = "yellow-600",
|
|
159
|
+
Yellow500 = "yellow-500",
|
|
160
|
+
Yellow400 = "yellow-400",
|
|
161
|
+
Yellow300 = "yellow-300",
|
|
162
|
+
Yellow200 = "yellow-200",
|
|
163
|
+
Yellow100 = "yellow-100",
|
|
164
|
+
Orange = "orange",
|
|
165
|
+
Orange900 = "orange-900",
|
|
166
|
+
Orange800 = "orange-800",
|
|
167
|
+
Orange700 = "orange-700",
|
|
168
|
+
Orange600 = "orange-600",
|
|
169
|
+
Orange500 = "orange-500",
|
|
170
|
+
Orange400 = "orange-400",
|
|
171
|
+
Orange300 = "orange-300",
|
|
172
|
+
Orange200 = "orange-200",
|
|
173
|
+
Orange100 = "orange-100",
|
|
174
|
+
Red = "red",
|
|
175
|
+
Red900 = "red-900",
|
|
176
|
+
Red800 = "red-800",
|
|
177
|
+
Red700 = "red-700",
|
|
178
|
+
Red600 = "red-600",
|
|
179
|
+
Red500 = "red-500",
|
|
180
|
+
Red400 = "red-400",
|
|
181
|
+
Red300 = "red-300",
|
|
182
|
+
Red200 = "red-200",
|
|
183
|
+
Red100 = "red-100",
|
|
184
|
+
Ice = "ice",
|
|
185
|
+
Ice900 = "ice-900",
|
|
186
|
+
Ice800 = "ice-800",
|
|
187
|
+
Ice700 = "ice-700",
|
|
188
|
+
Ice600 = "ice-600",
|
|
189
|
+
Ice500 = "ice-500",
|
|
190
|
+
Ice400 = "ice-400",
|
|
191
|
+
Ice300 = "ice-300",
|
|
192
|
+
Ice200 = "ice-200",
|
|
193
|
+
Ice100 = "ice-100",
|
|
194
|
+
White = "white",
|
|
195
|
+
Black = "black"
|
|
196
|
+
}
|
|
197
|
+
|
|
91
198
|
declare type StashPrimaryColor = `${StashPrimaryColors}`;
|
|
92
199
|
|
|
93
200
|
/**
|
package/dist/Chip.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as c, useCssModule as f, openBlock as i, createElementBlock as d, normalizeClass as a, unref as l, createElementVNode as v, renderSlot as
|
|
1
|
+
import { defineComponent as c, useCssModule as f, openBlock as i, createElementBlock as d, normalizeClass as a, unref as l, createElementVNode as v, renderSlot as h, withKeys as C, withModifiers as m, createVNode as b, createCommentVNode as w } from "vue";
|
|
2
2
|
import { S as _ } from "./colors-13e95ebf.js";
|
|
3
3
|
import y from "./utils/colorScheme.js";
|
|
4
4
|
import z from "./Icon.js";
|
|
@@ -12,12 +12,12 @@ const x = /* @__PURE__ */ c({
|
|
|
12
12
|
name: "ll-chip",
|
|
13
13
|
__name: "Chip",
|
|
14
14
|
props: {
|
|
15
|
+
color: { default: _.Ice },
|
|
16
|
+
shade: { default: "light" },
|
|
15
17
|
size: { default: "medium" },
|
|
16
18
|
radius: { default: "standard" },
|
|
17
|
-
bgColor: { default:
|
|
18
|
-
|
|
19
|
-
color: { default: _.Ice },
|
|
20
|
-
textColor: { default: "" },
|
|
19
|
+
bgColor: { default: void 0 },
|
|
20
|
+
textColor: { default: void 0 },
|
|
21
21
|
isRemovable: { type: Boolean, default: !1 },
|
|
22
22
|
shouldOverrideColors: { type: Boolean, default: !1 }
|
|
23
23
|
},
|
|
@@ -50,13 +50,14 @@ const x = /* @__PURE__ */ c({
|
|
|
50
50
|
v("span", {
|
|
51
51
|
class: a([{ "tw-mr-6 tw-truncate": t.isRemovable }])
|
|
52
52
|
}, [
|
|
53
|
-
|
|
53
|
+
h(t.$slots, "default")
|
|
54
54
|
], 2),
|
|
55
55
|
t.isRemovable ? (i(), d("button", {
|
|
56
56
|
key: 0,
|
|
57
57
|
tabindex: "-1",
|
|
58
|
-
class: a(["stash-
|
|
59
|
-
|
|
58
|
+
class: a(["stash-chip__remove-button", ["tw-absolute", l(s)["remove-button"]]]),
|
|
59
|
+
"data-test": "stash-chip|remove-button",
|
|
60
|
+
onKeypress: o[0] || (o[0] = C(m((r) => n("remove"), ["prevent"]), ["enter"])),
|
|
60
61
|
onMousedown: o[1] || (o[1] = m((r) => n("remove"), ["prevent", "stop"]))
|
|
61
62
|
}, [
|
|
62
63
|
b(z, {
|
package/dist/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../src/components/Chip/Chip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useCssModule } from 'vue';\n\n import { StashPrimaryColor, StashPrimaryColors } from '../../../types/colors';\n import colorScheme from '../../utils/colorScheme';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-chip',\n });\n\n export interface ChipProps {\n /**\n * The
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../src/components/Chip/Chip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useCssModule } from 'vue';\n\n import { StashColor, StashPrimaryColor, StashPrimaryColors } from '../../../types/colors';\n import colorScheme from '../../utils/colorScheme';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-chip',\n });\n\n export interface ChipProps {\n /**\n * The color for the chip that determines both the text and bg color. Needs to\n * be one of the brand colors in our design system (not a shade).\n */\n color?: StashPrimaryColor;\n\n /**\n * The shade of the provided color to use for the background color. This effects the inferred\n * text color unless a specific text color is provided. Currently only `light` and `main`\n * shades are supported. `dark` may be added in the future.\n */\n shade?: 'light' | 'main';\n\n /**\n * The size of the chip.\n */\n size?: 'small' | 'medium';\n\n /**\n * The type of border radius to use.\n */\n radius?: 'none' | 'standard' | 'pill';\n\n /**\n * The background color of the chip. Needs to be one of our design system colors.\n */\n bgColor?: StashColor;\n\n /**\n * The color of the chip text. Needs to be one of our design system colors.\n */\n textColor?: StashColor;\n\n /**\n * Determines if a close icon is surfaced.\n */\n isRemovable?: boolean;\n\n /**\n * Determines if background and text color in Chip should be overidden.\n */\n shouldOverrideColors?: boolean;\n }\n\n const props = withDefaults(defineProps<ChipProps>(), {\n size: 'medium',\n radius: 'standard',\n color: StashPrimaryColors.Ice,\n shade: 'light',\n bgColor: undefined,\n textColor: undefined,\n isRemovable: false,\n shouldOverrideColors: false,\n });\n\n const emit =\n defineEmits<{\n /**\n * Fires on click of the chip.\n */\n (e: 'click'): void;\n /**\n * If `is-removable` is true, fires on click of the close button.\n */\n (e: 'remove'): void;\n }>();\n\n const classes = useCssModule();\n\n function determineConditionalStyles() {\n const { computedBgColor, computedTextColor } = colorScheme({\n shade: props.shade,\n color: props.color,\n });\n\n const colorStyles = `tw-text-${props.textColor || computedTextColor} tw-bg-${props.bgColor || computedBgColor}`;\n\n return {\n 'tw-rounded-none': props.radius === 'none',\n 'tw-rounded-sm': props.radius === 'standard',\n 'tw-rounded-full': props.radius === 'pill',\n [colorStyles]: !props.shouldOverrideColors,\n };\n }\n</script>\n\n<template>\n <span\n class=\"stash-chip tw-inline-flex tw-items-center tw-relative\"\n :class=\"[\n `stash-chip--radius-${radius}`,\n classes.root,\n classes.removableChip,\n classes[`size-${size}`],\n determineConditionalStyles(),\n ]\"\n data-test=\"stash-chip\"\n @click=\"emit('click')\"\n >\n <span :class=\"[{ 'tw-mr-6 tw-truncate': isRemovable }]\">\n <!-- @slot Chip text -->\n <slot></slot>\n </span>\n\n <button\n v-if=\"isRemovable\"\n tabindex=\"-1\"\n class=\"stash-chip__remove-button\"\n :class=\"['tw-absolute', classes['remove-button']]\"\n data-test=\"stash-chip|remove-button\"\n @keypress.enter.prevent=\"emit('remove')\"\n @mousedown.prevent.stop=\"emit('remove')\"\n >\n <Icon data-test=\"icon|close\" name=\"close\" size=\"small\" />\n </button>\n </span>\n</template>\n\n<style module>\n .root {\n /**\n * Applying these styles this way because the rule of thumb is that tailwind classes should\n * always end up taking precedence, so we're converted these specific styles to be generated\n * in a custom class instead, giving `FilterChip` (which wraps `Chip`) the ability to easily\n * override them.\n */\n @apply tw-leading-none tw-font-semibold tw-uppercase tw-text-[10px];\n }\n\n .size-medium {\n height: 20px;\n padding: 2px 8px 0 8px;\n }\n\n .size-small {\n height: 16px;\n padding: 2px 8px 0 8px;\n }\n\n .remove-button {\n border-radius: inherit;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n height: inherit;\n margin-top: -2px; /* used to offset 2px top padding from .size-medium and size-small */\n padding: 0 4px;\n right: 0;\n }\n\n .remove-button:hover {\n background: rgb(0 0 0 / 10%);\n }\n</style>\n"],"names":["classes","useCssModule","determineConditionalStyles","computedBgColor","computedTextColor","colorScheme","props","colorStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBA+EQA,IAAUC;AAEhB,aAASC,IAA6B;AACpC,YAAM,EAAE,iBAAAC,GAAiB,mBAAAC,EAAkB,IAAIC,EAAY;AAAA,QACzD,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd,GAEKC,IAAc,WAAWD,EAAM,aAAaF,CAAiB,UAAUE,EAAM,WAAWH,CAAe;AAEtG,aAAA;AAAA,QACL,mBAAmBG,EAAM,WAAW;AAAA,QACpC,iBAAiBA,EAAM,WAAW;AAAA,QAClC,mBAAmBA,EAAM,WAAW;AAAA,QACpC,CAACC,CAAW,GAAG,CAACD,EAAM;AAAA,MAAA;AAAA,IAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|