@talex-touch/tuffex 0.3.3

package/dist/es/progress-bar/src/TxProgressBar.vue.js

@@ -0,0 +1,293 @@
+import { defineComponent, computed, ref, watch, createBlock, createElementBlock, openBlock, unref, normalizeProps, mergeProps, withCtx, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, Fragment, renderList, toDisplayString } from 'vue';
+import '../../tooltip/index.js';
+import TxTooltip from '../../tooltip/src/TxTooltip.vue.js';
+
+const _hoisted_1 = ["aria-valuenow", "aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "tx-progress-bar__segments"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "tx-progress-bar__text"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "tx-progress-bar__outside-text"
+};
+const _hoisted_5 = ["aria-valuenow", "aria-label"];
+const _hoisted_6 = {
+  key: 0,
+  class: "tx-progress-bar__segments"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "tx-progress-bar__text"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "tx-progress-bar__outside-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxProgressBar"
+  },
+  __name: "TxProgressBar",
+  props: {
+    loading: { type: Boolean, default: false },
+    indeterminate: { type: Boolean, default: false },
+    indeterminateVariant: { default: "sweep" },
+    error: { type: Boolean, default: false },
+    success: { type: Boolean, default: false },
+    status: { default: "" },
+    message: { default: "" },
+    percentage: { default: 0 },
+    segments: {},
+    segmentsTotal: { default: 100 },
+    height: { default: "5px" },
+    showText: { type: Boolean, default: false },
+    textPlacement: { default: "inside" },
+    format: {},
+    flowEffect: { default: "none" },
+    indicatorEffect: { default: "none" },
+    hoverEffect: { default: "none" },
+    color: { default: "" },
+    maskVariant: { default: "solid" },
+    maskBackground: { default: "blur" },
+    tooltip: { type: Boolean, default: false },
+    tooltipContent: {},
+    tooltipProps: {}
+  },
+  emits: ["complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const segmentsSum = computed(() => {
+      const list = props.segments || [];
+      return list.reduce((acc, s) => acc + (Number.isFinite(s.value) ? Math.max(0, s.value) : 0), 0);
+    });
+    const resolvedPercentage = computed(() => {
+      if (props.loading || props.indeterminate)
+        return 0;
+      if (props.segments?.length) {
+        const total = Math.max(1e-4, props.segmentsTotal || 100);
+        return Math.min(100, Math.max(0, segmentsSum.value / total * 100));
+      }
+      const raw = Math.min(100, Math.max(0, props.percentage ?? 0));
+      if ((props.success || props.error) && raw === 0 && props.message)
+        return 100;
+      return raw;
+    });
+    const resolvedStatus = computed(() => {
+      if (props.error)
+        return "error";
+      if (props.success)
+        return "success";
+      return props.status || "";
+    });
+    const fillColor = computed(() => {
+      if (props.color)
+        return props.color;
+      if (resolvedStatus.value === "error")
+        return "var(--tx-color-danger, #f56c6c)";
+      if (resolvedStatus.value === "success")
+        return "var(--tx-color-success, #67c23a)";
+      if (resolvedStatus.value === "warning")
+        return "var(--tx-color-warning, #e6a23c)";
+      return "var(--tx-color-primary, #409eff)";
+    });
+    const shadowColor = computed(() => {
+      const c = String(fillColor.value || "");
+      if (c.includes("gradient("))
+        return "transparent";
+      return c;
+    });
+    const styleVars = computed(() => {
+      const vars = {
+        "--tx-progress-height": props.height,
+        "--tx-progress-width": `${resolvedPercentage.value}%`,
+        "--tx-progress-color": fillColor.value,
+        "--tx-progress-shadow-color": shadowColor.value
+      };
+      return vars;
+    });
+    const classList = computed(() => ({
+      "tx-progress-bar--indeterminate": props.loading || props.indeterminate,
+      [`tx-progress-bar--indeterminate-${props.indeterminateVariant}`]: props.loading || props.indeterminate,
+      [`tx-progress-bar--flow-${props.flowEffect}`]: props.flowEffect !== "none" && !(props.loading || props.indeterminate),
+      [`tx-progress-bar--status-${resolvedStatus.value}`]: !!resolvedStatus.value
+    }));
+    const wrapperClassList = computed(() => ({
+      [`tx-progress-bar-wrapper--mask-${props.maskVariant}`]: true,
+      [`tx-progress-bar-wrapper--bg-${props.maskBackground}`]: true,
+      "tx-progress-bar-wrapper--text-outside": props.textPlacement === "outside",
+      [`tx-progress-bar-wrapper--hover-${props.hoverEffect}`]: props.hoverEffect !== "none"
+    }));
+    const showIndicator = computed(() => {
+      if (props.loading || props.indeterminate)
+        return false;
+      if (props.indicatorEffect === "none")
+        return false;
+      return resolvedPercentage.value > 0;
+    });
+    const indicatorStyle = computed(() => {
+      const x = Math.max(0, Math.min(100, resolvedPercentage.value));
+      const tx = x <= 0 ? "0%" : x >= 100 ? "-100%" : "-50%";
+      return {
+        left: `${x}%`,
+        transform: `translate3d(${tx}, -50%, 0)`
+      };
+    });
+    const displayText = computed(() => {
+      if (props.message)
+        return props.message;
+      if (props.format)
+        return props.format(resolvedPercentage.value);
+      return `${Math.round(resolvedPercentage.value)}%`;
+    });
+    const tooltipEnabled = computed(() => {
+      if (props.tooltip)
+        return true;
+      return !!props.tooltipContent;
+    });
+    const tooltipContentResolved = computed(() => {
+      return props.tooltipContent || displayText.value;
+    });
+    const tooltipBoundProps = computed(() => {
+      return {
+        content: tooltipContentResolved.value,
+        ...props.tooltipProps || {}
+      };
+    });
+    const showInsideText = computed(() => {
+      if (props.textPlacement !== "inside")
+        return false;
+      if (props.loading || props.indeterminate)
+        return !!props.message;
+      return !!props.message || !!props.showText;
+    });
+    const showOutsideText = computed(() => {
+      if (props.textPlacement !== "outside")
+        return false;
+      if (props.loading || props.indeterminate)
+        return !!props.message;
+      return !!props.message || !!props.showText;
+    });
+    const segmentsResolved = computed(() => {
+      const list = (props.segments || []).filter((s) => Number.isFinite(s.value) && s.value > 0);
+      const sum = Math.max(1e-4, segmentsSum.value);
+      return list.map((s) => {
+        const width = s.value / sum * 100;
+        return {
+          width: `${width}%`,
+          color: s.color || fillColor.value,
+          label: s.label
+        };
+      });
+    });
+    const hasSegments = computed(() => !!props.segments?.length && segmentsSum.value > 0);
+    const completedEmitted = ref(false);
+    watch(
+      () => resolvedPercentage.value,
+      (v) => {
+        if (props.loading || props.indeterminate)
+          return;
+        if (v >= 100 && !completedEmitted.value) {
+          completedEmitted.value = true;
+          emit("complete");
+        }
+        if (v < 100)
+          completedEmitted.value = false;
+      }
+    );
+    return (_ctx, _cache) => {
+      return tooltipEnabled.value ? (openBlock(), createBlock(unref(TxTooltip), normalizeProps(mergeProps({ key: 0 }, tooltipBoundProps.value)), {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["tx-progress-bar-wrapper", wrapperClassList.value]),
+            style: normalizeStyle(styleVars.value)
+          }, [
+            createElementVNode("span", {
+              class: "tx-progress-bar__track",
+              role: "progressbar",
+              "aria-valuenow": __props.loading || __props.indeterminate ? void 0 : resolvedPercentage.value,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": __props.message || "Progress"
+            }, [
+              _cache[0] || (_cache[0] = createElementVNode("span", {
+                class: "tx-progress-bar__mask",
+                "aria-hidden": "true"
+              }, null, -1)),
+              createElementVNode("span", {
+                class: normalizeClass(["tx-progress-bar", classList.value]),
+                "aria-hidden": "true"
+              }, [
+                hasSegments.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(segmentsResolved.value, (seg, idx) => {
+                    return openBlock(), createElementBlock("span", {
+                      key: idx,
+                      class: "tx-progress-bar__segment",
+                      style: normalizeStyle({ width: seg.width, background: seg.color })
+                    }, null, 4);
+                  }), 128))
+                ])) : createCommentVNode("", true)
+              ], 2),
+              showIndicator.value ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["tx-progress-bar__indicator", [`tx-progress-bar__indicator--${__props.indicatorEffect}`]]),
+                style: normalizeStyle(indicatorStyle.value),
+                "aria-hidden": "true"
+              }, null, 6)) : createCommentVNode("", true),
+              showInsideText.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(displayText.value), 1)) : createCommentVNode("", true)
+            ], 8, _hoisted_1),
+            showOutsideText.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(displayText.value), 1)) : createCommentVNode("", true)
+          ], 6)
+        ]),
+        _: 1
+      }, 16)) : (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(["tx-progress-bar-wrapper", wrapperClassList.value]),
+        style: normalizeStyle(styleVars.value)
+      }, [
+        createElementVNode("span", {
+          class: "tx-progress-bar__track",
+          role: "progressbar",
+          "aria-valuenow": __props.loading || __props.indeterminate ? void 0 : resolvedPercentage.value,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": __props.message || "Progress"
+        }, [
+          _cache[1] || (_cache[1] = createElementVNode("span", {
+            class: "tx-progress-bar__mask",
+            "aria-hidden": "true"
+          }, null, -1)),
+          createElementVNode("span", {
+            class: normalizeClass(["tx-progress-bar", classList.value]),
+            "aria-hidden": "true"
+          }, [
+            hasSegments.value ? (openBlock(), createElementBlock("span", _hoisted_6, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(segmentsResolved.value, (seg, idx) => {
+                return openBlock(), createElementBlock("span", {
+                  key: idx,
+                  class: "tx-progress-bar__segment",
+                  style: normalizeStyle({ width: seg.width, background: seg.color })
+                }, null, 4);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ], 2),
+          showIndicator.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["tx-progress-bar__indicator", [`tx-progress-bar__indicator--${__props.indicatorEffect}`]]),
+            style: normalizeStyle(indicatorStyle.value),
+            "aria-hidden": "true"
+          }, null, 6)) : createCommentVNode("", true),
+          showInsideText.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(displayText.value), 1)) : createCommentVNode("", true)
+        ], 8, _hoisted_5),
+        showOutsideText.value ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(displayText.value), 1)) : createCommentVNode("", true)
+      ], 6));
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/progress-bar/src/TxProgressBar.vue3.js

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

package/dist/es/progress-bar/src/types.d.ts

@@ -0,0 +1,138 @@
+import { TooltipProps } from '../../tooltip/src/types';
+
+export interface ProgressSegment {
+    value: number;
+    color?: string;
+    label?: string;
+}
+export type ProgressIndeterminateVariant = 'classic' | 'sweep' | 'bounce' | 'elastic' | 'split';
+export type ProgressFlowEffect = 'none' | 'shimmer' | 'wave' | 'particles';
+export type ProgressIndicatorEffect = 'none' | 'sparkle';
+export type ProgressHoverEffect = 'none' | 'glow';
+export interface ProgressBarProps {
+    /**
+     * Whether to show the loading animation.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether to show the indeterminate animation.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Indeterminate animation variant.
+     * @default 'sweep'
+     */
+    indeterminateVariant?: ProgressIndeterminateVariant;
+    /**
+     * Whether to show the error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Whether to show the success state.
+     * @default false
+     */
+    success?: boolean;
+    /**
+     * Status preset for the progress bar.
+     *
+     * When `error`/`success` is set, it takes precedence.
+     */
+    status?: 'success' | 'error' | 'warning' | '';
+    /**
+     * Message text to display inside the progress bar.
+     * @default ''
+     */
+    message?: string;
+    /**
+     * The progress percentage value (0-100).
+     * Only used when not in loading mode.
+     */
+    percentage?: number;
+    /**
+     * Multi segment progress.
+     *
+     * When provided, the component will render segments inside the filled area.
+     */
+    segments?: ProgressSegment[];
+    /**
+     * Total value used to compute the filled percentage when `segments` is provided.
+     * @default 100
+     */
+    segmentsTotal?: number;
+    /**
+     * The height of the progress bar.
+     * @default '5px'
+     */
+    height?: string;
+    /**
+     * Whether to show the percentage text.
+     * @default false
+     */
+    showText?: boolean;
+    /**
+     * Where to render the text when `showText` or `message` is provided.
+     * @default 'inside'
+     */
+    textPlacement?: 'inside' | 'outside';
+    /**
+     * Custom text formatter.
+     */
+    format?: (percentage: number) => string;
+    /**
+     * Flow overlay effect on determinate progress.
+     * @default 'none'
+     */
+    flowEffect?: ProgressFlowEffect;
+    /**
+     * Extra indicator visual effect.
+     * @default 'none'
+     */
+    indicatorEffect?: ProgressIndicatorEffect;
+    /**
+     * Hover effect.
+     * @default 'none'
+     */
+    hoverEffect?: ProgressHoverEffect;
+    /**
+     * Custom color for the progress bar.
+     * Overrides the default color based on state.
+     */
+    color?: string;
+    /**
+     * Variant of the background track (mask) under the bar.
+     * @default 'solid'
+     */
+    maskVariant?: 'solid' | 'dashed' | 'plain';
+    /**
+     * Background effect for the mask layer.
+     * @default 'blur'
+     */
+    maskBackground?: 'blur' | 'glass' | 'mask';
+    /**
+     * Whether to show tooltip on hover.
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * Tooltip content.
+     */
+    tooltipContent?: string;
+    /**
+     * Additional tooltip props.
+     */
+    tooltipProps?: Partial<TooltipProps>;
+}
+/**
+ * Emits interface for the TxProgressBar component.
+ *
+ * @public
+ */
+export interface ProgressBarEmits {
+    /**
+     * Emitted when the progress animation completes.
+     */
+    (e: 'complete'): void;
+}