btt-ui 1.0.0

package/es/src/timeline/src/timeline.mjs

@@ -0,0 +1,96 @@
+import { defineComponent as C, ref as c, onMounted as R, openBlock as W, createElementBlock as z, normalizeClass as N, unref as _, createElementVNode as g } from "vue";
+import { createNamespace as D } from "../../../assets/ts/utils.mjs";
+import "./style/index.css";
+const F = C({
+  name: "k-timeline"
+}), X = C({
+  ...F,
+  props: {
+    options: { default: () => ({
+      startTime: "",
+      endTime: "",
+      msList: []
+    }) }
+  },
+  emits: ["update:point"],
+  setup(T, { emit: E }) {
+    const { n: a } = D("timeline"), b = E, d = c(), l = c(), v = c();
+    let o;
+    const p = c(16.2), u = c(!1), m = T;
+    function f(e) {
+      return e = e.substring(0, 19), e = e.replace(/-/g, "/"), new Date(e).getTime();
+    }
+    const r = {
+      st: f(m.options.startTime),
+      et: f(m.options.endTime)
+    }, h = new Array();
+    m.options.msList && m.options.msList.forEach((e) => {
+      h.push({
+        time: f(e.time + ""),
+        desc: e.desc
+      });
+    });
+    const w = (r.et - r.st) / 1e3, M = () => {
+      l.value.innerHTML = "", o = d.value.getBoundingClientRect();
+      let e = Math.ceil(l.value.offsetWidth / p.value);
+      for (let n = 0; n < e; n++) {
+        let i = document.createElement("span");
+        i.className = a("ticTiny"), i.id = n + "", l.value.appendChild(i), i.style.left = Math.round(p.value * n) / o.width * 100 + "%";
+      }
+      let t = Math.ceil(e / 10);
+      for (let n = 0; n < t; n += 2) {
+        let i = document.createElement("span");
+        i.className = a("ticMain"), i.id = n + "ss", l.value.appendChild(i), i.style.left = Math.round(p.value * t * n) + "px";
+        let s = document.createElement("span");
+        s.className = a("date"), s.id = n + "data", s.innerHTML = "2023-02-10 10:20:40", s.style.left = Math.round(p.value * n * t) / o.width * 100 + "%", l.value.appendChild(s);
+      }
+    }, L = () => {
+      u.value = !0;
+    }, P = (e) => {
+      let t = e / o.width;
+      return v.value.style.left = `calc(${Number((t * 100).toFixed(2))}% - 8px)`, Math.round(t * w * 1e3) + r.st;
+    }, k = (e) => {
+      e.forEach((t) => {
+        Number(t.time) < r.st || Number(t.time) > r.et || x(t);
+      });
+    }, x = (e) => {
+      let t = Number(e.time), n = (t - r.st) / 1e3, i = Number((n / w * 100).toFixed(2)), s = document.createElement("span");
+      s.className = a("timepoint"), s.dataset.ms = t + "", d.value.appendChild(s), s.style.left = i + "%", s.onclick = () => {
+        alert(e.desc);
+      };
+    }, B = (e) => {
+      if (u.value) {
+        let t = e.clientX - o.left - 8;
+        t = t < -8 ? -8 : t, t + 8 > o.width && (t = o.width - 8), b("update:point", P(t + 8));
+      }
+      e.preventDefault();
+    }, y = () => {
+      u.value = !1;
+    };
+    return R(() => {
+      d.value.getBoundingClientRect().width, M(), k(h), window.addEventListener("resize", M);
+    }), (e, t) => (W(), z("div", {
+      class: N([_(a)()]),
+      ref_key: "wrapper",
+      ref: d,
+      onPointerdown: L,
+      onPointerup: y,
+      onPointermove: B,
+      onMouseleave: y
+    }, [
+      g("div", {
+        ref_key: "timeWrapper",
+        ref: l,
+        style: { width: "100%", overflow: "hidden" }
+      }, null, 512),
+      g("div", {
+        class: N([_(a)("point")]),
+        ref_key: "refPoint",
+        ref: v
+      }, null, 2)
+    ], 34));
+  }
+});
+export {
+  X as default
+};

package/es/src/toast/index.mjs

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

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

@@ -0,0 +1,13 @@
+.k-toast {
+  position: fixed;
+  overflow: visible;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate3d(0, 0, 0);
+}

package/es/src/toast/toast.mjs

@@ -0,0 +1,17 @@
+import { defineComponent as t, openBlock as e, createElementBlock as o } from "vue";
+import "./style/index.css";
+const s = { class: "k-toast" }, a = t({
+  name: "k-toast"
+}), l = t({
+  ...a,
+  props: {
+    modelValue: Boolean
+  },
+  emits: [""],
+  setup(n) {
+    return (_, c) => (e(), o("div", s, " toast "));
+  }
+});
+export {
+  l as default
+};

package/es/src/tooltip/index.mjs

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

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

@@ -0,0 +1,4 @@
+.k-tooltip-fade-enter-from,
+.k-tooltip-fade-leave-to {
+  opacity: 0;
+}

package/es/src/tooltip/src/tooltip.mjs

@@ -0,0 +1,50 @@
+import { defineComponent as l, useAttrs as C, ref as T, computed as g, openBlock as t, createBlock as h, unref as s, mergeProps as B, withCtx as a, renderSlot as c, createElementBlock as u, Fragment as H, createTextVNode as L, toDisplayString as M } from "vue";
+import { TooltipProps as N } from "./tooltip2.mjs";
+import { KPopper as O } from "../../popper/index.mjs";
+import { useNowrap as R } from "../../popper/src/use-nowrap.mjs";
+import "./style/index.css";
+import { PopperProps as S } from "../../popper/src/popper.mjs";
+const $ = ["innerHTML"], A = l({
+  name: "k-tooltip"
+}), j = l({
+  ...A,
+  props: N,
+  setup(f, { expose: i }) {
+    const m = f, d = C(), o = T(), k = (e, r) => r.reduce((n, p) => (n[p] = e[p], n), {}), _ = g(() => ({ ...d, ...k(m, Object.keys(S)) })), w = R();
+    function P() {
+      o.value.update();
+    }
+    function v() {
+      o.value.onOpen();
+    }
+    function y() {
+      o.value.onClose();
+    }
+    return i({
+      update: P,
+      open: v,
+      close: y
+    }), (e, r) => (t(), h(s(O), B({
+      ref_key: "popperRef",
+      ref: o
+    }, _.value, { nowrap: s(w) }), {
+      content: a(() => [
+        c(e.$slots, "content", {}, () => [
+          e.rawContent ? (t(), u("span", {
+            key: 0,
+            innerHTML: e.content
+          }, null, 8, $)) : (t(), u(H, { key: 1 }, [
+            L(M(e.content), 1)
+          ], 64))
+        ])
+      ]),
+      default: a(() => [
+        c(e.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["nowrap"]));
+  }
+});
+export {
+  j as default
+};

package/es/src/tooltip/src/tooltip2.mjs

@@ -0,0 +1,22 @@
+const t = {
+  content: String,
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  effect: {
+    type: String,
+    default: "dark"
+  },
+  disabled: {
+    type: Boolean
+  },
+  rawContent: Boolean,
+  transitionName: {
+    type: String,
+    default: "van-popper-fade"
+  }
+};
+export {
+  t as TooltipProps
+};

package/es/src/tree/index.mjs

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

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

@@ -0,0 +1,154 @@
+.k-tree {
+  --tree-border-color:#1d72ff;
+  --bg-triangle:#fff;
+  --bg-node-point:#000000;
+  --k-tree-node-hover-bg-color: var(--k-disabled-bg-color);
+  --k-tree-text-color: var(--k-text-color-regular);
+  --k-tree-expand-icon-color: var(--k-text-color-placeholder);
+  position: relative;
+  cursor: default;
+  color: var(--k-tree-text-color);
+  font-size: var(--k-font-size-middle);
+  position: relative;
+}
+.k-tree__node {
+  white-space: nowrap;
+  outline: none;
+  position: relative;
+}
+.k-tree__node__content {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  cursor: pointer;
+  will-change: height;
+}
+.k-tree__node__content:hover {
+  background: var(--k-tree-node-hover-bg-color);
+}
+.k-tree__node__content .single-item {
+  width: 18px;
+  height: 14px;
+  position: relative;
+}
+.k-tree__node__content .single-item::after {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  top: 4px;
+  left: 4px;
+  background: var(--bg-node-point);
+  border-radius: 50%;
+  z-index: 4;
+}
+.k-tree__node__content .is-parent {
+  position: relative;
+  transform: translateX(-2px);
+}
+.k-tree__node__content .is-parent::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background: var(--bg-triangle);
+  top: calc(50% - 8px);
+  left: calc(50% - 8px);
+}
+.k-tree__node__content .k-tree__node__label {
+  position: relative;
+  margin-left: 4px;
+}
+.k-tree__node__content .k-tree__node__label::after {
+  content: "";
+  position: absolute;
+  left: -11px;
+  width: 8px;
+  height: 1px;
+  border-top: 1px dashed var(--tree-border-color);
+  z-index: 2;
+  top: 9px;
+}
+.k-tree__node__content .k-tree__icon-wrapper {
+  z-index: 4;
+}
+.k-tree__node__content .last-isleaf-node {
+  position: relative;
+}
+.k-tree__node__content .last-isleaf-node::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  width: 14px;
+  height: 1px;
+  border-top: 1px dashed var(--tree-border-color);
+  z-index: 2;
+  top: 12px;
+}
+.k-tree__node__content.is-expand .k-tree__node__expand-icon {
+  transform: rotate(90deg);
+}
+.k-tree__node__expand-icon {
+  padding: 6px;
+  color: var(--k-tree-text-color);
+  transition: transform 0.2s;
+  z-index: 4;
+}
+.k-tree__node__expand-icon.is-leaf {
+  color: transparent;
+  cursor: default;
+  position: relative;
+}
+.k-tree__node:last-child::before {
+  border-right: none;
+}
+.k-tree__node .sub-child {
+  position: relative;
+}
+.k-tree__node .sub-child::after {
+  content: "";
+  position: absolute;
+  left: var(--left);
+  width: 1px;
+  bottom: 15px;
+  z-index: 2;
+  border-left: 1px dashed var(--tree-border-color);
+  top: 11px;
+}
+.k-tree > .first {
+  position: relative;
+}
+.k-tree > .first::after {
+  content: "";
+  position: absolute;
+  left: 32px;
+  width: 1px;
+  bottom: -6px;
+  z-index: 2;
+  border-left: 1px dashed var(--tree-border-color);
+  top: 20px;
+}
+.k-tree > .first:last-child::after {
+  border: none;
+}
+.k-tree > .first:last-child .last-isleaf-node::after {
+  border: none;
+}
+.k-tree__empty-block {
+  position: relative;
+  min-height: 60px;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+.k-tree__empty-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--k-text-color-secondary);
+  font-size: var(--k-font-size-middle);
+}
+.k-tree .is-dragging {
+  border-top: 1px solid var(--k-color-primary);
+}

package/es/src/tree/src/tree.mjs

@@ -0,0 +1,233 @@
+import { defineComponent as le, ref as O, computed as U, reactive as ie, provide as ce, watch as ae, h as c } from "vue";
+import { isFunction as k, createNamespace as de } from "../../../assets/ts/utils.mjs";
+import { TreeProps as se, TreeContextKeys as re } from "./tree2.mjs";
+import { useDrag as oe } from "./use-drag.mjs";
+import { Icon as W } from "../../icon/index.mjs";
+import { KCollapseTransition as fe } from "../../collapse-transition/index.mjs";
+import { KCheckbox as ue } from "../../checkbox/index.mjs";
+import "./style/index.css";
+import he from "../../../_virtual/plugin-vue_export-helper.mjs";
+let ge = 1;
+const j = 22, me = {
+  children: "children",
+  label: "label",
+  disabled: "disabled"
+}, ke = le({
+  name: "k-tree",
+  props: se,
+  setup(i, { emit: u, expose: V, slots: C }) {
+    const { n: a } = de("tree"), y = O(""), r = U(() => ({ ...me, ...i.props })), K = U(() => i.load && k(i.load)), _ = O(), d = ie({
+      childNodes: h(i.data),
+      children: i.data
+    }), { createDragEvents: q } = oe(i, u, $);
+    ce(re, i), ae(() => i.data, () => {
+      $();
+    });
+    function $() {
+      d.childNodes = h(i.data), d.children = i.data;
+    }
+    function L(e) {
+      return e && e.childNodes && e.childNodes.length;
+    }
+    function I(e) {
+      !K.value || i.load(e || { level: 0 }, (t) => {
+        e ? (e.isLeaf = t.length === 0, e.loading = !1, e.loaded = !0, e.childNodes = h(t, e.level + 1, e)) : d.childNodes = h(t);
+      });
+    }
+    function z(e) {
+      var t;
+      e.loading || !i.expandOnClickNode || (e.expand = !e.expand, _.value = e, i.accordion && (((t = e.parent) == null ? void 0 : t.childNodes) || d.childNodes).forEach((l) => {
+        l !== e && (l.expand = !1);
+      }), K.value && !e.loaded && (e.loading = !0, I(e)), u(e.expand ? "node-expand" : "node-collapse", e.data, e), u("node-click", e));
+    }
+    function G(e, t) {
+      u("node-contextmenu", e, t.data, t);
+    }
+    function H(e, t) {
+      e.checked = e.indeterminate ? !0 : t, e.indeterminate && (e.indeterminate = !1), w(e, e.checked), M(e.parent), setTimeout(() => {
+        u("check-change", e, t, e.indeterminate);
+      }, 200);
+    }
+    function M(e) {
+      if (!e)
+        return;
+      let t = e;
+      for (; t; ) {
+        if (L(t)) {
+          const n = t.childNodes.filter((l) => l.checked);
+          if (!n.length)
+            t.checked = !1, t.childNodes.filter((l) => l.indeterminate).length <= 0 && (t.indeterminate = !1);
+          else {
+            if (n.length < t.childNodes.length)
+              break;
+            t.indeterminate = !1, t.checked = !0;
+          }
+        }
+        t = t.parent;
+      }
+      for (; t; )
+        t.checked = !1, t.indeterminate = !0, t = t.parent;
+      return t;
+    }
+    function w(e, t) {
+      !L(e) || e.childNodes.forEach((n) => {
+        n.checked = t, n.indeterminate = !1, w(n, t);
+      });
+    }
+    function h(e, t = 0, n = null) {
+      if (!e)
+        return [];
+      !e.length && n && (n.expand = !1, n.isLeaf = !0);
+      const l = r.value.children, N = r.value.label, g = r.value.isLeaf, T = r.value.disabled, x = i.nodeKey;
+      return e.map((s) => {
+        const m = s[x] || ge++, b = i.defaultCheckedKeys.includes(m), v = !!i.defaultExpandAll || i.defaultExpandedKeys.includes(m), f = {
+          [x]: m,
+          data: s,
+          label: s[N],
+          level: t,
+          checked: b || (n == null ? void 0 : n.checked),
+          expand: v,
+          childNodes: [],
+          parent: n,
+          indeterminate: !1,
+          loaded: !1,
+          isLeaf: s[g],
+          disabled: s[T]
+        };
+        if (s[l] && s[l].length ? f.childNodes = h(s[l], t + 1, f) : K.value || (f.isLeaf = !0), b && n) {
+          let o = n;
+          for (; o; )
+            o.indeterminate = !0, o = o.parent;
+        }
+        return f;
+      });
+    }
+    const J = (e) => i.showCheckbox ? c(
+      ue,
+      {
+        label: "",
+        modelValue: e.checked,
+        indeterminate: e.indeterminate,
+        disabled: e.disabled,
+        "onUpdate:modelValue": (t) => H(e, t)
+      }
+    ) : c("div", { class: ["single-item"] });
+    function Q() {
+      return P(d.childNodes);
+    }
+    function R() {
+      return P(d.childNodes).map((t) => t[i.nodeKey]);
+    }
+    function P(e) {
+      if (!e)
+        return [];
+      let t = [];
+      return E(e, (n) => {
+        n.checked && t.push(n);
+      }), t;
+    }
+    function A(e, t) {
+      if (!e)
+        return [];
+      E(e, (n) => {
+        t.includes(n[i.nodeKey]) ? (n.checked = !0, w(n, n.checked), M(n.parent)) : n.checked = n.indeterminate = !1;
+      });
+    }
+    function S(e) {
+      A(d.childNodes, e);
+    }
+    function X(e) {
+      const t = e.map((n) => n[i.nodeKey]);
+      A(d.childNodes, t);
+    }
+    function p(e) {
+      return k(i.filterNodeMethod) ? i.filterNodeMethod(y.value, e) : !0;
+    }
+    function Y(e) {
+      y.value = e;
+    }
+    function Z() {
+      return _.value[i.nodeKey];
+    }
+    function ee() {
+      return _.value;
+    }
+    function E(e, t) {
+      !e || e.forEach((n) => {
+        t(n), L(n) && E(n.childNodes, t);
+      });
+    }
+    V({
+      getCheckedKeys: R,
+      getCheckedNodes: Q,
+      setCheckedKeys: S,
+      setCheckedNodes: X,
+      getCurrentKey: Z,
+      getCurrentNode: ee,
+      filter: Y
+    });
+    function te(e) {
+      return k(i.renderContent) ? i.renderContent(c, { node: e, data: e.data, store: e.store }) : C.default ? C.default({ node: e, data: e.data, store: e.store }) : c("span", { class: [a("node__label"), e.isLeaf ? "is-leaf-text" : "is-parent-text"] }, e.label);
+    }
+    function B(e) {
+      if (!e)
+        return [];
+      let t = [];
+      for (let n = 0; n < e.length; n++) {
+        const l = e[n], N = (l.childNodes || []).filter((D) => p(D.data));
+        let g = null;
+        const T = c(W, { name: "caret-right", class: [a("node__expand-icon"), { "is-leaf": l.isLeaf }] }), x = c("div", { class: [a("icon-wrapper"), { "is-parent": !l.isLeaf, "last-isleaf-node": l.isLeaf && n == e.length - 1 && l.childNodes.length > 0 }] }, [T]), s = l.loading && c(W, { name: "loading", class: [a("node__loading-icon"), { "is-loading": !0 }] }), m = te(l), b = J(l), v = r.value.class && k(r.value.class) ? r.value.class(l.data, l) : r.value.class, f = c(
+          "div",
+          {
+            class: [a("node__content"), { "is-expand": l.expand, "is-checked": l.checked }],
+            style: { paddingLeft: l.level * j + "px" },
+            onClick() {
+              z(l);
+            },
+            onContextmenu(D) {
+              G(D, l);
+            }
+          },
+          [x, b, s, m]
+        ), o = i.draggable && k(i.allowDrag) && i.allowDrag(l), F = o ? q(l) : {};
+        if (N.length)
+          g = c(
+            "div",
+            { class: [a("node"), v, l.data.class, N.length == 1 ? "only-one-child" : ""], draggable: o, ...F },
+            [
+              f,
+              c(
+                fe,
+                () => l.expand && c(
+                  "div",
+                  {
+                    class: ["node_children", l.childNodes && l.childNodes.length > 0 ? "sub-child" : ""],
+                    style: { "--left": l.level * j + 54 + "px" }
+                  },
+                  B(l.childNodes)
+                )
+              )
+            ]
+          );
+        else {
+          if (!p(l.data))
+            continue;
+          g = c("div", { class: [a("node"), v, "no-sub-child"], draggable: o, ...F }, f);
+        }
+        t.push(g);
+      }
+      return t;
+    }
+    function ne() {
+      return !i.data.length && c("div", { class: a("empty-block") }, c("span", { class: a("empty-text") }, i.emptyText));
+    }
+    return I(), () => c("div", { class: a() }, [d.childNodes.length ? B(d.childNodes) : ne()]);
+  }
+});
+function Ne(i, u, V, C, a, y) {
+  return null;
+}
+const Ee = /* @__PURE__ */ he(ke, [["render", Ne]]);
+export {
+  Ee as default
+};

package/es/src/tree/src/tree2.mjs

@@ -0,0 +1,67 @@
+const e = {
+  data: {
+    type: Array,
+    default: []
+  },
+  props: {
+    type: Object,
+    default: () => ({
+      children: "children",
+      label: "label",
+      disabled: "disabled"
+    })
+  },
+  emptyText: {
+    type: String,
+    default: "no Data"
+  },
+  showCheckbox: {
+    type: Boolean
+  },
+  load: {
+    type: Function
+  },
+  defaultExpandAll: {
+    type: Boolean
+  },
+  nodeKey: {
+    type: String,
+    default: "id"
+  },
+  defaultExpandedKeys: {
+    type: Array,
+    default: () => []
+  },
+  defaultCheckedKeys: {
+    type: Array,
+    default: () => []
+  },
+  renderContent: {
+    type: Function
+  },
+  expandOnClickNode: {
+    type: Boolean,
+    default: !0
+  },
+  accordion: {
+    type: Boolean
+  },
+  filterNodeMethod: {
+    type: Function
+  },
+  draggable: {
+    type: Boolean
+  },
+  allowDrop: {
+    type: Function
+  },
+  allowDrag: {
+    type: Function
+  }
+};
+e.renderContent, e.showCheckbox, e.props, e.accordion, e.allowDrop, e.allowDrag, e.draggable;
+const t = Symbol("TreeContextKeys");
+export {
+  t as TreeContextKeys,
+  e as TreeProps
+};