@leaflink/stash 48.21.1 → 49.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionsDropdown.js +1 -1
- package/dist/AddressSelect.js +15 -14
- package/dist/AddressSelect.js.map +1 -1
- package/dist/Alert.js +1 -1
- package/dist/Copy.js +1 -1
- package/dist/DataViewSortButton.js +1 -1
- package/dist/Dropdown.js +1 -1
- package/dist/FilterDropdown.js +1 -1
- package/dist/Filters.js +4 -3
- package/dist/Filters.js.map +1 -1
- package/dist/InputOptions.js +4 -3
- package/dist/InputOptions.js.map +1 -1
- package/dist/ListView.js +9 -8
- package/dist/ListView.js.map +1 -1
- package/dist/ModalsPlugin.js +10 -12
- package/dist/ModalsPlugin.js.map +1 -1
- package/dist/PageNavigation.js +1 -1
- package/dist/Select.js +272 -1277
- package/dist/Select.js.map +1 -1
- package/dist/SelectStatus.js +10 -9
- package/dist/SelectStatus.js.map +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Tabs.js +1 -1
- package/dist/ToastsPlugin.js +7 -9
- package/dist/ToastsPlugin.js.map +1 -1
- package/dist/Tooltip.js +199 -0
- package/dist/Tooltip.js.map +1 -0
- package/dist/Tooltip.vue.d.ts +106 -0
- package/dist/components.css +1 -1
- package/dist/directives/autofocus.js.map +1 -0
- package/dist/directives/clickoutside.js.map +1 -0
- package/dist/directives/observe.js.map +1 -0
- package/dist/directives/sticky.js.map +1 -0
- package/dist/{tooltip.js → directives/tooltip.js} +3 -3
- package/dist/directives/tooltip.js.map +1 -0
- package/dist/directives/viewable.js.map +1 -0
- package/dist/floating-ui.vue-8d7f7932.js +1069 -0
- package/dist/floating-ui.vue-8d7f7932.js.map +1 -0
- package/dist/index.js +20 -22
- package/dist/index.js.map +1 -1
- package/dist/tooltip.d.ts +1 -0
- package/package.json +6 -1
- package/styles/base.css +2 -2
- package/dist/autofocus.js.map +0 -1
- package/dist/clickoutside.js.map +0 -1
- package/dist/observe.js.map +0 -1
- package/dist/sticky.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/viewable.js.map +0 -1
- /package/dist/{autofocus.js → directives/autofocus.js} +0 -0
- /package/dist/{clickoutside.js → directives/clickoutside.js} +0 -0
- /package/dist/{observe.js → directives/observe.js} +0 -0
- /package/dist/{sticky.js → directives/sticky.js} +0 -0
- /package/dist/{viewable.js → directives/viewable.js} +0 -0
package/dist/ActionsDropdown.js
CHANGED
|
@@ -10,7 +10,7 @@ import "lodash-es/uniqueId";
|
|
|
10
10
|
import "./index-9e1095ef.js";
|
|
11
11
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
12
12
|
import "./constants.js";
|
|
13
|
-
import "./clickoutside.js";
|
|
13
|
+
import "./directives/clickoutside.js";
|
|
14
14
|
import "./utils/calculateElementOverflow.js";
|
|
15
15
|
import "./utils/helpers.js";
|
|
16
16
|
import "lodash-es/camelCase";
|
package/dist/AddressSelect.js
CHANGED
|
@@ -5,6 +5,7 @@ import U from "./useGoogleMaps.js";
|
|
|
5
5
|
import { DEBOUNCE as q } from "./constants.js";
|
|
6
6
|
import F from "./Select.js";
|
|
7
7
|
import "lodash-es/keyBy";
|
|
8
|
+
import "./floating-ui.vue-8d7f7932.js";
|
|
8
9
|
import "@leaflink/snitch";
|
|
9
10
|
import "lodash-es/isEmpty";
|
|
10
11
|
import "lodash-es/isEqual";
|
|
@@ -16,7 +17,7 @@ import "./_commonjsHelpers-10dfc225.js";
|
|
|
16
17
|
import "./utils/helpers.js";
|
|
17
18
|
import "lodash-es/camelCase";
|
|
18
19
|
import "lodash-es/isFinite";
|
|
19
|
-
import "./clickoutside.js";
|
|
20
|
+
import "./directives/clickoutside.js";
|
|
20
21
|
import "./MenusPlugin-9288029a.js";
|
|
21
22
|
import "./Chip.js";
|
|
22
23
|
import "./utils/colorScheme.js";
|
|
@@ -27,7 +28,7 @@ import "./_plugin-vue_export-helper-dad06003.js";
|
|
|
27
28
|
import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
|
|
28
29
|
import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
|
|
29
30
|
import "./locale.js";
|
|
30
|
-
const _ = "address-select-",
|
|
31
|
+
const _ = "address-select-", ye = /* @__PURE__ */ S({
|
|
31
32
|
__name: "AddressSelect",
|
|
32
33
|
props: {
|
|
33
34
|
apiKey: { default: void 0 },
|
|
@@ -49,10 +50,10 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
49
50
|
},
|
|
50
51
|
emits: ["update:modelValue", "error"],
|
|
51
52
|
setup(g, { emit: V }) {
|
|
52
|
-
const t = g,
|
|
53
|
+
const t = g, r = V, b = A(), d = T("stashOptions"), u = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
|
|
53
54
|
if (!u.value)
|
|
54
55
|
throw new Error("Google Maps API key is required");
|
|
55
|
-
const { getPlaceDetails: x, getPlacePredictions: E } = U(u.value), i = n(!1), a = n(),
|
|
56
|
+
const { getPlaceDetails: x, getPlacePredictions: E } = U(u.value), i = n(!1), a = n(), l = n(), w = K(B, t.debounceTime), s = h(() => {
|
|
56
57
|
var e, m, p, c, f, v;
|
|
57
58
|
return [
|
|
58
59
|
[(e = t.modelValue) == null ? void 0 : e.street_address, (m = t.modelValue) == null ? void 0 : m.extended_address].filter(Boolean).join(" "),
|
|
@@ -71,9 +72,9 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
71
72
|
name: s.value,
|
|
72
73
|
address: t.modelValue
|
|
73
74
|
};
|
|
74
|
-
a.value = [e],
|
|
75
|
+
a.value = [e], l.value = e;
|
|
75
76
|
} else
|
|
76
|
-
s.value || (
|
|
77
|
+
s.value || (l.value = void 0, a.value = []);
|
|
77
78
|
},
|
|
78
79
|
{ immediate: !0 }
|
|
79
80
|
);
|
|
@@ -83,7 +84,7 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
83
84
|
a.value = await E(o);
|
|
84
85
|
} catch (e) {
|
|
85
86
|
if (a.value = [], e != null && e.isGoogleMapsError)
|
|
86
|
-
|
|
87
|
+
r("error", e);
|
|
87
88
|
else
|
|
88
89
|
throw e;
|
|
89
90
|
} finally {
|
|
@@ -91,8 +92,8 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
async function M(o) {
|
|
94
|
-
if (
|
|
95
|
-
|
|
95
|
+
if (l.value = o, !o) {
|
|
96
|
+
r("update:modelValue", {
|
|
96
97
|
street_address: void 0,
|
|
97
98
|
extended_address: void 0,
|
|
98
99
|
city: void 0,
|
|
@@ -103,15 +104,15 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
103
104
|
return;
|
|
104
105
|
}
|
|
105
106
|
if (o.id.startsWith(_) && o.address) {
|
|
106
|
-
|
|
107
|
+
r("update:modelValue", o.address);
|
|
107
108
|
return;
|
|
108
109
|
}
|
|
109
110
|
try {
|
|
110
111
|
const e = await x(o.id);
|
|
111
|
-
|
|
112
|
+
r("update:modelValue", e);
|
|
112
113
|
} catch (e) {
|
|
113
114
|
if (e != null && e.isGoogleMapsError)
|
|
114
|
-
|
|
115
|
+
r("error", e);
|
|
115
116
|
else
|
|
116
117
|
throw e;
|
|
117
118
|
}
|
|
@@ -126,7 +127,7 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
126
127
|
label: t.label,
|
|
127
128
|
"hint-text": t.hintText,
|
|
128
129
|
error: t.errorText,
|
|
129
|
-
"model-value":
|
|
130
|
+
"model-value": l.value,
|
|
130
131
|
"prevent-empty": t.preventEmpty,
|
|
131
132
|
"disable-filtering": "",
|
|
132
133
|
onSearch: y(w),
|
|
@@ -143,6 +144,6 @@ const _ = "address-select-", he = /* @__PURE__ */ S({
|
|
|
143
144
|
}
|
|
144
145
|
});
|
|
145
146
|
export {
|
|
146
|
-
|
|
147
|
+
ye as default
|
|
147
148
|
};
|
|
148
149
|
//# sourceMappingURL=AddressSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import debounce from 'lodash-es/debounce';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useSlots, watch } from 'vue';\n\n import { StashProvideState } from '../../../types/misc';\n import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n import { DEBOUNCE } from '../../constants';\n import Select from '../Select/Select.vue';\n\n export interface AddressSelectProps {\n /**\n * Google Maps API Key. This takes precedence over the key defined in stashOptions\n */\n apiKey?: string;\n /**\n * Wether the Select is disabled or not\n */\n disabled?: boolean;\n /**\n * Select placeholder\n */\n placeholder?: string;\n /**\n * Debounce time in milliseconds to perform API requests on search\n */\n debounceTime?: number;\n /**\n * Model value address\n */\n modelValue: Address;\n /**\n * Hint text to be passed down to Select component\n */\n hintText?: string;\n /**\n * Error text to be passed down to Select component\n */\n errorText?: string;\n /**\n * Label text to be passed down to Select component\n */\n label?: string;\n /**\n * Disallows values from being de-selected\n */\n preventEmpty?: boolean;\n }\n\n const props = withDefaults(defineProps<AddressSelectProps>(), {\n disabled: false,\n placeholder: 'Type an address',\n debounceTime: DEBOUNCE.MEDIUM,\n modelValue: () => ({\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n }),\n hintText: undefined,\n errorText: undefined,\n label: undefined,\n preventEmpty: false,\n apiKey: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:modelValue', value: Address): void;\n /**\n * Emitted when an error occurs while reaching out to Google's API\n */\n (e: 'error', value: unknown): void;\n }>();\n\n const slots = useSlots();\n const stashOptions = inject<StashProvideState>('stashOptions');\n\n const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n if (!googleMapsApiKey.value) {\n throw new Error('Google Maps API key is required');\n }\n\n const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n const ID_PREFIX = 'address-select-';\n\n const isLoading = ref(false);\n const options = ref<Array<AddressOption>>();\n const internalValue = ref<AddressOption>();\n\n const debouncedSearch = debounce(search, props.debounceTime);\n\n const formattedAddress = computed(() => {\n const formattedAddress = [\n [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n props.modelValue?.city,\n [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n props.modelValue?.country,\n ]\n .filter(Boolean)\n .join(', ');\n\n return formattedAddress;\n });\n\n // When we don't have options just yet, we need to create them on our own\n watch(\n () => props.modelValue,\n () => {\n if (formattedAddress.value && !options.value?.length) {\n const option = {\n id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n name: formattedAddress.value,\n address: props.modelValue,\n };\n\n options.value = [option];\n internalValue.value = option;\n } else if (!formattedAddress.value) {\n internalValue.value = undefined;\n options.value = [];\n }\n },\n { immediate: true },\n );\n\n async function search(query: string) {\n isLoading.value = true;\n\n try {\n options.value = await getPlacePredictions(query);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n options.value = [];\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n } finally {\n isLoading.value = false;\n }\n }\n\n async function select(option: AddressOption) {\n internalValue.value = option;\n\n // When an option is de-selected, the option will be undefined\n if (!option) {\n emit('update:modelValue', {\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n });\n return;\n }\n\n // When an option does not have a google place id, we don't want to fetch it's details\n if (option.id.startsWith(ID_PREFIX) && option.address) {\n emit('update:modelValue', option.address);\n return;\n }\n\n try {\n const address = await getPlaceDetails(option.id);\n emit('update:modelValue', address);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n }\n }\n</script>\n\n<template>\n <Select\n single\n data-test=\"select|address\"\n :disabled=\"props.disabled\"\n :loading=\"isLoading\"\n :options=\"options\"\n :placeholder=\"props.placeholder\"\n :label=\"props.label\"\n :hint-text=\"props.hintText\"\n :error=\"props.errorText\"\n :model-value=\"internalValue\"\n :prevent-empty=\"props.preventEmpty\"\n disable-filtering\n @search=\"debouncedSearch\"\n @update:model-value=\"select\"\n >\n <template v-if=\"slots.hint\" #hint>\n <slot name=\"hint\"></slot>\n </template>\n </Select>\n</template>\n"],"names":["ID_PREFIX","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import debounce from 'lodash-es/debounce';\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useSlots, watch } from 'vue';\n\n import { StashProvideState } from '../../../types/misc';\n import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n import { DEBOUNCE } from '../../constants';\n import Select from '../Select/Select.vue';\n\n export interface AddressSelectProps {\n /**\n * Google Maps API Key. This takes precedence over the key defined in stashOptions\n */\n apiKey?: string;\n /**\n * Wether the Select is disabled or not\n */\n disabled?: boolean;\n /**\n * Select placeholder\n */\n placeholder?: string;\n /**\n * Debounce time in milliseconds to perform API requests on search\n */\n debounceTime?: number;\n /**\n * Model value address\n */\n modelValue: Address;\n /**\n * Hint text to be passed down to Select component\n */\n hintText?: string;\n /**\n * Error text to be passed down to Select component\n */\n errorText?: string;\n /**\n * Label text to be passed down to Select component\n */\n label?: string;\n /**\n * Disallows values from being de-selected\n */\n preventEmpty?: boolean;\n }\n\n const props = withDefaults(defineProps<AddressSelectProps>(), {\n disabled: false,\n placeholder: 'Type an address',\n debounceTime: DEBOUNCE.MEDIUM,\n modelValue: () => ({\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n }),\n hintText: undefined,\n errorText: undefined,\n label: undefined,\n preventEmpty: false,\n apiKey: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (e: 'update:modelValue', value: Address): void;\n /**\n * Emitted when an error occurs while reaching out to Google's API\n */\n (e: 'error', value: unknown): void;\n }>();\n\n const slots = useSlots();\n const stashOptions = inject<StashProvideState>('stashOptions');\n\n const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n if (!googleMapsApiKey.value) {\n throw new Error('Google Maps API key is required');\n }\n\n const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n const ID_PREFIX = 'address-select-';\n\n const isLoading = ref(false);\n const options = ref<Array<AddressOption>>();\n const internalValue = ref<AddressOption>();\n\n const debouncedSearch = debounce(search, props.debounceTime);\n\n const formattedAddress = computed(() => {\n const formattedAddress = [\n [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n props.modelValue?.city,\n [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n props.modelValue?.country,\n ]\n .filter(Boolean)\n .join(', ');\n\n return formattedAddress;\n });\n\n // When we don't have options just yet, we need to create them on our own\n watch(\n () => props.modelValue,\n () => {\n if (formattedAddress.value && !options.value?.length) {\n const option = {\n id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n name: formattedAddress.value,\n address: props.modelValue,\n };\n\n options.value = [option];\n internalValue.value = option;\n } else if (!formattedAddress.value) {\n internalValue.value = undefined;\n options.value = [];\n }\n },\n { immediate: true },\n );\n\n async function search(query: string) {\n isLoading.value = true;\n\n try {\n options.value = await getPlacePredictions(query);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n options.value = [];\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n } finally {\n isLoading.value = false;\n }\n }\n\n async function select(option: AddressOption) {\n internalValue.value = option;\n\n // When an option is de-selected, the option will be undefined\n if (!option) {\n emit('update:modelValue', {\n street_address: undefined,\n extended_address: undefined,\n city: undefined,\n state: undefined,\n postal_code: undefined,\n country: undefined,\n });\n return;\n }\n\n // When an option does not have a google place id, we don't want to fetch it's details\n if (option.id.startsWith(ID_PREFIX) && option.address) {\n emit('update:modelValue', option.address);\n return;\n }\n\n try {\n const address = await getPlaceDetails(option.id);\n emit('update:modelValue', address);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } catch (error: any) {\n if (error?.isGoogleMapsError) {\n emit('error', error);\n } else {\n throw error;\n }\n }\n }\n</script>\n\n<template>\n <Select\n single\n data-test=\"select|address\"\n :disabled=\"props.disabled\"\n :loading=\"isLoading\"\n :options=\"options\"\n :placeholder=\"props.placeholder\"\n :label=\"props.label\"\n :hint-text=\"props.hintText\"\n :error=\"props.errorText\"\n :model-value=\"internalValue\"\n :prevent-empty=\"props.preventEmpty\"\n disable-filtering\n @search=\"debouncedSearch\"\n @update:model-value=\"select\"\n >\n <template v-if=\"slots.hint\" #hint>\n <slot name=\"hint\"></slot>\n </template>\n </Select>\n</template>\n"],"names":["ID_PREFIX","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;AAzClB,UAAMC,IAAQC,GAmBRC,IAAOC,GAWPC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMT,EAAM,WAAUM,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAE,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcJ,EAAiB,KAAK,GAI/EK,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQnB,EAAM,YAAY,GAErDoB,IAAmBX,EAAS,MAAM;;AAU/BW,aATkB;AAAA,QACvB,EAACC,IAAArB,EAAM,eAAN,gBAAAqB,EAAkB,iBAAgBC,IAAAtB,EAAM,eAAN,gBAAAsB,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAvB,EAAM,eAAN,gBAAAuB,EAAkB;AAAA,QAClB,EAACC,IAAAxB,EAAM,eAAN,gBAAAwB,EAAkB,QAAOC,IAAAzB,EAAM,eAAN,gBAAAyB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAA1B,EAAM,eAAN,gBAAA0B,EAAkB;AAAA,MAEjB,EAAA,OAAO,OAAO,EACd,KAAK,IAAI;AAAA,IAEL,CACR;AAGD,IAAAC;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;;AACJ,YAAIoB,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,gBAAMO,IAAS;AAAA,YACb,IAAI5B,EAAM,WAAW,YAAY6B,EAAS9B,CAAS;AAAA,YACnD,MAAMqB,EAAiB;AAAA,YACvB,SAASpB,EAAM;AAAA,UAAA;AAGT,UAAAe,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA;AACxB,UAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;MAEpB;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAGpB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC;AAEP,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAemB,EAAOJ,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAA1B,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA;AAIF,UAAI0B,EAAO,GAAG,WAAW7B,CAAS,KAAK6B,EAAO,SAAS;AAChD,QAAA1B,EAAA,qBAAqB0B,EAAO,OAAO;AACxC;AAAA;AAGE,UAAA;AACF,cAAMK,IAAU,MAAMvB,EAAgBkB,EAAO,EAAE;AAC/C,QAAA1B,EAAK,qBAAqB+B,CAAO;AAAA,eAE1BF;AACP,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Alert.js
CHANGED
|
@@ -2,7 +2,7 @@ import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, compu
|
|
|
2
2
|
import y from "lodash-es/capitalize";
|
|
3
3
|
import B from "lodash-es/uniqueId";
|
|
4
4
|
import { S as M, a as N } from "./statusLevels-a8b041f4.js";
|
|
5
|
-
import V from "./sticky.js";
|
|
5
|
+
import V from "./directives/sticky.js";
|
|
6
6
|
import p from "./Icon.js";
|
|
7
7
|
import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
|
|
8
8
|
import "./index-9e1095ef.js";
|
package/dist/Copy.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as u, useCssModule as _, ref as f, computed as h, openBlock as o, createElementBlock as i, normalizeClass as l, unref as s, renderSlot as v, withDirectives as x, createBlock as c, withCtx as C, createTextVNode as k, toDisplayString as w } from "vue";
|
|
2
2
|
import { UI_TIMEOUT as T } from "./constants.js";
|
|
3
|
-
import b from "./tooltip.js";
|
|
3
|
+
import b from "./directives/tooltip.js";
|
|
4
4
|
import { t as r } from "./locale.js";
|
|
5
5
|
import g from "./Button.js";
|
|
6
6
|
import n from "./Icon.js";
|
|
@@ -14,7 +14,7 @@ import "lodash-es/uniqueId";
|
|
|
14
14
|
import "./index-9e1095ef.js";
|
|
15
15
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
16
16
|
import "./constants.js";
|
|
17
|
-
import "./clickoutside.js";
|
|
17
|
+
import "./directives/clickoutside.js";
|
|
18
18
|
import "./utils/calculateElementOverflow.js";
|
|
19
19
|
import "./utils/helpers.js";
|
|
20
20
|
import "lodash-es/camelCase";
|
package/dist/Dropdown.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as I, ref as u, useCssModule as q, watch as C, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as _, openBlock as p, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as V, toDisplayString as W, createVNode as S, createBlock as Y, Transition as F, withCtx as j, unref as M, normalizeStyle as G, vShow as H, nextTick as A } from "vue";
|
|
2
2
|
import { KEY_CODES as d } from "./constants.js";
|
|
3
|
-
import J from "./clickoutside.js";
|
|
3
|
+
import J from "./directives/clickoutside.js";
|
|
4
4
|
import Q from "./utils/calculateElementOverflow.js";
|
|
5
5
|
import { getMountPoint as X } from "./utils/helpers.js";
|
|
6
6
|
import B from "./Icon.js";
|
package/dist/FilterDropdown.js
CHANGED
|
@@ -16,7 +16,7 @@ import "./index-9e1095ef.js";
|
|
|
16
16
|
import "./_plugin-vue_export-helper-dad06003.js";
|
|
17
17
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
|
|
18
18
|
import "./constants.js";
|
|
19
|
-
import "./clickoutside.js";
|
|
19
|
+
import "./directives/clickoutside.js";
|
|
20
20
|
import "./utils/calculateElementOverflow.js";
|
|
21
21
|
import "./utils/helpers.js";
|
|
22
22
|
import "lodash-es/camelCase";
|
package/dist/Filters.js
CHANGED
|
@@ -39,12 +39,13 @@ import "lodash-es/isNil";
|
|
|
39
39
|
import "./utils/i18n.js";
|
|
40
40
|
import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
|
|
41
41
|
import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
|
|
42
|
+
import "./floating-ui.vue-8d7f7932.js";
|
|
42
43
|
import "lodash-es/isEmpty";
|
|
43
44
|
import "lodash-es/isEqual";
|
|
44
45
|
import "./useSearch.js";
|
|
45
46
|
import "./searchFuzzy-9b74ec4e.js";
|
|
46
47
|
import "./_commonjsHelpers-10dfc225.js";
|
|
47
|
-
import "./clickoutside.js";
|
|
48
|
+
import "./directives/clickoutside.js";
|
|
48
49
|
import "./MenusPlugin-9288029a.js";
|
|
49
50
|
import "./Chip.js";
|
|
50
51
|
import "./utils/colorScheme.js";
|
|
@@ -350,8 +351,8 @@ function ae(l, s, o, i, t, r) {
|
|
|
350
351
|
}
|
|
351
352
|
const ne = {
|
|
352
353
|
$style: te
|
|
353
|
-
},
|
|
354
|
+
}, st = /* @__PURE__ */ ee(le, [["render", ae], ["__cssModules", ne]]);
|
|
354
355
|
export {
|
|
355
|
-
|
|
356
|
+
st as default
|
|
356
357
|
};
|
|
357
358
|
//# sourceMappingURL=Filters.js.map
|
package/dist/Filters.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filters.js","sources":["../src/components/Filters/Filters.vue"],"sourcesContent":["<script>\n import cloneDeep from 'lodash-es/cloneDeep';\n import merge from 'lodash-es/merge';\n import { nextTick, ref, toRefs } from 'vue';\n\n import useValidation from '../../composables/useValidation/useValidation';\n import { LLLV_CHANGE_TRIGGERS } from '../../constants';\n import { t } from '../../locale';\n import { persistentStorage } from '../../storage';\n import Button from '../Button/Button.vue';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import DatePicker from '../DatePicker/DatePicker.vue';\n import Input from '../Input/Input.vue';\n import InputOptions from '../InputOptions/InputOptions.vue';\n import Radio from '../Radio/Radio.vue';\n import Select from '../Select/Select.vue';\n\n export default {\n name: 'll-filters',\n\n components: {\n 'll-button': Button,\n 'll-checkbox': Checkbox,\n 'll-input': Input,\n 'll-input-options': InputOptions,\n 'll-radio': Radio,\n 'll-select': Select,\n DatePicker,\n },\n\n props: {\n /**\n * Whether to disable the Apply button\n */\n disableApply: Boolean,\n /**\n * Whether to disable the Clear button\n */\n disableClear: Boolean,\n /**\n * Whether to disable the sticky filters\n * If disabled, a default pre-selected value(s) can be added to\n * the filter component's attributes\n */\n disablePersistency: Boolean,\n /**\n * Filters schema\n */\n schema: {\n type: Array,\n default: () => [],\n },\n /**\n * Validation schema function that returns an object\n */\n validationSchema: {\n type: Function,\n default: () => () => undefined,\n },\n },\n\n emits: ['change', 'submit', 'reset'],\n\n setup(props) {\n const { validationSchema: getValidationSchema } = toRefs(props);\n const validationSchema = getValidationSchema.value();\n const validationValues = ref({});\n\n // Without ref, `this.validation` will always evaluate to its initial value of `undefined` due to lack of reactivity.\n const validation = ref();\n\n function initValidation() {\n if (validationSchema?.toString() !== '[object Object]') {\n return;\n }\n\n validationValues.value = Object.keys(validationSchema).reduce((values, fieldName) => {\n values[fieldName] = undefined;\n\n return values;\n }, {});\n\n const validationRules = Object.entries(validationSchema).reduce((rules, [fieldName, fieldRules]) => {\n rules[fieldName] = fieldRules.map((fieldRule) => {\n return fieldRule(validationValues);\n });\n\n return rules;\n }, {});\n\n validation.value = useValidation({ rules: validationRules, values: validationValues });\n validation.value.validate();\n }\n\n return {\n validation,\n validationValues,\n initValidation,\n };\n },\n\n data() {\n return {\n applyText: t('ll.apply'),\n clearText: t('ll.clear'),\n filters: {},\n filterValues: {},\n forceRenderCount: 0,\n };\n },\n\n watch: {\n filterValues: {\n /**\n * Maps filters to a partcular object structure:\n * @param {IFilterSchemaItem} newFilterValues all selected filters\n * @returns {IFilter}\n */\n handler: function (newFilterValues) {\n const filters = Object.keys(newFilterValues).reduce((acc, i) => {\n const schema = this.schema[i];\n\n if (!schema || !schema.fieldToFilter) {\n return acc;\n }\n\n const item = newFilterValues[i];\n\n // Ignore empty string or undefined/null filter values\n if (item === '' || item == null) {\n return acc;\n }\n\n const trackBy = schema.attributes.trackBy || 'id';\n const isObject = typeof item === 'object';\n const isCustomFilterComponent = typeof schema.type === 'object';\n // TODO: remove handling of schema.attributes.multiple when we remove the vue-multiselect version of Select\n const isMultiple =\n (isCustomFilterComponent && schema.attributes.multiple) ||\n (!isCustomFilterComponent &&\n schema.type.includes('ll-select') &&\n (schema.attributes.multiple || !schema.attributes.single));\n const filterBy = isMultiple\n ? // local storage might have item stored as an object from the old Select\n (Array.isArray(item) ? item : [item]).map((v) => v[trackBy])\n : isObject\n ? [item[trackBy]]\n : [item];\n\n const groupedWith = schema.groupedWith;\n\n if (groupedWith) {\n filterBy[0] = {\n index: groupedWith,\n value: newFilterValues[groupedWith],\n };\n filterBy.push({\n index: Number(i),\n value: newFilterValues[i],\n });\n }\n\n filterBy.length &&\n (acc[schema.fieldToFilter] = {\n // don't add to `filters` if no filterBy\n filterBy,\n filterType: schema.type, // Informs the applied filter count\n isMultiple,\n ...('fn' in schema && { customFilter: schema.fn }),\n });\n\n return acc;\n }, {});\n\n this.filters = filters;\n this.$emit('change', filters);\n },\n\n deep: true,\n immediate: true,\n },\n\n filters() {\n if (this.validation) {\n this.updateValidationValues();\n }\n },\n },\n\n async created() {\n // initFilterValues updates the filterValues so using await nextTick() forces the code\n // after it to wait until nextTick is done, at which point the filterValues will\n // be done initializing. Otherwise, applyFilters sometimes applies the wrong\n // filters because filterValues is not done updating.\n this.initFilterValues();\n await nextTick();\n this.initValidation();\n this.applyFilters({ trigger: LLLV_CHANGE_TRIGGERS.LOAD });\n },\n\n methods: {\n initFilterValues() {\n if (this.disablePersistency) {\n this.filterValues = this.getDefaultFilterValues();\n\n return;\n }\n\n this.filterValues = this.getPersistentFilterValues() || this.getDefaultFilterValues();\n },\n\n /**\n * Apply the selected filters and save them to localStorage.\n * ListView calls this method using a ref to Filters.\n * The trigger option is used in ListView.\n * @param {object} [options] - optional parameters\n * @param {string} [options.trigger] - the action that triggered this function call\n */\n async applyFilters({ trigger = LLLV_CHANGE_TRIGGERS.APPLY } = {}) {\n if (this.validation) {\n await this.validation.validate();\n\n if (this.validation.hasErrors) {\n return;\n }\n }\n\n if (!this.disablePersistency) {\n this.persistFilterValues(this.filterValues);\n }\n\n this.$emit('submit', { trigger });\n },\n\n resetFilters() {\n this.filterValues = this.getDefaultFilterValues();\n\n this.forceRenderCount++;\n\n if (!this.disablePersistency) {\n this.persistFilterValues(this.filterValues);\n }\n\n // Emit after filters are updated\n this.$nextTick(() => {\n this.$emit('reset');\n });\n },\n\n /**\n * Returns pre-defined filter values to become the default values\n */\n getDefaultFilterValues() {\n return this.schema.reduce((acc, item, filterIndex) => {\n if (item.type === 'll-checkbox') {\n acc[filterIndex] = item.attributes.checked || false;\n } else if (Object.prototype.hasOwnProperty.call(item.attributes, 'modelValue')) {\n acc[filterIndex] = item.attributes.modelValue;\n }\n\n return acc;\n }, {});\n },\n\n /**\n * Intended for external use, when filter values need to be set for the user\n */\n setFilterValues(newValues) {\n this.filterValues = merge({}, this.filterValues, newValues);\n this.forceRenderCount++;\n },\n\n updateValidationValues() {\n const validatable = Object.keys(this.validationSchema());\n\n this.schema.forEach((fieldSchema, filterIndex) => {\n const fieldToFilter = fieldSchema.fieldToFilter;\n const validate = validatable.includes(fieldToFilter);\n\n if (validate) {\n const filter = this.filters[fieldToFilter];\n\n /**\n * Get all validatable fields.\n * Use parsed value of filters that are set,\n * otherwise fall back to `filterValue` value if not set.\n */\n const filterValue = filter\n ? filter.isMultiple\n ? filter.filterBy\n : filter.filterBy[0]\n : this.filterValues[filterIndex];\n\n this.validationValues[fieldToFilter] = filterValue;\n }\n });\n },\n\n /**\n * Change handler for filter fields\n */\n onChange(filter, filterValues, filterIndex) {\n if (filter.on?.change) {\n // Maps to `on.change` handlers in the filter schema.\n filter.on.change(filterValues, filterIndex);\n }\n },\n\n /**\n * Select input event handler for filter fields\n */\n onSelectInput(newValue, filter, filterIndex) {\n if (newValue === undefined) {\n delete this.filterValues[filterIndex]; // prevent undefined filterValues which cause an empty result list\n } else {\n this.filterValues[filterIndex] = newValue;\n }\n\n this.onChange(filter, this.filterValues, filterIndex);\n },\n\n /**\n * Get filter values from local storage.\n * @returns {any}\n */\n getPersistentFilterValues() {\n return persistentStorage.get('filter-values');\n },\n\n /**\n * Clone new filterValues to remove reactivity, and save them to localStorage.\n * @param {object} newValues - the filterValues to be persisted in localStorage\n */\n persistFilterValues(newValues) {\n persistentStorage.set('filter-values', cloneDeep(newValues));\n },\n },\n };\n</script>\n\n<template>\n <div class=\"tw-ll-grid tw-grid-cols-4 md:tw-grid-cols-12\">\n <template v-for=\"(filter, filterIndex) in schema\">\n <div\n v-if=\"!filter.hidden\"\n :key=\"`${filterIndex} ${forceRenderCount}`\"\n class=\"field-wrapper tw-col-span-4 md:tw-col-span-3\"\n :class=\"{ 'max-md:tw-hidden': !filter.type, 'tw-flex tw-items-end': filter.type === 'll-checkbox' }\"\n :data-test=\"`filter|${filter.fieldToFilter}`\"\n >\n <!-- Filter component -->\n <ll-select\n v-if=\"filter.type === 'll-select'\"\n v-bind=\"filter.attributes\"\n :error=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n :model-value=\"filterValues[filterIndex]\"\n @update:model-value=\"(newValue) => onSelectInput(newValue, filter, filterIndex)\"\n />\n <ll-checkbox\n v-else-if=\"filter.type === 'll-checkbox'\"\n v-model:checked=\"filterValues[filterIndex]\"\n v-bind=\"filter.attributes\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n />\n <ll-radio\n v-else-if=\"filter.type === 'll-radio'\"\n v-model:checked=\"filterValues[filterIndex]\"\n v-bind=\"filter.attributes\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n />\n <component\n v-bind=\"filter.attributes\"\n :is=\"filter.type\"\n v-else-if=\"filter.type\"\n v-model=\"filterValues[filterIndex]\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:model-value=\"onChange(filter, filterValues, filterIndex)\"\n >\n <template v-if=\"filter.slots && filter.slots.selected\" #selected=\"{ option }\">\n <component :is=\"filter.slots.selected\" v-bind=\"option.props\" />\n </template>\n <template v-if=\"filter.slots && filter.slots.option\" #option=\"{ option }\">\n <component :is=\"filter.slots.option\" v-bind=\"option.props\" />\n </template>\n <template v-if=\"filter.slots && filter.slots.prepend\" #prepend>\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"filter.slots.prepend\"></span>\n </template>\n <template v-if=\"filter.slots && filter.slots.append\" #append>\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"filter.slots.append\"></span>\n </template>\n </component>\n </div>\n </template>\n <div\n class=\"button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12\"\n :class=\"$style['filter-button-group']\"\n >\n <ll-button secondary data-test=\"button|reset-filters\" :disabled=\"disableClear\" @click=\"resetFilters\">\n {{ clearText }}\n </ll-button>\n <ll-button\n primary\n data-test=\"button|apply-filters\"\n :disabled=\"disableApply || validation?.hasErrors\"\n @click=\"applyFilters\"\n >\n {{ applyText }}\n </ll-button>\n </div>\n </div>\n</template>\n\n<style module>\n .filter-button-group {\n @media screen('max-md') {\n display: flex;\n flex-direction: column-reverse;\n }\n\n button {\n @media screen('max-md') {\n width: 100% !important;\n }\n\n &:nth-child(2) {\n @media screen('max-md') {\n margin-bottom: theme('spacing.3');\n }\n }\n }\n }\n</style>\n"],"names":["_sfc_main","Button","Checkbox","Input","InputOptions","Radio","Select","DatePicker","props","getValidationSchema","toRefs","validationSchema","validationValues","ref","validation","initValidation","values","fieldName","validationRules","rules","fieldRules","fieldRule","useValidation","t","newFilterValues","filters","acc","schema","item","trackBy","isObject","isCustomFilterComponent","isMultiple","filterBy","v","groupedWith","nextTick","LLLV_CHANGE_TRIGGERS","trigger","filterIndex","newValues","merge","validatable","fieldSchema","fieldToFilter","filter","filterValue","filterValues","_a","newValue","persistentStorage","cloneDeep","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_renderList","$props","$data","_normalizeClass","_createBlock","_component_ll_select","_mergeProps","$setup","_b","$options","_component_ll_checkbox","$event","_c","_d","_component_ll_radio","_e","_f","_resolveDynamicComponent","_g","_h","_withCtx","option","_createElementVNode","_ctx","_createVNode","_component_ll_button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Filters.js","sources":["../src/components/Filters/Filters.vue"],"sourcesContent":["<script>\n import cloneDeep from 'lodash-es/cloneDeep';\n import merge from 'lodash-es/merge';\n import { nextTick, ref, toRefs } from 'vue';\n\n import useValidation from '../../composables/useValidation/useValidation';\n import { LLLV_CHANGE_TRIGGERS } from '../../constants';\n import { t } from '../../locale';\n import { persistentStorage } from '../../storage';\n import Button from '../Button/Button.vue';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import DatePicker from '../DatePicker/DatePicker.vue';\n import Input from '../Input/Input.vue';\n import InputOptions from '../InputOptions/InputOptions.vue';\n import Radio from '../Radio/Radio.vue';\n import Select from '../Select/Select.vue';\n\n export default {\n name: 'll-filters',\n\n components: {\n 'll-button': Button,\n 'll-checkbox': Checkbox,\n 'll-input': Input,\n 'll-input-options': InputOptions,\n 'll-radio': Radio,\n 'll-select': Select,\n DatePicker,\n },\n\n props: {\n /**\n * Whether to disable the Apply button\n */\n disableApply: Boolean,\n /**\n * Whether to disable the Clear button\n */\n disableClear: Boolean,\n /**\n * Whether to disable the sticky filters\n * If disabled, a default pre-selected value(s) can be added to\n * the filter component's attributes\n */\n disablePersistency: Boolean,\n /**\n * Filters schema\n */\n schema: {\n type: Array,\n default: () => [],\n },\n /**\n * Validation schema function that returns an object\n */\n validationSchema: {\n type: Function,\n default: () => () => undefined,\n },\n },\n\n emits: ['change', 'submit', 'reset'],\n\n setup(props) {\n const { validationSchema: getValidationSchema } = toRefs(props);\n const validationSchema = getValidationSchema.value();\n const validationValues = ref({});\n\n // Without ref, `this.validation` will always evaluate to its initial value of `undefined` due to lack of reactivity.\n const validation = ref();\n\n function initValidation() {\n if (validationSchema?.toString() !== '[object Object]') {\n return;\n }\n\n validationValues.value = Object.keys(validationSchema).reduce((values, fieldName) => {\n values[fieldName] = undefined;\n\n return values;\n }, {});\n\n const validationRules = Object.entries(validationSchema).reduce((rules, [fieldName, fieldRules]) => {\n rules[fieldName] = fieldRules.map((fieldRule) => {\n return fieldRule(validationValues);\n });\n\n return rules;\n }, {});\n\n validation.value = useValidation({ rules: validationRules, values: validationValues });\n validation.value.validate();\n }\n\n return {\n validation,\n validationValues,\n initValidation,\n };\n },\n\n data() {\n return {\n applyText: t('ll.apply'),\n clearText: t('ll.clear'),\n filters: {},\n filterValues: {},\n forceRenderCount: 0,\n };\n },\n\n watch: {\n filterValues: {\n /**\n * Maps filters to a partcular object structure:\n * @param {IFilterSchemaItem} newFilterValues all selected filters\n * @returns {IFilter}\n */\n handler: function (newFilterValues) {\n const filters = Object.keys(newFilterValues).reduce((acc, i) => {\n const schema = this.schema[i];\n\n if (!schema || !schema.fieldToFilter) {\n return acc;\n }\n\n const item = newFilterValues[i];\n\n // Ignore empty string or undefined/null filter values\n if (item === '' || item == null) {\n return acc;\n }\n\n const trackBy = schema.attributes.trackBy || 'id';\n const isObject = typeof item === 'object';\n const isCustomFilterComponent = typeof schema.type === 'object';\n // TODO: remove handling of schema.attributes.multiple when we remove the vue-multiselect version of Select\n const isMultiple =\n (isCustomFilterComponent && schema.attributes.multiple) ||\n (!isCustomFilterComponent &&\n schema.type.includes('ll-select') &&\n (schema.attributes.multiple || !schema.attributes.single));\n const filterBy = isMultiple\n ? // local storage might have item stored as an object from the old Select\n (Array.isArray(item) ? item : [item]).map((v) => v[trackBy])\n : isObject\n ? [item[trackBy]]\n : [item];\n\n const groupedWith = schema.groupedWith;\n\n if (groupedWith) {\n filterBy[0] = {\n index: groupedWith,\n value: newFilterValues[groupedWith],\n };\n filterBy.push({\n index: Number(i),\n value: newFilterValues[i],\n });\n }\n\n filterBy.length &&\n (acc[schema.fieldToFilter] = {\n // don't add to `filters` if no filterBy\n filterBy,\n filterType: schema.type, // Informs the applied filter count\n isMultiple,\n ...('fn' in schema && { customFilter: schema.fn }),\n });\n\n return acc;\n }, {});\n\n this.filters = filters;\n this.$emit('change', filters);\n },\n\n deep: true,\n immediate: true,\n },\n\n filters() {\n if (this.validation) {\n this.updateValidationValues();\n }\n },\n },\n\n async created() {\n // initFilterValues updates the filterValues so using await nextTick() forces the code\n // after it to wait until nextTick is done, at which point the filterValues will\n // be done initializing. Otherwise, applyFilters sometimes applies the wrong\n // filters because filterValues is not done updating.\n this.initFilterValues();\n await nextTick();\n this.initValidation();\n this.applyFilters({ trigger: LLLV_CHANGE_TRIGGERS.LOAD });\n },\n\n methods: {\n initFilterValues() {\n if (this.disablePersistency) {\n this.filterValues = this.getDefaultFilterValues();\n\n return;\n }\n\n this.filterValues = this.getPersistentFilterValues() || this.getDefaultFilterValues();\n },\n\n /**\n * Apply the selected filters and save them to localStorage.\n * ListView calls this method using a ref to Filters.\n * The trigger option is used in ListView.\n * @param {object} [options] - optional parameters\n * @param {string} [options.trigger] - the action that triggered this function call\n */\n async applyFilters({ trigger = LLLV_CHANGE_TRIGGERS.APPLY } = {}) {\n if (this.validation) {\n await this.validation.validate();\n\n if (this.validation.hasErrors) {\n return;\n }\n }\n\n if (!this.disablePersistency) {\n this.persistFilterValues(this.filterValues);\n }\n\n this.$emit('submit', { trigger });\n },\n\n resetFilters() {\n this.filterValues = this.getDefaultFilterValues();\n\n this.forceRenderCount++;\n\n if (!this.disablePersistency) {\n this.persistFilterValues(this.filterValues);\n }\n\n // Emit after filters are updated\n this.$nextTick(() => {\n this.$emit('reset');\n });\n },\n\n /**\n * Returns pre-defined filter values to become the default values\n */\n getDefaultFilterValues() {\n return this.schema.reduce((acc, item, filterIndex) => {\n if (item.type === 'll-checkbox') {\n acc[filterIndex] = item.attributes.checked || false;\n } else if (Object.prototype.hasOwnProperty.call(item.attributes, 'modelValue')) {\n acc[filterIndex] = item.attributes.modelValue;\n }\n\n return acc;\n }, {});\n },\n\n /**\n * Intended for external use, when filter values need to be set for the user\n */\n setFilterValues(newValues) {\n this.filterValues = merge({}, this.filterValues, newValues);\n this.forceRenderCount++;\n },\n\n updateValidationValues() {\n const validatable = Object.keys(this.validationSchema());\n\n this.schema.forEach((fieldSchema, filterIndex) => {\n const fieldToFilter = fieldSchema.fieldToFilter;\n const validate = validatable.includes(fieldToFilter);\n\n if (validate) {\n const filter = this.filters[fieldToFilter];\n\n /**\n * Get all validatable fields.\n * Use parsed value of filters that are set,\n * otherwise fall back to `filterValue` value if not set.\n */\n const filterValue = filter\n ? filter.isMultiple\n ? filter.filterBy\n : filter.filterBy[0]\n : this.filterValues[filterIndex];\n\n this.validationValues[fieldToFilter] = filterValue;\n }\n });\n },\n\n /**\n * Change handler for filter fields\n */\n onChange(filter, filterValues, filterIndex) {\n if (filter.on?.change) {\n // Maps to `on.change` handlers in the filter schema.\n filter.on.change(filterValues, filterIndex);\n }\n },\n\n /**\n * Select input event handler for filter fields\n */\n onSelectInput(newValue, filter, filterIndex) {\n if (newValue === undefined) {\n delete this.filterValues[filterIndex]; // prevent undefined filterValues which cause an empty result list\n } else {\n this.filterValues[filterIndex] = newValue;\n }\n\n this.onChange(filter, this.filterValues, filterIndex);\n },\n\n /**\n * Get filter values from local storage.\n * @returns {any}\n */\n getPersistentFilterValues() {\n return persistentStorage.get('filter-values');\n },\n\n /**\n * Clone new filterValues to remove reactivity, and save them to localStorage.\n * @param {object} newValues - the filterValues to be persisted in localStorage\n */\n persistFilterValues(newValues) {\n persistentStorage.set('filter-values', cloneDeep(newValues));\n },\n },\n };\n</script>\n\n<template>\n <div class=\"tw-ll-grid tw-grid-cols-4 md:tw-grid-cols-12\">\n <template v-for=\"(filter, filterIndex) in schema\">\n <div\n v-if=\"!filter.hidden\"\n :key=\"`${filterIndex} ${forceRenderCount}`\"\n class=\"field-wrapper tw-col-span-4 md:tw-col-span-3\"\n :class=\"{ 'max-md:tw-hidden': !filter.type, 'tw-flex tw-items-end': filter.type === 'll-checkbox' }\"\n :data-test=\"`filter|${filter.fieldToFilter}`\"\n >\n <!-- Filter component -->\n <ll-select\n v-if=\"filter.type === 'll-select'\"\n v-bind=\"filter.attributes\"\n :error=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n :model-value=\"filterValues[filterIndex]\"\n @update:model-value=\"(newValue) => onSelectInput(newValue, filter, filterIndex)\"\n />\n <ll-checkbox\n v-else-if=\"filter.type === 'll-checkbox'\"\n v-model:checked=\"filterValues[filterIndex]\"\n v-bind=\"filter.attributes\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n />\n <ll-radio\n v-else-if=\"filter.type === 'll-radio'\"\n v-model:checked=\"filterValues[filterIndex]\"\n v-bind=\"filter.attributes\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n />\n <component\n v-bind=\"filter.attributes\"\n :is=\"filter.type\"\n v-else-if=\"filter.type\"\n v-model=\"filterValues[filterIndex]\"\n :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n :label=\"filter.label\"\n @update:model-value=\"onChange(filter, filterValues, filterIndex)\"\n >\n <template v-if=\"filter.slots && filter.slots.selected\" #selected=\"{ option }\">\n <component :is=\"filter.slots.selected\" v-bind=\"option.props\" />\n </template>\n <template v-if=\"filter.slots && filter.slots.option\" #option=\"{ option }\">\n <component :is=\"filter.slots.option\" v-bind=\"option.props\" />\n </template>\n <template v-if=\"filter.slots && filter.slots.prepend\" #prepend>\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"filter.slots.prepend\"></span>\n </template>\n <template v-if=\"filter.slots && filter.slots.append\" #append>\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"filter.slots.append\"></span>\n </template>\n </component>\n </div>\n </template>\n <div\n class=\"button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12\"\n :class=\"$style['filter-button-group']\"\n >\n <ll-button secondary data-test=\"button|reset-filters\" :disabled=\"disableClear\" @click=\"resetFilters\">\n {{ clearText }}\n </ll-button>\n <ll-button\n primary\n data-test=\"button|apply-filters\"\n :disabled=\"disableApply || validation?.hasErrors\"\n @click=\"applyFilters\"\n >\n {{ applyText }}\n </ll-button>\n </div>\n </div>\n</template>\n\n<style module>\n .filter-button-group {\n @media screen('max-md') {\n display: flex;\n flex-direction: column-reverse;\n }\n\n button {\n @media screen('max-md') {\n width: 100% !important;\n }\n\n &:nth-child(2) {\n @media screen('max-md') {\n margin-bottom: theme('spacing.3');\n }\n }\n }\n }\n</style>\n"],"names":["_sfc_main","Button","Checkbox","Input","InputOptions","Radio","Select","DatePicker","props","getValidationSchema","toRefs","validationSchema","validationValues","ref","validation","initValidation","values","fieldName","validationRules","rules","fieldRules","fieldRule","useValidation","t","newFilterValues","filters","acc","schema","item","trackBy","isObject","isCustomFilterComponent","isMultiple","filterBy","v","groupedWith","nextTick","LLLV_CHANGE_TRIGGERS","trigger","filterIndex","newValues","merge","validatable","fieldSchema","fieldToFilter","filter","filterValue","filterValues","_a","newValue","persistentStorage","cloneDeep","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_renderList","$props","$data","_normalizeClass","_createBlock","_component_ll_select","_mergeProps","$setup","_b","$options","_component_ll_checkbox","$event","_c","_d","_component_ll_radio","_e","_f","_resolveDynamicComponent","_g","_h","_withCtx","option","_createElementVNode","_ctx","_createVNode","_component_ll_button"],"mappings":"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"}
|
package/dist/InputOptions.js
CHANGED
|
@@ -13,6 +13,7 @@ import "./constants.js";
|
|
|
13
13
|
import "./Icon.js";
|
|
14
14
|
import "./index-9e1095ef.js";
|
|
15
15
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
16
|
+
import "./floating-ui.vue-8d7f7932.js";
|
|
16
17
|
import "@leaflink/snitch";
|
|
17
18
|
import "lodash-es/debounce";
|
|
18
19
|
import "lodash-es/isEmpty";
|
|
@@ -24,7 +25,7 @@ import "./_commonjsHelpers-10dfc225.js";
|
|
|
24
25
|
import "./utils/helpers.js";
|
|
25
26
|
import "lodash-es/camelCase";
|
|
26
27
|
import "lodash-es/isFinite";
|
|
27
|
-
import "./clickoutside.js";
|
|
28
|
+
import "./directives/clickoutside.js";
|
|
28
29
|
import "./MenusPlugin-9288029a.js";
|
|
29
30
|
import "./Chip.js";
|
|
30
31
|
import "./utils/colorScheme.js";
|
|
@@ -145,8 +146,8 @@ const q = /* @__PURE__ */ S({
|
|
|
145
146
|
"has-error": "_has-error_gn7he_16"
|
|
146
147
|
}, J = {
|
|
147
148
|
$style: H
|
|
148
|
-
},
|
|
149
|
+
}, xe = /* @__PURE__ */ j(q, [["__cssModules", J]]);
|
|
149
150
|
export {
|
|
150
|
-
|
|
151
|
+
xe as default
|
|
151
152
|
};
|
|
152
153
|
//# sourceMappingURL=InputOptions.js.map
|
package/dist/InputOptions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type Option = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type SelectedOption = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n interface InputOptionsProps {\n /**\n * Error text to display. Replaces `hintText` (if provided) & adds error styling\n */\n errorText?: string;\n\n /**\n * Hint text to display below the input\n */\n hintText?: string;\n\n /**\n * Label to render for the datepicker\n */\n label?: string;\n\n /**\n * The current value inclusive of the input & select\n */\n modelValue?: { value: string; option?: SelectedOption };\n\n /**\n * Input type\n */\n type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n /**\n * Prevents the Selected Option from being truncated, if true\n */\n noTruncate?: boolean;\n\n /**\n * Options for the select\n */\n options?: Option[];\n }\n</script>\n\n<script lang=\"ts\" setup>\n import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n import Field from '../Field/Field.vue';\n import Input from '../Input/Input.vue';\n import Select from '../Select/Select.vue';\n\n defineOptions({\n name: 'll-input-options',\n });\n\n const props = withDefaults(defineProps<InputOptionsProps>(), {\n modelValue: () => ({ value: '', option: undefined }),\n noTruncate: false,\n options: () => [],\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n type: 'text',\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (\n e: 'update:model-value',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n /**\n * Emitted when either the input or select changes\n */\n (\n e: 'change',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n }>();\n\n const attrs = useAttrs();\n const slots = useSlots();\n const classes = useCssModule();\n const internalInput = ref<string>();\n const isInputFocused = ref(false);\n const selectedOption = ref<Option | undefined>();\n\n const inputAttrs = computed(() => {\n const { disabled, placeholder } = attrs;\n\n return { disabled, placeholder } as { disabled: boolean; placeholder: string };\n });\n\n const selectAttrs = computed(() => {\n const { disabled, displayBy, trackBy } = attrs;\n\n return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n });\n\n // Input value changed\n function handleInput(val?: string | number) {\n internalInput.value = String(val);\n\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n // Input blurred\n function handleInputChange() {\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n function handleSelectChange(val?: Option) {\n selectedOption.value = val;\n\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n }\n\n watchEffect(() => {\n if (!selectedOption.value) {\n selectedOption.value = props.options[0];\n }\n });\n\n watch(\n () => props.modelValue.value,\n () => {\n internalInput.value = props.modelValue.value;\n },\n { immediate: true },\n );\n\n watch(\n () => props.modelValue.option,\n () => {\n selectedOption.value = props.modelValue.option;\n },\n { immediate: true },\n );\n\n if (attrs.value) {\n throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n }\n</script>\n\n<template>\n <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n <template #default=\"{ fieldId }\">\n <div class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n <Input\n v-bind=\"inputAttrs\"\n :id=\"fieldId\"\n class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n data-test=\"stash-input-options|input\"\n :type=\"props.type\"\n :model-value=\"internalInput\"\n @change=\"handleInputChange\"\n @update:model-value=\"handleInput\"\n @blur=\"isInputFocused = false\"\n @focus=\"isInputFocused = true\"\n />\n\n <Select\n v-bind=\"selectAttrs\"\n single\n hide-search\n prevent-empty\n class=\"stash-input-options__select tw-min-w-20\"\n data-test=\"stash-input-options|select\"\n :class=\"classes.select\"\n :no-truncate=\"noTruncate\"\n :options=\"options\"\n :model-value=\"selectedOption\"\n @update:model-value=\"handleSelectChange\"\n />\n </div>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Hint slot for rendering text below the input -->\n <slot name=\"hint\"></slot>\n </template>\n </Field>\n</template>\n\n<style module>\n .input input {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .select :global(.stash-select__content) {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .select:global(.stash-select--active .stash-select__content) {\n min-width: 0;\n }\n\n .has-error input,\n .has-error input:hover:not(:focus),\n .has-error :global(.stash-select__content),\n .has-error :global(.stash-select__content:hover:not(:focus)) {\n border-color: var(--color-red-500);\n }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","inputAttrs","computed","disabled","placeholder","selectAttrs","displayBy","trackBy","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type Option = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type SelectedOption = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n interface InputOptionsProps {\n /**\n * Error text to display. Replaces `hintText` (if provided) & adds error styling\n */\n errorText?: string;\n\n /**\n * Hint text to display below the input\n */\n hintText?: string;\n\n /**\n * Label to render for the datepicker\n */\n label?: string;\n\n /**\n * The current value inclusive of the input & select\n */\n modelValue?: { value: string; option?: SelectedOption };\n\n /**\n * Input type\n */\n type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n /**\n * Prevents the Selected Option from being truncated, if true\n */\n noTruncate?: boolean;\n\n /**\n * Options for the select\n */\n options?: Option[];\n }\n</script>\n\n<script lang=\"ts\" setup>\n import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n import Field from '../Field/Field.vue';\n import Input from '../Input/Input.vue';\n import Select from '../Select/Select.vue';\n\n defineOptions({\n name: 'll-input-options',\n });\n\n const props = withDefaults(defineProps<InputOptionsProps>(), {\n modelValue: () => ({ value: '', option: undefined }),\n noTruncate: false,\n options: () => [],\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n type: 'text',\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (\n e: 'update:model-value',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n /**\n * Emitted when either the input or select changes\n */\n (\n e: 'change',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n }>();\n\n const attrs = useAttrs();\n const slots = useSlots();\n const classes = useCssModule();\n const internalInput = ref<string>();\n const isInputFocused = ref(false);\n const selectedOption = ref<Option | undefined>();\n\n const inputAttrs = computed(() => {\n const { disabled, placeholder } = attrs;\n\n return { disabled, placeholder } as { disabled: boolean; placeholder: string };\n });\n\n const selectAttrs = computed(() => {\n const { disabled, displayBy, trackBy } = attrs;\n\n return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n });\n\n // Input value changed\n function handleInput(val?: string | number) {\n internalInput.value = String(val);\n\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n // Input blurred\n function handleInputChange() {\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n function handleSelectChange(val?: Option) {\n selectedOption.value = val;\n\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n }\n\n watchEffect(() => {\n if (!selectedOption.value) {\n selectedOption.value = props.options[0];\n }\n });\n\n watch(\n () => props.modelValue.value,\n () => {\n internalInput.value = props.modelValue.value;\n },\n { immediate: true },\n );\n\n watch(\n () => props.modelValue.option,\n () => {\n selectedOption.value = props.modelValue.option;\n },\n { immediate: true },\n );\n\n if (attrs.value) {\n throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n }\n</script>\n\n<template>\n <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n <template #default=\"{ fieldId }\">\n <div class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n <Input\n v-bind=\"inputAttrs\"\n :id=\"fieldId\"\n class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n data-test=\"stash-input-options|input\"\n :type=\"props.type\"\n :model-value=\"internalInput\"\n @change=\"handleInputChange\"\n @update:model-value=\"handleInput\"\n @blur=\"isInputFocused = false\"\n @focus=\"isInputFocused = true\"\n />\n\n <Select\n v-bind=\"selectAttrs\"\n single\n hide-search\n prevent-empty\n class=\"stash-input-options__select tw-min-w-20\"\n data-test=\"stash-input-options|select\"\n :class=\"classes.select\"\n :no-truncate=\"noTruncate\"\n :options=\"options\"\n :model-value=\"selectedOption\"\n @update:model-value=\"handleSelectChange\"\n />\n </div>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Hint slot for rendering text below the input -->\n <slot name=\"hint\"></slot>\n </template>\n </Field>\n</template>\n\n<style module>\n .input input {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .select :global(.stash-select__content) {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .select:global(.stash-select--active .stash-select__content) {\n min-width: 0;\n }\n\n .has-error input,\n .has-error input:hover:not(:focus),\n .has-error :global(.stash-select__content),\n .has-error :global(.stash-select__content:hover:not(:focus)) {\n border-color: var(--color-red-500);\n }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","inputAttrs","computed","disabled","placeholder","selectAttrs","displayBy","trackBy","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAURC,IAAOC,GAiBPC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,KAEjBG,IAAaC,EAAS,MAAM;AAC1B,YAAA,EAAE,UAAAC,GAAU,aAAAC,EAAgB,IAAAb;AAE3B,aAAA,EAAE,UAAAY,GAAU,aAAAC;IAAY,CAChC,GAEKC,IAAcH,EAAS,MAAM;AACjC,YAAM,EAAE,UAAAC,GAAU,WAAAG,GAAW,SAAAC,EAAA,IAAYhB;AAElC,aAAA,EAAE,UAAAY,GAAU,WAAAG,GAAW,SAAAC;IAAQ,CACvC;AAGD,aAASC,EAAYC,GAAuB;AAC5B,MAAAZ,EAAA,QAAQ,OAAOY,CAAG,GAEhCpB,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASU,IAAoB;AAC3B,MAAArB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASW,EAAmBF,GAAc;AACxC,MAAAT,EAAe,QAAQS,GAEvBpB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAY,EAAY,MAAM;AACZ,MAACZ,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAED0B;AAAA,MACE,MAAM1B,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpB0B;AAAA,MACE,MAAM1B,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBI,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/ListView.js
CHANGED
|
@@ -2,7 +2,7 @@ import W from "lodash-es/cloneDeep";
|
|
|
2
2
|
import { resolveComponent as d, openBlock as a, createElementBlock as o, normalizeClass as r, createElementVNode as u, createVNode as p, toDisplayString as _, createCommentVNode as n, createBlock as h, withCtx as m, createTextVNode as T, renderSlot as f, TransitionGroup as F, resolveDirective as O, withDirectives as E, computed as q, withKeys as Y, normalizeStyle as J, Fragment as Q, renderList as X, mergeProps as Z, resolveDynamicComponent as $ } from "vue";
|
|
3
3
|
import ee from "./useSearch.js";
|
|
4
4
|
import { CSS_VARS as L, LLLV_CHANGE_TRIGGERS as b } from "./constants.js";
|
|
5
|
-
import V from "./sticky.js";
|
|
5
|
+
import V from "./directives/sticky.js";
|
|
6
6
|
import { t as y } from "./locale.js";
|
|
7
7
|
import { persistentStorage as A } from "./storage.js";
|
|
8
8
|
import { getCssVar as D, filterItems as te, sortItems as se } from "./utils/helpers.js";
|
|
@@ -31,7 +31,7 @@ import "lodash-es/uniqueId";
|
|
|
31
31
|
import "./index-9e1095ef.js";
|
|
32
32
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
33
33
|
import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
|
|
34
|
-
import "./clickoutside.js";
|
|
34
|
+
import "./directives/clickoutside.js";
|
|
35
35
|
import "./utils/calculateElementOverflow.js";
|
|
36
36
|
import "lodash-es/merge";
|
|
37
37
|
import "./useValidation.js";
|
|
@@ -49,6 +49,7 @@ import "./InputOptions.js";
|
|
|
49
49
|
import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
|
|
50
50
|
import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
|
|
51
51
|
import "./Select.js";
|
|
52
|
+
import "./floating-ui.vue-8d7f7932.js";
|
|
52
53
|
import "lodash-es/isEmpty";
|
|
53
54
|
import "lodash-es/isEqual";
|
|
54
55
|
import "./MenusPlugin-9288029a.js";
|
|
@@ -380,7 +381,7 @@ function Ae(e, l, s, w, i, t) {
|
|
|
380
381
|
}
|
|
381
382
|
const Pe = {
|
|
382
383
|
$style: Ie
|
|
383
|
-
},
|
|
384
|
+
}, is = /* @__PURE__ */ k(xe, [["render", Ae], ["__cssModules", Pe]]), Fe = "_caret_1147a_2", Oe = {
|
|
384
385
|
"caret-up": "_caret-up_1147a_2",
|
|
385
386
|
"caret-down": "_caret-down_1147a_6",
|
|
386
387
|
caret: Fe
|
|
@@ -476,7 +477,7 @@ function Le(e, l, s, w, i, t) {
|
|
|
476
477
|
}
|
|
477
478
|
const Ve = {
|
|
478
479
|
$style: Oe
|
|
479
|
-
},
|
|
480
|
+
}, rs = /* @__PURE__ */ k(Ee, [["render", Le], ["__cssModules", Ve]]), De = "_header_c8ut0_25", Re = "_separator_c8ut0_1", Ne = "_dropdown_c8ut0_199", ze = {
|
|
480
481
|
"list-items": "_list-items_c8ut0_2",
|
|
481
482
|
"legacy-box": "_legacy-box_c8ut0_16",
|
|
482
483
|
header: De,
|
|
@@ -1336,12 +1337,12 @@ function Ke(e, l, s, w, i, t) {
|
|
|
1336
1337
|
}
|
|
1337
1338
|
const We = {
|
|
1338
1339
|
$style: ze
|
|
1339
|
-
},
|
|
1340
|
+
}, as = /* @__PURE__ */ k(He, [["render", Ke], ["__cssModules", We]]);
|
|
1340
1341
|
export {
|
|
1341
1342
|
we as BulkActions,
|
|
1342
|
-
|
|
1343
|
-
|
|
1343
|
+
is as ListGroup,
|
|
1344
|
+
rs as ListHeader,
|
|
1344
1345
|
Te as LoadingManager,
|
|
1345
|
-
|
|
1346
|
+
as as default
|
|
1346
1347
|
};
|
|
1347
1348
|
//# sourceMappingURL=ListView.js.map
|