@leaflink/stash 48.2.0 → 48.3.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.
@@ -107,8 +107,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
107
107
  variant: string;
108
108
  }>>>, {
109
109
  color: "blue" | "red";
110
- animate: boolean;
111
110
  max: string | number;
111
+ animate: boolean;
112
112
  offset: {
113
113
  top?: number | undefined;
114
114
  right?: number | undefined;
package/dist/Button.js CHANGED
@@ -1,9 +1,8 @@
1
- import { defineComponent as f, computed as c, openBlock as a, createElementBlock as n, normalizeClass as r, renderSlot as s } from "vue";
2
- import { s as i } from "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
3
- import { _ as d } from "./_plugin-vue_export-helper-dad06003.js";
4
- const y = ["href"];
5
- var u = /* @__PURE__ */ ((t) => (t.Primary = "primary", t.Secondary = "secondary", t.Tertiary = "tertiary", t.Icon = "icon", t.IconLabel = "iconLabel", t.Inline = "inline", t))(u || {});
6
- const b = /* @__PURE__ */ f({
1
+ import { defineComponent as f, useCssModule as i, computed as n, openBlock as d, createBlock as p, resolveDynamicComponent as m, mergeProps as b, unref as a, withCtx as y, renderSlot as _ } from "vue";
2
+ import { s as h } from "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
3
+ import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
4
+ var s = /* @__PURE__ */ ((e) => (e.Icon = "icon", e.IconLabel = "iconLabel", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Inline = "inline", e.Primary = "primary", e))(s || {});
5
+ const $ = /* @__PURE__ */ f({
7
6
  name: "ll-button",
8
7
  __name: "Button",
9
8
  props: {
@@ -13,34 +12,39 @@ const b = /* @__PURE__ */ f({
13
12
  tertiary: { type: Boolean, default: !1 },
14
13
  inline: { type: Boolean, default: !1 },
15
14
  color: { default: void 0 },
15
+ to: { default: void 0 },
16
16
  href: { default: "" }
17
17
  },
18
- setup(t) {
19
- const o = t, l = c(() => {
20
- for (const e of Object.values(u))
21
- if (o[e])
22
- return e;
18
+ setup(e) {
19
+ const t = e, r = i(), l = n(() => {
20
+ for (const o of Object.values(s))
21
+ if (t[o])
22
+ return o;
23
23
  return "primary";
24
- });
25
- return (e, m) => o.href ? (a(), n("a", {
26
- key: 0,
27
- "data-test": "ll-button",
28
- class: r(["stash-button", [e.$style.button, e.$style[`button--${l.value}`], { [e.$style[`button--${o.color}`]]: o.color }]]),
29
- href: o.href
30
- }, [
31
- s(e.$slots, "default")
32
- ], 10, y)) : (a(), n("button", {
33
- key: 1,
34
- "data-test": "ll-button",
35
- class: r(["stash-button", [e.$style.button, e.$style[`button--${l.value}`], { [e.$style[`button--${o.color}`]]: o.color }]])
36
- }, [
37
- s(e.$slots, "default")
38
- ], 2));
24
+ }), u = n(() => t.to ? "router-link" : t.href ? "a" : "button"), c = n(() => t.to ? {
25
+ to: t.to
26
+ } : t.href ? {
27
+ href: t.href
28
+ } : {});
29
+ return (o, C) => (d(), p(m(u.value), b(c.value, {
30
+ class: ["stash-button", [
31
+ a(r).button,
32
+ `stash-button--${l.value}`,
33
+ a(r)[`button--${l.value}`],
34
+ { [`stash-button--${t.color}`]: t.color, [a(r)[`button--${t.color}`]]: t.color }
35
+ ]],
36
+ "data-test": "ll-button"
37
+ }), {
38
+ default: y(() => [
39
+ _(o.$slots, "default")
40
+ ]),
41
+ _: 3
42
+ }, 16, ["class"]));
39
43
  }
40
- }), p = {
41
- $style: i
42
- }, _ = /* @__PURE__ */ d(b, [["__cssModules", p]]);
44
+ }), B = {
45
+ $style: h
46
+ }, L = /* @__PURE__ */ v($, [["__cssModules", B]]);
43
47
  export {
44
- _ as default
48
+ L as default
45
49
  };
46
50
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed } from 'vue';\n\n defineOptions({\n name: 'll-button',\n });\n\n export interface ButtonProps {\n /**\n * Renders the secondary variant\n */\n secondary?: boolean;\n\n /**\n * Renders the button as a container for an Icon\n */\n icon?: boolean;\n\n /**\n * Renders the button as a container for an IconLabel\n */\n iconLabel?: boolean;\n\n /**\n * Renders the tertiary variant\n */\n tertiary?: boolean;\n\n /**\n * Renders the component inline\n */\n inline?: boolean;\n\n /**\n * Renders a color variant\n */\n color?: 'blue' | 'red';\n\n /**\n * Button link. If defined, the button will render as an `<a />` tag.\n */\n href?: string;\n }\n\n const props = withDefaults(defineProps<ButtonProps>(), {\n secondary: false,\n icon: false,\n iconLabel: false,\n tertiary: false,\n inline: false,\n color: undefined,\n href: '',\n });\n\n enum ButtonTypes {\n Primary = 'primary',\n Secondary = 'secondary',\n Tertiary = 'tertiary',\n Icon = 'icon',\n IconLabel = 'iconLabel',\n Inline = 'inline',\n }\n\n type ButtonType = `${ButtonTypes}`;\n\n const buttonType = computed<ButtonType>(() => {\n for (const type of Object.values(ButtonTypes)) {\n if (props[type]) {\n return type;\n }\n }\n\n return ButtonTypes.Primary;\n });\n</script>\n\n<template>\n <a\n v-if=\"props.href\"\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n :href=\"props.href\"\n >\n <!-- @slot default -->\n <slot></slot>\n </a>\n <button\n v-else\n data-test=\"ll-button\"\n class=\"stash-button\"\n :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n >\n <!-- @slot default -->\n <slot></slot>\n </button>\n</template>\n\n<style module>\n .button {\n border-radius: theme('borderRadius.DEFAULT');\n border-width: 1px;\n display: inline-block;\n font-size: 0.875rem;\n font-weight: theme('fontWeight.semibold');\n line-height: 2.125rem;\n margin: 0;\n min-width: 144px;\n padding: 0 theme('spacing.3');\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n @media screen('lg') {\n /* `focus` and `hover` should be added only for large screens */\n .button:focus {\n box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n outline: none;\n }\n\n .button:hover {\n text-decoration: none;\n }\n }\n\n .button[disabled] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Solid treatment */\n .button--solid {\n background-color: var(--button-color);\n border-color: transparent;\n color: var(--text-color);\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--solid:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--solid:active {\n background-color: var(--button-hover-color);\n }\n\n .button--solid[disabled] {\n --button-color: var(--color-ice-500) !important;\n }\n\n /* Ghost treatment */\n .button--ghost {\n background-color: rgb(0 0 0 / 0%);\n border-color: var(--button-color);\n color: var(--text-color);\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--ghost:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--ghost:active {\n background-color: var(--button-hover-color);\n }\n\n .button--ghost[disabled] {\n --button-color: var(--color-ice-500) !important;\n --text-color: var(--color-ice-500) !important;\n }\n\n /* Types */\n .button--primary {\n composes: button--solid;\n --button-color: var(--color-blue-500);\n --button-hover-color: var(--color-blue-hover);\n --text-color: var(--color-white);\n }\n\n .button--secondary {\n composes: button--ghost;\n --button-color: var(--color-ice-500);\n --button-hover-color: var(--color-ice-700-hover);\n --text-color: var(--color-ice-700);\n }\n\n .button--tertiary {\n composes: button--ghost;\n --button-color: var(--color-white);\n --button-hover-color: var(--color-white-hover);\n --text-color: var(--color-white);\n }\n\n .button--icon,\n .button--iconLabel {\n /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n border: 0;\n border-radius: theme('borderRadius.DEFAULT');\n height: theme('spacing.12');\n min-width: theme('spacing.12');\n text-decoration: none;\n }\n\n .button--icon {\n padding: theme('spacing.3');\n width: theme('spacing.12');\n }\n\n .button--iconLabel {\n padding: 0;\n width: unset;\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--icon:hover,\n .button--iconLabel:hover {\n text-decoration: none;\n }\n }\n\n .button--icon svg,\n .button--iconLabel svg {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n\n .button--icon[disabled] svg,\n .button--iconLabel[disabled],\n .button--iconLabel[disabled] svg {\n color: var(--color-ice-500);\n }\n\n .button--inline {\n border: 0;\n color: var(--color-blue-500);\n font-weight: theme('fontWeight.medium');\n line-height: 1.5;\n min-width: 0;\n padding: 0;\n }\n\n .button--inline:hover {\n text-decoration: underline;\n }\n\n .button--inline[disabled] {\n color: var(--color-ice-900);\n }\n\n /* Colors */\n .button--blue.button--primary,\n .button--blue.button--secondary {\n --button-color: var(--color-blue-500);\n }\n\n .button--blue.button--primary {\n --button-hover-color: var(--color-blue-hover);\n }\n\n .button--blue.button--secondary {\n --text-color: var(--color-blue-500);\n --button-hover-color: var(--button-secondary-blue-hover);\n }\n\n .button--red.button--primary,\n .button--red.button--secondary {\n --button-color: var(--color-red-500);\n }\n\n .button--red.button--primary {\n --button-hover-color: var(--color-red-hover);\n }\n\n .button--red.button--secondary {\n --text-color: var(--color-red-500);\n --button-hover-color: var(--button-secondary-red-hover);\n }\n\n /**\n * Button Grid\n * TODO: Move into separate component\n * https://leaflink.atlassian.net/browse/STASH-230\n * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n */\n :global(.button-grid) > .button,\n :global(.header-button-grid) > .button {\n width: 50%;\n }\n\n :global(.button-grid) > .button + .button {\n margin-left: theme('spacing.6');\n }\n\n @media screen('md') {\n :global(.button-grid) > .button {\n width: auto;\n }\n }\n\n :global(.header-button-grid) > .button + .button {\n margin-left: theme('spacing.6');\n }\n\n @media screen('lg') {\n :global(.header-button-grid) > .button {\n width: auto;\n }\n }\n</style>\n"],"names":["ButtonTypes","buttonType","computed","type","props"],"mappings":";;;;AAsDE,IAAKA,sBAAAA,OACHA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,SAAS,UANNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBAWCC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAI,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { computed, useCssModule } from 'vue';\n import { RouteLocationRaw } from 'vue-router';\n\n defineOptions({\n name: 'll-button',\n });\n\n export interface ButtonProps {\n /**\n * Renders the secondary variant\n */\n secondary?: boolean;\n\n /**\n * Renders the button as a container for an Icon\n */\n icon?: boolean;\n\n /**\n * Renders the button as a container for an IconLabel\n */\n iconLabel?: boolean;\n\n /**\n * Renders the tertiary variant\n */\n tertiary?: boolean;\n\n /**\n * Renders the component inline\n */\n inline?: boolean;\n\n /**\n * Renders a color variant\n */\n color?: 'blue' | 'red';\n\n /**\n * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n */\n to?: RouteLocationRaw;\n\n /**\n * Button link. If defined, the button will render as an `<a />` tag.\n */\n href?: string;\n }\n\n const props = withDefaults(defineProps<ButtonProps>(), {\n secondary: false,\n icon: false,\n iconLabel: false,\n tertiary: false,\n inline: false,\n color: undefined,\n href: '',\n to: undefined,\n });\n const classes = useCssModule();\n\n enum ButtonTypes {\n Icon = 'icon',\n IconLabel = 'iconLabel',\n Secondary = 'secondary',\n Tertiary = 'tertiary',\n Inline = 'inline',\n Primary = 'primary',\n }\n\n type ButtonType = `${ButtonTypes}`;\n\n const buttonType = computed<ButtonType>(() => {\n for (const type of Object.values(ButtonTypes)) {\n if (props[type]) {\n return type;\n }\n }\n\n return ButtonTypes.Primary;\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 const buttonAttrs = computed(() => {\n if (props.to) {\n return {\n to: props.to,\n };\n }\n\n if (props.href) {\n return {\n href: props.href,\n };\n }\n\n return {};\n });\n</script>\n\n<template>\n <component\n :is=\"is\"\n v-bind=\"buttonAttrs\"\n class=\"stash-button\"\n :class=\"[\n classes.button,\n `stash-button--${buttonType}`,\n classes[`button--${buttonType}`],\n { [`stash-button--${props.color}`]: props.color, [classes[`button--${props.color}`]]: props.color },\n ]\"\n data-test=\"ll-button\"\n >\n <!-- @slot default -->\n <slot></slot>\n </component>\n</template>\n\n<style module>\n .button {\n border-radius: theme('borderRadius.DEFAULT');\n border-width: 1px;\n display: inline-block;\n font-size: 0.875rem;\n font-weight: theme('fontWeight.semibold');\n line-height: 2.125rem;\n margin: 0;\n min-width: 144px;\n padding: 0 theme('spacing.3');\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n @media screen('lg') {\n /* `focus` and `hover` should be added only for large screens */\n .button:focus {\n box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n outline: none;\n }\n\n .button:hover {\n text-decoration: none;\n }\n }\n\n .button[disabled] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Solid treatment */\n .button--solid {\n background-color: var(--button-color);\n border-color: transparent;\n color: var(--text-color);\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--solid:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--solid:active {\n background-color: var(--button-hover-color);\n }\n\n .button--solid[disabled] {\n --button-color: var(--color-ice-500) !important;\n }\n\n /* Ghost treatment */\n .button--ghost {\n background-color: rgb(0 0 0 / 0%);\n border-color: var(--button-color);\n color: var(--text-color);\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--ghost:hover {\n background-color: var(--button-hover-color);\n }\n }\n\n .button--ghost:active {\n background-color: var(--button-hover-color);\n }\n\n .button--ghost[disabled] {\n --button-color: var(--color-ice-500) !important;\n --text-color: var(--color-ice-500) !important;\n }\n\n /* Types */\n .button--primary {\n composes: button--solid;\n --button-color: var(--color-blue-500);\n --button-hover-color: var(--color-blue-hover);\n --text-color: var(--color-white);\n }\n\n .button--secondary {\n composes: button--ghost;\n --button-color: var(--color-ice-500);\n --button-hover-color: var(--color-ice-700-hover);\n --text-color: var(--color-ice-700);\n }\n\n .button--tertiary {\n composes: button--ghost;\n --button-color: var(--color-white);\n --button-hover-color: var(--color-white-hover);\n --text-color: var(--color-white);\n }\n\n .button--icon,\n .button--iconLabel {\n /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n border: 0;\n border-radius: theme('borderRadius.DEFAULT');\n height: theme('spacing.12');\n min-width: theme('spacing.12');\n text-decoration: none;\n }\n\n .button--icon {\n padding: theme('spacing.3');\n width: theme('spacing.12');\n }\n\n .button--iconLabel {\n padding: 0;\n width: unset;\n }\n\n @media screen('lg') {\n /* `hover` should be added only for large screens */\n .button--icon:hover,\n .button--iconLabel:hover {\n text-decoration: none;\n }\n }\n\n .button--icon svg,\n .button--iconLabel svg {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n\n .button--icon[disabled] svg,\n .button--iconLabel[disabled],\n .button--iconLabel[disabled] svg {\n color: var(--color-ice-500);\n }\n\n .button--inline {\n border: 0;\n color: var(--color-blue-500);\n font-weight: theme('fontWeight.medium');\n line-height: 1.5;\n min-width: 0;\n padding: 0;\n }\n\n .button--inline:hover {\n text-decoration: underline;\n }\n\n .button--inline[disabled] {\n color: var(--color-ice-900);\n }\n\n /* Colors */\n .button--blue.button--primary,\n .button--blue.button--secondary {\n --button-color: var(--color-blue-500);\n }\n\n .button--blue.button--primary {\n --button-hover-color: var(--color-blue-hover);\n }\n\n .button--blue.button--secondary {\n --text-color: var(--color-blue-500);\n --button-hover-color: var(--button-secondary-blue-hover);\n }\n\n .button--red.button--primary,\n .button--red.button--secondary {\n --button-color: var(--color-red-500);\n }\n\n .button--red.button--primary {\n --button-hover-color: var(--color-red-hover);\n }\n\n .button--red.button--secondary {\n --text-color: var(--color-red-500);\n --button-hover-color: var(--button-secondary-red-hover);\n }\n\n /**\n * Button Grid\n * TODO: Move into separate component\n * https://leaflink.atlassian.net/browse/STASH-230\n * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n */\n :global(.button-grid) > .button,\n :global(.header-button-grid) > .button {\n width: 50%;\n }\n\n :global(.button-grid) > .button + .button {\n margin-left: theme('spacing.6');\n }\n\n @media screen('md') {\n :global(.button-grid) > .button {\n width: auto;\n }\n }\n\n :global(.header-button-grid) > .button + .button {\n margin-left: theme('spacing.6');\n }\n\n @media screen('lg') {\n :global(.header-button-grid) > .button {\n width: auto;\n }\n }\n</style>\n"],"names":["ButtonTypes","classes","useCssModule","buttonType","computed","type","props","is","buttonAttrs"],"mappings":";;;AA8DE,IAAKA,sBAAAA,OACHA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU,WANPA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;iBAFCC,IAAUC,KAaVC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOL,CAAW;AACtC,YAAAM,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKE,IAAKH,EAAS,MACdE,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKE,IAAcJ,EAAS,MACvBE,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;"}
@@ -4,6 +4,7 @@ import { ComponentOptionsMixin } from 'vue';
4
4
  import { DefineComponent } from 'vue';
5
5
  import { ExtractPropTypes } from 'vue';
6
6
  import { PropType } from 'vue';
7
+ import { RouteLocationRaw } from 'vue-router';
7
8
  import { VNodeProps } from 'vue';
8
9
 
9
10
  declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -58,6 +59,10 @@ export declare interface ButtonProps {
58
59
  * Renders a color variant
59
60
  */
60
61
  color?: 'blue' | 'red';
62
+ /**
63
+ * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.
64
+ */
65
+ to?: RouteLocationRaw;
61
66
  /**
62
67
  * Button link. If defined, the button will render as an `<a />` tag.
63
68
  */
@@ -72,6 +77,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
72
77
  inline: boolean;
73
78
  color: undefined;
74
79
  href: string;
80
+ to: undefined;
75
81
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
76
82
  secondary: boolean;
77
83
  icon: boolean;
@@ -80,6 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
80
86
  inline: boolean;
81
87
  color: undefined;
82
88
  href: string;
89
+ to: undefined;
83
90
  }>>>, {
84
91
  secondary: boolean;
85
92
  icon: boolean;
@@ -87,6 +94,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
87
94
  tertiary: boolean;
88
95
  inline: boolean;
89
96
  color: "blue" | "red";
97
+ to: RouteLocationRaw;
90
98
  href: string;
91
99
  }, {}>, {
92
100
  default?(_: {}): any;
@@ -102,8 +102,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
102
102
  }>>> & {
103
103
  "onUpdate:checked"?: ((value: boolean | (string | number)[]) => any) | undefined;
104
104
  }, {
105
- label: string;
106
105
  id: string;
106
+ label: string;
107
107
  checked: boolean | (string | number)[];
108
108
  disabled: boolean;
109
109
  value: string | number;
@@ -55,8 +55,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
55
55
  }>>> & {
56
56
  "onUpdate:model-value"?: ((v: string | null) => any) | undefined;
57
57
  }, {
58
- label: string;
59
58
  id: string;
59
+ label: string;
60
60
  errorText: string;
61
61
  hintText: string;
62
62
  modelValue: string | null;
@@ -203,8 +203,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
203
203
  "onUpdate:model-value"?: ((date: string | number | Date) => any) | undefined;
204
204
  }, {
205
205
  name: string;
206
- label: string;
207
206
  id: string;
207
+ label: string;
208
208
  disabled: boolean;
209
209
  placeholder: string;
210
210
  addBottomSpace: boolean;
@@ -48,8 +48,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
48
48
  }>>> & {
49
49
  "onAfter-expand"?: (() => any) | undefined;
50
50
  }, {
51
- transitionName: string;
52
51
  is: ExpandOuterElement;
52
+ transitionName: string;
53
53
  isExpanded: boolean;
54
54
  isLazy: boolean;
55
55
  }, {}>, {
@@ -54,9 +54,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
54
54
  showOptionalInLabel: boolean;
55
55
  fieldset: boolean;
56
56
  }>>>, {
57
+ id: string;
57
58
  fieldset: boolean;
58
59
  label: string;
59
- id: string;
60
60
  isRequired: boolean;
61
61
  addBottomSpace: boolean;
62
62
  errorText: string;
@@ -43,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
43
43
  activeFilterCount: number;
44
44
  onApply: () => undefined;
45
45
  }>>> & {
46
- onReset?: (() => any) | undefined;
47
46
  onDismiss?: (() => any) | undefined;
47
+ onReset?: (() => any) | undefined;
48
48
  }, {
49
49
  onApply: OnApplyFilters;
50
50
  }, {}>, {
@@ -38,8 +38,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
38
38
  title: string;
39
39
  staticPath: string;
40
40
  }>>>, {
41
- title: string;
42
41
  id: string;
42
+ title: string;
43
43
  size: "small" | "standard" | "dense" | "large";
44
44
  staticPath: string;
45
45
  }, {}>;
@@ -47,8 +47,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
47
47
  truncate: boolean;
48
48
  }>>>, {
49
49
  color: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
50
- href: string;
51
50
  to: string | object;
51
+ href: string;
52
52
  stacked: boolean;
53
53
  truncate: boolean;
54
54
  }, {}>, {
@@ -45,8 +45,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
45
45
  staticPath: string;
46
46
  }>>>, {
47
47
  type: "spot" | "vignette" | "scene";
48
- title: string;
49
48
  id: string;
49
+ title: string;
50
50
  size: number;
51
51
  staticPath: string;
52
52
  fillColor: StashPrimaryColorGroup;
@@ -66,8 +66,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
66
66
  "onUpdate:model-value"?: ((v: string | number) => any) | undefined;
67
67
  }, {
68
68
  type: string;
69
- label: string;
70
69
  id: string;
70
+ label: string;
71
71
  autocomplete: string;
72
72
  value: string | number | null;
73
73
  errorText: string;
@@ -1 +1 @@
1
- {"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import {computed, useCssModule} from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface QuickActionProps {\n /**\n * The title prop will show the first line of text\n */\n title: string;\n\n /**\n * The subtitle prop will show the second line of text\n */\n subtitle: string;\n\n /**\n * The `to` prop for vue-router's `RouterLink` component\n */\n to?: RouteLocationRaw;\n /**\n * If defined, the quick action will render as an `<a />` tag.\n */\n href?: string;\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n }\n\n const props = defineProps<QuickActionProps>();\n const classes = useCssModule();\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 'div';\n });\n\n const linkAttrs = computed(() => {\n if (props.to) {\n return {\n to: props.to,\n };\n }\n\n if (props.href) {\n return {\n href: props.href\n };\n }\n\n return {};\n });\n</script>\n\n<template>\n <component\n :is=\"is\"\n v-bind=\"linkAttrs\"\n class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n :class=\"classes.root\"\n data-test=\"stash-quick-action\"\n >\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n </div>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n {{ props.subtitle }}\n </p>\n </div>\n <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n </div>\n </component>\n</template>\n\n<style module>\n .root {\n background-color: #fff;\n border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n cursor: pointer;\n display: inline-block;\n }\n\n .root:hover,\n .root:active,\n .root:focus {\n border: 1px solid var(--color-blue-500);\n text-decoration: none;\n }\n</style>\n"],"names":["classes","useCssModule","is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAiCQA,IAAUC,KAEVC,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import {computed, useCssModule} from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface QuickActionProps {\n /**\n * The title prop will show the first line of text\n */\n title: string;\n\n /**\n * The subtitle prop will show the second line of text\n */\n subtitle: string;\n\n /**\n * The `to` prop for vue-router's `RouterLink` component\n */\n to?: RouteLocationRaw;\n\n /**\n * If defined, the quick action will render as an `<a />` tag.\n */\n href?: string;\n\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n }\n\n const props = defineProps<QuickActionProps>();\n const classes = useCssModule();\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 'div';\n });\n\n const linkAttrs = computed(() => {\n if (props.to) {\n return {\n to: props.to,\n };\n }\n\n if (props.href) {\n return {\n href: props.href\n };\n }\n\n return {};\n });\n</script>\n\n<template>\n <component\n :is=\"is\"\n v-bind=\"linkAttrs\"\n class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n :class=\"classes.root\"\n data-test=\"stash-quick-action\"\n >\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n </div>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n {{ props.subtitle }}\n </p>\n </div>\n <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n </div>\n </component>\n</template>\n\n<style module>\n .root {\n background-color: #fff;\n border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n cursor: pointer;\n display: inline-block;\n }\n\n .root:hover,\n .root:active,\n .root:focus {\n border: 1px solid var(--color-blue-500);\n text-decoration: none;\n }\n</style>\n"],"names":["classes","useCssModule","is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KAEVC,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -57,8 +57,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
57
57
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
58
58
  }, {
59
59
  name: string;
60
- label: string;
61
60
  id: string | number;
61
+ label: string;
62
62
  disabled: boolean;
63
63
  hasError: boolean;
64
64
  modelValue: string;
@@ -127,9 +127,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
127
127
  }, {
128
128
  name: string;
129
129
  icon: string | boolean;
130
- label: string;
131
130
  id: string;
132
131
  error: string;
132
+ label: string;
133
133
  disabled: boolean;
134
134
  placeholder: string;
135
135
  value: any;
@@ -55,8 +55,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
55
55
  "onUpdate:checked"?: ((value: boolean | (string | number)[] | undefined) => any) | undefined;
56
56
  }, {
57
57
  name: string;
58
- label: string;
59
58
  id: string;
59
+ label: string;
60
60
  checked: boolean | (string | number)[];
61
61
  disabled: boolean;
62
62
  value: string | number;
@@ -54,8 +54,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
54
54
  }>>> & {
55
55
  "onUpdate:model-value"?: ((value: string) => any) | undefined;
56
56
  }, {
57
- label: string;
58
57
  resize: boolean | TextareaResizeOptions;
58
+ label: string;
59
59
  value: string | number | null;
60
60
  errorText: string;
61
61
  hintText: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leaflink/stash",
3
- "version": "48.2.0",
3
+ "version": "48.3.0",
4
4
  "description": "LeafLink's design system.",
5
5
  "homepage": "https://stash.leaflink.com",
6
6
  "main": "./dist/index.ts",