bitboss-ui 2.0.37 → 2.0.39

package/dist/index75.js

@@ -1,224 +1,279 @@
-import { defineComponent as j, ref as g, watch as x, computed as m, openBlock as V, createBlock as G, resolveDynamicComponent as K, normalizeClass as O, withCtx as M, createElementVNode as c, withModifiers as y, renderSlot as U, normalizeProps as Y, guardReactiveProps as Z, createTextVNode as J, unref as Q, createVNode as W, createElementBlock as F, Fragment as X, renderList as ee, toDisplayString as te } from "vue";
-import { findInTree as ae } from "./index248.js";
-import { useId as re } from "./index8.js";
-import oe from "./index123.js";
-/* empty css         */
-const le = ["accept", "autofocus", "disabled", "multiple"], se = {
-  "aria-hidden": "true",
-  class: "bb-dropzone__submittable-label"
-}, ne = ["id", "disabled", "multiple", "name"], ie = { class: "bb-dropzone__errors" }, fe = /* @__PURE__ */ j({
-  __name: "BbDropzone",
+import { defineComponent as Q, defineAsyncComponent as W, computed as A, ref as g, openBlock as $, createElementBlock as D, mergeProps as B, createElementVNode as O, renderSlot as w, normalizeProps as X, guardReactiveProps as Y, unref as h, createBlock as Z, withCtx as K, normalizeStyle as _, Fragment as P, renderList as x, createVNode as ee, createCommentVNode as te } from "vue";
+import { findRightIndex as H } from "./index283.js";
+import { useId as ne } from "./index8.js";
+import { wait as oe } from "./index131.js";
+import { useIntersectionObserver as ae } from "./index132.js";
+import le from "./index13.js";
+/* empty css        */
+import N from "./index284.js";
+const me = /* @__PURE__ */ Q({
+  __name: "BbDropdown",
   props: {
-    autofocus: {},
+    arrowPadding: { default: 10 },
+    block: { type: Boolean },
     disabled: { type: Boolean },
-    errors: {},
-    hasErrors: { type: Boolean },
+    eager: { type: Boolean },
     id: {},
-    multiple: { type: Boolean },
-    name: {},
-    accept: {},
-    maxFiles: {},
-    maxSize: {},
-    modelValue: {},
-    tag: { default: "div" }
+    offset: { default: 3 },
+    padding: { default: 6 },
+    placement: { default: "bottom" },
+    theme: { default: "default" },
+    transitionDuration: { default: 300 },
+    items: {},
+    width: { default: 200 }
   },
-  emits: ["blur", "error", "focus", "update:modelValue"],
-  setup(D, { emit: C }) {
-    let b;
-    const t = D, l = C, d = g(null);
-    if (t.accept && !Array.isArray(t.accept))
-      throw new Error("Property accept is not an array");
-    if (t.multiple && !Array.isArray(t.modelValue))
-      throw new Error(
-        "Component is set to multiple but modelValue is not an array"
+  setup(V) {
+    const j = W(
+      () => import("./index282.js")
+    ), r = V, d = r.id ?? `bb_${ne().id.value}`, m = A(() => {
+      let e = r.items.findIndex((t) => !t.disabled), o = H(
+        r.items,
+        (t) => !t.disabled
       );
-    const h = g(!1), I = (e) => {
-      h.value = !0, l("focus", e);
-    }, L = (e) => {
-      h.value = !1, l("blur", e);
-    };
-    x(
-      () => t.modelValue,
-      () => {
-        let e = new DataTransfer();
-        Array.isArray(t.modelValue) ? t.modelValue.length && t.modelValue.forEach((a) => e.items.add(a)) : t.modelValue && e.items.add(t.modelValue), d.value && (e.items.length ? d.value.files = e.files : d.value.files = null);
-      }
-    );
-    const p = g([]), P = m(
-      () => p.value.join(",")
-    );
-    x(
-      () => t.accept,
-      async () => {
-        if (t.accept) {
-          let e = [];
-          for (let a = 0; a < t.accept.length; a++) {
-            const r = t.accept[a];
-            if (r.includes("/")) e.push(r);
-            else {
-              b || (b = (await import("./index247.js")).default);
-              const o = b.getType(r);
-              if (!o)
-                throw new Error(
-                  `Could not detect the correct mime associated with ${r}`
+      return r.items.map((t, n) => {
+        const i = `${d}-item-${t.key}`, { onClick: F, ...q } = t, G = async () => {
+          await b();
+          const s = document.querySelector(`#${d}`);
+          if (s) s instanceof HTMLElement && s.focus();
+          else return;
+          F && F();
+        }, J = (s) => {
+          if (s.target instanceof HTMLElement && s.target.dataset.dropdownItem) {
+            if (!a.value) return;
+            if (s.key === "ArrowDown") {
+              if (s.preventDefault(), a.value && n !== o) {
+                const u = a.value.querySelector(
+                  N.map((y) => `#${i} ~ ${y}`).join(",")
                 );
-              e.push(o);
+                u && u instanceof HTMLElement && u.focus();
+              }
+            } else if (s.key === "ArrowUp") {
+              if (s.preventDefault(), a.value && n !== e) {
+                const u = H(r.items, (E, T) => T < n && !E.disabled), k = Array.from(
+                  a.value.querySelectorAll(".bb-dropdown__item")
+                )[u];
+                k && k instanceof HTMLElement && k.focus();
+              }
+            } else if (s.key === "Tab") {
+              if (n === o && !s.shiftKey) {
+                const u = N.join(","), y = Array.from(
+                  document.querySelectorAll(u)
+                ), k = y.findIndex(
+                  (T) => T.id === d
+                ), E = y[k + 1];
+                if (E) E instanceof HTMLElement && (s.preventDefault(), b(), E.focus());
+                else return;
+              } else if (n === e && s.shiftKey) {
+                const u = document.querySelector(`#${d}`);
+                if (u) u instanceof HTMLElement && (s.preventDefault(), u.focus());
+                else return;
+              }
             }
           }
-          p.value = e;
-        }
+        };
+        return {
+          ...q,
+          disabled: q.disabled || r.disabled,
+          id: i,
+          onClick: G,
+          onKeydown: J
+        };
+      });
+    }), v = g(), a = g();
+    ae(
+      v,
+      ([{ intersectionRatio: e }]) => {
+        e !== 1 && l.value && b();
       },
-      { immediate: !0 }
+      { threshold: [0, 1] }
     );
-    const z = t.id || `${re().id.value}`, v = `bb_dz_${z}`, i = g(!1);
-    let T;
-    const k = m(() => ({
-      "bb-dropzone": !0,
-      "bb-dropzone--errors": R.value,
-      "bb-dropzone--dragging": i.value
-    })), q = m(() => ({
-      dragging: i.value,
-      focused: h.value,
-      id: z
-    })), $ = (e) => {
-      if (i.value = !1, e.dataTransfer) {
-        e.stopImmediatePropagation();
-        let a;
-        if (a = Array.from(e.dataTransfer.files), a = _(a), t.multiple ? Array.isArray(t.modelValue) && l("update:modelValue", [...t.modelValue, ...a]) : (a = a[0], l("update:modelValue", a)), e.currentTarget instanceof HTMLLabelElement) {
-          const r = e.currentTarget.querySelector("input[type=file]");
-          r instanceof HTMLInputElement && r.focus();
+    const c = g(!1), l = g(!1), f = g(!1), p = g(!0), z = () => {
+      c.value || f.value || (l.value ? b() : L());
+    }, R = async (e) => {
+      let o = r.items.findIndex((n) => !n.disabled), t = H(
+        r.items,
+        (n) => !n.disabled
+      );
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), f.value || c.value) return;
+        if (p.value && await L(), a.value && m.value.length && o !== -1) {
+          const n = m.value[o].id, i = a.value.querySelector(`#${n}`);
+          i && i instanceof HTMLElement && i.focus();
         }
+      } else if (e.key === "ArrowUp") {
+        if (e.preventDefault(), f.value || c.value) return;
+        if (p.value && await L(), a.value && m.value.length && t !== -1) {
+          const n = m.value[t].id, i = a.value.querySelector(`#${n}`);
+          i && i instanceof HTMLElement && i.focus();
+        }
+      } else if (e.key === "Tab" && l.value && !e.shiftKey && (e.preventDefault(), a.value && m.value.length && o !== -1)) {
+        const n = m.value[o].id, i = a.value.querySelector(`#${n}`);
+        i && i instanceof HTMLElement && i.focus();
+      }
+    }, I = (e) => {
+      const o = e.target;
+      if (o && o instanceof HTMLElement) {
+        let t = !0;
+        v.value && v.value.contains(o) && (t = !1), a.value && a.value.contains(o) && (t = !1), t && b();
+      }
+    }, M = (e) => {
+      const o = e.target;
+      if (o && o instanceof HTMLElement) {
+        let t = !0;
+        v.value && v.value.contains(o) && (t = !1), a.value && a.value.contains(o) && (t = !1), t && b();
       }
-    }, H = (e) => {
-      if (e.target instanceof HTMLInputElement) {
-        if (e.target.files) {
-          let a;
-          a = _(Array.from(e.target.files)), t.multiple ? Array.isArray(t.modelValue) && l("update:modelValue", [...t.modelValue, ...a]) : (a = a[0], l("update:modelValue", a));
+    }, S = (e) => {
+      var o;
+      if (l.value && e.key === "Escape") {
+        if (((o = document.activeElement) == null ? void 0 : o.id) !== d) {
+          const t = document.querySelector(`#${d}`);
+          t instanceof HTMLElement && t.focus();
         }
-        e.target.value = "", e.target.files = null;
+        b();
       }
-    }, _ = (e) => e.filter((a, r) => {
-      if (t.maxSize && !(a.size <= t.maxSize))
-        return l("error", f.maxSize(a)), !1;
-      let o = !1;
-      return t.modelValue && (Array.isArray(t.modelValue) ? o = t.modelValue.some(
-        (s) => S(s, a)
-      ) : o = S(t.modelValue, a)), o ? (l("error", f.uniqueness(a)), !1) : t.accept && !p.value.some((n) => {
-        let u = !1;
-        return n.includes("*") ? u = u || n.split("/")[0] === a.type.split("/")[0] : u = u || n === a.type, u;
-      }) ? (l("error", f.accept(a)), !1) : t.maxFiles && Array.isArray(t.modelValue) && t.modelValue.length + r + 1 > t.maxFiles ? (l(
-        "error",
-        f.maxFiles(a, t.modelValue.length + r + 1)
-      ), !1) : !0;
-    }), N = (e) => {
-      const a = e.target;
-      if (a instanceof HTMLElement) {
-        const r = ae(
-          [a],
-          "parentElement",
-          (o) => o.classList.contains("bb-dropzone")
-        );
-        r && (r.id === v ? B() : E());
+    }, C = g(!1), L = async () => {
+      C.value = !0, await oe(50), l.value = !0, document.addEventListener("click", I, { passive: !0 }), document.addEventListener("focusin", M, { passive: !0 }), document.addEventListener("keydown", S, { passive: !0 });
+    }, b = async () => {
+      l.value = !1, document.removeEventListener("click", I), document.removeEventListener("focusin", M), document.removeEventListener("keydown", S);
+    }, U = A(() => ({
+      class: {
+        "bb-dropdown--block": r.block,
+        [`bb-dropdown--theme-${r.theme}`]: r.theme
       }
-    }, B = () => {
-      clearTimeout(T), i.value = !0;
-    }, E = () => {
-      T = setTimeout(() => {
-        i.value = !1;
-      }, 100);
-    }, A = (e, a = 2) => {
-      if (!e) return "0 B";
-      const r = 1024, o = a || 0, s = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], n = Math.floor(Math.log(e) / Math.log(r));
-      return parseFloat((e / Math.pow(r, n)).toFixed(o)) + " " + s[n];
-    }, S = (e, a) => !["name", "size", "lastModified", "type"].some((o) => e[o] !== a[o]), f = {
-      maxSize: (e) => {
-        if (t.maxSize)
-          return {
-            type: "maxSize",
-            file: e,
-            formattedMaxSize: A(+t.maxSize),
-            formattedSize: A(e.size),
-            filename: e.name
-          };
-        throw new Error(
-          "Requested to create an error for maxSize without providing a maxSize."
-        );
-      },
-      uniqueness: (e) => ({
-        type: "uniqueness",
-        file: e,
-        filename: e.name
-      }),
-      accept: (e) => ({
-        type: "accept",
-        file: e,
-        acceptedMimeTypes: p.value,
-        mimeType: e.type,
-        filename: e.name
-      }),
-      maxFiles: (e, a) => ({
-        type: "maxFiles",
-        file: e,
-        maxFiles: t.maxFiles,
-        totalFiles: a,
-        filename: e.name
-      })
-    }, w = m(() => t.errors ? [].concat(t.errors) : []), R = m(
-      () => !!w.value.length || t.hasErrors
-    );
-    return (e, a) => (V(), G(K(e.tag), {
-      id: v,
-      class: O(k.value)
-    }, {
-      default: M(() => [
-        c("label", {
-          onDragenter: y(B, ["prevent"]),
-          onDragleave: y(E, ["prevent"]),
-          onDragover: y(N, ["prevent"]),
-          onDrop: y($, ["prevent"])
-        }, [
-          c("input", {
-            accept: P.value,
-            autofocus: e.autofocus,
-            class: "sr-only",
-            disabled: e.disabled,
-            multiple: e.multiple,
-            type: "file",
-            onBlur: L,
-            onChange: H,
-            onFocus: I
-          }, null, 40, le),
-          U(e.$slots, "default", Y(Z(q.value)))
-        ], 32),
-        c("label", se, [
-          J(" Server files "),
-          c("input", {
-            id: Q(z),
-            ref_key: "submittable",
-            ref: d,
-            class: "bb-dropzone__submittable-input sr-only",
-            disabled: e.disabled,
-            multiple: e.multiple,
-            name: e.name,
-            type: "file"
-          }, null, 8, ne)
+    }));
+    return (e, o) => ($(), D("span", B({ class: "bb-dropdown" }, U.value), [
+      O("span", {
+        ref_key: "wrapper",
+        ref: v,
+        class: "bb-dropdown__wrapper"
+      }, [
+        w(e.$slots, "activator", X(Y({
+          props: {
+            "aria-expanded": l.value,
+            "aria-controls": `menu_${h(d)}`,
+            id: h(d),
+            onClick: z,
+            onKeydown: R,
+            disabled: e.disabled
+          },
+          closed: p.value,
+          closing: f.value,
+          disabled: e.disabled,
+          open: l.value,
+          opening: c.value,
+          placement: e.placement
+        })))
+      ], 512),
+      C.value || e.eager ? ($(), Z(h(j), {
+        key: 0,
+        "arrow-padding": e.arrowPadding,
+        "base-class": "bb-dropdown",
+        "container-attributes": {
+          id: `menu_${h(d)}`,
+          "aria-labelledby": h(d),
+          "aria-role": "menu"
+        },
+        eager: e.eager,
+        offset: e.offset,
+        open: l.value,
+        padding: e.padding,
+        placement: e.placement,
+        theme: e.theme,
+        "transition-duration": e.transitionDuration,
+        wrapper: v.value
+      }, {
+        default: K(() => [
+          O("span", {
+            ref_key: "content",
+            ref: a,
+            class: "bb-dropdown__items-container",
+            style: _({ width: `${e.width}px` })
+          }, [
+            w(e.$slots, "prepend", {
+              closed: p.value,
+              closing: f.value,
+              disabled: e.disabled,
+              open: l.value,
+              opening: c.value,
+              placement: e.placement
+            }),
+            ($(!0), D(P, null, x(m.value, (t, n) => ($(), D(P, {
+              key: t.key
+            }, [
+              w(e.$slots, "item:prepend", {
+                closed: p.value,
+                closing: f.value,
+                disabled: t.disabled,
+                index: n,
+                item: e.items[n],
+                open: l.value,
+                opening: c.value,
+                placement: e.placement,
+                text: t.text
+              }),
+              ee(le, B({
+                "aria-role": "menuitem",
+                class: ["bb-dropdown__item", {
+                  "bb-dropdown__item--first": n === 0,
+                  "bb-dropdown__item--last": n === e.items.length - 1
+                }],
+                "data-dropdown-item": !0,
+                ref_for: !0
+              }, t), {
+                default: K(() => [
+                  w(e.$slots, t.key, {
+                    closed: p.value,
+                    closing: f.value,
+                    disabled: t.disabled,
+                    index: n,
+                    item: t,
+                    open: l.value,
+                    opening: c.value,
+                    placement: e.placement,
+                    text: t.text
+                  }, () => [
+                    w(e.$slots, "item", {
+                      closed: p.value,
+                      closing: f.value,
+                      disabled: t.disabled,
+                      index: n,
+                      item: t,
+                      open: l.value,
+                      opening: c.value,
+                      placement: e.placement,
+                      text: t.text
+                    })
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class"]),
+              w(e.$slots, "item:append", {
+                closed: p.value,
+                closing: f.value,
+                disabled: t.disabled,
+                index: n,
+                item: e.items[n],
+                open: l.value,
+                opening: c.value,
+                placement: e.placement,
+                text: t.text
+              })
+            ], 64))), 128)),
+            w(e.$slots, "append", {
+              closed: p.value,
+              closing: f.value,
+              disabled: e.disabled,
+              open: l.value,
+              opening: c.value,
+              placement: e.placement
+            })
+          ], 4)
         ]),
-        c("span", ie, [
-          W(oe, { tag: "span" }, {
-            default: M(() => [
-              (V(!0), F(X, null, ee(w.value, (r) => (V(), F("span", {
-                key: r,
-                class: "bb-dropzone__error"
-              }, te(r), 1))), 128))
-            ]),
-            _: 1
-          })
-        ])
-      ]),
-      _: 3
-    }, 8, ["class"]));
+        _: 3
+      }, 8, ["arrow-padding", "container-attributes", "eager", "offset", "open", "padding", "placement", "theme", "transition-duration", "wrapper"])) : te("", !0)
+    ], 16));
   }
 });
 export {
-  fe as default
+  me as default
 };