@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -39
- package/dist/ActionsDropdown.js +25 -25
- package/dist/ActionsDropdown.js.map +1 -1
- package/dist/AddressSelect.js +12 -11
- package/dist/AddressSelect.js.map +1 -1
- package/dist/Alert.js +9 -9
- package/dist/Alert.js.map +1 -1
- package/dist/AppNavigationItem.js +22 -22
- package/dist/AppNavigationItem.js.map +1 -1
- package/dist/AppSidebar.js +11 -11
- package/dist/AppSidebar.js.map +1 -1
- package/dist/AppTopbar.js +12 -12
- package/dist/Avatar.js +12 -12
- package/dist/Avatar.js.map +1 -1
- package/dist/Backdrop.js +1 -1
- package/dist/Backdrop.js.map +1 -1
- package/dist/Badge.js +12 -12
- package/dist/Badge.js.map +1 -1
- package/dist/Badge.vue.d.ts +1 -1
- package/dist/Button.js +1 -1
- package/dist/Button.js.map +1 -1
- package/dist/Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js +17 -0
- package/dist/Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js.map +1 -0
- package/dist/ButtonGroup.js +28 -28
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/Card.js +3 -3
- package/dist/Card.js.map +1 -1
- package/dist/CardHeader.js +3 -3
- package/dist/CardMedia.js +1 -1
- package/dist/CardMedia.js.map +1 -1
- package/dist/Carousel.js +260 -248
- package/dist/Carousel.js.map +1 -1
- package/dist/Checkbox.js +58 -46
- package/dist/Checkbox.js.map +1 -1
- package/dist/Checkbox.vue.d.ts +2 -0
- package/dist/Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js +9 -0
- package/dist/Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js.map +1 -0
- package/dist/ChevronToggle.js +1 -1
- package/dist/Chip.js +1 -1
- package/dist/Chip.js.map +1 -1
- package/dist/ConfirmationCodeInput.js +21 -21
- package/dist/ConfirmationCodeInput.js.map +1 -1
- package/dist/ContextSwitcher.js +6 -5
- package/dist/ContextSwitcher.js.map +1 -1
- package/dist/Copy.js +1 -1
- package/dist/CurrencyInput.js +2 -2
- package/dist/DataView.js +1 -1
- package/dist/DataViewFilters.js +7 -7
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewSortButton.js +47 -38
- package/dist/DataViewSortButton.js.map +1 -1
- package/dist/DataViewToolbar.js +4 -4
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/DatePicker.js +12 -15
- package/dist/DatePicker.js.map +1 -1
- package/dist/DescriptionListTerm.js +8 -8
- package/dist/DescriptionListTerm.js.map +1 -1
- package/dist/Dialog.js +46 -46
- package/dist/Dialog.js.map +1 -1
- package/dist/Divider.js +9 -9
- package/dist/Divider.js.map +1 -1
- package/dist/Dropdown.js +17 -17
- package/dist/Dropdown.js.map +1 -1
- package/dist/EmptyState.js +1 -1
- package/dist/EmptyState.js.map +1 -1
- package/dist/Expand.js +1 -1
- package/dist/{Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js → Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js} +14 -15
- package/dist/Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js.map +1 -0
- package/dist/Field.js +2 -2
- package/dist/Field.vue.d.ts +1 -1
- package/dist/{Field.vue_vue_type_script_setup_true_lang-475832fe.js → Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js} +5 -5
- package/dist/Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js.map +1 -0
- package/dist/FileUpload.js +49 -47
- package/dist/FileUpload.js.map +1 -1
- package/dist/FilterChip.js +20 -20
- package/dist/FilterChip.js.map +1 -1
- package/dist/FilterDrawerItem.js +4 -4
- package/dist/FilterDrawerItem.js.map +1 -1
- package/dist/FilterDropdown.js +19 -19
- package/dist/FilterDropdown.js.map +1 -1
- package/dist/FilterSelect.js +27 -27
- package/dist/FilterSelect.js.map +1 -1
- package/dist/Filters.js +51 -50
- package/dist/Filters.js.map +1 -1
- package/dist/HttpError.js +28 -28
- package/dist/HttpError.js.map +1 -1
- package/dist/IconLabel.js +17 -17
- package/dist/IconLabel.js.map +1 -1
- package/dist/IconLabel.vue.d.ts +1 -1
- package/dist/Illustration.js +10 -60
- package/dist/Illustration.js.map +1 -1
- package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js +56 -0
- package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js.map +1 -0
- package/dist/Image.js +67 -72
- package/dist/Image.js.map +1 -1
- package/dist/InlineEdit.js +3 -3
- package/dist/InlineEdit.js.map +1 -1
- package/dist/Input.js +43 -43
- package/dist/Input.js.map +1 -1
- package/dist/InputOptions.js +34 -33
- package/dist/InputOptions.js.map +1 -1
- package/dist/Label.js +1 -1
- package/dist/Label.vue.d.ts +13 -2
- package/dist/Label.vue_vue_type_script_setup_true_lang-4b02087f.js +38 -0
- package/dist/Label.vue_vue_type_script_setup_true_lang-4b02087f.js.map +1 -0
- package/dist/ListItem.js +16 -15
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemCell.js +9 -9
- package/dist/ListItemCell.js.map +1 -1
- package/dist/ListView.js +144 -140
- package/dist/ListView.js.map +1 -1
- package/dist/Loading.js +17 -10
- package/dist/Loading.js.map +1 -1
- package/dist/Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js +8 -0
- package/dist/Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/Menu.js.map +1 -1
- package/dist/MenuItem.js +20 -14
- package/dist/MenuItem.js.map +1 -1
- package/dist/Metric.js +4 -4
- package/dist/Metric.js.map +1 -1
- package/dist/Modal.js +21 -21
- package/dist/Modal.js.map +1 -1
- package/dist/Modals.js +13 -13
- package/dist/Modals.js.map +1 -1
- package/dist/Module.js +2 -2
- package/dist/Module.js.map +1 -1
- package/dist/ModuleContent.js +2 -2
- package/dist/ModuleContent.js.map +1 -1
- package/dist/ModuleFooter.js +11 -11
- package/dist/ModuleFooter.js.map +1 -1
- package/dist/ModuleHeader.js +6 -6
- package/dist/ModuleHeader.js.map +1 -1
- package/dist/ObfuscateText.js +30 -32
- package/dist/ObfuscateText.js.map +1 -1
- package/dist/ObfuscateText.vue.d.ts +1 -1
- package/dist/PageContent.js +9 -9
- package/dist/PageContent.js.map +1 -1
- package/dist/PageHeader.js +24 -24
- package/dist/PageHeader.js.map +1 -1
- package/dist/PageNavigation.js +3 -3
- package/dist/PageNavigation.js.map +1 -1
- package/dist/Paginate.js +1 -1
- package/dist/Paginate.js.map +1 -1
- package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js +11 -0
- package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js.map +1 -0
- package/dist/QuickAction.js +20 -17
- package/dist/QuickAction.js.map +1 -1
- package/dist/Radio.js +30 -15
- package/dist/Radio.js.map +1 -1
- package/dist/RadioGroup.js +177 -148
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioNew.js +118 -91
- package/dist/RadioNew.js.map +1 -1
- package/dist/SearchBar.js +27 -27
- package/dist/SearchBar.js.map +1 -1
- package/dist/Select.js +189 -188
- package/dist/Select.js.map +1 -1
- package/dist/SelectStatus.js +22 -21
- package/dist/SelectStatus.js.map +1 -1
- package/dist/Step.js +37 -37
- package/dist/Step.js.map +1 -1
- package/dist/Switch.js +44 -36
- package/dist/Switch.js.map +1 -1
- package/dist/Tab.js +3 -2
- package/dist/Tab.js.map +1 -1
- package/dist/{Tab.vue_vue_type_script_setup_true_lang-b810bee8.js → Tab.vue_vue_type_script_setup_true_lang-69d1b046.js} +23 -22
- package/dist/Tab.vue_vue_type_script_setup_true_lang-69d1b046.js.map +1 -0
- package/dist/Table.js +23 -22
- package/dist/Table.js.map +1 -1
- package/dist/Table.keys-cf93df19.js +27 -0
- package/dist/{Table.keys-1ebe4ecb.js.map → Table.keys-cf93df19.js.map} +1 -1
- package/dist/TableCell.js +24 -23
- package/dist/TableCell.js.map +1 -1
- package/dist/TableHeaderCell.js +37 -36
- package/dist/TableHeaderCell.js.map +1 -1
- package/dist/TableHeaderRow.js +13 -12
- package/dist/TableHeaderRow.js.map +1 -1
- package/dist/TableRow.js +36 -34
- package/dist/TableRow.js.map +1 -1
- package/dist/Tabs.js +2 -2
- package/dist/{Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js → Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js} +26 -26
- package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js.map +1 -0
- package/dist/Textarea.js +61 -53
- package/dist/Textarea.js.map +1 -1
- package/dist/Toast.js +23 -23
- package/dist/Toast.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/constants.d.ts +33 -26
- package/dist/constants.js +56 -41
- package/dist/constants.js.map +1 -1
- package/dist/index.js +21 -20
- package/dist/index.js.map +1 -1
- package/dist/storage.js +3 -2
- package/dist/storage.js.map +1 -1
- package/dist/tailwind-base.d.ts +16 -16
- package/dist/tailwind-base.js +16 -6
- package/dist/tailwind-base.js.map +1 -1
- package/dist/useGoogleMaps.js.map +1 -1
- package/dist/utils/helpers.js +37 -37
- package/dist/utils/helpers.js.map +1 -1
- package/dist/utils/storage.js +30 -29
- package/dist/utils/storage.js.map +1 -1
- package/package.json +2 -2
- package/styles/_core.scss +1 -1
- package/styles/backwards-compat.css +61 -105
- package/styles/base.css +271 -113
- package/tailwind-base.ts +6 -1
- package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js +0 -17
- package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map +0 -1
- package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js +0 -2
- package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map +0 -1
- package/dist/Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js.map +0 -1
- package/dist/Field.vue_vue_type_script_setup_true_lang-475832fe.js.map +0 -1
- package/dist/Label.vue_vue_type_script_setup_true_lang-1d29d98a.js +0 -37
- package/dist/Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map +0 -1
- package/dist/Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js +0 -2
- package/dist/Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js.map +0 -1
- package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js +0 -11
- package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map +0 -1
- package/dist/Tab.vue_vue_type_script_setup_true_lang-b810bee8.js.map +0 -1
- package/dist/Table.keys-1ebe4ecb.js +0 -27
- package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js.map +0 -1
- package/styles/_base.scss +0 -493
- package/styles/elements/_links.scss +0 -32
- package/styles/elements/_lists.scss +0 -31
- package/styles/elements/_misc.scss +0 -16
- package/styles/main.scss +0 -38
package/dist/FilterDropdown.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { defineComponent as L, inject as b, ref as y, computed as O, openBlock as u, createBlock as k, withCtx as
|
|
1
|
+
import { defineComponent as L, inject as b, ref as y, computed as O, openBlock as u, createBlock as k, withCtx as r, createVNode as w, unref as o, createTextVNode as f, toDisplayString as m, createElementVNode as d, renderSlot as R, Transition as W, createElementBlock as j, createCommentVNode as x } from "vue";
|
|
2
2
|
import J from "lodash-es/throttle";
|
|
3
3
|
import { t as C } from "./locale.js";
|
|
4
4
|
import D from "./Button.js";
|
|
5
5
|
import "lodash-es/cloneDeep";
|
|
6
6
|
import "lodash-es/uniqueId";
|
|
7
7
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
8
|
-
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-
|
|
8
|
+
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
|
|
9
9
|
import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
10
10
|
import { D as z } from "./DataViewFilters.keys-c80ffabe.js";
|
|
11
11
|
import G from "./Dropdown.js";
|
|
12
12
|
import $ from "./FilterChip.js";
|
|
13
13
|
import "lodash-es/get";
|
|
14
|
-
import "./Button.vue_used_vue_type_style_index_0_lang.module-
|
|
14
|
+
import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
|
|
15
15
|
import "./_plugin-vue_export-helper-dad06003.js";
|
|
16
16
|
import "./constants.js";
|
|
17
17
|
import "./clickoutside.js";
|
|
@@ -24,10 +24,10 @@ import "./Icon.js";
|
|
|
24
24
|
import "./index-79ce320f.js";
|
|
25
25
|
import "./Chip.js";
|
|
26
26
|
import "./utils/colorScheme.js";
|
|
27
|
-
const q = { class: "tw-flex tw-flex-col tw-rounded
|
|
27
|
+
const q = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, H = { class: "tw-relative tw-grow tw-overflow-hidden tw-rounded-t" }, K = {
|
|
28
28
|
key: 0,
|
|
29
|
-
class: "tw-
|
|
30
|
-
}, M = { class: "tw-
|
|
29
|
+
class: "tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow"
|
|
30
|
+
}, M = { class: "tw-flex tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5" }, bt = /* @__PURE__ */ L({
|
|
31
31
|
__name: "FilterDropdown",
|
|
32
32
|
props: {
|
|
33
33
|
label: {},
|
|
@@ -37,7 +37,7 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
37
37
|
},
|
|
38
38
|
emits: ["reset", "dismiss"],
|
|
39
39
|
setup(T, { emit: p }) {
|
|
40
|
-
const
|
|
40
|
+
const s = T, { isLoading: h } = b(F.key, F.defaults), l = b(z.key);
|
|
41
41
|
if (!(l != null && l.useFiltersInstance))
|
|
42
42
|
throw new Error(
|
|
43
43
|
"FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters()."
|
|
@@ -53,11 +53,11 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
53
53
|
}
|
|
54
54
|
function A() {
|
|
55
55
|
var t;
|
|
56
|
-
E(
|
|
56
|
+
E(s.group), p("reset"), (t = i.value) == null || t.dismiss();
|
|
57
57
|
}
|
|
58
58
|
async function N() {
|
|
59
59
|
var e, a;
|
|
60
|
-
const { preventDismiss: t } = await ((e =
|
|
60
|
+
const { preventDismiss: t } = await ((e = s.onApply) == null ? void 0 : e.call(s)) || I() || {};
|
|
61
61
|
t || (a = i.value) == null || a.dismiss();
|
|
62
62
|
}
|
|
63
63
|
function V() {
|
|
@@ -83,26 +83,26 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
83
83
|
offset: { y: 6 },
|
|
84
84
|
onDismiss: V
|
|
85
85
|
}, {
|
|
86
|
-
toggle:
|
|
86
|
+
toggle: r(() => [
|
|
87
87
|
w($, {
|
|
88
88
|
class: "tw-rounded-full",
|
|
89
89
|
"has-dropdown": "",
|
|
90
90
|
"is-dropdown-open": c.value,
|
|
91
|
-
"filter-count": o(v)[
|
|
91
|
+
"filter-count": o(v)[s.group],
|
|
92
92
|
"is-selected": c.value,
|
|
93
93
|
onClick: S
|
|
94
94
|
}, {
|
|
95
|
-
default:
|
|
96
|
-
f(m(
|
|
95
|
+
default: r(() => [
|
|
96
|
+
f(m(s.label), 1)
|
|
97
97
|
]),
|
|
98
98
|
_: 1
|
|
99
99
|
}, 8, ["is-dropdown-open", "filter-count", "is-selected"])
|
|
100
100
|
]),
|
|
101
|
-
default:
|
|
101
|
+
default: r(() => [
|
|
102
102
|
d("div", q, [
|
|
103
103
|
d("div", H, [
|
|
104
104
|
d("div", {
|
|
105
|
-
class: "tw-
|
|
105
|
+
class: "tw-h-full tw-overflow-auto tw-p-6",
|
|
106
106
|
onScroll: e[0] || (e[0] = //@ts-ignore
|
|
107
107
|
(...a) => o(g) && o(g)(...a)),
|
|
108
108
|
onScrollend: B
|
|
@@ -110,21 +110,21 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
110
110
|
R(t.$slots, "default")
|
|
111
111
|
], 32),
|
|
112
112
|
w(W, { name: "fade" }, {
|
|
113
|
-
default:
|
|
113
|
+
default: r(() => [
|
|
114
114
|
n.value ? (u(), j("div", K)) : x("", !0)
|
|
115
115
|
]),
|
|
116
116
|
_: 1
|
|
117
117
|
})
|
|
118
118
|
]),
|
|
119
119
|
d("footer", M, [
|
|
120
|
-
o(v)[
|
|
120
|
+
o(v)[s.group] ? (u(), k(D, {
|
|
121
121
|
key: 0,
|
|
122
122
|
secondary: "",
|
|
123
123
|
class: "tw-min-w-[100px]",
|
|
124
124
|
disabled: o(h),
|
|
125
125
|
onClick: A
|
|
126
126
|
}, {
|
|
127
|
-
default:
|
|
127
|
+
default: r(() => [
|
|
128
128
|
f(m(o(C)("ll.reset")), 1)
|
|
129
129
|
]),
|
|
130
130
|
_: 1
|
|
@@ -134,7 +134,7 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
|
|
|
134
134
|
disabled: o(h),
|
|
135
135
|
onClick: N
|
|
136
136
|
}, {
|
|
137
|
-
default:
|
|
137
|
+
default: r(() => [
|
|
138
138
|
f(m(o(C)("ll.apply")), 1)
|
|
139
139
|
]),
|
|
140
140
|
_: 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import throttle from 'lodash-es/throttle';\n import { computed, inject, ref } 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 { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n\n export interface FilterDropdownProps {\n label: string;\n /** The name of a filter group */\n group: string;\n onApply?: OnApplyFilters;\n }\n const props = withDefaults(defineProps<FilterDropdownProps>(), {\n activeFilterCount: 0,\n onApply: () => undefined,\n });\n\n const emit =\n defineEmits<{\n (e: 'reset'): void;\n (e: 'dismiss'): void;\n }>();\n\n const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n if (!dataViewFiltersUtils?.useFiltersInstance) {\n throw new Error(\n 'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n );\n }\n\n const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n dataViewFiltersUtils.useFiltersInstance;\n\n const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n const isOpen = computed(() => dropdownRef.value?.isActive);\n\n function onToggleButtonClick() {\n const wasOpen = isOpen.value;\n\n dropdownRef.value?.toggle();\n\n if (wasOpen) {\n undoWorkingFilters();\n emit('dismiss');\n }\n }\n\n function handleResetClick() {\n resetFilterGroup(props.group);\n emit('reset');\n dropdownRef.value?.dismiss();\n }\n\n async function handleApplyClick() {\n const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n if (!preventDismiss) {\n dropdownRef.value?.dismiss();\n }\n }\n\n function onDismiss() {\n undoWorkingFilters();\n emit('dismiss');\n }\n\n const showShadow = ref(false);\n const onScroll = throttle((event: Event) => {\n if (!event.target) return;\n\n if ((event.target as HTMLElement).scrollTop > 0) {\n showShadow.value = true;\n } else {\n showShadow.value = false;\n }\n }, 500);\n\n function onScrollEnd() {\n setTimeout(() => {\n showShadow.value = false;\n }, 2000);\n }\n</script>\n\n<template>\n <Dropdown\n ref=\"dropdownRef\"\n align=\"left\"\n class=\"stash-filter-dropdown\"\n data-test=\"stash-filter-dropdown\"\n fluid-content\n close-manually\n content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n :offset=\"{ y: 6 }\"\n @dismiss=\"onDismiss\"\n >\n <template #toggle>\n <FilterChip\n class=\"tw-rounded-full\"\n has-dropdown\n :is-dropdown-open=\"isOpen\"\n :filter-count=\"activeFiltersCounts[props.group]\"\n :is-selected=\"isOpen\"\n @click=\"onToggleButtonClick\"\n >\n {{ props.label }}\n </FilterChip>\n </template>\n <template #default>\n <div class=\"tw-flex tw-flex-col tw-rounded
|
|
1
|
+
{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import throttle from 'lodash-es/throttle';\n import { computed, inject, ref } 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 { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n import Dropdown from '../Dropdown/Dropdown.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n\n export interface FilterDropdownProps {\n label: string;\n /** The name of a filter group */\n group: string;\n onApply?: OnApplyFilters;\n }\n const props = withDefaults(defineProps<FilterDropdownProps>(), {\n activeFilterCount: 0,\n onApply: () => undefined,\n });\n\n const emit =\n defineEmits<{\n (e: 'reset'): void;\n (e: 'dismiss'): void;\n }>();\n\n const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n if (!dataViewFiltersUtils?.useFiltersInstance) {\n throw new Error(\n 'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n );\n }\n\n const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n dataViewFiltersUtils.useFiltersInstance;\n\n const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n const isOpen = computed(() => dropdownRef.value?.isActive);\n\n function onToggleButtonClick() {\n const wasOpen = isOpen.value;\n\n dropdownRef.value?.toggle();\n\n if (wasOpen) {\n undoWorkingFilters();\n emit('dismiss');\n }\n }\n\n function handleResetClick() {\n resetFilterGroup(props.group);\n emit('reset');\n dropdownRef.value?.dismiss();\n }\n\n async function handleApplyClick() {\n const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n if (!preventDismiss) {\n dropdownRef.value?.dismiss();\n }\n }\n\n function onDismiss() {\n undoWorkingFilters();\n emit('dismiss');\n }\n\n const showShadow = ref(false);\n const onScroll = throttle((event: Event) => {\n if (!event.target) return;\n\n if ((event.target as HTMLElement).scrollTop > 0) {\n showShadow.value = true;\n } else {\n showShadow.value = false;\n }\n }, 500);\n\n function onScrollEnd() {\n setTimeout(() => {\n showShadow.value = false;\n }, 2000);\n }\n</script>\n\n<template>\n <Dropdown\n ref=\"dropdownRef\"\n align=\"left\"\n class=\"stash-filter-dropdown\"\n data-test=\"stash-filter-dropdown\"\n fluid-content\n close-manually\n content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n :offset=\"{ y: 6 }\"\n @dismiss=\"onDismiss\"\n >\n <template #toggle>\n <FilterChip\n class=\"tw-rounded-full\"\n has-dropdown\n :is-dropdown-open=\"isOpen\"\n :filter-count=\"activeFiltersCounts[props.group]\"\n :is-selected=\"isOpen\"\n @click=\"onToggleButtonClick\"\n >\n {{ props.label }}\n </FilterChip>\n </template>\n <template #default>\n <div class=\"tw-flex tw-h-full tw-flex-col tw-rounded\">\n <div class=\"tw-relative tw-grow tw-overflow-hidden tw-rounded-t\">\n <div class=\"tw-h-full tw-overflow-auto tw-p-6\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n <slot></slot>\n </div>\n <Transition name=\"fade\">\n <div\n v-if=\"showShadow\"\n class=\"\n tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow\n \"\n ></div>\n </Transition>\n </div>\n\n <footer\n class=\"\n tw-flex\n tw-justify-end\n tw-gap-6\n tw-rounded-b\n tw-border\n tw-border-solid\n tw-border-x-ice-100\n tw-border-b-ice-100\n tw-border-t-ice-200\n tw-bg-ice-100\n tw-p-3.5\n \"\n >\n <Button\n v-if=\"activeFiltersCounts[props.group]\"\n secondary\n class=\"tw-min-w-[100px]\"\n :disabled=\"isDataViewLoading\"\n @click=\"handleResetClick\"\n >\n {{ t('ll.reset') }}\n </Button>\n <Button class=\"tw-min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n {{ t('ll.apply') }}\n </Button>\n </footer>\n </div>\n </template>\n </Dropdown>\n</template>\n"],"names":["isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","emit","handleResetClick","props","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BQ,EAAE,WAAWA,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACiBP,KACnBQ,EAAK,SAAS;AAAA,IAElB;AAEA,aAASC,IAAmB;;AAC1B,MAAAX,EAAiBY,EAAM,KAAK,GAC5BF,EAAK,OAAO,IACZH,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeM,IAAmB;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAMP,IAAAK,EAAM,YAAN,gBAAAL,EAAA,KAAAK,OAAsBb,EAAa,KAAK;AAE1E,MAAKe,MACHC,IAAAZ,EAAY,UAAZ,QAAAY,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAd,KACnBQ,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAO,IAAab,EAAI,EAAK,GACtBc,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/FilterSelect.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { defineComponent as S, computed as p, openBlock as r, createBlock as $, withCtx as u, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as C, createCommentVNode as K, Fragment as A, renderList as B } from "vue";
|
|
2
2
|
import { t as E } from "./locale.js";
|
|
3
|
-
import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-
|
|
3
|
+
import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
|
|
4
4
|
import y from "./FilterChip.js";
|
|
5
5
|
import "lodash-es/get";
|
|
6
6
|
import "lodash-es/uniqueId";
|
|
7
|
-
import "./Label.vue_vue_type_script_setup_true_lang-
|
|
7
|
+
import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
|
|
8
8
|
import "./Chip.js";
|
|
9
9
|
import "./utils/colorScheme.js";
|
|
10
10
|
import "./Icon.js";
|
|
@@ -26,31 +26,31 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
|
|
|
26
26
|
get() {
|
|
27
27
|
return e.modelValue;
|
|
28
28
|
},
|
|
29
|
-
set(
|
|
30
|
-
c("update:modelValue",
|
|
29
|
+
set(t) {
|
|
30
|
+
c("update:modelValue", t);
|
|
31
31
|
}
|
|
32
32
|
}), n = p({
|
|
33
33
|
get() {
|
|
34
34
|
return e.options.length === e.modelValue.length;
|
|
35
35
|
},
|
|
36
|
-
set(
|
|
37
|
-
c("update:modelValue",
|
|
36
|
+
set(t) {
|
|
37
|
+
c("update:modelValue", t ? e.options.map((a) => a.value) : []);
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
|
-
function i(
|
|
41
|
-
return `${e.name}--${
|
|
40
|
+
function i(t) {
|
|
41
|
+
return `${e.name}--${t.value}`;
|
|
42
42
|
}
|
|
43
|
-
function g(
|
|
44
|
-
return e.modelValue.includes(
|
|
43
|
+
function g(t) {
|
|
44
|
+
return e.modelValue.includes(t.value);
|
|
45
45
|
}
|
|
46
|
-
function
|
|
47
|
-
const a = o.value.filter((
|
|
48
|
-
a.length === o.value.length && a.push(
|
|
46
|
+
function w(t) {
|
|
47
|
+
const a = o.value.filter((l) => l !== t);
|
|
48
|
+
a.length === o.value.length && a.push(t), o.value = a;
|
|
49
49
|
}
|
|
50
|
-
function
|
|
50
|
+
function k() {
|
|
51
51
|
n.value = !n.value;
|
|
52
52
|
}
|
|
53
|
-
return (
|
|
53
|
+
return (t, a) => (r(), $(N, {
|
|
54
54
|
class: "stash-filter-select",
|
|
55
55
|
fieldset: "",
|
|
56
56
|
label: e.label
|
|
@@ -62,8 +62,8 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
|
|
|
62
62
|
}, [
|
|
63
63
|
f(s("input", {
|
|
64
64
|
id: `${e.name}--all`,
|
|
65
|
-
"onUpdate:modelValue": a[0] || (a[0] = (
|
|
66
|
-
class: "sr-only",
|
|
65
|
+
"onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
|
|
66
|
+
class: "tw-sr-only",
|
|
67
67
|
tabindex: "-1",
|
|
68
68
|
type: "checkbox",
|
|
69
69
|
value: "all"
|
|
@@ -76,7 +76,7 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
|
|
|
76
76
|
_(y, {
|
|
77
77
|
"is-selected": n.value,
|
|
78
78
|
tabindex: "0",
|
|
79
|
-
onKeypress: h(
|
|
79
|
+
onKeypress: h(k, ["enter"])
|
|
80
80
|
}, {
|
|
81
81
|
default: u(() => [
|
|
82
82
|
b(x(C(E)("ll.all")), 1)
|
|
@@ -85,29 +85,29 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
|
|
|
85
85
|
}, 8, ["is-selected", "onKeypress"])
|
|
86
86
|
], 8, O)
|
|
87
87
|
])) : K("", !0),
|
|
88
|
-
(r(!0), d(A, null, B(e.options, (
|
|
89
|
-
key: i(
|
|
88
|
+
(r(!0), d(A, null, B(e.options, (l) => (r(), d("div", {
|
|
89
|
+
key: i(l)
|
|
90
90
|
}, [
|
|
91
91
|
f(s("input", {
|
|
92
|
-
id: i(
|
|
92
|
+
id: i(l),
|
|
93
93
|
"onUpdate:modelValue": a[1] || (a[1] = (m) => o.value = m),
|
|
94
|
-
class: "sr-only",
|
|
94
|
+
class: "tw-sr-only",
|
|
95
95
|
tabindex: "-1",
|
|
96
96
|
type: "checkbox",
|
|
97
|
-
value:
|
|
97
|
+
value: l.value
|
|
98
98
|
}, null, 8, U), [
|
|
99
99
|
[v, o.value]
|
|
100
100
|
]),
|
|
101
101
|
s("label", {
|
|
102
|
-
for: i(
|
|
102
|
+
for: i(l)
|
|
103
103
|
}, [
|
|
104
104
|
_(y, {
|
|
105
|
-
"is-selected": g(
|
|
105
|
+
"is-selected": g(l),
|
|
106
106
|
tabindex: "0",
|
|
107
|
-
onKeypress: h((m) =>
|
|
107
|
+
onKeypress: h((m) => w(l.value), ["enter"])
|
|
108
108
|
}, {
|
|
109
109
|
default: u(() => [
|
|
110
|
-
b(x(
|
|
110
|
+
b(x(l.label), 1)
|
|
111
111
|
]),
|
|
112
112
|
_: 2
|
|
113
113
|
}, 1032, ["is-selected", "onKeypress"])
|
package/dist/FilterSelect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n import { computed } from 'vue';\n\n import { t } from '../../locale';\n import Field from '../Field/Field.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n export interface FilterSelectProps {\n /**\n * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n */\n name: string;\n\n label: string;\n\n options: FilterSelectOption[];\n\n modelValue: FilterSelectModelValue;\n\n /**\n * When true, this prop adds an \"All\" option for selecting all options.\n */\n canSelectAll?: boolean;\n }\n\n const props = withDefaults(defineProps<FilterSelectProps>(), {\n canSelectAll: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'update:modelValue', value: FilterSelectModelValue): void;\n }>();\n\n /**\n * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n */\n const selected = computed({\n get() {\n return props.modelValue;\n },\n set(value) {\n emit('update:modelValue', value);\n },\n });\n\n const isAllSelected = computed({\n get() {\n return props.options.length === props.modelValue.length;\n },\n set(isChecked) {\n emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n },\n });\n\n function getOptionId(option: FilterSelectOption) {\n return `${props.name}--${option.value}`;\n }\n\n function isOptionSelected(option: FilterSelectOption) {\n return props.modelValue.includes(option.value);\n }\n\n function onEnter(enteredValue: FilterSelectOption['value']) {\n const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n if (newSelected.length === selected.value.length) {\n newSelected.push(enteredValue);\n }\n\n selected.value = newSelected;\n }\n\n function onEnterAll() {\n isAllSelected.value = !isAllSelected.value;\n }\n</script>\n\n<template>\n <Field class=\"stash-filter-select\" fieldset :label=\"props.label\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n <input\n :id=\"`${props.name}--all`\"\n v-model=\"isAllSelected\"\n class=\"sr-only\"\n tabindex=\"-1\"\n type=\"checkbox\"\n value=\"all\"\n />\n <label :for=\"`${props.name}--all`\">\n <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n {{ t('ll.all') }}\n </FilterChip>\n </label>\n </div>\n <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n <input\n :id=\"getOptionId(option)\"\n v-model=\"selected\"\n class=\"sr-only\"\n tabindex=\"-1\"\n type=\"checkbox\"\n :value=\"option.value\"\n />\n <label :for=\"getOptionId(option)\">\n <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n {{ option.label }}\n </FilterChip>\n </label>\n </div>\n </div>\n </Field>\n</template>\n"],"names":["selected","computed","props","value","emit","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBA0CQA,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAAO;AACT,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKE,IAAgBJ,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOC,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAII,GAAW;AACR,QAAAF,EAAA,qBAAqBE,IAAYJ,EAAM,QAAQ,IAAI,CAACK,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGL,EAAM,IAAI,KAAKK,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOL,EAAM,WAAW,SAASK,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcZ,EAAS,MAAM,OAAO,CAACG,MAAUA,MAAUQ,CAAY;AAE3E,MAAIC,EAAY,WAAWZ,EAAS,MAAM,UACxCY,EAAY,KAAKD,CAAY,GAG/BX,EAAS,QAAQY;AAAA,IACnB;AAEA,aAASC,IAAa;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n import { computed } from 'vue';\n\n import { t } from '../../locale';\n import Field from '../Field/Field.vue';\n import FilterChip from '../FilterChip/FilterChip.vue';\n import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n export interface FilterSelectProps {\n /**\n * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n */\n name: string;\n\n label: string;\n\n options: FilterSelectOption[];\n\n modelValue: FilterSelectModelValue;\n\n /**\n * When true, this prop adds an \"All\" option for selecting all options.\n */\n canSelectAll?: boolean;\n }\n\n const props = withDefaults(defineProps<FilterSelectProps>(), {\n canSelectAll: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'update:modelValue', value: FilterSelectModelValue): void;\n }>();\n\n /**\n * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n */\n const selected = computed({\n get() {\n return props.modelValue;\n },\n set(value) {\n emit('update:modelValue', value);\n },\n });\n\n const isAllSelected = computed({\n get() {\n return props.options.length === props.modelValue.length;\n },\n set(isChecked) {\n emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n },\n });\n\n function getOptionId(option: FilterSelectOption) {\n return `${props.name}--${option.value}`;\n }\n\n function isOptionSelected(option: FilterSelectOption) {\n return props.modelValue.includes(option.value);\n }\n\n function onEnter(enteredValue: FilterSelectOption['value']) {\n const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n if (newSelected.length === selected.value.length) {\n newSelected.push(enteredValue);\n }\n\n selected.value = newSelected;\n }\n\n function onEnterAll() {\n isAllSelected.value = !isAllSelected.value;\n }\n</script>\n\n<template>\n <Field class=\"stash-filter-select\" fieldset :label=\"props.label\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n <input\n :id=\"`${props.name}--all`\"\n v-model=\"isAllSelected\"\n class=\"tw-sr-only\"\n tabindex=\"-1\"\n type=\"checkbox\"\n value=\"all\"\n />\n <label :for=\"`${props.name}--all`\">\n <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n {{ t('ll.all') }}\n </FilterChip>\n </label>\n </div>\n <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n <input\n :id=\"getOptionId(option)\"\n v-model=\"selected\"\n class=\"tw-sr-only\"\n tabindex=\"-1\"\n type=\"checkbox\"\n :value=\"option.value\"\n />\n <label :for=\"getOptionId(option)\">\n <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n {{ option.label }}\n </FilterChip>\n </label>\n </div>\n </div>\n </Field>\n</template>\n"],"names":["selected","computed","props","value","emit","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBA0CQA,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAAO;AACT,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKE,IAAgBJ,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOC,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAII,GAAW;AACR,QAAAF,EAAA,qBAAqBE,IAAYJ,EAAM,QAAQ,IAAI,CAACK,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGL,EAAM,IAAI,KAAKK,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOL,EAAM,WAAW,SAASK,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcZ,EAAS,MAAM,OAAO,CAACG,MAAUA,MAAUQ,CAAY;AAE3E,MAAIC,EAAY,WAAWZ,EAAS,MAAM,UACxCY,EAAY,KAAKD,CAAY,GAG/BX,EAAS,QAAQY;AAAA,IACnB;AAEA,aAASC,IAAa;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Filters.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import G from "lodash-es/cloneDeep";
|
|
2
2
|
import z from "lodash-es/merge";
|
|
3
|
-
import { toRefs as W, ref as
|
|
3
|
+
import { toRefs as W, ref as j, nextTick as Y, resolveComponent as y, openBlock as d, createElementBlock as V, Fragment as E, renderList as q, normalizeClass as S, createBlock as f, mergeProps as v, resolveDynamicComponent as k, createSlots as J, withCtx as b, normalizeProps as L, guardReactiveProps as O, createElementVNode as g, createCommentVNode as R, createVNode as U, createTextVNode as D, toDisplayString as A } from "vue";
|
|
4
4
|
import K from "./useValidation.js";
|
|
5
|
-
import { LLLV_CHANGE_TRIGGERS as
|
|
6
|
-
import { t as
|
|
7
|
-
import { persistentStorage as
|
|
5
|
+
import { LLLV_CHANGE_TRIGGERS as M } from "./constants.js";
|
|
6
|
+
import { t as N } from "./locale.js";
|
|
7
|
+
import { persistentStorage as H } from "./storage.js";
|
|
8
8
|
import Q from "./Button.js";
|
|
9
9
|
import X from "./Checkbox.js";
|
|
10
10
|
import Z from "./DatePicker.js";
|
|
@@ -18,13 +18,14 @@ import "lodash-es/get";
|
|
|
18
18
|
import "./isDefined-2ce6cde4.js";
|
|
19
19
|
import "lodash-es/round";
|
|
20
20
|
import "./utils/storage.js";
|
|
21
|
+
import "@leaflink/snitch";
|
|
21
22
|
import "./utils/helpers.js";
|
|
22
23
|
import "lodash-es/camelCase";
|
|
23
24
|
import "lodash-es/isFinite";
|
|
24
25
|
import "lodash-es/isPlainObject";
|
|
25
|
-
import "./Button.vue_used_vue_type_style_index_0_lang.module-
|
|
26
|
+
import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
|
|
26
27
|
import "lodash-es/uniqueId";
|
|
27
|
-
import "./Checkbox.
|
|
28
|
+
import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
|
|
28
29
|
import "./utils/createValidDate.js";
|
|
29
30
|
import "./index-5e5945a9.js";
|
|
30
31
|
import "./index-fe8d3765.js";
|
|
@@ -37,8 +38,8 @@ import "./index-79ce320f.js";
|
|
|
37
38
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
38
39
|
import "lodash-es/isNil";
|
|
39
40
|
import "./utils/i18n.js";
|
|
40
|
-
import "./Field.vue_vue_type_script_setup_true_lang-
|
|
41
|
-
import "./Label.vue_vue_type_script_setup_true_lang-
|
|
41
|
+
import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
|
|
42
|
+
import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
|
|
42
43
|
import "lodash-es/isEmpty";
|
|
43
44
|
import "lodash-es/isEqual";
|
|
44
45
|
import "./useSearch.js";
|
|
@@ -48,7 +49,7 @@ import "./MenusPlugin-5e93f0a5.js";
|
|
|
48
49
|
import "./Chip.js";
|
|
49
50
|
import "./utils/colorScheme.js";
|
|
50
51
|
const ie = {
|
|
51
|
-
"filter-button-group": "_filter-button-
|
|
52
|
+
"filter-button-group": "_filter-button-group_1o1yr_2"
|
|
52
53
|
}, oe = {
|
|
53
54
|
name: "ll-filters",
|
|
54
55
|
components: {
|
|
@@ -93,12 +94,12 @@ const ie = {
|
|
|
93
94
|
},
|
|
94
95
|
emits: ["change", "submit", "reset"],
|
|
95
96
|
setup(l) {
|
|
96
|
-
const { validationSchema: r } = W(l), o = r.value(), i =
|
|
97
|
+
const { validationSchema: r } = W(l), o = r.value(), i = j({}), t = j();
|
|
97
98
|
function s() {
|
|
98
99
|
if ((o == null ? void 0 : o.toString()) !== "[object Object]")
|
|
99
100
|
return;
|
|
100
|
-
i.value = Object.keys(o).reduce((
|
|
101
|
-
const p = Object.entries(o).reduce((
|
|
101
|
+
i.value = Object.keys(o).reduce((c, m) => (c[m] = void 0, c), {});
|
|
102
|
+
const p = Object.entries(o).reduce((c, [m, h]) => (c[m] = h.map((u) => u(i)), c), {});
|
|
102
103
|
t.value = K({ rules: p, values: i }), t.value.validate();
|
|
103
104
|
}
|
|
104
105
|
return {
|
|
@@ -109,8 +110,8 @@ const ie = {
|
|
|
109
110
|
},
|
|
110
111
|
data() {
|
|
111
112
|
return {
|
|
112
|
-
applyText:
|
|
113
|
-
clearText:
|
|
113
|
+
applyText: N("ll.apply"),
|
|
114
|
+
clearText: N("ll.clear"),
|
|
114
115
|
filters: {},
|
|
115
116
|
filterValues: {},
|
|
116
117
|
forceRenderCount: 0
|
|
@@ -131,10 +132,10 @@ const ie = {
|
|
|
131
132
|
const s = l[i];
|
|
132
133
|
if (s === "" || s == null)
|
|
133
134
|
return o;
|
|
134
|
-
const p = t.attributes.trackBy || "id",
|
|
135
|
+
const p = t.attributes.trackBy || "id", c = typeof s == "object", m = typeof t.type == "object", h = m && t.attributes.multiple || !m && t.type.includes("ll-select") && (t.attributes.multiple || !t.attributes.single), u = h ? (
|
|
135
136
|
// local storage might have item stored as an object from the old Select
|
|
136
137
|
(Array.isArray(s) ? s : [s]).map((a) => a[p])
|
|
137
|
-
) :
|
|
138
|
+
) : c ? [s[p]] : [s], e = t.groupedWith;
|
|
138
139
|
return e && (u[0] = {
|
|
139
140
|
index: e,
|
|
140
141
|
value: l[e]
|
|
@@ -160,7 +161,7 @@ const ie = {
|
|
|
160
161
|
}
|
|
161
162
|
},
|
|
162
163
|
async created() {
|
|
163
|
-
this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger:
|
|
164
|
+
this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger: M.LOAD });
|
|
164
165
|
},
|
|
165
166
|
methods: {
|
|
166
167
|
initFilterValues() {
|
|
@@ -177,7 +178,7 @@ const ie = {
|
|
|
177
178
|
* @param {object} [options] - optional parameters
|
|
178
179
|
* @param {string} [options.trigger] - the action that triggered this function call
|
|
179
180
|
*/
|
|
180
|
-
async applyFilters({ trigger: l =
|
|
181
|
+
async applyFilters({ trigger: l = M.APPLY } = {}) {
|
|
181
182
|
this.validation && (await this.validation.validate(), this.validation.hasErrors) || (this.disablePersistency || this.persistFilterValues(this.filterValues), this.$emit("submit", { trigger: l }));
|
|
182
183
|
},
|
|
183
184
|
resetFilters() {
|
|
@@ -225,35 +226,35 @@ const ie = {
|
|
|
225
226
|
* @returns {any}
|
|
226
227
|
*/
|
|
227
228
|
getPersistentFilterValues() {
|
|
228
|
-
return
|
|
229
|
+
return H.get("filter-values");
|
|
229
230
|
},
|
|
230
231
|
/**
|
|
231
232
|
* Clone new filterValues to remove reactivity, and save them to localStorage.
|
|
232
233
|
* @param {object} newValues - the filterValues to be persisted in localStorage
|
|
233
234
|
*/
|
|
234
235
|
persistFilterValues(l) {
|
|
235
|
-
|
|
236
|
+
H.set("filter-values", G(l));
|
|
236
237
|
}
|
|
237
238
|
}
|
|
238
|
-
}, se = { class: "ll-grid
|
|
239
|
-
function
|
|
239
|
+
}, se = { class: "tw-ll-grid tw-grid-cols-4 md:tw-grid-cols-12" }, re = ["data-test"], ae = ["innerHTML"], ne = ["innerHTML"];
|
|
240
|
+
function de(l, r, o, i, t, s) {
|
|
240
241
|
var u;
|
|
241
|
-
const p = y("ll-select"),
|
|
242
|
-
return
|
|
243
|
-
(
|
|
244
|
-
var _, F, T, C, x, P, B
|
|
245
|
-
return
|
|
246
|
-
e.hidden ?
|
|
242
|
+
const p = y("ll-select"), c = y("ll-checkbox"), m = y("ll-radio"), h = y("ll-button");
|
|
243
|
+
return d(), V("div", se, [
|
|
244
|
+
(d(!0), V(E, null, q(o.schema, (e, a) => {
|
|
245
|
+
var _, F, T, C, w, x, P, B;
|
|
246
|
+
return d(), V(E, null, [
|
|
247
|
+
e.hidden ? R("", !0) : (d(), V("div", {
|
|
247
248
|
key: `${a} ${t.forceRenderCount}`,
|
|
248
|
-
class:
|
|
249
|
+
class: S(["field-wrapper tw-col-span-4 md:tw-col-span-3", { "max-md:tw-hidden": !e.type, "tw-flex tw-items-end": e.type === "ll-checkbox" }]),
|
|
249
250
|
"data-test": `filter|${e.fieldToFilter}`
|
|
250
251
|
}, [
|
|
251
|
-
e.type === "ll-select" ? (
|
|
252
|
+
e.type === "ll-select" ? (d(), f(p, v({ key: 0 }, e.attributes, {
|
|
252
253
|
error: ((_ = i.validation) == null ? void 0 : _.fields[e.fieldToFilter]) && ((F = i.validation) == null ? void 0 : F.getError(e.fieldToFilter)),
|
|
253
254
|
label: e.label,
|
|
254
255
|
"model-value": t.filterValues[a],
|
|
255
256
|
"onUpdate:modelValue": (n) => s.onSelectInput(n, e, a)
|
|
256
|
-
}), null, 16, ["error", "label", "model-value", "onUpdate:modelValue"])) : e.type === "ll-checkbox" ? (
|
|
257
|
+
}), null, 16, ["error", "label", "model-value", "onUpdate:modelValue"])) : e.type === "ll-checkbox" ? (d(), f(c, v({
|
|
257
258
|
key: 1,
|
|
258
259
|
checked: t.filterValues[a],
|
|
259
260
|
"onUpdate:checked": (n) => t.filterValues[a] = n
|
|
@@ -261,38 +262,38 @@ function ce(l, r, o, i, t, s) {
|
|
|
261
262
|
"error-text": ((T = i.validation) == null ? void 0 : T.fields[e.fieldToFilter]) && ((C = i.validation) == null ? void 0 : C.getError(e.fieldToFilter)),
|
|
262
263
|
label: e.label,
|
|
263
264
|
"onUpdate:checked": (n) => s.onChange(e, t.filterValues, a)
|
|
264
|
-
}), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type === "ll-radio" ? (
|
|
265
|
+
}), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type === "ll-radio" ? (d(), f(m, v({
|
|
265
266
|
key: 2,
|
|
266
267
|
checked: t.filterValues[a],
|
|
267
268
|
"onUpdate:checked": (n) => t.filterValues[a] = n
|
|
268
269
|
}, e.attributes, {
|
|
269
|
-
"error-text": ((
|
|
270
|
+
"error-text": ((w = i.validation) == null ? void 0 : w.fields[e.fieldToFilter]) && ((x = i.validation) == null ? void 0 : x.getError(e.fieldToFilter)),
|
|
270
271
|
label: e.label,
|
|
271
272
|
"onUpdate:checked": (n) => s.onChange(e, t.filterValues, a)
|
|
272
|
-
}), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type ? (
|
|
273
|
+
}), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type ? (d(), f(k(e.type), v({ key: 3 }, e.attributes, {
|
|
273
274
|
modelValue: t.filterValues[a],
|
|
274
275
|
"onUpdate:modelValue": [(n) => t.filterValues[a] = n, (n) => s.onChange(e, t.filterValues, a)],
|
|
275
|
-
"error-text": ((
|
|
276
|
+
"error-text": ((P = i.validation) == null ? void 0 : P.fields[e.fieldToFilter]) && ((B = i.validation) == null ? void 0 : B.getError(e.fieldToFilter)),
|
|
276
277
|
label: e.label
|
|
277
278
|
}), J({ _: 2 }, [
|
|
278
279
|
e.slots && e.slots.selected ? {
|
|
279
280
|
name: "selected",
|
|
280
281
|
fn: b(({ option: n }) => [
|
|
281
|
-
(
|
|
282
|
+
(d(), f(k(e.slots.selected), L(O(n.props)), null, 16))
|
|
282
283
|
]),
|
|
283
284
|
key: "0"
|
|
284
285
|
} : void 0,
|
|
285
286
|
e.slots && e.slots.option ? {
|
|
286
287
|
name: "option",
|
|
287
288
|
fn: b(({ option: n }) => [
|
|
288
|
-
(
|
|
289
|
+
(d(), f(k(e.slots.option), L(O(n.props)), null, 16))
|
|
289
290
|
]),
|
|
290
291
|
key: "1"
|
|
291
292
|
} : void 0,
|
|
292
293
|
e.slots && e.slots.prepend ? {
|
|
293
294
|
name: "prepend",
|
|
294
295
|
fn: b(() => [
|
|
295
|
-
|
|
296
|
+
g("span", {
|
|
296
297
|
innerHTML: e.slots.prepend
|
|
297
298
|
}, null, 8, ae)
|
|
298
299
|
]),
|
|
@@ -301,48 +302,48 @@ function ce(l, r, o, i, t, s) {
|
|
|
301
302
|
e.slots && e.slots.append ? {
|
|
302
303
|
name: "append",
|
|
303
304
|
fn: b(() => [
|
|
304
|
-
|
|
305
|
+
g("span", {
|
|
305
306
|
innerHTML: e.slots.append
|
|
306
307
|
}, null, 8, ne)
|
|
307
308
|
]),
|
|
308
309
|
key: "3"
|
|
309
310
|
} : void 0
|
|
310
|
-
]), 1040, ["modelValue", "onUpdate:modelValue", "error-text", "label"])) :
|
|
311
|
+
]), 1040, ["modelValue", "onUpdate:modelValue", "error-text", "label"])) : R("", !0)
|
|
311
312
|
], 10, re))
|
|
312
313
|
], 64);
|
|
313
314
|
}), 256)),
|
|
314
|
-
|
|
315
|
-
class:
|
|
315
|
+
g("div", {
|
|
316
|
+
class: S(["button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12", l.$style["filter-button-group"]])
|
|
316
317
|
}, [
|
|
317
|
-
|
|
318
|
+
U(h, {
|
|
318
319
|
secondary: "",
|
|
319
320
|
"data-test": "button|reset-filters",
|
|
320
321
|
disabled: o.disableClear,
|
|
321
322
|
onClick: s.resetFilters
|
|
322
323
|
}, {
|
|
323
324
|
default: b(() => [
|
|
324
|
-
A(
|
|
325
|
+
D(A(t.clearText), 1)
|
|
325
326
|
]),
|
|
326
327
|
_: 1
|
|
327
328
|
}, 8, ["disabled", "onClick"]),
|
|
328
|
-
|
|
329
|
+
U(h, {
|
|
329
330
|
primary: "",
|
|
330
331
|
"data-test": "button|apply-filters",
|
|
331
332
|
disabled: o.disableApply || ((u = i.validation) == null ? void 0 : u.hasErrors),
|
|
332
333
|
onClick: s.applyFilters
|
|
333
334
|
}, {
|
|
334
335
|
default: b(() => [
|
|
335
|
-
A(
|
|
336
|
+
D(A(t.applyText), 1)
|
|
336
337
|
]),
|
|
337
338
|
_: 1
|
|
338
339
|
}, 8, ["disabled", "onClick"])
|
|
339
340
|
], 2)
|
|
340
341
|
]);
|
|
341
342
|
}
|
|
342
|
-
const
|
|
343
|
+
const ce = {
|
|
343
344
|
$style: ie
|
|
344
|
-
},
|
|
345
|
+
}, at = /* @__PURE__ */ le(oe, [["render", de], ["__cssModules", ce]]);
|
|
345
346
|
export {
|
|
346
|
-
|
|
347
|
+
at as default
|
|
347
348
|
};
|
|
348
349
|
//# sourceMappingURL=Filters.js.map
|