cynx-lib 1.3.68 → 1.3.70

package/vue/components/InfoBadge.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+export interface InfoBadgeItem {
+  id?: string | number;
+  key?: string | number;
+  icon?: any;
+  label?: string | number;
+  value?: string | number;
+  color?: string;
+  title?: string;
+  dot?: boolean;
+  onClick?: (e: MouseEvent) => void;
+}
+
+const SIZES: Record<string, any> = {
+  xs: {
+    height: "24px",
+    padding: "0 8px",
+    fontSize: "10px",
+    iconSize: 12,
+    dotSize: ".65rem",
+    sepHeight: "10px",
+    gap: "6px",
+    borderRadius: "var(--radxs, 6px)",
+  },
+  sm: {
+    height: "28px",
+    padding: "0 10px",
+    fontSize: "11px",
+    iconSize: 13,
+    dotSize: ".7rem",
+    sepHeight: "12px",
+    gap: "8px",
+    borderRadius: "var(--rads, 8px)",
+  },
+  md: {
+    height: "32px",
+    padding: "0 12px",
+    fontSize: "12px",
+    iconSize: 14,
+    dotSize: ".75rem",
+    sepHeight: "14px",
+    gap: "10px",
+    borderRadius: "var(--rad, 10px)",
+  },
+  lg: {
+    height: "36px",
+    padding: "0 14px",
+    fontSize: "13px",
+    iconSize: 16,
+    dotSize: ".8rem",
+    sepHeight: "16px",
+    gap: "12px",
+    borderRadius: "var(--rad, 10px)",
+  },
+};
+
+const VARIANTS: Record<string, any> = {
+  default: {
+    background: "var(--surface, #ffffff)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
+  },
+  surface: {
+    background: "var(--surface, #ffffff)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
+  },
+  flat: {
+    background: "var(--grey-1, #f5f5f8)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "none",
+  },
+  ghost: {
+    background: "transparent",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "none",
+  },
+};
+
+const props = withDefaults(
+  defineProps<{
+    items?: InfoBadgeItem[];
+    icon?: any;
+    label?: string | number;
+    value?: string | number;
+    color?: string;
+    title?: string;
+    dot?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "default" | "surface" | "flat" | "ghost";
+  }>(),
+  {
+    items: undefined,
+    icon: undefined,
+    label: undefined,
+    value: undefined,
+    color: undefined,
+    title: undefined,
+    dot: true,
+    size: "sm",
+    variant: "default",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const slots = useSlots();
+const sz = computed(() => SIZES[props.size] || SIZES.sm);
+const vr = computed(() => VARIANTS[props.variant] || VARIANTS.default);
+
+const resolvedItems = computed<InfoBadgeItem[]>(() => {
+  if (Array.isArray(props.items) && props.items.length > 0) {
+    return props.items;
+  }
+  if (props.icon != null || props.value != null || props.label != null) {
+    return [
+      {
+        icon: props.icon,
+        label: props.label,
+        value: props.value,
+        color: props.color,
+        title: props.title,
+      },
+    ];
+  }
+  return [];
+});
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center box-border select-none"
+    :style="{
+      height: sz.height,
+      padding: sz.padding,
+      borderRadius: sz.borderRadius,
+      background: vr.background,
+      border: vr.border,
+      boxShadow: vr.boxShadow,
+      gap: sz.gap,
+    }"
+    :title="title"
+    @click="(e) => emit('click', e)"
+  >
+    <slot v-if="slots.default" />
+    <template v-else>
+      <template v-for="(it, idx) in resolvedItems" :key="it.id || it.key || idx">
+        <div
+          v-if="idx > 0"
+          :style="{
+            width: '1px',
+            height: sz.sepHeight,
+            background: 'var(--border, #d7d8e0)',
+            flexShrink: 0,
+          }"
+        />
+        <div
+          class="inline-flex items-center"
+          :style="{
+            gap: '5px',
+            cursor: it.onClick ? 'pointer' : 'inherit',
+          }"
+          :title="it.title"
+          @click="it.onClick"
+        >
+          <span
+            v-if="it.icon"
+            class="inline-flex items-center justify-center flex-shrink-0"
+            :style="{
+              color: it.color || 'inherit',
+            }"
+          >
+            <component
+              :is="it.icon"
+              v-if="typeof it.icon === 'object' || typeof it.icon === 'function'"
+              :size="sz.iconSize"
+            />
+            <template v-else>{{ it.icon }}</template>
+          </span>
+
+          <span
+            v-if="it.label !== undefined && it.label !== null"
+            :style="{
+              fontSize: sz.fontSize,
+              fontWeight: 600,
+              color: (it.color && it.color !== 'inherit') ? it.color : 'var(--primary-text, #0f111c)',
+            }"
+          >
+            {{ it.label }}
+          </span>
+
+          <span
+            v-if="(it.dot !== undefined ? it.dot : dot) && (it.icon || it.label) && it.value !== undefined && it.value !== null"
+            :style="{
+              fontSize: sz.dotSize,
+              color: 'var(--muted, #9b9daa)',
+              lineHeight: 1,
+            }"
+          >
+            •
+          </span>
+
+          <span
+            v-if="it.value !== undefined && it.value !== null"
+            :style="{
+              fontSize: sz.fontSize,
+              fontWeight: 600,
+              color: 'var(--primary-text, #0f111c)',
+              fontVariantNumeric: 'tabular-nums',
+              lineHeight: 1,
+            }"
+          >
+            {{ it.value }}
+          </span>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

package/vue/components/LinearProgress.vue

@@ -0,0 +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>

package/vue/components/Sidebar.vue

@@ -715,7 +715,7 @@ const handleItemClick = (item, event) => {
 
 .cynx-sidebar__brand-subtitle {
   font-size: 0.64rem;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .cynx-sidebar__toggle-btn {
@@ -821,7 +821,7 @@ const handleItemClick = (item, event) => {
   align-items: center;
   border-radius: var(--rads, 8px);
   font-size: 0.82rem;
-  font-weight: 500;
+  font-weight: 600;
   border: none;
   text-decoration: none;
   cursor: pointer;
@@ -868,7 +868,8 @@ const handleItemClick = (item, event) => {
   font-size: 0.68rem;
   padding: 1px 6px;
   border-radius: var(--radxs, 4px);
-  font-family: var(--mono, monospace);
+  font-family: var(--sans, inherit);
+  font-weight: 600;
   background: var(--grey-1, #fafafa);
   color: var(--muted, #71717a);
   border: 1px solid var(--border-light, #f4f4f5);

package/vue/components/StatusTag.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const STATUS_COLORS: Record<string, string> = {
+  DR: "var(--drive, #28C76F)",
+  SB: "var(--break, #FFB200)",
+  ON: "var(--shift, #0F60FF)",
+  OFF: "#8B909A",
+  PC: "#8B909A",
+  YM: "var(--shift, #0F60FF)",
+};
+
+const props = withDefaults(
+  defineProps<{
+    status?: string | null;
+    color?: string;
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+  }>(),
+  {
+    status: "",
+    width: 36,
+    height: 20,
+    radius: 6,
+  }
+);
+
+const isPrimaryStatus = computed(() => {
+  if (props.color) return true;
+  const key = (props.status || "").toUpperCase().trim();
+  return Boolean(STATUS_COLORS[key]);
+});
+
+const bg = computed(() => {
+  if (props.color) return props.color;
+  const key = (props.status || "").toUpperCase().trim();
+  return STATUS_COLORS[key] || "transparent";
+});
+
+const boxWidth = computed(() =>
+  typeof props.width === "number" ? `${props.width}px` : props.width
+);
+const boxHeight = computed(() =>
+  typeof props.height === "number" ? `${props.height}px` : props.height
+);
+const borderRadius = computed(() =>
+  typeof props.radius === "number" ? `${props.radius}px` : props.radius
+);
+</script>
+
+<template>
+  <span
+    v-if="status && isPrimaryStatus"
+    class="inline-flex items-center justify-center text-[11px] font-bold text-white tracking-wide select-none shadow-sm flex-shrink-0"
+    :style="{
+      width: boxWidth,
+      height: boxHeight,
+      borderRadius: borderRadius,
+      backgroundColor: bg,
+    }"
+  >
+    {{ status }}
+  </span>
+  <span
+    v-else-if="status"
+    class="text-[12px] font-semibold text-[var(--primary-text,inherit)] select-none truncate"
+  >
+    {{ status }}
+  </span>
+  <span v-else class="text-slate-400 select-none">-</span>
+</template>

package/vue/index.d.ts

@@ -51,7 +51,13 @@ export declare const Table: DefineComponent<any, any, any>;
 export declare const Pagination: DefineComponent<any, any, any>;
 export declare const Skeleton: DefineComponent<any, any, any>;
 export declare const Modal: DefineComponent<any, any, any>;
+export declare const Drawer: DefineComponent<any, any, any>;
 export declare const Toggle: DefineComponent<any, any, any>;
+export declare const DatePicker: DefineComponent<any, any, any>;
+export declare const LinearProgress: DefineComponent<any, any, any>;
+export declare const CircularProgress: DefineComponent<any, any, any>;
+export declare const StatusTag: DefineComponent<any, any, any>;
+export declare const InfoBadge: DefineComponent<any, any, any>;
 export declare const XTable: DefineComponent<any, any, any>;
 export declare const XThead: DefineComponent<any, any, any>;
 export declare const XTbody: DefineComponent<any, any, any>;

package/vue/index.js

@@ -14,6 +14,10 @@ import Modal from "./components/Modal.vue";
 import Drawer from "./components/Drawer.vue";
 import Toggle from "./components/Toggle.vue";
 import DatePicker from "./components/DatePicker.vue";
+import LinearProgress from "./components/LinearProgress.vue";
+import CircularProgress from "./components/CircularProgress.vue";
+import StatusTag from "./components/StatusTag.vue";
+import InfoBadge from "./components/InfoBadge.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -33,6 +37,10 @@ export {
   Drawer,
   Toggle,
   DatePicker,
+  LinearProgress,
+  CircularProgress,
+  StatusTag,
+  InfoBadge,
   XTable,
   XThead,
   XTbody,
@@ -58,6 +66,10 @@ export default {
   Drawer,
   Toggle,
   DatePicker,
+  LinearProgress,
+  CircularProgress,
+  StatusTag,
+  InfoBadge,
   XTable,
   XThead,
   XTbody,