@leaflink/stash 44.0.0-beta.3 → 44.0.0-beta.4
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/ActionsDropdown.js +4 -4
- package/dist/ActionsDropdown.js.map +1 -1
- package/dist/AppNavigationItem.js +8 -8
- package/dist/AppNavigationItem.js.map +1 -1
- package/dist/ButtonGroup.js +2 -2
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/DataViewSortButton.js +10 -10
- package/dist/DataViewSortButton.js.map +1 -1
- package/dist/DatePicker.js +2 -2
- package/dist/DatePicker.js.map +1 -1
- package/dist/DescriptionListTerm.js +1 -1
- package/dist/DescriptionListTerm.js.map +1 -1
- package/dist/Divider.js +3 -3
- package/dist/Divider.js.map +1 -1
- package/dist/FileUpload.js +14 -14
- package/dist/FileUpload.js.map +1 -1
- package/dist/Filters.js +6 -6
- package/dist/Filters.js.map +1 -1
- package/dist/IconLabel.js +10 -10
- package/dist/IconLabel.js.map +1 -1
- package/dist/Image.js +1 -1
- package/dist/Image.js.map +1 -1
- package/dist/Input.js +2 -2
- package/dist/Input.js.map +1 -1
- package/dist/InputOptions.js +8 -8
- package/dist/InputOptions.js.map +1 -1
- package/dist/ListView.js +37 -37
- package/dist/ListView.js.map +1 -1
- package/dist/ObfuscateText.js +4 -4
- package/dist/ObfuscateText.js.map +1 -1
- package/dist/RadioGroup.js +103 -103
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioNew.js +2 -2
- package/dist/Select.js +3 -3
- package/dist/Select.js.map +1 -1
- package/dist/TableHeaderCell.js +2 -2
- package/dist/TableHeaderCell.js.map +1 -1
- package/dist/components.css +1 -1
- package/package.json +1 -1
package/dist/ActionsDropdown.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as c, useCssModule as p, openBlock as m, createBlock as u, unref as n, normalizeClass as s, createSlots as f, withCtx as e, createVNode as a, createTextVNode as _, toDisplayString as
|
|
1
|
+
import { defineComponent as c, useCssModule as p, openBlock as m, createBlock as u, unref as n, normalizeClass as s, createSlots as f, withCtx as e, createVNode as a, createTextVNode as _, toDisplayString as w, renderSlot as b } from "vue";
|
|
2
2
|
import { t as C } from "./locale.js";
|
|
3
3
|
import g from "./Button.js";
|
|
4
4
|
import x from "./Dropdown.js";
|
|
@@ -34,14 +34,14 @@ const y = /* @__PURE__ */ c({
|
|
|
34
34
|
}, f({
|
|
35
35
|
toggle: e(({ isActive: r, toggle: i }) => [
|
|
36
36
|
a(g, {
|
|
37
|
-
class: s(["button
|
|
37
|
+
class: s(["button align-middle align-justify border-blue text-blue tw-flex tw-w-full tw-border", [n(t).actionButton, { [n(t).disabled]: o.disabled }]]),
|
|
38
38
|
secondary: "",
|
|
39
39
|
"aria-expanded": r.toString(),
|
|
40
40
|
disabled: o.disabled,
|
|
41
41
|
onClick: i
|
|
42
42
|
}, {
|
|
43
43
|
default: e(() => [
|
|
44
|
-
_(
|
|
44
|
+
_(w(o.buttonText) + " ", 1),
|
|
45
45
|
a(B, {
|
|
46
46
|
class: "tw-ml-1.5",
|
|
47
47
|
name: "caret-down"
|
|
@@ -55,7 +55,7 @@ const y = /* @__PURE__ */ c({
|
|
|
55
55
|
o.disabled ? void 0 : {
|
|
56
56
|
name: "default",
|
|
57
57
|
fn: e(() => [
|
|
58
|
-
|
|
58
|
+
b(d.$slots, "default")
|
|
59
59
|
]),
|
|
60
60
|
key: "0"
|
|
61
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { useCssModule } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-actions-dropdown',\n });\n\n export interface ActionsDropdownProps {\n /**\n * Used to position the dropdown relative to target\n * Options: left, right\n */\n align?: 'left' | 'right';\n /**\n * Indicates whether the trigger button is disabled or not\n */\n disabled?: boolean;\n /**\n * Class to be applied to the dropdown content\n */\n contentClass?: string;\n /**\n * Text to be displayed on the trigger button\n */\n buttonText?: string;\n }\n\n const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n align: 'left',\n disabled: false,\n contentClass: '',\n buttonText: () => t('ll.actions'),\n });\n\n const classes = useCssModule();\n</script>\n\n<template>\n <Dropdown\n :align=\"props.align\"\n :content-class=\"[classes.dropdownContent, props.contentClass]\"\n :class=\"classes.actionsDropdown\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n class=\"button
|
|
1
|
+
{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { useCssModule } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n\n defineOptions({\n name: 'll-actions-dropdown',\n });\n\n export interface ActionsDropdownProps {\n /**\n * Used to position the dropdown relative to target\n * Options: left, right\n */\n align?: 'left' | 'right';\n /**\n * Indicates whether the trigger button is disabled or not\n */\n disabled?: boolean;\n /**\n * Class to be applied to the dropdown content\n */\n contentClass?: string;\n /**\n * Text to be displayed on the trigger button\n */\n buttonText?: string;\n }\n\n const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n align: 'left',\n disabled: false,\n contentClass: '',\n buttonText: () => t('ll.actions'),\n });\n\n const classes = useCssModule();\n</script>\n\n<template>\n <Dropdown\n :align=\"props.align\"\n :content-class=\"[classes.dropdownContent, props.contentClass]\"\n :class=\"classes.actionsDropdown\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n class=\"button align-middle align-justify border-blue text-blue tw-flex tw-w-full tw-border\"\n secondary\n :aria-expanded=\"isActive.toString()\"\n :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n :disabled=\"props.disabled\"\n @click=\"toggle\"\n >\n {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n </Button>\n </template>\n\n <template v-if=\"!props.disabled\" #default>\n <!-- @slot Dropdown content -->\n <slot></slot>\n </template>\n </Dropdown>\n</template>\n\n<style module>\n .actionButton {\n min-width: 156px;\n white-space: normal;\n }\n\n .actionButton:hover {\n background-color: var(--color-blue-100);\n border-color: var(--color-blue-500) !important;\n }\n\n .disabled {\n background-color: var(--color-ice-100) !important;\n border-color: var(--color-ice-500) !important;\n color: var(--color-ice-500) !important;\n }\n\n .dropdownContent {\n margin-top: 4px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n margin-left: 0;\n margin-right: 0;\n max-width: 90vw;\n }\n\n .dropdownContent:global(.dropdown__content)::after {\n display: none;\n }\n\n @media screen(md) {\n .actionsDropdown {\n min-width: 156px;\n }\n\n .dropdownContent:global(.dropdown__content) {\n min-width: 156px;\n }\n }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as w, ref as v, useSlots as y, resolveComponent as $, openBlock as a, createElementBlock as r, unref as x, createBlock as b, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as d, renderSlot as p } from "vue";
|
|
2
2
|
import { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
|
|
3
3
|
import i from "./Icon.js";
|
|
4
4
|
import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
|
|
5
5
|
import "lodash-es/uniqueId";
|
|
6
6
|
import "./index-79ce320f.js";
|
|
7
7
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
8
|
-
const C = { class: "flex-1
|
|
8
|
+
const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A = { class: "text-truncate" }, B = { key: 1 }, I = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, N = { class: "text-truncate" }, g = /* @__PURE__ */ w({
|
|
9
9
|
__name: "AppNavigationItem",
|
|
10
10
|
props: {
|
|
11
11
|
to: {},
|
|
@@ -14,13 +14,13 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
|
|
|
14
14
|
isActive: { type: Boolean, default: !1 }
|
|
15
15
|
},
|
|
16
16
|
setup(u) {
|
|
17
|
-
const t = u, l =
|
|
17
|
+
const t = u, l = v(!1), f = y();
|
|
18
18
|
return (e, c) => {
|
|
19
|
-
const _ =
|
|
19
|
+
const _ = $("router-link");
|
|
20
20
|
return a(), r("li", null, [
|
|
21
|
-
|
|
21
|
+
x(f)["sub-items"] ? (a(), r("div", B, [
|
|
22
22
|
s("button", {
|
|
23
|
-
class: n([[e.$style.item, { [e.$style.expanded]: l.value }], "flex items-center justify-between
|
|
23
|
+
class: n([[e.$style.item, { [e.$style.expanded]: l.value }], "text-capitalize tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal"]),
|
|
24
24
|
onClick: c[0] || (c[0] = () => l.value = !l.value)
|
|
25
25
|
}, [
|
|
26
26
|
s("div", I, [
|
|
@@ -48,10 +48,10 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
|
|
|
48
48
|
]),
|
|
49
49
|
_: 3
|
|
50
50
|
}, 8, ["is-expanded", "class"])
|
|
51
|
-
])) : (a(),
|
|
51
|
+
])) : (a(), b(_, {
|
|
52
52
|
key: 0,
|
|
53
53
|
to: t.to,
|
|
54
|
-
class: n([[e.$style.item, { [e.$style.active]: t.isActive }], "flex items-center justify-between
|
|
54
|
+
class: n([[e.$style.item, { [e.$style.active]: t.isActive }], "text-capitalize tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal"]),
|
|
55
55
|
"active-class": e.$style.active
|
|
56
56
|
}, {
|
|
57
57
|
default: m(() => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useSlots } from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AppNavigationItemProps {\n /**\n * Location to navigate to\n */\n to: RouteLocationRaw,\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n /**\n * Text label to render\n */\n label: string;\n /**\n * Indicates whether the route is active or not\n */\n isActive?: boolean;\n }\n\n const isExpanded = ref(false);\n\n const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n isActive: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <li>\n <router-link\n v-if=\"!slots['sub-items']\"\n :to=\"props.to\"\n :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n :active-class=\"$style.active\"\n class=\"flex items-center justify-between
|
|
1
|
+
{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { ref, useSlots } from 'vue';\n import { type RouteLocationRaw } from 'vue-router';\n\n import Expand from '../Expand/Expand.vue';\n import { IconName } from '../Icon/Icon.types';\n import Icon from '../Icon/Icon.vue';\n\n export interface AppNavigationItemProps {\n /**\n * Location to navigate to\n */\n to: RouteLocationRaw,\n /**\n * Icon to render on the left side\n */\n icon: IconName;\n /**\n * Text label to render\n */\n label: string;\n /**\n * Indicates whether the route is active or not\n */\n isActive?: boolean;\n }\n\n const isExpanded = ref(false);\n\n const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n isActive: false,\n });\n\n const slots = useSlots();\n</script>\n\n<template>\n <li>\n <router-link\n v-if=\"!slots['sub-items']\"\n :to=\"props.to\"\n :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n :active-class=\"$style.active\"\n class=\"text-capitalize tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal\"\n >\n <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <!-- @slot Default component slot, for content to the right side of item -->\n <slot></slot>\n </router-link>\n <div v-else>\n <button\n :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n class=\"text-capitalize tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal\"\n @click=\"() => (isExpanded = !isExpanded)\"\n >\n <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n <span class=\"text-truncate\">{{ props.label }}</span>\n </div>\n <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n </button>\n <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n <ul :class=\"$style['sub-items']\">\n <!-- @slot Sub items component slot, for rendering nested navigation items -->\n <slot name=\"sub-items\"></slot>\n </ul>\n </Expand>\n </div>\n </li>\n</template>\n\n<style module>\n .item {\n border-left: 6px solid transparent;\n color: var(--color-ice-500);\n padding: 10px 12px;\n transition: background-color 150ms;\n }\n\n .item:hover,\n .item:focus {\n text-decoration: none;\n background: #140e35;\n }\n\n .sub-items .item {\n padding-left: 40px;\n }\n\n .expanded {\n background-color: #263256;\n }\n\n .active {\n color: var(--color-seafoam-500);\n border-color: var(--color-seafoam-500);\n background: #140e35;\n }\n\n .caret {\n transition: transform 300ms ease-in-out;\n }\n\n .expanded .caret {\n transform: rotate(-90deg);\n }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/ButtonGroup.js
CHANGED
|
@@ -21,9 +21,9 @@ const k = ["data-test"], x = ["data-test", "disabled", "onClick"], C = {
|
|
|
21
21
|
}
|
|
22
22
|
return (t, o) => (l(), s("div", {
|
|
23
23
|
class: p([
|
|
24
|
-
"flex",
|
|
24
|
+
"tw-flex",
|
|
25
25
|
t.$style.buttonGroup,
|
|
26
|
-
{ "w-full": e.fullWidth },
|
|
26
|
+
{ "tw-w-full": e.fullWidth },
|
|
27
27
|
{ [t.$style.single]: u.value },
|
|
28
28
|
{ [t.$style["can-deactivate"]]: i.value }
|
|
29
29
|
]),
|
package/dist/ButtonGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n /**\n * @deprecated use RadioGroup instead with `variant=\"button\"`.\n * RadioGroup uses pretty much the same API as the ButtonGroup,\n * but every button is a radio element which makes more sense semantically.\n */\n export default {\n name: 'll-button-group',\n };\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref } from 'vue';\n\n export interface ButtonGroupOption {\n id: string;\n active?: boolean;\n text: string;\n }\n\n export interface ButtonGroupProps {\n /**\n * A name for the group, useful when multiple ButtonGroups exist on the page\n */\n groupName?: string;\n\n /**\n * The list of buttons to render\n */\n options: ButtonGroupOption[];\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the active button can be deactivated\n */\n allowDeactivate?: boolean;\n }\n\n const props = withDefaults(defineProps<ButtonGroupProps>(), {\n groupName: uniqueId(),\n fullWidth: false,\n disabled: false,\n allowDeactivate: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'input', activeButton: ButtonGroupOption | null): void;\n }>();\n\n const isSingleButton = computed(() => props.options.length === 1);\n\n const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n const activeButton = ref(props.options.find((o) => o.active) || null);\n\n function onClick(clickedOption: ButtonGroupOption) {\n if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n activeButton.value = null;\n } else {\n activeButton.value = clickedOption;\n }\n\n emit('input', activeButton.value);\n }\n</script>\n\n<template>\n <div\n :class=\"[\n 'flex',\n $style.buttonGroup,\n { 'w-full': props.fullWidth },\n { [$style.single]: isSingleButton },\n { [$style['can-deactivate']]: canDeactivate },\n ]\"\n :data-test=\"`button-group-${$props.groupName}`\"\n >\n <button\n v-for=\"option in props.options\"\n :key=\"`${props.groupName}-${option.id}`\"\n :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n :tabindex=\"0\"\n :disabled=\"props.disabled\"\n @click.prevent=\"onClick(option)\"\n >\n {{ option.text }}\n </button>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n // full width buttons\n .buttonGroup:global(.w-full) > button {\n flex: 1 1 50%;\n max-width: 100%;\n }\n\n .button {\n border: 1px solid var(--color-ice-500);\n border-radius: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-body);\n min-width: 100px;\n padding: 7px 8px;\n }\n\n .single .button {\n border: 1px solid var(--color-ice-700);\n color: var(--color-ice-700);\n }\n\n .button:focus,\n .button:hover {\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n z-index: 1;\n }\n\n .button.active {\n background-color: var(--color-blue-100);\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n cursor: default;\n z-index: 1;\n }\n\n .button.active + button {\n border-left: 1px solid transparent;\n }\n\n .single .button.active,\n .can-deactivate .button.active {\n cursor: pointer;\n }\n\n .button[disabled] {\n color: var(--color-ice-500);\n cursor: default;\n pointer-events: none;\n }\n\n .button:focus {\n box-shadow: none;\n outline: 0;\n }\n\n .button:not(:first-child) {\n margin-left: -1px;\n }\n\n .button:not(:last-child) {\n border-right: 1px solid transparent;\n }\n\n .button:first-child {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n .button:last-child {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n /**\n * @deprecated use RadioGroup instead with `variant=\"button\"`.\n * RadioGroup uses pretty much the same API as the ButtonGroup,\n * but every button is a radio element which makes more sense semantically.\n */\n export default {\n name: 'll-button-group',\n };\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, ref } from 'vue';\n\n export interface ButtonGroupOption {\n id: string;\n active?: boolean;\n text: string;\n }\n\n export interface ButtonGroupProps {\n /**\n * A name for the group, useful when multiple ButtonGroups exist on the page\n */\n groupName?: string;\n\n /**\n * The list of buttons to render\n */\n options: ButtonGroupOption[];\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the active button can be deactivated\n */\n allowDeactivate?: boolean;\n }\n\n const props = withDefaults(defineProps<ButtonGroupProps>(), {\n groupName: uniqueId(),\n fullWidth: false,\n disabled: false,\n allowDeactivate: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'input', activeButton: ButtonGroupOption | null): void;\n }>();\n\n const isSingleButton = computed(() => props.options.length === 1);\n\n const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n const activeButton = ref(props.options.find((o) => o.active) || null);\n\n function onClick(clickedOption: ButtonGroupOption) {\n if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n activeButton.value = null;\n } else {\n activeButton.value = clickedOption;\n }\n\n emit('input', activeButton.value);\n }\n</script>\n\n<template>\n <div\n :class=\"[\n 'tw-flex',\n $style.buttonGroup,\n { 'tw-w-full': props.fullWidth },\n { [$style.single]: isSingleButton },\n { [$style['can-deactivate']]: canDeactivate },\n ]\"\n :data-test=\"`button-group-${$props.groupName}`\"\n >\n <button\n v-for=\"option in props.options\"\n :key=\"`${props.groupName}-${option.id}`\"\n :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n :tabindex=\"0\"\n :disabled=\"props.disabled\"\n @click.prevent=\"onClick(option)\"\n >\n {{ option.text }}\n </button>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n // full width buttons\n .buttonGroup:global(.w-full) > button {\n flex: 1 1 50%;\n max-width: 100%;\n }\n\n .button {\n border: 1px solid var(--color-ice-500);\n border-radius: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-body);\n min-width: 100px;\n padding: 7px 8px;\n }\n\n .single .button {\n border: 1px solid var(--color-ice-700);\n color: var(--color-ice-700);\n }\n\n .button:focus,\n .button:hover {\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n z-index: 1;\n }\n\n .button.active {\n background-color: var(--color-blue-100);\n border: 1px solid var(--color-blue-500) !important;\n color: var(--color-blue-500);\n cursor: default;\n z-index: 1;\n }\n\n .button.active + button {\n border-left: 1px solid transparent;\n }\n\n .single .button.active,\n .can-deactivate .button.active {\n cursor: pointer;\n }\n\n .button[disabled] {\n color: var(--color-ice-500);\n cursor: default;\n pointer-events: none;\n }\n\n .button:focus {\n box-shadow: none;\n outline: 0;\n }\n\n .button:not(:first-child) {\n margin-left: -1px;\n }\n\n .button:not(:last-child) {\n border-right: 1px solid transparent;\n }\n\n .button:first-child {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n\n .button:last-child {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as g, inject as y, openBlock as r, createBlock as
|
|
1
|
+
import { defineComponent as g, inject as y, openBlock as r, createBlock as d, withCtx as o, createVNode as i, createTextVNode as n, toDisplayString as l, unref as e, createElementVNode as c, createElementBlock as f, Fragment as w, renderList as D, normalizeClass as k, createCommentVNode as m } from "vue";
|
|
2
2
|
import { t as S } from "./locale.js";
|
|
3
3
|
import u from "./Button.js";
|
|
4
4
|
import "lodash-es/cloneDeep";
|
|
@@ -33,7 +33,7 @@ const I = {
|
|
|
33
33
|
b.key,
|
|
34
34
|
b.defaults
|
|
35
35
|
);
|
|
36
|
-
return (T, L) => _.sortOptions.length ? (r(),
|
|
36
|
+
return (T, L) => _.sortOptions.length ? (r(), d(V, {
|
|
37
37
|
key: 0,
|
|
38
38
|
align: "left",
|
|
39
39
|
class: "stash-data-view-sort-button",
|
|
@@ -53,7 +53,7 @@ const I = {
|
|
|
53
53
|
stacked: ""
|
|
54
54
|
}, {
|
|
55
55
|
default: o(() => [
|
|
56
|
-
|
|
56
|
+
n(l(e(S)("ll.sort")), 1)
|
|
57
57
|
]),
|
|
58
58
|
_: 1
|
|
59
59
|
})
|
|
@@ -67,7 +67,7 @@ const I = {
|
|
|
67
67
|
key: t.id
|
|
68
68
|
}, [
|
|
69
69
|
c("li", {
|
|
70
|
-
class: k(["dropdown__item rounded", { "is-selected": t.id === e(a) && e(s) === "asc" }]),
|
|
70
|
+
class: k(["dropdown__item tw-rounded", { "is-selected": t.id === e(a) && e(s) === "asc" }]),
|
|
71
71
|
onClick: () => e(p)(t.id, { sortOrder: "asc", shouldEmit: !0 })
|
|
72
72
|
}, [
|
|
73
73
|
i(u, {
|
|
@@ -75,8 +75,8 @@ const I = {
|
|
|
75
75
|
class: "tw-h-9"
|
|
76
76
|
}, {
|
|
77
77
|
default: o(() => [
|
|
78
|
-
|
|
79
|
-
t.id === e(a) && e(s) === "asc" ? (r(),
|
|
78
|
+
n(l(t.labelAsc) + " ", 1),
|
|
79
|
+
t.id === e(a) && e(s) === "asc" ? (r(), d(h, {
|
|
80
80
|
key: 0,
|
|
81
81
|
name: "check",
|
|
82
82
|
class: "tw-ml-auto tw-text-blue-500"
|
|
@@ -86,7 +86,7 @@ const I = {
|
|
|
86
86
|
}, 1024)
|
|
87
87
|
], 10, E),
|
|
88
88
|
c("li", {
|
|
89
|
-
class: k(["dropdown__item rounded", { "is-selected": t.id === e(a) && e(s) === "desc" }]),
|
|
89
|
+
class: k(["dropdown__item tw-rounded", { "is-selected": t.id === e(a) && e(s) === "desc" }]),
|
|
90
90
|
onClick: () => e(p)(t.id, { sortOrder: "desc", shouldEmit: !0 })
|
|
91
91
|
}, [
|
|
92
92
|
i(u, {
|
|
@@ -94,8 +94,8 @@ const I = {
|
|
|
94
94
|
class: "tw-h-9"
|
|
95
95
|
}, {
|
|
96
96
|
default: o(() => [
|
|
97
|
-
|
|
98
|
-
t.id === e(a) && e(s) === "desc" ? (r(),
|
|
97
|
+
n(l(t.labelDesc) + " ", 1),
|
|
98
|
+
t.id === e(a) && e(s) === "desc" ? (r(), d(h, {
|
|
99
99
|
key: 0,
|
|
100
100
|
name: "check",
|
|
101
101
|
class: "tw-ml-auto tw-text-blue-500"
|
|
@@ -111,7 +111,7 @@ const I = {
|
|
|
111
111
|
})) : m("", !0);
|
|
112
112
|
}
|
|
113
113
|
});
|
|
114
|
-
const rt = /* @__PURE__ */ B(A, [["__scopeId", "data-v-
|
|
114
|
+
const rt = /* @__PURE__ */ B(A, [["__scopeId", "data-v-db270977"]]);
|
|
115
115
|
export {
|
|
116
116
|
rt as default
|
|
117
117
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { inject } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n import IconLabel from '../IconLabel/IconLabel.vue';\n import { SortOption } from './DataViewSortButton.types';\n\n export interface DataViewToolbarProps {\n /**\n * An array of sort options to display in the dropdown.\n */\n sortOptions?: SortOption[];\n }\n\n const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n sortOptions: () => [],\n });\n\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n</script>\n\n<template>\n <Dropdown\n v-if=\"props.sortOptions.length\"\n align=\"left\"\n class=\"stash-data-view-sort-button\"\n data-test=\"stash-data-view-sort-button\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n icon-label\n :aria-expanded=\"isActive.toString()\"\n class=\"tw-text-blue-500\"\n data-test=\"stash-data-view-sort-button|sort-menu-button\"\n @click=\"toggle\"\n >\n <IconLabel icon=\"sort\" stacked>\n {{ t('ll.sort') }}\n </IconLabel>\n </Button>\n </template>\n <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n <li\n class=\"dropdown__item rounded\"\n :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'asc' }\"\n @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n >\n <Button inline class=\"tw-h-9\">\n {{ sortOption.labelAsc }}\n <Icon\n v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n name=\"check\"\n class=\"tw-ml-auto tw-text-blue-500\"\n />\n </Button>\n </li>\n <li\n class=\"dropdown__item rounded\"\n :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'desc' }\"\n @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n >\n <Button inline class=\"tw-h-9\">\n {{ sortOption.labelDesc }}\n <Icon\n v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n name=\"check\"\n class=\"tw-ml-auto tw-text-blue-500\"\n />\n </Button>\n </li>\n </template>\n </ul>\n </Dropdown>\n</template>\n\n<style scoped>\n .dropdown__item > button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n</style>\n"],"names":["currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsBQ,EAAE,eAAAA,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { inject } from 'vue';\n\n import { t } from '../../locale';\n import Button from '../Button/Button.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import Icon from '../Icon/Icon.vue';\n import IconLabel from '../IconLabel/IconLabel.vue';\n import { SortOption } from './DataViewSortButton.types';\n\n export interface DataViewToolbarProps {\n /**\n * An array of sort options to display in the dropdown.\n */\n sortOptions?: SortOption[];\n }\n\n const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n sortOptions: () => [],\n });\n\n const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n DATA_VIEW_INJECTION.key,\n DATA_VIEW_INJECTION.defaults,\n );\n</script>\n\n<template>\n <Dropdown\n v-if=\"props.sortOptions.length\"\n align=\"left\"\n class=\"stash-data-view-sort-button\"\n data-test=\"stash-data-view-sort-button\"\n >\n <template #toggle=\"{ isActive, toggle }\">\n <Button\n icon-label\n :aria-expanded=\"isActive.toString()\"\n class=\"tw-text-blue-500\"\n data-test=\"stash-data-view-sort-button|sort-menu-button\"\n @click=\"toggle\"\n >\n <IconLabel icon=\"sort\" stacked>\n {{ t('ll.sort') }}\n </IconLabel>\n </Button>\n </template>\n <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n <li\n class=\"dropdown__item tw-rounded\"\n :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'asc' }\"\n @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n >\n <Button inline class=\"tw-h-9\">\n {{ sortOption.labelAsc }}\n <Icon\n v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n name=\"check\"\n class=\"tw-ml-auto tw-text-blue-500\"\n />\n </Button>\n </li>\n <li\n class=\"dropdown__item tw-rounded\"\n :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'desc' }\"\n @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n >\n <Button inline class=\"tw-h-9\">\n {{ sortOption.labelDesc }}\n <Icon\n v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n name=\"check\"\n class=\"tw-ml-auto tw-text-blue-500\"\n />\n </Button>\n </li>\n </template>\n </ul>\n </Dropdown>\n</template>\n\n<style scoped>\n .dropdown__item > button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n</style>\n"],"names":["currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsBQ,EAAE,eAAAA,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/DatePicker.js
CHANGED
|
@@ -11402,7 +11402,7 @@ function lY(e, t, r, n, a, o) {
|
|
|
11402
11402
|
U(i, vr(Xa(e.$attrs)), null, 16)
|
|
11403
11403
|
], 64)) : (S(), $e(u, vr(Dt({ key: 1 }, e.$attrs)), null, 16));
|
|
11404
11404
|
}
|
|
11405
|
-
const cY = /* @__PURE__ */ bt(sY, [["render", lY]]), fY = ["id"], dY = { class: "
|
|
11405
|
+
const cY = /* @__PURE__ */ bt(sY, [["render", lY]]), fY = ["id"], dY = { class: "tw-pt-1.5 tw-text-right" }, vY = /* @__PURE__ */ _e({
|
|
11406
11406
|
__name: "DatePicker",
|
|
11407
11407
|
props: {
|
|
11408
11408
|
availableDates: { default: void 0 },
|
|
@@ -11593,7 +11593,7 @@ const cY = /* @__PURE__ */ bt(sY, [["render", lY]]), fY = ["id"], dY = { class:
|
|
|
11593
11593
|
_: 1
|
|
11594
11594
|
}, 8, ["class"])) : (S(), $e(Lr, {
|
|
11595
11595
|
key: 1,
|
|
11596
|
-
class: ne([$.$style["calendar-icon"], { "cursor-pointer": !$.disabled }]),
|
|
11596
|
+
class: ne([$.$style["calendar-icon"], { "tw-cursor-pointer": !$.disabled }]),
|
|
11597
11597
|
name: u.value ? "recent" : "calendar",
|
|
11598
11598
|
onClick: (x) => !$.disabled && T()
|
|
11599
11599
|
}, null, 8, ["class", "name", "onClick"]))
|