bitboss-ui 2.0.130 → 2.0.132

package/dist/index15.js

@@ -1,12 +1,19 @@
-import { defineComponent as v, ref as h, computed as C, watchPostEffect as g, openBlock as V, createElementBlock as B, Fragment as w, createVNode as d, normalizeClass as H, withCtx as n, renderSlot as r, unref as t, createElementVNode as s, normalizeStyle as $, withModifiers as E, withDirectives as q, mergeProps as I } from "vue";
-import M from "./index210.js";
+import { defineComponent as H, ref as u, computed as D, openBlock as E, createElementBlock as I, Fragment as M, createVNode as p, normalizeClass as F, withCtx as n, renderSlot as r, unref as s, createElementVNode as f, normalizeStyle as T, withModifiers as q, withDirectives as L, mergeProps as N, nextTick as O } from "vue";
+import { isHex as z } from "./index242.js";
+import { isNotNil as S } from "./index134.js";
+import { useFocusTrap as _ } from "./index218.js";
+import { useId as A } from "./index8.js";
+import { vMaska as K } from "./index220.js";
+import P from "./index222.js";
 /* empty css         */
-import L from "./index212.js";
-import { vMaska as N } from "./index213.js";
-import { isHex as z } from "./index214.js";
-import { useLocale as D } from "./index215.js";
-import { isNotNil as F } from "./index134.js";
-const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "value"], S = ["aria-invalid", "aria-label", "disabled", "required"], U = /* @__PURE__ */ v({
+import R from "./index243.js";
+/* empty css         */
+import U from "./index207.js";
+/* empty css         */
+import j from "./index209.js";
+import { wait as G } from "./index130.js";
+import { useLocale as J } from "./index219.js";
+const Q = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "value"], W = ["aria-label"], de = /* @__PURE__ */ H({
   __name: "BaseColorInput",
   props: {
     "append:icon": {},
@@ -24,18 +31,21 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
     placeholder: {},
     "prepend:icon": {},
     readonly: { type: Boolean },
-    required: { type: Boolean }
+    required: { type: Boolean },
+    teleportTarget: {},
+    transitionDuration: { default: 250 }
   },
   emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
-  setup(p, { emit: u }) {
-    const a = p, o = u, { t: c } = D(), i = h(), m = C(() => ({
+  setup(y, { emit: v }) {
+    const t = y, o = v, c = t.id ?? `bb_${A().id.value}`, m = u(null), d = u(null), { t: k } = J(), g = D(() => ({
       "bb-base-color-input": !0,
-      "bb-base-color-input--disabled": a.disabled,
-      "bb-base-color-input--errors": a.hasErrors,
-      "bb-base-color-input--loading": a.loading,
-      "bb-base-color-input--readonly": a.readonly,
-      "bb-base-color-input--compact": a.compact
-    })), b = {
+      "bb-base-color-input--disabled": t.disabled,
+      "bb-base-color-input--errors": t.hasErrors,
+      "bb-base-color-input--loading": t.loading,
+      "bb-base-color-input--readonly": t.readonly,
+      "bb-base-color-input--compact": t.compact,
+      "bb-base-color-input--active": l.value
+    })), w = {
       onBlur: (e) => o("blur", e),
       onChange: (e) => o("change", e),
       onClick: (e) => o("click", e),
@@ -47,26 +57,42 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
       onMousedown: (e) => o("mousedown", e),
       onMouseup: (e) => o("mouseup", e),
       onMaska: (e) => {
-        const l = e.detail;
-        z(l.masked) ? o("update:modelValue", l.masked) : l.masked === "" && o("update:modelValue", null);
+        const a = e.detail;
+        z(a.masked) ? o("update:modelValue", a.masked) : a.masked === "" && o("update:modelValue", null);
       }
-    }, f = () => {
-      var e;
-      (e = i.value) == null || e.click();
-    }, y = {
+    }, h = () => {
+      V();
+    }, C = {
       mask: "!#HHHHHH",
       tokens: {
         H: { pattern: /[0-9a-fA-F]/ }
       },
       eager: !0
-    }, k = (e) => {
-      e.target instanceof HTMLInputElement && o("update:modelValue", e.target.value);
-    };
-    return g(() => {
-      i.value && (i.value.value = a.modelValue ?? "");
-    }), (e, l) => (V(), B(w, null, [
-      d(L, {
-        class: H(m.value)
+    }, l = u(!1), V = async () => {
+      $.value = !0, l.value = !0, await G(100), B();
+    }, b = async () => {
+      l.value = !1;
+    }, $ = u(!1), { activate: B } = _(d, {
+      /**
+       * This traps all clicks outside so we are pressing
+       * the trigger we just allow and process that in its
+       * own click handler.
+       * If we are pressing anything random on the page
+       * close the popover and be done
+       */
+      clickOutsideDeactivates: (e) => {
+        var i;
+        const a = e.target;
+        return a instanceof HTMLElement && (i = d.value) != null && i.$el.contains(a) || b(), !0;
+      },
+      escapeDeactivates: () => (O(async () => {
+        await b();
+      }), !0),
+      returnFocusOnDeactivate: !0
+    });
+    return (e, a) => (E(), I(M, null, [
+      p(j, {
+        class: F(g.value)
       }, {
         "prepend-outer": n(() => [
           r(e.$slots, "prepend-outer")
@@ -75,11 +101,13 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
           r(e.$slots, "append-outer")
         ]),
         default: n(() => [
-          d(M, {
-            "append:icon": a["append:icon"],
-            clearable: e.clearable && t(F)(e.modelValue),
-            "prepend:icon": a["prepend:icon"],
-            "onClick:clear": l[0] || (l[0] = (A) => e.$emit("update:modelValue", null))
+          p(U, {
+            ref_key: "innerContainer",
+            ref: m,
+            "append:icon": t["append:icon"],
+            clearable: e.clearable && s(S)(e.modelValue),
+            "prepend:icon": t["prepend:icon"],
+            "onClick:clear": a[0] || (a[0] = (i) => e.$emit("update:modelValue", null))
           }, {
             prepend: n(() => [
               r(e.$slots, "prepend")
@@ -88,20 +116,22 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
               r(e.$slots, "prefix")
             ]),
             append: n(() => [
-              s("span", {
+              f("button", {
+                ref: "indicator",
+                "aria-label": s(k)("colorInput.paletteLabel").value,
                 class: "bb-base-color-input__indicator",
-                style: $({ backgroundColor: a.modelValue ?? void 0 }),
-                onClick: E(f, ["stop"])
-              }, null, 4),
+                style: T({ backgroundColor: t.modelValue ?? void 0 }),
+                type: "button",
+                onClick: q(h, ["stop"])
+              }, null, 12, W),
               r(e.$slots, "append")
             ]),
             suffix: n(() => [
               r(e.$slots, "suffix")
             ]),
             default: n(() => [
-              q(s("input", I(b, {
-                id: e.id,
-                ref: "input",
+              L(f("input", N(w, {
+                id: s(c),
                 "aria-describedby": e.ariaDescribedby,
                 "aria-invalid": e.hasErrors ? !0 : void 0,
                 autocomplete: e.autocomplete,
@@ -115,32 +145,38 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
                 size: "1",
                 type: "text",
                 value: e.modelValue
-              }), null, 16, P), [
-                [t(N), y]
-              ]),
-              s("input", {
-                ref_key: "picker",
-                ref: i,
-                "aria-hidden": "true",
-                "aria-invalid": e.hasErrors ? !0 : void 0,
-                "aria-label": t(c)("colorInput.paletteLabel").value,
-                class: "bb-base-color-input__picker",
-                disabled: e.disabled || e.readonly,
-                required: e.required,
-                tabindex: "-1",
-                type: "color",
-                onInput: k
-              }, null, 40, S)
+              }), null, 16, Q), [
+                [s(K), C]
+              ])
             ]),
             _: 3
           }, 8, ["append:icon", "clearable", "prepend:icon"])
         ]),
         _: 3
       }, 8, ["class"]),
-      l[1] || (l[1] = s("span", null, null, -1))
+      p(P, {
+        "base-class": "bb-base-color-input__pallette",
+        "container-attributes": { id: s(c) },
+        offset: 4,
+        open: l.value,
+        "teleport-target": e.teleportTarget,
+        "transition-duration": e.transitionDuration,
+        wrapper: m.value
+      }, {
+        default: n(() => [
+          p(R, {
+            ref_key: "pallette",
+            ref: d,
+            inert: !l.value,
+            "model-value": e.modelValue,
+            "onUpdate:modelValue": a[1] || (a[1] = (i) => o("update:modelValue", i))
+          }, null, 8, ["inert", "model-value"])
+        ]),
+        _: 1
+      }, 8, ["container-attributes", "open", "teleport-target", "transition-duration", "wrapper"])
     ], 64));
   }
 });
 export {
-  U as default
+  de as default
 };

package/dist/index17.js

@@ -1,7 +1,7 @@
 import { defineComponent as E, ref as m, computed as n, watch as _, openBlock as p, createElementBlock as h, normalizeProps as i, guardReactiveProps as f, mergeProps as k, createCommentVNode as I, createElementVNode as l, renderSlot as F } from "vue";
-import { isCssColor as y } from "./index234.js";
-import { when as N } from "./index235.js";
-import { booleanishToBoolean as S } from "./index236.js";
+import { isCssColor as y } from "./index238.js";
+import { when as N } from "./index239.js";
+import { booleanishToBoolean as S } from "./index240.js";
 const A = {
   "aria-hidden": "true",
   class: "bb-base-checkbox-container"

package/dist/index19.js

@@ -1,15 +1,15 @@
 import { defineComponent as j, ref as k, toRef as d, openBlock as z, createBlock as G, unref as B, withCtx as s, renderSlot as l, normalizeProps as h, guardReactiveProps as b, createVNode as R, mergeProps as T } from "vue";
 import W from "./index17.js";
 /* empty css        */
-import K from "./index242.js";
+import K from "./index225.js";
 /* empty css         */
-import { useItemsGetter as N } from "./index244.js";
-import { useIndexById as w } from "./index245.js";
-import { useBaseOptions as U } from "./index246.js";
-import { useCoherence as q } from "./index247.js";
-import { hash as J } from "./index208.js";
-import { useHashedWatcher as C } from "./index248.js";
-import { usePrefill as Q } from "./index249.js";
+import { useItemsGetter as N } from "./index227.js";
+import { useIndexById as w } from "./index228.js";
+import { useBaseOptions as U } from "./index229.js";
+import { useCoherence as q } from "./index230.js";
+import { hash as J } from "./index231.js";
+import { useHashedWatcher as C } from "./index232.js";
+import { usePrefill as Q } from "./index233.js";
 const de = /* @__PURE__ */ j({
   __name: "BaseCheckboxGroup",
   props: {

package/dist/index207.js

@@ -1,10 +1,67 @@
-const o = "bitboss-ui | ", e = () => ({
-  warn: (r) => console.warn(`${o}${r}`),
-  error: (r) => console.error(`${o}${r}`),
-  throw: (r) => {
-    throw new Error(`${o}${r}`);
+import { defineComponent as _, ref as k, openBlock as r, createElementBlock as $, normalizeClass as y, renderSlot as n, createElementVNode as c, createBlock as s, unref as p, createCommentVNode as l, createVNode as t } from "vue";
+/* empty css       */
+/* empty css       */
+import m from "./index127.js";
+/* empty css         */
+import C from "./index129.js";
+/* empty css         */
+import B from "./index316.js";
+import h from "./index317.js";
+const v = { class: "bb-common-input-inner-container__prefix" }, I = { class: "bb-common-input-inner-container__suffix" }, w = /* @__PURE__ */ _({
+  __name: "CommonInputInnerContainer",
+  props: {
+    "append:icon": {},
+    clearable: { type: Boolean },
+    "prepend:icon": {},
+    preventFocus: { type: Boolean }
+  },
+  emits: ["click:clear"],
+  setup(u, { emit: d }) {
+    const i = u, f = d, o = k(), a = () => {
+      var e;
+      !o.value || i.preventFocus || (e = o.value.querySelector("input")) == null || e.focus();
+    }, b = () => {
+      f("click:clear"), a();
+    };
+    return (e, E) => (r(), $("span", {
+      ref_key: "container",
+      ref: o,
+      class: y(["bb-common-input-inner-container", {
+        "bb-common-input-inner-container--clearable": i.clearable
+      }]),
+      onClick: a
+    }, [
+      n(e.$slots, "prepend", {}, () => [
+        c("span", v, [
+          n(e.$slots, "prefix")
+        ])
+      ]),
+      e.$props["prepend:icon"] ? (r(), s(p(m), {
+        key: 0,
+        class: "bb-common-input-inner-container__prepend-icon",
+        type: e.$props["prepend:icon"]
+      }, null, 8, ["type"])) : l("", !0),
+      n(e.$slots, "default"),
+      t(h, {
+        "aria-hidden": !e.clearable,
+        tabindex: e.clearable ? 0 : -1,
+        onClick: b
+      }, null, 8, ["aria-hidden", "tabindex"]),
+      e.$props["append:icon"] ? (r(), s(p(m), {
+        key: 1,
+        class: "bb-common-input-inner-container__append-icon",
+        type: e.$props["append:icon"]
+      }, null, 8, ["type"])) : l("", !0),
+      t(B),
+      t(p(C)),
+      n(e.$slots, "append", {}, () => [
+        c("span", I, [
+          n(e.$slots, "suffix")
+        ])
+      ])
+    ], 2));
   }
 });
 export {
-  e as useLogger
+  w as default
 };

package/dist/index209.js

@@ -1,5 +1,15 @@
-import r from "./index268.js";
-const t = r;
+import { openBlock as t, createElementBlock as n, renderSlot as e } from "vue";
+/* empty css         */
+import r from "./index267.js";
+const s = {}, c = { class: "bb-common-input-outer-container" };
+function p(o, a) {
+  return t(), n("span", c, [
+    e(o.$slots, "prepend-outer"),
+    e(o.$slots, "default"),
+    e(o.$slots, "append-outer")
+  ]);
+}
+const i = /* @__PURE__ */ r(s, [["render", p]]);
 export {
-  t as deburr
+  i as default
 };

package/dist/index21.js

@@ -5,22 +5,22 @@ import { _config as C } from "./index4.js";
 import { useId as F } from "./index8.js";
 import f from "./index13.js";
 /* empty css        */
-import s from "./index221.js";
-import G from "./index222.js";
-import J from "./index223.js";
-import K from "./index224.js";
-import Q from "./index225.js";
-import X from "./index226.js";
-import ee from "./index227.js";
-import { hash as M } from "./index208.js";
-import { last as ae } from "./index228.js";
-import { useLogger as te } from "./index207.js";
-import oe from "./index229.js";
-import le from "./index230.js";
-import re from "./index231.js";
-import B from "./index232.js";
-import se from "./index233.js";
-import { useLocale as de } from "./index215.js";
+import s from "./index210.js";
+import G from "./index212.js";
+import J from "./index213.js";
+import K from "./index214.js";
+import Q from "./index215.js";
+import X from "./index245.js";
+import ee from "./index246.js";
+import { hash as M } from "./index231.js";
+import { last as ae } from "./index217.js";
+import { useLogger as te } from "./index236.js";
+import oe from "./index247.js";
+import le from "./index248.js";
+import re from "./index249.js";
+import B from "./index250.js";
+import se from "./index251.js";
+import { useLocale as de } from "./index219.js";
 const ie = { class: "bb-base-date-picker" }, ne = { class: "bb-base-date-picker__body" }, ue = { class: "bb-base-date-picker__controls" }, me = { class: "sr-only" }, pe = { class: "sr-only" }, ce = { class: "sr-only" }, fe = {
   style: { transform: "rotate(180deg)" },
   viewBox: "0 0 24 24",