bani-ui 1.0.2-alpha.4 → 1.0.2-alpha.6

package/dist/es/{Button-CVCKNr_z.js → Button-eQN4Iutg.js}

@@ -1,9 +1,9 @@
 import { defineComponent as $, inject as N, computed as l, useSlots as O, ref as U, openBlock as m, createBlock as y, resolveDynamicComponent as w, unref as B, normalizeClass as D, withCtx as I, renderSlot as g, createVNode as R, normalizeStyle as b, createCommentVNode as v } from "vue";
-import { _ as h } from "./Icon-CrwMq7oY.js";
+import { _ as h } from "./Icon-CL9G-J0o.js";
 import { faSpinner as p } from "@fortawesome/free-solid-svg-icons";
 import { library as E } from "@fortawesome/fontawesome-svg-core";
-import { t as G } from "./vendor-vd2Uvf7X.js";
-import { w as K } from "./utils-CWTCZ0kD.js";
+import { t as G } from "./vendor-CZxuzErw.js";
+import { w as K } from "./utils-CKyHXHob.js";
 const P = Symbol(
   "BUTTON_GROUP_CTX_KEY"
 ), V = /* @__PURE__ */ $({

package/dist/es/ButtonGroup-BequUrIT.js

@@ -0,0 +1,29 @@
+import { defineComponent as n, provide as s, reactive as p, toRef as t, openBlock as i, createElementBlock as a, renderSlot as l } from "vue";
+import { B as c } from "./Button-eQN4Iutg.js";
+import { w as d } from "./utils-CKyHXHob.js";
+import "@fortawesome/free-solid-svg-icons";
+const m = { class: "er-button-group" }, u = /* @__PURE__ */ n({
+  name: "BnButtonGroup",
+  __name: "ButtonGroup",
+  props: {
+    size: {},
+    type: {},
+    disabled: { type: Boolean }
+  },
+  setup(o) {
+    const e = o;
+    return s(
+      c,
+      p({
+        size: t(e, "size"),
+        type: t(e, "type"),
+        disabled: t(e, "disabled")
+      })
+    ), (r, B) => (i(), a("div", m, [
+      l(r.$slots, "default")
+    ]));
+  }
+}), G = d(u);
+export {
+  G as B
+};

package/dist/es/{Icon-CrwMq7oY.js → Icon-CL9G-J0o.js}

@@ -1,8 +1,9 @@
-import { defineComponent as r, computed as t, openBlock as p, createElementBlock as s, mergeProps as i, createVNode as c, unref as m, normalizeProps as y, guardReactiveProps as B } from "vue";
+import { defineComponent as l, computed as t, openBlock as p, createElementBlock as s, mergeProps as i, createVNode as c, unref as m, normalizeProps as y, guardReactiveProps as B } from "vue";
 import { FontAwesomeIcon as u } from "@fortawesome/vue-fontawesome";
-import { o as f } from "./vendor-vd2Uvf7X.js";
-import { w as d } from "./utils-CWTCZ0kD.js";
-const v = /* @__PURE__ */ r({
+import { o as f } from "./vendor-CZxuzErw.js";
+import { w as d } from "./utils-CKyHXHob.js";
+import "@fortawesome/free-solid-svg-icons";
+const v = /* @__PURE__ */ l({
   name: "BnIcon",
   inheritAttrs: !1,
   __name: "Icon",
@@ -35,15 +36,15 @@ const v = /* @__PURE__ */ r({
   },
   setup(e) {
     const o = e, n = t(() => f(o, ["type", "color"])), a = t(() => ({ color: o.color ?? void 0 }));
-    return (l, I) => (p(), s("i", i({
+    return (r, I) => (p(), s("i", i({
       class: ["er-icon", [`er-icon--${e.type}`]],
       style: a.value
-    }, l.$attrs), [
+    }, r.$attrs), [
       c(m(u), y(B(n.value)), null, 16)
     ], 16));
   }
-}), w = d(v);
+}), _ = d(v);
 export {
-  w as B,
+  _ as B,
   v as _
 };

package/dist/es/Message-BZ2T08zu.js

@@ -0,0 +1,166 @@
+import { defineComponent as R, ref as g, computed as x, onMounted as $, watch as D, openBlock as v, createBlock as w, Transition as S, withCtx as T, withDirectives as V, createElementVNode as B, normalizeStyle as L, normalizeClass as A, createVNode as C, renderSlot as Z, unref as F, createCommentVNode as I, createElementBlock as H, withModifiers as j, vShow as q, shallowReactive as G, isVNode as J, h as K, render as N } from "vue";
+import { b as P, u as Q, c as U, a as W } from "./hooks-CkxWXunh.js";
+import { t as X, R as Y, a as _ } from "./utils-CKyHXHob.js";
+import { _ as k } from "./Icon-CL9G-J0o.js";
+import { b as ee, d as te, a as z, c as se, f as M, g as ne, s as oe } from "./vendor-CZxuzErw.js";
+import "@fortawesome/free-solid-svg-icons";
+const ae = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "error"
+], re = { class: "er-message__content" }, ie = {
+  key: 0,
+  class: "er-message__close"
+}, ce = /* @__PURE__ */ R({
+  name: "BnMessage",
+  __name: "Message",
+  props: {
+    id: {},
+    message: {},
+    duration: { default: 3e3 },
+    showClose: { type: Boolean },
+    center: { type: Boolean },
+    type: { default: "info" },
+    offset: { default: 10 },
+    zIndex: {},
+    transitionName: { default: "fade-up" },
+    onDestory: {}
+  },
+  setup(e, { expose: t }) {
+    const s = e, n = g(!1), i = g(), c = x(() => X.get(s.type) ?? "circle-info"), o = g(0), { topOffset: p, bottomOffset: d } = P({
+      getLastBottomOffset: ee(ue, s),
+      offset: s.offset,
+      boxHeight: o
+    }), f = x(() => ({
+      top: p.value + "px",
+      zIndex: s.zIndex
+    }));
+    let h;
+    function y() {
+      s.duration !== 0 && (h = te(u, s.duration));
+    }
+    function E() {
+      clearTimeout(h);
+    }
+    function u() {
+      n.value = !1;
+    }
+    return $(() => {
+      n.value = !0, y();
+    }), D(n, (l) => {
+      l || (o.value = -s.offset);
+    }), Q(document, "keydown", (l) => {
+      const { code: a } = l;
+      a === "Escape" && u();
+    }), t({
+      bottomOffset: d,
+      close: u
+    }), (l, a) => (v(), w(S, {
+      name: e.transitionName,
+      onEnter: a[0] || (a[0] = (O) => o.value = i.value.getBoundingClientRect().height),
+      onAfterLeave: a[1] || (a[1] = (O) => !n.value && e.onDestory())
+    }, {
+      default: T(() => [
+        V(B("div", {
+          ref_key: "messageRef",
+          ref: i,
+          class: A(["er-message", {
+            [`er-message--${e.type}`]: e.type,
+            "is-close": e.showClose,
+            "text-center": e.center
+          }]),
+          style: L(f.value),
+          role: "alert",
+          onMouseenter: E,
+          onMouseleave: y
+        }, [
+          C(k, {
+            class: "er-message__icon",
+            icon: c.value
+          }, null, 8, ["icon"]),
+          B("div", re, [
+            Z(l.$slots, "default", {}, () => [
+              e.message ? (v(), w(F(Y), {
+                key: 0,
+                vNode: e.message
+              }, null, 8, ["vNode"])) : I("", !0)
+            ])
+          ]),
+          e.showClose ? (v(), H("div", ie, [
+            C(k, {
+              icon: "xmark",
+              onClick: j(u, ["stop"])
+            })
+          ])) : I("", !0)
+        ], 38), [
+          [q, n.value]
+        ])
+      ]),
+      _: 3
+    }, 8, ["name"]));
+  }
+}), r = G([]), { nextZIndex: le } = U(), de = {
+  type: "info",
+  duration: 3e3,
+  offset: 10,
+  transitionName: "fade-up"
+};
+function b(e) {
+  const t = !e || J(e) || se(e) ? {
+    message: e
+  } : e;
+  return { ...de, ...t };
+}
+function fe(e) {
+  const t = W().value, s = document.createElement("div"), n = () => {
+    const f = M(r, { id: t });
+    f !== -1 && (r.splice(f, 1), N(null, s));
+  }, i = {
+    ...e,
+    id: t,
+    zIndex: le(),
+    onDestory: n
+  }, c = K(ce, i);
+  N(c, s), document.body.appendChild(s.firstElementChild);
+  const o = c.component, d = {
+    props: i,
+    id: t,
+    vm: o,
+    vnode: c,
+    handler: {
+      close: () => o.exposed.close()
+    }
+  };
+  return r.push(d), d;
+}
+const m = function(e = {}) {
+  const t = b(e);
+  return fe(t).handler;
+};
+function ue() {
+  const e = M(r, { id: this.id });
+  return e <= 0 ? 0 : ne(r, [e - 1, "vm", "exposed", "bottomOffset", "value"]);
+}
+function me(e) {
+  z(r, (t) => {
+    if (e) {
+      t.props.type === e && t.handler.close();
+      return;
+    }
+    t.handler.close();
+  });
+}
+z(
+  ae,
+  (e) => oe(m, e, (t) => {
+    const s = b(t);
+    return m({ ...s, type: e });
+  })
+);
+m.closeAll = me;
+const we = _(m, "$message");
+export {
+  we as B
+};

package/dist/es/hooks-CkxWXunh.js

@@ -0,0 +1,40 @@
+import { isRef as c, watch as d, onMounted as x, onBeforeUnmount as m, unref as a, computed as s, ref as r } from "vue";
+function I(e, n, t) {
+  c(e) ? d(e, (o, u) => {
+    u == null || u.removeEventListener(n, t), o == null || o.addEventListener(n, t);
+  }) : x(() => e == null ? void 0 : e.addEventListener(n, t)), m(() => {
+    var o;
+    return (o = a(e)) == null ? void 0 : o.removeEventListener(n, t);
+  });
+}
+function L(e) {
+  const n = s(() => e.getLastBottomOffset()), t = s(() => e.offset + n.value), o = s(() => t.value + e.boxHeight.value);
+  return {
+    topOffset: t,
+    bottomOffset: o
+  };
+}
+const f = r(0);
+function E(e = 2e3) {
+  const n = r(e), t = s(() => f.value + n.value);
+  return {
+    initialValue: n,
+    currentZindex: t,
+    nextZIndex: () => (f.value++, t.value)
+  };
+}
+const i = {
+  prefix: Math.floor(Math.random() * 1e4),
+  current: 0
+};
+function O(e = "er") {
+  return s(
+    () => `${e}-id-${i.prefix}-${i.current++}`
+  );
+}
+export {
+  O as a,
+  L as b,
+  E as c,
+  I as u
+};

package/dist/es/index.js

@@ -1,11 +1,14 @@
-import { m as o } from "./utils-CWTCZ0kD.js";
-import { a as t } from "./Button-CVCKNr_z.js";
-import { B as n } from "./ButtonGroup-DaudVIbY.js";
-import { B as r } from "./Icon-CrwMq7oY.js";
-const m = [t, n, r], e = o(m);
+import { m as o } from "./utils-CKyHXHob.js";
+import "@fortawesome/free-solid-svg-icons";
+import { a as t } from "./Button-eQN4Iutg.js";
+import { B as r } from "./ButtonGroup-BequUrIT.js";
+import { B as m } from "./Message-BZ2T08zu.js";
+import { B as n } from "./Icon-CL9G-J0o.js";
+const s = [t, r, n, m], l = o(s);
 export {
   t as BnButton,
-  n as BnButtonGroup,
-  r as BnIcon,
-  e as default
+  r as BnButtonGroup,
+  n as BnIcon,
+  m as BnMessage,
+  l as default
 };

package/dist/es/utils-CKyHXHob.js

@@ -0,0 +1,35 @@
+import { a as o, i } from "./vendor-CZxuzErw.js";
+import { faCircleInfo as s, faCheckCircle as l, faCircleExclamation as c, faCircleXmark as r } from "@fortawesome/free-solid-svg-icons";
+import { defineComponent as u } from "vue";
+function p(e) {
+  return (n) => o(e, (a) => n.use(a));
+}
+const C = (e) => (e.install = (t) => {
+  const n = e.name;
+  t.component(n, e);
+}, e), g = (e, t) => (e.install = (n) => {
+  n.config.globalProperties[t] = e;
+}, e), w = /* @__PURE__ */ new Map([
+  ["info", s],
+  ["success", l],
+  ["warning", c],
+  ["danger", r],
+  ["error", r]
+]), I = u({
+  props: {
+    vNode: {
+      type: [String, Object, Function],
+      required: !0
+    }
+  },
+  setup(e) {
+    return () => i(e.vNode) ? e.vNode() : e.vNode;
+  }
+});
+export {
+  I as R,
+  g as a,
+  p as m,
+  w as t,
+  C as w
+};