bitboss-ui 2.0.5 → 2.0.8

package/dist/index44.js

@@ -1,122 +1,212 @@
-import { defineComponent as w, ref as g, computed as u, onMounted as y, watch as V, nextTick as k, openBlock as x, createBlock as B, normalizeClass as $, withCtx as r, renderSlot as t, createVNode as i, createElementVNode as C, mergeProps as T } from "vue";
-import v from "./index220.js";
-import E from "./index218.js";
+import { defineComponent as Y, ref as r, computed as k, toRef as B, openBlock as f, createBlock as C, normalizeClass as x, withCtx as a, renderSlot as u, createVNode as O, unref as v, createElementVNode as $, createElementBlock as ee, Fragment as oe, createCommentVNode as te, withDirectives as ne, mergeProps as le, isRef as ae, withModifiers as s, withKeys as y, vModelDynamic as ie, nextTick as re } from "vue";
+/* empty css       */
+/* empty css       */
+/* empty css       */
+import ue from "./index124.js";
 /* empty css         */
-import G from "./index122.js";
+import { isNotNil as se } from "./index131.js";
+import { last as de } from "./index209.js";
+import { useOptions as pe } from "./index232.js";
+import ce from "./index237.js";
 /* empty css         */
-const M = ["id", "aria-describedby", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "rows", "value"], z = /* @__PURE__ */ w({
-  __name: "BaseTextarea",
+import me from "./index239.js";
+/* empty css         */
+import fe from "./index213.js";
+/* empty css         */
+import ve from "./index215.js";
+const ye = { class: "bb-base-tag__input-container" }, be = ["id", "aria-describedby", "autocomplete", "autofocus", "disabled", "placeholder", "readonly", "required", "onKeydown"], qe = /* @__PURE__ */ Y({
+  __name: "BaseTag",
   props: {
     "append:icon": {},
     ariaDescribedby: {},
     autocomplete: {},
-    autoGrow: { type: Boolean },
     autofocus: {},
+    comma: { type: Boolean },
     disabled: { type: Boolean },
+    divider: { default: "Enter" },
     hasErrors: { type: Boolean },
     id: {},
     loading: { type: Boolean },
     modelValue: {},
+    multiple: { type: Boolean, default: !0 },
     name: {},
     placeholder: {},
     "prepend:icon": {},
     readonly: {},
-    required: { type: Boolean },
-    rows: {}
+    required: { type: Boolean }
   },
-  emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
-  setup(d, { emit: p }) {
-    const o = d, a = p;
-    if (o.rows && o.autoGrow)
-      throw new Error(
-        "Textarea: You cannot set rows and auto-grow attributes together. You either use rows and let the user resize or define a minimum height in CSS with auto-grow."
-      );
-    const n = g(null), c = u(() => ({
-      "bb-base-textarea": !0,
-      "bb-base-textarea--auto-grow": o.autoGrow,
-      "bb-base-textarea--disabled": o.disabled,
-      "bb-base-textarea--errors": o.hasErrors,
-      "bb-base-textarea--loading": o.loading,
-      "bb-base-textarea--readonly": o.readonly
-    })), m = u(
-      () => o.modelValue ? o.modelValue : ""
-    );
-    y(() => {
-      o.autoGrow && o.modelValue && l();
-    }), V(
-      () => o.modelValue,
-      () => {
-        o.autoGrow && k(l);
+  emits: ["blur", "change", "click", "duplicate", "focus", "inactive", "input", "keydown", "keyup", "update:modelValue"],
+  setup(I, { emit: D }) {
+    const o = I, l = D;
+    if (o.multiple && !Array.isArray(o.modelValue))
+      throw new Error('Multiple is set to "true" but modelValue is not an array.');
+    const b = r(null), T = r(null), L = k(() => o.placeholder), V = r(null), w = r(null), i = k(
+      () => o.comma ? V.value : w.value
+    ), d = r(null), E = () => {
+      d.value instanceof HTMLInputElement && d.value.focus();
+    }, K = !o.multiple && se(o.modelValue) || o.multiple && !!o.modelValue.length, N = r([]), {
+      query: t,
+      alignQueryToState: q,
+      addCurrentQueryToManualItems: A,
+      selectedOptions: p,
+      selectOption: M,
+      unselectOption: P,
+      valueIsSelected: _,
+      manualItems: S
+    } = pe({
+      emit: l,
+      itemText: void 0,
+      itemValue: void 0,
+      modelValue: B(o, "modelValue"),
+      multiple: o.multiple,
+      resetQueryOnOptionSelected: !0,
+      stash: !1,
+      items: B(o, "modelValue"),
+      enforceCoherence: !1,
+      prefill: K,
+      modelValueDebounceTime: 0,
+      dependencies: N,
+      depsDebounceTime: 0,
+      queryDebounceTime: 0,
+      disabled: B(o, "disabled")
+    }), g = r(!1), F = () => {
+      g.value = !0;
+    }, H = () => {
+      g.value = !1, l("inactive");
+    }, h = k(() => !(o.readonly || o.disabled || !i.value && o.multiple)), Q = (e) => {
+      var n;
+      h.value && (!o.multiple || t.value || (e.preventDefault(), p.value.length && ((n = i.value) == null || n.focusPrevious())));
+    }, R = (e) => {
+      var n;
+      h.value && (!o.multiple || t.value || (e.preventDefault(), p.value.length && ((n = i.value) == null || n.focusNext())));
+    }, U = async () => {
+      var e, n;
+      !h.value || t.value || !p.value.length || ((e = i.value) != null && e.getHighlighted() && i.value.confirmOption(), await re(), (n = i.value) == null || n.focusPrevious());
+    }, z = () => {
+      var e;
+      (e = i.value) == null || e.blur();
+    }, Z = async (e) => {
+      var n;
+      if (l("keyup", e), o.readonly || o.disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (/^[A-Za-z0-9]$/.test(e.key) && ((n = i.value) == null || n.blur()), e.key === o.divider || e.key === "Unidentified" && t.value.includes(o.divider)) {
+        if (o.divider.length === 1 && t.value.includes(o.divider)) {
+          const m = t.value.split(o.divider)[0];
+          if (m)
+            t.value = m;
+          else {
+            t.value = "";
+            return;
+          }
+        }
+        if (!t.value) return;
+        _(t.value) ? (l("duplicate", t.value), t.value = "") : (A(), j(de(S.value)));
       }
-    );
-    function f(e) {
-      if (e.stopPropagation(), e.target instanceof HTMLTextAreaElement) {
-        let s = e.target.value;
-        a("input", e), a("update:modelValue", s || null);
+    }, j = (e) => {
+      M(e), E(), o.multiple || close();
+    }, G = (e) => {
+      P(e), E();
+    }, J = (e) => {
+      l("focus", e), F(), document.addEventListener("click", c), document.addEventListener("focusin", c);
+    }, W = (e) => {
+      l("click", e), !(o.disabled || o.readonly) && d.value instanceof HTMLElement && d.value.focus();
+    }, c = async (e) => {
+      if (e.target instanceof Node && b.value && !b.value.$el.contains(e.target)) {
+        close(), H(), document.removeEventListener("click", c), document.removeEventListener("focusin", c), q();
+        return;
       }
-    }
-    function b(e) {
-      e.stopPropagation(), e.target instanceof HTMLTextAreaElement && a("keydown", e);
-    }
-    const h = {
-      onBlur: (e) => a("blur", e),
-      onChange: (e) => a("change", e),
-      onClick: (e) => a("click", e),
-      onFocus: (e) => a("focus", e),
-      onMousedown: (e) => a("mousedown", e),
-      onMouseup: (e) => a("mouseup", e)
+    }, X = {
+      onBlur: (e) => l("blur", e),
+      onChange: (e) => l("change", e),
+      onKeydown: (e) => l("keydown", e),
+      onInput: (e) => l("input", e)
     };
-    function l() {
-      n.value && (n.value.style.height = "0px", n.value.style.height = `${n.value.scrollHeight}px`);
-    }
-    return (e, s) => (x(), B(v, {
-      class: $(c.value)
+    return (e, n) => (f(), C(ve, {
+      ref_key: "outerContainer",
+      ref: b,
+      class: x({
+        "bb-base-tag": !0,
+        "bb-base-tag--active": g.value,
+        "bb-base-tag--disabled": e.disabled,
+        "bb-base-tag--loading": e.loading,
+        "bb-base-tag--errors": e.hasErrors,
+        "bb-base-tag--readonly": e.readonly
+      }),
+      onClick: W
     }, {
-      "prepend-outer": r(() => [
-        t(e.$slots, "prepend-outer")
+      "prepend-outer": a(() => [
+        u(e.$slots, "prepend-outer")
       ]),
-      "append-outer": r(() => [
-        t(e.$slots, "append-outer")
+      "append-outer": a(() => [
+        u(e.$slots, "append-outer")
       ]),
-      default: r(() => [
-        i(E, {
+      default: a(() => [
+        O(fe, {
+          ref_key: "innerContainer",
+          ref: T,
           "append:icon": o["append:icon"],
           "prepend:icon": o["prepend:icon"]
         }, {
-          prepend: r(() => [
-            t(e.$slots, "prepend")
+          prepend: a(() => [
+            u(e.$slots, "prepend")
           ]),
-          prefix: r(() => [
-            t(e.$slots, "prefix")
+          prefix: a(() => [
+            u(e.$slots, "prefix")
           ]),
-          append: r(() => [
-            t(e.$slots, "append")
+          append: a(() => [
+            u(e.$slots, "append")
           ]),
-          suffix: r(() => [
-            t(e.$slots, "suffix")
+          suffix: a(() => [
+            u(e.$slots, "suffix")
           ]),
-          default: r(() => [
-            i(G, null, {
-              default: r(() => [
-                C("textarea", T({
-                  id: e.id,
-                  ref_key: "textarea",
-                  ref: n,
-                  "aria-describedby": e.ariaDescribedby,
-                  autocomplete: e.autocomplete,
-                  autofocus: e.autofocus,
-                  class: "bb-base-textarea__input",
-                  disabled: e.disabled,
-                  name: e.name,
-                  placeholder: e.placeholder,
-                  readonly: e.readonly,
-                  required: e.required,
-                  rows: e.rows,
-                  value: m.value
-                }, h, {
-                  onInput: f,
-                  onKeydown: b
-                }), null, 16, M)
+          default: a(() => [
+            O(v(ue), { tag: "span" }, {
+              default: a(() => [
+                $("span", ye, [
+                  e.multiple ? (f(), ee(oe, { key: 0 }, [
+                    e.comma ? (f(), C(me, {
+                      key: 0,
+                      ref_key: "commaBox",
+                      ref: V,
+                      options: v(p)
+                    }, null, 8, ["options"])) : (f(), C(ce, {
+                      key: 1,
+                      ref_key: "chipsBox",
+                      ref: w,
+                      options: v(p),
+                      "onOption:unselected": G
+                    }, null, 8, ["options"]))
+                  ], 64)) : te("", !0),
+                  ne($("input", le({
+                    id: e.id,
+                    ref_key: "input",
+                    ref: d
+                  }, X, {
+                    "onUpdate:modelValue": n[0] || (n[0] = (m) => ae(t) ? t.value = m : null),
+                    "aria-describedby": e.ariaDescribedby,
+                    autocomplete: e.autocomplete,
+                    autofocus: e.autofocus,
+                    class: "bb-base-tag__text-input",
+                    disabled: e.disabled,
+                    "enter-key-hint": "next",
+                    placeholder: L.value,
+                    readonly: e.readonly,
+                    required: e.required && !e.multiple || e.multiple && !e.modelValue.length,
+                    type: "text",
+                    onFocus: s(J, ["stop"]),
+                    onKeydown: [
+                      y(s(U, ["stop"]), ["delete"]),
+                      y(s(Q, ["stop"]), ["left"]),
+                      y(s(z, ["stop", "prevent"]), ["esc"]),
+                      y(s(R, ["stop"]), ["right"])
+                    ],
+                    onKeyup: s(Z, ["stop"])
+                  }), null, 16, be), [
+                    [ie, v(t)]
+                  ])
+                ])
               ]),
               _: 1
             })
@@ -129,6 +219,6 @@ const M = ["id", "aria-describedby", "autocomplete", "autofocus", "disabled", "n
   }
 });
 export {
-  z as default
+  qe as default
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/BaseTextarea/BaseTextarea.vue"],"sourcesContent":["<template>\n\t<CommonInputOuterContainer :class=\"classes\">\n\t\t<template #prepend-outer><slot name=\"prepend-outer\"></slot></template>\n\t\t<CommonInputInnerContainer\n\t\t\t:append:icon=\"props['append:icon']\"\n\t\t\t:prepend:icon=\"props['prepend:icon']\"\n\t\t>\n\t\t\t<template #prepend><slot name=\"prepend\" /></template>\n\t\t\t<template #prefix><slot name=\"prefix\" /></template>\n\t\t\t<BbSmoothHeight>\n\t\t\t\t<textarea\n\t\t\t\t\t:id=\"id\"\n\t\t\t\t\tref=\"textarea\"\n\t\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\t\t:autocomplete=\"autocomplete\"\n\t\t\t\t\t:autofocus=\"autofocus\"\n\t\t\t\t\t:class=\"'bb-base-textarea__input'\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:name=\"name\"\n\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t\t:required=\"required\"\n\t\t\t\t\t:rows=\"rows\"\n\t\t\t\t\t:value=\"modelValueWithDefault\"\n\t\t\t\t\tv-bind=\"eventListeners\"\n\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t@keydown=\"onKeydown\"\n\t\t\t\t></textarea>\n\t\t\t</BbSmoothHeight>\n\t\t\t<template #append><slot name=\"append\" /></template>\n\t\t\t<template #suffix><slot name=\"suffix\" /></template>\n\t\t</CommonInputInnerContainer>\n\t\t<template #append-outer><slot name=\"append-outer\"></slot></template>\n\t</CommonInputOuterContainer>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { HTMLAttributes, InputHTMLAttributes, Ref } from 'vue';\nimport CommonInputOuterContainer from '../CommonInputOuterContainer.vue';\nimport CommonInputInnerContainer from '../CommonInputInnerContainer.vue';\nimport BbSmoothHeight from '../BbSmoothHeight/BbSmoothHeight.vue';\n\nexport type BaseTextareaProps = {\n\t/**\n\t * Name of the icon to be added at the end of the input.\n\t */\n\t// eslint-disable-next-line vue/prop-name-casing\n\t'append:icon'?: string;\n\t/**\n\t * Guides to the browser as to the type of information expected in the field.\n\t */\n\tariaDescribedby?: InputHTMLAttributes['aria-describedby'];\n\t/**\n\t * Guides to the browser as to the type of information expected in the field.\n\t */\n\tautocomplete?: InputHTMLAttributes['autocomplete'];\n\n\t/**\n\t * Expands the textarea to match its content\n\t */\n\tautoGrow?: boolean;\n\n\t/**\n\t * Sets autofocus on page load.\n\t */\n\tautofocus?: InputHTMLAttributes['autofocus'];\n\n\t/**\n\t * Disables the component\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Define if the component should be in an error state.\n\t * It usually attaches a CSS class for styling purposes.\n\t */\n\thasErrors?: boolean;\n\n\t/**\n\t * The identifier of the component.\n\t */\n\tid?: HTMLAttributes['id'];\n\n\t/**\n\t * Sets the component in a loading state, usually triggering some visual styles.\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Used by v-model\n\t */\n\tmodelValue: string | null;\n\n\t/**\n\t * Defines the name of the input.\n\t */\n\tname?: InputHTMLAttributes['name'];\n\n\t/**\n\t * String displayed when there's no data.\n\t */\n\tplaceholder?: InputHTMLAttributes['placeholder'];\n\n\t/**\n\t * Name of the icon to be added at the start of the input.\n\t */\n\t// eslint-disable-next-line vue/prop-name-casing\n\t'prepend:icon'?: string;\n\n\t/**\n\t * Sets the input in a readonly state.\n\t */\n\treadonly?: InputHTMLAttributes['readonly'];\n\n\t/**\n\t * Sets the input as required.\n\t */\n\trequired?: boolean;\n\n\t/**\n\t * Sets the input in a readonly state.\n\t */\n\trows?: string | number;\n};\nconst props = defineProps<BaseTextareaProps>();\n\nexport type BaseTextareaEvents = {\n\t(e: 'blur', event: FocusEvent): void;\n\t(e: 'change', event: Event): void;\n\t(e: 'click', event: MouseEvent): void;\n\t(e: 'focus', event: FocusEvent): void;\n\t(e: 'input', event: Event): void;\n\t(e: 'keydown', event: KeyboardEvent): void;\n\t(e: 'mousedown', event: MouseEvent): void;\n\t(e: 'mouseup', event: MouseEvent): void;\n\t(e: 'update:modelValue', value: string | null): void;\n};\nconst emit = defineEmits<BaseTextareaEvents>();\n\nexport type BaseTextareaSlots = {\n\t'prepend-outer'?: (props: object) => any;\n\tprepend?: (props: object) => any;\n\tappend?: (props: object) => any;\n\t'append-outer'?: (props: object) => any;\n\tprefix?: (props: object) => any;\n\tsuffix?: (props: object) => any;\n};\n\ndefineSlots<BaseTextareaSlots>();\n\nif (props.rows && props.autoGrow) {\n\tthrow new Error(\n\t\t'Textarea: You cannot set rows and auto-grow attributes together. You either use rows and let the user resize or define a minimum height in CSS with auto-grow.'\n\t);\n}\n\nconst textarea: Ref<HTMLTextAreaElement | null> = ref(null);\n\nconst classes = computed(() => ({\n\t'bb-base-textarea': true,\n\t'bb-base-textarea--auto-grow': props.autoGrow,\n\t'bb-base-textarea--disabled': props.disabled,\n\t'bb-base-textarea--errors': props.hasErrors,\n\t'bb-base-textarea--loading': props.loading,\n\t'bb-base-textarea--readonly': props.readonly,\n}));\n\n// Allow modelvalue to be reset to null\nconst modelValueWithDefault = computed(() =>\n\tprops.modelValue ? props.modelValue : ''\n);\nonMounted(() => {\n\tif (props.autoGrow && props.modelValue) {\n\t\tcomputeTextareaHeight();\n\t}\n});\nwatch(\n\t() => props.modelValue,\n\t() => {\n\t\tif (props.autoGrow) {\n\t\t\tnextTick(computeTextareaHeight);\n\t\t}\n\t}\n);\n\nfunction onInput(event: Event): void {\n\t// Prevent enter from triggering smt else\n\tevent.stopPropagation();\n\tif (event.target instanceof HTMLTextAreaElement) {\n\t\tlet value = event.target.value;\n\t\temit('input', event);\n\t\temit('update:modelValue', value || null);\n\t}\n}\nfunction onKeydown(event: KeyboardEvent): void {\n\t// Prevent enter from triggering smt else\n\tevent.stopPropagation();\n\tif (event.target instanceof HTMLTextAreaElement) {\n\t\temit('keydown', event);\n\t}\n}\n\n/**\n * These events are just propagated\n */\nconst eventListeners = {\n\tonBlur: (event: FocusEvent) => emit('blur', event),\n\tonChange: (event: Event) => emit('change', event),\n\tonClick: (event: MouseEvent) => emit('click', event),\n\tonFocus: (event: FocusEvent) => emit('focus', event),\n\tonMousedown: (event: MouseEvent) => emit('mousedown', event),\n\tonMouseup: (event: MouseEvent) => emit('mouseup', event),\n};\n\n/* \nReset height and the apply scroll height otherwise it would not be able to shrink\n*/\nfunction computeTextareaHeight() {\n\tif (!textarea.value) return;\n\ttextarea.value.style.height = '0px';\n\n\ttextarea.value.style.height = `${textarea.value.scrollHeight}px`;\n}\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BaseTextarea';\n</style>\n"],"names":["props","__props","emit","__emit","textarea","ref","classes","computed","modelValueWithDefault","onMounted","computeTextareaHeight","watch","nextTick","onInput","event","value","onKeydown","eventListeners"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HA,UAAMA,IAAQC,GAaRC,IAAOC;AAaT,QAAAH,EAAM,QAAQA,EAAM;AACvB,YAAM,IAAI;AAAA,QACT;AAAA,MAAA;AAII,UAAAI,IAA4CC,EAAI,IAAI,GAEpDC,IAAUC,EAAS,OAAO;AAAA,MAC/B,oBAAoB;AAAA,MACpB,+BAA+BP,EAAM;AAAA,MACrC,8BAA8BA,EAAM;AAAA,MACpC,4BAA4BA,EAAM;AAAA,MAClC,6BAA6BA,EAAM;AAAA,MACnC,8BAA8BA,EAAM;AAAA,IACnC,EAAA,GAGIQ,IAAwBD;AAAA,MAAS,MACtCP,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA;AAEvC,IAAAS,EAAU,MAAM;AACX,MAAAT,EAAM,YAAYA,EAAM,cACLU;IACvB,CACA,GACDC;AAAA,MACC,MAAMX,EAAM;AAAA,MACZ,MAAM;AACL,QAAIA,EAAM,YACTY,EAASF,CAAqB;AAAA,MAEhC;AAAA,IAAA;AAGD,aAASG,EAAQC,GAAoB;AAGhC,UADJA,EAAM,gBAAgB,GAClBA,EAAM,kBAAkB,qBAAqB;AAC5C,YAAAC,IAAQD,EAAM,OAAO;AACzB,QAAAZ,EAAK,SAASY,CAAK,GACdZ,EAAA,qBAAqBa,KAAS,IAAI;AAAA,MACxC;AAAA,IACD;AACA,aAASC,EAAUF,GAA4B;AAE9C,MAAAA,EAAM,gBAAgB,GAClBA,EAAM,kBAAkB,uBAC3BZ,EAAK,WAAWY,CAAK;AAAA,IAEvB;AAKA,UAAMG,IAAiB;AAAA,MACtB,QAAQ,CAACH,MAAsBZ,EAAK,QAAQY,CAAK;AAAA,MACjD,UAAU,CAACA,MAAiBZ,EAAK,UAAUY,CAAK;AAAA,MAChD,SAAS,CAACA,MAAsBZ,EAAK,SAASY,CAAK;AAAA,MACnD,SAAS,CAACA,MAAsBZ,EAAK,SAASY,CAAK;AAAA,MACnD,aAAa,CAACA,MAAsBZ,EAAK,aAAaY,CAAK;AAAA,MAC3D,WAAW,CAACA,MAAsBZ,EAAK,WAAWY,CAAK;AAAA,IAAA;AAMxD,aAASJ,IAAwB;AAC5B,MAACN,EAAS,UACLA,EAAA,MAAM,MAAM,SAAS,OAE9BA,EAAS,MAAM,MAAM,SAAS,GAAGA,EAAS,MAAM,YAAY;AAAA,IAC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index44.js","sources":["../src/components/BaseTag/BaseTag.vue"],"sourcesContent":["<template>\n\t<CommonInputOuterContainer\n\t\tref=\"outerContainer\"\n\t\t:class=\"{\n\t\t\t'bb-base-tag': true,\n\t\t\t'bb-base-tag--active': active,\n\t\t\t'bb-base-tag--disabled': disabled,\n\t\t\t'bb-base-tag--loading': loading,\n\t\t\t'bb-base-tag--errors': hasErrors,\n\t\t\t'bb-base-tag--readonly': readonly,\n\t\t}\"\n\t\t@click=\"onOuterContainerClick\"\n\t>\n\t\t<template #prepend-outer><slot name=\"prepend-outer\"></slot></template>\n\t\t<CommonInputInnerContainer\n\t\t\tref=\"innerContainer\"\n\t\t\t:append:icon=\"props['append:icon']\"\n\t\t\t:prepend:icon=\"props['prepend:icon']\"\n\t\t>\n\t\t\t<template #prepend><slot name=\"prepend\" /></template>\n\t\t\t<template #prefix><slot name=\"prefix\" /></template>\n\t\t\t<BbSmoothHeight tag=\"span\">\n\t\t\t\t<span class=\"bb-base-tag__input-container\">\n\t\t\t\t\t<template v-if=\"multiple\">\n\t\t\t\t\t\t<template v-if=\"comma\">\n\t\t\t\t\t\t\t<CommaBox ref=\"commaBox\" :options=\"selectedOptions\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template v-else>\n\t\t\t\t\t\t\t<ChipsBox\n\t\t\t\t\t\t\t\tref=\"chipsBox\"\n\t\t\t\t\t\t\t\t:options=\"selectedOptions\"\n\t\t\t\t\t\t\t\t@option:unselected=\"onOptionUnselected\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<input\n\t\t\t\t\t\t:id=\"id\"\n\t\t\t\t\t\tref=\"input\"\n\t\t\t\t\t\tv-bind=\"eventListeners\"\n\t\t\t\t\t\tv-model=\"query\"\n\t\t\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\t\t\t:autocomplete=\"autocomplete\"\n\t\t\t\t\t\t:autofocus=\"autofocus\"\n\t\t\t\t\t\t:class=\"'bb-base-tag__text-input'\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\tenter-key-hint=\"next\"\n\t\t\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t\t\t:required=\"\n\t\t\t\t\t\t\t(required && !multiple) || (multiple && !modelValue.length)\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t:type=\"'text'\"\n\t\t\t\t\t\t@focus.stop=\"onInputFocus\"\n\t\t\t\t\t\t@keydown.stop.delete=\"onBackspace\"\n\t\t\t\t\t\t@keydown.stop.left=\"onArrowLeft\"\n\t\t\t\t\t\t@keydown.stop.prevent.esc=\"onEscape\"\n\t\t\t\t\t\t@keydown.stop.right=\"onArrowRight\"\n\t\t\t\t\t\t@keyup.stop=\"onInputKeyup\"\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</BbSmoothHeight>\n\t\t\t<template #append><slot name=\"append\" /></template>\n\t\t\t<template #suffix><slot name=\"suffix\" /></template>\n\t\t</CommonInputInnerContainer>\n\n\t\t<template #append-outer><slot name=\"append-outer\"></slot></template>\n\t</CommonInputOuterContainer>\n</template>\n\n<script setup lang=\"ts\">\nimport { BbSmoothHeight } from '@/index';\nimport { computed, ref } from 'vue';\nimport { isNotNil } from '@/utilities/functions/isNotNil';\nimport { last } from '@/utilities/functions/last';\nimport { nextTick } from 'vue';\nimport { toRef } from 'vue';\nimport { useOptions } from '@/composables/useOptions';\nimport ChipsBox from '../ChipsBox.vue';\nimport CommaBox from '../CommaBox.vue';\nimport CommonInputInnerContainer from '../CommonInputInnerContainer.vue';\nimport CommonInputOuterContainer from '../CommonInputOuterContainer.vue';\nimport type { InputHTMLAttributes, HTMLAttributes } from 'vue';\nimport type { Option as BaseOption } from '@/types/Option';\n\nexport type BaseTagProps = {\n\t/**\n\t * Name of the icon to be added at the end of the input.\n\t */\n\t// eslint-disable-next-line vue/prop-name-casing\n\t'append:icon'?: string;\n\n\t/**\n\t * Guides to the browser as to the type of information expected in the field.\n\t */\n\tariaDescribedby?: InputHTMLAttributes['aria-describedby'];\n\n\t/**\n\t * Guides to the browser as to the type of information expected in the field.\n\t */\n\tautocomplete?: InputHTMLAttributes['autocomplete'];\n\n\t/**\n\t * Sets autofocus on page load.\n\t */\n\tautofocus?: InputHTMLAttributes['autofocus'];\n\n\t/**\n\t * Sets the display model for selected values to a list\n\t * of comma separated string. In this mode the user\n\t * cannot deselect an option by pressing the close button.\n\t */\n\tcomma?: boolean;\n\n\t/**\n\t * Disables the component\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * The divider key used to separate values from one another. By default it is \"Enter\"\n\t */\n\tdivider?: KeyboardEvent['key'];\n\n\t/**\n\t * Define if the component should be in an error state.\n\t * It usually attaches a CSS class for styling purposes.\n\t */\n\thasErrors?: boolean;\n\n\t/**\n\t * The identifier of the component.\n\t */\n\tid?: HTMLAttributes['id'];\n\n\t/**\n\t * Sets the component in a loading state, usually triggering some visual styles.\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Used by v-model. Can be any serializable type.\n\t */\n\tmodelValue: any;\n\n\t/**\n\t * Allows the selection of multiple items.\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * Defines the name of the input.\n\t */\n\tname?: InputHTMLAttributes['name'];\n\n\t/**\n\t * String displayed when there's no data.\n\t */\n\tplaceholder?: InputHTMLAttributes['placeholder'];\n\n\t/**\n\t * Name of the icon to be added at the start of the input.\n\t */\n\t// eslint-disable-next-line vue/prop-name-casing\n\t'prepend:icon'?: string;\n\n\t/**\n\t * Sets the input in a readonly state.\n\t */\n\treadonly?: InputHTMLAttributes['readonly'];\n\n\t/**\n\t * Sets the input as required.\n\t */\n\trequired?: boolean;\n};\n\nconst props = withDefaults(defineProps<BaseTagProps>(), {\n\tdivider: 'Enter',\n\tmultiple: true,\n});\n\nexport type BaseTagEvents = {\n\t(e: 'blur', event: FocusEvent): void;\n\t(e: 'change', event: Event): void;\n\t(e: 'click', event: MouseEvent): void;\n\t(e: 'duplicate', string: string): void;\n\t(e: 'focus', event: FocusEvent): void;\n\t(e: 'inactive'): void;\n\t(e: 'input', event: Event): void;\n\t(e: 'keydown', event: KeyboardEvent): void;\n\t(e: 'keyup', event: KeyboardEvent): void;\n\t(e: 'update:modelValue', value: any): void;\n};\n\nconst emit = defineEmits<BaseTagEvents>();\n\nexport type BaseTagSlots = {\n\tappend?: (props: object) => any;\n\t'append-outer'?: (props: object) => any;\n\tprepend?: (props: object) => any;\n\t'prepend-outer'?: (props: object) => any;\n\tprefix?: (props: object) => any;\n\tsuffix?: (props: object) => any;\n};\n\ndefineSlots<BaseTagSlots>();\n\nif (props.multiple && !Array.isArray(props.modelValue)) {\n\tthrow new Error('Multiple is set to \"true\" but modelValue is not an array.');\n}\n\nconst outerContainer = ref<InstanceType<\n\ttypeof CommonInputOuterContainer\n> | null>(null);\nconst innerContainer = ref<InstanceType<\n\ttypeof CommonInputInnerContainer\n> | null>(null);\nconst computedPlaceholder = computed(() => {\n\treturn props.placeholder;\n});\nconst commaBox = ref<InstanceType<typeof CommaBox> | null>(null);\nconst chipsBox = ref<InstanceType<typeof ChipsBox> | null>(null);\nconst selectedBox = computed(() =>\n\tprops.comma ? commaBox.value : chipsBox.value\n);\n\nconst input = ref<HTMLElement | null>(null);\nconst focusInput = () => {\n\tif (input.value instanceof HTMLInputElement) {\n\t\tinput.value.focus();\n\t}\n};\n/**\n * It should prefill if asked, or\n * when single if modelValue is not null\n * when multiple if modelValue is not empty\n */\nconst shouldPrefill =\n\t(!props.multiple && isNotNil(props.modelValue)) ||\n\t(props.multiple && !!props.modelValue.length);\n\nconst dependencies = ref([]);\n\nconst {\n\tquery,\n\talignQueryToState,\n\taddCurrentQueryToManualItems,\n\tselectedOptions,\n\tselectOption,\n\tunselectOption,\n\tvalueIsSelected,\n\tmanualItems,\n} = useOptions({\n\temit,\n\titemText: undefined,\n\titemValue: undefined,\n\tmodelValue: toRef(props, 'modelValue'),\n\tmultiple: props.multiple,\n\tresetQueryOnOptionSelected: true,\n\tstash: false,\n\titems: toRef(props, 'modelValue'),\n\tenforceCoherence: false,\n\tprefill: shouldPrefill,\n\tmodelValueDebounceTime: 0,\n\tdependencies,\n\tdepsDebounceTime: 0,\n\tqueryDebounceTime: 0,\n\tdisabled: toRef(props, 'disabled'),\n});\n\n/**\n * Applies a class when the user is inside this whole component.\n * We cannot use focus within as it doesn't work for elements that are teleported.\n * Also we cannot use the <input/> if we physically move focus to the options so\n * we track it manually.\n */\nconst active = ref(false);\n\nconst setActive = () => {\n\tactive.value = true;\n};\nconst setInactive = () => {\n\tactive.value = false;\n\temit('inactive');\n};\n\nconst canProcessKeyboardBindings = computed(() => {\n\tif (props.readonly) return false;\n\tif (props.disabled) return false;\n\tif (!selectedBox.value && props.multiple) return false;\n\treturn true;\n});\n\nconst onArrowLeft = (event: KeyboardEvent) => {\n\tif (!canProcessKeyboardBindings.value) {\n\t\treturn;\n\t}\n\tif (!props.multiple || query.value) {\n\t\treturn;\n\t}\n\tevent.preventDefault();\n\tif (!selectedOptions.value.length) return;\n\tselectedBox.value?.focusPrevious();\n};\nconst onArrowRight = (event: KeyboardEvent) => {\n\tif (!canProcessKeyboardBindings.value) {\n\t\treturn;\n\t}\n\tif (!props.multiple || query.value) {\n\t\treturn;\n\t}\n\tevent.preventDefault();\n\tif (!selectedOptions.value.length) return;\n\tselectedBox.value?.focusNext();\n};\n\nconst onBackspace = async () => {\n\tif (\n\t\t!canProcessKeyboardBindings.value ||\n\t\tquery.value ||\n\t\t!selectedOptions.value.length\n\t) {\n\t\treturn;\n\t}\n\tif (selectedBox.value?.getHighlighted()) {\n\t\tselectedBox.value.confirmOption();\n\t}\n\tawait nextTick();\n\tselectedBox.value?.focusPrevious();\n};\n\nconst onEscape = () => {\n\tselectedBox.value?.blur();\n};\n\nconst onInputKeyup = async (event: KeyboardEvent) => {\n\temit('keyup', event);\n\tif (props.readonly || props.disabled) {\n\t\tevent.preventDefault();\n\t\treturn;\n\t}\n\t// Reset focused chips on key input\n\tif (/^[A-Za-z0-9]$/.test(event.key)) {\n\t\tselectedBox.value?.blur();\n\t}\n\tif (\n\t\tevent.key === props.divider ||\n\t\t(event.key === 'Unidentified' && query.value.includes(props.divider))\n\t) {\n\t\tif (props.divider.length === 1 && query.value.includes(props.divider)) {\n\t\t\tconst found = query.value.split(props.divider)[0];\n\t\t\tif (found) {\n\t\t\t\tquery.value = found;\n\t\t\t} else {\n\t\t\t\tquery.value = '';\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tif (!query.value) return;\n\t\tif (valueIsSelected(query.value)) {\n\t\t\temit('duplicate', query.value);\n\t\t\tquery.value = '';\n\t\t} else {\n\t\t\taddCurrentQueryToManualItems();\n\t\t\tonOptionSelected(last(manualItems.value)!);\n\t\t}\n\t}\n};\n\nconst onOptionSelected = (option: BaseOption) => {\n\tselectOption(option);\n\tfocusInput();\n\tif (!props.multiple) {\n\t\tclose();\n\t}\n};\n\nconst onOptionUnselected = (option: BaseOption) => {\n\tunselectOption(option);\n\tfocusInput();\n};\n\nconst onInputFocus = (event: FocusEvent) => {\n\temit('focus', event);\n\tsetActive();\n\tdocument.addEventListener('click', onOutsideInteraction);\n\tdocument.addEventListener('focusin', onOutsideInteraction);\n};\n\n/**\n * When clicking on the outside container seamlessly move focus to the input and open the panel\n */\nconst onOuterContainerClick = (event: MouseEvent) => {\n\temit('click', event);\n\tif (props.disabled || props.readonly) return;\n\tif (input.value instanceof HTMLElement) {\n\t\tinput.value.focus();\n\t}\n};\n\n/**\n * On click outside of the container close the panel, remove active state.\n * In multiple selection clear query after a timeout\n */\nconst onOutsideInteraction = async (event: Event) => {\n\tif (event.target instanceof Node) {\n\t\tif (outerContainer.value) {\n\t\t\tif (!outerContainer.value.$el.contains(event.target)) {\n\t\t\t\tclose();\n\t\t\t\tsetInactive();\n\t\t\t\tdocument.removeEventListener('click', onOutsideInteraction);\n\t\t\t\tdocument.removeEventListener('focusin', onOutsideInteraction);\n\t\t\t\talignQueryToState();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n};\nconst eventListeners = {\n\tonBlur: (event: FocusEvent) => emit('blur', event),\n\tonChange: (event: Event) => emit('change', event),\n\tonKeydown: (event: KeyboardEvent) => emit('keydown', event),\n\tonInput: (event: Event) => emit('input', event),\n};\n</script>\n<style lang=\"postcss\">\n@import '@/assets/css/BaseTag';\n</style>\n"],"names":["props","__props","emit","__emit","outerContainer","ref","innerContainer","computedPlaceholder","computed","commaBox","chipsBox","selectedBox","input","focusInput","shouldPrefill","isNotNil","dependencies","query","alignQueryToState","addCurrentQueryToManualItems","selectedOptions","selectOption","unselectOption","valueIsSelected","manualItems","useOptions","toRef","active","setActive","setInactive","canProcessKeyboardBindings","onArrowLeft","event","_a","onArrowRight","onBackspace","nextTick","_b","onEscape","onInputKeyup","found","onOptionSelected","last","option","onOptionUnselected","onInputFocus","onOutsideInteraction","onOuterContainerClick","eventListeners"],"mappings":"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"}

package/dist/index46.js

@@ -1,13 +1,16 @@
-import { defineComponent as i, computed as c, openBlock as m, createElementBlock as b, Fragment as f, createVNode as r, normalizeClass as y, withCtx as n, renderSlot as t, createElementVNode as p, mergeProps as h } from "vue";
-import g from "./index218.js";
+import { defineComponent as w, ref as g, computed as u, onMounted as y, watch as V, nextTick as k, openBlock as x, createBlock as B, normalizeClass as $, withCtx as r, renderSlot as t, createVNode as i, createElementVNode as C, mergeProps as T } from "vue";
+import v from "./index215.js";
+import E from "./index213.js";
 /* empty css         */
-import B from "./index220.js";
-const k = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "type", "value"], w = /* @__PURE__ */ p("span", null, null, -1), q = /* @__PURE__ */ i({
-  __name: "BaseTextInput",
+import G from "./index124.js";
+/* empty css         */
+const M = ["id", "aria-describedby", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "rows", "value"], z = /* @__PURE__ */ w({
+  __name: "BaseTextarea",
   props: {
     "append:icon": {},
     ariaDescribedby: {},
     autocomplete: {},
+    autoGrow: { type: Boolean },
     autofocus: {},
     disabled: { type: Boolean },
     hasErrors: { type: Boolean },
@@ -19,84 +22,113 @@ const k = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
     "prepend:icon": {},
     readonly: {},
     required: { type: Boolean },
-    type: { default: "text" }
+    rows: {}
   },
   emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
-  setup(s, { emit: l }) {
-    const a = s, o = l, d = c(() => ({
-      "bb-base-text-input": !0,
-      "bb-base-text-input--disabled": a.disabled,
-      "bb-base-text-input--errors": a.hasErrors,
-      "bb-base-text-input--loading": a.loading,
-      "bb-base-text-input--readonly": a.readonly
-    })), u = {
-      onBlur: (e) => o("blur", e),
-      onChange: (e) => o("change", e),
-      onClick: (e) => o("click", e),
-      onFocus: (e) => o("focus", e),
-      onKeydown: (e) => o("keydown", e),
-      onInput: (e) => {
-        e.target instanceof HTMLInputElement && o("update:modelValue", e.target.value || null), o("input", e);
-      },
-      onMousedown: (e) => o("mousedown", e),
-      onMouseup: (e) => o("mouseup", e)
+  setup(d, { emit: p }) {
+    const o = d, a = p;
+    if (o.rows && o.autoGrow)
+      throw new Error(
+        "Textarea: You cannot set rows and auto-grow attributes together. You either use rows and let the user resize or define a minimum height in CSS with auto-grow."
+      );
+    const n = g(null), c = u(() => ({
+      "bb-base-textarea": !0,
+      "bb-base-textarea--auto-grow": o.autoGrow,
+      "bb-base-textarea--disabled": o.disabled,
+      "bb-base-textarea--errors": o.hasErrors,
+      "bb-base-textarea--loading": o.loading,
+      "bb-base-textarea--readonly": o.readonly
+    })), m = u(
+      () => o.modelValue ? o.modelValue : ""
+    );
+    y(() => {
+      o.autoGrow && o.modelValue && l();
+    }), V(
+      () => o.modelValue,
+      () => {
+        o.autoGrow && k(l);
+      }
+    );
+    function b(e) {
+      if (e.stopPropagation(), e.target instanceof HTMLTextAreaElement) {
+        let s = e.target.value;
+        a("input", e), a("update:modelValue", s || null);
+      }
+    }
+    function f(e) {
+      e.stopPropagation(), e.target instanceof HTMLTextAreaElement && a("keydown", e);
+    }
+    const h = {
+      onBlur: (e) => a("blur", e),
+      onChange: (e) => a("change", e),
+      onClick: (e) => a("click", e),
+      onFocus: (e) => a("focus", e),
+      onMousedown: (e) => a("mousedown", e),
+      onMouseup: (e) => a("mouseup", e)
     };
-    return (e, C) => (m(), b(f, null, [
-      r(B, {
-        class: y(d.value)
-      }, {
-        "prepend-outer": n(() => [
-          t(e.$slots, "prepend-outer")
-        ]),
-        "append-outer": n(() => [
-          t(e.$slots, "append-outer")
-        ]),
-        default: n(() => [
-          r(g, {
-            "append:icon": a["append:icon"],
-            "prepend:icon": a["prepend:icon"]
-          }, {
-            prepend: n(() => [
-              t(e.$slots, "prepend")
-            ]),
-            prefix: n(() => [
-              t(e.$slots, "prefix")
-            ]),
-            append: n(() => [
-              t(e.$slots, "append")
-            ]),
-            suffix: n(() => [
-              t(e.$slots, "suffix")
-            ]),
-            default: n(() => [
-              p("input", h({
-                id: e.id,
-                ref: "input",
-                "aria-describedby": e.ariaDescribedby,
-                "aria-invalid": e.hasErrors ? !0 : void 0,
-                autocomplete: e.autocomplete,
-                autofocus: e.autofocus,
-                class: "bb-base-text-input__input",
-                disabled: e.disabled,
-                name: e.name,
-                placeholder: e.placeholder,
-                readonly: e.readonly,
-                required: e.required,
-                size: "1",
-                type: e.type,
-                value: e.modelValue
-              }, u), null, 16, k)
-            ]),
-            _: 3
-          }, 8, ["append:icon", "prepend:icon"])
-        ]),
-        _: 3
-      }, 8, ["class"]),
-      w
-    ], 64));
+    function l() {
+      n.value && (n.value.style.height = "0px", n.value.style.height = `${n.value.scrollHeight}px`);
+    }
+    return (e, s) => (x(), B(v, {
+      class: $(c.value)
+    }, {
+      "prepend-outer": r(() => [
+        t(e.$slots, "prepend-outer")
+      ]),
+      "append-outer": r(() => [
+        t(e.$slots, "append-outer")
+      ]),
+      default: r(() => [
+        i(E, {
+          "append:icon": o["append:icon"],
+          "prepend:icon": o["prepend:icon"]
+        }, {
+          prepend: r(() => [
+            t(e.$slots, "prepend")
+          ]),
+          prefix: r(() => [
+            t(e.$slots, "prefix")
+          ]),
+          append: r(() => [
+            t(e.$slots, "append")
+          ]),
+          suffix: r(() => [
+            t(e.$slots, "suffix")
+          ]),
+          default: r(() => [
+            i(G, null, {
+              default: r(() => [
+                C("textarea", T({
+                  id: e.id,
+                  ref_key: "textarea",
+                  ref: n,
+                  "aria-describedby": e.ariaDescribedby,
+                  autocomplete: e.autocomplete,
+                  autofocus: e.autofocus,
+                  class: "bb-base-textarea__input scrollbar-border",
+                  disabled: e.disabled,
+                  name: e.name,
+                  placeholder: e.placeholder,
+                  readonly: e.readonly,
+                  required: e.required,
+                  rows: e.rows,
+                  value: m.value
+                }, h, {
+                  onInput: b,
+                  onKeydown: f
+                }), null, 16, M)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 3
+        }, 8, ["append:icon", "prepend:icon"])
+      ]),
+      _: 3
+    }, 8, ["class"]));
   }
 });
 export {
-  q as default
+  z as default
 };
 //# sourceMappingURL=index46.js.map