@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/dist/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["<script>\n  import InlineSvg from 'vue-inline-svg';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export const FILE_TYPES = Object.freeze({\n    CSV: {\n      ACCEPTS: ['text/csv'],\n      EXTENSION: ['csv'],\n      MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n      ILLUSTRATION: 'csv',\n    },\n    PDF: {\n      ACCEPTS: ['application/pdf'],\n      EXTENSION: ['pdf'],\n      MIME_TYPES: ['application/pdf'],\n      ILLUSTRATION: 'pdf',\n    },\n    PNG: {\n      ACCEPTS: ['image/png'],\n      EXTENSION: ['png'],\n      MIME_TYPES: ['image/png'],\n      ILLUSTRATION: 'image',\n    },\n    JPEG: {\n      ACCEPTS: ['image/jpeg'],\n      EXTENSION: ['jpg', 'jpeg'],\n      MIME_TYPES: ['image/jpeg'],\n      ILLUSTRATION: 'image',\n    },\n    DOC: {\n      ACCEPTS: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      EXTENSION: ['doc', 'docx'],\n      MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      ILLUSTRATION: 'document',\n    },\n    XLS: {\n      ACCEPTS: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      EXTENSION: ['xls', 'xlsx'],\n      MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      ILLUSTRATION: 'csv',\n    },\n  });\n\n  // TODO: convert to enum (typescript)\n  export const Sizes = Object.freeze({\n    Dense: 'dense',\n    Standard: 'standard',\n  });\n\n  export default {\n    name: 'll-file-upload',\n\n    components: {\n      'll-icon': Icon,\n      'll-button': Button,\n      InlineSvg,\n    },\n\n    inject: ['stashOptions'],\n\n    inheritAttrs: false,\n\n    props: {\n      files: {\n        type: Array,\n        default: () => [],\n      },\n\n      /**\n       * The file types accepted by the input\n       */\n      fileTypes: {\n        type: Array,\n        default: () => Object.keys(FILE_TYPES),\n      },\n\n      /**\n       * Shows only an upload button\n       */\n      buttonOnly: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the upload button\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * When using the drag and drop feature, hide the icon\n       * and display everything on one line.\n       */\n      size: {\n        type: String,\n        default: 'standard',\n        validator: (value) => Object.values(Sizes).includes(value),\n      },\n    },\n\n    emits: ['file-select', 'file-delete', 'file-error'],\n\n    setup() {\n      return {\n        Sizes,\n      };\n    },\n\n    data() {\n      return {\n        isDraggingOver: false,\n        removeText: t('ll.fileUpload.remove'),\n        fileUploadUploadFileText: t('ll.fileUpload.uploadFile'),\n        fileUploadDragDropFileHereText: t('ll.fileUpload.dragDropFileHere'),\n        fileUploadOrText: t('ll.fileUpload.or'),\n      };\n    },\n\n    computed: {\n      inputAttrs() {\n        const attrs = { ...this.$attrs };\n\n        delete attrs['data-test'];\n        delete attrs.class;\n        delete attrs.type;\n        delete attrs.accept;\n\n        return attrs;\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedMimeTypes() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].MIME_TYPES).reduce(this.flattenArray);\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedFileExtensions() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].EXTENSION).reduce(this.flattenArray);\n      },\n\n      fileMeta() {\n        return FILE_TYPES;\n      },\n\n      illustrationPath() {\n        return `${this.stashOptions?.staticPath}/illustrations/FileUpload/${\n          FILE_TYPES[this.fileTypes[0]].ILLUSTRATION\n        }.svg`;\n      },\n    },\n\n    methods: {\n      openFileDialog() {\n        if (this.$refs.fileUpload) {\n          this.$refs.fileUpload.value = '';\n          this.$refs.fileUpload.click();\n        }\n      },\n\n      /**\n       * Sets file(s) to selected file(s) from dialogue\n       * @param {Object} event - file select event that contains file(s)\n       * @returns {Array} An array of files\n       */\n      handleFileInput(event) {\n        const files = [...event.target.files];\n\n        this.$emit('file-select', { event, files });\n      },\n\n      handleDragEnter() {\n        this.isDraggingOver = true;\n      },\n\n      handleDragLeave() {\n        this.isDraggingOver = false;\n      },\n\n      /**\n       * Sets file to dropped file if it is proper file type\n       * @param {Object} event - file select event that contains file\n       */\n      async handleDropFile(event) {\n        if (this.disabled) {\n          return;\n        }\n\n        const files = [...event.dataTransfer.files];\n\n        this.isDraggingOver = false;\n\n        if (this.acceptedMimeTypes.length) {\n          try {\n            const mimeTypePromises = await Promise.all(files.map((file) => this.readMimeType(file)));\n            const allCorrectMimeTypes = mimeTypePromises.every((mimeType) => this.acceptedMimeTypes.includes(mimeType));\n\n            if (!allCorrectMimeTypes) {\n              throw new Error('One or more files contains an unacceptable mime type.');\n            }\n\n            const allCorrectFileExtensions = files.every((file) => {\n              const extension = file.name.split('.').pop();\n\n              return this.acceptedFileExtensions.includes(extension);\n            });\n\n            if (!allCorrectFileExtensions) {\n              throw new Error('One or more files contains an unacceptable extension.');\n            }\n\n            this.$emit('file-select', { event, files });\n          } catch (error) {\n            this.handleFileError(error);\n          }\n        } else {\n          this.$emit('file-select', { event, files });\n        }\n      },\n\n      handleFileError(error) {\n        const message = this.t('ll.fileUpload.errors.incorrectFileType', {\n          fileTypes: this.acceptedFileExtensions.join(', '),\n        });\n\n        if (this.$attrs['file-error']) {\n          this.$emit('file-error', message);\n        } else {\n          this.$notify.warning(message);\n        }\n\n        throw error;\n      },\n\n      handleFileDelete(file) {\n        this.$emit('file-delete', file);\n      },\n\n      /**\n       * Check for the mime type on the uploaded File object\n       * Otherwise load the file and attempt to read it\n       * @param file The Uploaded File object\n       */\n      readMimeType(file) {\n        return new Promise((resolve, reject) => {\n          if (file.type) {\n            return resolve(file.type);\n          } else if (window.FileReader) {\n            const fileReader = new FileReader();\n\n            fileReader.onload = () => {\n              const mimeType = fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n                ? fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)[0]\n                : '';\n\n              resolve(mimeType);\n            };\n\n            fileReader.readAsDataURL(file);\n          } else {\n            reject(new Error('Failed to read file.'));\n          }\n        });\n      },\n\n      flattenArray(a, b) {\n        return a.concat(b);\n      },\n    },\n  };\n</script>\n\n<template>\n  <div :class=\"$attrs.class\" :data-test=\"$attrs['data-test']\">\n    <div v-if=\"buttonOnly\">\n      <ll-button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        {{ fileUploadUploadFileText }}\n      </ll-button>\n    </div>\n    <div\n      v-else\n      class=\"tw-p-6 rounded\"\n      :class=\"[$style['file-dropbox'], isDraggingOver && $style['is-dragging'], disabled && $style['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"flex text-center flex-column align-center align-middle\"\n        :class=\"[{ 'items-center md:flex-row': size === Sizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== Sizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"text-ice-900\">\n            {{ fileUploadDragDropFileHereText }}\n          </span>\n          <span :class=\"size === Sizes.Dense ? 'md:ml-1 md:mr-2 md:my-0 my-1 text-ice-900' : 'tw-mt-1.5 my-1'\">\n            {{ fileUploadOrText }}\n          </span>\n          <ll-button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"$style['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ fileUploadUploadFileText }}</slot>\n          </ll-button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <ll-icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <ll-button\n              :class=\"[$style['remove-button'], $style['button']]\"\n              @click.stop.prevent=\"handleFileDelete(file)\"\n            >\n              {{ removeText }}\n            </ll-button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 text-center text-small text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUpload\"\n      type=\"file\"\n      :accept=\"fileTypes.map((fileType) => fileMeta[fileType].ACCEPTS).reduce(flattenArray)\"\n      :multiple=\"$attrs['multiple']\"\n      @change=\"handleFileInput($event)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: border('thin');\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  // Constrain the upload icon for drag/drop to the required size\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","Sizes","_sfc_main","Icon","Button","InlineSvg","value","t","attrs","fileType","_a","event","files","file","mimeType","extension","error","message","resolve","reject","fileReader","a","b","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","$props","_hoisted_2","_createVNode","_component_ll_button","$options","$data","args","_createElementVNode","$setup","_Fragment","_renderList","_component_ll_icon","_toDisplayString","_withModifiers","$event","_createBlock","_component_InlineSvg","_renderSlot","_openBlock","_hoisted_4","_mergeProps","_cache"],"mappings":"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"}
+{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["<script>\n  import InlineSvg from 'vue-inline-svg';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export const FILE_TYPES = Object.freeze({\n    CSV: {\n      ACCEPTS: ['text/csv'],\n      EXTENSION: ['csv'],\n      MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n      ILLUSTRATION: 'csv',\n    },\n    PDF: {\n      ACCEPTS: ['application/pdf'],\n      EXTENSION: ['pdf'],\n      MIME_TYPES: ['application/pdf'],\n      ILLUSTRATION: 'pdf',\n    },\n    PNG: {\n      ACCEPTS: ['image/png'],\n      EXTENSION: ['png'],\n      MIME_TYPES: ['image/png'],\n      ILLUSTRATION: 'image',\n    },\n    JPEG: {\n      ACCEPTS: ['image/jpeg'],\n      EXTENSION: ['jpg', 'jpeg'],\n      MIME_TYPES: ['image/jpeg'],\n      ILLUSTRATION: 'image',\n    },\n    DOC: {\n      ACCEPTS: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      EXTENSION: ['doc', 'docx'],\n      MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      ILLUSTRATION: 'document',\n    },\n    XLS: {\n      ACCEPTS: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      EXTENSION: ['xls', 'xlsx'],\n      MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      ILLUSTRATION: 'csv',\n    },\n  });\n\n  // TODO: convert to enum (typescript)\n  export const Sizes = Object.freeze({\n    Dense: 'dense',\n    Standard: 'standard',\n  });\n\n  export default {\n    name: 'll-file-upload',\n\n    components: {\n      'll-icon': Icon,\n      'll-button': Button,\n      InlineSvg,\n    },\n\n    inject: ['stashOptions'],\n\n    inheritAttrs: false,\n\n    props: {\n      files: {\n        type: Array,\n        default: () => [],\n      },\n\n      /**\n       * The file types accepted by the input\n       */\n      fileTypes: {\n        type: Array,\n        default: () => Object.keys(FILE_TYPES),\n      },\n\n      /**\n       * Shows only an upload button\n       */\n      buttonOnly: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the upload button\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * When using the drag and drop feature, hide the icon\n       * and display everything on one line.\n       */\n      size: {\n        type: String,\n        default: 'standard',\n        validator: (value) => Object.values(Sizes).includes(value),\n      },\n    },\n\n    emits: ['file-select', 'file-delete', 'file-error'],\n\n    setup() {\n      return {\n        Sizes,\n      };\n    },\n\n    data() {\n      return {\n        isDraggingOver: false,\n        removeText: t('ll.fileUpload.remove'),\n        fileUploadUploadFileText: t('ll.fileUpload.uploadFile'),\n        fileUploadDragDropFileHereText: t('ll.fileUpload.dragDropFileHere'),\n        fileUploadOrText: t('ll.fileUpload.or'),\n      };\n    },\n\n    computed: {\n      inputAttrs() {\n        const attrs = { ...this.$attrs };\n\n        delete attrs['data-test'];\n        delete attrs.class;\n        delete attrs.type;\n        delete attrs.accept;\n\n        return attrs;\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedMimeTypes() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].MIME_TYPES).reduce(this.flattenArray);\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedFileExtensions() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].EXTENSION).reduce(this.flattenArray);\n      },\n\n      fileMeta() {\n        return FILE_TYPES;\n      },\n\n      illustrationPath() {\n        return `${this.stashOptions?.staticPath}/illustrations/FileUpload/${\n          FILE_TYPES[this.fileTypes[0]].ILLUSTRATION\n        }.svg`;\n      },\n    },\n\n    methods: {\n      openFileDialog() {\n        if (this.$refs.fileUpload) {\n          this.$refs.fileUpload.value = '';\n          this.$refs.fileUpload.click();\n        }\n      },\n\n      /**\n       * Sets file(s) to selected file(s) from dialogue\n       * @param {Object} event - file select event that contains file(s)\n       * @returns {Array} An array of files\n       */\n      handleFileInput(event) {\n        const files = [...event.target.files];\n\n        this.$emit('file-select', { event, files });\n      },\n\n      handleDragEnter() {\n        this.isDraggingOver = true;\n      },\n\n      handleDragLeave() {\n        this.isDraggingOver = false;\n      },\n\n      /**\n       * Sets file to dropped file if it is proper file type\n       * @param {Object} event - file select event that contains file\n       */\n      async handleDropFile(event) {\n        if (this.disabled) {\n          return;\n        }\n\n        const files = [...event.dataTransfer.files];\n\n        this.isDraggingOver = false;\n\n        if (this.acceptedMimeTypes.length) {\n          try {\n            const mimeTypePromises = await Promise.all(files.map((file) => this.readMimeType(file)));\n            const allCorrectMimeTypes = mimeTypePromises.every((mimeType) => this.acceptedMimeTypes.includes(mimeType));\n\n            if (!allCorrectMimeTypes) {\n              throw new Error('One or more files contains an unacceptable mime type.');\n            }\n\n            const allCorrectFileExtensions = files.every((file) => {\n              const extension = file.name.split('.').pop();\n\n              return this.acceptedFileExtensions.includes(extension);\n            });\n\n            if (!allCorrectFileExtensions) {\n              throw new Error('One or more files contains an unacceptable extension.');\n            }\n\n            this.$emit('file-select', { event, files });\n          } catch (error) {\n            this.handleFileError(error);\n          }\n        } else {\n          this.$emit('file-select', { event, files });\n        }\n      },\n\n      handleFileError(error) {\n        const message = this.t('ll.fileUpload.errors.incorrectFileType', {\n          fileTypes: this.acceptedFileExtensions.join(', '),\n        });\n\n        if (this.$attrs['file-error']) {\n          this.$emit('file-error', message);\n        } else {\n          this.$notify.warning(message);\n        }\n\n        throw error;\n      },\n\n      handleFileDelete(file) {\n        this.$emit('file-delete', file);\n      },\n\n      /**\n       * Check for the mime type on the uploaded File object\n       * Otherwise load the file and attempt to read it\n       * @param file The Uploaded File object\n       */\n      readMimeType(file) {\n        return new Promise((resolve, reject) => {\n          if (file.type) {\n            return resolve(file.type);\n          } else if (window.FileReader) {\n            const fileReader = new FileReader();\n\n            fileReader.onload = () => {\n              const mimeType = fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n                ? fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)[0]\n                : '';\n\n              resolve(mimeType);\n            };\n\n            fileReader.readAsDataURL(file);\n          } else {\n            reject(new Error('Failed to read file.'));\n          }\n        });\n      },\n\n      flattenArray(a, b) {\n        return a.concat(b);\n      },\n    },\n  };\n</script>\n\n<template>\n  <div :class=\"$attrs.class\" :data-test=\"$attrs['data-test']\">\n    <div v-if=\"buttonOnly\">\n      <ll-button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        {{ fileUploadUploadFileText }}\n      </ll-button>\n    </div>\n    <div\n      v-else\n      class=\"rounded tw-p-6\"\n      :class=\"[$style['file-dropbox'], isDraggingOver && $style['is-dragging'], disabled && $style['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"flex text-center flex-column align-center align-middle\"\n        :class=\"[{ 'items-center md:flex-row': size === Sizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== Sizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"text-ice-900\">\n            {{ fileUploadDragDropFileHereText }}\n          </span>\n          <span :class=\"size === Sizes.Dense ? 'md:ml-1 md:mr-2 md:my-0 my-1 text-ice-900' : 'tw-mt-1.5 my-1'\">\n            {{ fileUploadOrText }}\n          </span>\n          <ll-button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"$style['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ fileUploadUploadFileText }}</slot>\n          </ll-button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <ll-icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <ll-button\n              :class=\"[$style['remove-button'], $style['button']]\"\n              @click.stop.prevent=\"handleFileDelete(file)\"\n            >\n              {{ removeText }}\n            </ll-button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"text-center text-small text-ice-700 tw-mt-6\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUpload\"\n      type=\"file\"\n      :accept=\"fileTypes.map((fileType) => fileMeta[fileType].ACCEPTS).reduce(flattenArray)\"\n      :multiple=\"$attrs['multiple']\"\n      @change=\"handleFileInput($event)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: border('thin');\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  // Constrain the upload icon for drag/drop to the required size\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","Sizes","_sfc_main","Icon","Button","InlineSvg","value","t","attrs","fileType","_a","event","files","file","mimeType","extension","error","message","resolve","reject","fileReader","a","b","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","$props","_hoisted_2","_createVNode","_component_ll_button","$options","$data","args","_createElementVNode","$setup","_Fragment","_renderList","_component_ll_icon","_toDisplayString","_withModifiers","$event","_createBlock","_component_InlineSvg","_renderSlot","_openBlock","_hoisted_4","_mergeProps","_cache"],"mappings":"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"}

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 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 { 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 { 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 y from "./Chip.js";
+import D from "./Icon.js";
+import { _ as x } 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 F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R = { key: 1 }, S = /* @__PURE__ */ u({
+const B = { class: "tw-flex tw-items-center" }, F = ["aria-label", "title"], O = { key: 1 }, R = /* @__PURE__ */ u({
   __name: "FilterChip",
   props: {
     filterCount: { default: void 0 },
@@ -18,25 +18,25 @@ const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R =
     isSelected: { type: Boolean, default: !1 }
   },
   emits: ["click", "remove"],
-  setup(d, { emit: l }) {
-    const e = d, o = f(), a = h(() => Number(e.filterCount) > 0);
+  setup(d, { emit: r }) {
+    const e = d, o = f(), i = h(() => Number(e.filterCount) > 0);
     function p() {
-      l("click");
+      r("click");
     }
     function m() {
-      l("remove");
+      r("remove");
     }
-    return (_, A) => (s(), w(D, {
+    return (_, A) => (s(), w(y, {
       "should-override-colors": "",
       tabindex: "0",
-      class: r(["stash-filter-chip tw-leading-5 tw-text-sm tw-font-normal tw-text-ice-900 tw-normal-case", [
+      class: l(["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"]]: a.value
+          [t(o)["has-filter-count"]]: i.value
         }
       ]]),
       radius: "pill",
@@ -45,44 +45,44 @@ const F = { class: "tw-flex tw-items-center" }, O = ["aria-label", "title"], R =
       onRemove: m
     }, {
       default: v(() => [
-        b("div", F, [
+        b("div", B, [
           C(_.$slots, "default"),
-          a.value ? (s(), n("span", {
+          i.value ? (s(), a("span", {
             key: 0,
             "data-test": "span|filter-count",
-            class: r(t(o)["filter-count"]),
+            class: l(t(o)["filter-count"]),
             "aria-label": t(c)("ll.numberOfActiveFilters"),
             title: t(c)("ll.numberOfActiveFilters")
-          }, k(e.filterCount), 11, O)) : i("", !0),
-          e.hasDropdown ? (s(), n("span", R, [
-            y(x, {
+          }, g(e.filterCount), 11, F)) : n("", !0),
+          e.hasDropdown ? (s(), a("span", O, [
+            k(D, {
               "data-test": "icon|caret",
               name: "caret-down",
-              class: r([
+              class: l([
                 t(o).caret,
                 {
                   [t(o)["caret-rotate"]]: e.isDropdownOpen
                 }
               ])
             }, null, 8, ["class"])
-          ])) : i("", !0)
+          ])) : n("", !0)
         ])
       ]),
       _: 3
     }, 8, ["class", "is-removable"]));
   }
-}), N = "_root_1o49d_5", M = "_caret_1o49d_94", V = {
-  root: N,
-  "is-selected": "_is-selected_1o49d_24",
-  "is-removable": "_is-removable_1o49d_36",
-  "has-filter-count": "_has-filter-count_1o49d_49",
-  "has-dropdown": "_has-dropdown_1o49d_54",
-  "filter-count": "_filter-count_1o49d_67",
-  caret: M,
-  "caret-rotate": "_caret-rotate_1o49d_105"
-}, g = {
-  $style: V
-}, L = /* @__PURE__ */ B(S, [["__cssModules", g]]);
+}), 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]]);
 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-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-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDrawerItem.js

@@ -9,13 +9,13 @@ import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const N = { class: "stash-filter-drawer-item" }, T = { class: "tw-flex tw-justify-between tw-items-center tw-self-stretch" }, A = { class: "tw-flex tw-flex-col tw-items-start" }, V = {
+const N = { class: "stash-filter-drawer-item" }, T = { class: "tw-flex tw-items-center tw-justify-between tw-self-stretch" }, A = { class: "tw-flex tw-flex-col tw-items-start" }, V = {
   key: 0,
   class: "tw-text-xs",
   "data-test": "description"
 }, B = {
   key: 0,
-  class: "tw-p-6 tw-gap-3"
+  class: "tw-gap-3 tw-p-6"
 }, M = /* @__PURE__ */ y({
   __name: "FilterDrawerItem",
   props: {
@@ -34,7 +34,7 @@ const N = { class: "stash-filter-drawer-item" }, T = { class: "tw-flex tw-justif
     return (b, d) => (t(), a("div", N, [
       (t(), n(k(i.value ? "div" : "button"), {
         "data-test": "stash-filter-drawer-item|dynamic-component",
-        class: "tw-w-full tw-py-4 tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500",
+        class: "tw-w-full tw-border-b tw-border-ice-500 tw-py-4 tw-outline-none focus:tw-outline-blue-500",
         onClick: d[0] || (d[0] = (O) => i.value ? void 0 : v("navigate"))
       }, {
         default: w(() => [
@@ -44,7 +44,7 @@ const N = { class: "stash-filter-drawer-item" }, T = { class: "tw-flex tw-justif
               r.description ? (t(), a("div", V, c(r.description), 1)) : o("", !0)
             ]),
             s("div", {
-              class: x(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mr-2 tw-mb-0.5": i.value }])
+              class: x(["tw-inline-flex tw-items-center tw-gap-6", { "tw-mb-0.5 tw-mr-2": i.value }])
             }, [
               m.value ? (t(), n(D, {
                 key: 0,

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  export interface FilterDrawerItemSlots {\n    default?: void;\n  }\n\n  const slots = defineSlots<FilterDrawerItemSlots>();\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  const isDrawerCascade = computed(() => dataViewFiltersUtils.drawerStyle === 'cascade');\n</script>\n\n<template>\n  <div class=\"stash-filter-drawer-item\">\n    <component\n      :is=\"isDrawerCascade ? 'div' : 'button'\"\n      data-test=\"stash-filter-drawer-item|dynamic-component\"\n      class=\"tw-w-full tw-py-4 tw-outline-none focus:tw-outline-blue-500 tw-border-b tw-border-ice-500\"\n      @click=\"isDrawerCascade ? undefined : 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\" :class=\"{ 'tw-mr-2 tw-mb-0.5': isDrawerCascade }\">\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 v-if=\"!isDrawerCascade\" name=\"chevron-right\" :title=\"t('ll.viewFilterGroup')\" />\n        </div>\n      </div>\n    </component>\n    <div v-if=\"isDrawerCascade && slots.default\" class=\"tw-p-6 tw-gap-3\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["slots","_useSlots","dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props","isDrawerCascade"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAQC,KAERC,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,GACnEC,IAAkBF,EAAS,MAAML,EAAqB,gBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  export interface FilterDrawerItemSlots {\n    default?: void;\n  }\n\n  const slots = defineSlots<FilterDrawerItemSlots>();\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  const isDrawerCascade = computed(() => dataViewFiltersUtils.drawerStyle === 'cascade');\n</script>\n\n<template>\n  <div class=\"stash-filter-drawer-item\">\n    <component\n      :is=\"isDrawerCascade ? 'div' : 'button'\"\n      data-test=\"stash-filter-drawer-item|dynamic-component\"\n      class=\"tw-w-full tw-border-b tw-border-ice-500 tw-py-4 tw-outline-none focus:tw-outline-blue-500\"\n      @click=\"isDrawerCascade ? undefined : emit('navigate')\"\n    >\n      <div class=\"tw-flex tw-items-center tw-justify-between 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\" :class=\"{ 'tw-mb-0.5 tw-mr-2': isDrawerCascade }\">\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 v-if=\"!isDrawerCascade\" name=\"chevron-right\" :title=\"t('ll.viewFilterGroup')\" />\n        </div>\n      </div>\n    </component>\n    <div v-if=\"isDrawerCascade && slots.default\" class=\"tw-gap-3 tw-p-6\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["slots","_useSlots","dataViewFiltersUtils","inject","DATA_VIEW_FILTERS_UTILS_INJECTION","activeFiltersCounts","activeCount","computed","props","isDrawerCascade"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAQC,KAERC,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,GACnEC,IAAkBF,EAAS,MAAML,EAAqB,gBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.js

@@ -1,17 +1,17 @@
-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 { defineComponent as L, inject as b, ref as y, computed as O, openBlock as u, createBlock as k, withCtx as r, createVNode as w, unref as o, createTextVNode as f, toDisplayString as m, createElementVNode as d, renderSlot as R, Transition as W, createElementBlock as j, createCommentVNode as x } from "vue";
 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-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.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-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "./constants.js";
 import "./clickoutside.js";
@@ -24,10 +24,10 @@ import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
-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 = {
+const q = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, H = { class: "tw-relative tw-grow tw-overflow-hidden tw-rounded-t" }, K = {
   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"
-}, 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" }, bt = /* @__PURE__ */ L({
+  class: "tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow"
+}, M = { class: "tw-flex tw-justify-end tw-gap-6 tw-rounded-b tw-border tw-border-solid tw-border-x-ice-100 tw-border-b-ice-100 tw-border-t-ice-200 tw-bg-ice-100 tw-p-3.5" }, bt = /* @__PURE__ */ L({
   __name: "FilterDropdown",
   props: {
     label: {},
@@ -37,7 +37,7 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
   },
   emits: ["reset", "dismiss"],
   setup(T, { emit: p }) {
-    const r = T, { isLoading: h } = b(F.key, F.defaults), l = b(z.key);
+    const s = 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()."
@@ -53,11 +53,11 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
     }
     function A() {
       var t;
-      E(r.group), p("reset"), (t = i.value) == null || t.dismiss();
+      E(s.group), p("reset"), (t = i.value) == null || t.dismiss();
     }
     async function N() {
       var e, a;
-      const { preventDismiss: t } = await ((e = r.onApply) == null ? void 0 : e.call(r)) || I() || {};
+      const { preventDismiss: t } = await ((e = s.onApply) == null ? void 0 : e.call(s)) || I() || {};
       t || (a = i.value) == null || a.dismiss();
     }
     function V() {
@@ -83,26 +83,26 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
       offset: { y: 6 },
       onDismiss: V
     }, {
-      toggle: s(() => [
+      toggle: r(() => [
         w($, {
           class: "tw-rounded-full",
           "has-dropdown": "",
           "is-dropdown-open": c.value,
-          "filter-count": o(v)[r.group],
+          "filter-count": o(v)[s.group],
           "is-selected": c.value,
           onClick: S
         }, {
-          default: s(() => [
-            f(m(r.label), 1)
+          default: r(() => [
+            f(m(s.label), 1)
           ]),
           _: 1
         }, 8, ["is-dropdown-open", "filter-count", "is-selected"])
       ]),
-      default: s(() => [
+      default: r(() => [
         d("div", q, [
           d("div", H, [
             d("div", {
-              class: "tw-p-6 tw-h-full tw-overflow-auto",
+              class: "tw-h-full tw-overflow-auto tw-p-3.5",
               onScroll: e[0] || (e[0] = //@ts-ignore
               (...a) => o(g) && o(g)(...a)),
               onScrollend: B
@@ -110,21 +110,21 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
               R(t.$slots, "default")
             ], 32),
             w(W, { name: "fade" }, {
-              default: s(() => [
+              default: r(() => [
                 n.value ? (u(), j("div", K)) : x("", !0)
               ]),
               _: 1
             })
           ]),
           d("footer", M, [
-            o(v)[r.group] ? (u(), k(D, {
+            o(v)[s.group] ? (u(), k(D, {
               key: 0,
               secondary: "",
               class: "tw-min-w-[100px]",
               disabled: o(h),
               onClick: A
             }, {
-              default: s(() => [
+              default: r(() => [
                 f(m(o(C)("ll.reset")), 1)
               ]),
               _: 1
@@ -134,7 +134,7 @@ const q = { class: "tw-flex tw-flex-col tw-rounded tw-h-full" }, H = { class: "t
               disabled: o(h),
               onClick: N
             }, {
-              default: s(() => [
+              default: r(() => [
                 f(m(o(C)("ll.apply")), 1)
               ]),
               _: 1

package/dist/FilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'reset'): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"tw-flex tw-flex-col tw-rounded tw-h-full\">\n        <div class=\"tw-grow tw-rounded-t tw-relative tw-overflow-hidden\">\n          <div class=\"tw-p-6 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FilterDropdown.js","sources":["../src/components/FilterDropdown/FilterDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import throttle from 'lodash-es/throttle';\n  import { computed, inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from '../DataViewFilters/DataViewFilters.keys';\n  import type { OnApplyFilters } from '../DataViewFilters/DataViewFilters.types';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n\n  export interface FilterDropdownProps {\n    label: string;\n    /** The name of a filter group */\n    group: string;\n    onApply?: OnApplyFilters;\n  }\n  const props = withDefaults(defineProps<FilterDropdownProps>(), {\n    activeFilterCount: 0,\n    onApply: () => undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'reset'): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const { isLoading: isDataViewLoading } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const dataViewFiltersUtils = inject(DATA_VIEW_FILTERS_UTILS_INJECTION.key);\n\n  if (!dataViewFiltersUtils?.useFiltersInstance) {\n    throw new Error(\n      'FilterDropdown must be used within a <DataViewFilters> that receives an instance of useFilters().',\n    );\n  }\n\n  const { applyFilters, resetFilterGroup, activeFiltersCounts, undoWorkingFilters } =\n    dataViewFiltersUtils.useFiltersInstance;\n\n  const dropdownRef = ref<InstanceType<typeof Dropdown>>();\n  const isOpen = computed(() => dropdownRef.value?.isActive);\n\n  function onToggleButtonClick() {\n    const wasOpen = isOpen.value;\n\n    dropdownRef.value?.toggle();\n\n    if (wasOpen) {\n      undoWorkingFilters();\n      emit('dismiss');\n    }\n  }\n\n  function handleResetClick() {\n    resetFilterGroup(props.group);\n    emit('reset');\n    dropdownRef.value?.dismiss();\n  }\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || applyFilters() || {};\n\n    if (!preventDismiss) {\n      dropdownRef.value?.dismiss();\n    }\n  }\n\n  function onDismiss() {\n    undoWorkingFilters();\n    emit('dismiss');\n  }\n\n  const showShadow = ref(false);\n  const onScroll = throttle((event: Event) => {\n    if (!event.target) return;\n\n    if ((event.target as HTMLElement).scrollTop > 0) {\n      showShadow.value = true;\n    } else {\n      showShadow.value = false;\n    }\n  }, 500);\n\n  function onScrollEnd() {\n    setTimeout(() => {\n      showShadow.value = false;\n    }, 2000);\n  }\n</script>\n\n<template>\n  <Dropdown\n    ref=\"dropdownRef\"\n    align=\"left\"\n    class=\"stash-filter-dropdown\"\n    data-test=\"stash-filter-dropdown\"\n    fluid-content\n    close-manually\n    content-class=\"tw-w-full tw-max-w-[600px] tw-h-full tw-max-h-[400px]\"\n    :offset=\"{ y: 6 }\"\n    @dismiss=\"onDismiss\"\n  >\n    <template #toggle>\n      <FilterChip\n        class=\"tw-rounded-full\"\n        has-dropdown\n        :is-dropdown-open=\"isOpen\"\n        :filter-count=\"activeFiltersCounts[props.group]\"\n        :is-selected=\"isOpen\"\n        @click=\"onToggleButtonClick\"\n      >\n        {{ props.label }}\n      </FilterChip>\n    </template>\n    <template #default>\n      <div class=\"tw-flex tw-h-full tw-flex-col tw-rounded\">\n        <div class=\"tw-relative tw-grow tw-overflow-hidden tw-rounded-t\">\n          <div class=\"tw-h-full tw-overflow-auto tw-p-3.5\" @scroll=\"onScroll\" @scrollend=\"onScrollEnd\">\n            <slot></slot>\n          </div>\n          <Transition name=\"fade\">\n            <div\n              v-if=\"showShadow\"\n              class=\"\n                tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-h-[20px] tw-bg-scroll-shadow\n              \"\n            ></div>\n          </Transition>\n        </div>\n\n        <footer\n          class=\"\n            tw-flex\n            tw-justify-end\n            tw-gap-6\n            tw-rounded-b\n            tw-border\n            tw-border-solid\n            tw-border-x-ice-100\n            tw-border-b-ice-100\n            tw-border-t-ice-200\n            tw-bg-ice-100\n            tw-p-3.5\n          \"\n        >\n          <Button\n            v-if=\"activeFiltersCounts[props.group]\"\n            secondary\n            class=\"tw-min-w-[100px]\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button class=\"tw-min-w-[100px]\" :disabled=\"isDataViewLoading\" @click=\"handleApplyClick\">\n            {{ t('ll.apply') }}\n          </Button>\n        </footer>\n      </div>\n    </template>\n  </Dropdown>\n</template>\n"],"names":["isDataViewLoading","inject","DATA_VIEW_INJECTION","dataViewFiltersUtils","DATA_VIEW_FILTERS_UTILS_INJECTION","applyFilters","resetFilterGroup","activeFiltersCounts","undoWorkingFilters","dropdownRef","ref","isOpen","computed","_a","onToggleButtonClick","wasOpen","emit","handleResetClick","props","handleApplyClick","preventDismiss","_b","onDismiss","showShadow","onScroll","throttle","event","onScrollEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BQ,EAAE,WAAWA,MAAsBC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE/FC,IAAuBF,EAAOG,EAAkC,GAAG;AAErE,QAAA,EAACD,KAAA,QAAAA,EAAsB;AACzB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAIJ,UAAM,EAAE,cAAAE,GAAc,kBAAAC,GAAkB,qBAAAC,GAAqB,oBAAAC,MAC3DL,EAAqB,oBAEjBM,IAAcC,KACdC,IAASC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAY,UAAZ,gBAAAI,EAAmB;AAAA,KAAQ;AAEzD,aAASC,IAAsB;;AAC7B,YAAMC,IAAUJ,EAAO;AAEvB,OAAAE,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB,UAEfE,MACiBP,KACnBQ,EAAK,SAAS;AAAA,IAElB;AAEA,aAASC,IAAmB;;AAC1B,MAAAX,EAAiBY,EAAM,KAAK,GAC5BF,EAAK,OAAO,IACZH,IAAAJ,EAAY,UAAZ,QAAAI,EAAmB;AAAA,IACrB;AAEA,mBAAeM,IAAmB;;AAC1B,YAAA,EAAE,gBAAAC,MAAoB,QAAMP,IAAAK,EAAM,YAAN,gBAAAL,EAAA,KAAAK,OAAsBb,EAAa,KAAK;AAE1E,MAAKe,MACHC,IAAAZ,EAAY,UAAZ,QAAAY,EAAmB;AAAA,IAEvB;AAEA,aAASC,IAAY;AACA,MAAAd,KACnBQ,EAAK,SAAS;AAAA,IAChB;AAEM,UAAAO,IAAab,EAAI,EAAK,GACtBc,IAAWC,EAAS,CAACC,MAAiB;AAC1C,MAAKA,EAAM,WAENA,EAAM,OAAuB,YAAY,IAC5CH,EAAW,QAAQ,KAEnBA,EAAW,QAAQ;AAAA,OAEpB,GAAG;AAEN,aAASI,IAAc;AACrB,iBAAW,MAAM;AACf,QAAAJ,EAAW,QAAQ;AAAA,SAClB,GAAI;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -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-475832fe.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
 import y from "./FilterChip.js";
 import "lodash-es/get";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
 import "./Icon.js";

package/dist/Filters.js

@@ -18,13 +18,14 @@ import "lodash-es/get";
 import "./isDefined-2ce6cde4.js";
 import "lodash-es/round";
 import "./utils/storage.js";
+import "@leaflink/snitch";
 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-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "lodash-es/uniqueId";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js";
+import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
 import "./utils/createValidDate.js";
 import "./index-5e5945a9.js";
 import "./index-fe8d3765.js";
@@ -37,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-475832fe.js";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
+import "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "./useSearch.js";
@@ -341,8 +342,8 @@ function ce(l, r, o, i, t, s) {
 }
 const de = {
   $style: ie
-}, rt = /* @__PURE__ */ le(oe, [["render", ce], ["__cssModules", de]]);
+}, at = /* @__PURE__ */ le(oe, [["render", ce], ["__cssModules", de]]);
 export {
-  rt as default
+  at as default
 };
 //# sourceMappingURL=Filters.js.map