@talex-touch/tuffex 0.3.3

package/dist/es/group-block/src/TxGroupBlock.vue.js

@@ -0,0 +1,239 @@
+import { defineComponent, ref, computed, watch, onMounted, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createBlock, unref, toDisplayString } from 'vue';
+import gsap from 'gsap';
+import { hasWindow } from '../../utils/env.js';
+import '../../icon/index.js';
+import TuffIcon from '../../icon/src/TxIcon.vue.js';
+
+const _hoisted_1 = { class: "tx-group-block__content TGroupBlock-Content" };
+const _hoisted_2 = { class: "tx-group-block__label TGroupBlock-Label" };
+const _hoisted_3 = { class: "tx-group-block__name" };
+const _hoisted_4 = { class: "tx-group-block__description" };
+const STORAGE_PREFIX = "tuff-block-storage-";
+const LEGACY_STORAGE_PREFIX = "tx-group-block-storage-";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxGroupBlock"
+  },
+  __name: "TxGroupBlock",
+  props: {
+    name: {},
+    description: { default: "" },
+    defaultIcon: {},
+    activeIcon: {},
+    iconSize: { default: 22 },
+    collapsible: { type: Boolean, default: true },
+    collapsed: { type: Boolean, default: false },
+    defaultExpand: { type: Boolean, default: true },
+    memoryName: { default: "" },
+    icon: { default: "" },
+    expandFill: { type: Boolean, default: false },
+    shrink: { type: Boolean, default: false }
+  },
+  emits: ["update:expanded", "toggle"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const storedExpand = ref(readStoredExpand());
+    function readStoredExpand() {
+      if (!hasWindow() || !props.memoryName)
+        return null;
+      try {
+        const key = `${STORAGE_PREFIX}${props.memoryName}`;
+        const legacyKey = `${LEGACY_STORAGE_PREFIX}${props.memoryName}`;
+        const raw = localStorage.getItem(key) ?? localStorage.getItem(legacyKey);
+        if (!raw)
+          return null;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed?.expand === "boolean")
+          return parsed.expand;
+      } catch (error) {
+        console.warn("[TxGroupBlock] Failed to read stored expand state", error);
+      }
+      return null;
+    }
+    function persistState(state) {
+      if (!hasWindow() || !props.memoryName)
+        return;
+      try {
+        const payload = JSON.stringify({ expand: state });
+        localStorage.setItem(`${STORAGE_PREFIX}${props.memoryName}`, payload);
+        localStorage.setItem(`${LEGACY_STORAGE_PREFIX}${props.memoryName}`, payload);
+        storedExpand.value = state;
+      } catch (error) {
+        console.warn("[TxGroupBlock] Failed to persist expand state", error);
+      }
+    }
+    function resolveDefaultExpand() {
+      if (typeof props.defaultExpand === "boolean")
+        return props.defaultExpand;
+      return !props.collapsed;
+    }
+    const hasUserInteracted = ref(false);
+    const expanded = ref(storedExpand.value ?? (props.shrink ? false : resolveDefaultExpand()));
+    const contentRef = ref(null);
+    const isMounted = ref(false);
+    function toIcon(icon) {
+      if (!icon)
+        return null;
+      if (typeof icon === "string")
+        return { type: "class", value: icon };
+      return icon;
+    }
+    const defaultIcon = computed(() => {
+      if (props.defaultIcon !== void 0)
+        return toIcon(props.defaultIcon);
+      return toIcon(props.icon);
+    });
+    const activeIcon = computed(() => {
+      if (props.activeIcon !== void 0)
+        return toIcon(props.activeIcon);
+      return null;
+    });
+    const headerIcon = computed(() => {
+      if (expanded.value)
+        return activeIcon.value ?? defaultIcon.value;
+      return defaultIcon.value ?? activeIcon.value;
+    });
+    function applyImmediate(state) {
+      const el = contentRef.value;
+      if (!el)
+        return;
+      gsap.killTweensOf(el);
+      if (state) {
+        el.style.display = "block";
+        el.style.height = "auto";
+        el.style.opacity = "1";
+      } else {
+        el.style.display = "none";
+        el.style.height = "0px";
+        el.style.opacity = "0";
+      }
+    }
+    function animateContent(state) {
+      const el = contentRef.value;
+      if (!el)
+        return;
+      gsap.killTweensOf(el);
+      el.style.overflow = "hidden";
+      if (state) {
+        el.style.display = "block";
+        const target = el.scrollHeight || 0;
+        gsap.fromTo(
+          el,
+          { height: 0, opacity: 0.2 },
+          {
+            height: target,
+            opacity: 1,
+            duration: 0.45,
+            ease: "power3.out",
+            onComplete: () => {
+              el.style.height = "auto";
+              el.style.overflow = "";
+            }
+          }
+        );
+      } else {
+        const current = el.scrollHeight || el.offsetHeight || 0;
+        gsap.fromTo(
+          el,
+          { height: current, opacity: 1 },
+          {
+            height: 0,
+            opacity: 0,
+            duration: 0.35,
+            ease: "power2.inOut",
+            onComplete: () => {
+              el.style.display = "none";
+            }
+          }
+        );
+      }
+    }
+    function toggle() {
+      if (!props.collapsible)
+        return;
+      expanded.value = !expanded.value;
+      hasUserInteracted.value = true;
+      persistState(expanded.value);
+      emit("update:expanded", expanded.value);
+      emit("toggle", expanded.value);
+    }
+    watch(
+      () => props.shrink,
+      (newVal) => {
+        if (storedExpand.value !== null || hasUserInteracted.value)
+          return;
+        expanded.value = !newVal;
+      }
+    );
+    watch(
+      () => props.collapsed,
+      (value) => {
+        if (storedExpand.value !== null || hasUserInteracted.value)
+          return;
+        expanded.value = !value;
+      }
+    );
+    watch(
+      () => props.defaultExpand,
+      (value) => {
+        if (storedExpand.value !== null || hasUserInteracted.value)
+          return;
+        if (typeof value === "boolean")
+          expanded.value = value;
+      }
+    );
+    watch(
+      expanded,
+      (value) => {
+        if (!isMounted.value)
+          return;
+        animateContent(value);
+      },
+      { flush: "post" }
+    );
+    onMounted(() => {
+      applyImmediate(expanded.value);
+      isMounted.value = true;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tx-group-block TGroupBlock-Container", { "tx-group-block--expanded": expanded.value, "expand": expanded.value }])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["tx-group-block__header TGroupBlock-Header fake-background index-fix", { "tx-group-block__header--static": !__props.collapsible, "is-static": !__props.collapsible }]),
+          onClick: toggle
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "icon", { active: expanded.value }, () => [
+              headerIcon.value ? (openBlock(), createBlock(unref(TuffIcon), {
+                key: 0,
+                icon: headerIcon.value,
+                size: __props.iconSize
+              }, null, 8, ["icon", "size"])) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("h3", _hoisted_3, toDisplayString(__props.name), 1),
+              createElementVNode("p", _hoisted_4, toDisplayString(__props.description), 1)
+            ])
+          ]),
+          renderSlot(_ctx.$slots, "header-extra", { active: expanded.value }),
+          __props.collapsible ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["tx-group-block__toggle TGroupBlock-Mode", expanded.value ? "i-carbon-subtract" : "i-carbon-add"]),
+            "aria-hidden": "true"
+          }, null, 2)) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          ref_key: "contentRef",
+          ref: contentRef,
+          class: "tx-group-block__body TGroupBlock-Main"
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 512)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/group-block/src/TxGroupBlock.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from './TxGroupBlock.vue.js';
+/* empty css                  */
+
+
+
+export { _sfc_main as default };

package/dist/es/group-block/src/types.d.ts

@@ -0,0 +1,242 @@
+import { TxIconSource } from '../../icon';
+
+type IconValue = TxIconSource | string | null | undefined;
+/**
+ * Props interface for the TxGroupBlock component.
+ *
+ * @public
+ */
+export interface GroupBlockProps {
+    /**
+     * The name/title of the group block.
+     */
+    name: string;
+    /**
+     * Description text displayed below the name.
+     * @default ''
+     */
+    description?: string;
+    /**
+     * Default icon to display in the header.
+     */
+    defaultIcon?: IconValue;
+    /**
+     * Active icon to display when expanded.
+     */
+    activeIcon?: IconValue;
+    /**
+     * Header icon size in pixels.
+     * @default 22
+     */
+    iconSize?: number;
+    /**
+     * Whether the block can be toggled.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * External collapsed state.
+     * When provided, initial expanded state follows this unless user has interacted.
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Initial expanded state.
+     * @default true
+     */
+    defaultExpand?: boolean;
+    /**
+     * Persist expanded state in localStorage.
+     */
+    memoryName?: string;
+    /**
+     * Legacy icon class name (alias for defaultIcon).
+     * @deprecated Use defaultIcon instead.
+     */
+    icon?: string;
+    /**
+     * Legacy filled icon toggle (kept for compatibility).
+     * @deprecated Use activeIcon instead.
+     */
+    expandFill?: boolean;
+    /**
+     * Legacy collapsed state (alias for collapsed).
+     * @deprecated Use collapsed/defaultExpand instead.
+     */
+    shrink?: boolean;
+}
+/**
+ * Emits interface for the TxGroupBlock component.
+ *
+ * @public
+ */
+export interface GroupBlockEmits {
+    /**
+     * Emitted when the expand state changes.
+     * @param expanded - The new expanded state
+     */
+    (e: 'update:expanded', expanded: boolean): void;
+    /**
+     * Emitted when the header is clicked.
+     */
+    (e: 'toggle', expanded: boolean): void;
+}
+/**
+ * Props interface for the TxBlockLine component.
+ *
+ * @public
+ */
+export interface BlockLineProps {
+    /**
+     * The title text of the block line.
+     * @default ''
+     */
+    title?: string;
+    /**
+     * The description text displayed beside the title.
+     * @default ''
+     */
+    description?: string;
+    /**
+     * Whether to display as a clickable link style.
+     * @default false
+     */
+    link?: boolean;
+}
+/**
+ * Emits interface for the TxBlockLine component.
+ *
+ * @public
+ */
+export interface BlockLineEmits {
+    /**
+     * Emitted when the block line is clicked.
+     * @param event - The mouse event
+     */
+    (e: 'click', event: MouseEvent): void;
+}
+/**
+ * Props interface for the TxBlockSlot component.
+ *
+ * @public
+ */
+export interface BlockSlotProps {
+    /**
+     * The title text of the block slot.
+     */
+    title?: string;
+    /**
+     * The description text displayed below the title.
+     */
+    description?: string;
+    /**
+     * Default icon to display.
+     */
+    defaultIcon?: IconValue;
+    /**
+     * Active icon to display when active.
+     */
+    activeIcon?: IconValue;
+    /**
+     * Header icon size in pixels.
+     * @default 20
+     */
+    iconSize?: number;
+    /**
+     * Whether the block slot is active.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether the block slot is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Legacy icon class name (alias for defaultIcon).
+     * @deprecated Use defaultIcon instead.
+     */
+    icon?: string;
+}
+/**
+ * Emits interface for the TxBlockSlot component.
+ *
+ * @public
+ */
+export interface BlockSlotEmits {
+    /**
+     * Emitted when the block slot is clicked.
+     * @param event - The mouse event
+     */
+    (e: 'click', event: MouseEvent): void;
+}
+/**
+ * Props interface for the TxBlockSwitch component.
+ *
+ * @public
+ */
+export interface BlockSwitchProps {
+    /**
+     * The title text of the block switch.
+     */
+    title: string;
+    /**
+     * The description text displayed below the title.
+     */
+    description: string;
+    /**
+     * The current switch value for v-model binding.
+     */
+    modelValue: boolean;
+    /**
+     * Default icon to display.
+     */
+    defaultIcon?: IconValue;
+    /**
+     * Active icon to display when active.
+     */
+    activeIcon?: IconValue;
+    /**
+     * Whether the block switch is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to display as a guidance/navigation item instead of a switch.
+     * @default false
+     */
+    guidance?: boolean;
+    /**
+     * Whether to show loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Legacy icon class name (alias for defaultIcon).
+     * @deprecated Use defaultIcon instead.
+     */
+    icon?: string;
+}
+/**
+ * Emits interface for the TxBlockSwitch component.
+ *
+ * @public
+ */
+export interface BlockSwitchEmits {
+    /**
+     * Emitted when the switch value changes.
+     * @param value - The new switch value
+     */
+    (e: 'update:modelValue', value: boolean): void;
+    /**
+     * Emitted when the switch value changes.
+     * @param value - The new switch value
+     */
+    (e: 'change', value: boolean): void;
+    /**
+     * Emitted when the block is clicked in guidance mode.
+     * @param event - The mouse event
+     */
+    (e: 'click', event: MouseEvent): void;
+}
+export {};