bitboss-ui 2.0.173 → 2.0.174

package/dist/index220.js

@@ -1,54 +1,202 @@
-import { defineComponent as p, ref as b, watch as _, computed as m, createElementBlock as d, openBlock as c, normalizeClass as u, createElementVNode as t, createVNode as h, withCtx as f, toDisplayString as o } from "vue";
-import k from "./index222.js";
-const y = { class: "bb-base-date-picker__year-container" }, v = {
+import { defineComponent as j, ref as c, onMounted as J, watch as Q, createElementBlock as _, openBlock as R, createElementVNode as w, createTextVNode as B, createCommentVNode as K, toDisplayString as C, unref as x } from "vue";
+import { useResizeObserver as Z } from "./index137.js";
+import { hexToRgb as O } from "./index328.js";
+import { getHueFromRGB as F } from "./index329.js";
+import { hslToHex as y } from "./index330.js";
+import { useLocale as ee } from "./index217.js";
+const te = {
+  id: "mainCanvasDesc",
   "aria-live": "polite",
-  class: "bb-base-date-picker__selected-day-label"
-}, B = { class: "bb-base-date-picker__weekday" }, D = { class: "bb-base-date-picker__monthday" }, M = { class: "bb-base-date-picker__month-button" }, C = /* @__PURE__ */ p({
-  __name: "BaseDatePickerHeader",
+  class: "sr-only"
+}, ae = { key: 0 }, ne = {
+  id: "hueCanvasDesc",
+  "aria-live": "polite",
+  class: "sr-only"
+}, oe = { key: 0 }, de = /* @__PURE__ */ j({
+  __name: "ColorPallette",
   props: {
-    cursor: {},
-    disabled: { type: Boolean },
-    hidden: { type: Boolean }
+    modelValue: {}
   },
-  emits: ["mode:year", "mode:month"],
-  setup(n) {
-    const s = n, r = b("top"), l = (e, a) => {
-      e && a && (r.value = e.isBefore(a) ? "top" : "bottom");
+  emits: ["update:modelValue"],
+  setup(N, { emit: T }) {
+    const D = N, f = T, { t: h } = ee(), o = c(D.modelValue), d = c(
+      y(F(...O(o.value ?? "#ff0000")), 100, 50)
+    ), P = c(null), s = c(null), r = c(null), l = c({ x: 0, y: 0 }), u = c({ x: 0 }), b = c(!1), k = c(!1), H = () => {
+      const e = s.value, t = r.value;
+      !e || !t || (e.width = e.offsetWidth, e.height = e.offsetHeight, t.width = t.offsetWidth, t.height = t.offsetHeight, v(), m());
+    }, I = () => {
+      const e = s.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, v = () => {
+      const e = s.value;
+      if (!e) return;
+      const t = I();
+      if (!t) return;
+      t.clearRect(0, 0, e.width, e.height);
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      a.addColorStop(0, d.value), a.addColorStop(1, "#ffffff");
+      const n = t.createLinearGradient(0, 0, 0, e.height);
+      n.addColorStop(0, "transparent"), n.addColorStop(1, "#000000"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), t.fillStyle = n, t.globalCompositeOperation = "multiply", t.fillRect(0, 0, e.width, e.height), t.globalCompositeOperation = "source-over", t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, p = () => {
+      const e = I();
+      e && (e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        8,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        7,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#000000", e.lineWidth = 1, e.stroke(), e.globalCompositeOperation = "source-over");
+    }, V = () => {
+      const e = r.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, m = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = V();
+      if (!t) return;
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      for (let n = 0; n <= 360; n += 60)
+        a.addColorStop(n / 360, `hsl(${n}, 100%, 50%)`);
+      a.addColorStop(1, "hsl(360, 100%, 50%)"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), L(), t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, L = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = V();
+      if (!t) return;
+      const a = 10, n = 16, i = u.value.x - a / 2, S = e.height / 2 - n / 2;
+      t.beginPath(), t.roundRect(i, S, a, n, 2), t.strokeStyle = "lightgray", t.stroke(), t.fillStyle = "#ffffff", t.fill();
+    }, q = (e) => {
+      s.value && (window.addEventListener("pointermove", A), window.addEventListener("pointerup", E), b.value = !0, G(e));
+    }, z = (e) => {
+      r.value && (window.addEventListener("pointermove", A), window.addEventListener("pointerup", E), k.value = !0, W(e));
+    }, G = (e) => {
+      const t = s.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width, e.clientX - a.left)), i = Math.max(0, Math.min(t.height, e.clientY - a.top));
+      l.value = { x: n, y: i }, v(), p(), o.value = g(), f("update:modelValue", o.value);
+    }, W = (e) => {
+      const t = r.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width, e.clientX - a.left));
+      u.value = { x: n };
+      const i = n / t.width * 360;
+      d.value = y(i, 100, 50), m(), v(), p(), o.value = g(), f("update:modelValue", o.value);
+    }, A = (e) => {
+      b.value ? G(e) : k.value && W(e);
+    }, E = () => {
+      b.value = !1, k.value = !1;
+    }, U = (e) => {
+      var a, n;
+      switch (e.key) {
+        case "ArrowUp":
+          l.value.y = Math.max(0, l.value.y - 5);
+          break;
+        case "ArrowDown":
+          l.value.y = Math.min(
+            ((a = s.value) == null ? void 0 : a.height) ?? 0,
+            l.value.y + 5
+          );
+          break;
+        case "ArrowLeft":
+          l.value.x = Math.max(0, l.value.x - 5);
+          break;
+        case "ArrowRight":
+          l.value.x = Math.min(
+            ((n = s.value) == null ? void 0 : n.width) ?? 0,
+            l.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
+    }, X = (e) => {
+      var n, i;
+      switch (e.key) {
+        case "ArrowLeft":
+          u.value.x = Math.max(0, u.value.x - 5);
+          break;
+        case "ArrowRight":
+          u.value.x = Math.min(
+            ((n = r.value) == null ? void 0 : n.width) ?? 0,
+            u.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      const a = u.value.x / (((i = r.value) == null ? void 0 : i.width) ?? 1) * 360;
+      d.value = y(a, 100, 50), m(), L(), v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
     };
-    _(
-      () => s.cursor,
-      (e, a) => {
-        l(e, a);
+    J(() => {
+      H(), M(o.value ?? "#ff0000");
+    }), Z(P, () => {
+      H(), M(o.value ?? "#ff0000");
+    }), Q(
+      () => D.modelValue,
+      (e) => {
+        !e || e === o.value || (o.value = e, M(e), m(), v());
       }
     );
-    const i = m(() => s.cursor.format("YYYY"));
-    return (e, a) => (c(), d("div", {
-      class: u(["bb-base-date-picker__header", { "bb-base-date-picker__header--hidden": e.hidden }])
+    const g = () => {
+      const e = s.value;
+      if (!e) return "#ffffff";
+      const t = e.getContext("2d");
+      if (!t) return "#ffffff";
+      const { x: a, y: n } = l.value, i = t.getImageData(a, n, 1, 1).data, [S, $, Y] = i;
+      return `#${((1 << 24) + (S << 16) + ($ << 8) + Y).toString(16).slice(1)}`;
+    };
+    function M(e) {
+      var a;
+      const t = F(...O(e));
+      d.value = y(t, 100, 50), u.value.x = t / 360 * (((a = r.value) == null ? void 0 : a.width) ?? 0);
+    }
+    return (e, t) => (R(), _("div", {
+      ref_key: "paletteRef",
+      ref: P,
+      "aria-label": "Color Picker",
+      class: "bb-color-palette",
+      role: "application"
     }, [
-      t("div", y, [
-        h(k, {
-          direction: r.value,
-          duration: 500,
-          gap: 30
-        }, {
-          default: f(() => [
-            (c(), d("span", {
-              key: i.value,
-              "aria-live": "polite",
-              class: "bb-base-date-picker__year-button"
-            }, o(i.value), 1))
-          ]),
-          _: 1
-        }, 8, ["direction"])
+      w("canvas", {
+        ref_key: "mainCanvasRef",
+        ref: s,
+        "aria-describedby": "mainCanvasDesc",
+        "aria-label": "Main Color Selection",
+        class: "bb-color-palette__canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: U,
+        onPointerdown: q
+      }, null, 544),
+      w("p", te, [
+        B(C(x(h)("colorInput.mainCanvasDesc")) + " ", 1),
+        o.value ? (R(), _("span", ae, C(x(h)("colorInput.mainCanvasSelectedColor", o.value)), 1)) : K("", !0)
       ]),
-      t("div", v, [
-        t("span", B, o(e.cursor.format("ddd")) + ", ", 1),
-        t("span", D, o(e.cursor.format("DD")), 1),
-        t("span", M, o(e.cursor.format("MMMM")), 1)
+      w("canvas", {
+        ref_key: "hueCanvasRef",
+        ref: r,
+        "aria-describedby": "hueCanvasDesc",
+        "aria-label": "Hue Selection",
+        class: "bb-color-palette__hue-canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: X,
+        onPointerdown: z
+      }, null, 544),
+      w("p", ne, [
+        B(C(x(h)("colorInput.hueCanvasDesc")) + " ", 1),
+        d.value ? (R(), _("span", oe, C(x(h)("colorInput.hueCanvasSelectedHue", d.value)), 1)) : K("", !0)
       ])
-    ], 2));
+    ], 512));
   }
 });
 export {
-  C as default
+  de as default
 };

package/dist/index222.js

@@ -1,7 +1,122 @@
-import o from "./index297.js";
-/* empty css         */
-import t from "./index299.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8c6b13bd"]]);
+import { defineComponent as _, mergeModels as B, useModel as V, ref as r, watch as b, onMounted as A, computed as D, createBlock as c, openBlock as g, resolveDynamicComponent as w, normalizeStyle as x, normalizeClass as S, unref as s, withCtx as y, renderSlot as h, createCommentVNode as z, mergeProps as k, createElementVNode as C } from "vue";
+import { useFloating as E, arrow as N } from "./index331.js";
+import { flip as F, offset as H, shift as U, hide as j, autoUpdate as q } from "./index332.js";
+const G = { class: "bb-common-popover__bubble" }, O = /* @__PURE__ */ _({
+  __name: "CommonPopover",
+  props: /* @__PURE__ */ B({
+    arrowPadding: {},
+    offset: {},
+    block: { type: Boolean },
+    padding: { default: 0 },
+    placement: {},
+    transitionDuration: { default: 250 },
+    containerAttributes: {},
+    dialog: { type: Boolean },
+    renderContent: { type: Boolean, default: !0 },
+    tag: { default: "span" }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const a = i, l = V(i, "modelValue"), d = r(l.value);
+    l.value = !1;
+    const u = r(), o = r(), p = r(), { floatingStyles: M, placement: $, middlewareData: n } = E(
+      u,
+      o,
+      {
+        placement: a.placement,
+        whileElementsMounted: q,
+        middleware: [
+          F(),
+          H(a.offset),
+          U({ padding: a.padding }),
+          j(),
+          N({
+            element: p,
+            padding: a.arrowPadding
+          })
+        ],
+        strategy: "fixed"
+      }
+    );
+    b(
+      () => {
+        var e, t;
+        return (t = (e = n.value) == null ? void 0 : e.hide) == null ? void 0 : t.referenceHidden;
+      },
+      (e) => {
+        e && (l.value = !1);
+      }
+    ), b(l, (e) => {
+      e ? o.value && (a.dialog ? o.value.showModal() : o.value.showPopover()) : o.value && (a.dialog ? o.value.close() : o.value.hidePopover());
+    }), A(() => {
+      d.value && o.value && (l.value = d.value, a.dialog ? o.value.showModal() : o.value.showPopover());
+    });
+    const P = D(() => {
+      if (n.value.arrow) {
+        const { x: e, y: t } = n.value.arrow;
+        return {
+          style: {
+            left: `${e}px`,
+            top: `${t}px`
+          }
+        };
+      }
+    });
+    return (e, t) => (g(), c(w(e.dialog ? "div" : e.tag), {
+      ref_key: "wrapper",
+      ref: u,
+      class: S(["bb-common-popover", {
+        "bb-common-popover--open": l.value && !!o.value,
+        "bb-common-popover--block": a.block,
+        [`bb-common-popover--${s($)}`]: !0
+      }]),
+      style: x({
+        "--transition-duration": `${a.transitionDuration}ms`
+      })
+    }, {
+      default: y(() => {
+        var m, f, v;
+        return [
+          h(e.$slots, "activator"),
+          e.renderContent ? (g(), c(w(e.dialog ? "dialog" : e.tag), k({
+            key: 0,
+            ref_key: "content",
+            ref: o,
+            class: ["bb-common-popover__bubble-container", {
+              "bb-common-popover__bubble-container--open": l.value && !!o.value
+            }],
+            popover: "manual",
+            style: {
+              ...((m = e.containerAttributes) == null ? void 0 : m.style) ?? {},
+              ...s(M),
+              "--arrow-offset-x": Math.round(((v = (f = s(n)) == null ? void 0 : f.arrow) == null ? void 0 : v.x) ?? 0) + "px",
+              "--page-padding": `${e.padding}px`
+            },
+            tabindex: l.value ? void 0 : -1
+          }, e.containerAttributes, {
+            onClose: t[0] || (t[0] = (I) => l.value = !1)
+          }), {
+            default: y(() => [
+              C("span", k({
+                ref_key: "bubblearrow",
+                ref: p,
+                class: "bb-common-popover__arrow"
+              }, P.value), null, 16),
+              C("span", G, [
+                h(e.$slots, "default")
+              ])
+            ]),
+            _: 3
+          }, 16, ["class", "style", "tabindex"])) : z("", !0)
+        ];
+      }),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+});
 export {
-  m as default
+  O as default
 };

package/dist/index224.js

@@ -1,15 +1,4 @@
-import { locales as t } from "./index300.js";
-import { _config as m } from "./index4.js";
-import { get as c } from "./index301.js";
-import { readonly as l, computed as n } from "vue";
-const p = (o, ...r) => l(
-  n(() => c(t[m.locale], o).replace(
-    /\{(\d+)\}/g,
-    (a, e) => r[e]
-  ))
-), d = () => ({
-  t: p
-});
+const o = (e) => e[0];
 export {
-  d as useLocale
+  o as head
 };

package/dist/index225.js

@@ -1,4 +1,4 @@
-const o = (e) => typeof e == "boolean" ? e : e === "true";
+const r = (e) => typeof e > "u" || e === null;
 export {
-  o as booleanishToBoolean
+  r as isNil
 };

package/dist/index226.js

@@ -1,4 +1,5 @@
-const e = (t) => t;
+import { hash as o } from "./index290.js";
+const t = (r, h = "bb") => `${h}${o(r)}`;
 export {
-  e as identity
+  t as hash
 };

package/dist/index227.js

@@ -1,4 +1,7 @@
-const s = (r) => !!r && !!r.match(/^(#|var\(--|(rgb|hsl)a?\()/);
+import { getDefaultExportFromCjs as r } from "./index303.js";
+import { __require as o } from "./index291.js";
+var t = o();
+const s = /* @__PURE__ */ r(t);
 export {
-  s as isCssColor
+  s as default
 };

package/dist/index228.js

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

package/dist/index229.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./index303.js";
+import { __require as e } from "./index295.js";
+var o = e();
+const m = /* @__PURE__ */ r(o);
+export {
+  m as default
+};

package/dist/index23.js

@@ -1,25 +1,25 @@
 import { defineComponent as K, watchEffect as Q, ref as l, computed as k, watch as D, createBlock as C, openBlock as Y, normalizeClass as w, withCtx as i, createVNode as B, unref as r, createCommentVNode as X, withDirectives as x, createElementVNode as s, mergeProps as S, withModifiers as ee, toDisplayString as E, renderSlot as c } from "vue";
 import { _config as te } from "./index4.js";
-import o from "./index209.js";
-import ae from "./index246.js";
-import oe from "./index213.js";
-import re from "./index210.js";
-import ne from "./index211.js";
-import le from "./index212.js";
-import { identity as ie } from "./index226.js";
-import { isEmpty as se } from "./index247.js";
-import { last as de } from "./index217.js";
+import o from "./index227.js";
+import ae from "./index228.js";
+import oe from "./index229.js";
+import re from "./index230.js";
+import ne from "./index231.js";
+import le from "./index232.js";
+import { identity as ie } from "./index233.js";
+import { isEmpty as se } from "./index234.js";
+import { last as de } from "./index235.js";
 import { useId as ue } from "./index8.js";
-import { useLocale as pe } from "./index224.js";
+import { useLocale as pe } from "./index217.js";
 import { useMobile as ce } from "./index9.js";
-import { useUntil as me } from "./index248.js";
-import { vMaska as fe } from "./index249.js";
+import { useUntil as me } from "./index218.js";
+import { vMaska as fe } from "./index219.js";
 import be from "./index21.js";
 /* empty css        */
-import ge from "./index228.js";
+import ge from "./index213.js";
 /* empty css         */
-import ke from "./index230.js";
-import ye from "./index250.js";
+import ke from "./index212.js";
+import ye from "./index222.js";
 /* empty css         */
 const ve = ["inert"], Ve = ["id", "aria-describedby", "autocomplete", "autofocus", "data-maska", "disabled", "inputmode", "name", "placeholder", "readonly", "required", "value"], Me = ["aria-label", "disabled"], he = ["id"], ze = /* @__PURE__ */ K({
   __name: "BaseDatePickerInput",

package/dist/index230.js

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