@leaflink/stash 50.0.6 → 50.0.8

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--tBfZB2K.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;
     /**