@talex-touch/tuffex 0.3.3

package/dist/es/picker/src/TxPicker.vue2.js

@@ -0,0 +1,403 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, createElementBlock, createBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, normalizeStyle, Fragment, renderList, Teleport, createVNode, Transition, withCtx, nextTick } from 'vue';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "tx-picker__toolbar"
+};
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = { class: "tx-picker__title" };
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["onScrollPassive"];
+const _hoisted_6 = ["disabled", "onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "tx-picker__toolbar"
+};
+const _hoisted_8 = ["disabled"];
+const _hoisted_9 = { class: "tx-picker__title" };
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = ["onScrollPassive"];
+const _hoisted_12 = ["disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "TxPicker" },
+  __name: "TxPicker",
+  props: {
+    modelValue: { default: () => [] },
+    columns: { default: () => [] },
+    visible: { type: Boolean, default: false },
+    popup: { type: Boolean, default: true },
+    title: { default: "" },
+    showToolbar: { type: Boolean, default: true },
+    confirmText: { default: "Confirm" },
+    cancelText: { default: "Cancel" },
+    disabled: { type: Boolean, default: false },
+    itemHeight: { default: 36 },
+    visibleItemCount: { default: 5 },
+    closeOnClickMask: { type: Boolean, default: true },
+    lazyMount: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "change", "update:visible", "confirm", "cancel", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = computed({
+      get: () => !!props.visible,
+      set: (v) => emit("update:visible", v)
+    });
+    const mountedOnce = ref(false);
+    const columns = computed(() => props.columns ?? []);
+    const itemHeightPx = computed(() => Math.max(24, props.itemHeight ?? 36));
+    const visibleCount = computed(() => {
+      const n = Math.floor(props.visibleItemCount ?? 5);
+      return Math.max(3, n % 2 === 0 ? n + 1 : n);
+    });
+    const paddingY = computed(() => (visibleCount.value - 1) / 2 * itemHeightPx.value);
+    const localValue = ref([]);
+    function normalizeValue(v) {
+      const cols = columns.value;
+      const out = [];
+      for (let i = 0; i < cols.length; i++) {
+        const col = cols[i];
+        if (!col)
+          continue;
+        const opts = col.options ?? [];
+        const desired = v[i];
+        if (desired !== void 0) {
+          const idx = opts.findIndex((o) => o.value === desired);
+          if (idx >= 0) {
+            out[i] = desired;
+            continue;
+          }
+        }
+        const first = opts.find((o) => !o.disabled);
+        out[i] = first?.value ?? "";
+      }
+      return out;
+    }
+    watch(
+      () => props.modelValue,
+      (v) => {
+        localValue.value = normalizeValue(Array.isArray(v) ? v : []);
+      },
+      { immediate: true }
+    );
+    watch(
+      columns,
+      () => {
+        localValue.value = normalizeValue(localValue.value);
+      },
+      { flush: "sync" }
+    );
+    const colRefs = ref([]);
+    const isDragging = ref(false);
+    const scrollStates = ref([]);
+    function ensureStates() {
+      const n = columns.value.length;
+      if (scrollStates.value.length === n)
+        return;
+      scrollStates.value = Array.from({ length: n }).map(() => ({ rafId: null, debounceId: null }));
+    }
+    function getIndexForValue(colIndex, v) {
+      const opts = columns.value[colIndex]?.options ?? [];
+      const idx = opts.findIndex((o) => o.value === v);
+      return Math.max(0, idx);
+    }
+    function clampIndex(colIndex, idx) {
+      const len = (columns.value[colIndex]?.options ?? []).length;
+      if (len <= 0)
+        return 0;
+      return Math.min(len - 1, Math.max(0, idx));
+    }
+    function scrollToIndex(colIndex, idx, behavior = "auto") {
+      const el = colRefs.value[colIndex];
+      if (!el)
+        return;
+      const top = idx * itemHeightPx.value;
+      el.scrollTo({ top, behavior });
+    }
+    function pickIndexFromScroll(colIndex) {
+      const el = colRefs.value[colIndex];
+      if (!el)
+        return;
+      const raw = el.scrollTop / itemHeightPx.value;
+      const idx = clampIndex(colIndex, Math.round(raw));
+      const opts = columns.value[colIndex]?.options ?? [];
+      const option = opts[idx];
+      if (option?.disabled) {
+        const next = opts.findIndex((o, i) => i >= idx && !o.disabled);
+        const prev = [...opts].reverse().findIndex((o) => !o.disabled);
+        const prevIdx = prev >= 0 ? opts.length - 1 - prev : -1;
+        const fallback = next >= 0 ? next : prevIdx;
+        if (fallback >= 0 && fallback !== idx) {
+          scrollToIndex(colIndex, fallback, "smooth");
+          setValueAt(colIndex, opts[fallback]?.value);
+          return;
+        }
+      }
+      setValueAt(colIndex, option?.value);
+    }
+    function settleScroll(colIndex) {
+      const el = colRefs.value[colIndex];
+      if (!el)
+        return;
+      const idx = clampIndex(colIndex, Math.round(el.scrollTop / itemHeightPx.value));
+      scrollToIndex(colIndex, idx, "smooth");
+    }
+    function setValueAt(colIndex, v) {
+      const next = localValue.value.slice();
+      next[colIndex] = v;
+      localValue.value = normalizeValue(next);
+      emit("update:modelValue", localValue.value);
+      emit("change", localValue.value);
+    }
+    function onScroll(colIndex) {
+      ensureStates();
+      const state = scrollStates.value[colIndex];
+      if (!state)
+        return;
+      if (state.rafId != null)
+        cancelAnimationFrame(state.rafId);
+      state.rafId = requestAnimationFrame(() => {
+        state.rafId = null;
+        pickIndexFromScroll(colIndex);
+      });
+      if (state.debounceId != null)
+        window.clearTimeout(state.debounceId);
+      state.debounceId = window.setTimeout(() => {
+        state.debounceId = null;
+        if (!isDragging.value)
+          settleScroll(colIndex);
+      }, 120);
+    }
+    function onPointerDown() {
+      if (props.disabled)
+        return;
+      isDragging.value = true;
+    }
+    function onPointerUp() {
+      if (!isDragging.value)
+        return;
+      isDragging.value = false;
+      for (let i = 0; i < columns.value.length; i++) settleScroll(i);
+    }
+    async function syncScrollPositions(behavior = "auto") {
+      await nextTick();
+      ensureStates();
+      const v = localValue.value;
+      for (let i = 0; i < columns.value.length; i++) {
+        const idx = getIndexForValue(i, v[i]);
+        scrollToIndex(i, idx, behavior);
+      }
+    }
+    watch(
+      open,
+      async (v) => {
+        if (v) {
+          emit("open");
+          mountedOnce.value = true;
+          await syncScrollPositions("auto");
+          return;
+        }
+        emit("close");
+      },
+      { flush: "post" }
+    );
+    watch(
+      () => props.modelValue,
+      () => {
+        if (!open.value && props.popup)
+          return;
+        syncScrollPositions("auto");
+      }
+    );
+    watch(
+      columns,
+      () => {
+        if (!open.value && props.popup)
+          return;
+        syncScrollPositions("auto");
+      }
+    );
+    function close() {
+      open.value = false;
+    }
+    function onMaskClick() {
+      if (!props.closeOnClickMask)
+        return;
+      close();
+    }
+    function onCancel() {
+      emit("cancel");
+      close();
+    }
+    function onConfirm() {
+      emit("confirm", localValue.value);
+      close();
+    }
+    __expose({
+      open: () => open.value = true,
+      close,
+      toggle: () => open.value = !open.value
+    });
+    onBeforeUnmount(() => {
+      for (const s of scrollStates.value) {
+        if (s.rafId != null)
+          cancelAnimationFrame(s.rafId);
+        if (s.debounceId != null)
+          window.clearTimeout(s.debounceId);
+      }
+    });
+    return (_ctx, _cache) => {
+      return !__props.popup ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["tx-picker", { "is-disabled": __props.disabled }])
+      }, [
+        __props.showToolbar ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("button", {
+            type: "button",
+            class: "tx-picker__btn",
+            disabled: __props.disabled,
+            onClick: onCancel
+          }, toDisplayString(__props.cancelText), 9, _hoisted_2),
+          createElementVNode("div", _hoisted_3, toDisplayString(__props.title), 1),
+          createElementVNode("button", {
+            type: "button",
+            class: "tx-picker__btn is-primary",
+            disabled: __props.disabled,
+            onClick: onConfirm
+          }, toDisplayString(__props.confirmText), 9, _hoisted_4)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "tx-picker__columns",
+          style: normalizeStyle({ "--tx-picker-item-height": `${itemHeightPx.value}px`, "--tx-picker-padding-y": `${paddingY.value}px` })
+        }, [
+          _cache[2] || (_cache[2] = createElementVNode("div", {
+            class: "tx-picker__highlight",
+            "aria-hidden": "true"
+          }, null, -1)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, colIndex) => {
+            return openBlock(), createElementBlock("div", {
+              key: col.key ?? colIndex,
+              class: "tx-picker__col"
+            }, [
+              createElementVNode("div", {
+                ref_for: true,
+                ref: (el) => colRefs.value[colIndex] = el,
+                class: "tx-picker__scroller",
+                role: "listbox",
+                tabindex: "-1",
+                onScrollPassive: ($event) => onScroll(colIndex),
+                onPointerdown: onPointerDown,
+                onPointerup: onPointerUp,
+                onPointercancel: onPointerUp
+              }, [
+                _cache[0] || (_cache[0] = createElementVNode("div", {
+                  class: "tx-picker__pad",
+                  "aria-hidden": "true"
+                }, null, -1)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(col.options, (opt) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: String(opt.value),
+                    type: "button",
+                    class: normalizeClass(["tx-picker__item", { "is-disabled": !!opt.disabled, "is-selected": localValue.value[colIndex] === opt.value }]),
+                    disabled: __props.disabled || !!opt.disabled,
+                    onClick: ($event) => scrollToIndex(colIndex, clampIndex(colIndex, col.options.findIndex((o) => o.value === opt.value)), "smooth")
+                  }, toDisplayString(opt.label), 11, _hoisted_6);
+                }), 128)),
+                _cache[1] || (_cache[1] = createElementVNode("div", {
+                  class: "tx-picker__pad",
+                  "aria-hidden": "true"
+                }, null, -1))
+              ], 40, _hoisted_5)
+            ]);
+          }), 128))
+        ], 4)
+      ], 2)) : (openBlock(), createBlock(Teleport, {
+        key: 1,
+        to: "body"
+      }, [
+        createVNode(Transition, { name: "tx-picker-popup" }, {
+          default: withCtx(() => [
+            open.value && (!__props.lazyMount || mountedOnce.value) ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "tx-picker-popup",
+              onPointerup: onPointerUp
+            }, [
+              createElementVNode("div", {
+                class: "tx-picker-popup__mask",
+                onClick: onMaskClick
+              }),
+              createElementVNode("div", {
+                class: normalizeClass(["tx-picker-popup__panel", { "is-disabled": __props.disabled }])
+              }, [
+                __props.showToolbar ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "tx-picker__btn",
+                    disabled: __props.disabled,
+                    onClick: onCancel
+                  }, toDisplayString(__props.cancelText), 9, _hoisted_8),
+                  createElementVNode("div", _hoisted_9, toDisplayString(__props.title), 1),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "tx-picker__btn is-primary",
+                    disabled: __props.disabled,
+                    onClick: onConfirm
+                  }, toDisplayString(__props.confirmText), 9, _hoisted_10)
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: "tx-picker__columns",
+                  style: normalizeStyle({ "--tx-picker-item-height": `${itemHeightPx.value}px`, "--tx-picker-padding-y": `${paddingY.value}px` })
+                }, [
+                  _cache[5] || (_cache[5] = createElementVNode("div", {
+                    class: "tx-picker__highlight",
+                    "aria-hidden": "true"
+                  }, null, -1)),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, colIndex) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: col.key ?? colIndex,
+                      class: "tx-picker__col"
+                    }, [
+                      createElementVNode("div", {
+                        ref_for: true,
+                        ref: (el) => colRefs.value[colIndex] = el,
+                        class: "tx-picker__scroller",
+                        role: "listbox",
+                        tabindex: "-1",
+                        onScrollPassive: ($event) => onScroll(colIndex),
+                        onPointerdown: onPointerDown,
+                        onPointerup: onPointerUp,
+                        onPointercancel: onPointerUp
+                      }, [
+                        _cache[3] || (_cache[3] = createElementVNode("div", {
+                          class: "tx-picker__pad",
+                          "aria-hidden": "true"
+                        }, null, -1)),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(col.options, (opt) => {
+                          return openBlock(), createElementBlock("button", {
+                            key: String(opt.value),
+                            type: "button",
+                            class: normalizeClass(["tx-picker__item", { "is-disabled": !!opt.disabled, "is-selected": localValue.value[colIndex] === opt.value }]),
+                            disabled: __props.disabled || !!opt.disabled,
+                            onClick: ($event) => scrollToIndex(colIndex, clampIndex(colIndex, col.options.findIndex((o) => o.value === opt.value)), "smooth")
+                          }, toDisplayString(opt.label), 11, _hoisted_12);
+                        }), 128)),
+                        _cache[4] || (_cache[4] = createElementVNode("div", {
+                          class: "tx-picker__pad",
+                          "aria-hidden": "true"
+                        }, null, -1))
+                      ], 40, _hoisted_11)
+                    ]);
+                  }), 128))
+                ], 4)
+              ], 2)
+            ], 32)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ]));
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/picker/src/types.d.ts

@@ -0,0 +1,35 @@
+export type PickerPrimitive = string | number;
+export interface PickerOption {
+    value: PickerPrimitive;
+    label: string;
+    disabled?: boolean;
+}
+export interface PickerColumn {
+    key?: string;
+    options: PickerOption[];
+}
+export type PickerValue = PickerPrimitive[];
+export interface PickerProps {
+    modelValue?: PickerValue;
+    columns?: PickerColumn[];
+    visible?: boolean;
+    popup?: boolean;
+    title?: string;
+    showToolbar?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    disabled?: boolean;
+    itemHeight?: number;
+    visibleItemCount?: number;
+    closeOnClickMask?: boolean;
+    lazyMount?: boolean;
+}
+export interface PickerEmits {
+    (e: 'update:modelValue', v: PickerValue): void;
+    (e: 'change', v: PickerValue): void;
+    (e: 'update:visible', v: boolean): void;
+    (e: 'confirm', v: PickerValue): void;
+    (e: 'cancel'): void;
+    (e: 'open'): void;
+    (e: 'close'): void;
+}