@talex-touch/tuffex 0.3.3

package/dist/es/glass-surface/src/TxGlassSurface.vue.js

@@ -0,0 +1,303 @@
+import { defineComponent, ref, computed, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot } from 'vue';
+import { hasWindow, hasNavigator, hasDocument } from '../../utils/env.js';
+
+const _hoisted_1 = {
+  class: "tx-glass-surface__svg",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2 = { class: "tx-glass-surface__content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxGlassSurface"
+  },
+  __name: "TxGlassSurface",
+  props: {
+    width: { default: "200px" },
+    height: { default: "200px" },
+    borderRadius: { default: 20 },
+    borderWidth: { default: 0.07 },
+    brightness: { default: 70 },
+    opacity: { default: 0.93 },
+    blur: { default: 11 },
+    displace: { default: 0.5 },
+    backgroundOpacity: { default: 0 },
+    saturation: { default: 1 },
+    distortionScale: { default: -180 },
+    redOffset: { default: 0 },
+    greenOffset: { default: 10 },
+    blueOffset: { default: 20 },
+    xChannel: { default: "R" },
+    yChannel: { default: "G" },
+    mixBlendMode: { default: "difference" }
+  },
+  setup(__props) {
+    const props = __props;
+    const isDarkMode = ref(false);
+    const containerRef = ref(null);
+    const feImageRef = ref(null);
+    const redChannelRef = ref(null);
+    const greenChannelRef = ref(null);
+    const blueChannelRef = ref(null);
+    const gaussianBlurRef = ref(null);
+    function generateUniqueId() {
+      return Math.random().toString(36).substring(2, 15);
+    }
+    const uniqueId = generateUniqueId();
+    const filterId = `tx-glass-filter-${uniqueId}`;
+    const redGradId = `tx-glass-red-grad-${uniqueId}`;
+    const blueGradId = `tx-glass-blue-grad-${uniqueId}`;
+    let resizeObserver = null;
+    function updateDarkMode() {
+      if (!hasWindow())
+        return;
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      isDarkMode.value = mediaQuery.matches;
+      const handler = (e) => {
+        isDarkMode.value = e.matches;
+      };
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+    function supportsSVGFilters() {
+      if (!hasWindow() || !hasNavigator() || !hasDocument())
+        return false;
+      const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+      const isFirefox = /Firefox/.test(navigator.userAgent);
+      if (isWebkit || isFirefox)
+        return false;
+      const value = `url(#${filterId})`;
+      if (typeof CSS === "undefined" || typeof CSS.supports !== "function")
+        return false;
+      return CSS.supports("backdrop-filter", value) || CSS.supports("-webkit-backdrop-filter", value);
+    }
+    function supportsBackdropFilter() {
+      if (!hasWindow())
+        return false;
+      return CSS.supports("backdrop-filter", "blur(10px)");
+    }
+    function generateDisplacementMap() {
+      const rect = containerRef.value?.getBoundingClientRect();
+      const actualWidth = rect?.width || 400;
+      const actualHeight = rect?.height || 200;
+      const edgeSize = Math.min(actualWidth, actualHeight) * (props.borderWidth * 0.5);
+      const svgContent = `
+      <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="red"/>
+          </linearGradient>
+          <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="blue"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" fill="black"></rect>
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${props.borderRadius}" fill="url(#${redGradId})" />
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${props.borderRadius}" fill="url(#${blueGradId})" style="mix-blend-mode: ${props.mixBlendMode}" />
+        <rect x="${edgeSize}" y="${edgeSize}" width="${actualWidth - edgeSize * 2}" height="${actualHeight - edgeSize * 2}" rx="${props.borderRadius}" fill="hsl(0 0% ${props.brightness}% / ${props.opacity})" style="filter:blur(${props.blur}px)" />
+      </svg>
+    `;
+      return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
+    }
+    function updateDisplacementMap() {
+      if (feImageRef.value) {
+        feImageRef.value.setAttribute("href", generateDisplacementMap());
+      }
+    }
+    function updateFilterElements() {
+      const elements = [
+        { el: redChannelRef.value, offset: props.redOffset },
+        { el: greenChannelRef.value, offset: props.greenOffset },
+        { el: blueChannelRef.value, offset: props.blueOffset }
+      ];
+      for (const { el, offset } of elements) {
+        if (el) {
+          el.setAttribute("scale", (props.distortionScale + offset).toString());
+          el.setAttribute("xChannelSelector", props.xChannel);
+          el.setAttribute("yChannelSelector", props.yChannel);
+        }
+      }
+      if (gaussianBlurRef.value) {
+        gaussianBlurRef.value.setAttribute("stdDeviation", props.displace.toString());
+      }
+    }
+    const containerStyles = computed(() => {
+      const baseStyles = {
+        width: typeof props.width === "number" ? `${props.width}px` : props.width,
+        height: typeof props.height === "number" ? `${props.height}px` : props.height,
+        borderRadius: `${props.borderRadius}px`
+      };
+      const fallbackBlur = Math.max(0, props.blur);
+      const svgSupported = supportsSVGFilters();
+      const backdropFilterSupported = supportsBackdropFilter();
+      if (svgSupported) {
+        return {
+          ...baseStyles,
+          background: isDarkMode.value ? `hsl(0 0% 0% / ${props.backgroundOpacity})` : `hsl(0 0% 100% / ${props.backgroundOpacity})`,
+          backdropFilter: `url(#${filterId}) saturate(${props.saturation})`
+        };
+      }
+      if (isDarkMode.value) {
+        if (!backdropFilterSupported) {
+          return {
+            ...baseStyles,
+            background: "rgba(0, 0, 0, 0.4)",
+            border: "1px solid rgba(255, 255, 255, 0.2)"
+          };
+        }
+        return {
+          ...baseStyles,
+          background: "rgba(255, 255, 255, 0.1)",
+          backdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.2)`,
+          WebkitBackdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.2)`,
+          border: "1px solid rgba(255, 255, 255, 0.2)"
+        };
+      }
+      if (!backdropFilterSupported) {
+        return {
+          ...baseStyles,
+          background: "rgba(255, 255, 255, 0.4)",
+          border: "1px solid rgba(255, 255, 255, 0.3)"
+        };
+      }
+      return {
+        ...baseStyles,
+        background: "rgba(255, 255, 255, 0.25)",
+        backdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.1)`,
+        WebkitBackdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.1)`,
+        border: "1px solid rgba(255, 255, 255, 0.3)"
+      };
+    });
+    onMounted(() => {
+      updateDarkMode();
+      nextTick(() => {
+        updateDisplacementMap();
+        updateFilterElements();
+        if (containerRef.value && typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(() => {
+            setTimeout(updateDisplacementMap, 0);
+          });
+          resizeObserver.observe(containerRef.value);
+        }
+      });
+    });
+    watch(
+      [
+        () => props.width,
+        () => props.height,
+        () => props.borderRadius,
+        () => props.borderWidth,
+        () => props.brightness,
+        () => props.opacity,
+        () => props.blur,
+        () => props.displace,
+        () => props.distortionScale,
+        () => props.redOffset,
+        () => props.greenOffset,
+        () => props.blueOffset,
+        () => props.xChannel,
+        () => props.yChannel,
+        () => props.mixBlendMode
+      ],
+      () => {
+        updateDisplacementMap();
+        updateFilterElements();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "tx-glass-surface",
+        style: normalizeStyle(containerStyles.value)
+      }, [
+        (openBlock(), createElementBlock("svg", _hoisted_1, [
+          createElementVNode("defs", null, [
+            createElementVNode("filter", {
+              id: filterId,
+              "color-interpolation-filters": "sRGB",
+              x: "0%",
+              y: "0%",
+              width: "100%",
+              height: "100%"
+            }, [
+              createElementVNode("feImage", {
+                ref_key: "feImageRef",
+                ref: feImageRef,
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                preserveAspectRatio: "none",
+                result: "map"
+              }, null, 512),
+              createElementVNode("feDisplacementMap", {
+                ref_key: "redChannelRef",
+                ref: redChannelRef,
+                in: "SourceGraphic",
+                in2: "map",
+                result: "dispRed"
+              }, null, 512),
+              _cache[0] || (_cache[0] = createElementVNode("feColorMatrix", {
+                in: "dispRed",
+                type: "matrix",
+                values: "1 0 0 0 0\n                    0 0 0 0 0\n                    0 0 0 0 0\n                    0 0 0 1 0",
+                result: "red"
+              }, null, -1)),
+              createElementVNode("feDisplacementMap", {
+                ref_key: "greenChannelRef",
+                ref: greenChannelRef,
+                in: "SourceGraphic",
+                in2: "map",
+                result: "dispGreen"
+              }, null, 512),
+              _cache[1] || (_cache[1] = createElementVNode("feColorMatrix", {
+                in: "dispGreen",
+                type: "matrix",
+                values: "0 0 0 0 0\n                    0 1 0 0 0\n                    0 0 0 0 0\n                    0 0 0 1 0",
+                result: "green"
+              }, null, -1)),
+              createElementVNode("feDisplacementMap", {
+                ref_key: "blueChannelRef",
+                ref: blueChannelRef,
+                in: "SourceGraphic",
+                in2: "map",
+                result: "dispBlue"
+              }, null, 512),
+              _cache[2] || (_cache[2] = createElementVNode("feColorMatrix", {
+                in: "dispBlue",
+                type: "matrix",
+                values: "0 0 0 0 0\n                    0 0 0 0 0\n                    0 0 1 0 0\n                    0 0 0 1 0",
+                result: "blue"
+              }, null, -1)),
+              _cache[3] || (_cache[3] = createElementVNode("feBlend", {
+                in: "red",
+                in2: "green",
+                mode: "screen",
+                result: "rg"
+              }, null, -1)),
+              _cache[4] || (_cache[4] = createElementVNode("feBlend", {
+                in: "rg",
+                in2: "blue",
+                mode: "screen",
+                result: "output"
+              }, null, -1)),
+              createElementVNode("feGaussianBlur", {
+                ref_key: "gaussianBlurRef",
+                ref: gaussianBlurRef,
+                in: "output",
+                stdDeviation: "0.7"
+              }, null, 512)
+            ])
+          ])
+        ])),
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 4);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/glass-surface/src/TxGlassSurface.vue3.js

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

package/dist/es/glow-text/index.d.ts

@@ -0,0 +1,195 @@
+import { GlowTextProps } from './src/types';
+import { default as TxGlowText } from './src/TxGlowText.vue';
+
+declare const GlowText: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        active: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        repeat: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        tag: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        durationMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        radius: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        opacity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        delayMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        angle: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        bandSize: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        blendMode: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        active: boolean;
+        repeat: boolean;
+        tag: string;
+        durationMs: number;
+        color: string;
+        radius: number;
+        opacity: number;
+        delayMs: number;
+        angle: number;
+        bandSize: number;
+        blendMode: string;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        active: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        repeat: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        tag: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        durationMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        radius: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        opacity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        delayMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        angle: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        bandSize: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        blendMode: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        active: boolean;
+        repeat: boolean;
+        tag: string;
+        durationMs: number;
+        color: string;
+        radius: number;
+        opacity: number;
+        delayMs: number;
+        angle: number;
+        bandSize: number;
+        blendMode: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    active: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    repeat: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    tag: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    durationMs: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    color: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    radius: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    opacity: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    delayMs: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    angle: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    bandSize: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    blendMode: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    active: boolean;
+    repeat: boolean;
+    tag: string;
+    durationMs: number;
+    color: string;
+    radius: number;
+    opacity: number;
+    delayMs: number;
+    angle: number;
+    bandSize: number;
+    blendMode: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export { GlowText, TxGlowText };
+export type { GlowTextProps };
+export type TxGlowTextInstance = InstanceType<typeof TxGlowText>;
+export default GlowText;

package/dist/es/glow-text/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from '../utils/withInstall.js';
+import TxGlowText from './src/TxGlowText.vue.js';
+
+const GlowText = withInstall(TxGlowText);
+
+export { GlowText, TxGlowText, GlowText as default };

package/dist/es/glow-text/src/TxGlowText.vue.d.ts

@@ -0,0 +1,66 @@
+import { GlowTextProps } from './types';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GlowTextProps>, {
+    tag: string;
+    active: boolean;
+    durationMs: number;
+    delayMs: number;
+    angle: number;
+    bandSize: number;
+    color: string;
+    opacity: number;
+    blendMode: string;
+    radius: number;
+    repeat: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GlowTextProps>, {
+    tag: string;
+    active: boolean;
+    durationMs: number;
+    delayMs: number;
+    angle: number;
+    bandSize: number;
+    color: string;
+    opacity: number;
+    blendMode: string;
+    radius: number;
+    repeat: boolean;
+}>>> & Readonly<{}>, {
+    active: boolean;
+    repeat: boolean;
+    tag: string;
+    durationMs: number;
+    color: string;
+    radius: number;
+    opacity: number;
+    delayMs: number;
+    angle: number;
+    bandSize: number;
+    blendMode: string;
+}, {}, {}, {}, 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/glow-text/src/TxGlowText.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from './TxGlowText.vue2.js';
+/* empty css                */
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
+
+const TxGlowText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-66ff95f1"]]);
+
+export { TxGlowText as default };

package/dist/es/glow-text/src/TxGlowText.vue2.js

@@ -0,0 +1,54 @@
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementVNode, renderSlot } from 'vue';
+
+const _hoisted_1 = { class: "tx-glow-text__content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "TxGlowText" },
+  __name: "TxGlowText",
+  props: {
+    tag: { default: "span" },
+    active: { type: Boolean, default: true },
+    durationMs: { default: 1400 },
+    delayMs: { default: 0 },
+    angle: { default: 20 },
+    bandSize: { default: 38 },
+    color: { default: "rgba(255, 255, 255, 0.9)" },
+    opacity: { default: 0.75 },
+    blendMode: { default: "screen" },
+    radius: { default: 10 },
+    repeat: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const styleVars = computed(() => {
+      return {
+        "--tx-glow-duration": `${props.durationMs}ms`,
+        "--tx-glow-delay": `${props.delayMs}ms`,
+        "--tx-glow-angle": `${props.angle}deg`,
+        "--tx-glow-band": `${props.bandSize}%`,
+        "--tx-glow-color": props.color,
+        "--tx-glow-opacity": String(props.opacity),
+        "--tx-glow-radius": `${props.radius}px`,
+        "--tx-glow-blend-mode": props.blendMode
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        class: normalizeClass(["tx-glow-text", { "is-inactive": !__props.active, "is-once": !__props.repeat }]),
+        style: normalizeStyle(styleVars.value)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _cache[0] || (_cache[0] = createElementVNode("span", {
+            class: "tx-glow-text__shine",
+            "aria-hidden": "true"
+          }, null, -1))
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/glow-text/src/types.d.ts

@@ -0,0 +1,13 @@
+export interface GlowTextProps {
+    tag?: string;
+    active?: boolean;
+    durationMs?: number;
+    delayMs?: number;
+    angle?: number;
+    bandSize?: number;
+    color?: string;
+    opacity?: number;
+    blendMode?: string;
+    radius?: number;
+    repeat?: boolean;
+}