@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/glass-surface/index.d.ts

@@ -33,31 +33,31 @@ declare const GlassSurface: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        opacity: {
+        borderRadius: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        saturation: {
+        borderWidth: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        borderRadius: {
+        brightness: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        borderWidth: {
+        opacity: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        brightness: {
+        displace: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        displace: {
+        backgroundOpacity: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        backgroundOpacity: {
+        saturation: {
             type: import('vue').PropType<number>;
             default: number;
         };
@@ -86,20 +86,20 @@ declare const GlassSurface: {
             default: string;
         };
         mixBlendMode: {
-            type: import('vue').PropType<"normal" | "difference" | "color" | "overlay" | "multiply" | "screen" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "saturation" | "luminosity" | "plus-darker" | "plus-lighter">;
+            type: import('vue').PropType<"normal" | "difference" | "color" | "saturation" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "luminosity" | "plus-darker" | "plus-lighter">;
             default: string;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         width: string | number;
         height: string | number;
         blur: number;
-        opacity: number;
-        saturation: number;
         borderRadius: number;
         borderWidth: number;
         brightness: number;
+        opacity: number;
         displace: number;
         backgroundOpacity: number;
+        saturation: number;
         distortionScale: number;
         redOffset: number;
         greenOffset: number;
@@ -127,31 +127,31 @@ declare const GlassSurface: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        opacity: {
+        borderRadius: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        saturation: {
+        borderWidth: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        borderRadius: {
+        brightness: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        borderWidth: {
+        opacity: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        brightness: {
+        displace: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        displace: {
+        backgroundOpacity: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        backgroundOpacity: {
+        saturation: {
             type: import('vue').PropType<number>;
             default: number;
         };
@@ -180,20 +180,20 @@ declare const GlassSurface: {
             default: string;
         };
         mixBlendMode: {
-            type: import('vue').PropType<"normal" | "difference" | "color" | "overlay" | "multiply" | "screen" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "saturation" | "luminosity" | "plus-darker" | "plus-lighter">;
+            type: import('vue').PropType<"normal" | "difference" | "color" | "saturation" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "luminosity" | "plus-darker" | "plus-lighter">;
             default: string;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         width: string | number;
         height: string | number;
         blur: number;
-        opacity: number;
-        saturation: number;
         borderRadius: number;
         borderWidth: number;
         brightness: number;
+        opacity: number;
         displace: number;
         backgroundOpacity: number;
+        saturation: number;
         distortionScale: number;
         redOffset: number;
         greenOffset: number;
@@ -218,31 +218,31 @@ declare const GlassSurface: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    opacity: {
+    borderRadius: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    saturation: {
+    borderWidth: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    borderRadius: {
+    brightness: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    borderWidth: {
+    opacity: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    brightness: {
+    displace: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    displace: {
+    backgroundOpacity: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    backgroundOpacity: {
+    saturation: {
         type: import('vue').PropType<number>;
         default: number;
     };
@@ -271,20 +271,20 @@ declare const GlassSurface: {
         default: string;
     };
     mixBlendMode: {
-        type: import('vue').PropType<"normal" | "difference" | "color" | "overlay" | "multiply" | "screen" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "saturation" | "luminosity" | "plus-darker" | "plus-lighter">;
+        type: import('vue').PropType<"normal" | "difference" | "color" | "saturation" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "exclusion" | "hue" | "luminosity" | "plus-darker" | "plus-lighter">;
         default: string;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     width: string | number;
     height: string | number;
     blur: number;
-    opacity: number;
-    saturation: number;
     borderRadius: number;
     borderWidth: number;
     brightness: number;
+    opacity: number;
     displace: number;
     backgroundOpacity: number;
+    saturation: number;
     distortionScale: number;
     redOffset: number;
     greenOffset: number;

package/dist/es/glass-surface/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import _sfc_main from './src/TxGlassSurface.vue.js';
 /* empty css                        */
 

package/dist/es/glass-surface/src/TxGlassSurface.vue.d.ts

@@ -43,13 +43,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     width: string | number;
     height: string | number;
     blur: number;
-    opacity: number;
-    saturation: number;
     borderRadius: number;
     borderWidth: number;
     brightness: number;
+    opacity: number;
     displace: number;
     backgroundOpacity: number;
+    saturation: number;
     distortionScale: number;
     redOffset: number;
     greenOffset: number;

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

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot } from 'vue';
-import { hasWindow, hasNavigator, hasDocument } from '../../utils/env.js';
+import { defineComponent, ref, computed, onMounted, nextTick, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot } from 'vue';
+import { hasWindow, hasNavigator, hasDocument } from '../../packages/tuffex/packages/utils/env.js';
 
 const _hoisted_1 = {
   class: "tx-glass-surface__svg",
@@ -32,7 +32,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const isDarkMode = ref(false);
     const containerRef = ref(null);
     const feImageRef = ref(null);
     const redChannelRef = ref(null);
@@ -47,17 +46,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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;
@@ -73,6 +61,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function supportsBackdropFilter() {
       if (!hasWindow())
         return false;
+      if (typeof CSS === "undefined" || typeof CSS.supports !== "function")
+        return false;
       return CSS.supports("backdrop-filter", "blur(10px)");
     }
     function generateDisplacementMap() {
@@ -123,6 +113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const containerStyles = computed(() => {
+      const monochromeMask = "var(--tx-surface-refraction-mask-rgb, 255 255 255)";
       const baseStyles = {
         width: typeof props.width === "number" ? `${props.width}px` : props.width,
         height: typeof props.height === "number" ? `${props.height}px` : props.height,
@@ -134,43 +125,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (svgSupported) {
         return {
           ...baseStyles,
-          background: isDarkMode.value ? `hsl(0 0% 0% / ${props.backgroundOpacity})` : `hsl(0 0% 100% / ${props.backgroundOpacity})`,
+          background: `rgb(${monochromeMask} / ${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)"
+          background: `rgb(${monochromeMask} / 0.4)`,
+          border: `1px solid rgb(${monochromeMask} / 0.24)`
         };
       }
       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)"
+        background: `rgb(${monochromeMask} / 0.22)`,
+        backdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.06)`,
+        WebkitBackdropFilter: `blur(${fallbackBlur}px) saturate(1.8) brightness(1.06)`,
+        border: `1px solid rgb(${monochromeMask} / 0.24)`
       };
     });
     onMounted(() => {
-      updateDarkMode();
       nextTick(() => {
         updateDisplacementMap();
         updateFilterElements();
@@ -182,6 +156,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     });
+    onBeforeUnmount(() => {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    });
     watch(
       [
         () => props.width,

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

@@ -11,6 +11,10 @@ declare const GlowText: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        mode: {
+            type: import('vue').PropType<"classic" | "adaptive" | "text-clip">;
+            default: string;
+        };
         tag: {
             type: import('vue').PropType<string>;
             default: string;
@@ -45,11 +49,14 @@ declare const GlowText: {
         };
         blendMode: {
             type: import('vue').PropType<string>;
-            default: string;
+        };
+        backdrop: {
+            type: import('vue').PropType<string>;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         active: boolean;
         repeat: boolean;
+        mode: "classic" | "adaptive" | "text-clip";
         tag: string;
         durationMs: number;
         color: string;
@@ -58,7 +65,6 @@ declare const GlowText: {
         delayMs: number;
         angle: number;
         bandSize: number;
-        blendMode: string;
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -75,6 +81,10 @@ declare const GlowText: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        mode: {
+            type: import('vue').PropType<"classic" | "adaptive" | "text-clip">;
+            default: string;
+        };
         tag: {
             type: import('vue').PropType<string>;
             default: string;
@@ -109,11 +119,14 @@ declare const GlowText: {
         };
         blendMode: {
             type: import('vue').PropType<string>;
-            default: string;
+        };
+        backdrop: {
+            type: import('vue').PropType<string>;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         active: boolean;
         repeat: boolean;
+        mode: "classic" | "adaptive" | "text-clip";
         tag: string;
         durationMs: number;
         color: string;
@@ -122,7 +135,6 @@ declare const GlowText: {
         delayMs: number;
         angle: number;
         bandSize: number;
-        blendMode: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -136,6 +148,10 @@ declare const GlowText: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
+    mode: {
+        type: import('vue').PropType<"classic" | "adaptive" | "text-clip">;
+        default: string;
+    };
     tag: {
         type: import('vue').PropType<string>;
         default: string;
@@ -170,11 +186,14 @@ declare const GlowText: {
     };
     blendMode: {
         type: import('vue').PropType<string>;
-        default: string;
+    };
+    backdrop: {
+        type: import('vue').PropType<string>;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     active: boolean;
     repeat: boolean;
+    mode: "classic" | "adaptive" | "text-clip";
     tag: string;
     durationMs: number;
     color: string;
@@ -183,7 +202,6 @@ declare const GlowText: {
     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;

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

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxGlowText from './src/TxGlowText.vue.js';
 
 const GlowText = withInstall(TxGlowText);

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

@@ -12,7 +12,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     bandSize: number;
     color: string;
     opacity: number;
-    blendMode: string;
+    mode: string;
     radius: number;
     repeat: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GlowTextProps>, {
@@ -24,12 +24,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     bandSize: number;
     color: string;
     opacity: number;
-    blendMode: string;
+    mode: string;
     radius: number;
     repeat: boolean;
 }>>> & Readonly<{}>, {
     active: boolean;
     repeat: boolean;
+    mode: "classic" | "adaptive" | "text-clip";
     tag: string;
     durationMs: number;
     color: string;
@@ -38,7 +39,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     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;

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

@@ -2,6 +2,6 @@ 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"]]);
+const TxGlowText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-423f7e0c"]]);
 
 export { TxGlowText as default };

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

@@ -1,6 +1,10 @@
-import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementVNode, renderSlot } from 'vue';
+import { defineComponent, ref, watch, nextTick, computed, onMounted, onBeforeUnmount, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, renderSlot, createElementBlock, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
 
-const _hoisted_1 = { class: "tx-glow-text__content" };
+const _hoisted_1 = {
+  key: 0,
+  class: "tx-glow-text__clip-shine",
+  "aria-hidden": "true"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "TxGlowText" },
   __name: "TxGlowText",
@@ -13,33 +17,112 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     bandSize: { default: 38 },
     color: { default: "rgba(255, 255, 255, 0.9)" },
     opacity: { default: 0.75 },
-    blendMode: { default: "screen" },
+    blendMode: {},
+    mode: { default: "adaptive" },
+    backdrop: {},
     radius: { default: 10 },
     repeat: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
-    const styleVars = computed(() => {
+    const rootRef = ref();
+    const textMaskContent = ref("");
+    let textObserver = null;
+    function collectSlotText(node) {
+      if (node.nodeType === 3)
+        return node.textContent ?? "";
+      if (node.nodeType !== 1)
+        return "";
+      const element = node;
+      if (element.classList.contains("tx-glow-text__clip-shine") || element.classList.contains("tx-glow-text__shine")) {
+        return "";
+      }
+      return Array.from(element.childNodes).map(collectSlotText).join("");
+    }
+    function syncTextMaskContent() {
+      const el = rootRef.value;
+      if (!el)
+        return;
+      const text = Array.from(el.childNodes).map(collectSlotText).join("").trim();
+      textMaskContent.value = text;
+    }
+    function disconnectTextObserver() {
+      if (!textObserver)
+        return;
+      textObserver.disconnect();
+      textObserver = null;
+    }
+    function connectTextObserver() {
+      const el = rootRef.value;
+      if (!el || props.mode !== "text-clip")
+        return;
+      disconnectTextObserver();
+      syncTextMaskContent();
+      textObserver = new MutationObserver(() => {
+        syncTextMaskContent();
+      });
+      textObserver.observe(el, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+    watch(
+      () => props.mode,
+      async (mode) => {
+        if (mode !== "text-clip") {
+          disconnectTextObserver();
+          textMaskContent.value = "";
+          return;
+        }
+        await nextTick();
+        connectTextObserver();
+      }
+    );
+    const rootClasses = computed(() => {
       return {
+        "is-inactive": !props.active,
+        "is-once": !props.repeat,
+        "is-adaptive": props.mode === "adaptive",
+        "is-text-clip": props.mode === "text-clip",
+        "has-custom-blend": Boolean(props.blendMode),
+        "has-custom-backdrop": Boolean(props.backdrop)
+      };
+    });
+    const styleVars = computed(() => {
+      const vars = {
         "--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
+        "--tx-glow-radius": `${props.radius}px`
       };
+      if (props.blendMode)
+        vars["--tx-glow-blend-mode"] = props.blendMode;
+      if (props.backdrop)
+        vars["--tx-glow-backdrop"] = props.backdrop;
+      return vars;
+    });
+    onMounted(() => {
+      if (props.mode !== "text-clip")
+        return;
+      connectTextObserver();
+    });
+    onBeforeUnmount(() => {
+      disconnectTextObserver();
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: normalizeClass(["tx-glow-text", { "is-inactive": !__props.active, "is-once": !__props.repeat }]),
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: normalizeClass(["tx-glow-text", rootClasses.value]),
         style: normalizeStyle(styleVars.value)
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1, [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
+          renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          __props.mode === "text-clip" && textMaskContent.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(textMaskContent.value), 1)) : createCommentVNode("", true),
           _cache[0] || (_cache[0] = createElementVNode("span", {
             class: "tx-glow-text__shine",
             "aria-hidden": "true"

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

@@ -8,6 +8,8 @@ export interface GlowTextProps {
     color?: string;
     opacity?: number;
     blendMode?: string;
+    mode?: 'classic' | 'adaptive' | 'text-clip';
+    backdrop?: string;
     radius?: number;
     repeat?: boolean;
 }

package/dist/es/gradient-border/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxGradientBorder from './src/TxGradientBorder.vue.js';
 
 const GradientBorder = withInstall(TxGradientBorder);