@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/button/src/style/index.css

@@ -1,3 +1,6 @@
+.tx-button {
+  position: relative;
+}
 .tx-button:hover {
   background-color: var(--tx-button-bg-color-hover);
 }
@@ -13,10 +16,15 @@
   padding: 0 0.5rem;
   min-width: 80px;
   height: 32px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   color: var(--tx-text-color);
-  border-radius: 12px;
+  border-radius: var(--tx-button-radius, 12px);
+  background-color: transparent;
   --fake-radius: var(--tx-button-radius, 12px);
   border: 1px solid var(--tx-button-border-color);
+  --tx-button-radius: 12px;
   --tx-button-bg-color-hover: var(--tx-bg-color-page);
   --tx-button-border-color: var(--tx-border-color);
 }
@@ -24,19 +32,28 @@
   width: 100%;
 }
 .tx-button.round {
-  border-radius: 999px;
-  --fake-radius: 999px;
+  --tx-button-radius: 999px;
 }
 .tx-button.circle {
-  border-radius: 999px;
-  --fake-radius: 999px;
+  --tx-button-radius: 999px;
   padding: 0;
   min-width: 32px;
   width: 32px;
+  height: 32px;
+}
+.tx-button.circle.block {
+  width: 100%;
+  --tx-button-radius: 50%;
+  padding: 0 0.5rem;
+  min-width: 80px;
 }
 .tx-button.dashed {
   border-style: dashed;
 }
+.tx-button.borderless {
+  border-color: transparent;
+  --tx-button-border-color: transparent;
+}
 .tx-button.disabled {
   opacity: 0.7;
   cursor: not-allowed;
@@ -70,17 +87,15 @@
   color: var(--tx-text-color);
   --tx-button-bg-color-hover: var(--tx-fill-color);
   --tx-button-border-color: var(--tx-border-color);
-  border-radius: 8px;
-  --fake-radius: 8px;
+  --tx-button-radius: 8px;
   min-width: 120px;
 }
 .tx-button.variant-bare {
   min-width: 0;
   height: auto;
-  padding: var(--tx-button-bare-padding, 0.25rem);
+  padding: var(--tx-button-bare-padding, 0.5rem);
   border: none;
-  border-radius: var(--tx-button-bare-radius, 8px);
-  --fake-radius: var(--tx-button-bare-radius, 8px);
+  --tx-button-radius: var(--tx-button-bare-radius, 10px);
   background: var(--tx-button-bare-bg, transparent);
   --fake-inner-opacity: var(--tx-button-bare-fake-opacity, 0);
   --tx-button-bg-color-hover: var(--tx-button-bare-hover, var(--tx-fill-color));
@@ -185,6 +200,30 @@
   left: 50%;
   translate: -50% -50%;
 }
+.tx-button .tx-button__loading-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--tx-button-radius, 12px);
+  overflow: hidden;
+  z-index: 0;
+  pointer-events: none;
+}
+.tx-button .tx-button__loading-layer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, transparent 40%, color-mix(in srgb, currentColor 18%, transparent) 50%, transparent 60%);
+  background-size: 200% 100%;
+  animation: tx-button-loading-sweep 1.33s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.tx-button.loading-bar .tx-button__spinner,
+.tx-button.loading-bar .tx-button__spinner-slot {
+  display: none;
+}
+.tx-button.loading-bar .tx-button__inner {
+  position: relative;
+  z-index: 1;
+}
 .tx-button:not(.loading) .tx-button__spinner {
   opacity: 0;
   filter: blur(4px);
@@ -206,29 +245,47 @@
   overflow: hidden;
 }
 .tx-button.tx-size-sm {
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
   height: 26px;
   min-width: 60px;
   font-size: 13px;
+  --tx-button-radius: 10px;
 }
 .tx-button.variant-flat.tx-size-sm {
-  padding: 0 0.5rem;
+  padding: 0 0.75rem;
   height: 32px;
   min-width: 32px;
   font-size: 13px;
 }
 .tx-button.tx-size-lg {
-  padding: 0 1.25rem;
-  height: 42px;
+  padding: 0 1.5rem;
+  height: 38px;
   font-size: 15px;
 }
 
+@keyframes tx-button-loading-sweep {
+  0% {
+    background-position: 100% 0;
+    opacity: 0;
+  }
+  8% {
+    opacity: 0.55;
+  }
+  60% {
+    background-position: -100% 0;
+    opacity: 0.55;
+  }
+  100% {
+    background-position: -100% 0;
+    opacity: 0;
+  }
+}
 .tx-split-button {
   --tx-split-button-bg: var(--tx-color-primary, #409eff);
   --tx-split-button-fg: #fff;
   display: inline-flex;
   align-items: stretch;
-  border-radius: 10px;
+  border-radius: var(--tx-split-button-radius, 10px);
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }

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

@@ -17,8 +17,12 @@ export interface ButtonProps {
     circle?: boolean;
     /** 是否加载中状态 */
     loading?: boolean;
+    /** 加载样式变体 */
+    loadingVariant?: 'spinner' | 'bar';
     /** 是否禁用状态 */
     disabled?: boolean;
+    /** 是否显示边框 */
+    border?: boolean;
     /** 图标类名 */
     icon?: string;
     /** 是否默认聚焦 */

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

@@ -1,4 +1,4 @@
-import { TxCardBackground, TxCardProps, TxCardShadow, TxCardSize, TxCardVariant } from './src/types';
+import { TxCardBackground, TxCardProps, TxCardRefractionTone, TxCardShadow, TxCardSize, TxCardVariant } from './src/types';
 import { default as TxCard } from './src/TxCard.vue';
 
 declare const Card: {
@@ -23,38 +23,86 @@ declare const Card: {
             type: import('vue').PropType<TxCardVariant>;
             default: string;
         };
-        background: {
-            type: import('vue').PropType<TxCardBackground>;
-            default: string;
+        glassBlur: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
         };
-        shadow: {
-            type: import('vue').PropType<TxCardShadow>;
-            default: string;
+        glassBlurAmount: {
+            type: import('vue').PropType<number>;
+            default: number;
         };
-        radius: {
+        glassOverlay: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        glassOverlayOpacity: {
             type: import('vue').PropType<number>;
-            default: undefined;
+            default: number;
         };
-        padding: {
+        maskOpacity: {
             type: import('vue').PropType<number>;
-            default: undefined;
+            default: number;
         };
-        glassBlur: {
+        fallbackMaskOpacity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        surfaceMoving: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        glassBlurAmount: {
+        refractionStrength: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        glassOverlay: {
+        refractionProfile: {
+            type: import('vue').PropType<"soft" | "filmic" | "cinematic">;
+            default: string;
+        };
+        refractionTone: {
+            type: import('vue').PropType<TxCardRefractionTone>;
+            default: string;
+        };
+        refractionAngle: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        refractionLightFollowMouse: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        glassOverlayOpacity: {
+        refractionLightFollowIntensity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        refractionLightSpring: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        refractionLightSpringStiffness: {
             type: import('vue').PropType<number>;
             default: number;
         };
+        refractionLightSpringDamping: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        background: {
+            type: import('vue').PropType<TxCardBackground>;
+            default: string;
+        };
+        shadow: {
+            type: import('vue').PropType<TxCardShadow>;
+            default: string;
+        };
+        radius: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
+        padding: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
         loadingSpinnerSize: {
             type: import('vue').PropType<number>;
             default: undefined;
@@ -81,14 +129,26 @@ declare const Card: {
         loading: boolean;
         size: TxCardSize;
         variant: TxCardVariant;
-        background: TxCardBackground;
-        shadow: TxCardShadow;
-        radius: number;
-        padding: number;
         glassBlur: boolean;
         glassBlurAmount: number;
         glassOverlay: boolean;
         glassOverlayOpacity: number;
+        maskOpacity: number;
+        fallbackMaskOpacity: number;
+        surfaceMoving: boolean;
+        refractionStrength: number;
+        refractionProfile: "soft" | "filmic" | "cinematic";
+        refractionTone: TxCardRefractionTone;
+        refractionAngle: number;
+        refractionLightFollowMouse: boolean;
+        refractionLightFollowIntensity: number;
+        refractionLightSpring: boolean;
+        refractionLightSpringStiffness: number;
+        refractionLightSpringDamping: number;
+        background: TxCardBackground;
+        shadow: TxCardShadow;
+        radius: number;
+        padding: number;
         loadingSpinnerSize: number;
         inertial: boolean;
         inertialMaxOffset: number;
@@ -121,38 +181,86 @@ declare const Card: {
             type: import('vue').PropType<TxCardVariant>;
             default: string;
         };
-        background: {
-            type: import('vue').PropType<TxCardBackground>;
-            default: string;
+        glassBlur: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
         };
-        shadow: {
-            type: import('vue').PropType<TxCardShadow>;
-            default: string;
+        glassBlurAmount: {
+            type: import('vue').PropType<number>;
+            default: number;
         };
-        radius: {
+        glassOverlay: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        glassOverlayOpacity: {
             type: import('vue').PropType<number>;
-            default: undefined;
+            default: number;
         };
-        padding: {
+        maskOpacity: {
             type: import('vue').PropType<number>;
-            default: undefined;
+            default: number;
         };
-        glassBlur: {
+        fallbackMaskOpacity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        surfaceMoving: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        glassBlurAmount: {
+        refractionStrength: {
             type: import('vue').PropType<number>;
             default: number;
         };
-        glassOverlay: {
+        refractionProfile: {
+            type: import('vue').PropType<"soft" | "filmic" | "cinematic">;
+            default: string;
+        };
+        refractionTone: {
+            type: import('vue').PropType<TxCardRefractionTone>;
+            default: string;
+        };
+        refractionAngle: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        refractionLightFollowMouse: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        glassOverlayOpacity: {
+        refractionLightFollowIntensity: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        refractionLightSpring: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        refractionLightSpringStiffness: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        refractionLightSpringDamping: {
             type: import('vue').PropType<number>;
             default: number;
         };
+        background: {
+            type: import('vue').PropType<TxCardBackground>;
+            default: string;
+        };
+        shadow: {
+            type: import('vue').PropType<TxCardShadow>;
+            default: string;
+        };
+        radius: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
+        padding: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
         loadingSpinnerSize: {
             type: import('vue').PropType<number>;
             default: undefined;
@@ -177,14 +285,26 @@ declare const Card: {
         loading: boolean;
         size: TxCardSize;
         variant: TxCardVariant;
-        background: TxCardBackground;
-        shadow: TxCardShadow;
-        radius: number;
-        padding: number;
         glassBlur: boolean;
         glassBlurAmount: number;
         glassOverlay: boolean;
         glassOverlayOpacity: number;
+        maskOpacity: number;
+        fallbackMaskOpacity: number;
+        surfaceMoving: boolean;
+        refractionStrength: number;
+        refractionProfile: "soft" | "filmic" | "cinematic";
+        refractionTone: TxCardRefractionTone;
+        refractionAngle: number;
+        refractionLightFollowMouse: boolean;
+        refractionLightFollowIntensity: number;
+        refractionLightSpring: boolean;
+        refractionLightSpringStiffness: number;
+        refractionLightSpringDamping: number;
+        background: TxCardBackground;
+        shadow: TxCardShadow;
+        radius: number;
+        padding: number;
         loadingSpinnerSize: number;
         inertial: boolean;
         inertialMaxOffset: number;
@@ -214,38 +334,86 @@ declare const Card: {
         type: import('vue').PropType<TxCardVariant>;
         default: string;
     };
-    background: {
-        type: import('vue').PropType<TxCardBackground>;
-        default: string;
+    glassBlur: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
     };
-    shadow: {
-        type: import('vue').PropType<TxCardShadow>;
-        default: string;
+    glassBlurAmount: {
+        type: import('vue').PropType<number>;
+        default: number;
     };
-    radius: {
+    glassOverlay: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    glassOverlayOpacity: {
         type: import('vue').PropType<number>;
-        default: undefined;
+        default: number;
     };
-    padding: {
+    maskOpacity: {
         type: import('vue').PropType<number>;
-        default: undefined;
+        default: number;
     };
-    glassBlur: {
+    fallbackMaskOpacity: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    surfaceMoving: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    glassBlurAmount: {
+    refractionStrength: {
         type: import('vue').PropType<number>;
         default: number;
     };
-    glassOverlay: {
+    refractionProfile: {
+        type: import('vue').PropType<"soft" | "filmic" | "cinematic">;
+        default: string;
+    };
+    refractionTone: {
+        type: import('vue').PropType<TxCardRefractionTone>;
+        default: string;
+    };
+    refractionAngle: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    refractionLightFollowMouse: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    glassOverlayOpacity: {
+    refractionLightFollowIntensity: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    refractionLightSpring: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    refractionLightSpringStiffness: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    refractionLightSpringDamping: {
         type: import('vue').PropType<number>;
         default: number;
     };
+    background: {
+        type: import('vue').PropType<TxCardBackground>;
+        default: string;
+    };
+    shadow: {
+        type: import('vue').PropType<TxCardShadow>;
+        default: string;
+    };
+    radius: {
+        type: import('vue').PropType<number>;
+        default: undefined;
+    };
+    padding: {
+        type: import('vue').PropType<number>;
+        default: undefined;
+    };
     loadingSpinnerSize: {
         type: import('vue').PropType<number>;
         default: undefined;
@@ -272,14 +440,26 @@ declare const Card: {
     loading: boolean;
     size: TxCardSize;
     variant: TxCardVariant;
-    background: TxCardBackground;
-    shadow: TxCardShadow;
-    radius: number;
-    padding: number;
     glassBlur: boolean;
     glassBlurAmount: number;
     glassOverlay: boolean;
     glassOverlayOpacity: number;
+    maskOpacity: number;
+    fallbackMaskOpacity: number;
+    surfaceMoving: boolean;
+    refractionStrength: number;
+    refractionProfile: "soft" | "filmic" | "cinematic";
+    refractionTone: TxCardRefractionTone;
+    refractionAngle: number;
+    refractionLightFollowMouse: boolean;
+    refractionLightFollowIntensity: number;
+    refractionLightSpring: boolean;
+    refractionLightSpringStiffness: number;
+    refractionLightSpringDamping: number;
+    background: TxCardBackground;
+    shadow: TxCardShadow;
+    radius: number;
+    padding: number;
     loadingSpinnerSize: number;
     inertial: boolean;
     inertialMaxOffset: number;
@@ -293,6 +473,6 @@ declare const Card: {
     };
 }) & import('vue').Plugin;
 export { Card, TxCard };
-export type { TxCardBackground, TxCardProps, TxCardShadow, TxCardSize, TxCardVariant };
+export type { TxCardBackground, TxCardProps, TxCardRefractionTone, TxCardShadow, TxCardSize, TxCardVariant };
 export type TxCardInstance = InstanceType<typeof TxCard>;
 export default Card;

package/dist/es/card/index.js

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

package/dist/es/card/src/TxCard.vue.d.ts

@@ -15,6 +15,18 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     glassBlurAmount: number;
     glassOverlay: boolean;
     glassOverlayOpacity: number;
+    maskOpacity: number;
+    fallbackMaskOpacity: number;
+    surfaceMoving: boolean;
+    refractionStrength: number;
+    refractionProfile: string;
+    refractionTone: string;
+    refractionAngle: number;
+    refractionLightFollowMouse: boolean;
+    refractionLightFollowIntensity: number;
+    refractionLightSpring: boolean;
+    refractionLightSpringStiffness: number;
+    refractionLightSpringDamping: number;
     clickable: boolean;
     loading: boolean;
     disabled: boolean;
@@ -35,6 +47,18 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     glassBlurAmount: number;
     glassOverlay: boolean;
     glassOverlayOpacity: number;
+    maskOpacity: number;
+    fallbackMaskOpacity: number;
+    surfaceMoving: boolean;
+    refractionStrength: number;
+    refractionProfile: string;
+    refractionTone: string;
+    refractionAngle: number;
+    refractionLightFollowMouse: boolean;
+    refractionLightFollowIntensity: number;
+    refractionLightSpring: boolean;
+    refractionLightSpringStiffness: number;
+    refractionLightSpringDamping: number;
     clickable: boolean;
     loading: boolean;
     disabled: boolean;
@@ -52,14 +76,26 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     loading: boolean;
     size: import('./types').TxCardSize;
     variant: import('./types').TxCardVariant;
-    background: import('./types').TxCardBackground;
-    shadow: import('./types').TxCardShadow;
-    radius: number;
-    padding: number;
     glassBlur: boolean;
     glassBlurAmount: number;
     glassOverlay: boolean;
     glassOverlayOpacity: number;
+    maskOpacity: number;
+    fallbackMaskOpacity: number;
+    surfaceMoving: boolean;
+    refractionStrength: number;
+    refractionProfile: "soft" | "filmic" | "cinematic";
+    refractionTone: import('./types').TxCardRefractionTone;
+    refractionAngle: number;
+    refractionLightFollowMouse: boolean;
+    refractionLightFollowIntensity: number;
+    refractionLightSpring: boolean;
+    refractionLightSpringStiffness: number;
+    refractionLightSpringDamping: number;
+    background: import('./types').TxCardBackground;
+    shadow: import('./types').TxCardShadow;
+    radius: number;
+    padding: number;
     loadingSpinnerSize: number;
     inertial: boolean;
     inertialMaxOffset: number;

package/dist/es/card/src/TxCard.vue.js

@@ -2,6 +2,6 @@ import _sfc_main from './TxCard.vue2.js';
 /* empty css            */
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const TxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cde4b58a"]]);
+const TxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f41b09e1"]]);
 
 export { TxCard as default };