@leaflink/stash 44.0.0-beta.5 → 44.0.0-beta.6

package/dist/Filters.js

@@ -1,10 +1,10 @@
 import G from "lodash-es/cloneDeep";
 import z from "lodash-es/merge";
-import { toRefs as W, ref as S, nextTick as Y, resolveComponent as y, openBlock as c, createElementBlock as V, Fragment as j, renderList as q, normalizeClass as L, createBlock as f, mergeProps as g, resolveDynamicComponent as k, createSlots as J, withCtx as b, normalizeProps as O, guardReactiveProps as R, createElementVNode as v, createCommentVNode as U, createVNode as D, createTextVNode as A, toDisplayString as M } from "vue";
+import { toRefs as W, ref as E, nextTick as Y, resolveComponent as y, openBlock as c, createElementBlock as V, Fragment as S, renderList as q, normalizeClass as L, createBlock as f, mergeProps as k, resolveDynamicComponent as v, createSlots as J, withCtx as b, normalizeProps as O, guardReactiveProps as R, createElementVNode as g, createCommentVNode as U, createVNode as D, createTextVNode as A, toDisplayString as M } from "vue";
 import K from "./useValidation.js";
-import { LLLV_CHANGE_TRIGGERS as N } from "./constants.js";
-import { t as H } from "./locale.js";
-import { persistentStorage as w } from "./storage.js";
+import { LLLV_CHANGE_TRIGGERS as w } from "./constants.js";
+import { t as N } from "./locale.js";
+import { persistentStorage as H } from "./storage.js";
 import Q from "./Button.js";
 import X from "./Checkbox.js";
 import Z from "./DatePicker.js";
@@ -94,7 +94,7 @@ const ie = {
   },
   emits: ["change", "submit", "reset"],
   setup(l) {
-    const { validationSchema: r } = W(l), o = r.value(), i = S({}), t = S();
+    const { validationSchema: r } = W(l), o = r.value(), i = E({}), t = E();
     function s() {
       if ((o == null ? void 0 : o.toString()) !== "[object Object]")
         return;
@@ -110,8 +110,8 @@ const ie = {
   },
   data() {
     return {
-      applyText: H("ll.apply"),
-      clearText: H("ll.clear"),
+      applyText: N("ll.apply"),
+      clearText: N("ll.clear"),
       filters: {},
       filterValues: {},
       forceRenderCount: 0
@@ -161,7 +161,7 @@ const ie = {
     }
   },
   async created() {
-    this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger: N.LOAD });
+    this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger: w.LOAD });
   },
   methods: {
     initFilterValues() {
@@ -178,7 +178,7 @@ const ie = {
      * @param {object} [options] - optional parameters
      * @param {string} [options.trigger] - the action that triggered this function call
      */
-    async applyFilters({ trigger: l = N.APPLY } = {}) {
+    async applyFilters({ trigger: l = w.APPLY } = {}) {
       this.validation && (await this.validation.validate(), this.validation.hasErrors) || (this.disablePersistency || this.persistFilterValues(this.filterValues), this.$emit("submit", { trigger: l }));
     },
     resetFilters() {
@@ -226,14 +226,14 @@ const ie = {
      * @returns {any}
      */
     getPersistentFilterValues() {
-      return w.get("filter-values");
+      return H.get("filter-values");
     },
     /**
      * Clone new filterValues to remove reactivity, and save them to localStorage.
      * @param {object} newValues - the filterValues to be persisted in localStorage
      */
     persistFilterValues(l) {
-      w.set("filter-values", G(l));
+      H.set("filter-values", G(l));
     }
   }
 }, se = { class: "ll-grid ll-grid-cols-4 md:ll-grid-cols-12" }, re = ["data-test"], ae = ["innerHTML"], ne = ["innerHTML"];
@@ -241,20 +241,20 @@ function ce(l, r, o, i, t, s) {
   var u;
   const p = y("ll-select"), d = y("ll-checkbox"), m = y("ll-radio"), h = y("ll-button");
   return c(), V("div", se, [
-    (c(!0), V(j, null, q(o.schema, (e, a) => {
-      var _, F, T, C, x, P, B, E;
-      return c(), V(j, null, [
+    (c(!0), V(S, null, q(o.schema, (e, a) => {
+      var _, F, T, C, x, P, B, j;
+      return c(), V(S, null, [
         e.hidden ? U("", !0) : (c(), V("div", {
           key: `${a} ${t.forceRenderCount}`,
-          class: L(["field-wrapper col-span-4 md:col-span-3", { "hidden-sm-only": !e.type, "align-bottom tw-flex": e.type === "ll-checkbox" }]),
+          class: L(["field-wrapper col-span-4 md:col-span-3", { "hidden-sm-only": !e.type, "tw-flex tw-items-end": e.type === "ll-checkbox" }]),
           "data-test": `filter|${e.fieldToFilter}`
         }, [
-          e.type === "ll-select" ? (c(), f(p, g({ key: 0 }, e.attributes, {
+          e.type === "ll-select" ? (c(), f(p, k({ key: 0 }, e.attributes, {
             error: ((_ = i.validation) == null ? void 0 : _.fields[e.fieldToFilter]) && ((F = i.validation) == null ? void 0 : F.getError(e.fieldToFilter)),
             label: e.label,
             "model-value": t.filterValues[a],
             "onUpdate:modelValue": (n) => s.onSelectInput(n, e, a)
-          }), null, 16, ["error", "label", "model-value", "onUpdate:modelValue"])) : e.type === "ll-checkbox" ? (c(), f(d, g({
+          }), null, 16, ["error", "label", "model-value", "onUpdate:modelValue"])) : e.type === "ll-checkbox" ? (c(), f(d, k({
             key: 1,
             checked: t.filterValues[a],
             "onUpdate:checked": (n) => t.filterValues[a] = n
@@ -262,7 +262,7 @@ function ce(l, r, o, i, t, s) {
             "error-text": ((T = i.validation) == null ? void 0 : T.fields[e.fieldToFilter]) && ((C = i.validation) == null ? void 0 : C.getError(e.fieldToFilter)),
             label: e.label,
             "onUpdate:checked": (n) => s.onChange(e, t.filterValues, a)
-          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type === "ll-radio" ? (c(), f(m, g({
+          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type === "ll-radio" ? (c(), f(m, k({
             key: 2,
             checked: t.filterValues[a],
             "onUpdate:checked": (n) => t.filterValues[a] = n
@@ -270,30 +270,30 @@ function ce(l, r, o, i, t, s) {
             "error-text": ((x = i.validation) == null ? void 0 : x.fields[e.fieldToFilter]) && ((P = i.validation) == null ? void 0 : P.getError(e.fieldToFilter)),
             label: e.label,
             "onUpdate:checked": (n) => s.onChange(e, t.filterValues, a)
-          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type ? (c(), f(k(e.type), g({ key: 3 }, e.attributes, {
+          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type ? (c(), f(v(e.type), k({ key: 3 }, e.attributes, {
             modelValue: t.filterValues[a],
             "onUpdate:modelValue": [(n) => t.filterValues[a] = n, (n) => s.onChange(e, t.filterValues, a)],
-            "error-text": ((B = i.validation) == null ? void 0 : B.fields[e.fieldToFilter]) && ((E = i.validation) == null ? void 0 : E.getError(e.fieldToFilter)),
+            "error-text": ((B = i.validation) == null ? void 0 : B.fields[e.fieldToFilter]) && ((j = i.validation) == null ? void 0 : j.getError(e.fieldToFilter)),
             label: e.label
           }), J({ _: 2 }, [
             e.slots && e.slots.selected ? {
               name: "selected",
               fn: b(({ option: n }) => [
-                (c(), f(k(e.slots.selected), O(R(n.props)), null, 16))
+                (c(), f(v(e.slots.selected), O(R(n.props)), null, 16))
               ]),
               key: "0"
             } : void 0,
             e.slots && e.slots.option ? {
               name: "option",
               fn: b(({ option: n }) => [
-                (c(), f(k(e.slots.option), O(R(n.props)), null, 16))
+                (c(), f(v(e.slots.option), O(R(n.props)), null, 16))
               ]),
               key: "1"
             } : void 0,
             e.slots && e.slots.prepend ? {
               name: "prepend",
               fn: b(() => [
-                v("span", {
+                g("span", {
                   innerHTML: e.slots.prepend
                 }, null, 8, ae)
               ]),
@@ -302,7 +302,7 @@ function ce(l, r, o, i, t, s) {
             e.slots && e.slots.append ? {
               name: "append",
               fn: b(() => [
-                v("span", {
+                g("span", {
                   innerHTML: e.slots.append
                 }, null, 8, ne)
               ]),
@@ -312,8 +312,8 @@ function ce(l, r, o, i, t, s) {
         ], 10, re))
       ], 64);
     }), 256)),
-    v("div", {
-      class: L(["align-right align-bottom button-grid col-span-4 md:col-span-12 tw-flex", l.$style["filter-button-group"]])
+    g("div", {
+      class: L(["button-grid col-span-4 md:col-span-12 tw-flex tw-items-end tw-justify-end", l.$style["filter-button-group"]])
     }, [
       D(h, {
         secondary: "",

package/dist/Filters.js.map

@@ -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=\"ll-grid ll-grid-cols-4 md:ll-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 col-span-4 md:col-span-3\"\n        :class=\"{ 'hidden-sm-only': !filter.type, 'align-bottom tw-flex': 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            <span v-html=\"filter.slots.prepend\"></span>\n          </template>\n          <template v-if=\"filter.slots && filter.slots.append\" #append>\n            <span v-html=\"filter.slots.append\"></span>\n          </template>\n        </component>\n      </div>\n    </template>\n    <div\n      class=\"align-right align-bottom button-grid col-span-4 md:col-span-12 tw-flex\"\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 lang=\"scss\" module>\n  .filter-button-group {\n    @include breakpoint('sm-only') {\n      display: flex;\n      flex-direction: column-reverse;\n    }\n\n    button {\n      @include breakpoint('sm-only') {\n        width: 100% !important;\n      }\n\n      &:nth-child(2) {\n        @include breakpoint('sm-only') {\n          margin-bottom: space(2);\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","_normalizeProps","_guardReactiveProps","_createElementVNode","_ctx","_createVNode","_component_ll_button"],"mappings":"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"}
+{"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=\"ll-grid ll-grid-cols-4 md:ll-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 col-span-4 md:col-span-3\"\n        :class=\"{ 'hidden-sm-only': !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            <span v-html=\"filter.slots.prepend\"></span>\n          </template>\n          <template v-if=\"filter.slots && filter.slots.append\" #append>\n            <span v-html=\"filter.slots.append\"></span>\n          </template>\n        </component>\n      </div>\n    </template>\n    <div\n      class=\"button-grid col-span-4 md:col-span-12 tw-flex tw-items-end tw-justify-end\"\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 lang=\"scss\" module>\n  .filter-button-group {\n    @include breakpoint('sm-only') {\n      display: flex;\n      flex-direction: column-reverse;\n    }\n\n    button {\n      @include breakpoint('sm-only') {\n        width: 100% !important;\n      }\n\n      &:nth-child(2) {\n        @include breakpoint('sm-only') {\n          margin-bottom: space(2);\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","_normalizeProps","_guardReactiveProps","_createElementVNode","_ctx","_createVNode","_component_ll_button"],"mappings":"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"}

package/dist/IconLabel.js

@@ -1,4 +1,4 @@
-import { defineComponent as a, computed as o, openBlock as c, createBlock as i, resolveDynamicComponent as u, mergeProps as f, withCtx as d, createVNode as m, normalizeClass as r, createElementVNode as p, renderSlot as _ } from "vue";
+import { defineComponent as a, computed as o, openBlock as c, createBlock as i, resolveDynamicComponent as f, mergeProps as u, withCtx as d, createVNode as m, normalizeClass as r, createElementVNode as p, renderSlot as _ } from "vue";
 import w from "./Icon.js";
 import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
@@ -15,14 +15,14 @@ const h = /* @__PURE__ */ a({
     stacked: { type: Boolean, default: !1 },
     truncate: { type: Boolean, default: !1 }
   },
-  setup(n) {
-    const e = n, s = o(() => e.to ? "router-link" : e.href ? "a" : "div"), l = o(() => e.to ? {
+  setup(s) {
+    const e = s, n = o(() => e.to ? "router-link" : e.href ? "a" : "div"), l = o(() => e.to ? {
       to: e.to
     } : e.href ? {
       href: e.href
     } : {});
-    return (t, b) => (c(), i(u(s.value), f(l.value, {
-      class: ["tw-flex", { "tw-flex-column tw-items-center": e.stacked }]
+    return (t, b) => (c(), i(f(n.value), u(l.value, {
+      class: ["tw-flex", { "tw-flex-col tw-items-center": e.stacked }]
     }), {
       default: d(() => [
         m(w, {

package/dist/IconLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLabel.js","sources":["../src/components/IconLabel/IconLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface IconLabelProps {\n    /**\n     * Name of the icon to use. All design system icons are supported.\n     */\n    icon: IconName;\n\n    /**\n     * Color to apply to the icon. Common Stash colors are supported (default, 100 & 700 shades).\n     */\n    color?: StashCommonColor;\n\n    /**\n     * Valid hyperlink.\n     */\n    href?: string;\n\n    /**\n     * Valid vue-router route.\n     */\n    to?: string | object;\n\n    /**\n     * If true, renders the label below the icon instead of to the right\n     */\n    stacked?: boolean;\n\n    /**\n     * If true, truncates overflowing text with an ellipsis when it's unable to wrap\n     */\n    truncate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IconLabelProps>(), {\n    color: undefined,\n    href: undefined,\n    to: undefined,\n    stacked: false,\n    truncate: false,\n  });\n\n  defineOptions({\n    name: 'll-icon-label',\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const attributes = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component :is=\"is\" v-bind=\"attributes\" class=\"tw-flex\" :class=\"{ 'tw-flex-column tw-items-center': props.stacked }\">\n    <Icon :name=\"props.icon\" size=\"dense\" :class=\"[$style.icon, { [`text-${color}`]: !!color }]\" />\n\n    <div\n      :class=\"{\n        'tw-ml-1.5 tw-flex-1': !props.stacked,\n        'text-xs tw-mt-1.5 tw-leading-3': props.stacked,\n        'tw-truncate': truncate,\n      }\"\n    >\n      <!-- @slot Label text -->\n      <slot></slot>\n    </div>\n  </component>\n</template>\n\n<style module>\n  .icon {\n    margin-top: -1px;\n  }\n</style>\n"],"names":["is","computed","props","attributes"],"mappings":";;;;;;;;;;;;;;;;;;iBAmDQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAaF,EAAS,MACtBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"IconLabel.js","sources":["../src/components/IconLabel/IconLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface IconLabelProps {\n    /**\n     * Name of the icon to use. All design system icons are supported.\n     */\n    icon: IconName;\n\n    /**\n     * Color to apply to the icon. Common Stash colors are supported (default, 100 & 700 shades).\n     */\n    color?: StashCommonColor;\n\n    /**\n     * Valid hyperlink.\n     */\n    href?: string;\n\n    /**\n     * Valid vue-router route.\n     */\n    to?: string | object;\n\n    /**\n     * If true, renders the label below the icon instead of to the right\n     */\n    stacked?: boolean;\n\n    /**\n     * If true, truncates overflowing text with an ellipsis when it's unable to wrap\n     */\n    truncate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IconLabelProps>(), {\n    color: undefined,\n    href: undefined,\n    to: undefined,\n    stacked: false,\n    truncate: false,\n  });\n\n  defineOptions({\n    name: 'll-icon-label',\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const attributes = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component :is=\"is\" v-bind=\"attributes\" class=\"tw-flex\" :class=\"{ 'tw-flex-col tw-items-center': props.stacked }\">\n    <Icon :name=\"props.icon\" size=\"dense\" :class=\"[$style.icon, { [`text-${color}`]: !!color }]\" />\n\n    <div\n      :class=\"{\n        'tw-ml-1.5 tw-flex-1': !props.stacked,\n        'text-xs tw-mt-1.5 tw-leading-3': props.stacked,\n        'tw-truncate': truncate,\n      }\"\n    >\n      <!-- @slot Label text -->\n      <slot></slot>\n    </div>\n  </component>\n</template>\n\n<style module>\n  .icon {\n    margin-top: -1px;\n  }\n</style>\n"],"names":["is","computed","props","attributes"],"mappings":";;;;;;;;;;;;;;;;;;iBAmDQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAaF,EAAS,MACtBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ListView.js

@@ -1,7 +1,7 @@
 import W from "lodash-es/cloneDeep";
-import { resolveComponent as d, openBlock as a, createElementBlock as o, normalizeClass as r, createElementVNode as u, createVNode as p, toDisplayString as b, 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";
+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";
 import ee from "./useSearch.js";
-import { CSS_VARS as L, LLLV_CHANGE_TRIGGERS as w } from "./constants.js";
+import { CSS_VARS as L, LLLV_CHANGE_TRIGGERS as b } from "./constants.js";
 import V from "./sticky.js";
 import { t as y } from "./locale.js";
 import { persistentStorage as A } from "./storage.js";
@@ -127,15 +127,15 @@ const de = "_checkbox_7isy5_185", he = "_actions_7isy5_189", ue = {
   }
 }, ge = {
   key: 0,
-  class: "align-middle tw-flex tw-flex-1 tw-justify-between"
+  class: "tw-flex tw-flex-1 tw-items-center tw-justify-between"
 }, fe = {
   key: 0,
-  class: "text-small"
+  class: "tw-text-xs"
 }, pe = {
   key: 1,
   class: "lg:hidden tw-ml-1.5"
 };
-function Se(e, l, s, _, i, t) {
+function Se(e, l, s, w, i, t) {
   const c = d("ll-checkbox"), g = d("ll-button");
   return a(), o("div", {
     class: r([
@@ -147,8 +147,8 @@ function Se(e, l, s, _, i, t) {
     ])
   }, [
     u("div", {
-      class: r(["align-middle tw-flex", {
-        "align-justify": !s.hideBulkActionOptions
+      class: r(["tw-flex tw-items-center", {
+        "tw-justify-between": !s.hideBulkActionOptions
       }])
     }, [
       p(c, {
@@ -160,7 +160,7 @@ function Se(e, l, s, _, i, t) {
         "onUpdate:checked": t.onSelectPage
       }, null, 8, ["class", "checked", "indeterminate", "label", "onUpdate:checked"]),
       s.totalSelectedCount && !s.hideBulkActionOptions ? (a(), o("div", ge, [
-        s.hideNumberOfTotalSelected ? n("", !0) : (a(), o("div", fe, b(t.numberOfTotalSelectedText), 1)),
+        s.hideNumberOfTotalSelected ? n("", !0) : (a(), o("div", fe, _(t.numberOfTotalSelectedText), 1)),
         u("div", {
           class: r({ "tw-ml-3": !s.hideNumberOfTotalSelected })
         }, [
@@ -170,7 +170,7 @@ function Se(e, l, s, _, i, t) {
             onClick: t.selectAll
           }, {
             default: m(() => [
-              T(b(t.selectAllCountText), 1)
+              T(_(t.selectAllCountText), 1)
             ]),
             _: 1
           }, 8, ["onClick"])) : (a(), h(g, {
@@ -179,13 +179,13 @@ function Se(e, l, s, _, i, t) {
             onClick: t.clearSelected
           }, {
             default: m(() => [
-              T(b(t.clearSelectedText), 1)
+              T(_(t.clearSelectedText), 1)
             ]),
             _: 1
           }, 8, ["onClick"]))
         ], 2)
       ])) : s.hideBulkActionOptions && s.totalSelectedCount ? (a(), o("div", pe, [
-        u("h4", null, b(t.numItemsSelectedText), 1)
+        u("h4", null, _(t.numItemsSelectedText), 1)
       ])) : n("", !0)
     ], 2),
     s.totalSelectedCount && !s.hideBulkActionOptions ? (a(), o("div", {
@@ -198,9 +198,9 @@ function Se(e, l, s, _, i, t) {
 }
 const ye = {
   $style: ue
-}, _e = /* @__PURE__ */ k(me, [["render", Se], ["__cssModules", ye]]), be = {
+}, we = /* @__PURE__ */ k(me, [["render", Se], ["__cssModules", ye]]), _e = {
   "empty-state": "_empty-state_lwdra_176"
-}, we = {
+}, be = {
   name: "loading-manager",
   components: {
     EmptyState: oe,
@@ -218,7 +218,7 @@ const ye = {
     }
   }
 };
-function ke(e, l, s, _, i, t) {
+function ke(e, l, s, w, i, t) {
   const c = d("Loading"), g = d("EmptyState");
   return s.loading ? (a(), h(c, {
     key: 0,
@@ -239,8 +239,8 @@ function ke(e, l, s, _, i, t) {
   }, null, 8, ["class", "text"]));
 }
 const Ce = {
-  $style: be
-}, Te = /* @__PURE__ */ k(we, [["render", ke], ["__cssModules", Ce]]), Ie = {
+  $style: _e
+}, Te = /* @__PURE__ */ k(be, [["render", ke], ["__cssModules", Ce]]), Ie = {
   "main-header": "_main-header_12ll3_176",
   "expanded-content-wrapper": "_expanded-content-wrapper_12ll3_192",
   "expanded-content-header": "_expanded-content-header_12ll3_202",
@@ -303,7 +303,7 @@ const Ce = {
     }
   }
 }, ve = { class: "tw-flex-auto" }, Be = { ref: "actionsContainer" };
-function Ae(e, l, s, _, i, t) {
+function Ae(e, l, s, w, i, t) {
   const c = d("Icon"), g = d("ll-button"), I = d("Expand"), x = O("sticky");
   return a(), o("div", {
     class: r([
@@ -315,7 +315,7 @@ function Ae(e, l, s, _, i, t) {
     ])
   }, [
     u("header", {
-      class: r(["align-middle tw-flex", [e.$style["main-header"], { "tw-cursor-pointer": s.isCollapsible }]]),
+      class: r(["tw-flex tw-items-center", [e.$style["main-header"], { "tw-cursor-pointer": s.isCollapsible }]]),
       onClick: l[0] || (l[0] = (...C) => t.onHeaderClick && t.onHeaderClick(...C))
     }, [
       s.isCollapsible ? (a(), h(g, {
@@ -448,7 +448,7 @@ const Pe = {
     }
   }
 };
-function Le(e, l, s, _, i, t) {
+function Le(e, l, s, w, i, t) {
   const c = d("ll-icon");
   return a(), o("div", {
     class: r(["tw-cursor-pointer", { "tw-bg-blue-100": t.isSorted }]),
@@ -501,7 +501,7 @@ const Ve = {
 }, He = {
   name: "ll-list-view",
   components: {
-    BulkActions: _e,
+    BulkActions: we,
     Filters: re,
     Paginate: ne,
     LoadingManager: Te,
@@ -771,8 +771,8 @@ const Ve = {
       if (this.isServerSide)
         e = this.results;
       else {
-        const { endIndex: l, totalCount: s, results: _, startIndex: i } = this;
-        e = _.slice(i, Math.min(l, s));
+        const { endIndex: l, totalCount: s, results: w, startIndex: i } = this;
+        e = w.slice(i, Math.min(l, s));
       }
       return this.$emit("updateResults", e), e;
     },
@@ -817,8 +817,8 @@ const Ve = {
     },
     numberOfFilters() {
       return Object.keys(this.filters).reduce((e, l) => {
-        const s = this.filters[l].filterBy, _ = typeof s[0] == "boolean", i = this.filters[l].filterType === "ll-checkbox", t = !this.filters[l].filterType.length, c = this.filters[l].filterType === "ll-input-options" && s[0] === "";
-        return t || c ? e : _ || typeof s[0] == "string" ? e + (s[0] || !i ? 1 : 0) : e + (s.length || 0);
+        const s = this.filters[l].filterBy, w = typeof s[0] == "boolean", i = this.filters[l].filterType === "ll-checkbox", t = !this.filters[l].filterType.length, c = this.filters[l].filterType === "ll-input-options" && s[0] === "";
+        return t || c ? e : w || typeof s[0] == "string" ? e + (s[0] || !i ? 1 : 0) : e + (s.length || 0);
       }, 0);
     },
     isSelectBarVisible() {
@@ -932,9 +932,9 @@ const Ve = {
       return this.sortTerm ? se(e, this.sorts[this.sortTerm]) : e;
     },
     change({ trigger: e = "" } = {}) {
-      const { currentPage: l, filters: s, isFiltered: _, pageSize: i, searchTerm: t, sortTerm: c } = this, g = {
+      const { currentPage: l, filters: s, isFiltered: w, pageSize: i, searchTerm: t, sortTerm: c } = this, g = {
         filters: s,
-        isFiltered: _,
+        isFiltered: w,
         page: {
           number: l,
           previousNumber: this.previousPage,
@@ -958,7 +958,7 @@ const Ve = {
      */
     reset() {
       if (this.$emit("change:reset"), this.searchTerm = "", this.setPage({ pageNumber: 1 }), this.isServerSide) {
-        this.change({ trigger: w.RESET });
+        this.change({ trigger: b.RESET });
         return;
       }
       this.processResults();
@@ -976,7 +976,7 @@ const Ve = {
      * by Filters.
      */
     onSearch() {
-      this.$refs.llFilters.applyFilters({ trigger: w.SEARCH });
+      this.$refs.llFilters.applyFilters({ trigger: b.SEARCH });
     },
     /**
      * Event handler for when the user:
@@ -988,7 +988,7 @@ const Ve = {
      * @param {string} [options.trigger] - what caused the changes
      * @returns {Promise<void>}
      */
-    async onFilter({ trigger: e = w.APPLY } = {}) {
+    async onFilter({ trigger: e = b.APPLY } = {}) {
       if (this.setPage({ pageNumber: 1 }), this.change({ trigger: e }), this.trackSearch(this.searchTerm), this.trackFilters(this.filters), this.selectedItems = [], !this.isServerSide) {
         try {
           this.isFiltering = !0, await this.processResults({ trigger: e });
@@ -1018,7 +1018,7 @@ const Ve = {
      * @param {string} term The updated sort term
      */
     onSort(e) {
-      e !== this.sortTerm && (this.sortTerm = e, this.$emit("change:sort", e), this.trackSort(e), this.clearSelected(), this.setPage({ pageNumber: 1 }), this.change({ trigger: w.SORT }));
+      e !== this.sortTerm && (this.sortTerm = e, this.$emit("change:sort", e), this.trackSort(e), this.clearSelected(), this.setPage({ pageNumber: 1 }), this.change({ trigger: b.SORT }));
     },
     /**
      * Sets current page for the Paginator.
@@ -1027,7 +1027,7 @@ const Ve = {
      * @param {boolean} data.forceChange - flag to force the change
      */
     setPage({ pageNumber: e, forceChange: l = !1 } = {}) {
-      this.previousPage = this.currentPage, this.currentPage = e, this.isServerSide || this.$emit("change:page", e), l && this.change({ trigger: w.PAGE });
+      this.previousPage = this.currentPage, this.currentPage = e, this.isServerSide || this.$emit("change:page", e), l && this.change({ trigger: b.PAGE });
     },
     /**
      * Set the scroll position to the top of the list view.
@@ -1069,11 +1069,11 @@ const Ve = {
       return e.reduce((l, s) => this.isItemDisabled(s) ? l : [...l, s], []);
     }
   }
-}, Me = { class: "ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12" }, je = ["disabled"], Ge = { class: "align-right align-bottom button-grid col-span-1 lg:col-span-3" }, Ue = {
+}, Me = { class: "ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12" }, je = ["disabled"], Ge = { class: "button-grid col-span-1 lg:col-span-3 tw-items-end tw-justify-end" }, Ue = {
   key: 0,
-  class: "text-small"
+  class: "tw-text-xs"
 };
-function Ke(e, l, s, _, i, t) {
+function Ke(e, l, s, w, i, t) {
   const c = d("Icon"), g = d("Button"), I = d("Input"), x = d("Badge"), C = d("Filters"), z = d("Expand"), H = d("Dropdown"), M = d("Checkbox"), j = d("BulkActions"), G = d("Paginate"), U = O("sticky");
   return a(), o("div", null, [
     t.showPrimaryControls || t.showSecondaryControls ? (a(), o("div", {
@@ -1129,7 +1129,7 @@ function Ke(e, l, s, _, i, t) {
           }, 8, ["modelValue", "class", "hint-text", "label", "placeholder", "onChange"])) : n("", !0),
           s.filterSchema.length ? (a(), o("div", {
             key: 1,
-            class: r(["col-span-1 align-bottom tw-flex", [
+            class: r(["col-span-1 tw-flex tw-items-end", [
               e.$style["filter-toggle-btn"],
               { [e.$style["filter-toggle-btn-with-hint-text"]]: !!t.internalSearchSchema.hintText }
             ]])
@@ -1153,7 +1153,7 @@ function Ke(e, l, s, _, i, t) {
                       key: 1,
                       name: "filter-line"
                     })),
-                    T(" " + b(i.filterText), 1)
+                    T(" " + _(i.filterText), 1)
                   ]),
                   _: 1
                 }, 8, ["disabled", "onClick"])
@@ -1203,7 +1203,7 @@ function Ke(e, l, s, _, i, t) {
       key: 1,
       class: r(["tw-mb-1.5", t.shouldShowTotal ? e.$style["total-sort"] : "tw-text-right"])
     }, [
-      t.shouldShowTotal ? (a(), o("div", Ue, b(t.total), 1)) : n("", !0),
+      t.shouldShowTotal ? (a(), o("div", Ue, _(t.total), 1)) : n("", !0),
       Object.keys(s.sorts).length ? (a(), h(H, {
         key: 1,
         class: r(e.$style.dropdown),
@@ -1218,15 +1218,15 @@ function Ke(e, l, s, _, i, t) {
           }, [
             (a(!0), o(Q, null, X(Object.keys(s.sorts), (S, K) => (a(), o("li", {
               key: K,
-              class: r([{ "is-selected": S === i.sortTerm }, "dropdown__item tw-rounded"])
+              class: r([{ "tw-bg-blue-100 tw-text-ice-700": S === i.sortTerm }, "dropdown__item tw-rounded"])
             }, [
               p(g, {
                 inline: "",
-                class: r(["align-middle", e.$style["sort-option"]]),
+                class: r(["tw-items-center", e.$style["sort-option"]]),
                 onClick: (qe) => t.onSort(S)
               }, {
                 default: m(() => [
-                  T(b(S) + " ", 1),
+                  T(_(S) + " ", 1),
                   S === i.sortTerm ? (a(), h(c, {
                     key: 0,
                     name: "check",
@@ -1334,7 +1334,7 @@ const We = {
   $style: ze
 }, is = /* @__PURE__ */ k(He, [["render", Ke], ["__cssModules", We]]);
 export {
-  _e as BulkActions,
+  we as BulkActions,
   ss as ListGroup,
   ls as ListHeader,
   Te as LoadingManager,