@cldemo/ui-kit 1.0.17 → 1.1.1

package/buildLibs/modules/shared/Column.vue_vue_type_script_setup_true_lang-rT_ICHhO.js

@@ -0,0 +1,174 @@
+import { defineComponent as K, ref as p, computed as f, onBeforeUnmount as Q, watch as R, openBlock as g, createElementBlock as _, normalizeStyle as T, normalizeClass as B, createElementVNode as W, Fragment as Z, renderList as ee, toDisplayString as te } from "vue";
+import { C as b } from "./base-fr2I80sU.js";
+const ne = ["aria-readonly"], oe = ["aria-selected"], ie = { key: 0 }, ae = ["innerHTML"], Y = 300, se = 15, le = 3e-3, z = 0.3, ce = /* @__PURE__ */ K({
+  name: "ClPickerColumn",
+  __name: "Column",
+  props: {
+    className: String,
+    // desc: 该列自定义CSS类名
+    optionsList: {
+      type: Array,
+      default: () => []
+    },
+    valueIndex: {
+      type: Number,
+      default: 0
+      // desc: 当前选中项索引
+    },
+    itemHeight: {
+      type: Number,
+      default: 44
+      // desc: 选项高度(px)
+    },
+    showNum: {
+      type: Number,
+      default: 6
+      // desc: 可见选项个数
+    },
+    inertiaDuration: {
+      type: Number,
+      default: 1e3
+      // desc: 惯性滚动动画时长(ms)
+    },
+    isAllowHtml: Boolean,
+    // desc: 是否允许选项内容渲染 HTML
+    isReadonly: Boolean
+    // desc: 是否只读（禁止滑动切换）
+  },
+  emits: ["onSelect"],
+  setup(h, { emit: U }) {
+    const t = h, V = U, P = `pickerColumn-${b.getRandom(5)}`, r = p(
+      (Math.max(1, t.showNum) * t.itemHeight - t.itemHeight) / 2 - (b.isFinite(t.valueIndex) && t.valueIndex >= 0 ? t.valueIndex : 0) * t.itemHeight
+    ), d = p(0), c = p(!1), v = p(0), k = p(0);
+    let s = null, x = 0, y = 0, H = 0;
+    const D = f(() => Math.max(1, t.showNum) * t.itemHeight), l = f(() => (D.value - t.itemHeight) / 2), I = f(() => r.value + d.value), N = f(
+      () => (l.value - I.value) / t.itemHeight
+    ), q = f(() => ({ height: `${D.value}px` })), G = f(() => ({
+      transform: `translateY(${I.value}px)`,
+      transition: v.value > 0 ? `transform ${v.value}ms cubic-bezier(0.23, 1, 0.32, 1)` : "none"
+    })), C = (e) => ({
+      "picker-column-item--active": Math.round(N.value) === e,
+      "picker-column-item--disabled": !!t.optionsList[e]?.disabled
+    }), X = (e) => {
+      const o = Math.abs(e - N.value);
+      return {
+        height: `${t.itemHeight}px`,
+        lineHeight: `${t.itemHeight}px`,
+        opacity: Math.max(1 - o * 0.4, 0),
+        transform: `rotateX(${-o * 12}deg) scale(${Math.max(1 - o * 0.15, 0.5)})`
+      };
+    }, w = (e) => {
+      if ("touches" in e) {
+        const o = e.touches;
+        return o.length > 0 ? o[0].clientY : 0;
+      }
+      return e.clientY;
+    }, A = (e) => Math.round((l.value - e) / t.itemHeight), E = (e) => {
+      const o = t.optionsList.length;
+      if (o === 0) return e;
+      const i = r.value + e, n = l.value, m = l.value - (o - 1) * t.itemHeight;
+      let a = i;
+      return a > n ? a = n + (a - n) * z : a < m && (a = m + (a - m) * z), a - r.value;
+    }, j = (e) => {
+      const o = t.optionsList.length;
+      if (o === 0) {
+        r.value = l.value, d.value = 0;
+        return;
+      }
+      const i = A(I.value);
+      let n = A(e);
+      if (n = Math.min(Math.max(n, 0), o - 1), t.optionsList[n]?.disabled) {
+        let a = -1;
+        for (let u = 1; u < o; u++) {
+          if (n - u >= 0 && !t.optionsList[n - u]?.disabled) {
+            a = n - u;
+            break;
+          }
+          if (n + u < o && !t.optionsList[n + u]?.disabled) {
+            a = n + u;
+            break;
+          }
+        }
+        a >= 0 ? n = a : n = i;
+      }
+      r.value = l.value - n * t.itemHeight;
+      const m = Math.abs(n - i);
+      v.value = Math.min(t.inertiaDuration, Math.max(200, m * 150)), d.value = 0, n !== t.valueIndex && V("onSelect", n);
+    }, F = ((e) => $(e)), O = ((e) => M(e)), J = () => {
+      document.addEventListener("mousemove", F), document.addEventListener("mouseup", O);
+    }, L = () => {
+      document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", O);
+    };
+    Q(() => {
+      L(), s !== null && cancelAnimationFrame(s);
+    }), R(
+      () => t.valueIndex,
+      (e) => {
+        c.value || !b.isFinite(e) || e < 0 || (r.value = l.value - e * t.itemHeight, v.value = 200);
+      }
+    ), R(
+      () => t.optionsList,
+      () => {
+        if (c.value) return;
+        const e = t.optionsList.length;
+        let o = b.isFinite(t.valueIndex) && t.valueIndex >= 0 ? t.valueIndex : 0;
+        e > 0 && (o = Math.min(o, e - 1)), r.value = l.value - o * t.itemHeight, v.value = 0;
+      }
+    );
+    const S = (e) => {
+      t.isReadonly || !("touches" in e) && e.button !== 0 || (c.value && L(), k.value = w(e), y = Date.now(), H = 0, c.value = !0, v.value = 0, "touches" in e || J());
+    }, $ = (e) => {
+      if (!c.value) return;
+      if (!("touches" in e) && e.buttons === 0) {
+        M();
+        return;
+      }
+      e.preventDefault();
+      const i = w(e) - k.value, n = Date.now();
+      n - y > Y && (y = n, H = i), s === null && (s = requestAnimationFrame(() => {
+        s = null, d.value = E(x);
+      })), x = i;
+    }, M = (e) => {
+      if (!c.value) return;
+      if (c.value = !1, L(), e?.type === "touchcancel") {
+        d.value = 0;
+        return;
+      }
+      s !== null && (cancelAnimationFrame(s), s = null, d.value = E(x));
+      const o = x - H, i = Date.now() - y, m = i > 0 && i < Y && Math.abs(o) > se ? Math.abs(o) / i / le * (o < 0 ? -1 : 1) : 0;
+      j(I.value + m);
+    };
+    return (e, o) => (g(), _("div", {
+      class: B(["picker-column", h.className]),
+      style: T(q.value),
+      role: "listbox",
+      "aria-readonly": h.isReadonly || void 0,
+      onTouchstart: S,
+      onTouchmove: $,
+      onTouchend: M,
+      onTouchcancel: M,
+      onMousedown: S
+    }, [
+      W("div", {
+        class: "picker-column-list",
+        style: T(G.value)
+      }, [
+        (g(!0), _(Z, null, ee(h.optionsList, (i, n) => (g(), _("div", {
+          key: `${P}-${n}`,
+          class: B(["picker-column-item", C(n)]),
+          style: T(X(n)),
+          role: "option",
+          "aria-selected": C(n)["picker-column-item--active"] || void 0
+        }, [
+          h.isAllowHtml ? (g(), _("span", {
+            key: 1,
+            innerHTML: i.text
+          }, null, 8, ae)) : (g(), _("span", ie, te(i.text), 1))
+        ], 14, oe))), 128))
+      ], 4)
+    ], 46, ne));
+  }
+});
+export {
+  ce as _
+};

package/buildLibs/modules/shared/{Index.vue_vue_type_script_setup_true_lang-B8nfrdHt.js → Index.vue_vue_type_script_setup_true_lang-5TIkYSxG.js}

@@ -1,6 +1,6 @@
 import { defineComponent as c, computed as r, openBlock as p, createElementBlock as d, normalizeStyle as f, normalizeClass as y, unref as g, toDisplayString as S } from "vue";
-import { C as o } from "./base-C5l51ld_.js";
-import { C as N } from "./index-wdK75uN2.js";
+import { C as o } from "./base-fr2I80sU.js";
+import { C as N } from "./index-B477PjJ3.js";
 const x = ["id"], E = /* @__PURE__ */ c({
   name: "ClBadge",
   __name: "Index",