@talex-touch/tuffex 0.3.3

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

@@ -0,0 +1,348 @@
+.tx-button:hover {
+  background-color: var(--tx-button-bg-color-hover);
+}
+.tx-button .tx-spinner {
+  color: currentColor;
+}
+.tx-button {
+  --fake-index: -1;
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  min-width: 80px;
+  height: 32px;
+  color: var(--tx-text-color);
+  border-radius: 12px;
+  --fake-radius: var(--tx-button-radius, 12px);
+  border: 1px solid var(--tx-button-border-color);
+  --tx-button-bg-color-hover: var(--tx-bg-color-page);
+  --tx-button-border-color: var(--tx-border-color);
+}
+.tx-button.block {
+  width: 100%;
+}
+.tx-button.round {
+  border-radius: 999px;
+  --fake-radius: 999px;
+}
+.tx-button.circle {
+  border-radius: 999px;
+  --fake-radius: 999px;
+  padding: 0;
+  min-width: 32px;
+  width: 32px;
+}
+.tx-button.dashed {
+  border-style: dashed;
+}
+.tx-button.disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  --fake-index: 1;
+  --fake-opacity: 0.25;
+}
+.tx-button.loading {
+  cursor: progress;
+}
+.tx-button.variant-primary {
+  color: var(--tx-color-primary);
+  --tx-button-bg-color-hover: var(--tx-color-primary-light-9);
+  --tx-button-border-color: var(--tx-color-primary);
+}
+.tx-button.variant-success {
+  color: var(--tx-color-success);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-success) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-success);
+}
+.tx-button.variant-warning {
+  color: var(--tx-color-warning);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-warning) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-warning);
+}
+.tx-button.variant-secondary {
+  color: var(--tx-text-color-secondary);
+  --tx-button-bg-color-hover: var(--tx-fill-color);
+  --tx-button-border-color: var(--tx-border-color-light);
+}
+.tx-button.variant-flat {
+  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;
+  min-width: 120px;
+}
+.tx-button.variant-bare {
+  min-width: 0;
+  height: auto;
+  padding: var(--tx-button-bare-padding, 0.25rem);
+  border: none;
+  border-radius: var(--tx-button-bare-radius, 8px);
+  --fake-radius: var(--tx-button-bare-radius, 8px);
+  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));
+  --tx-button-border-color: transparent;
+  justify-content: flex-start;
+}
+.tx-button.variant-bare .tx-button__inner {
+  display: flex;
+  width: 100%;
+  align-items: inherit;
+  justify-content: inherit;
+  gap: inherit;
+  white-space: inherit;
+}
+.tx-button.variant-flat.tone-primary {
+  color: var(--tx-color-primary);
+  --tx-button-bg-color-hover: var(--tx-color-primary-light-9);
+  --tx-button-border-color: var(--tx-color-primary);
+}
+.tx-button.variant-flat.tone-success {
+  color: var(--tx-color-success);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-success) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-success);
+}
+.tx-button.variant-flat.tone-warning {
+  color: var(--tx-color-warning);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-warning) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-warning);
+}
+.tx-button.variant-flat.tone-danger {
+  color: var(--tx-color-danger);
+  --tx-button-bg-color-hover: var(--tx-color-danger-light-9);
+  --tx-button-border-color: var(--tx-color-danger);
+}
+.tx-button.variant-flat.tone-info {
+  color: var(--tx-color-info);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-info) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-info);
+}
+.tx-button.variant-flat.tone-text {
+  color: var(--tx-text-color-secondary);
+  --tx-button-bg-color-hover: var(--tx-fill-color);
+  --tx-button-border-color: #0000;
+}
+.tx-button.variant-ghost {
+  color: var(--tx-text-color-secondary);
+  --tx-button-bg-color-hover: var(--tx-fill-color);
+  --tx-button-border-color: #0000;
+}
+.tx-button.variant-ghost:hover:not(.disabled) {
+  background: var(--tx-fill-color, #f5f7fa);
+}
+.tx-button.variant-danger {
+  color: var(--tx-color-danger);
+  --tx-button-bg-color-hover: var(--tx-color-danger-light-9);
+  --tx-button-border-color: var(--tx-color-danger);
+}
+.tx-button.variant-info {
+  color: var(--tx-color-info);
+  --tx-button-bg-color-hover: color-mix(in srgb, var(--tx-color-info) 12%, transparent);
+  --tx-button-border-color: var(--tx-color-info);
+}
+.tx-button.plain {
+  background: transparent;
+}
+.tx-button .tx-button__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  --tx-button-gap: 0.5rem;
+  gap: var(--tx-button-gap);
+  white-space: nowrap;
+  transition: width var(--tx-transition-duration-fast) var(--tx-transition-function);
+}
+.tx-button .tx-button__spinner-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  overflow: hidden;
+  margin-right: calc(-1 * var(--tx-button-gap));
+  transition: width 0.18s cubic-bezier(0.2, 0, 0, 1), margin-right 0.18s cubic-bezier(0.2, 0, 0, 1);
+  will-change: width, margin-right;
+}
+.tx-button .tx-button__spinner-slot.is-visible {
+  width: var(--tx-button-spinner-size, 16px);
+  margin-right: 0;
+}
+.tx-button .tx-button__spinner {
+  position: relative;
+  opacity: 1;
+  filter: blur(0);
+  scale: 1;
+  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1), filter 0.18s cubic-bezier(0.2, 0, 0, 1), scale 0.18s cubic-bezier(0.2, 0, 0, 1);
+  will-change: opacity, filter, scale;
+}
+.tx-button .tx-button__spinner.is-overlay {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.tx-button:not(.loading) .tx-button__spinner {
+  opacity: 0;
+  filter: blur(4px);
+  scale: 0.86;
+  pointer-events: none;
+}
+.tx-button.loading .tx-button__inner > :not(.tx-button__spinner) {
+  opacity: 0.92;
+}
+.tx-button.loading .tx-button__spinner.is-overlay {
+  z-index: 1;
+}
+.tx-button.loading .tx-button__spinner.is-overlay ~ .tx-button__icon,
+.tx-button.loading .tx-button__spinner.is-overlay ~ :not(.tx-button__spinner) {
+  opacity: 0;
+  filter: blur(2px);
+}
+.tx-button.auto-width .tx-button__inner {
+  overflow: hidden;
+}
+.tx-button.tx-size-sm {
+  padding: 0 0.25rem;
+  height: 26px;
+  min-width: 60px;
+  font-size: 13px;
+}
+.tx-button.variant-flat.tx-size-sm {
+  padding: 0 0.5rem;
+  height: 32px;
+  min-width: 32px;
+  font-size: 13px;
+}
+.tx-button.tx-size-lg {
+  padding: 0 1.25rem;
+  height: 42px;
+  font-size: 15px;
+}
+
+.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;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.tx-split-button.variant-success {
+  --tx-split-button-bg: var(--tx-color-success, #67c23a);
+}
+.tx-split-button.variant-warning {
+  --tx-split-button-bg: var(--tx-color-warning, #e6a23c);
+}
+.tx-split-button.variant-danger {
+  --tx-split-button-bg: var(--tx-color-danger, #f56c6c);
+}
+.tx-split-button.variant-info {
+  --tx-split-button-bg: var(--tx-color-info, #909399);
+}
+.tx-split-button.variant-secondary {
+  --tx-split-button-bg: var(--tx-text-color-secondary, #606266);
+}
+.tx-split-button.variant-ghost {
+  --tx-split-button-bg: color-mix(in srgb, var(--tx-fill-color, #f5f7fa) 78%, transparent);
+  --tx-split-button-fg: var(--tx-text-color, #303133);
+  box-shadow: none;
+}
+.tx-split-button.is-disabled, .tx-split-button.is-loading {
+  opacity: 0.72;
+  cursor: not-allowed;
+}
+.tx-split-button.tx-size-sm .tx-split-button__primary,
+.tx-split-button.tx-size-sm .tx-split-button__menu {
+  height: 28px;
+}
+.tx-split-button.tx-size-sm .tx-split-button__primary {
+  padding: 0 12px;
+  font-size: 12px;
+}
+.tx-split-button.tx-size-sm .tx-split-button__menu {
+  width: 30px;
+}
+.tx-split-button.tx-size-lg .tx-split-button__primary,
+.tx-split-button.tx-size-lg .tx-split-button__menu {
+  height: 40px;
+}
+.tx-split-button.tx-size-lg .tx-split-button__primary {
+  padding: 0 18px;
+  font-size: 14px;
+}
+.tx-split-button.tx-size-lg .tx-split-button__menu {
+  width: 40px;
+}
+
+.tx-split-button__primary,
+.tx-split-button__menu {
+  border: 0;
+  background: var(--tx-split-button-bg);
+  color: var(--tx-split-button-fg);
+  cursor: pointer;
+}
+.tx-split-button__primary:disabled,
+.tx-split-button__menu:disabled {
+  cursor: not-allowed;
+}
+.tx-split-button__primary:hover:not(:disabled),
+.tx-split-button__menu:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--tx-split-button-bg) 88%, #000);
+}
+
+.tx-split-button__primary {
+  height: 32px;
+  padding: 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.tx-split-button__inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.tx-split-button__spinner-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  overflow: hidden;
+  margin-right: -8px;
+  transition: width 0.18s cubic-bezier(0.2, 0, 0, 1), margin-right 0.18s cubic-bezier(0.2, 0, 0, 1);
+}
+.tx-split-button__spinner-slot.is-visible {
+  width: 16px;
+  margin-right: 0;
+}
+
+.tx-split-button__spinner {
+  color: currentColor;
+}
+
+.tx-split-button__icon,
+.tx-split-button__menu-icon {
+  font-size: 16px;
+}
+
+.tx-split-button__menu {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid rgba(255, 255, 255, 0.22);
+}
+.tx-split-button__menu:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--tx-split-button-bg) 86%, #000);
+}

package/dist/lib/card/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxCard = require('./src/TxCard.vue.js');
+
+const Card = withInstall.withInstall(TxCard.default);
+
+exports.TxCard = TxCard.default;
+exports.Card = Card;
+exports.default = Card;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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"]]);
+
+exports.default = TxCard;

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

@@ -0,0 +1,237 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const TxSpinner_vue_vue_type_script_setup_true_lang = require('../../spinner/src/TxSpinner.vue.js');
+;/* empty css                                */
+
+const _hoisted_1 = {
+  key: 0,
+  class: "tx-card__cover"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "tx-card__header"
+};
+const _hoisted_3 = { class: "tx-card__body" };
+const _hoisted_4 = {
+  key: 2,
+  class: "tx-card__footer"
+};
+const _hoisted_5 = {
+  key: 3,
+  class: "tx-card__loading",
+  "aria-hidden": "true"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxCard" },
+  __name: "TxCard",
+  props: {
+    variant: { default: "solid" },
+    background: { default: "blur" },
+    shadow: { default: "none" },
+    size: { default: "medium" },
+    radius: { default: void 0 },
+    padding: { default: void 0 },
+    glassBlur: { type: Boolean, default: true },
+    glassBlurAmount: { default: 22 },
+    glassOverlay: { type: Boolean, default: true },
+    glassOverlayOpacity: { default: 0.22 },
+    clickable: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    loadingSpinnerSize: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    inertial: { type: Boolean, default: false },
+    inertialMaxOffset: { default: 22 },
+    inertialRebound: { default: 0.12 }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const {
+      variant,
+      background,
+      shadow,
+      size,
+      clickable,
+      loading,
+      disabled,
+      inertial,
+      inertialMaxOffset,
+      inertialRebound,
+      glassBlur,
+      glassBlurAmount,
+      glassOverlay,
+      glassOverlayOpacity
+    } = vue.toRefs(props);
+    const resolvedRadius = vue.computed(() => {
+      if (typeof props.radius === "number")
+        return props.radius;
+      return 18;
+    });
+    const resolvedPadding = vue.computed(() => {
+      if (typeof props.padding === "number")
+        return props.padding;
+      if (props.size === "small")
+        return 10;
+      if (props.size === "large")
+        return 16;
+      return 12;
+    });
+    const resolvedSpinnerSize = vue.computed(() => {
+      if (typeof props.loadingSpinnerSize === "number")
+        return props.loadingSpinnerSize;
+      return 12;
+    });
+    const motionX = vue.ref(0);
+    const motionY = vue.ref(0);
+    let targetX = 0;
+    let targetY = 0;
+    let velocityX = 0;
+    let velocityY = 0;
+    let lastTs = 0;
+    let rafId = null;
+    let isReturning = false;
+    function clamp(n, min, max) {
+      return Math.max(min, Math.min(max, n));
+    }
+    function lerp(a, b, t) {
+      return a + (b - a) * t;
+    }
+    function stopRaf() {
+      if (rafId == null)
+        return;
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    function tickFrame(ts) {
+      const dtRaw = lastTs ? (ts - lastTs) / 16.6667 : 1;
+      lastTs = ts;
+      const dt = clamp(dtRaw, 0.5, 2);
+      const rebound = clamp(props.inertialRebound, 0, 1);
+      const followStiffness = 0.085;
+      const followDamping = 0.9;
+      const returnStiffness = lerp(0.06, 0.12, rebound);
+      const returnDamping = lerp(0.96, 0.84, rebound);
+      const stiffness = isReturning ? returnStiffness : followStiffness;
+      const damping = isReturning ? returnDamping : followDamping;
+      velocityX += (targetX - motionX.value) * stiffness * dt;
+      velocityY += (targetY - motionY.value) * stiffness * dt;
+      const damp = damping ** dt;
+      velocityX *= damp;
+      velocityY *= damp;
+      motionX.value += velocityX;
+      motionY.value += velocityY;
+      const closeX = Math.abs(targetX - motionX.value) < 0.08 && Math.abs(velocityX) < 0.08;
+      const closeY = Math.abs(targetY - motionY.value) < 0.08 && Math.abs(velocityY) < 0.08;
+      if (closeX && closeY) {
+        motionX.value = targetX;
+        motionY.value = targetY;
+        velocityX = 0;
+        velocityY = 0;
+        lastTs = 0;
+        rafId = null;
+        return;
+      }
+      rafId = requestAnimationFrame(tickFrame);
+    }
+    function ensureRaf() {
+      if (rafId != null)
+        return;
+      rafId = requestAnimationFrame(tickFrame);
+    }
+    function onMouseMove(ev) {
+      if (!props.inertial)
+        return;
+      if (props.disabled)
+        return;
+      const el = ev.currentTarget;
+      if (!el)
+        return;
+      isReturning = false;
+      const rect = el.getBoundingClientRect();
+      const halfW = rect.width / 2;
+      const halfH = rect.height / 2;
+      if (halfW <= 0 || halfH <= 0)
+        return;
+      const dx = ev.clientX - rect.left - halfW;
+      const dy = ev.clientY - rect.top - halfH;
+      const ratioX = clamp(dx / halfW, -1, 1);
+      const ratioY = clamp(dy / halfH, -1, 1);
+      const easedX = Math.sign(ratioX) * Math.abs(ratioX) ** 0.85;
+      const easedY = Math.sign(ratioY) * Math.abs(ratioY) ** 0.85;
+      const max = props.inertialMaxOffset;
+      targetX = easedX * max;
+      targetY = easedY * max;
+      ensureRaf();
+    }
+    function onMouseLeave() {
+      if (!props.inertial)
+        return;
+      const rebound = clamp(props.inertialRebound, 0, 1);
+      isReturning = true;
+      velocityX *= rebound;
+      velocityY *= rebound;
+      targetX = 0;
+      targetY = 0;
+      ensureRaf();
+    }
+    vue.onBeforeUnmount(() => {
+      stopRaf();
+    });
+    function onClick(ev) {
+      if (props.disabled)
+        return;
+      if (!props.clickable)
+        return;
+      emit("click", ev);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["tx-card", [
+          `is-${vue.unref(variant)}`,
+          `is-bg-${vue.unref(background)}`,
+          `is-shadow-${vue.unref(shadow)}`,
+          `is-${vue.unref(size)}`,
+          {
+            "is-clickable": vue.unref(clickable),
+            "is-loading": vue.unref(loading),
+            "is-disabled": vue.unref(disabled),
+            "is-inertial": vue.unref(inertial)
+          }
+        ]]),
+        style: vue.normalizeStyle({
+          "--tx-card-radius": `${resolvedRadius.value}px`,
+          "--tx-card-padding": `${resolvedPadding.value}px`,
+          "--tx-card-dx": `${motionX.value}px`,
+          "--tx-card-dy": `${motionY.value}px`,
+          "--tx-card-glass-blur": `${vue.unref(glassBlur) ? vue.unref(glassBlurAmount) : 0}px`,
+          "--tx-card-glass-overlay-opacity": `${vue.unref(glassOverlay) ? vue.unref(glassOverlayOpacity) : 0}`
+        }),
+        onClick,
+        onMousemove: onMouseMove,
+        onMouseleave: onMouseLeave
+      }, [
+        _ctx.$slots.cover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.renderSlot(_ctx.$slots, "cover", {}, void 0, true)
+        ])) : vue.createCommentVNode("", true),
+        _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ])) : vue.createCommentVNode("", true),
+        vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.createVNode(TxSpinner_vue_vue_type_script_setup_true_lang.default, { size: resolvedSpinnerSize.value }, null, 8, ["size"])
+        ])) : vue.createCommentVNode("", true)
+      ], 38);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/lib/card-item/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const withInstall = require('../utils/withInstall.js');
+const TxCardItem = require('./src/TxCardItem.vue.js');
+
+const CardItem = withInstall.withInstall(TxCardItem.default);
+
+exports.TxCardItem = TxCardItem.default;
+exports.CardItem = CardItem;
+exports.default = CardItem;

package/dist/lib/card-item/src/TxCardItem.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TxCardItem_vue_vue_type_script_setup_true_lang = require('./TxCardItem.vue2.js');
+;/* empty css                 */
+const _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const TxCardItem = /* @__PURE__ */ _pluginVue_exportHelper.default(TxCardItem_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-fde23e3f"]]);
+
+exports.default = TxCardItem;