@leaflink/stash 42.5.0 → 42.5.2

package/dist/FilterChip.js

@@ -1,17 +1,14 @@
-import { defineComponent as u, useCssModule as f, computed as h, openBlock as s, createBlock as w, normalizeClass as r, unref as t, withCtx as v, createElementVNode as b, renderSlot as C, createElementBlock as i, toDisplayString as k, createCommentVNode as n, createVNode as y } from "vue";
+import { defineComponent as u, useCssModule as f, computed as h, openBlock as s, createBlock as w, normalizeClass as r, unref as t, withCtx as v, 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 D from "./Chip.js";
 import x from "./Icon.js";
 import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R = { key: 1 }, S = /* @__PURE__ */ u({
   __name: "FilterChip",
   props: {
@@ -51,14 +48,14 @@ const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R =
       default: v(() => [
         b("div", F, [
           C(_.$slots, "default"),
-          a.value ? (s(), i("span", {
+          a.value ? (s(), n("span", {
             key: 0,
             "data-test": "span|filter-count",
             class: r(t(o)["filter-count"]),
             "aria-label": t(c)("ll.numberOfActiveFilters"),
             title: t(c)("ll.numberOfActiveFilters")
-          }, k(e.filterCount), 11, O)) : n("", !0),
-          e.hasDropdown ? (s(), i("span", R, [
+          }, k(e.filterCount), 11, O)) : i("", !0),
+          e.hasDropdown ? (s(), n("span", R, [
             y(x, {
               "data-test": "icon|caret",
               name: "caret-down",
@@ -69,7 +66,7 @@ const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R =
                 }
               ])
             }, null, 8, ["class"])
-          ])) : n("", !0)
+          ])) : i("", !0)
         ])
       ]),
       _: 3
@@ -86,8 +83,8 @@ const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R =
   "caret-rotate": "_caret-rotate_1o49d_105"
 }, g = {
   $style: V
-}, U = /* @__PURE__ */ B(S, [["__cssModules", g]]);
+}, P = /* @__PURE__ */ B(S, [["__cssModules", g]]);
 export {
-  U as default
+  P as default
 };
 //# sourceMappingURL=FilterChip.js.map

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-leading-5 tw-text-sm tw-font-normal tw-text-ice-900 tw-normal-case\"\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);\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-leading-5 tw-text-sm tw-font-normal tw-text-ice-900 tw-normal-case\"\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);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDrawerItem.js

@@ -3,21 +3,18 @@ import { t as m } from "./locale.js";
 import F from "./Chip.js";
 import { D as I } from "./DataViewFilters.keys-c80ffabe.js";
 import C from "./Icon.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const g = { class: "tw-py-4" }, k = { class: "tw-flex tw-justify-between tw-items-center tw-self-stretch" }, y = { class: "tw-flex tw-flex-col tw-items-start" }, D = {
   key: 0,
   class: "tw-text-xs",
   "data-test": "description"
-}, E = { class: "tw-inline-flex tw-items-center tw-gap-6" }, K = /* @__PURE__ */ w({
+}, E = { class: "tw-inline-flex tw-items-center tw-gap-6" }, z = /* @__PURE__ */ w({
   __name: "FilterDrawerItem",
   props: {
     group: {},
@@ -64,6 +61,6 @@ const g = { class: "tw-py-4" }, k = { class: "tw-flex tw-justify-between tw-item
   }
 });
 export {
-  K as default
+  z as default
 };
 //# sourceMappingURL=FilterDrawerItem.js.map

package/dist/FilterDrawerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDrawerItem.js","sources":["../src/components/FilterDrawerItem/FilterDrawerItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterDrawerItemProps {\n    /** The name of a filter group */\n    group: string;\n    title: string;\n    description?: string;\n  }\n  const props = defineProps<FilterDrawerItemProps>();\n\n  export interface FilterDrawerItemEmits {\n    (e: 'navigate');\n  }\n  const emit = defineEmits<FilterDrawerItemEmits>();\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { activeFiltersCounts } = dataViewFiltersUtils.useFiltersInstance;\n\n  const activeCount = computed(() => activeFiltersCounts.value[props.group]);\n</script>\n\n<template>\n  <div class=\"tw-py-4\">\n    <button\n      class=\"tw-w-full tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500\"\n      @click=\"emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-self-stretch\">\n        <div class=\"tw-flex tw-flex-col tw-items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"tw-text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"tw-inline-flex tw-items-center tw-gap-6\">\n          <Chip\n            v-if=\"activeCount\"\n            color=\"blue\"\n            radius=\"pill\"\n            shade=\"main\"\n            :aria-label=\"t('ll.numberOfActiveFilters')\"\n            :title=\"t('ll.numberOfActiveFilters')\"\n          >\n            {{ activeCount }}\n          </Chip>\n          <Icon name=\"chevron-right\" />\n        </div>\n      </div>\n    </button>\n  </div>\n</template>\n"],"names":["dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqBQA,IAAuBC,EAAOC,EAAkC,GAAG;AAErE,QAAA,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIE,UAAA,EAAE,qBAAAG,EAAoB,IAAIH,EAAqB,oBAE/CI,IAAcC,EAAS,MAAMF,EAAoB,MAAMG,EAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterDrawerItem.js","sources":["../src/components/FilterDrawerItem/FilterDrawerItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Chip from '../Chip/Chip.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface FilterDrawerItemProps {\n    /** The name of a filter group */\n    group: string;\n    title: string;\n    description?: string;\n  }\n  const props = defineProps<FilterDrawerItemProps>();\n\n  export interface FilterDrawerItemEmits {\n    (e: 'navigate');\n  }\n  const emit = defineEmits<FilterDrawerItemEmits>();\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { activeFiltersCounts } = dataViewFiltersUtils.useFiltersInstance;\n\n  const activeCount = computed(() => activeFiltersCounts.value[props.group]);\n</script>\n\n<template>\n  <div class=\"tw-py-4\">\n    <button\n      class=\"tw-w-full tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500\"\n      @click=\"emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-self-stretch\">\n        <div class=\"tw-flex tw-flex-col tw-items-start\">\n          <h4>{{ props.title }}</h4>\n          <div v-if=\"props.description\" class=\"tw-text-xs\" data-test=\"description\">\n            {{ props.description }}\n          </div>\n        </div>\n        <div class=\"tw-inline-flex tw-items-center tw-gap-6\">\n          <Chip\n            v-if=\"activeCount\"\n            color=\"blue\"\n            radius=\"pill\"\n            shade=\"main\"\n            :aria-label=\"t('ll.numberOfActiveFilters')\"\n            :title=\"t('ll.numberOfActiveFilters')\"\n          >\n            {{ activeCount }}\n          </Chip>\n          <Icon name=\"chevron-right\" />\n        </div>\n      </div>\n    </button>\n  </div>\n</template>\n"],"names":["dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAqBQA,IAAuBC,EAAOC,EAAkC,GAAG;AAErE,QAAA,EAACF,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIE,UAAA,EAAE,qBAAAG,EAAoB,IAAIH,EAAqB,oBAE/CI,IAAcC,EAAS,MAAMF,EAAoB,MAAMG,EAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.js

@@ -1,49 +1,34 @@
-import { defineComponent as O, inject as y, ref as x, computed as B, openBlock as w, createBlock as k, withCtx as n, createVNode as m, unref as i, createTextVNode as g, toDisplayString as h, createElementVNode as u, renderSlot as L, Transition as W, createElementBlock as j, createCommentVNode as C } from "vue";
-import { d as J } from "./debounce-6aca1ca9.js";
-import { i as z } from "./_MapCache-65811284.js";
-import { t as T } from "./locale.js";
-import E from "./Button.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
+import { defineComponent as L, inject as b, ref as y, computed as O, openBlock as u, createBlock as k, withCtx as s, createVNode as w, unref as o, createTextVNode as f, toDisplayString as m, createElementVNode as d, renderSlot as R, Transition as W, createElementBlock as j, createCommentVNode as x } from "vue";
+import J from "lodash-es/throttle";
+import { t as C } from "./locale.js";
+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-e579235f.js";
 import { D as F } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
-import { D as G } from "./DataViewFilters.keys-c80ffabe.js";
-import U from "./Dropdown.js";
-import X from "./FilterChip.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./get-27d90892.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-b77978d6.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./uniqueId-847efe53.js";
-import "./index-79ce320f.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
-import "./capitalize-667d9f60.js";
-import "./_createCompounder-ae01a723.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
+import "lodash-es/camelCase";
+import "lodash-es/isFinite";
+import "lodash-es/isPlainObject";
 import "./Icon.js";
+import "./index-79ce320f.js";
 import "./Chip.js";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
-var $ = "Expected a function";
-function q(d, l, e) {
-  var s = !0, o = !0;
-  if (typeof d != "function")
-    throw new TypeError($);
-  return z(e) && (s = "leading" in e ? !!e.leading : s, o = "trailing" in e ? !!e.trailing : o), J(d, l, {
-    leading: s,
-    maxWait: l,
-    trailing: o
-  });
-}
-const H = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, K = { class: "tw-grow tw-rounded-t tw-relative tw-overflow-hidden" }, M = {
+const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "tw-grow tw-rounded-t tw-relative tw-overflow-hidden" }, K = {
   key: 0,
   class: "tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow tw-pointer-events-none"
-}, P = { class: "tw-bg-ice-100 tw-border-t-ice-200 tw-border-b-ice-100 tw-border-x-ice-100 tw-border-solid tw-border tw-p-3.5 tw-flex tw-justify-end tw-rounded-b tw-gap-6" }, Dt = /* @__PURE__ */ O({
+}, M = { class: "tw-bg-ice-100 tw-border-t-ice-200 tw-border-b-ice-100 tw-border-x-ice-100 tw-border-solid tw-border tw-p-3.5 tw-flex tw-justify-end tw-rounded-b tw-gap-6" }, yt = /* @__PURE__ */ L({
   __name: "FilterDropdown",
   props: {
     label: {},
@@ -52,44 +37,44 @@ const H = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, K = { class: "t
     } }
   },
   emits: ["reset", "dismiss"],
-  setup(d, { emit: l }) {
-    const e = d, { isLoading: s } = y(F.key, F.defaults), o = y(G.key);
-    if (!(o != null && o.useFiltersInstance))
+  setup(T, { emit: p }) {
+    const r = T, { isLoading: h } = b(F.key, F.defaults), l = b(z.key);
+    if (!(l != null && l.useFiltersInstance))
       throw new Error(
         "FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters()."
       );
-    const { applyFilters: D, resetFilterGroup: I, activeFiltersCounts: v, undoWorkingFilters: _ } = o.useFiltersInstance, a = x(), f = B(() => {
+    const { applyFilters: I, resetFilterGroup: E, activeFiltersCounts: v, undoWorkingFilters: _ } = l.useFiltersInstance, i = y(), c = O(() => {
       var t;
-      return (t = a.value) == null ? void 0 : t.isActive;
+      return (t = i.value) == null ? void 0 : t.isActive;
     });
-    function N() {
-      var r;
-      const t = f.value;
-      (r = a.value) == null || r.toggle(), t && (_(), l("dismiss"));
-    }
     function S() {
+      var e;
+      const t = c.value;
+      (e = i.value) == null || e.toggle(), t && (_(), p("dismiss"));
+    }
+    function A() {
       var t;
-      I(e.group), l("reset"), (t = a.value) == null || t.dismiss();
+      E(r.group), p("reset"), (t = i.value) == null || t.dismiss();
     }
-    async function A() {
-      var r, p;
-      const { preventDismiss: t } = await ((r = e.onApply) == null ? void 0 : r.call(e)) || D() || {};
-      t || (p = a.value) == null || p.dismiss();
+    async function N() {
+      var e, a;
+      const { preventDismiss: t } = await ((e = r.onApply) == null ? void 0 : e.call(r)) || I() || {};
+      t || (a = i.value) == null || a.dismiss();
     }
-    function R() {
-      _(), l("dismiss");
+    function V() {
+      _(), p("dismiss");
     }
-    const c = x(!1), b = q((t) => {
-      t.target && (t.target.scrollTop > 0 ? c.value = !0 : c.value = !1);
+    const n = y(!1), g = J((t) => {
+      t.target && (t.target.scrollTop > 0 ? n.value = !0 : n.value = !1);
     }, 500);
-    function V() {
+    function B() {
       setTimeout(() => {
-        c.value = !1;
+        n.value = !1;
       }, 2e3);
     }
-    return (t, r) => (w(), k(U, {
+    return (t, e) => (u(), k(G, {
       ref_key: "dropdownRef",
-      ref: a,
+      ref: i,
       align: "left",
       class: "stash-filter-dropdown",
       "data-test": "stash-filter-dropdown",
@@ -97,61 +82,61 @@ const H = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, K = { class: "t
       "close-manually": "",
       "content-class": "tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]",
       offset: { y: 6 },
-      onDismiss: R
+      onDismiss: V
     }, {
-      toggle: n(() => [
-        m(X, {
+      toggle: s(() => [
+        w($, {
           class: "tw-rounded-full",
           "has-dropdown": "",
-          "is-dropdown-open": f.value,
-          "filter-count": i(v)[e.group],
-          "is-selected": f.value,
-          onClick: N
+          "is-dropdown-open": c.value,
+          "filter-count": o(v)[r.group],
+          "is-selected": c.value,
+          onClick: S
         }, {
-          default: n(() => [
-            g(h(e.label), 1)
+          default: s(() => [
+            f(m(r.label), 1)
           ]),
           _: 1
         }, 8, ["is-dropdown-open", "filter-count", "is-selected"])
       ]),
-      default: n(() => [
-        u("div", H, [
-          u("div", K, [
-            u("div", {
+      default: s(() => [
+        d("div", q, [
+          d("div", H, [
+            d("div", {
               class: "tw-p-3.5 tw-h-full tw-overflow-auto",
-              onScroll: r[0] || (r[0] = //@ts-ignore
-              (...p) => i(b) && i(b)(...p)),
-              onScrollend: V
+              onScroll: e[0] || (e[0] = //@ts-ignore
+              (...a) => o(g) && o(g)(...a)),
+              onScrollend: B
             }, [
-              L(t.$slots, "default")
+              R(t.$slots, "default")
             ], 32),
-            m(W, { name: "fade" }, {
-              default: n(() => [
-                c.value ? (w(), j("div", M)) : C("", !0)
+            w(W, { name: "fade" }, {
+              default: s(() => [
+                n.value ? (u(), j("div", K)) : x("", !0)
               ]),
               _: 1
             })
           ]),
-          u("footer", P, [
-            i(v)[e.group] ? (w(), k(E, {
+          d("footer", M, [
+            o(v)[r.group] ? (u(), k(D, {
               key: 0,
               secondary: "",
               class: "tw-min-w-[100px]",
-              disabled: i(s),
-              onClick: S
+              disabled: o(h),
+              onClick: A
             }, {
-              default: n(() => [
-                g(h(i(T)("ll.reset")), 1)
+              default: s(() => [
+                f(m(o(C)("ll.reset")), 1)
               ]),
               _: 1
-            }, 8, ["disabled"])) : C("", !0),
-            m(E, {
+            }, 8, ["disabled"])) : x("", !0),
+            w(D, {
               class: "tw-min-w-[100px]",
-              disabled: i(s),
-              onClick: A
+              disabled: o(h),
+              onClick: N
             }, {
-              default: n(() => [
-                g(h(i(T)("ll.apply")), 1)
+              default: s(() => [
+                f(m(o(C)("ll.apply")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -163,6 +148,6 @@ const H = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, K = { class: "t
   }
 });
 export {
-  Dt as default
+  yt as default
 };
 //# sourceMappingURL=FilterDropdown.js.map

package/dist/FilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../node_modules/lodash-es/throttle.js","../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["import debounce from './debounce.js';\nimport isObject from './isObject.js';\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n *  Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n *  Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\nfunction throttle(func, wait, options) {\n  var leading = true,\n      trailing = true;\n\n  if (typeof func != 'function') {\n    throw new TypeError(FUNC_ERROR_TEXT);\n  }\n  if (isObject(options)) {\n    leading = 'leading' in options ? !!options.leading : leading;\n    trailing = 'trailing' in options ? !!options.trailing : trailing;\n  }\n  return debounce(func, wait, {\n    'leading': leading,\n    'maxWait': wait,\n    'trailing': trailing\n  });\n}\n\nexport default throttle;\n","<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'reset'): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"tw-flex tw-flex-col tw-rounded tw-h-full\">\n        <div class=\"tw-grow tw-rounded-t tw-relative tw-overflow-hidden\">\n          <div class=\"tw-p-3.5 tw-h-full tw-overflow-auto\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"\n                tw-absolute\n                tw-bottom-0\n                tw-left-0\n                tw-right-0\n                tw-z-10\n                tw-h-[20px]\n                tw-bg-scroll-shadow\n                tw-pointer-events-none\n              \"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"\n            tw-bg-ice-100\n            tw-border-t-ice-200\n            tw-border-b-ice-100\n            tw-border-x-ice-100\n            tw-border-solid\n            tw-border\n            tw-p-3.5\n            tw-flex\n            tw-justify-end\n            tw-rounded-b\n            tw-gap-6\n          \"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"tw-min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"tw-min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </footer>\n      </div>\n    </template>\n  </Dropdown>\n</template>\n"],"names":["FUNC_ERROR_TEXT","throttle","func","wait","options","leading","trailing","isObject","debounce","isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","emit","handleResetClick","props","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAIA,IAAkB;AA8CtB,SAASC,EAASC,GAAMC,GAAMC,GAAS;AACrC,MAAIC,IAAU,IACVC,IAAW;AAEf,MAAI,OAAOJ,KAAQ;AACjB,UAAM,IAAI,UAAUF,CAAe;AAErC,SAAIO,EAASH,CAAO,MAClBC,IAAU,aAAaD,IAAU,CAAC,CAACA,EAAQ,UAAUC,GACrDC,IAAW,cAAcF,IAAU,CAAC,CAACA,EAAQ,WAAWE,IAEnDE,EAASN,GAAMC,GAAM;AAAA,IAC1B,SAAWE;AAAA,IACX,SAAWF;AAAA,IACX,UAAYG;AAAA,EAChB,CAAG;AACH;;;;;;;;;;;;;;iBCrCQ,EAAE,WAAWG,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACiBP,KACnBQ,EAAK,SAAS;AAAA,IAElB;AAEA,aAASC,IAAmB;;AAC1B,MAAAX,EAAiBY,EAAM,KAAK,GAC5BF,EAAK,OAAO,IACZH,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeM,IAAmB;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAMP,IAAAK,EAAM,YAAN,gBAAAL,EAAA,KAAAK,OAAsBb,EAAa,KAAK;AAE1E,MAAKe,MACHC,IAAAZ,EAAY,UAAZ,QAAAY,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAd,KACnBQ,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAO,IAAab,EAAI,EAAK,GACtBc,IAAWhC,EAAS,CAACiC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CF,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASG,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAH,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'reset'): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"tw-flex tw-flex-col tw-rounded tw-h-full\">\n        <div class=\"tw-grow tw-rounded-t tw-relative tw-overflow-hidden\">\n          <div class=\"tw-p-3.5 tw-h-full tw-overflow-auto\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"\n                tw-absolute\n                tw-bottom-0\n                tw-left-0\n                tw-right-0\n                tw-z-10\n                tw-h-[20px]\n                tw-bg-scroll-shadow\n                tw-pointer-events-none\n              \"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"\n            tw-bg-ice-100\n            tw-border-t-ice-200\n            tw-border-b-ice-100\n            tw-border-x-ice-100\n            tw-border-solid\n            tw-border\n            tw-p-3.5\n            tw-flex\n            tw-justify-end\n            tw-rounded-b\n            tw-gap-6\n          \"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"tw-min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"tw-min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </footer>\n      </div>\n    </template>\n  </Dropdown>\n</template>\n"],"names":["isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","emit","handleResetClick","props","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BQ,EAAE,WAAWA,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACiBP,KACnBQ,EAAK,SAAS;AAAA,IAElB;AAEA,aAASC,IAAmB;;AAC1B,MAAAX,EAAiBY,EAAM,KAAK,GAC5BF,EAAK,OAAO,IACZH,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeM,IAAmB;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAMP,IAAAK,EAAM,YAAN,gBAAAL,EAAA,KAAAK,OAAsBb,EAAa,KAAK;AAE1E,MAAKe,MACHC,IAAAZ,EAAY,UAAZ,QAAAY,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAd,KACnBQ,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAO,IAAab,EAAI,EAAK,GACtBc,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,21 +1,18 @@
-import { defineComponent as S, computed as p, openBlock as s, createBlock as $, withCtx as u, createElementVNode as r, 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 { 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-c864abd3.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import y from "./FilterChip.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/get";
+import "lodash-es/uniqueId";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./Chip.js";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 import "./Icon.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"], U = ["id", "value"], I = ["for"], te = /* @__PURE__ */ S({
+const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"], U = ["id", "value"], I = ["for"], Y = /* @__PURE__ */ S({
   __name: "FilterSelect",
   props: {
     name: {},
@@ -54,17 +51,17 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
     function w() {
       n.value = !n.value;
     }
-    return (t, o) => (s(), $(N, {
+    return (t, o) => (r(), $(N, {
       class: "stash-filter-select",
       fieldset: "",
       label: e.label
     }, {
       default: u(() => [
-        r("div", F, [
-          e.canSelectAll ? (s(), d("div", {
+        s("div", F, [
+          e.canSelectAll ? (r(), d("div", {
             key: `${e.name}--all`
           }, [
-            f(r("input", {
+            f(s("input", {
               id: `${e.name}--all`,
               "onUpdate:modelValue": o[0] || (o[0] = (l) => n.value = l),
               class: "sr-only",
@@ -74,7 +71,7 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
             }, null, 8, D), [
               [v, n.value]
             ]),
-            r("label", {
+            s("label", {
               for: `${e.name}--all`
             }, [
               _(y, {
@@ -89,10 +86,10 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
               }, 8, ["is-selected", "onKeypress"])
             ], 8, O)
           ])) : K("", !0),
-          (s(!0), d(A, null, B(e.options, (l) => (s(), d("div", {
+          (r(!0), d(A, null, B(e.options, (l) => (r(), d("div", {
             key: i(l)
           }, [
-            f(r("input", {
+            f(s("input", {
               id: i(l),
               "onUpdate:modelValue": o[1] || (o[1] = (m) => a.value = m),
               class: "sr-only",
@@ -102,7 +99,7 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
             }, null, 8, U), [
               [v, a.value]
             ]),
-            r("label", {
+            s("label", {
               for: i(l)
             }, [
               _(y, {
@@ -124,6 +121,6 @@ const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, D = ["id"], O = ["for"],
   }
 });
 export {
-  te as default
+  Y as default
 };
 //# sourceMappingURL=FilterSelect.js.map

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=\"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}