@talex-touch/tuffex 0.3.3

package/dist/es/tabs/src/TxTabs.vue2.js

@@ -0,0 +1,493 @@
+import { defineComponent, ref, computed, onBeforeUnmount, watch, nextTick, h } from 'vue';
+import _sfc_main$1 from '../../auto-sizer/src/TxAutoSizer.vue.js';
+import TxTabHeader from './TxTabHeader.vue.js';
+import TxTabItem from './TxTabItem.vue.js';
+
+const qualifiedName = ["TxTabItem", "TxTabItemGroup", "TxTabHeader"];
+const _sfc_main = defineComponent({
+  name: "TxTabs",
+  props: {
+    modelValue: String,
+    defaultValue: String,
+    placement: { type: String, default: "left" },
+    offset: { type: Number, default: 0 },
+    navMinWidth: { type: Number, default: 220 },
+    navMaxWidth: { type: Number, default: 320 },
+    contentPadding: { type: Number, default: 12 },
+    contentScrollable: { type: Boolean, default: true },
+    autoHeight: { type: Boolean, default: false },
+    autoWidth: { type: Boolean, default: false },
+    indicatorVariant: { type: String, default: "line" },
+    indicatorMotion: { type: String, default: "stretch" },
+    indicatorMotionStrength: { type: Number, default: 1 },
+    autoHeightDurationMs: { type: Number, default: 250 },
+    autoHeightEasing: { type: String, default: "ease" },
+    animation: { type: Object, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { slots, emit, expose }) {
+    const activeNode = ref();
+    const slotWrapper = ref();
+    const autoSizerRef = ref();
+    const placement = computed(() => {
+      const v = props.placement;
+      return v === "left" || v === "right" || v === "top" || v === "bottom" ? v : "left";
+    });
+    const isVertical = computed(() => placement.value === "left" || placement.value === "right");
+    const indicatorVariant = computed(() => {
+      const v = props.indicatorVariant;
+      if (v === "line" || v === "pill" || v === "block" || v === "dot" || v === "outline")
+        return v;
+      return "line";
+    });
+    const indicatorMotion = computed(() => {
+      const v = props.indicatorMotion;
+      if (v === "stretch" || v === "warp" || v === "glide" || v === "snap" || v === "spring")
+        return v;
+      return "stretch";
+    });
+    const indicatorMotionStrength = computed(() => {
+      return typeof props.indicatorMotionStrength === "number" ? Math.max(0, props.indicatorMotionStrength) : 1;
+    });
+    function getNodeName(vnode) {
+      return vnode?.props?.name ?? "";
+    }
+    function setActive(vnode) {
+      activeNode.value = vnode;
+      emit("update:modelValue", getNodeName(vnode));
+      emit("change", getNodeName(vnode));
+    }
+    const animationSize = computed(() => {
+      const raw = props.animation?.size;
+      if (typeof raw === "boolean") {
+        return {
+          enabled: raw,
+          durationMs: props.autoHeightDurationMs,
+          easing: props.autoHeightEasing
+        };
+      }
+      if (raw && typeof raw === "object") {
+        return {
+          enabled: raw.enabled !== false,
+          durationMs: typeof raw.durationMs === "number" ? raw.durationMs : props.autoHeightDurationMs,
+          easing: typeof raw.easing === "string" ? raw.easing : props.autoHeightEasing
+        };
+      }
+      return {
+        enabled: !!(props.autoHeight || props.autoWidth),
+        durationMs: props.autoHeightDurationMs,
+        easing: props.autoHeightEasing
+      };
+    });
+    const animationIndicator = computed(() => {
+      const raw = props.animation?.indicator;
+      if (typeof raw === "boolean") {
+        return {
+          enabled: raw,
+          durationMs: 180,
+          easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        };
+      }
+      if (raw && typeof raw === "object") {
+        return {
+          enabled: raw.enabled !== false,
+          durationMs: typeof raw.durationMs === "number" ? raw.durationMs : 180,
+          easing: typeof raw.easing === "string" ? raw.easing : "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        };
+      }
+      return {
+        enabled: true,
+        durationMs: 180,
+        easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+      };
+    });
+    const animationNav = computed(() => {
+      const raw = props.animation?.nav;
+      if (typeof raw === "boolean") {
+        return {
+          enabled: raw,
+          durationMs: 220,
+          easing: "ease"
+        };
+      }
+      if (raw && typeof raw === "object") {
+        return {
+          enabled: raw.enabled !== false,
+          durationMs: typeof raw.durationMs === "number" ? raw.durationMs : 220,
+          easing: typeof raw.easing === "string" ? raw.easing : "ease"
+        };
+      }
+      return {
+        enabled: true,
+        durationMs: 220,
+        easing: "ease"
+      };
+    });
+    const animationContent = computed(() => {
+      const raw = props.animation?.content;
+      if (typeof raw === "boolean")
+        return { enabled: raw };
+      if (raw && typeof raw === "object")
+        return { enabled: raw.enabled !== false };
+      return { enabled: true };
+    });
+    const widthAnimEnabled = computed(() => {
+      return animationSize.value.enabled && !!props.autoWidth;
+    });
+    const heightAnimEnabled = computed(() => {
+      return animationSize.value.enabled && (!!props.autoHeight || !props.contentScrollable);
+    });
+    const contentScrollable = computed(() => {
+      return props.contentScrollable && !heightAnimEnabled.value;
+    });
+    const sizeAnimEnabled = computed(() => {
+      return widthAnimEnabled.value || heightAnimEnabled.value;
+    });
+    async function runAutoHeight(action) {
+      if (!sizeAnimEnabled.value) {
+        action();
+        return;
+      }
+      const api = autoSizerRef.value;
+      if (api?.flip) {
+        await api.flip(async () => {
+          action();
+        });
+        return;
+      }
+      action();
+      api?.refresh?.();
+    }
+    async function exposedFlip(action) {
+      const api = autoSizerRef.value;
+      if (api?.flip)
+        return api.flip(action);
+      return action();
+    }
+    async function exposedAction(fn, optionsOrDetect) {
+      const api = autoSizerRef.value;
+      if (api?.action)
+        return api.action(fn, optionsOrDetect);
+      await fn(void 0);
+      return { changedKeys: [] };
+    }
+    expose({
+      refresh: () => autoSizerRef.value?.refresh?.(),
+      flip: exposedFlip,
+      action: exposedAction,
+      size: () => autoSizerRef.value?.size?.value
+    });
+    function findByName(name) {
+      const nodes = slots.default?.() ?? [];
+      return nodes.find((n) => n?.props?.name === name);
+    }
+    const pointerElRef = ref(null);
+    const pointerInnerElRef = ref(null);
+    const navElRef = ref(null);
+    const navInnerElRef = ref(null);
+    const contentRootElRef = ref(null);
+    let pointerAnimTimer = null;
+    onBeforeUnmount(() => {
+      if (pointerAnimTimer != null)
+        window.clearTimeout(pointerAnimTimer);
+      pointerAnimTimer = null;
+    });
+    watch(
+      () => [contentRootElRef.value, sizeAnimEnabled.value],
+      ([el, enabled]) => {
+      },
+      { immediate: true }
+    );
+    function playPointerAnim() {
+      const el = pointerInnerElRef.value;
+      if (!el)
+        return;
+      const motions = ["stretch", "warp", "glide", "snap", "spring"];
+      for (const m of motions) {
+        el.classList.remove(`tx-tabs__pointer--motion-${m}-x`);
+        el.classList.remove(`tx-tabs__pointer--motion-${m}-y`);
+      }
+      const cls = isVertical.value ? `tx-tabs__pointer--motion-${indicatorMotion.value}-y` : `tx-tabs__pointer--motion-${indicatorMotion.value}-x`;
+      void el.offsetWidth;
+      el.classList.add(cls);
+      if (pointerAnimTimer != null)
+        window.clearTimeout(pointerAnimTimer);
+      pointerAnimTimer = window.setTimeout(() => {
+        el.classList.remove(cls);
+        pointerAnimTimer = null;
+      }, Math.max(120, (animationIndicator.value?.durationMs ?? 180) + 120));
+    }
+    function applyPointerFor(vnodeOrEl) {
+      const pointerEl = pointerElRef.value;
+      const nodeEl = vnodeOrEl?.el ?? vnodeOrEl;
+      const navInnerEl = navInnerElRef.value;
+      if (!pointerEl || !nodeEl || !navInnerEl)
+        return;
+      const nodeRect = nodeEl.getBoundingClientRect();
+      const navInnerRect = navInnerEl.getBoundingClientRect();
+      const diff = props.offset || 0;
+      pointerEl.style.opacity = "1";
+      pointerEl.style.width = "";
+      pointerEl.style.height = "";
+      const variant = indicatorVariant.value;
+      if (isVertical.value) {
+        const topBase = nodeRect.top - navInnerRect.top + navInnerEl.scrollTop;
+        const leftBase = nodeRect.left - navInnerRect.left + navInnerEl.scrollLeft;
+        const navInnerWidth = navInnerEl.clientWidth;
+        if (variant === "block" || variant === "outline") {
+          pointerEl.style.transform = `translate3d(${leftBase}px, ${topBase}px, 0)`;
+          pointerEl.style.width = `${nodeRect.width}px`;
+          pointerEl.style.height = `${nodeRect.height}px`;
+        } else if (variant === "dot") {
+          const top = topBase + nodeRect.height * 0.5 - 4;
+          const x = placement.value === "right" ? navInnerWidth - 8 - 8 : 8;
+          pointerEl.style.transform = `translate3d(${x}px, ${top}px, 0)`;
+          pointerEl.style.height = `8px`;
+          pointerEl.style.width = `8px`;
+        } else {
+          const top = topBase + nodeRect.height * 0.2 + diff;
+          const thickness = variant === "pill" ? 6 : 3;
+          const x = placement.value === "right" ? navInnerWidth - thickness : 0;
+          pointerEl.style.transform = `translate3d(${x}px, ${top}px, 0)`;
+          pointerEl.style.width = `${thickness}px`;
+          pointerEl.style.height = `${nodeRect.height * 0.6}px`;
+        }
+      } else {
+        const topBase = nodeRect.top - navInnerRect.top + navInnerEl.scrollTop;
+        const leftBase = nodeRect.left - navInnerRect.left + navInnerEl.scrollLeft;
+        const navInnerHeight = navInnerEl.clientHeight;
+        if (variant === "block" || variant === "outline") {
+          pointerEl.style.transform = `translate3d(${leftBase}px, ${topBase}px, 0)`;
+          pointerEl.style.width = `${nodeRect.width}px`;
+          pointerEl.style.height = `${nodeRect.height}px`;
+        } else if (variant === "dot") {
+          const left = leftBase + nodeRect.width * 0.5 - 4;
+          const y = placement.value === "bottom" ? 8 : navInnerHeight - 8 - 8;
+          pointerEl.style.transform = `translate3d(${left}px, ${y}px, 0)`;
+          pointerEl.style.width = `8px`;
+          pointerEl.style.height = `8px`;
+        } else {
+          const left = leftBase + nodeRect.width * 0.2 + diff;
+          const thickness = variant === "pill" ? 6 : 3;
+          const y = placement.value === "bottom" ? 0 : navInnerHeight - thickness;
+          pointerEl.style.transform = `translate3d(${left}px, ${y}px, 0)`;
+          pointerEl.style.width = `${nodeRect.width * 0.6}px`;
+          pointerEl.style.height = `${thickness}px`;
+        }
+      }
+      playPointerAnim();
+    }
+    function createTab(vnode) {
+      const tab = h(TxTabItem, {
+        ...vnode.props,
+        active: activeNode.value?.props?.name === vnode.props?.name,
+        onClick: () => {
+          if (vnode.props?.disabled)
+            return;
+          const el = slotWrapper.value?.el;
+          if (el) {
+            if (animationContent.value.enabled)
+              el.classList.remove("tx-tabs-zoom");
+            void runAutoHeight(() => setActive(vnode)).then(() => {
+              nextTick(() => {
+                applyPointerFor(tab);
+                if (animationContent.value.enabled)
+                  el.classList.add("tx-tabs-zoom");
+              });
+            });
+          }
+        }
+      });
+      const isDefault = !!vnode.props?.activation;
+      if (!activeNode.value && isDefault) {
+        setActive(vnode);
+        nextTick(() => applyPointerFor(tab));
+      }
+      return tab;
+    }
+    function renderTabs() {
+      let tabHeader = null;
+      const nodes = slots.default?.() ?? [];
+      const filtered = nodes.filter((slot) => {
+        const type = slot?.type;
+        return type && typeof type === "object" && "name" in type && type.name && qualifiedName.includes(type.name);
+      }).map((child) => {
+        const childName = child?.type?.name;
+        if (childName === "TxTabHeader") {
+          tabHeader = child;
+          return null;
+        }
+        if (childName === "TxTabItemGroup") {
+          return h("div", { class: "tx-tabs__group" }, [
+            h("div", { class: "tx-tabs__group-name" }, child.props?.name),
+            child.children && typeof child.children === "object" && "default" in child.children && typeof child.children.default === "function" ? child.children.default?.()?.map(createTab) : []
+          ]);
+        }
+        return createTab(child);
+      }).filter(Boolean);
+      return [filtered, tabHeader];
+    }
+    function renderContent(tabHeader) {
+      if (!activeNode.value) {
+        return h("div", { class: "tx-tabs__empty" }, "No tab selected");
+      }
+      const contentWrapper = h("div", { class: "tx-tabs__content-wrapper" }, activeNode.value.children?.default?.());
+      const content = contentScrollable.value ? h("div", { class: "tx-tabs__content-scroll" }, [contentWrapper]) : contentWrapper;
+      if (tabHeader) {
+        const headerVNode = h(
+          TxTabHeader,
+          { ...tabHeader.props, node: activeNode.value },
+          tabHeader.children
+        );
+        return [headerVNode, content];
+      }
+      return content;
+    }
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (!val)
+          return;
+        const node = findByName(val);
+        if (node) {
+          void runAutoHeight(() => {
+            activeNode.value = node;
+          }).then(() => {
+            nextTick(() => {
+              const el = navInnerElRef.value?.querySelector(".tx-tab-item.is-active");
+              applyPointerFor(el);
+            });
+          });
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.defaultValue,
+      (val) => {
+        if (!val || props.modelValue)
+          return;
+        const node = findByName(val);
+        if (node) {
+          void runAutoHeight(() => setActive(node)).then(() => {
+            nextTick(() => {
+              const el = navInnerElRef.value?.querySelector(".tx-tab-item.is-active");
+              applyPointerFor(el);
+            });
+          });
+        }
+      },
+      { immediate: true }
+    );
+    return () => {
+      const [tabs, tabHeader] = renderTabs();
+      const navRightSlot = slots["nav-right"]?.();
+      const pointer = h(
+        "div",
+        {
+          ref: pointerElRef,
+          class: "tx-tabs__pointer"
+        },
+        [
+          h("div", {
+            ref: pointerInnerElRef,
+            class: "tx-tabs__pointer-inner"
+          })
+        ]
+      );
+      const selectSlot = h(
+        "div",
+        {
+          ref: (el) => contentRootElRef.value = el,
+          class: ["tx-tabs__select-slot", { "tx-tabs-zoom": animationContent.value.enabled }]
+        },
+        renderContent(tabHeader)
+      );
+      slotWrapper.value = selectSlot;
+      const outerClass = contentScrollable.value ? "tx-tabs__auto-sizer tx-tabs__auto-sizer--fill" : "tx-tabs__auto-sizer overflow-hidden";
+      const content = h(
+        _sfc_main$1,
+        {
+          ref: (el) => autoSizerRef.value = el,
+          width: widthAnimEnabled.value,
+          height: heightAnimEnabled.value,
+          durationMs: animationSize.value.durationMs,
+          easing: animationSize.value.easing,
+          outerClass
+        },
+        {
+          default: () => selectSlot
+        }
+      );
+      const navStyle = isVertical.value ? {
+        minWidth: `${props.navMinWidth}px`,
+        maxWidth: `${props.navMaxWidth}px`
+      } : void 0;
+      const nav = h(
+        "div",
+        {
+          ref: (el) => navElRef.value = el,
+          class: "tx-tabs__nav",
+          style: navStyle
+        },
+        [
+          h(
+            "div",
+            {
+              class: "tx-tabs__nav-bar"
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: (el) => navInnerElRef.value = el,
+                  class: "tx-tabs__nav-inner"
+                },
+                [...tabs, pointer]
+              ),
+              navRightSlot ? h("div", { class: "tx-tabs__nav-extra" }, navRightSlot) : null
+            ]
+          )
+        ]
+      );
+      const main = h(
+        "div",
+        {
+          class: "tx-tabs__main",
+          style: { padding: `${props.contentPadding}px` }
+        },
+        [content]
+      );
+      const reverse = placement.value === "right" || placement.value === "bottom";
+      const children = reverse ? [main, nav] : [nav, main];
+      return h(
+        "div",
+        {
+          class: [
+            "tx-tabs",
+            `tx-tabs--${placement.value}`,
+            `tx-tabs--indicator-${indicatorVariant.value}`,
+            `tx-tabs--motion-${indicatorMotion.value}`,
+            {
+              "tx-tabs--auto-height": heightAnimEnabled.value,
+              "tx-tabs--auto-width": !!props.autoWidth,
+              "tx-tabs--indicator-anim": animationIndicator.value.enabled,
+              "tx-tabs--nav-anim": animationNav.value.enabled,
+              "tx-tabs--content-anim": animationContent.value.enabled
+            }
+          ],
+          style: {
+            "--tx-tabs-indicator-duration": `${animationIndicator.value.durationMs}ms`,
+            "--tx-tabs-indicator-easing": animationIndicator.value.easing,
+            "--tx-tabs-indicator-strength": `${indicatorMotionStrength.value}`,
+            "--tx-tabs-nav-duration": `${animationNav.value.durationMs}ms`,
+            "--tx-tabs-nav-easing": animationNav.value.easing
+          }
+        },
+        children
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1,54 @@
+export interface TabsProps {
+    modelValue?: string;
+    defaultValue?: string;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    offset?: number;
+    navMinWidth?: number;
+    navMaxWidth?: number;
+    contentPadding?: number;
+    contentScrollable?: boolean;
+    autoHeight?: boolean;
+    autoWidth?: boolean;
+    indicatorVariant?: 'line' | 'pill' | 'block' | 'dot' | 'outline';
+    indicatorMotion?: 'stretch' | 'warp' | 'glide' | 'snap' | 'spring';
+    autoHeightDurationMs?: number;
+    autoHeightEasing?: string;
+    animation?: TabsAnimation;
+}
+export interface TabsAnimationOption {
+    enabled?: boolean;
+}
+export interface TabsAnimationSize extends TabsAnimationOption {
+    durationMs?: number;
+    easing?: string;
+}
+export interface TabsAnimationNav extends TabsAnimationOption {
+    durationMs?: number;
+    easing?: string;
+}
+export interface TabsAnimationIndicator extends TabsAnimationOption {
+    durationMs?: number;
+    easing?: string;
+}
+export interface TabsAnimation {
+    size?: boolean | TabsAnimationSize;
+    nav?: boolean | TabsAnimationNav;
+    indicator?: boolean | TabsAnimationIndicator;
+    content?: boolean | TabsAnimationOption;
+}
+export interface TabsEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+}
+export interface TabItemProps {
+    name: string;
+    iconClass?: string;
+    disabled?: boolean;
+    activation?: boolean;
+}
+export interface TabHeaderProps {
+    node?: unknown;
+}
+export interface TabItemGroupProps {
+    name?: string;
+}