@talex-touch/tuffex 0.3.3

package/dist/es/dialog/src/TxTouchTip.vue2.js

@@ -0,0 +1,179 @@
+import { defineComponent, ref, watchEffect, onMounted, onUnmounted, createBlock, openBlock, Teleport, createElementVNode, withKeys, normalizeClass, createElementBlock, createCommentVNode, toDisplayString, Fragment, renderList } from 'vue';
+
+const _hoisted_1 = {
+  class: "tx-touch-tip",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const _hoisted_2 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_3 = ["textContent"];
+const _hoisted_4 = ["innerHTML"];
+const _hoisted_5 = { class: "tx-touch-tip__btns" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "tx-touch-tip__spinner"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "tx-touch-tip__btn-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxTouchTip"
+  },
+  __name: "TxTouchTip",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: String,
+      default: ""
+    },
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    close: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const btnArray = ref([]);
+    const wholeDom = ref(null);
+    let previouslyFocusedElement = null;
+    function sleep(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    watchEffect(() => {
+      const array = [];
+      [...props.buttons].forEach((btn) => {
+        const buttonState = {
+          content: btn.content,
+          type: btn.type,
+          onClick: btn.onClick,
+          loading: false
+        };
+        const obj = {
+          value: buttonState
+        };
+        if (btn.loading) {
+          obj.value.loading = true;
+          btn.loading(() => {
+            obj.value.loading = false;
+          });
+        }
+        array.push(obj);
+      });
+      btnArray.value = array;
+    });
+    async function clickBtn(btn) {
+      btn.value.loading = true;
+      await sleep(120);
+      if (await btn.value.onClick()) {
+        await forClose();
+      }
+      btn.value.loading = false;
+    }
+    function scrollListener() {
+      window.scrollTo({ top: 0 });
+    }
+    async function forClose() {
+      const el = wholeDom.value;
+      if (!el)
+        return;
+      const style = el.style;
+      await sleep(60);
+      style.transform = "translate(-50%, -50%) scale(1.08)";
+      style.opacity = "0";
+      await sleep(220);
+      props.close();
+    }
+    onMounted(() => {
+      previouslyFocusedElement = document.activeElement;
+      if (wholeDom.value) {
+        wholeDom.value.setAttribute("tabindex", "-1");
+        wholeDom.value.focus();
+      }
+      window.addEventListener("scroll", scrollListener);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("scroll", scrollListener);
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            ref_key: "wholeDom",
+            ref: wholeDom,
+            class: normalizeClass(["tx-touch-tip__container fake-background", { "tx-touch-tip__container--loading": false }]),
+            "aria-labelledby": __props.title ? "tx-touch-tip-title" : void 0,
+            "aria-describedby": __props.message ? "tx-touch-tip-message" : void 0,
+            onKeydown: withKeys(forClose, ["esc"])
+          }, [
+            __props.title ? (openBlock(), createElementBlock("h1", {
+              key: 0,
+              id: "tx-touch-tip-title",
+              class: "tx-touch-tip__title",
+              textContent: toDisplayString(__props.title)
+            }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+            __props.message ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              id: "tx-touch-tip-message",
+              class: "tx-touch-tip__content",
+              innerHTML: __props.message.replace("\n", "<br /><br />")
+            }, null, 8, _hoisted_4)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(btnArray.value, (btn, index) => {
+                return openBlock(), createElementBlock("button", {
+                  key: index,
+                  type: "button",
+                  class: normalizeClass(["tx-touch-tip__btn", [
+                    {
+                      "tx-touch-tip__btn--info": btn.value?.type === "info",
+                      "tx-touch-tip__btn--warning": btn.value?.type === "warning",
+                      "tx-touch-tip__btn--error": btn.value?.type === "error",
+                      "tx-touch-tip__btn--success": btn.value?.type === "success",
+                      "tx-touch-tip__btn--loading": btn.value.loading
+                    }
+                  ]]),
+                  onClick: ($event) => clickBtn(btn)
+                }, [
+                  btn.value.loading ? (openBlock(), createElementBlock("span", _hoisted_7, [..._cache[0] || (_cache[0] = [
+                    createElementVNode("svg", {
+                      class: "tx-spinner",
+                      viewBox: "0 0 24 24",
+                      width: "16",
+                      height: "16"
+                    }, [
+                      createElementVNode("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        fill: "none",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-dasharray": "31.416",
+                        "stroke-dashoffset": "31.416"
+                      })
+                    ], -1)
+                  ])])) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(btn.value.content), 1))
+                ], 10, _hoisted_6);
+              }), 128))
+            ])
+          ], 40, _hoisted_2)
+        ])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1,141 @@
+import { Component, VNode } from 'vue';
+
+/**
+ * Button type for visual styling.
+ *
+ * @public
+ */
+export type DialogButtonType = 'info' | 'warning' | 'error' | 'success';
+/**
+ * Interface for dialog button configuration.
+ *
+ * @public
+ */
+export interface DialogButton {
+    /**
+     * The text content displayed on the button.
+     */
+    content: string;
+    /**
+     * The visual type/style of the button.
+     */
+    type?: DialogButtonType;
+    /**
+     * Auto-click countdown timer in seconds.
+     * When provided, the button will automatically click after the specified time.
+     */
+    time?: number;
+    /**
+     * Click handler function.
+     * Return true to close the dialog, false to keep it open.
+     */
+    onClick: () => Promise<boolean> | boolean;
+    /**
+     * Loading callback function.
+     * Called with a done function that should be invoked when loading is complete.
+     */
+    loading?: (done: () => void) => void;
+}
+/**
+ * Props interface for the TxBottomDialog component.
+ *
+ * @public
+ */
+export interface BottomDialogProps {
+    /**
+     * The title displayed in the dialog header.
+     * @default ''
+     */
+    title?: string;
+    /**
+     * The message content of the dialog.
+     * @default ''
+     */
+    message?: string;
+    /**
+     * Duration in milliseconds before the dialog auto-closes.
+     * Set to 0 to disable auto-close.
+     * @default 0
+     */
+    stay?: number;
+    /**
+     * Callback function to close the dialog.
+     */
+    close: () => void;
+    /**
+     * Array of button configurations.
+     * @default []
+     */
+    btns?: DialogButton[];
+    /**
+     * Icon class name to display in the dialog.
+     * @default ''
+     */
+    icon?: string;
+    /**
+     * Z-index offset for the dialog.
+     * Final z-index = 10000 + index.
+     * @default 0
+     */
+    index?: number;
+}
+/**
+ * Props interface for the TxBlowDialog component.
+ *
+ * @public
+ */
+export interface BlowDialogProps {
+    /**
+     * Callback function to close the dialog.
+     */
+    close: () => void;
+    /**
+     * The title displayed in the dialog.
+     * @default ''
+     */
+    title?: string;
+    /**
+     * The message content of the dialog.
+     * Supports HTML content.
+     * @default ''
+     */
+    message?: string;
+    /**
+     * A Vue component to render in the dialog.
+     */
+    comp?: Component;
+    /**
+     * A render function that returns a VNode.
+     */
+    render?: () => VNode;
+}
+/**
+ * Emits interface for dialog components.
+ *
+ * @public
+ */
+export interface DialogEmits {
+    /**
+     * Emitted when the dialog is closed.
+     */
+    (e: 'close'): void;
+}
+export interface PopperDialogProps {
+    close: () => void;
+    title?: string;
+    message?: string;
+    comp?: Component;
+    render?: () => VNode;
+}
+export interface TouchTipButton {
+    content: string;
+    type?: DialogButtonType;
+    onClick: () => Promise<boolean> | boolean;
+    loading?: (done: () => void) => void;
+}
+export interface TouchTipProps {
+    title?: string;
+    message?: string;
+    buttons: TouchTipButton[];
+    close: () => void;
+}

package/dist/es/drawer/index.d.ts

@@ -0,0 +1,183 @@
+import { DrawerEmits, DrawerProps } from './src/types';
+import { default as TxDrawer } from './src/TxDrawer.vue';
+
+/**
+ * TxDrawer component with Vue plugin installation support.
+ *
+ * @example
+ * ```ts
+ * import { TxDrawer } from '@talex-touch/tuffex'
+ *
+ * // Use in template
+ * <TxDrawer v-model:visible="visible" title="Settings">
+ *   <p>Content</p>
+ * </TxDrawer>
+ * ```
+ *
+ * @public
+ */
+declare const Drawer: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        width: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        visible: {
+            type: import('vue').PropType<boolean>;
+            required: true;
+        };
+        closeOnClickMask: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        direction: {
+            type: import('vue').PropType<"right" | "left">;
+            default: string;
+        };
+        showClose: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        closeOnPressEscape: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        zIndex: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:visible": (visible: boolean) => void;
+        close: () => void;
+        open: () => void;
+    }, import('vue').PublicProps, {
+        title: string;
+        width: string;
+        closeOnClickMask: boolean;
+        direction: "left" | "right";
+        showClose: boolean;
+        closeOnPressEscape: boolean;
+        zIndex: number;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        width: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        visible: {
+            type: import('vue').PropType<boolean>;
+            required: true;
+        };
+        closeOnClickMask: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        direction: {
+            type: import('vue').PropType<"right" | "left">;
+            default: string;
+        };
+        showClose: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        closeOnPressEscape: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        zIndex: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        title: string;
+        width: string;
+        closeOnClickMask: boolean;
+        direction: "left" | "right";
+        showClose: boolean;
+        closeOnPressEscape: boolean;
+        zIndex: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    width: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    visible: {
+        type: import('vue').PropType<boolean>;
+        required: true;
+    };
+    closeOnClickMask: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    direction: {
+        type: import('vue').PropType<"right" | "left">;
+        default: string;
+    };
+    showClose: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    closeOnPressEscape: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    zIndex: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (visible: boolean) => void;
+    close: () => void;
+    open: () => void;
+}, string, {
+    title: string;
+    width: string;
+    closeOnClickMask: boolean;
+    direction: "left" | "right";
+    showClose: boolean;
+    closeOnPressEscape: boolean;
+    zIndex: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export { Drawer, TxDrawer };
+export type { DrawerEmits, DrawerProps };
+export type TxDrawerInstance = InstanceType<typeof TxDrawer>;
+export default Drawer;

package/dist/es/drawer/index.js

@@ -0,0 +1,7 @@
+import { withInstall } from '../utils/withInstall.js';
+import _sfc_main from './src/TxDrawer.vue.js';
+/* empty css                  */
+
+const Drawer = withInstall(_sfc_main);
+
+export { Drawer, _sfc_main as TxDrawer, Drawer as default };

package/dist/es/drawer/src/TxDrawer.vue.d.ts

@@ -0,0 +1,63 @@
+import { DrawerProps } from './types';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    footer?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DrawerProps>, {
+    title: string;
+    width: string;
+    direction: string;
+    showClose: boolean;
+    closeOnClickMask: boolean;
+    closeOnPressEscape: boolean;
+    zIndex: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (visible: boolean) => void;
+    close: () => void;
+    open: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DrawerProps>, {
+    title: string;
+    width: string;
+    direction: string;
+    showClose: boolean;
+    closeOnClickMask: boolean;
+    closeOnPressEscape: boolean;
+    zIndex: number;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    title: string;
+    width: string;
+    closeOnClickMask: boolean;
+    direction: "left" | "right";
+    showClose: boolean;
+    closeOnPressEscape: boolean;
+    zIndex: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/drawer/src/TxDrawer.vue.js

@@ -0,0 +1,129 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, toDisplayString, renderSlot } from 'vue';
+
+const _hoisted_1 = ["aria-hidden"];
+const _hoisted_2 = { class: "tx-drawer__panel" };
+const _hoisted_3 = { class: "tx-drawer__header" };
+const _hoisted_4 = { class: "tx-drawer__title" };
+const _hoisted_5 = { class: "tx-drawer__body" };
+const _hoisted_6 = {
+  key: 0,
+  class: "tx-drawer__footer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxDrawer"
+  },
+  __name: "TxDrawer",
+  props: {
+    title: { default: "Drawer" },
+    visible: { type: Boolean },
+    width: { default: "60%" },
+    direction: { default: "right" },
+    showClose: { type: Boolean, default: true },
+    closeOnClickMask: { type: Boolean, default: true },
+    closeOnPressEscape: { type: Boolean, default: true },
+    zIndex: { default: 1998 }
+  },
+  emits: ["update:visible", "close", "open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const drawerRef = ref(null);
+    const display = computed({
+      get: () => props.visible,
+      set: (value) => emit("update:visible", value)
+    });
+    const drawerStyle = computed(() => ({
+      "--tx-drawer-width": props.width,
+      "--tx-drawer-z-index": props.zIndex
+    }));
+    function handleClose() {
+      display.value = false;
+      emit("close");
+    }
+    function handleMaskClick() {
+      if (props.closeOnClickMask) {
+        handleClose();
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape" && props.closeOnPressEscape) {
+        handleClose();
+      }
+    }
+    function trapFocus() {
+      if (drawerRef.value) {
+        drawerRef.value.focus();
+      }
+    }
+    watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal) {
+          emit("open");
+          trapFocus();
+        }
+      }
+    );
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createElementVNode("div", {
+          ref_key: "drawerRef",
+          ref: drawerRef,
+          class: normalizeClass(["tx-drawer", {
+            "tx-drawer--visible": display.value,
+            [`tx-drawer--${__props.direction}`]: true
+          }]),
+          style: normalizeStyle(drawerStyle.value),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-hidden": !display.value,
+          tabindex: "-1"
+        }, [
+          createElementVNode("div", {
+            class: "tx-drawer__mask",
+            onClick: handleMaskClick
+          }),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("header", _hoisted_3, [
+              createElementVNode("h2", _hoisted_4, toDisplayString(__props.title), 1),
+              __props.showClose ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "tx-drawer__close",
+                "aria-label": "Close drawer",
+                onClick: handleClose
+              }, [..._cache[0] || (_cache[0] = [
+                createElementVNode("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "20",
+                  height: "20",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round"
+                }, [
+                  createElementVNode("path", { d: "M18 6L6 18M6 6l12 12" })
+                ], -1)
+              ])])) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_5, [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6, [
+              renderSlot(_ctx.$slots, "footer")
+            ])) : createCommentVNode("", true)
+          ])
+        ], 14, _hoisted_1)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };