@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/base-surface/src/TxBaseSurface.vue2.js

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

package/dist/es/base-surface/src/style/index.css

@@ -0,0 +1,105 @@
+.tx-base-surface {
+  position: relative;
+  border-radius: var(--tx-surface-radius, inherit);
+  overflow: hidden;
+}
+.tx-base-surface--pure {
+  background: var(--tx-surface-color, var(--tx-fill-color-lighter, #fafafa));
+}
+.tx-base-surface .tx-base-surface__layer {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity var(--tx-surface-transition, 299ms) ease, background var(--tx-surface-transition, 299ms) ease, backdrop-filter var(--tx-surface-transition, 299ms) ease;
+}
+.tx-base-surface .tx-base-surface__layer--glass {
+  z-index: 0;
+}
+.tx-base-surface .tx-base-surface__layer--glass .tx-glass-surface {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.tx-base-surface .tx-base-surface__layer--filter {
+  z-index: 1;
+  background: color-mix(in srgb, var(--tx-bg-color-overlay, #fff) 10%, transparent);
+  backdrop-filter: blur(var(--tx-surface-filter-blur, 10px)) saturate(var(--tx-surface-filter-saturation, 1.5)) contrast(var(--tx-surface-filter-contrast, 1)) brightness(var(--tx-surface-filter-brightness, 1));
+  -webkit-backdrop-filter: blur(var(--tx-surface-filter-blur, 10px)) saturate(var(--tx-surface-filter-saturation, 1.5)) contrast(var(--tx-surface-filter-contrast, 1)) brightness(var(--tx-surface-filter-brightness, 1));
+  will-change: backdrop-filter;
+}
+.tx-base-surface .tx-base-surface__layer--mask {
+  z-index: 3;
+  background: var(--tx-surface-color, var(--tx-fill-color-lighter, #fafafa));
+  opacity: var(--tx-surface-mask-opacity, 0.75);
+}
+.tx-base-surface .tx-base-surface__layer--refraction-edge {
+  z-index: 4;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) calc(var(--tx-surface-refraction-edge-opacity, 0.08) * 100%), transparent);
+}
+.tx-base-surface .tx-base-surface__layer--motion-cover {
+  z-index: 2;
+  background: color-mix(in srgb, var(--tx-surface-refraction-mask-color, var(--tx-bg-color-overlay, #fff)) 100%, transparent);
+  opacity: var(--tx-surface-motion-cover-opacity, 0);
+}
+.tx-base-surface .tx-base-surface__content {
+  position: relative;
+  z-index: 5;
+  border-radius: inherit;
+  min-height: inherit;
+}
+.tx-base-surface--preset-card.tx-base-surface--blur .tx-base-surface__layer--filter {
+  background: color-mix(in srgb, var(--tx-bg-color-overlay, #fff) 22%, transparent);
+  backdrop-filter: blur(var(--tx-surface-filter-blur, 30px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * 1.2)) contrast(calc(var(--tx-surface-filter-contrast, 1) * 1.06)) brightness(var(--tx-surface-filter-brightness, 1));
+  -webkit-backdrop-filter: blur(var(--tx-surface-filter-blur, 30px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * 1.2)) contrast(calc(var(--tx-surface-filter-contrast, 1) * 1.06)) brightness(var(--tx-surface-filter-brightness, 1));
+}
+.tx-base-surface--preset-card.tx-base-surface--refraction .tx-base-surface__layer--filter {
+  background: radial-gradient(120% 88% at var(--tx-surface-refraction-light-x, 24%) var(--tx-surface-refraction-light-y, 20%), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-filter-primary-weight, 32%), transparent), transparent 58%), radial-gradient(105% 82% at calc(100% - var(--tx-surface-refraction-light-x, 24%)) calc(100% - var(--tx-surface-refraction-light-y, 20%)), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-filter-secondary-weight, 20%), transparent), transparent 64%), radial-gradient(140% 100% at var(--tx-surface-refraction-light-x, 24%) var(--tx-surface-refraction-light-y, 20%), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-filter-veil-weight, 16%), transparent), transparent 62%), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-filter-base-weight, 6%), transparent);
+  backdrop-filter: blur(var(--tx-surface-filter-blur, 24px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * var(--tx-surface-refraction-filter-saturation-boost, 1.36))) contrast(calc(var(--tx-surface-filter-contrast, 1) * (var(--tx-surface-refraction-filter-contrast-base, 1.06) + var(--tx-surface-refraction-strength, 0.6) * var(--tx-surface-refraction-filter-contrast-gain, 0.1)))) brightness(calc(var(--tx-surface-filter-brightness, 1) * var(--tx-surface-refraction-filter-brightness-boost, 1.04)));
+  -webkit-backdrop-filter: blur(var(--tx-surface-filter-blur, 24px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * var(--tx-surface-refraction-filter-saturation-boost, 1.36))) contrast(calc(var(--tx-surface-filter-contrast, 1) * (var(--tx-surface-refraction-filter-contrast-base, 1.06) + var(--tx-surface-refraction-strength, 0.6) * var(--tx-surface-refraction-filter-contrast-gain, 0.1)))) brightness(calc(var(--tx-surface-filter-brightness, 1) * var(--tx-surface-refraction-filter-brightness-boost, 1.04)));
+}
+.tx-base-surface--preset-card.tx-base-surface--glass .tx-base-surface__layer--mask {
+  background: radial-gradient(700px 220px at 0% 0%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(600px 260px at 100% 0%, rgba(255, 255, 255, 0.22), transparent 58%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 68%);
+  opacity: var(--tx-surface-mask-opacity, 0.22);
+}
+.tx-base-surface--preset-card.tx-base-surface--refraction .tx-base-surface__layer--mask {
+  background: radial-gradient(620px 260px at var(--tx-surface-refraction-light-x, 24%) var(--tx-surface-refraction-light-y, 20%), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) calc(var(--tx-surface-refraction-halo-opacity, 0.32) * var(--tx-surface-refraction-halo-opacity-gain, 1) * 100%), transparent), transparent 60%), radial-gradient(760px 360px at calc(100% - var(--tx-surface-refraction-light-x, 24%)) calc(100% - var(--tx-surface-refraction-light-y, 20%)), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-mask-primary-weight, 30%), transparent), transparent 64%), radial-gradient(740px 340px at var(--tx-surface-refraction-light-x, 24%) calc(100% - var(--tx-surface-refraction-light-y, 20%)), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-mask-secondary-weight, 24%), transparent), transparent 64%), linear-gradient(var(--tx-surface-refraction-streak-angle, 128deg), color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-streak-weight, 22%), transparent) 0%, color-mix(in srgb, var(--tx-surface-refraction-mask-color, #fff) var(--tx-surface-refraction-mask-veil-weight, 10%), transparent) 36%, transparent 70%);
+  opacity: var(--tx-surface-refraction-mask-effective-opacity, clamp(0.08, var(--tx-surface-mask-opacity, 0.16) + var(--tx-surface-refraction-strength, 0.56) * var(--tx-surface-refraction-mask-strength-gain, 0.05), 0.5));
+  mask-image: radial-gradient(120% 90% at var(--tx-surface-refraction-light-x, 24%) var(--tx-surface-refraction-light-y, 20%), #000 46%, transparent 95%);
+  -webkit-mask-image: radial-gradient(120% 90% at var(--tx-surface-refraction-light-x, 24%) var(--tx-surface-refraction-light-y, 20%), #000 46%, transparent 95%);
+}
+.tx-base-surface--fake .tx-base-surface__content {
+  position: relative;
+  z-index: 1;
+}
+.tx-base-surface--fake::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--tx-surface-radius, inherit);
+  background: var(--tx-surface-fake-bg);
+  opacity: var(--tx-surface-fake-opacity, 0.75);
+  z-index: var(--tx-surface-fake-index, 0);
+  pointer-events: none;
+  transition: background var(--tx-surface-transition, 299ms) ease-out, opacity var(--tx-surface-transition, 299ms) ease-out;
+}
+.tx-base-surface--settling {
+  transition: backdrop-filter var(--tx-surface-transition, 299ms) ease-out, background var(--tx-surface-transition, 299ms) ease-out;
+}
+
+.tx-surface-layer-fade-enter-active,
+.tx-surface-layer-fade-leave-active {
+  transition: opacity var(--tx-surface-transition, 299ms) ease;
+}
+
+.tx-surface-layer-fade-enter-from,
+.tx-surface-layer-fade-leave-to {
+  opacity: 0;
+}
+
+[data-theme=dark] .tx-base-surface--preset-card.tx-base-surface--blur .tx-base-surface__layer--filter,
+.dark .tx-base-surface--preset-card.tx-base-surface--blur .tx-base-surface__layer--filter {
+  background: color-mix(in srgb, #fff 14%, transparent);
+  backdrop-filter: blur(var(--tx-surface-filter-blur, 30px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * 1.1)) contrast(var(--tx-surface-filter-contrast, 1)) brightness(calc(var(--tx-surface-filter-brightness, 1) * 1.1));
+  -webkit-backdrop-filter: blur(var(--tx-surface-filter-blur, 30px)) saturate(calc(var(--tx-surface-filter-saturation, 1.5) * 1.1)) contrast(var(--tx-surface-filter-contrast, 1)) brightness(calc(var(--tx-surface-filter-brightness, 1) * 1.1));
+}

package/dist/es/base-surface/src/types.d.ts

@@ -0,0 +1,87 @@
+import { GlassSurfaceProps } from '../../glass-surface';
+
+export type BaseSurfaceMode = 'pure' | 'mask' | 'blur' | 'glass' | 'refraction';
+export type BaseSurfacePreset = 'default' | 'card';
+export type BaseSurfaceRefractionRenderer = 'svg' | 'css';
+export type BaseSurfaceRefractionProfile = 'soft' | 'filmic' | 'cinematic';
+export type BaseSurfaceRefractionTone = 'mist' | 'balanced' | 'vivid';
+export interface BaseSurfaceProps {
+    /** 背景模式 */
+    mode?: BaseSurfaceMode;
+    /** 自定义圆角，不传则 inherit 父元素 */
+    radius?: string | number;
+    /** 纯色/遮罩的背景色，默认使用 CSS 变量 */
+    color?: string;
+    /** mask 模式下的透明度 (0-1) */
+    opacity?: number;
+    /** 运动降级到 mask 时的透明度覆盖（0-1） */
+    fallbackMaskOpacity?: number;
+    /** blur（即 filter 层）模式下的模糊强度 (px) */
+    blur?: number;
+    /** filter 层饱和度（用于 blur/refraction 模式） */
+    filterSaturation?: number;
+    /** filter 层对比度（用于 blur/refraction 模式） */
+    filterContrast?: number;
+    /** filter 层亮度（用于 blur/refraction 模式） */
+    filterBrightness?: number;
+    /** glass/refraction 模式下的饱和度 */
+    saturation?: number;
+    /** glass/refraction 模式下的亮度（推荐 0-100；<=3 会按倍率自动转为百分比） */
+    brightness?: number;
+    /** glass 模式下的背景透明度 */
+    backgroundOpacity?: number;
+    /** glass 模式下的边框宽度系数 */
+    borderWidth?: number;
+    /** refraction 模式下的位移强度 */
+    displace?: number;
+    /** refraction 模式下的扭曲缩放 */
+    distortionScale?: number;
+    /** refraction 强度（0-100），用于统一控制色散/扭曲/高光层力度 */
+    refractionStrength?: number;
+    /** refraction 质感预设（soft/filmic/cinematic） */
+    refractionProfile?: BaseSurfaceRefractionProfile;
+    /** refraction 色调预设（mist/balanced/vivid） */
+    refractionTone?: BaseSurfaceRefractionTone;
+    /** refraction 偏移角度（度），用于控制色散主方向 */
+    refractionAngle?: number;
+    /** refraction 高光锚点 X（0-1），用于光源跟随 */
+    refractionLightX?: number;
+    /** refraction 高光锚点 Y（0-1），用于光源跟随 */
+    refractionLightY?: number;
+    /** refraction 高光 halo 透明度（0-1），不传时使用内置 filmic 模型计算 */
+    refractionHaloOpacity?: number;
+    /** refraction 模式下的 R 通道偏移 */
+    redOffset?: number;
+    /** refraction 模式下的 G 通道偏移 */
+    greenOffset?: number;
+    /** refraction 模式下的 B 通道偏移 */
+    blueOffset?: number;
+    /** refraction 模式下的 X 通道选择 */
+    xChannel?: 'R' | 'G' | 'B';
+    /** refraction 模式下的 Y 通道选择 */
+    yChannel?: 'R' | 'G' | 'B';
+    /** refraction 模式下的混合模式 */
+    mixBlendMode?: GlassSurfaceProps['mixBlendMode'];
+    /** 是否正在运动（手动控制降级） */
+    moving?: boolean;
+    /** 运动降级的目标模式，默认 'mask' */
+    fallbackMode?: 'pure' | 'mask';
+    /** 运动结束后恢复到目标模式的延迟 (ms)，默认 150 */
+    settleDelay?: number;
+    /** 是否启用自动 transform 检测降级，默认 false */
+    autoDetect?: boolean;
+    /** 过渡时长 (ms)，默认 260 */
+    transitionDuration?: number;
+    /** 是否使用 fake-background 伪元素模式渲染 */
+    fake?: boolean;
+    /** fake 模式下的 z-index，默认 0 */
+    fakeIndex?: number;
+    /** 视觉预设，default 保持通用，card 用于卡片风格 */
+    preset?: BaseSurfacePreset;
+    /** refraction 模式渲染器：svg 或 css */
+    refractionRenderer?: BaseSurfaceRefractionRenderer;
+    /** 非 mask 模式下的可选 mask 层透明度（用于 1+3、2+3、1+2+3） */
+    overlayOpacity?: number;
+    /** 标签名，默认 'div' */
+    tag?: string;
+}

package/dist/es/blank-slate/index.d.ts

@@ -19,13 +19,13 @@ declare const TxBlankSlate: {
             type: import('vue').PropType<import('..').EmptyStateSize>;
             default: string;
         };
-        iconSize: {
-            type: import('vue').PropType<number>;
-        };
         layout: {
             type: import('vue').PropType<import('..').EmptyStateLayout>;
             default: string;
         };
+        iconSize: {
+            type: import('vue').PropType<number>;
+        };
         align: {
             type: import('vue').PropType<import('..').EmptyStateAlign>;
         };
@@ -70,13 +70,13 @@ declare const TxBlankSlate: {
             type: import('vue').PropType<import('..').EmptyStateSize>;
             default: string;
         };
-        iconSize: {
-            type: import('vue').PropType<number>;
-        };
         layout: {
             type: import('vue').PropType<import('..').EmptyStateLayout>;
             default: string;
         };
+        iconSize: {
+            type: import('vue').PropType<number>;
+        };
         align: {
             type: import('vue').PropType<import('..').EmptyStateAlign>;
         };
@@ -118,13 +118,13 @@ declare const TxBlankSlate: {
         type: import('vue').PropType<import('..').EmptyStateSize>;
         default: string;
     };
-    iconSize: {
-        type: import('vue').PropType<number>;
-    };
     layout: {
         type: import('vue').PropType<import('..').EmptyStateLayout>;
         default: string;
     };
+    iconSize: {
+        type: import('vue').PropType<number>;
+    };
     align: {
         type: import('vue').PropType<import('..').EmptyStateAlign>;
     };

package/dist/es/blank-slate/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/TxBlankSlate.vue.js';
 
 const TxBlankSlate = withInstall(_sfc_main);

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

@@ -37,16 +37,24 @@ declare const TxButton: {
             type: import('vue').PropType<"flat" | "info" | "success" | "warning" | "primary" | "secondary" | "ghost" | "danger" | "bare">;
             default: undefined;
         };
-        block: {
+        dashed: {
             type: import('vue').PropType<boolean>;
-            default: boolean;
         };
         plain: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        dashed: {
+        border: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        block: {
             type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        loadingVariant: {
+            type: import('vue').PropType<"bar" | "spinner">;
+            default: string;
         };
         autofocus: {
             type: import('vue').PropType<boolean>;
@@ -77,8 +85,10 @@ declare const TxButton: {
         size: "sm" | "md" | "lg" | "large" | "small" | "mini";
         round: boolean;
         variant: "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "info" | "flat" | "bare";
-        block: boolean;
         plain: boolean;
+        border: boolean;
+        block: boolean;
+        loadingVariant: "spinner" | "bar";
         autofocus: boolean;
         nativeType: "button" | "submit" | "reset";
         vibrate: boolean;
@@ -123,16 +133,24 @@ declare const TxButton: {
             type: import('vue').PropType<"flat" | "info" | "success" | "warning" | "primary" | "secondary" | "ghost" | "danger" | "bare">;
             default: undefined;
         };
-        block: {
+        dashed: {
             type: import('vue').PropType<boolean>;
-            default: boolean;
         };
         plain: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        dashed: {
+        border: {
             type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        block: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        loadingVariant: {
+            type: import('vue').PropType<"bar" | "spinner">;
+            default: string;
         };
         autofocus: {
             type: import('vue').PropType<boolean>;
@@ -161,8 +179,10 @@ declare const TxButton: {
         size: "sm" | "md" | "lg" | "large" | "small" | "mini";
         round: boolean;
         variant: "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "info" | "flat" | "bare";
-        block: boolean;
         plain: boolean;
+        border: boolean;
+        block: boolean;
+        loadingVariant: "spinner" | "bar";
         autofocus: boolean;
         nativeType: "button" | "submit" | "reset";
         vibrate: boolean;
@@ -204,16 +224,24 @@ declare const TxButton: {
         type: import('vue').PropType<"flat" | "info" | "success" | "warning" | "primary" | "secondary" | "ghost" | "danger" | "bare">;
         default: undefined;
     };
-    block: {
+    dashed: {
         type: import('vue').PropType<boolean>;
-        default: boolean;
     };
     plain: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    dashed: {
+    border: {
         type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    block: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    loadingVariant: {
+        type: import('vue').PropType<"bar" | "spinner">;
+        default: string;
     };
     autofocus: {
         type: import('vue').PropType<boolean>;
@@ -244,8 +272,10 @@ declare const TxButton: {
     size: "sm" | "md" | "lg" | "large" | "small" | "mini";
     round: boolean;
     variant: "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "info" | "flat" | "bare";
-    block: boolean;
     plain: boolean;
+    border: boolean;
+    block: boolean;
+    loadingVariant: "spinner" | "bar";
     autofocus: boolean;
     nativeType: "button" | "submit" | "reset";
     vibrate: boolean;
@@ -290,7 +320,7 @@ declare const TxSplitButton: {
             default: number;
         };
         menuPlacement: {
-            type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+            type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
             default: string;
         };
         menuOffset: {
@@ -355,7 +385,7 @@ declare const TxSplitButton: {
             default: number;
         };
         menuPlacement: {
-            type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+            type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
             default: string;
         };
         menuOffset: {
@@ -414,7 +444,7 @@ declare const TxSplitButton: {
         default: number;
     };
     menuPlacement: {
-        type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+        type: import('vue').PropType<"top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
         default: string;
     };
     menuOffset: {

package/dist/es/button/index.js

@@ -1,6 +1,7 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import _sfc_main from './src/button.vue.js';
 import _sfc_main$1 from './src/split-button.vue.js';
+/* empty css                     */
 
 const TxButton = withInstall(_sfc_main);
 const TxSplitButton = withInstall(_sfc_main$1);

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

@@ -12,7 +12,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     round: boolean;
     circle: boolean;
     loading: boolean;
+    loadingVariant: string;
     disabled: boolean;
+    border: boolean;
     icon: undefined;
     autofocus: boolean;
     nativeType: string;
@@ -29,7 +31,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     round: boolean;
     circle: boolean;
     loading: boolean;
+    loadingVariant: string;
     disabled: boolean;
+    border: boolean;
     icon: undefined;
     autofocus: boolean;
     nativeType: string;
@@ -46,8 +50,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     size: "sm" | "md" | "lg" | "large" | "small" | "mini";
     round: boolean;
     variant: "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "info" | "flat" | "bare";
-    block: boolean;
     plain: boolean;
+    border: boolean;
+    block: boolean;
+    loadingVariant: "spinner" | "bar";
     autofocus: boolean;
     nativeType: "button" | "submit" | "reset";
     vibrate: boolean;

package/dist/es/button/src/button.vue.js

@@ -1,10 +1,19 @@
-import { defineComponent, ref, useSlots, computed, watch, nextTick, withDirectives, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, createCommentVNode, renderSlot, unref, createVNode } from 'vue';
+import { defineComponent, ref, useAttrs, useSlots, computed, watch, nextTick, withDirectives, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, Fragment, createBlock, unref, createVNode } from 'vue';
 import VWave from 'v-wave';
-import { useFlip } from '../../utils/animation/flip.js';
-import { useVibrate } from '../../utils/vibrate.js';
+import { useFlip } from '../../packages/tuffex/packages/utils/animation/flip.js';
+import { useVibrate } from '../../packages/tuffex/packages/utils/vibrate.js';
 import { Spinner } from '../../spinner/index.js';
 
 const _hoisted_1 = ["type", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "tx-button__loading-layer",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "tx-button__spinner-slot is-visible"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "TxButton"
@@ -20,7 +29,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     round: { type: Boolean, default: false },
     circle: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
+    loadingVariant: { default: "spinner" },
     disabled: { type: Boolean, default: false },
+    border: { type: Boolean, default: true },
     icon: { default: void 0 },
     autofocus: { type: Boolean, default: false },
     nativeType: { default: "button" },
@@ -34,6 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { vWave } = VWave.createLocalWaveDirective();
     const buttonRef = ref(null);
     const innerRef = ref(null);
+    void innerRef.value;
+    const attrs = useAttrs();
     const slots = useSlots();
     const autoWidthEnabled = computed(() => {
       return !props.block && !props.circle;
@@ -100,6 +113,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "--tx-button-spinner-size": `${spinnerSize.value}px`
       };
     });
+    const resolvedLoadingVariant = computed(() => {
+      if (props.loadingVariant)
+        return props.loadingVariant;
+      const raw = attrs["loading-variant"] ?? attrs.loadingVariant;
+      return typeof raw === "string" ? raw : void 0;
+    });
+    const showLoadingBar = computed(() => {
+      return props.loading && props.block && resolvedLoadingVariant.value === "bar";
+    });
     function hasDefaultContent() {
       const vnodes = slots.default?.();
       if (!vnodes || !vnodes.length)
@@ -113,6 +135,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     const isIconOnly = computed(() => {
+      if (props.block && props.circle)
+        return false;
       const slotHasContent = hasDefaultContent();
       return props.circle || props.icon && !slotHasContent;
     });
@@ -129,11 +153,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         {
           "block": props.block,
           "loading": props.loading,
+          "loading-bar": showLoadingBar.value,
           "disabled": props.disabled,
           "plain": props.plain,
           "dashed": props.dashed,
           "round": props.round,
           "circle": props.circle,
+          "borderless": props.border === false,
           "auto-width": autoWidthEnabled.value
         }
       ];
@@ -174,34 +200,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("button", {
         ref_key: "buttonRef",
         ref: buttonRef,
-        class: normalizeClass(["tx-button fake-background transition-cubic", classList.value]),
+        class: normalizeClass(["tx-button fake-background isolate transition-cubic", classList.value]),
         type: __props.nativeType,
         disabled: __props.disabled || __props.loading,
         onClick: handleClick
       }, [
+        showLoadingBar.value ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
         createElementVNode("span", {
           ref_key: "innerRef",
           ref: innerRef,
           class: "tx-button__inner",
           style: normalizeStyle(innerStyle.value)
         }, [
-          isIconOnly.value ? (openBlock(), createBlock(unref(Spinner), {
-            key: 0,
-            class: "tx-button__spinner is-overlay",
-            visible: __props.loading,
-            size: spinnerSize.value
-          }, null, 8, ["visible", "size"])) : (openBlock(), createElementBlock("span", {
-            key: 1,
-            class: normalizeClass(["tx-button__spinner-slot", { "is-visible": __props.loading }])
-          }, [
-            createVNode(unref(Spinner), {
-              class: "tx-button__spinner",
-              visible: __props.loading,
-              size: spinnerSize.value
-            }, null, 8, ["visible", "size"])
-          ], 2)),
+          !showLoadingBar.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            isIconOnly.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              __props.loading ? (openBlock(), createBlock(unref(Spinner), {
+                key: 0,
+                class: "tx-button__spinner is-overlay",
+                visible: __props.loading,
+                size: spinnerSize.value
+              }, null, 8, ["visible", "size"])) : createCommentVNode("", true)
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              __props.loading ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                createVNode(unref(Spinner), {
+                  class: "tx-button__spinner",
+                  visible: __props.loading,
+                  size: spinnerSize.value
+                }, null, 8, ["visible", "size"])
+              ])) : createCommentVNode("", true)
+            ], 64))
+          ], 64)) : createCommentVNode("", true),
           __props.icon ? (openBlock(), createElementBlock("i", {
-            key: 2,
+            key: 1,
             class: normalizeClass(["tx-button__icon", __props.icon])
           }, null, 2)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")

package/dist/es/button/src/split-button.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useSlots, watch, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, createVNode, unref, renderSlot, withCtx } from 'vue';
+import { defineComponent, ref, useSlots, watch, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, createVNode, unref, renderSlot, withCtx, withKeys, withModifiers } from 'vue';
 import TxPopover from '../../popover/src/TxPopover.vue.js';
 import { Spinner } from '../../spinner/index.js';
 
@@ -6,7 +6,7 @@ const _hoisted_1 = ["aria-disabled", "aria-busy"];
 const _hoisted_2 = ["disabled"];
 const _hoisted_3 = { class: "tx-split-button__inner" };
 const _hoisted_4 = { class: "tx-split-button__label" };
-const _hoisted_5 = ["disabled", "aria-expanded"];
+const _hoisted_5 = ["disabled", "aria-expanded", "onKeydown"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "TxSplitButton" },
   __name: "split-button",
@@ -51,11 +51,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const interactiveDisabled = computed(() => props.disabled || props.loading);
     const menuDisabled = computed(() => interactiveDisabled.value || props.menuDisabled);
+    const ignoreNextMenuClick = ref(false);
     function handlePrimaryClick(event) {
       if (interactiveDisabled.value)
         return;
       emit("click", event);
     }
+    function toggleMenu() {
+      if (menuDisabled.value)
+        return;
+      open.value = !open.value;
+    }
+    function handleMenuPointerDown() {
+      if (menuDisabled.value)
+        return;
+      ignoreNextMenuClick.value = true;
+      toggleMenu();
+    }
+    function handleMenuClick() {
+      if (ignoreNextMenuClick.value) {
+        ignoreNextMenuClick.value = false;
+        return;
+      }
+      toggleMenu();
+    }
     function closeMenu() {
       open.value = false;
     }
@@ -97,7 +116,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           disabled: menuDisabled.value,
           placement: __props.menuPlacement,
           offset: __props.menuOffset,
-          width: __props.menuWidth
+          width: __props.menuWidth,
+          "toggle-on-reference-click": false
         }, {
           reference: withCtx(() => [
             createElementVNode("button", {
@@ -105,14 +125,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: menuDisabled.value,
               type: "button",
               "aria-haspopup": "menu",
-              "aria-expanded": open.value || void 0
+              "aria-expanded": open.value || void 0,
+              onPointerdown: handleMenuPointerDown,
+              onClick: handleMenuClick,
+              onKeydown: [
+                withKeys(withModifiers(handleMenuClick, ["prevent"]), ["enter"]),
+                withKeys(withModifiers(handleMenuClick, ["prevent"]), ["space"])
+              ]
             }, [
               renderSlot(_ctx.$slots, "menu-icon", {}, () => [
                 createElementVNode("i", {
                   class: normalizeClass(["tx-split-button__menu-icon", __props.menuIcon])
                 }, null, 2)
               ])
-            ], 8, _hoisted_5)
+            ], 40, _hoisted_5)
           ]),
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "menu", { close: closeMenu })