cynx-lib 1.3.83 → 1.3.85

package/vue/components/LinearProgress.vue

@@ -1,268 +1,268 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
-
-const SIZES: Record<string, { height: number; fontSize: string }> = {
-  xs: { height: 4, fontSize: ".68rem" },
-  sm: { height: 5, fontSize: ".75rem" },
-  md: { height: 6, fontSize: ".82rem" },
-  lg: { height: 8, fontSize: ".9rem" },
-  xl: { height: 10, fontSize: "1rem" },
-};
-
-interface Segment {
-  value: number;
-  color?: string;
-  label?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    value?: number;
-    segments?: Segment[];
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    customSize?: number;
-    color?: string;
-    trackColor?: string;
-    label?: string;
-    showPercent?: boolean;
-    animated?: boolean;
-    rounded?: boolean;
-    indeterminate?: boolean;
-    speed?: number;
-    height?: number | string;
-    gap?: number | string;
-    labelGap?: number | string;
-    className?: string;
-    style?: Record<string, any>;
-  }>(),
-  {
-    value: 0,
-    size: "md",
-    color: "var(--blue, #3b82f6)",
-    trackColor: "var(--bd2, #e0e0e4)",
-    label: "",
-    showPercent: true,
-    animated: true,
-    rounded: true,
-    indeterminate: false,
-    speed: 1,
-    gap: 5,
-    labelGap: 2,
-    className: "",
-    style: () => ({}),
-  }
-);
-
-const base = computed(() => SIZES[props.size] || SIZES.md);
-const barHeight = computed(() => {
-  if (props.height != null) {
-    return typeof props.height === "number" ? `${props.height}px` : props.height;
-  }
-  if (props.customSize != null) {
-    return `${props.customSize}px`;
-  }
-  return `${base.value.height}px`;
-});
-
-const barHeightNum = computed(() => {
-  if (typeof props.height === "number") return props.height;
-  if (typeof props.height === "string" && props.height.endsWith("px")) {
-    return parseFloat(props.height) || base.value.height;
-  }
-  if (props.customSize != null) return props.customSize;
-  return base.value.height;
-});
-
-const fontSize = computed(() => {
-  if (props.customSize) {
-    return `${Math.max(11, props.customSize * 1.6)}px`;
-  }
-  return base.value.fontSize;
-});
-
-const pct = computed(() => Math.min(100, Math.max(0, props.value || 0)));
-const radius = computed(() => (props.rounded ? `${barHeightNum.value / 2}px` : "0px"));
-const transitionStyle = computed(() =>
-  props.animated ? "flex .5s cubic-bezier(0.4,0,0.2,1)" : "none"
-);
-
-const hasSegments = computed(
-  () => Array.isArray(props.segments) && props.segments.length > 0
-);
-const rawSum = computed(() =>
-  hasSegments.value
-    ? props.segments!.reduce((sum, s) => sum + (Number(s.value) || 0), 0)
-    : 0
-);
-
-const gapStyle = computed(() =>
-  typeof props.gap === "number" ? `${props.gap}px` : props.gap
-);
-const labelGapStyle = computed(() =>
-  typeof props.labelGap === "number" ? `${props.labelGap}px` : props.labelGap
-);
-
-const barRef = ref<HTMLElement | null>(null);
-let raf: number | null = null;
-
-const startIndeterminate = () => {
-  if (raf) cancelAnimationFrame(raf);
-  if (!props.indeterminate || !barRef.value) return;
-  let pos = -40;
-  let direction = 1;
-  let lastTime = performance.now();
-
-  function tick(now: number) {
-    const dt = (now - lastTime) / 16.67;
-    lastTime = now;
-    pos += direction * 1.2 * props.speed * dt;
-    if (pos > 100) {
-      pos = 100;
-      direction = -1;
-    }
-    if (pos < -40) {
-      pos = -40;
-      direction = 1;
-    }
-    if (barRef.value) {
-      barRef.value.style.left = pos + "%";
-      barRef.value.style.width = "40%";
-    }
-    raf = requestAnimationFrame(tick);
-  }
-  raf = requestAnimationFrame(tick);
-};
-
-onMounted(() => {
-  if (props.indeterminate) startIndeterminate();
-});
-
-watch(
-  () => [props.indeterminate, props.speed],
-  () => {
-    if (props.indeterminate) {
-      startIndeterminate();
-    } else if (raf) {
-      cancelAnimationFrame(raf);
-      raf = null;
-    }
-  }
-);
-
-onBeforeUnmount(() => {
-  if (raf) cancelAnimationFrame(raf);
-});
-</script>
-
-<template>
-  <div
-    :class="className"
-    :style="{
-      display: 'inline-flex',
-      flexDirection: 'column',
-      gap: labelGapStyle,
-      width: '100%',
-      ...style,
-    }"
-  >
-    <div
-      v-if="label || showPercent"
-      style="display: flex; justify-content: space-between; align-items: baseline"
-    >
-      <span
-        v-if="label"
-        :style="{
-          fontSize: fontSize,
-          fontWeight: 600,
-          color: 'var(--primary-text, #1a1a2e)',
-        }"
-      >
-        {{ label }}
-      </span>
-      <span
-        v-if="showPercent && !indeterminate && !hasSegments"
-        :style="{
-          fontSize: fontSize,
-          fontWeight: 600,
-          color: 'var(--muted, #9ca3af)',
-          fontVariantNumeric: 'tabular-nums',
-          marginLeft: label ? 0 : 'auto',
-        }"
-      >
-        {{ Math.round(pct) }}%
-      </span>
-    </div>
-
-    <div
-      :style="{
-        height: barHeight,
-        borderRadius: radius,
-        background: 'transparent',
-        position: 'relative',
-        display: 'flex',
-        gap: gapStyle,
-        overflow: 'hidden',
-      }"
-    >
-      <template v-if="indeterminate">
-        <div
-          :style="{
-            flex: 1,
-            borderRadius: radius,
-            background: trackColor,
-          }"
-        />
-        <div
-          ref="barRef"
-          :style="{
-            position: 'absolute',
-            top: 0,
-            height: '100%',
-            width: '40%',
-            borderRadius: radius,
-            background: color,
-            opacity: 0.85,
-          }"
-        />
-      </template>
-
-      <template v-else-if="hasSegments && rawSum > 0">
-        <template v-for="(seg, idx) in segments" :key="idx">
-          <div
-            v-if="Number(seg.value) > 0"
-            :title="seg.label ? `${seg.label}: ${seg.value}` : undefined"
-            :style="{
-              flex: (Number(seg.value) / rawSum) * 100,
-              height: '100%',
-              borderRadius: radius,
-              background: seg.color || color,
-              transition: transitionStyle,
-            }"
-          />
-        </template>
-      </template>
-
-      <template v-else>
-        <div
-          ref="barRef"
-          :style="{
-            flex: pct > 0 ? pct : 0,
-            minWidth: pct > 0 ? `${barHeightNum}px` : 0,
-            borderRadius: radius,
-            background: color,
-            transition: transitionStyle,
-          }"
-        />
-        <div
-          v-if="pct < 100"
-          :style="{
-            flex: 100 - pct,
-            borderRadius: radius,
-            background: trackColor,
-            transition: transitionStyle,
-          }"
-        />
-      </template>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
+
+const SIZES: Record<string, { height: number; fontSize: string }> = {
+  xs: { height: 4, fontSize: ".68rem" },
+  sm: { height: 5, fontSize: ".75rem" },
+  md: { height: 6, fontSize: ".82rem" },
+  lg: { height: 8, fontSize: ".9rem" },
+  xl: { height: 10, fontSize: "1rem" },
+};
+
+interface Segment {
+  value: number;
+  color?: string;
+  label?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: number;
+    segments?: Segment[];
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    customSize?: number;
+    color?: string;
+    trackColor?: string;
+    label?: string;
+    showPercent?: boolean;
+    animated?: boolean;
+    rounded?: boolean;
+    indeterminate?: boolean;
+    speed?: number;
+    height?: number | string;
+    gap?: number | string;
+    labelGap?: number | string;
+    className?: string;
+    style?: Record<string, any>;
+  }>(),
+  {
+    value: 0,
+    size: "md",
+    color: "var(--blue, #3b82f6)",
+    trackColor: "var(--bd2, #e0e0e4)",
+    label: "",
+    showPercent: true,
+    animated: true,
+    rounded: true,
+    indeterminate: false,
+    speed: 1,
+    gap: 5,
+    labelGap: 2,
+    className: "",
+    style: () => ({}),
+  }
+);
+
+const base = computed(() => SIZES[props.size] || SIZES.md);
+const barHeight = computed(() => {
+  if (props.height != null) {
+    return typeof props.height === "number" ? `${props.height}px` : props.height;
+  }
+  if (props.customSize != null) {
+    return `${props.customSize}px`;
+  }
+  return `${base.value.height}px`;
+});
+
+const barHeightNum = computed(() => {
+  if (typeof props.height === "number") return props.height;
+  if (typeof props.height === "string" && props.height.endsWith("px")) {
+    return parseFloat(props.height) || base.value.height;
+  }
+  if (props.customSize != null) return props.customSize;
+  return base.value.height;
+});
+
+const fontSize = computed(() => {
+  if (props.customSize) {
+    return `${Math.max(11, props.customSize * 1.6)}px`;
+  }
+  return base.value.fontSize;
+});
+
+const pct = computed(() => Math.min(100, Math.max(0, props.value || 0)));
+const radius = computed(() => (props.rounded ? `${barHeightNum.value / 2}px` : "0px"));
+const transitionStyle = computed(() =>
+  props.animated ? "flex .5s cubic-bezier(0.4,0,0.2,1)" : "none"
+);
+
+const hasSegments = computed(
+  () => Array.isArray(props.segments) && props.segments.length > 0
+);
+const rawSum = computed(() =>
+  hasSegments.value
+    ? props.segments!.reduce((sum, s) => sum + (Number(s.value) || 0), 0)
+    : 0
+);
+
+const gapStyle = computed(() =>
+  typeof props.gap === "number" ? `${props.gap}px` : props.gap
+);
+const labelGapStyle = computed(() =>
+  typeof props.labelGap === "number" ? `${props.labelGap}px` : props.labelGap
+);
+
+const barRef = ref<HTMLElement | null>(null);
+let raf: number | null = null;
+
+const startIndeterminate = () => {
+  if (raf) cancelAnimationFrame(raf);
+  if (!props.indeterminate || !barRef.value) return;
+  let pos = -40;
+  let direction = 1;
+  let lastTime = performance.now();
+
+  function tick(now: number) {
+    const dt = (now - lastTime) / 16.67;
+    lastTime = now;
+    pos += direction * 1.2 * props.speed * dt;
+    if (pos > 100) {
+      pos = 100;
+      direction = -1;
+    }
+    if (pos < -40) {
+      pos = -40;
+      direction = 1;
+    }
+    if (barRef.value) {
+      barRef.value.style.left = pos + "%";
+      barRef.value.style.width = "40%";
+    }
+    raf = requestAnimationFrame(tick);
+  }
+  raf = requestAnimationFrame(tick);
+};
+
+onMounted(() => {
+  if (props.indeterminate) startIndeterminate();
+});
+
+watch(
+  () => [props.indeterminate, props.speed],
+  () => {
+    if (props.indeterminate) {
+      startIndeterminate();
+    } else if (raf) {
+      cancelAnimationFrame(raf);
+      raf = null;
+    }
+  }
+);
+
+onBeforeUnmount(() => {
+  if (raf) cancelAnimationFrame(raf);
+});
+</script>
+
+<template>
+  <div
+    :class="className"
+    :style="{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      gap: labelGapStyle,
+      width: '100%',
+      ...style,
+    }"
+  >
+    <div
+      v-if="label || showPercent"
+      style="display: flex; justify-content: space-between; align-items: baseline"
+    >
+      <span
+        v-if="label"
+        :style="{
+          fontSize: fontSize,
+          fontWeight: 600,
+          color: 'var(--primary-text, #1a1a2e)',
+        }"
+      >
+        {{ label }}
+      </span>
+      <span
+        v-if="showPercent && !indeterminate && !hasSegments"
+        :style="{
+          fontSize: fontSize,
+          fontWeight: 600,
+          color: 'var(--muted, #9ca3af)',
+          fontVariantNumeric: 'tabular-nums',
+          marginLeft: label ? 0 : 'auto',
+        }"
+      >
+        {{ Math.round(pct) }}%
+      </span>
+    </div>
+
+    <div
+      :style="{
+        height: barHeight,
+        borderRadius: radius,
+        background: 'transparent',
+        position: 'relative',
+        display: 'flex',
+        gap: gapStyle,
+        overflow: 'hidden',
+      }"
+    >
+      <template v-if="indeterminate">
+        <div
+          :style="{
+            flex: 1,
+            borderRadius: radius,
+            background: trackColor,
+          }"
+        />
+        <div
+          ref="barRef"
+          :style="{
+            position: 'absolute',
+            top: 0,
+            height: '100%',
+            width: '40%',
+            borderRadius: radius,
+            background: color,
+            opacity: 0.85,
+          }"
+        />
+      </template>
+
+      <template v-else-if="hasSegments && rawSum > 0">
+        <template v-for="(seg, idx) in segments" :key="idx">
+          <div
+            v-if="Number(seg.value) > 0"
+            :title="seg.label ? `${seg.label}: ${seg.value}` : undefined"
+            :style="{
+              flex: (Number(seg.value) / rawSum) * 100,
+              height: '100%',
+              borderRadius: radius,
+              background: seg.color || color,
+              transition: transitionStyle,
+            }"
+          />
+        </template>
+      </template>
+
+      <template v-else>
+        <div
+          ref="barRef"
+          :style="{
+            flex: pct > 0 ? pct : 0,
+            minWidth: pct > 0 ? `${barHeightNum}px` : 0,
+            borderRadius: radius,
+            background: color,
+            transition: transitionStyle,
+          }"
+        />
+        <div
+          v-if="pct < 100"
+          :style="{
+            flex: 100 - pct,
+            borderRadius: radius,
+            background: trackColor,
+            transition: transitionStyle,
+          }"
+        />
+      </template>
+    </div>
+  </div>
+</template>