@leaflink/stash 50.0.5 → 50.0.7

package/dist/Field.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
+import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
 export {
   f as default
 };

package/dist/Field.vue.d.ts

@@ -42,6 +42,7 @@ isRequired: boolean;
 label: undefined;
 showOptionalInLabel: boolean;
 fieldset: boolean;
+isDisabled: boolean;
 disabled: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps>, {
 addBottomSpace: boolean;
@@ -53,6 +54,7 @@ isRequired: boolean;
 label: undefined;
 showOptionalInLabel: boolean;
 fieldset: boolean;
+isDisabled: boolean;
 disabled: boolean;
 }>>> & Readonly<{}>, {
 disabled: boolean;
@@ -60,6 +62,7 @@ fieldset: boolean;
 label: string;
 id: string;
 isRequired: boolean;
+isDisabled: boolean;
 addBottomSpace: boolean;
 errorText: string;
 hintText: string;
@@ -71,6 +74,8 @@ showOptionalInLabel: boolean;
         fieldErrorId: string;
         hasError: boolean;
         isRequired: boolean;
+        isReadOnly: boolean;
+        disabled: boolean;
         labelId: string;
         showOptionalInLabel: boolean;
     }): any;
@@ -122,6 +127,12 @@ export declare interface FieldProps {
     /**
      * Indicates whether the field is disabled.
      */
+    isDisabled?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     *
+     * @deprecated Use `isDisabled` instead.
+     */
     disabled?: boolean;
 }
 

package/dist/Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js

@@ -0,0 +1,88 @@
+import { defineComponent as B, useAttrs as I, useSlots as T, computed as t, openBlock as a, createBlock as c, resolveDynamicComponent as R, mergeProps as O, unref as i, withCtx as b, createTextVNode as k, toDisplayString as o, createCommentVNode as m, renderSlot as w, createElementBlock as r } from "vue";
+import n from "lodash-es/uniqueId";
+import { _ as q } from "./Label.vue_vue_type_script_setup_true_lang-C4JKdqvC.js";
+const D = ["id"], E = {
+  key: 2,
+  class: "stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, S = {
+  key: 3,
+  class: "stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, L = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "Field",
+  props: {
+    addBottomSpace: { type: Boolean, default: !1 },
+    errorText: { default: void 0 },
+    hintText: { default: void 0 },
+    id: { default: void 0 },
+    errorId: { default: void 0 },
+    isReadOnly: { type: Boolean },
+    isRequired: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    showOptionalInLabel: { type: Boolean, default: !1 },
+    fieldset: { type: Boolean, default: !1 },
+    isDisabled: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(y) {
+    const e = y, v = I(), l = T(), f = t(() => e.id || n("stash-field-")), h = t(() => e.errorId || n("stash-field-error-")), u = t(() => n("stash-field-label-")), d = t(() => !!e.errorText), x = t(() => e.fieldset ? "fieldset" : "div"), _ = t(() => {
+      const { placeholder: s, ...p } = v;
+      return p;
+    });
+    return (s, p) => (a(), c(R(x.value), O({
+      "data-test": "stash-field",
+      class: ["stash-field", [
+        { "tw-p-0": e.fieldset },
+        { "tw-mb-9": e.addBottomSpace && !e.errorText && !e.hintText && !i(l).hint },
+        { "tw-mb-4": e.addBottomSpace && (e.errorText || e.hintText || i(l).hint) },
+        { "stash-field--disabled": e.isDisabled || e.disabled },
+        { "stash-field--is-read-only": e.isReadOnly },
+        { "stash-field--is-required": e.isRequired },
+        { "stash-field--has-error": d.value }
+      ]]
+    }, _.value), {
+      default: b(() => [
+        e.label ? (a(), c(q, {
+          key: 0,
+          id: u.value,
+          for: f.value,
+          "has-error": d.value,
+          "is-required": s.isRequired,
+          "show-optional": e.showOptionalInLabel,
+          legend: e.fieldset,
+          disabled: e.isDisabled || e.disabled
+        }, {
+          default: b(() => [
+            k(o(e.label), 1)
+          ]),
+          _: 1
+        }, 8, ["id", "for", "has-error", "is-required", "show-optional", "legend", "disabled"])) : m("", !0),
+        w(s.$slots, "default", {
+          fieldId: f.value,
+          fieldErrorId: h.value,
+          hasError: d.value,
+          isRequired: s.isRequired,
+          isReadOnly: e.isReadOnly,
+          disabled: e.isDisabled || e.disabled,
+          labelId: u.value,
+          showOptionalInLabel: e.showOptionalInLabel
+        }),
+        e.errorText ? (a(), r("span", {
+          key: 1,
+          id: h.value,
+          class: "stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500",
+          "data-test": "stash-field-error"
+        }, o(e.errorText), 9, D)) : e.hintText && !e.isReadOnly ? (a(), r("span", E, o(e.hintText), 1)) : i(l).hint && !e.isReadOnly ? (a(), r("div", S, [
+          w(s.$slots, "hint")
+        ])) : m("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  L as _
+};
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js.map

package/dist/Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n\n    /**\n     * Indicates whether the field is disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Indicates whether the field is disabled.\n     *\n     * @deprecated Use `isDisabled` instead.\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n    isDisabled: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.isDisabled || props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n      { 'stash-field--is-required': props.isRequired },\n      { 'stash-field--has-error': hasError },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.isDisabled || props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.isDisabled || props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAaRC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAE/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,116 +1,127 @@
-import { defineComponent as $, computed as p, openBlock as u, createBlock as C, withCtx as i, 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 A, createCommentVNode as B, Fragment as E, renderList as K } from "vue";
-import { t as N } from "./locale.js";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
-import y from "./FilterChip.js";
-const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"], I = ["id", "value"], L = ["for"], z = /* @__PURE__ */ $({
+import { defineComponent as S, computed as m, openBlock as r, createBlock as $, mergeProps as C, withCtx as d, createElementVNode as s, createElementBlock as u, withDirectives as f, vModelCheckbox as v, createVNode as y, withKeys as h, createTextVNode as _, toDisplayString as x, unref as A, createCommentVNode as E, Fragment as K, renderList as N } from "vue";
+import { t as O } from "./locale.js";
+import { _ as D } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import b from "./FilterChip.js";
+const F = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, I = ["id"], T = ["for"], L = ["id", "value"], R = ["for"], j = /* @__PURE__ */ S({
   __name: "FilterSelect",
   props: {
     name: {},
-    label: {},
     options: {},
     modelValue: {},
-    canSelectAll: { type: Boolean, default: !1 }
+    canSelectAll: { type: Boolean, default: !1 },
+    addBottomSpace: { type: Boolean },
+    errorText: {},
+    hintText: {},
+    id: {},
+    errorId: {},
+    isReadOnly: { type: Boolean },
+    isRequired: { type: Boolean },
+    label: {},
+    showOptionalInLabel: { type: Boolean },
+    fieldset: { type: Boolean },
+    isDisabled: { type: Boolean },
+    disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(V, { emit: g }) {
-    const e = V, c = g, n = p({
+  setup(B, { emit: V }) {
+    const e = B, c = V, o = m({
       get() {
         return e.modelValue;
       },
-      set(l) {
-        c("update:modelValue", l);
+      set(t) {
+        c("update:modelValue", t);
       }
-    }), o = p({
+    }), n = m({
       get() {
         return e.options.length === e.modelValue.length;
       },
-      set(l) {
-        c("update:modelValue", l ? e.options.map((a) => a.value) : []);
+      set(t) {
+        c("update:modelValue", t ? e.options.map((a) => a.value) : []);
       }
     });
-    function r(l) {
-      return `${e.name}--${l.value}`;
+    function i(t) {
+      return `${e.name}--${t.value}`;
     }
-    function w(l) {
-      return e.modelValue.includes(l.value);
+    function g(t) {
+      return e.modelValue.includes(t.value);
     }
-    function k(l) {
-      const a = n.value.filter((t) => t !== l);
-      a.length === n.value.length && a.push(l), n.value = a;
+    function w(t) {
+      const a = o.value.filter((l) => l !== t);
+      a.length === o.value.length && a.push(t), o.value = a;
     }
-    function S() {
-      o.value = !o.value;
+    function k() {
+      n.value = !n.value;
     }
-    return (l, a) => (u(), C(F, {
+    return (t, a) => (r(), $(D, C(e, {
       class: "stash-filter-select",
-      fieldset: "",
-      label: e.label
-    }, {
-      default: i(() => [
-        s("div", D, [
-          e.canSelectAll ? (u(), d("div", {
+      "data-test": "stash-filter-select",
+      fieldset: ""
+    }), {
+      default: d(() => [
+        s("div", F, [
+          e.canSelectAll ? (r(), u("div", {
             key: `${e.name}--all`
           }, [
             f(s("input", {
               id: `${e.name}--all`,
-              "onUpdate:modelValue": a[0] || (a[0] = (t) => o.value = t),
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
               value: "all"
-            }, null, 8, O), [
-              [v, o.value]
+            }, null, 8, I), [
+              [v, n.value]
             ]),
             s("label", {
               for: `${e.name}--all`
             }, [
-              _(y, {
-                "is-selected": o.value,
+              y(b, {
+                "is-selected": n.value,
                 tabindex: "0",
-                onKeypress: h(S, ["enter"])
+                onKeypress: h(k, ["enter"])
               }, {
-                default: i(() => [
-                  b(x(A(N)("ll.all")), 1)
+                default: d(() => [
+                  _(x(A(O)("ll.all")), 1)
                 ]),
                 _: 1
               }, 8, ["is-selected"])
-            ], 8, U)
-          ])) : B("", !0),
-          (u(!0), d(E, null, K(e.options, (t) => (u(), d("div", {
-            key: r(t)
+            ], 8, T)
+          ])) : E("", !0),
+          (r(!0), u(K, null, N(e.options, (l) => (r(), u("div", {
+            key: i(l)
           }, [
             f(s("input", {
-              id: r(t),
-              "onUpdate:modelValue": a[1] || (a[1] = (m) => n.value = m),
+              id: i(l),
+              "onUpdate:modelValue": a[1] || (a[1] = (p) => o.value = p),
               class: "tw-sr-only",
               tabindex: "-1",
               type: "checkbox",
-              value: t.value
-            }, null, 8, I), [
-              [v, n.value]
+              value: l.value
+            }, null, 8, L), [
+              [v, o.value]
             ]),
             s("label", {
-              for: r(t)
+              for: i(l)
             }, [
-              _(y, {
-                "is-selected": w(t),
+              y(b, {
+                "is-selected": g(l),
                 tabindex: "0",
-                onKeypress: h((m) => k(t.value), ["enter"])
+                onKeypress: h((p) => w(l.value), ["enter"])
               }, {
-                default: i(() => [
-                  b(x(t.label), 1)
+                default: d(() => [
+                  _(x(l.label), 1)
                 ]),
                 _: 2
               }, 1032, ["is-selected", "onKeypress"])
-            ], 8, L)
+            ], 8, R)
           ]))), 128))
         ])
       ]),
       _: 1
-    }, 8, ["label"]));
+    }, 16));
   }
 });
 export {
-  z as default
+  j 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 = defineEmits<{\n    (e: 'update:modelValue', value: FilterSelectModelValue): void;\n  }>();\n\n  /**\n   * @see: https://vuejs.org/guide/components/v-model.html#component-v-model\n   */\n  const selected = computed({\n    get() {\n      return props.modelValue;\n    },\n    set(value) {\n      emit('update:modelValue', value);\n    },\n  });\n\n  const isAllSelected = computed({\n    get() {\n      return props.options.length === props.modelValue.length;\n    },\n    set(isChecked) {\n      emit('update:modelValue', isChecked ? props.options.map((option) => option.value) : []);\n    },\n  });\n\n  function getOptionId(option: FilterSelectOption) {\n    return `${props.name}--${option.value}`;\n  }\n\n  function isOptionSelected(option: FilterSelectOption) {\n    return props.modelValue.includes(option.value);\n  }\n\n  function onEnter(enteredValue: FilterSelectOption['value']) {\n    const newSelected = selected.value.filter((value) => value !== enteredValue);\n\n    if (newSelected.length === selected.value.length) {\n      newSelected.push(enteredValue);\n    }\n\n    selected.value = newSelected;\n  }\n\n  function onEnterAll() {\n    isAllSelected.value = !isAllSelected.value;\n  }\n</script>\n\n<template>\n  <Field class=\"stash-filter-select\" fieldset :label=\"props.label\">\n    <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <label :for=\"`${props.name}--all`\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <label :for=\"getOptionId(option)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["props","__props","emit","__emit","selected","computed","value","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;AA8BE,UAAMA,IAAQC,GAIRC,IAAOC,GAOPC,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAJ,EAAK,qBAAqBI,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOL,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAIQ,GAAW;AACR,QAAAN,EAAA,qBAAqBM,IAAYR,EAAM,QAAQ,IAAI,CAACS,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGT,EAAM,IAAI,KAAKS,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOT,EAAM,WAAW,SAASS,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcV,EAAS,MAAM,OAAO,CAACE,MAAUA,MAAUO,CAAY;AAE3E,MAAIC,EAAY,WAAWV,EAAS,MAAM,UACxCU,EAAY,KAAKD,CAAY,GAG/BT,EAAS,QAAQU;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, { type FieldProps } from '../Field/Field.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import { FilterSelectModelValue, FilterSelectOption } from './FilterSelect.types';\n\n  export interface FilterSelectProps extends FieldProps {\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    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 = 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 v-bind=\"props\" class=\"stash-filter-select\" data-test=\"stash-filter-select\" fieldset>\n    <div class=\"tw-flex tw-flex-wrap tw-gap-1.5\">\n      <div v-if=\"props.canSelectAll\" :key=\"`${props.name}--all`\">\n        <input\n          :id=\"`${props.name}--all`\"\n          v-model=\"isAllSelected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          value=\"all\"\n        />\n        <label :for=\"`${props.name}--all`\">\n          <FilterChip :is-selected=\"isAllSelected\" tabindex=\"0\" @keypress.enter=\"onEnterAll\">\n            {{ t('ll.all') }}\n          </FilterChip>\n        </label>\n      </div>\n      <div v-for=\"option in props.options\" :key=\"getOptionId(option)\">\n        <input\n          :id=\"getOptionId(option)\"\n          v-model=\"selected\"\n          class=\"tw-sr-only\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n          :value=\"option.value\"\n        />\n        <label :for=\"getOptionId(option)\">\n          <FilterChip :is-selected=\"isOptionSelected(option)\" tabindex=\"0\" @keypress.enter=\"onEnter(option.value)\">\n            {{ option.label }}\n          </FilterChip>\n        </label>\n      </div>\n    </div>\n  </Field>\n</template>\n"],"names":["props","__props","emit","__emit","selected","computed","value","isAllSelected","isChecked","option","getOptionId","isOptionSelected","onEnter","enteredValue","newSelected","onEnterAll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAIRC,IAAOC,GAOPC,IAAWC,EAAS;AAAA,MACxB,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAJ,EAAK,qBAAqBI,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOL,EAAM,QAAQ,WAAWA,EAAM,WAAW;AAAA,MACnD;AAAA,MACA,IAAIQ,GAAW;AACR,QAAAN,EAAA,qBAAqBM,IAAYR,EAAM,QAAQ,IAAI,CAACS,MAAWA,EAAO,KAAK,IAAI,CAAE,CAAA;AAAA,MACxF;AAAA,IAAA,CACD;AAED,aAASC,EAAYD,GAA4B;AAC/C,aAAO,GAAGT,EAAM,IAAI,KAAKS,EAAO,KAAK;AAAA,IACvC;AAEA,aAASE,EAAiBF,GAA4B;AACpD,aAAOT,EAAM,WAAW,SAASS,EAAO,KAAK;AAAA,IAC/C;AAEA,aAASG,EAAQC,GAA2C;AAC1D,YAAMC,IAAcV,EAAS,MAAM,OAAO,CAACE,MAAUA,MAAUO,CAAY;AAE3E,MAAIC,EAAY,WAAWV,EAAS,MAAM,UACxCU,EAAY,KAAKD,CAAY,GAG/BT,EAAS,QAAQU;AAAA,IACnB;AAEA,aAASC,IAAa;AACN,MAAAR,EAAA,QAAQ,CAACA,EAAc;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.vue.d.ts

@@ -39,6 +39,59 @@ canSelectAll: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
+declare interface FieldProps {
+    /**
+     * Adds spacing under the field that is consistent whether hint/error text is displayed.
+     */
+    addBottomSpace?: boolean;
+    /**
+     * Error text to display. Replaces `hintText` (if provided) & adds error styling.
+     */
+    errorText?: string;
+    /**
+     * Displays text below the input; hidden when the isReadOnly prop is truthy.
+     */
+    hintText?: string;
+    /**
+     * ID for the Label and Input; must be unique
+     */
+    id?: string;
+    /**
+     * ID for the error text element; useful for aria-errormessage
+     */
+    errorId?: string;
+    /**
+     * Whether it's a readonly field.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Label to render above the input.
+     */
+    label?: string;
+    /**
+     * Show "(optional)" to the right of the label text
+     */
+    showOptionalInLabel?: boolean;
+    /**
+     * Indicates wheter the field is a fieldset or not
+     */
+    fieldset?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     *
+     * @deprecated Use `isDisabled` instead.
+     */
+    disabled?: boolean;
+}
+
 export declare type FilterSelectModelValue = Array<FilterSelectOption['value']>;
 
 export declare interface FilterSelectOption {
@@ -46,12 +99,11 @@ export declare interface FilterSelectOption {
     value: string;
 }
 
-export declare interface FilterSelectProps {
+export declare interface FilterSelectProps extends FieldProps {
     /**
      * The name attribute for the `<input>` elements. It is also used as a unique field to differentiate FilterSelect instances.
      */
     name: string;
-    label: string;
     options: FilterSelectOption[];
     modelValue: FilterSelectModelValue;
     /**