@talex-touch/tuffex 0.3.3 → 0.3.4

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxBaseSurface_vue_vue_type_script_setup_true_lang = require('./TxBaseSurface.vue.js');
+;/* empty css                  */
+
+
+
+exports.default = TxBaseSurface_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/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/lib/blank-slate/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxBlankSlate_vue_vue_type_script_setup_true_lang = require('./src/TxBlankSlate.vue.js');
 
 const TxBlankSlate = withInstall.withInstall(TxBlankSlate_vue_vue_type_script_setup_true_lang.default);

package/dist/lib/button/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const button_vue_vue_type_script_setup_true_lang = require('./src/button.vue.js');
 const splitButton_vue_vue_type_script_setup_true_lang = require('./src/split-button.vue.js');
+;/* empty css                      */
 
 const TxButton = withInstall.withInstall(button_vue_vue_type_script_setup_true_lang.default);
 const TxSplitButton = withInstall.withInstall(splitButton_vue_vue_type_script_setup_true_lang.default);

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

@@ -4,11 +4,20 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 
 const vue = require('vue');
 const VWave = require('v-wave');
-const flip = require('../../utils/animation/flip.js');
-const vibrate = require('../../utils/vibrate.js');
+const flip = require('../../packages/tuffex/packages/utils/animation/flip.js');
+const vibrate = require('../../packages/tuffex/packages/utils/vibrate.js');
 const index = require('../../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__ */ vue.defineComponent({
   ...{
     name: "TxButton"
@@ -24,7 +33,9 @@ const _sfc_main = /* @__PURE__ */ vue.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" },
@@ -38,6 +49,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { vWave } = VWave.createLocalWaveDirective();
     const buttonRef = vue.ref(null);
     const innerRef = vue.ref(null);
+    void innerRef.value;
+    const attrs = vue.useAttrs();
     const slots = vue.useSlots();
     const autoWidthEnabled = vue.computed(() => {
       return !props.block && !props.circle;
@@ -104,6 +117,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "--tx-button-spinner-size": `${spinnerSize.value}px`
       };
     });
+    const resolvedLoadingVariant = vue.computed(() => {
+      if (props.loadingVariant)
+        return props.loadingVariant;
+      const raw = attrs["loading-variant"] ?? attrs.loadingVariant;
+      return typeof raw === "string" ? raw : void 0;
+    });
+    const showLoadingBar = vue.computed(() => {
+      return props.loading && props.block && resolvedLoadingVariant.value === "bar";
+    });
     function hasDefaultContent() {
       const vnodes = slots.default?.();
       if (!vnodes || !vnodes.length)
@@ -117,6 +139,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const isIconOnly = vue.computed(() => {
+      if (props.block && props.circle)
+        return false;
       const slotHasContent = hasDefaultContent();
       return props.circle || props.icon && !slotHasContent;
     });
@@ -133,11 +157,13 @@ const _sfc_main = /* @__PURE__ */ vue.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
         }
       ];
@@ -178,34 +204,38 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
         ref_key: "buttonRef",
         ref: buttonRef,
-        class: vue.normalizeClass(["tx-button fake-background transition-cubic", classList.value]),
+        class: vue.normalizeClass(["tx-button fake-background isolate transition-cubic", classList.value]),
         type: __props.nativeType,
         disabled: __props.disabled || __props.loading,
         onClick: handleClick
       }, [
+        showLoadingBar.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2)) : vue.createCommentVNode("", true),
         vue.createElementVNode("span", {
           ref_key: "innerRef",
           ref: innerRef,
           class: "tx-button__inner",
           style: vue.normalizeStyle(innerStyle.value)
         }, [
-          isIconOnly.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.Spinner), {
-            key: 0,
-            class: "tx-button__spinner is-overlay",
-            visible: __props.loading,
-            size: spinnerSize.value
-          }, null, 8, ["visible", "size"])) : (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: vue.normalizeClass(["tx-button__spinner-slot", { "is-visible": __props.loading }])
-          }, [
-            vue.createVNode(vue.unref(index.Spinner), {
-              class: "tx-button__spinner",
-              visible: __props.loading,
-              size: spinnerSize.value
-            }, null, 8, ["visible", "size"])
-          ], 2)),
+          !showLoadingBar.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            isIconOnly.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              __props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(index.Spinner), {
+                key: 0,
+                class: "tx-button__spinner is-overlay",
+                visible: __props.loading,
+                size: spinnerSize.value
+              }, null, 8, ["visible", "size"])) : vue.createCommentVNode("", true)
+            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
+                vue.createVNode(vue.unref(index.Spinner), {
+                  class: "tx-button__spinner",
+                  visible: __props.loading,
+                  size: spinnerSize.value
+                }, null, 8, ["visible", "size"])
+              ])) : vue.createCommentVNode("", true)
+            ], 64))
+          ], 64)) : vue.createCommentVNode("", true),
           __props.icon ? (vue.openBlock(), vue.createElementBlock("i", {
-            key: 2,
+            key: 1,
             class: vue.normalizeClass(["tx-button__icon", __props.icon])
           }, null, 2)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")

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

@@ -10,7 +10,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__ */ vue.defineComponent({
   ...{ name: "TxSplitButton" },
   __name: "split-button",
@@ -55,11 +55,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     const interactiveDisabled = vue.computed(() => props.disabled || props.loading);
     const menuDisabled = vue.computed(() => interactiveDisabled.value || props.menuDisabled);
+    const ignoreNextMenuClick = vue.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;
     }
@@ -101,7 +120,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           disabled: menuDisabled.value,
           placement: __props.menuPlacement,
           offset: __props.menuOffset,
-          width: __props.menuWidth
+          width: __props.menuWidth,
+          "toggle-on-reference-click": false
         }, {
           reference: vue.withCtx(() => [
             vue.createElementVNode("button", {
@@ -109,14 +129,20 @@ const _sfc_main = /* @__PURE__ */ vue.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: [
+                vue.withKeys(vue.withModifiers(handleMenuClick, ["prevent"]), ["enter"]),
+                vue.withKeys(vue.withModifiers(handleMenuClick, ["prevent"]), ["space"])
+              ]
             }, [
               vue.renderSlot(_ctx.$slots, "menu-icon", {}, () => [
                 vue.createElementVNode("i", {
                   class: vue.normalizeClass(["tx-split-button__menu-icon", __props.menuIcon])
                 }, null, 2)
               ])
-            ], 8, _hoisted_5)
+            ], 40, _hoisted_5)
           ]),
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "menu", { close: closeMenu })

package/dist/lib/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/lib/card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const withInstall = require('../utils/withInstall.js');
+const withInstall = require('../packages/tuffex/packages/utils/withInstall.js');
 const TxCard = require('./src/TxCard.vue.js');
 
 const Card = withInstall.withInstall(TxCard.default);

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

@@ -6,6 +6,6 @@ const TxCard_vue_vue_type_script_setup_true_lang = require('./TxCard.vue2.js');
 ;/* empty css             */
 const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
 
-const TxCard = /* @__PURE__ */ _pluginVue_exportHelper.default(TxCard_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-cde4b58a"]]);
+const TxCard = /* @__PURE__ */ _pluginVue_exportHelper.default(TxCard_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f41b09e1"]]);
 
 exports.default = TxCard;