btt-ui 1.0.0

package/es/src/style/previewimg.css

@@ -0,0 +1,109 @@
+.k-img-preview-mask {
+  --mask-bg-color:rgba(0,0,0,0.3);
+  --close-btn-bg-color:rgba(0,0,0,1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: var(--mask-bg-color);
+  z-index: 2000;
+}
+.k-img-preview-mask img {
+  transform-origin: center;
+  cursor: grab;
+  transform: scale(0);
+}
+.k-img-preview-mask .k-icon-close-btn {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 80px;
+  height: 80px;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: var(--close-btn-bg-color);
+  z-index: 2;
+  overflow: hidden;
+}
+.k-img-preview-mask .k-icon-close-btn:before {
+  content: "Close";
+  background-position: -260px 0;
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+}
+.k-img-preview-mask .k-img-close:before {
+  font-size: 0;
+  line-height: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+  color: transparent;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);
+  background-repeat: no-repeat;
+}
+.k-img-preview-mask .action-item-wapper {
+  position: absolute;
+  bottom: 70px;
+  left: 0;
+  z-index: 3;
+  width: 300px;
+  margin-left: calc(50% - 150px);
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 10px;
+}
+.k-img-preview-mask .action-item-wapper .action-item {
+  height: 20px;
+  width: 20px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);
+  background-repeat: no-repeat;
+  background-color: var(--close-btn-bg-color);
+  cursor: pointer;
+}
+.k-img-preview-mask .action-item-wapper .rotate-right {
+  content: "Rotate Right";
+  background-position: -160px 0;
+  border-radius: 50%;
+}
+.k-img-preview-mask .action-item-wapper .rotate-left {
+  content: "Rotate Left";
+  background-position: -140px 0;
+  border-radius: 50%;
+}
+.k-img-preview-mask .dragger-file-list-wapper {
+  position: absolute;
+  width: 100%;
+  height: 60px;
+  background: #4c4848;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  z-index: 9999;
+}
+.k-img-preview-mask .dragger-file-list-wapper li {
+  height: 60px;
+  width: 60px;
+  overflow: hidden;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid transparent;
+  opacity: 0.5;
+  display: flex;
+  justify-content: center;
+}
+.k-img-preview-mask .dragger-file-list-wapper li img {
+  height: 100%;
+  transform: scale(1);
+  pointer-events: none;
+}
+.k-img-preview-mask .dragger-file-list-wapper li.cur {
+  border: 1px solid red;
+  opacity: 1;
+}

package/es/src/style/var.css

@@ -0,0 +1,5 @@
+button, input, optgroup, select, textarea {
+  border: 0;
+  padding: 0;
+  line-height: inherit;
+}

package/es/src/style/zoomimg.css

@@ -0,0 +1,36 @@
+.k-img-zoom-wapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0;
+  padding: 3px;
+  --borderWidth: 3px;
+  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
+  border-radius: calc(1 * var(--borderWidth));
+  animation: animatedgradient 1s ease alternate infinite;
+  font-size: 0;
+  background-size: 300% 300%;
+}
+.k-img-zoom-wapper img {
+  pointer-events: none;
+  font-size: 0;
+}
+
+.k-img-zoom-wapper.on {
+  transition: opacity 0.3s;
+  opacity: 1;
+}
+
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

package/es/src/switch/index.mjs

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

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

@@ -0,0 +1,96 @@
+.k-switch {
+  --k-switch-off-color: var(--k-border-color);
+  --k-switch-on-color: var(--k-color-primary);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  transition: width var(--k-transition-duration);
+}
+.k-switch + .k-switch {
+  margin-left: 8px;
+}
+.k-switch.is-checked .k-switch__core {
+  background-color: var(--k-switch-on-color);
+}
+.k-switch.is-checked .k-switch__action {
+  left: calc(100% - 18px);
+}
+.k-switch.is-checked .k-switch__label--right {
+  color: var(--k-switch-on-color);
+}
+.k-switch.is-checked .k-switch__inner {
+  padding: 0 18px 0 4px;
+}
+.k-switch.is-checked .is-loading {
+  color: var(--k-switch-on-color);
+}
+.k-switch.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.k-switch .is-loading {
+  color: var(--k-switch-off-color);
+}
+.k-switch__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+}
+.k-switch__label--left, .k-switch__label--right {
+  line-height: 1;
+  font-size: 14px;
+  display: inline-block;
+  transition: color var(--k-transition-duration);
+}
+.k-switch__label--left {
+  margin-right: 8px;
+}
+.k-switch__label--right {
+  margin-left: 8px;
+}
+.k-switch__core {
+  position: relative;
+  min-width: 40px;
+  height: 20px;
+  border-radius: 12px;
+  background-color: var(--k-switch-off-color);
+  transition: background-color var(--k-transition-duration);
+}
+.k-switch__inner {
+  width: 100%;
+  transition: all var(--k-transition-duration);
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 4px 0 18px;
+}
+.k-switch__inner .is-text {
+  font-size: 12px;
+  color: var(--k-color-white);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-height: calc(100% + 4px);
+}
+.k-switch__action {
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 50%;
+  transition: left var(--k-transition-duration);
+}

package/es/src/switch/src/switch.mjs

@@ -0,0 +1,79 @@
+import { defineComponent as f, computed as c, openBlock as o, createElementBlock as s, normalizeClass as a, unref as l, normalizeStyle as k, withDirectives as B, createElementVNode as d, vModelCheckbox as T, toDisplayString as r, createCommentVNode as u, createBlock as w } from "vue";
+import { addUnit as C, createNamespace as N } from "../../../assets/ts/utils.mjs";
+import { Icon as P } from "../../icon/index.mjs";
+import "./style/index.css";
+const S = ["disabled"], x = { class: "is-text" }, z = f({
+  name: "k-switch"
+}), M = f({
+  ...z,
+  props: {
+    modelValue: { type: [Number, String, Boolean], default: !1 },
+    activeValue: { type: [Number, String, Boolean], default: !0 },
+    inactiveValue: { type: [Number, String, Boolean], default: !1 },
+    activeText: { default: "" },
+    inactiveText: { default: "" },
+    inlinePrompt: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    width: { default: "" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(v, { emit: h }) {
+    const t = v, p = h, { n: i } = N("switch"), n = c({
+      get: () => t.modelValue === t.activeValue,
+      set: (e) => {
+        p("update:modelValue", e ? t.activeValue : t.inactiveValue), p("change", e ? t.activeValue : t.inactiveValue);
+      }
+    }), y = c(() => {
+      if (t.width)
+        return { width: C(t.width) };
+    }), b = c(() => t.inlinePrompt ? n.value ? t.activeText : t.inactiveText : "");
+    function g() {
+      t.disabled || (n.value = !n.value);
+    }
+    return (e, m) => (o(), s("div", {
+      class: a([l(i)(), { "is-checked": n.value, "is-disabled": e.disabled }]),
+      onClick: g,
+      style: k(y.value)
+    }, [
+      B(d("input", {
+        "onUpdate:modelValue": m[0] || (m[0] = (V) => n.value = V),
+        class: a(l(i)("input")),
+        type: "checkbox",
+        disabled: e.disabled
+      }, null, 10, S), [
+        [T, n.value]
+      ]),
+      !e.inlinePrompt && e.inactiveText ? (o(), s("span", {
+        key: 0,
+        class: a(l(i)("label--left"))
+      }, r(e.inactiveText), 3)) : u("", !0),
+      d("span", {
+        class: a(l(i)("core"))
+      }, [
+        e.inlinePrompt ? (o(), s("span", {
+          key: 0,
+          class: a(l(i)("inner"))
+        }, [
+          d("span", x, r(b.value), 1)
+        ], 2)) : u("", !0),
+        d("div", {
+          class: a(l(i)("action"))
+        }, [
+          e.loading ? (o(), w(l(P), {
+            key: 0,
+            class: a({ "is-loading": e.loading }),
+            name: "loading"
+          }, null, 8, ["class"])) : u("", !0)
+        ], 2)
+      ], 2),
+      !e.inlinePrompt && e.activeText ? (o(), s("span", {
+        key: 1,
+        class: a(l(i)("label--right"))
+      }, r(e.activeText), 3)) : u("", !0)
+    ], 6));
+  }
+});
+export {
+  M as default
+};

package/es/src/tableScroll/index.mjs

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

package/es/src/tableScroll/src/index.mjs

@@ -0,0 +1,235 @@
+import { defineComponent as Y, ref as d, reactive as ae, computed as i, onBeforeMount as ue, onMounted as ne, onUnmounted as re, watch as q, openBlock as T, createElementBlock as E, normalizeStyle as c, normalizeClass as L, renderSlot as B, createCommentVNode as O, createElementVNode as W, nextTick as ce } from "vue";
+const he = ["innerHTML"], fe = Y({
+  name: "k-table-scroll"
+}), de = Y({
+  ...fe,
+  props: {
+    data: { default: () => [] },
+    classOption: { default: () => ({}) }
+  },
+  emits: ["ScrollEnd", "stop"],
+  setup(z, { emit: X }) {
+    const m = d(), g = d(), p = d(), h = z, f = X, e = ae({
+      xPos: 0,
+      yPos: 0,
+      delay: 0,
+      copyHtml: "",
+      height: 0,
+      width: 0,
+      realBoxWidth: 0,
+      reqFrame: null,
+      singleWaitTime: null,
+      isHover: !1,
+      ease: "ease-in",
+      realBoxHeight: 0,
+      startPos: {
+        x: 0,
+        y: 0
+      },
+      endPos: {
+        x: 0,
+        y: 0
+      },
+      startPosY: 0,
+      startPosX: 0
+    }), N = d({
+      step: 1,
+      limitMoveNum: 5,
+      hoverStop: !0,
+      direction: 1,
+      openTouch: !0,
+      singleHeight: 0,
+      singleWidth: 0,
+      waitTime: 1e3,
+      switchOffset: 30,
+      autoPlay: !0,
+      navigation: !1,
+      switchSingleStep: 134,
+      switchDelay: 400,
+      switchDisabledClass: "disabled",
+      isSingleRemUnit: !1
+    }), o = i(() => ({ ...N.value, ...h.classOption })), P = i(() => o.value.direction > 1), y = i(() => o.value.openTouch), H = i(() => o.value.hoverStop && v.value && M.value), U = i(() => C.value ? "" : o.value.switchDisabledClass), F = i(() => o.value.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1), x = i(() => o.value.singleHeight * F.value), M = i(() => h.data.length >= o.value.limitMoveNum), w = i(() => o.value.singleWidth * F.value), C = i(() => e.xPos < 0), S = i(() => o.value.navigation), v = i(() => S.value ? !1 : o.value.autoPlay), R = i(() => ({
+      position: "absolute",
+      margin: `${e.height / 2}px 0 0 ${e.width + o.value.switchOffset}px`,
+      transform: "translateY(-50%)"
+    })), V = i(() => ({
+      position: "absolute",
+      margin: `${e.height / 2}px 0 0 -${o.value.switchOffset}px`,
+      transform: "translate(-100%,-50%)"
+    })), I = i(() => _.value ? "" : o.value.switchDisabledClass), b = i(() => P.value ? { float: "left", overflow: "hidden" } : { overflow: "hidden" }), j = i(() => ({
+      transform: `translate(${e.xPos}px,${e.yPos}px)`,
+      transition: `all ${e.ease} ${e.delay}ms`,
+      overflow: "hidden"
+    })), r = i(() => {
+      let t, s = o.value.step;
+      return P.value ? t = w.value : t = x.value, t > 0 && t % s > 0 && console.error("\u5982\u679C\u8BBE\u7F6E\u4E86\u5355\u6B65\u6EDA\u52A8,step\u9700\u662F\u5355\u6B65\u5927\u5C0F\u7684\u7EA6\u6570,\u5426\u5219\u65E0\u6CD5\u4FDD\u8BC1\u5355\u6B65\u6EDA\u52A8\u7ED3\u675F\u7684\u4F4D\u7F6E\u662F\u5426\u51C6\u786E\u3002~~~~~"), s;
+    }), _ = i(() => Math.abs(e.xPos) < e.realBoxWidth - e.width), D = (t) => {
+      t.length > 100 && console.warn(`\u6570\u636E\u8FBE\u5230\u4E86${t.length}\u6761\u6709\u70B9\u591A\u54E6~,\u53EF\u80FD\u4F1A\u9020\u6210\u90E8\u5206\u8001\u65E7\u6D4F\u89C8\u5668\u5361\u987F\u3002`);
+    }, a = () => {
+      e.isHover || (u(), e.reqFrame = requestAnimationFrame(function() {
+        const t = e.realBoxHeight / 2, s = e.realBoxWidth / 2;
+        let { direction: l, waitTime: n } = o.value;
+        l === 1 ? (Math.abs(e.yPos) >= t && (f("ScrollEnd"), e.yPos = 0), e.yPos -= r.value) : l === 0 ? (e.yPos >= 0 && (f("ScrollEnd"), e.yPos = t * -1), e.yPos += r.value) : l === 2 ? (Math.abs(e.xPos) >= s && (f("ScrollEnd"), e.xPos = 0), e.xPos -= r.value) : l === 3 && (e.xPos >= 0 && (f("ScrollEnd"), e.xPos = s * -1), e.xPos += r.value), e.singleWaitTime && clearTimeout(e.singleWaitTime), x.value ? Math.abs(e.yPos) % x.value < r.value ? e.singleWaitTime = setTimeout(() => {
+          a();
+        }, n) : a() : w.value && Math.abs(e.xPos) % w.value < r.value ? e.singleWaitTime = setTimeout(() => {
+          a();
+        }, n) : a();
+      }.bind(this)));
+    }, G = () => {
+      if (!!C.value) {
+        if (Math.abs(e.xPos) < o.value.switchSingleStep) {
+          e.xPos = 0;
+          return;
+        }
+        e.xPos += o.value.switchSingleStep;
+      }
+    }, J = () => {
+      if (!!_.value) {
+        if (e.realBoxWidth - e.width + e.xPos < o.value.switchSingleStep) {
+          e.xPos = e.width - e.realBoxWidth;
+          return;
+        }
+        e.xPos -= o.value.switchSingleStep;
+      }
+    }, k = () => {
+      ce(() => {
+        const { switchDelay: t } = o.value;
+        if (D(h.data), e.copyHtml = "", P.value) {
+          e.height = m.value.offsetHeight, e.width = m.value.offsetWidth;
+          let s = g.value.offsetWidth;
+          v.value && (s = s * 2 + 1), p.value.style.width = s + "px", e.realBoxWidth = s;
+        }
+        if (v.value)
+          e.ease = "ease-in", e.delay = 0;
+        else {
+          e.ease = "linear", e.delay = t;
+          return;
+        }
+        M.value ? (e.copyHtml = g.value.innerHTML, setTimeout(() => {
+          e.realBoxHeight = p.value.offsetHeight, a();
+        }, 0)) : (u(), e.yPos = e.xPos = 0);
+      });
+    }, K = (t) => {
+      if (!y.value)
+        return;
+      let s;
+      const l = t.targetTouches[0], { waitTime: n, singleHeight: le, singleWidth: ie } = o.value;
+      e.startPos = {
+        x: l.pageX,
+        y: l.pageY
+      }, e.startPosY = e.yPos, e.startPosX = e.xPos, !!le && !!ie ? (s && clearTimeout(s), s = setTimeout(() => {
+        u();
+      }, n + 20)) : u();
+    }, Q = (t) => {
+      if (!y.value || t.targetTouches.length > 1 || t.scale && t.scale !== 1)
+        return;
+      const s = t.targetTouches[0], { direction: l } = o.value;
+      e.endPos = {
+        x: s.pageX - e.startPos.x,
+        y: s.pageY - e.startPos.y
+      }, t.preventDefault();
+      const n = Math.abs(e.endPos.x) < Math.abs(e.endPos.y) ? 1 : 0;
+      n === 1 && l < 2 ? e.yPos = e.startPosY + e.endPos.y : n === 0 && l > 1 && (e.xPos = e.startPosX + e.endPos.x);
+    }, Z = () => {
+      if (!y.value)
+        return;
+      let t;
+      const s = o.value.direction;
+      if (e.delay = 50, s === 1)
+        e.yPos > 0 && (e.yPos = 0);
+      else if (s === 0) {
+        let l = e.realBoxHeight / 2 * -1;
+        e.yPos < l && (e.yPos = l);
+      } else if (s === 2)
+        e.xPos > 0 && (e.xPos = 0);
+      else if (s === 3) {
+        let l = e.realBoxWidth * -1;
+        e.xPos < l && (e.xPos = l);
+      }
+      t && clearTimeout(t), t = setTimeout(() => {
+        e.delay = 0, a();
+      }, e.delay);
+    }, ee = () => {
+      e.isHover = !1, a();
+    }, $ = () => {
+      e.isHover = !0, e.singleWaitTime && clearTimeout(e.singleWaitTime), u();
+    }, te = () => {
+      H.value && $();
+    }, se = () => {
+      H.value && ee();
+    }, A = () => {
+      u(), k();
+    };
+    ue(() => {
+      e.reqFrame = null, e.singleWaitTime = null, e.isHover = !1, e.ease = "ease-in";
+    });
+    const u = () => {
+      cancelAnimationFrame(e.reqFrame || "");
+    };
+    ne(() => {
+      k();
+    }), re(() => {
+      u(), clearTimeout(e.singleWaitTime);
+    });
+    const oe = (t, s) => {
+      if (t === s)
+        return !0;
+      if (t.length !== s.length)
+        return !1;
+      for (var l = 0; l < t.length; ++l)
+        if (t[l] !== s[l])
+          return !1;
+      return !0;
+    };
+    return q(() => h.data, (t, s) => {
+      D(t), oe(t, s) || A();
+    }, { deep: !0 }), q(() => v, (t) => {
+      t.value ? A() : $();
+    }, { deep: !0 }), (t, s) => (T(), E("div", {
+      ref_key: "wrap",
+      ref: m
+    }, [
+      S.value ? (T(), E("div", {
+        key: 0,
+        style: c(V.value),
+        class: L(U.value),
+        onClick: G
+      }, [
+        B(t.$slots, "left-switch")
+      ], 6)) : O("", !0),
+      S.value ? (T(), E("div", {
+        key: 1,
+        style: c(R.value),
+        class: L(I.value),
+        onClick: J
+      }, [
+        B(t.$slots, "right-switch")
+      ], 6)) : O("", !0),
+      W("div", {
+        ref_key: "realBox",
+        ref: p,
+        style: c(j.value),
+        onMouseenter: te,
+        onMouseleave: se,
+        onTouchstart: K,
+        onTouchmove: Q,
+        onTouchend: Z
+      }, [
+        W("div", {
+          ref_key: "slotList",
+          ref: g,
+          style: c(b.value)
+        }, [
+          B(t.$slots, "default")
+        ], 4),
+        W("div", {
+          innerHTML: e.copyHtml,
+          style: c(b.value)
+        }, null, 12, he)
+      ], 36)
+    ], 512));
+  }
+});
+export {
+  de as default
+};

package/es/src/timeline/index.mjs

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

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

@@ -0,0 +1,63 @@
+.k-timeline {
+  width: 100%;
+  height: 40px;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(116, 117, 119, 0.8) 0%, rgba(58, 68, 82, 0.8) 11%, rgba(46, 50, 56, 0.8) 46%, rgba(53, 53, 53, 0.8) 81%, rgba(53, 53, 53, 0.8) 100%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+}
+.k-timeline__ticTiny {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 25%;
+  background: #888;
+  pointer-events: none;
+}
+.k-timeline__ticMain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 25%;
+  height: 35%;
+  background: rgba(255, 255, 255, 0.7);
+  pointer-events: none;
+}
+.k-timeline__date {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 140px;
+  bottom: 18px;
+  margin-left: -70px;
+  color: #fff;
+  font-size: 13px;
+  text-align: center;
+  pointer-events: none;
+}
+.k-timeline__point {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  background: red;
+  z-index: 2;
+  left: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.k-timeline__timepoint {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border-radius: 50%;
+}