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

package/dist/FilterChip.js

@@ -1,14 +1,14 @@
-import { defineComponent as u, useCssModule as f, computed as h, openBlock as s, createBlock as w, normalizeClass as l, unref as t, withCtx as v, createElementVNode as b, renderSlot as C, createElementBlock as a, toDisplayString as g, createCommentVNode as n, createVNode as k } from "vue";
+import { defineComponent as u, useCssModule as f, computed as v, openBlock as a, createBlock as h, normalizeClass as s, unref as t, withCtx as w, createElementVNode as b, renderSlot as C, createElementBlock as n, toDisplayString as k, createCommentVNode as i, createVNode as y } from "vue";
 import { t as c } from "./locale.js";
-import y from "./Chip.js";
-import D from "./Icon.js";
-import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
+import D from "./Chip.js";
+import x from "./Icon.js";
+import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "./utils/colorScheme.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const B = { class: "tw-flex tw-items-center" }, F = ["aria-label", "title"], O = { key: 1 }, R = /* @__PURE__ */ u({
+const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R = { key: 1 }, S = /* @__PURE__ */ u({
   __name: "FilterChip",
   props: {
     filterCount: { default: void 0 },
@@ -19,24 +19,24 @@ const B = { class: "tw-flex tw-items-center" }, F = ["aria-label", "title"], O =
   },
   emits: ["click", "remove"],
   setup(d, { emit: r }) {
-    const e = d, o = f(), i = h(() => Number(e.filterCount) > 0);
+    const e = d, o = f(), l = v(() => Number(e.filterCount) > 0);
     function p() {
       r("click");
     }
     function m() {
       r("remove");
     }
-    return (_, A) => (s(), w(y, {
+    return (_, A) => (a(), h(D, {
       "should-override-colors": "",
       tabindex: "0",
-      class: l(["stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900", [
+      class: s(["stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900", [
         t(o).root,
         {
           [t(o)["is-selected"]]: e.isSelected,
           [t(o)["is-removable"]]: e.isRemovable,
           [t(o)["is-dropdown-open"]]: e.isDropdownOpen,
           [t(o)["has-dropdown"]]: e.hasDropdown,
-          [t(o)["has-filter-count"]]: i.value
+          [t(o)["has-filter-count"]]: l.value
         }
       ]]),
       radius: "pill",
@@ -44,45 +44,45 @@ const B = { class: "tw-flex tw-items-center" }, F = ["aria-label", "title"], O =
       onClick: p,
       onRemove: m
     }, {
-      default: v(() => [
-        b("div", B, [
+      default: w(() => [
+        b("div", F, [
           C(_.$slots, "default"),
-          i.value ? (s(), a("span", {
+          l.value ? (a(), n("span", {
             key: 0,
             "data-test": "span|filter-count",
-            class: l(t(o)["filter-count"]),
+            class: s(t(o)["filter-count"]),
             "aria-label": t(c)("ll.numberOfActiveFilters"),
             title: t(c)("ll.numberOfActiveFilters")
-          }, g(e.filterCount), 11, F)) : n("", !0),
-          e.hasDropdown ? (s(), a("span", O, [
-            k(D, {
+          }, k(e.filterCount), 11, O)) : i("", !0),
+          e.hasDropdown ? (a(), n("span", R, [
+            y(x, {
               "data-test": "icon|caret",
               name: "caret-down",
-              class: l([
+              class: s([
                 t(o).caret,
                 {
                   [t(o)["caret-rotate"]]: e.isDropdownOpen
                 }
               ])
             }, null, 8, ["class"])
-          ])) : n("", !0)
+          ])) : i("", !0)
         ])
       ]),
       _: 3
     }, 8, ["class", "is-removable"]));
   }
-}), S = "_root_giisl_5", N = "_caret_giisl_94", M = {
-  root: S,
-  "is-selected": "_is-selected_giisl_24",
-  "is-removable": "_is-removable_giisl_36",
-  "has-filter-count": "_has-filter-count_giisl_49",
-  "has-dropdown": "_has-dropdown_giisl_54",
-  "filter-count": "_filter-count_giisl_67",
-  caret: N,
-  "caret-rotate": "_caret-rotate_giisl_105"
-}, V = {
-  $style: M
-}, L = /* @__PURE__ */ x(R, [["__cssModules", V]]);
+}), N = "_root_1avat_5", M = "_caret_1avat_94", V = {
+  root: N,
+  "is-selected": "_is-selected_1avat_24",
+  "is-removable": "_is-removable_1avat_36",
+  "has-filter-count": "_has-filter-count_1avat_49",
+  "has-dropdown": "_has-dropdown_1avat_54",
+  "filter-count": "_filter-count_1avat_67",
+  caret: M,
+  "caret-rotate": "_caret-rotate_1avat_105"
+}, g = {
+  $style: V
+}, L = /* @__PURE__ */ B(S, [["__cssModules", g]]);
 export {
   L as default
 };

package/dist/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","sources":["../src/components/FilterChip/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterChipProps {\n    /**\n     * Used for conditionally rendering filter count chip\n     */\n    filterCount?: number;\n\n    /**\n     * Use for conditionally rendering caret\n     */\n    hasDropdown?: boolean;\n\n    /**\n     * Used for styling when `hasDropdown` is true\n     */\n    isDropdownOpen?: boolean;\n\n    /**\n     * Used for conditionally rendering close icon and exposing remove event\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Used for conditionally applying styles\n     */\n    isSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterChipProps>(), {\n    filterCount: undefined,\n    hasDropdown: false,\n    isDropdownOpen: false,\n    isRemovable: false,\n    isSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'click'): void;\n      (e: 'remove'): void;\n    }>();\n\n  const classes = useCssModule();\n  const hasFilterCount = computed(() => Number(props.filterCount) > 0);\n\n  function handleClick() {\n    emit('click');\n  }\n\n  function handleRemove() {\n    emit('remove');\n  }\n</script>\n\n<template>\n  <Chip\n    should-override-colors\n    tabindex=\"0\"\n    class=\"stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900\"\n    radius=\"pill\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['is-selected']]: props.isSelected,\n        [classes['is-removable']]: props.isRemovable,\n        [classes['is-dropdown-open']]: props.isDropdownOpen,\n        [classes['has-dropdown']]: props.hasDropdown,\n        [classes['has-filter-count']]: hasFilterCount,\n      },\n    ]\"\n    :is-removable=\"props.isSelected && props.isRemovable && !props.hasDropdown\"\n    @click=\"handleClick\"\n    @remove=\"handleRemove\"\n  >\n    <div class=\"tw-flex tw-items-center\">\n      <!-- @slot default -->\n      <slot></slot>\n\n      <span\n        v-if=\"hasFilterCount\"\n        data-test=\"span|filter-count\"\n        :class=\"classes['filter-count']\"\n        :aria-label=\"t('ll.numberOfActiveFilters')\"\n        :title=\"t('ll.numberOfActiveFilters')\"\n      >\n        {{ props.filterCount }}\n      </span>\n\n      <span v-if=\"props.hasDropdown\">\n        <Icon\n          data-test=\"icon|caret\"\n          name=\"caret-down\"\n          :class=\"[\n            classes.caret,\n            {\n              [classes['caret-rotate']]: props.isDropdownOpen,\n            },\n          ]\"\n        />\n      </span>\n    </div>\n  </Chip>\n</template>\n\n<style module>\n  /**\n    many styles declared here are overriding styles defined in Chip\n  */\n  .root {\n    background-color: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    cursor: pointer;\n    height: var(--ll-space-4);\n    padding-left: var(--ll-space-2);\n    padding-right: var(--ll-space-2);\n  }\n\n  .root:focus {\n    box-shadow: 0 0 0 4px rgb(0 123 255 / 15%);\n    outline: none;\n  }\n\n  .root:hover {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected {\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected:hover {\n    color: var(--color-white);\n    background-color: var(--color-blue-700);\n    border: 1px solid var(--color-blue-700);\n  }\n\n  .root.is-selected.is-removable {\n    background-color: var(--color-blue-500);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button) {\n    margin-right: -1px;\n    padding-right: var(--ll-space-2);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button):hover {\n    background-color: var(--color-blue-700);\n  }\n\n  .root.is-selected.has-filter-count:hover {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .root.has-dropdown {\n    padding-right: var(--ll-space-1);\n  }\n\n  .root.has-filter-count:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-ice-900);\n  }\n\n  .root label {\n    cursor: pointer;\n  }\n\n  .filter-count {\n    display: inline-flex;\n    align-items: center;\n    border-radius: 5em;\n    height: 16px;\n    padding: 0 8px;\n    margin-left: var(--ll-space-1);\n    font-size: 10px;\n    font-weight: bold;\n    background-color: var(--color-blue-500);\n    color: var(--color-white);\n  }\n\n  .is-selected .filter-count {\n    background-color: var(--color-blue-700);\n  }\n\n  .is-selected:hover .filter-count {\n    background-color: var(--color-white);\n    color: var(--color-blue-700);\n  }\n\n  .is-selected.is-removable .filter-count {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .caret {\n    color: var(--color-ice-700);\n    margin-left: var(--ll-space-1);\n    transform: rotate(0);\n    transition: all 0.5s;\n  }\n\n  .is-selected .caret {\n    color: var(--color-white);\n  }\n\n  .caret-rotate {\n    transform: rotate(-180deg);\n  }\n</style>\n"],"names":["classes","useCssModule","hasFilterCount","computed","props","handleClick","emit","handleRemove"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAiBC,EAAS,MAAM,OAAOC,EAAM,WAAW,IAAI,CAAC;AAEnE,aAASC,IAAc;AACrB,MAAAC,EAAK,OAAO;AAAA,IACd;AAEA,aAASC,IAAe;AACtB,MAAAD,EAAK,QAAQ;AAAA,IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterChip.js","sources":["../src/components/FilterChip/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterChipProps {\n    /**\n     * Used for conditionally rendering filter count chip\n     */\n    filterCount?: number;\n\n    /**\n     * Use for conditionally rendering caret\n     */\n    hasDropdown?: boolean;\n\n    /**\n     * Used for styling when `hasDropdown` is true\n     */\n    isDropdownOpen?: boolean;\n\n    /**\n     * Used for conditionally rendering close icon and exposing remove event\n     */\n    isRemovable?: boolean;\n\n    /**\n     * Used for conditionally applying styles\n     */\n    isSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterChipProps>(), {\n    filterCount: undefined,\n    hasDropdown: false,\n    isDropdownOpen: false,\n    isRemovable: false,\n    isSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'click'): void;\n      (e: 'remove'): void;\n    }>();\n\n  const classes = useCssModule();\n  const hasFilterCount = computed(() => Number(props.filterCount) > 0);\n\n  function handleClick() {\n    emit('click');\n  }\n\n  function handleRemove() {\n    emit('remove');\n  }\n</script>\n\n<template>\n  <Chip\n    should-override-colors\n    tabindex=\"0\"\n    class=\"stash-filter-chip tw-text-sm tw-font-normal tw-normal-case tw-leading-5 tw-text-ice-900\"\n    radius=\"pill\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['is-selected']]: props.isSelected,\n        [classes['is-removable']]: props.isRemovable,\n        [classes['is-dropdown-open']]: props.isDropdownOpen,\n        [classes['has-dropdown']]: props.hasDropdown,\n        [classes['has-filter-count']]: hasFilterCount,\n      },\n    ]\"\n    :is-removable=\"props.isSelected && props.isRemovable && !props.hasDropdown\"\n    @click=\"handleClick\"\n    @remove=\"handleRemove\"\n  >\n    <div class=\"tw-flex tw-items-center\">\n      <!-- @slot default -->\n      <slot></slot>\n\n      <span\n        v-if=\"hasFilterCount\"\n        data-test=\"span|filter-count\"\n        :class=\"classes['filter-count']\"\n        :aria-label=\"t('ll.numberOfActiveFilters')\"\n        :title=\"t('ll.numberOfActiveFilters')\"\n      >\n        {{ props.filterCount }}\n      </span>\n\n      <span v-if=\"props.hasDropdown\">\n        <Icon\n          data-test=\"icon|caret\"\n          name=\"caret-down\"\n          :class=\"[\n            classes.caret,\n            {\n              [classes['caret-rotate']]: props.isDropdownOpen,\n            },\n          ]\"\n        />\n      </span>\n    </div>\n  </Chip>\n</template>\n\n<style module>\n  /**\n    many styles declared here are overriding styles defined in Chip\n  */\n  .root {\n    background-color: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    cursor: pointer;\n    height: theme('spacing.9');\n    padding-left: theme('spacing.3');\n    padding-right: theme('spacing.3');\n  }\n\n  .root:focus {\n    box-shadow: 0 0 0 4px rgb(0 123 255 / 15%);\n    outline: none;\n  }\n\n  .root:hover {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected {\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .root.is-selected:hover {\n    color: var(--color-white);\n    background-color: var(--color-blue-700);\n    border: 1px solid var(--color-blue-700);\n  }\n\n  .root.is-selected.is-removable {\n    background-color: var(--color-blue-500);\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button) {\n    margin-right: -1px;\n    padding-right: theme('spacing.3');\n  }\n\n  .root.is-selected.is-removable :global(.stash-chip__remove-button):hover {\n    background-color: var(--color-blue-700);\n  }\n\n  .root.is-selected.has-filter-count:hover {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .root.has-dropdown {\n    padding-right: theme('spacing[1.5]');\n  }\n\n  .root.has-filter-count:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-ice-900);\n  }\n\n  .root label {\n    cursor: pointer;\n  }\n\n  .filter-count {\n    display: inline-flex;\n    align-items: center;\n    border-radius: 5em;\n    height: 16px;\n    padding: 0 8px;\n    margin-left: theme('spacing[1.5]');\n    font-size: 10px;\n    font-weight: bold;\n    background-color: var(--color-blue-500);\n    color: var(--color-white);\n  }\n\n  .is-selected .filter-count {\n    background-color: var(--color-blue-700);\n  }\n\n  .is-selected:hover .filter-count {\n    background-color: var(--color-white);\n    color: var(--color-blue-700);\n  }\n\n  .is-selected.is-removable .filter-count {\n    background-color: var(--color-blue-700);\n    color: var(--color-white);\n  }\n\n  .caret {\n    color: var(--color-ice-700);\n    margin-left: theme('spacing[1.5]');\n    transform: rotate(0);\n    transition: all 0.5s;\n  }\n\n  .is-selected .caret {\n    color: var(--color-white);\n  }\n\n  .caret-rotate {\n    transform: rotate(-180deg);\n  }\n</style>\n"],"names":["classes","useCssModule","hasFilterCount","computed","props","handleClick","emit","handleRemove"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAiBC,EAAS,MAAM,OAAOC,EAAM,WAAW,IAAI,CAAC;AAEnE,aAASC,IAAc;AACrB,MAAAC,EAAK,OAAO;AAAA,IACd;AAEA,aAASC,IAAe;AACtB,MAAAD,EAAK,QAAQ;AAAA,IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.js

@@ -5,13 +5,13 @@ import D from "./Button.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import { D as z } from "./DataViewFilters.keys-c80ffabe.js";
 import G from "./Dropdown.js";
 import $ from "./FilterChip.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "./constants.js";
 import "./clickoutside.js";

package/dist/FilterSelect.js

@@ -1,10 +1,10 @@
 import { defineComponent as S, computed as p, openBlock as r, createBlock as $, withCtx as u, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as C, createCommentVNode as K, Fragment as A, renderList as B } from "vue";
 import { t as E } from "./locale.js";
-import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
 import y from "./FilterChip.js";
 import "lodash-es/get";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
 import "./Icon.js";
@@ -26,31 +26,31 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
       get() {
         return e.modelValue;
       },
-      set(l) {
-        c("update:modelValue", l);
+      set(t) {
+        c("update:modelValue", t);
       }
     }), n = p({
       get() {
         return e.options.length === e.modelValue.length;
       },
-      set(l) {
-        c("update:modelValue", l ? e.options.map((a) => a.value) : []);
+      set(t) {
+        c("update:modelValue", t ? e.options.map((a) => a.value) : []);
       }
     });
-    function i(l) {
-      return `${e.name}--${l.value}`;
+    function i(t) {
+      return `${e.name}--${t.value}`;
     }
-    function g(l) {
-      return e.modelValue.includes(l.value);
+    function g(t) {
+      return e.modelValue.includes(t.value);
     }
-    function k(l) {
-      const a = o.value.filter((t) => t !== l);
-      a.length === o.value.length && a.push(l), o.value = a;
+    function w(t) {
+      const a = o.value.filter((l) => l !== t);
+      a.length === o.value.length && a.push(t), o.value = a;
     }
-    function w() {
+    function k() {
       n.value = !n.value;
     }
-    return (l, a) => (r(), $(N, {
+    return (t, a) => (r(), $(N, {
       class: "stash-filter-select",
       fieldset: "",
       label: e.label
@@ -62,8 +62,8 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
           }, [
             f(s("input", {
               id: `${e.name}--all`,
-              "onUpdate:modelValue": a[0] || (a[0] = (t) => n.value = t),
-              class: "sr-only",
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
+              class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
               value: "all"
@@ -76,7 +76,7 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
               _(y, {
                 "is-selected": n.value,
                 tabindex: "0",
-                onKeypress: h(w, ["enter"])
+                onKeypress: h(k, ["enter"])
               }, {
                 default: u(() => [
                   b(x(C(E)("ll.all")), 1)
@@ -85,29 +85,29 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
               }, 8, ["is-selected", "onKeypress"])
             ], 8, O)
           ])) : K("", !0),
-          (r(!0), d(A, null, B(e.options, (t) => (r(), d("div", {
-            key: i(t)
+          (r(!0), d(A, null, B(e.options, (l) => (r(), d("div", {
+            key: i(l)
           }, [
             f(s("input", {
-              id: i(t),
+              id: i(l),
               "onUpdate:modelValue": a[1] || (a[1] = (m) => o.value = m),
-              class: "sr-only",
+              class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: t.value
+              value: l.value
             }, null, 8, U), [
               [v, o.value]
             ]),
             s("label", {
-              for: i(t)
+              for: i(l)
             }, [
               _(y, {
-                "is-selected": g(t),
+                "is-selected": g(l),
                 tabindex: "0",
-                onKeypress: h((m) => k(t.value), ["enter"])
+                onKeypress: h((m) => w(l.value), ["enter"])
               }, {
                 default: u(() => [
-                  b(x(t.label), 1)
+                  b(x(l.label), 1)
                 ]),
                 _: 2
               }, 1032, ["is-selected", "onKeypress"])

package/dist/FilterSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n  export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n  import Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps {\n    /**\n     * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n     */\n    name: string;\n\n    label: string;\n\n    options: FilterSelectOption[];\n\n    modelValue: FilterSelectModelValue;\n\n    /**\n     * When true, this prop adds an \"All\" option for selecting all options.\n     */\n    canSelectAll?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterSelectProps>(), {\n    canSelectAll: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:modelValue', value: FilterSelectModelValue): void;\n    }>();\n\n  /**\n   * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n   */\n  const selected = computed({\n    get() {\n      return props.modelValue;\n    },\n    set(value) {\n      emit('update:modelValue', value);\n    },\n  });\n\n  const isAllSelected = computed({\n    get() {\n      return props.options.length === props.modelValue.length;\n    },\n    set(isChecked) {\n      emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n    },\n  });\n\n  function getOptionId(option: FilterSelectOption) {\n    return `${props.name}--${option.value}`;\n  }\n\n  function isOptionSelected(option: FilterSelectOption) {\n    return props.modelValue.includes(option.value);\n  }\n\n  function onEnter(enteredValue: FilterSelectOption['value']) {\n    const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n    if (newSelected.length === selected.value.length) {\n      newSelected.push(enteredValue);\n    }\n\n    selected.value = newSelected;\n  }\n\n  function onEnterAll() {\n    isAllSelected.value = !isAllSelected.value;\n  }\n</script>\n\n<template>\n  <Field class=\"stash-filter-select\" fieldset :label=\"props.label\">\n    <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <label :for=\"`${props.name}--all`\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <label :for=\"getOptionId(option)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["selected","computed","props","value","emit","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBA0CQA,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAAO;AACT,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKE,IAAgBJ,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOC,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAII,GAAW;AACR,QAAAF,EAAA,qBAAqBE,IAAYJ,EAAM,QAAQ,IAAI,CAACK,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGL,EAAM,IAAI,KAAKK,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOL,EAAM,WAAW,SAASK,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcZ,EAAS,MAAM,OAAO,CAACG,MAAUA,MAAUQ,CAAY;AAE3E,MAAIC,EAAY,WAAWZ,EAAS,MAAM,UACxCY,EAAY,KAAKD,CAAY,GAG/BX,EAAS,QAAQY;AAAA,IACnB;AAEA,aAASC,IAAa;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterSelect.js","sources":["../src/components/FilterSelect/FilterSelect.vue"],"sourcesContent":["<script lang=\"ts\">\n  export * from './FilterSelect.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n  import Field from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps {\n    /**\n     * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.\n     */\n    name: string;\n\n    label: string;\n\n    options: FilterSelectOption[];\n\n    modelValue: FilterSelectModelValue;\n\n    /**\n     * When true, this prop adds an \"All\" option for selecting all options.\n     */\n    canSelectAll?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FilterSelectProps>(), {\n    canSelectAll: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:modelValue', value: FilterSelectModelValue): void;\n    }>();\n\n  /**\n   * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n   */\n  const selected = computed({\n    get() {\n      return props.modelValue;\n    },\n    set(value) {\n      emit('update:modelValue', value);\n    },\n  });\n\n  const isAllSelected = computed({\n    get() {\n      return props.options.length === props.modelValue.length;\n    },\n    set(isChecked) {\n      emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n    },\n  });\n\n  function getOptionId(option: FilterSelectOption) {\n    return `${props.name}--${option.value}`;\n  }\n\n  function isOptionSelected(option: FilterSelectOption) {\n    return props.modelValue.includes(option.value);\n  }\n\n  function onEnter(enteredValue: FilterSelectOption['value']) {\n    const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n    if (newSelected.length === selected.value.length) {\n      newSelected.push(enteredValue);\n    }\n\n    selected.value = newSelected;\n  }\n\n  function onEnterAll() {\n    isAllSelected.value = !isAllSelected.value;\n  }\n</script>\n\n<template>\n  <Field class=\"stash-filter-select\" fieldset :label=\"props.label\">\n    <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <label :for=\"`${props.name}--all`\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <label :for=\"getOptionId(option)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["selected","computed","props","value","emit","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBA0CQA,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAAO;AACT,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKE,IAAgBJ,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOC,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAII,GAAW;AACR,QAAAF,EAAA,qBAAqBE,IAAYJ,EAAM,QAAQ,IAAI,CAACK,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGL,EAAM,IAAI,KAAKK,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOL,EAAM,WAAW,SAASK,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcZ,EAAS,MAAM,OAAO,CAACG,MAAUA,MAAUQ,CAAY;AAE3E,MAAIC,EAAY,WAAWZ,EAAS,MAAM,UACxCY,EAAY,KAAKD,CAAY,GAG/BX,EAAS,QAAQY;AAAA,IACnB;AAEA,aAASC,IAAa;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Filters.js

@@ -1,8 +1,8 @@
 import G from "lodash-es/cloneDeep";
 import z from "lodash-es/merge";
-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 { toRefs as W, ref as j, nextTick as Y, resolveComponent as y, openBlock as d, createElementBlock as V, Fragment as E, renderList as q, normalizeClass as S, createBlock as f, mergeProps as v, resolveDynamicComponent as k, createSlots as J, withCtx as b, normalizeProps as L, guardReactiveProps as O, createElementVNode as g, createCommentVNode as R, createVNode as U, createTextVNode as D, toDisplayString as A } from "vue";
 import K from "./useValidation.js";
-import { LLLV_CHANGE_TRIGGERS as w } from "./constants.js";
+import { LLLV_CHANGE_TRIGGERS as M } from "./constants.js";
 import { t as N } from "./locale.js";
 import { persistentStorage as H } from "./storage.js";
 import Q from "./Button.js";
@@ -23,9 +23,9 @@ import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./utils/createValidDate.js";
 import "./index-5e5945a9.js";
 import "./index-fe8d3765.js";
@@ -38,8 +38,8 @@ import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "./useSearch.js";
@@ -49,7 +49,7 @@ import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
 const ie = {
-  "filter-button-group": "_filter-button-group_1pk5m_177"
+  "filter-button-group": "_filter-button-group_1o1yr_2"
 }, oe = {
   name: "ll-filters",
   components: {
@@ -94,12 +94,12 @@ const ie = {
   },
   emits: ["change", "submit", "reset"],
   setup(l) {
-    const { validationSchema: r } = W(l), o = r.value(), i = E({}), t = E();
+    const { validationSchema: r } = W(l), o = r.value(), i = j({}), t = j();
     function s() {
       if ((o == null ? void 0 : o.toString()) !== "[object Object]")
         return;
-      i.value = Object.keys(o).reduce((d, m) => (d[m] = void 0, d), {});
-      const p = Object.entries(o).reduce((d, [m, h]) => (d[m] = h.map((u) => u(i)), d), {});
+      i.value = Object.keys(o).reduce((c, m) => (c[m] = void 0, c), {});
+      const p = Object.entries(o).reduce((c, [m, h]) => (c[m] = h.map((u) => u(i)), c), {});
       t.value = K({ rules: p, values: i }), t.value.validate();
     }
     return {
@@ -132,10 +132,10 @@ const ie = {
           const s = l[i];
           if (s === "" || s == null)
             return o;
-          const p = t.attributes.trackBy || "id", d = typeof s == "object", m = typeof t.type == "object", h = m && t.attributes.multiple || !m && t.type.includes("ll-select") && (t.attributes.multiple || !t.attributes.single), u = h ? (
+          const p = t.attributes.trackBy || "id", c = typeof s == "object", m = typeof t.type == "object", h = m && t.attributes.multiple || !m && t.type.includes("ll-select") && (t.attributes.multiple || !t.attributes.single), u = h ? (
             // local storage might have item stored as an object from the old Select
             (Array.isArray(s) ? s : [s]).map((a) => a[p])
-          ) : d ? [s[p]] : [s], e = t.groupedWith;
+          ) : c ? [s[p]] : [s], e = t.groupedWith;
           return e && (u[0] = {
             index: e,
             value: l[e]
@@ -161,7 +161,7 @@ const ie = {
     }
   },
   async created() {
-    this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger: w.LOAD });
+    this.initFilterValues(), await Y(), this.initValidation(), this.applyFilters({ trigger: M.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 = w.APPLY } = {}) {
+    async applyFilters({ trigger: l = M.APPLY } = {}) {
       this.validation && (await this.validation.validate(), this.validation.hasErrors) || (this.disablePersistency || this.persistFilterValues(this.filterValues), this.$emit("submit", { trigger: l }));
     },
     resetFilters() {
@@ -236,25 +236,25 @@ const ie = {
       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"];
-function ce(l, r, o, i, t, s) {
+}, se = { class: "ll-grid tw-grid-cols-4 md:tw-grid-cols-12" }, re = ["data-test"], ae = ["innerHTML"], ne = ["innerHTML"];
+function de(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(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", {
+  const p = y("ll-select"), c = y("ll-checkbox"), m = y("ll-radio"), h = y("ll-button");
+  return d(), V("div", se, [
+    (d(!0), V(E, null, q(o.schema, (e, a) => {
+      var _, F, T, C, w, x, P, B;
+      return d(), V(E, null, [
+        e.hidden ? R("", !0) : (d(), V("div", {
           key: `${a} ${t.forceRenderCount}`,
-          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" }]),
+          class: S(["field-wrapper tw-col-span-4 md:tw-col-span-3", { "max-md:tw-hidden": !e.type, "tw-flex tw-items-end": e.type === "ll-checkbox" }]),
           "data-test": `filter|${e.fieldToFilter}`
         }, [
-          e.type === "ll-select" ? (c(), f(p, k({ key: 0 }, e.attributes, {
+          e.type === "ll-select" ? (d(), f(p, v({ 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, k({
+          }), null, 16, ["error", "label", "model-value", "onUpdate:modelValue"])) : e.type === "ll-checkbox" ? (d(), f(c, v({
             key: 1,
             checked: t.filterValues[a],
             "onUpdate:checked": (n) => t.filterValues[a] = n
@@ -262,31 +262,31 @@ 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, k({
+          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type === "ll-radio" ? (d(), f(m, v({
             key: 2,
             checked: t.filterValues[a],
             "onUpdate:checked": (n) => t.filterValues[a] = n
           }, e.attributes, {
-            "error-text": ((x = i.validation) == null ? void 0 : x.fields[e.fieldToFilter]) && ((P = i.validation) == null ? void 0 : P.getError(e.fieldToFilter)),
+            "error-text": ((w = i.validation) == null ? void 0 : w.fields[e.fieldToFilter]) && ((x = i.validation) == null ? void 0 : x.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(v(e.type), k({ key: 3 }, e.attributes, {
+          }), null, 16, ["checked", "onUpdate:checked", "error-text", "label"])) : e.type ? (d(), f(k(e.type), v({ 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]) && ((j = i.validation) == null ? void 0 : j.getError(e.fieldToFilter)),
+            "error-text": ((P = i.validation) == null ? void 0 : P.fields[e.fieldToFilter]) && ((B = i.validation) == null ? void 0 : B.getError(e.fieldToFilter)),
             label: e.label
           }), J({ _: 2 }, [
             e.slots && e.slots.selected ? {
               name: "selected",
               fn: b(({ option: n }) => [
-                (c(), f(v(e.slots.selected), O(R(n.props)), null, 16))
+                (d(), f(k(e.slots.selected), L(O(n.props)), null, 16))
               ]),
               key: "0"
             } : void 0,
             e.slots && e.slots.option ? {
               name: "option",
               fn: b(({ option: n }) => [
-                (c(), f(v(e.slots.option), O(R(n.props)), null, 16))
+                (d(), f(k(e.slots.option), L(O(n.props)), null, 16))
               ]),
               key: "1"
             } : void 0,
@@ -308,41 +308,41 @@ function ce(l, r, o, i, t, s) {
               ]),
               key: "3"
             } : void 0
-          ]), 1040, ["modelValue", "onUpdate:modelValue", "error-text", "label"])) : U("", !0)
+          ]), 1040, ["modelValue", "onUpdate:modelValue", "error-text", "label"])) : R("", !0)
         ], 10, re))
       ], 64);
     }), 256)),
     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"]])
+      class: S(["button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12", l.$style["filter-button-group"]])
     }, [
-      D(h, {
+      U(h, {
         secondary: "",
         "data-test": "button|reset-filters",
         disabled: o.disableClear,
         onClick: s.resetFilters
       }, {
         default: b(() => [
-          A(M(t.clearText), 1)
+          D(A(t.clearText), 1)
         ]),
         _: 1
       }, 8, ["disabled", "onClick"]),
-      D(h, {
+      U(h, {
         primary: "",
         "data-test": "button|apply-filters",
         disabled: o.disableApply || ((u = i.validation) == null ? void 0 : u.hasErrors),
         onClick: s.applyFilters
       }, {
         default: b(() => [
-          A(M(t.applyText), 1)
+          D(A(t.applyText), 1)
         ]),
         _: 1
       }, 8, ["disabled", "onClick"])
     ], 2)
   ]);
 }
-const de = {
+const ce = {
   $style: ie
-}, at = /* @__PURE__ */ le(oe, [["render", ce], ["__cssModules", de]]);
+}, at = /* @__PURE__ */ le(oe, [["render", de], ["__cssModules", ce]]);
 export {
   at as default
 };