btt-ui 1.0.0

package/es/src/checkbox/src/checkbox2.mjs

@@ -0,0 +1,68 @@
+import { defineComponent as m, inject as V, computed as g, openBlock as C, createElementBlock as x, normalizeClass as t, unref as n, withModifiers as y, createElementVNode as u, renderSlot as N, createTextVNode as _, toDisplayString as w } from "vue";
+import { createNamespace as B } from "../../../assets/ts/utils.mjs";
+import { CheckboxProps as E, checkboxGroupContextKey as S } from "./checkbox.mjs";
+import "./style/index.css";
+const j = ["value", "disabled"], z = m({
+  name: "k-checkbox"
+}), M = m({
+  ...z,
+  props: E,
+  emits: ["update:modelValue"],
+  setup(b, { emit: f }) {
+    const a = b, k = f, { n: s } = B("checkbox"), l = V(S, void 0), i = g({
+      get: () => {
+        var e;
+        return l && l.group ? (e = l.modelValue) == null ? void 0 : e.value.some((r) => r === a.label) : a.modelValue;
+      },
+      set: (e) => {
+        var o, r, p;
+        if (l && l.group) {
+          const d = l;
+          if (e)
+            (p = d.modelValue) == null || p.value.push(a.label);
+          else {
+            const h = (o = d.modelValue) == null ? void 0 : o.value.findIndex((v) => v === a.label);
+            (r = d.modelValue) == null || r.value.splice(h, 1);
+          }
+        }
+        k("update:modelValue", e);
+      }
+    }), c = () => {
+      if (a.disabled)
+        return;
+      const e = !i.value;
+      i.value = e;
+    };
+    return (e, o) => (C(), x("label", {
+      class: t([n(s)(), { "is-checked": i.value, "is-disabled": e.disabled, "is-indeterminate": e.indeterminate }]),
+      onClick: o[0] || (o[0] = y(() => {
+      }, ["stop"]))
+    }, [
+      u("span", {
+        class: t([n(s)("input")])
+      }, [
+        u("input", {
+          class: t([n(s)("original")]),
+          type: "checkbox",
+          value: i.value,
+          disabled: e.disabled
+        }, null, 10, j),
+        u("span", {
+          class: t(n(s)("inner")),
+          onClick: c
+        }, null, 2)
+      ], 2),
+      u("span", {
+        class: t([n(s)("label")]),
+        onClick: c
+      }, [
+        N(e.$slots, "default", {}, () => [
+          _(w(e.label), 1)
+        ])
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  M as default
+};

package/es/src/checkbox/src/style/index.css

@@ -0,0 +1,111 @@
+.k-checkbox {
+  --k-checkbox-checked-text-color: var(--k-color-primary);
+  --k-checkbox-checked-bg-color: var(--k-color-primary);
+  --k-checkbox-checked-input-border-color: var(--k-color-primary);
+  --k-checkbox-checked-icon-color: var(--k-color-white);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 30px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.k-checkbox.is-checked:not(.is-indeterminate) .k-checkbox__label {
+  color: var(--k-checkbox-checked-text-color);
+}
+.k-checkbox.is-checked:not(.is-indeterminate) .k-checkbox__inner {
+  background-color: var(--k-checkbox-checked-bg-color);
+  border-color: var(--k-checkbox-checked-input-border-color);
+}
+.k-checkbox.is-checked:not(.is-indeterminate) .k-checkbox__inner::after {
+  transform: rotate(45deg) scaleY(1);
+}
+.k-checkbox.is-indeterminate .k-checkbox__inner {
+  background-color: var(--k-checkbox-checked-bg-color);
+  border-color: var(--k-checkbox-checked-input-border-color);
+}
+.k-checkbox.is-indeterminate .k-checkbox__inner::after {
+  display: none;
+}
+.k-checkbox.is-indeterminate .k-checkbox__inner::before {
+  content: "";
+  position: absolute;
+  display: block;
+  background-color: var(--k-checkbox-checked-icon-color);
+  height: 2px;
+  transform: scale(0.5);
+  left: 0;
+  right: 0;
+  top: 5px;
+}
+.k-checkbox.is-disabled {
+  cursor: not-allowed;
+}
+.k-checkbox.is-disabled .k-checkbox__label {
+  padding: 0 0 0 8px;
+  color: var(--k-disabled-text-color);
+}
+.k-checkbox.is-disabled .k-checkbox__input,
+.k-checkbox.is-disabled .k-checkbox__inner {
+  background-color: var(--k-disabled-bg-color);
+  border-color: var(--k-disabled-border-color);
+}
+.k-checkbox:last-of-type {
+  margin-right: 0;
+}
+.k-checkbox__input {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+.k-checkbox__inner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: var(--k-border);
+  border-radius: 2px;
+  transition: all 0.2s;
+  text-align: center;
+  line-height: 14px;
+  color: #fff;
+  box-sizing: border-box;
+  z-index: 88;
+  top: 0;
+  z-index: 99;
+  background: #fff;
+}
+.k-checkbox__inner::after {
+  box-sizing: content-box;
+  content: "";
+  border: 1px solid var(--k-checkbox-checked-icon-color);
+  border-left: 0;
+  border-top: 0;
+  height: 7px;
+  left: 4px;
+  position: absolute;
+  top: 1px;
+  transform: rotate(45deg) scaleY(1);
+  width: 3px;
+  transition: transform 0.15s ease-in 0.05s;
+  transform-origin: center;
+}
+.k-checkbox__inner .k-icon {
+  transform: translateY(-1px);
+}
+.k-checkbox__original {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  margin: 0;
+  width: 0;
+  height: 0;
+  z-index: -1;
+}
+.k-checkbox__label {
+  padding: 0 0 0 8px;
+}

package/es/src/collapse/index.mjs

@@ -0,0 +1,9 @@
+import { withInstall as o } from "../../assets/ts/utils.mjs";
+import t from "./src/collapse2.mjs";
+import m from "./src/collapse-item.mjs";
+const r = o(t), f = o(m);
+export {
+  r as KCollapse,
+  f as KCollapseItem,
+  r as default
+};

package/es/src/collapse/src/collapse-item.mjs

@@ -0,0 +1,82 @@
+import { defineComponent as m, inject as f, computed as u, openBlock as v, createElementBlock as g, normalizeClass as s, unref as t, createElementVNode as i, renderSlot as c, createTextVNode as y, toDisplayString as b, createVNode as d, Transition as w, mergeProps as k, toHandlers as C, withCtx as N, withDirectives as x, vShow as H } from "vue";
+import { createNamespace as S } from "../../../assets/ts/utils.mjs";
+import { collapseContextKey as _ } from "./collapse.mjs";
+import { Icon as B } from "../../icon/index.mjs";
+import "./style/index.css";
+const E = m({
+  name: "k-collapse-item"
+}), z = m({
+  ...E,
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: [String, Number],
+      default: ""
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  setup(o) {
+    const l = f(_), n = o, r = u(() => l == null ? void 0 : l.activeNames.value.includes(n.name)), { n: a } = S("collapse-item");
+    function p() {
+      n.disabled || l == null || l.handleItemClick(n.name);
+    }
+    const h = {
+      beforeEnter(e) {
+        e.style.height = "0px";
+      },
+      enter(e) {
+        e.scrollHeight !== 0 ? e.style.height = e.scrollHeight + "px" : e.style.height = "0px";
+      },
+      beforeLeave(e) {
+        e.style.height = `${e.scrollHeight}px`, e.style.overflow = "hidden";
+      },
+      leave(e) {
+        e.scrollHeight !== 0 && (e.style.height = "0px");
+      }
+    };
+    return (e, V) => (v(), g("div", {
+      class: s([t(a)(), { "is-active": r.value, "is-disabled": o.disabled }])
+    }, [
+      i("div", {
+        class: s([t(a)("tab")]),
+        onClick: p
+      }, [
+        i("div", {
+          class: s([t(a)("tab__head")])
+        }, [
+          c(e.$slots, "title", {}, () => [
+            y(b(o.title), 1)
+          ]),
+          d(t(B), {
+            class: s([t(a)("arrow"), { "is-active": r.value }]),
+            name: "arrow-right"
+          }, null, 8, ["class"])
+        ], 2)
+      ], 2),
+      d(w, k({ name: "k-collapse" }, C(h)), {
+        default: N(() => [
+          x(i("div", {
+            class: s([t(a)("wrap")])
+          }, [
+            i("div", {
+              class: s([t(a)("content")])
+            }, [
+              c(e.$slots, "default")
+            ], 2)
+          ], 2), [
+            [H, r.value]
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 2));
+  }
+});
+export {
+  z as default
+};

package/es/src/collapse/src/collapse.mjs

@@ -0,0 +1,13 @@
+const o = {
+  modelValue: {
+    type: [String, Array],
+    default: () => []
+  },
+  accordion: {
+    type: Boolean
+  }
+}, e = Symbol("collapseContextKey");
+export {
+  o as CollapseProps,
+  e as collapseContextKey
+};

package/es/src/collapse/src/collapse2.mjs

@@ -0,0 +1,33 @@
+import { defineComponent as s, computed as d, provide as u, openBlock as m, createElementBlock as p, normalizeClass as f, unref as v, renderSlot as _ } from "vue";
+import { createNamespace as C } from "../../../assets/ts/utils.mjs";
+import { CollapseProps as V, collapseContextKey as h } from "./collapse.mjs";
+import "./style/index.css";
+const k = s({
+  name: "k-collapse"
+}), B = s({
+  ...k,
+  props: V,
+  emits: ["update:modelValue", "change"],
+  setup(c, { emit: n }) {
+    const l = c, t = n, { n: i } = C("collapse"), o = d({
+      get: () => Array.isArray(l.modelValue) && !l.accordion ? l.modelValue : [l.modelValue],
+      set: (e) => {
+        l.accordion ? t("update:modelValue", e[0]) : t("update:modelValue", [...e]), t("change", e);
+      }
+    });
+    return u(h, {
+      activeNames: o,
+      handleItemClick: (e) => {
+        const a = o.value.findIndex((r) => r === e);
+        l.accordion ? o.value = a === -1 ? [e] : [] : a === -1 ? o.value = [...o.value, e] : o.value = o.value.filter((r) => r !== e);
+      }
+    }), (e, a) => (m(), p("div", {
+      class: f([v(i)()])
+    }, [
+      _(e.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  B as default
+};

package/es/src/collapse/src/style/index.css

@@ -0,0 +1,58 @@
+.k-collapse {
+  --k-collapse-header-height: 48px;
+  --k-collapse-header-font-size: 13px;
+  --k-collapse-bg-color: var(--k-color-white);
+}
+
+.k-collapse-item.is-active .k-collapse-item__tab .k-collapse-item__tab__head {
+  border-bottom-color: transparent;
+}
+.k-collapse-item.is-active .k-collapse-item__arrow {
+  transform: rotate(90deg);
+}
+.k-collapse-item.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--k-disabled-bg-color);
+}
+.k-collapse-item.is-disabled .k-collapse-item__tab .k-collapse-item__tab__head,
+.k-collapse-item.is-disabled .k-collapse-item__wrap {
+  color: var(--k-disabled-text-color);
+  background-color: var(--k-disabled-bg-color);
+}
+.k-collapse-item__tab__head {
+  touch-action: manipulation;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--k-collapse-header-height);
+  line-height: var(--k-collapse-header-height);
+  background-color: var(--k-collapse-bg-color);
+  color: var(--k-text-color-primary);
+  cursor: pointer;
+  border-bottom: 1px solid var(--k-border-color);
+  font-size: var(--k-collapse-header-font-size);
+  font-weight: 500;
+  transition: border-bottom-color var(--k-transition-duration);
+  outline: none;
+}
+.k-collapse-item__wrap {
+  will-change: height;
+  background-color: var(--k-collapse-bg-color);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--k-border-color);
+  transition: height 0.3s;
+}
+.k-collapse-item__content {
+  padding-bottom: 25px;
+  font-size: 13px;
+  will-change: height;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--k-border-color);
+}
+.k-collapse-item__arrow {
+  display: block;
+  margin: 0 8px 0 auto;
+  transition: transform var(--k-transition-duration);
+  font-weight: 300;
+}

package/es/src/collapse-transition/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as o } from "../../assets/ts/utils.mjs";
+import t from "./src/collapse-transition.mjs";
+const r = o(t);
+export {
+  r as KCollapseTransition,
+  r as default
+};

package/es/src/collapse-transition/src/collapse-transition.mjs

@@ -0,0 +1,41 @@
+import { defineComponent as o, openBlock as e, createBlock as s, Transition as n, mergeProps as i, unref as r, toHandlers as p, withCtx as g, renderSlot as l } from "vue";
+import { createNamespace as m } from "../../../assets/ts/utils.mjs";
+import "./collapse-transition.vue_vue_type_style_index_0_lang.mjs";
+const f = o({
+  name: "k-collapse-transition"
+}), T = o({
+  ...f,
+  setup(y) {
+    const { n: a } = m("collapse-transition"), d = {
+      beforeEnter(t) {
+        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.style.maxHeight = 0, t.style.paddingTop = 0, t.style.paddingBottom = 0;
+      },
+      enter(t) {
+        t.dataset.oldOverflow = t.style.overflow, t.scrollHeight !== 0 ? (t.style.maxHeight = `${t.scrollHeight}px`, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom) : (t.style.maxHeight = 0, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom), t.style.overflow = "hidden";
+      },
+      afterEnter(t) {
+        t.style.maxHeight = "", t.style.overflow = t.dataset.oldOverflow;
+      },
+      beforeLeave(t) {
+        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.dataset.oldOverflow = t.style.overflow, t.style.maxHeight = `${t.scrollHeight}px`, t.style.overflow = "hidden";
+      },
+      leave(t) {
+        t.scrollHeight !== 0 && (t.style.maxHeight = 0, t.style.paddingTop = 0, t.style.paddingBottom = 0);
+      },
+      afterLeave(t) {
+        t.style.maxHeight = "", t.style.overflow = t.dataset.oldOverflow, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom;
+      }
+    };
+    return (t, c) => (e(), s(n, i({
+      name: r(a)()
+    }, p(d)), {
+      default: g(() => [
+        l(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["name"]));
+  }
+});
+export {
+  T as default
+};

package/es/src/collapse-transition/src/collapse-transition.vue_vue_type_style_index_0_lang.mjs

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/es/src/dialog/index.mjs

@@ -0,0 +1,6 @@
+import { withInstall as o } from "../../assets/ts/utils.mjs";
+import t from "./src/dialog.mjs";
+const m = o(t);
+export {
+  m as default
+};

package/es/src/dialog/src/dialog.mjs

@@ -0,0 +1,117 @@
+import { defineComponent as V, ref as h, watch as I, openBlock as r, createBlock as b, Teleport as L, unref as o, withModifiers as w, withCtx as M, createElementVNode as x, normalizeClass as d, normalizeStyle as N, createElementBlock as m, renderSlot as g, toDisplayString as R, createCommentVNode as f, createVNode as $, nextTick as O } from "vue";
+import { Overlay as P } from "../../overlay/index.mjs";
+import { createNamespace as S } from "../../../assets/ts/utils.mjs";
+import { Icon as H } from "../../icon/index.mjs";
+import "./style/index.css";
+const X = V({
+  name: "k-dialog"
+}), G = V({
+  ...X,
+  props: {
+    title: { default: "" },
+    showHeader: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    top: { default: 150 },
+    draggable: { type: Boolean, default: !0 },
+    width: { default: 1e3 },
+    modelValue: { type: Boolean, default: !1 },
+    closeOnClickModal: { type: Boolean, default: !1 },
+    closeDelay: { default: 0 },
+    beforeClose: {},
+    zIndex: { default: 2e3 },
+    teleportTo: { default: "body" }
+  },
+  emits: ["update:modelValue", "open", "opened", "close", "closed"],
+  setup(B, { emit: z }) {
+    const { n: l } = S("dialog"), y = h(!1), a = B, v = z;
+    y.value = a.modelValue;
+    const i = h(), k = h(), C = () => {
+      const e = () => {
+        setTimeout(() => {
+          y.value = !1, v("closed"), v("update:modelValue", y.value);
+        }, a.closeDelay);
+      };
+      if (a.beforeClose)
+        return a.beforeClose(() => e());
+      v("close"), e();
+    }, E = () => {
+      a.closeOnClickModal && C();
+    }, D = () => {
+      C();
+    };
+    let n = !1, u = { x: 0, y: 0 }, c = { x: 0, y: 0 };
+    const T = () => {
+      let e = 0, s = 0;
+      O(() => {
+        k.value.style.transform = "translate3d(" + e + "px, " + s + "px, 0)", i.value.addEventListener("pointerdown", function(t) {
+          n = !0, t.target.setPointerCapture(t.pointerId), c = { x: t.clientX, y: t.clientY };
+        }), i.value.addEventListener("pointermove", function(t) {
+          if (n) {
+            const p = { x: t.clientX, y: t.clientY };
+            u.x = p.x - c.x, u.y = p.y - c.y, c = { x: p.x, y: p.y }, e += u.x, s += u.y, k.value.style.transform = "translate3d(" + e + "px, " + s + "px, 0)", t.preventDefault();
+          }
+        }), i.value.addEventListener("pointerup", function() {
+          n && (n = !1);
+        }), i.value.addEventListener("pointercancel", function() {
+          n && (n = !1);
+        });
+      });
+    };
+    return I(() => a.modelValue, (e) => {
+      e && T();
+    }), (e, s) => (r(), b(L, { to: e.teleportTo }, [
+      e.modelValue ? (r(), b(o(P), {
+        key: 0,
+        onClick: w(E, ["stop"]),
+        "z-index": e.zIndex
+      }, {
+        default: M(() => [
+          x("div", {
+            ref_key: "targetRef",
+            ref: k,
+            class: d([o(l)(), "slide-in-top"]),
+            style: N({ top: e.top, width: e.width }),
+            onClick: s[0] || (s[0] = w(() => {
+            }, ["stop"]))
+          }, [
+            e.showHeader ? (r(), m("div", {
+              key: 0,
+              ref_key: "handleRef",
+              ref: i,
+              class: d([o(l)("header"), e.draggable && "is-draggable"])
+            }, [
+              g(e.$slots, "header", { close: C }, () => [
+                e.title ? (r(), m("span", {
+                  key: 0,
+                  class: d([o(l)("title")])
+                }, R(e.title), 3)) : f("", !0),
+                e.showClose ? (r(), m("button", {
+                  key: 1,
+                  class: d([o(l)("headerbtn")]),
+                  onClick: D
+                }, [
+                  $(o(H), { name: "close" })
+                ], 2)) : f("", !0)
+              ])
+            ], 2)) : f("", !0),
+            x("div", {
+              class: d([o(l)("body")])
+            }, [
+              g(e.$slots, "default")
+            ], 2),
+            e.$slots.footer ? (r(), m("div", {
+              key: 1,
+              class: d([o(l)("footer")])
+            }, [
+              g(e.$slots, "footer")
+            ], 2)) : f("", !0)
+          ], 6)
+        ]),
+        _: 3
+      }, 8, ["z-index"])) : f("", !0)
+    ], 8, ["to"]));
+  }
+});
+export {
+  G as default
+};

package/es/src/dialog/src/style/index.css

@@ -0,0 +1,58 @@
+.k-dialog {
+  --k-dialog-width: 50%;
+  --k-dialog-margin-top: 15vh;
+  --k-dialog-bg-color: var(--k-bg-color);
+  --k-dialog-box-shadow: var(--k-box-shadow);
+  --k-dialog-title-font-size: var(--k-font-size-large);
+  --k-dialog-content-font-size: 14px;
+  --k-dialog-font-line-height: var(--k-font-line-height-primary);
+  --k-dialog-padding-primary: 14px;
+  --k-dialog-border-radius: var(--k-radius-small);
+  position: relative;
+  background: var(--k-dialog-bg-color);
+  border-radius: var(--k-dialog-border-radius);
+  box-shadow: var(--k-dialog-box-shadow);
+  box-sizing: border-box;
+  width: var(--k-dialog-width, 50%);
+  vertical-align: middle;
+  text-align: left;
+  display: inline-block;
+}
+.k-dialog__header {
+  padding: var(--k-dialog-padding-primary);
+  padding-bottom: 10px;
+  word-break: break-all;
+}
+.k-dialog__title {
+  line-height: var(--k-dialog-font-line-height);
+  font-size: var(--k-dialog-title-font-size);
+  color: var(--k-text-color-primary);
+}
+.k-dialog__headerbtn {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  padding: 0;
+  width: 54px;
+  height: 54px;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: var(--k-message-close-size, 16px);
+}
+.k-dialog__body {
+  padding: calc(var(--k-dialog-padding-primary));
+  color: var(--k-text-color-regular);
+  font-size: var(--k-dialog-content-font-size);
+  word-break: break-all;
+}
+.k-dialog__footer {
+  padding: var(--k-dialog-padding-primary);
+  padding-top: 10px;
+  text-align: right;
+  box-sizing: border-box;
+}
+.k-dialog .is-draggable {
+  cursor: move;
+}

package/es/src/directives/bubble.mjs

@@ -0,0 +1,48 @@
+class h {
+  constructor(t) {
+    this.canvas = document.createElement("canvas"), this.el = t, this.bbox = this.el.getBoundingClientRect(), this.canvas.width = this.bbox.width, this.canvas.height = this.bbox.height, this.ctx = this.canvas.getContext("2d"), this.el.appendChild(this.canvas);
+  }
+}
+class a extends h {
+  constructor(t, s) {
+    super(t), this.animateHeader = !0, this.bubbles = new Array(), this.num = 50, this.speed = 0.4, this.type = "circle", this.num = s.num, this.speed = s.speed, this.type = s.type, this.setStyle(), this.init();
+  }
+  init() {
+    for (let t = 0; t < this.num; t++)
+      this.bubbles.push(new l(this));
+    this.animate();
+  }
+  setStyle() {
+    this.el.style.position = "relative", this.canvas.style.position = "absolute", this.canvas.style.zIndex = "1", this.canvas.style.left = "0", this.canvas.style.top = "0", this.canvas.style.pointerEvents = "none";
+  }
+  animate() {
+    this.animateHeader && (this.ctx.clearRect(0, 0, this.bbox.width, this.bbox.height), this.bubbles.forEach((t) => {
+      t.draw();
+    })), requestAnimationFrame(() => this.animate());
+  }
+}
+class l {
+  constructor(t) {
+    this.pos = { x: 0, y: 0 }, this.alpha = 0, this.alpha_change = 0, this.speed = 1, this.scale = 1, this.scale_change = 0.2, this._bubbleFactory = t, this.init();
+  }
+  init() {
+    this.pos.x = Math.random() * this._bubbleFactory.bbox.width, this.pos.y = this._bubbleFactory.bbox.height + Math.random() * 100, this.alpha = 0.1 + Math.random() * 0.3, this.alpha_change = 2e-4 + Math.random() * 5e-4, this.scale = 0.2 + Math.random() * 0.5, this.scale_change = Math.random() * 2e-3, this.speed = 0.1 + Math.random() * this._bubbleFactory.speed;
+  }
+  draw() {
+    this.alpha <= 0 && this.init();
+    let t = this._bubbleFactory.ctx;
+    this.pos.y -= this.speed, this.alpha -= this.alpha_change, this.scale += this.scale_change, this._bubbleFactory.type == "circle" ? (t.beginPath(), t.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, !1), t.fillStyle = "rgba(255,255,255," + this.alpha + ")", t.fill()) : (t.lineWidth = 0.6, t.strokeStyle = "rgba(255,255,255," + this.alpha + ")", t.beginPath(), t.moveTo(this.pos.x, this.pos.y), t.lineTo(this.pos.x, this.pos.y - this._bubbleFactory.bbox.height / 3), t.closePath(), t.stroke());
+  }
+}
+const n = {
+  mounted(e, t) {
+    let s = t.value, i = { num: 50, speed: 0.3, type: "circle" };
+    s && (i = { ...i, ...s }), new a(e, i);
+  },
+  unmounted() {
+    console.log("distory");
+  }
+};
+export {
+  n as bubble
+};