cynx-lib 1.3.84 → 1.3.85

package/vue/components/StatusTag.vue

@@ -1,89 +1,89 @@
-<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: "var(--muted, #8B909A)",
-  PC: "var(--muted, #8B909A)",
-  YM: "var(--shift, #0F60FF)",
-};
-
-const props = withDefaults(
-  defineProps<{
-    status?: string | null;
-    color?: string;
-    width?: number | string;
-    height?: number | string;
-    radius?: number | string;
-    plain?: boolean;
-  }>(),
-  {
-    status: "",
-    width: 36,
-    height: 20,
-    radius: 6,
-    plain: false,
-  }
-);
-
-const normalizedKey = computed(() =>
-  (props.status || "").replace(/\s+/g, "_").toUpperCase().trim()
-);
-
-const isPrimaryStatus = computed(() => {
-  if (props.color) return true;
-  return Boolean(STATUS_COLORS[normalizedKey.value]);
-});
-
-const statusColor = computed(() => {
-  if (props.color) return props.color;
-  return STATUS_COLORS[normalizedKey.value] || "var(--muted, #8B909A)";
-});
-
-const isShortStatus = computed(() => (props.status || "").trim().length <= 3);
-
-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 && plain"
-    class="inline-flex items-center text-[11.5px] font-bold select-none whitespace-nowrap tracking-wide"
-    :style="{
-      color: statusColor,
-    }"
-  >
-    {{ status }}
-  </span>
-  <span
-    v-else-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: isShortStatus ? boxWidth : 'auto',
-      minWidth: boxWidth,
-      padding: isShortStatus ? '0' : '0 6px',
-      height: boxHeight,
-      borderRadius: borderRadius,
-      backgroundColor: statusColor,
-    }"
-  >
-    {{ status }}
-  </span>
-  <span
-    v-else-if="status"
-    class="text-[12px] font-semibold text-[var(--muted,#8B909A)] select-none truncate"
-  >
-    {{ status }}
-  </span>
-  <span v-else class="text-slate-400 select-none">-</span>
-</template>
+<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: "var(--muted, #8B909A)",
+  PC: "var(--muted, #8B909A)",
+  YM: "var(--shift, #0F60FF)",
+};
+
+const props = withDefaults(
+  defineProps<{
+    status?: string | null;
+    color?: string;
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+    plain?: boolean;
+  }>(),
+  {
+    status: "",
+    width: 36,
+    height: 20,
+    radius: 6,
+    plain: false,
+  }
+);
+
+const normalizedKey = computed(() =>
+  (props.status || "").replace(/\s+/g, "_").toUpperCase().trim()
+);
+
+const isPrimaryStatus = computed(() => {
+  if (props.color) return true;
+  return Boolean(STATUS_COLORS[normalizedKey.value]);
+});
+
+const statusColor = computed(() => {
+  if (props.color) return props.color;
+  return STATUS_COLORS[normalizedKey.value] || "var(--muted, #8B909A)";
+});
+
+const isShortStatus = computed(() => (props.status || "").trim().length <= 3);
+
+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 && plain"
+    class="inline-flex items-center text-[11.5px] font-bold select-none whitespace-nowrap tracking-wide"
+    :style="{
+      color: statusColor,
+    }"
+  >
+    {{ status }}
+  </span>
+  <span
+    v-else-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: isShortStatus ? boxWidth : 'auto',
+      minWidth: boxWidth,
+      padding: isShortStatus ? '0' : '0 6px',
+      height: boxHeight,
+      borderRadius: borderRadius,
+      backgroundColor: statusColor,
+    }"
+  >
+    {{ status }}
+  </span>
+  <span
+    v-else-if="status"
+    class="text-[12px] font-semibold text-[var(--muted,#8B909A)] select-none truncate"
+  >
+    {{ status }}
+  </span>
+  <span v-else class="text-slate-400 select-none">-</span>
+</template>

package/vue/components/TabBar.vue

@@ -1,176 +1,176 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, nextTick } from "vue";
-
-export interface TabItem {
-  id: string | number;
-  label?: string;
-  name?: string;
-  icon?: any;
-  badge?: string;
-  count?: number;
-  disabled?: boolean;
-}
-
-const props = withDefaults(
-  defineProps<{
-    tabs: TabItem[];
-    modelValue?: string | number;
-    active?: string | number;
-    variant?: "underline" | "pill";
-    padding?: string;
-    capitalize?: boolean;
-  }>(),
-  {
-    variant: "underline",
-    capitalize: false,
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | number): void;
-  (e: "change", value: string | number): void;
-  (e: "tab-click", tab: TabItem): void;
-}>();
-
-const barRef = ref<HTMLElement | null>(null);
-const indRef = ref<HTMLElement | null>(null);
-const currentActive = ref(props.modelValue ?? props.active ?? props.tabs?.[0]?.id);
-
-function updateIndicator() {
-  if (props.variant !== "underline") return;
-  nextTick(() => {
-    const bar = barRef.value;
-    const ind = indRef.value;
-    if (!bar || !ind) return;
-
-    const targetId = String(currentActive.value ?? "");
-    const activeBtn =
-      (bar.querySelector(`[data-tabid="${targetId}"]`) as HTMLElement) ||
-      (bar.querySelector(`[data-active="true"]`) as HTMLElement);
-
-    if (!activeBtn) return;
-
-    const barRect = bar.getBoundingClientRect();
-    const btnRect = activeBtn.getBoundingClientRect();
-    const x = btnRect.left - barRect.left;
-    const w = btnRect.width;
-
-    if (w > 0) {
-      ind.style.width = `${w}px`;
-      ind.style.transform = `translateX(${x}px)`;
-      ind.style.opacity = "1";
-    }
-  });
-}
-
-watch(
-  () => [props.modelValue, props.active, props.tabs],
-  ([newM, newA]) => {
-    if (newM !== undefined && newM !== null) currentActive.value = newM;
-    else if (newA !== undefined && newA !== null) currentActive.value = newA;
-    else if (props.tabs?.length && (currentActive.value === undefined || currentActive.value === null)) {
-      currentActive.value = props.tabs[0]?.id;
-    }
-    updateIndicator();
-  },
-  { deep: true, immediate: true }
-);
-
-onMounted(() => {
-  updateIndicator();
-  nextTick(() => {
-    requestAnimationFrame(updateIndicator);
-    setTimeout(updateIndicator, 50);
-    setTimeout(updateIndicator, 200);
-  });
-  window.addEventListener("resize", updateIndicator);
-});
-
-const selectTab = (tab: TabItem) => {
-  if (tab.disabled) return;
-  currentActive.value = tab.id;
-  emit("update:modelValue", tab.id);
-  emit("change", tab.id);
-  emit("tab-click", tab);
-  updateIndicator();
-};
-</script>
-
-<template>
-  <div
-    ref="barRef"
-    :class="[
-      'relative flex items-center',
-      variant === 'underline' ? 'overflow-visible' : 'gap-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-md'
-    ]"
-  >
-    <!-- Underline Indicator (cynx-lib smooth bezier) -->
-    <div
-      v-if="variant === 'underline'"
-      ref="indRef"
-      class="pointer-events-none z-[2]"
-      style="
-        position: absolute;
-        bottom: -1px;
-        left: 0;
-        height: 2px;
-        width: 0px;
-        opacity: 0;
-        background: var(--accent, #12675D);
-        border-radius: 2px 2px 0 0;
-        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
-      "
-    />
-
-    <!-- Tab Items -->
-    <button
-      v-for="t in tabs"
-      :key="t.id"
-      type="button"
-      :data-tabid="t.id"
-      :data-active="String(currentActive) === String(t.id)"
-      :disabled="t.disabled"
-      :class="[
-        'inline-flex items-center gap-2 text-xs font-semibold whitespace-nowrap transition-colors relative z-[1] select-none',
-        String(currentActive) === String(t.id)
-          ? 'text-[#12675D] dark:text-teal-400 font-bold'
-          : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white font-medium',
-        t.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
-      ]"
-      :style="{
-        padding: padding || (variant === 'underline' ? '10px 16px' : '6px 12px'),
-        border: 'none',
-        background: 'none',
-        textTransform: capitalize ? 'capitalize' : 'none',
-      }"
-      @click="selectTab(t)"
-    >
-      <slot name="tab" :tab="t" :is-active="String(currentActive) === String(t.id)">
-        <component
-          :is="t.icon"
-          v-if="t.icon"
-          class="h-4 w-4"
-          :class="String(currentActive) === String(t.id) ? 'text-[#12675D] dark:text-teal-400' : 'text-slate-400'"
-        />
-        <span>{{ t.label || t.name || t.id }}</span>
-        <span
-          v-if="t.badge"
-          class="px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-[#12675D] text-white leading-none"
-        >
-          {{ t.badge }}
-        </span>
-        <span
-          v-if="t.count != null && t.count > 0"
-          :class="[
-            'px-1.5 py-0.5 rounded-full text-[10px] font-bold leading-none',
-            String(currentActive) === String(t.id)
-              ? 'bg-[#12675D]/10 text-[#12675D]'
-              : 'bg-slate-100 text-slate-500'
-          ]"
-        >
-          {{ t.count }}
-        </span>
-      </slot>
-    </button>
-  </div>
-</template>
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from "vue";
+
+export interface TabItem {
+  id: string | number;
+  label?: string;
+  name?: string;
+  icon?: any;
+  badge?: string;
+  count?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    tabs: TabItem[];
+    modelValue?: string | number;
+    active?: string | number;
+    variant?: "underline" | "pill";
+    padding?: string;
+    capitalize?: boolean;
+  }>(),
+  {
+    variant: "underline",
+    capitalize: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void;
+  (e: "change", value: string | number): void;
+  (e: "tab-click", tab: TabItem): void;
+}>();
+
+const barRef = ref<HTMLElement | null>(null);
+const indRef = ref<HTMLElement | null>(null);
+const currentActive = ref(props.modelValue ?? props.active ?? props.tabs?.[0]?.id);
+
+function updateIndicator() {
+  if (props.variant !== "underline") return;
+  nextTick(() => {
+    const bar = barRef.value;
+    const ind = indRef.value;
+    if (!bar || !ind) return;
+
+    const targetId = String(currentActive.value ?? "");
+    const activeBtn =
+      (bar.querySelector(`[data-tabid="${targetId}"]`) as HTMLElement) ||
+      (bar.querySelector(`[data-active="true"]`) as HTMLElement);
+
+    if (!activeBtn) return;
+
+    const barRect = bar.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    const x = btnRect.left - barRect.left;
+    const w = btnRect.width;
+
+    if (w > 0) {
+      ind.style.width = `${w}px`;
+      ind.style.transform = `translateX(${x}px)`;
+      ind.style.opacity = "1";
+    }
+  });
+}
+
+watch(
+  () => [props.modelValue, props.active, props.tabs],
+  ([newM, newA]) => {
+    if (newM !== undefined && newM !== null) currentActive.value = newM;
+    else if (newA !== undefined && newA !== null) currentActive.value = newA;
+    else if (props.tabs?.length && (currentActive.value === undefined || currentActive.value === null)) {
+      currentActive.value = props.tabs[0]?.id;
+    }
+    updateIndicator();
+  },
+  { deep: true, immediate: true }
+);
+
+onMounted(() => {
+  updateIndicator();
+  nextTick(() => {
+    requestAnimationFrame(updateIndicator);
+    setTimeout(updateIndicator, 50);
+    setTimeout(updateIndicator, 200);
+  });
+  window.addEventListener("resize", updateIndicator);
+});
+
+const selectTab = (tab: TabItem) => {
+  if (tab.disabled) return;
+  currentActive.value = tab.id;
+  emit("update:modelValue", tab.id);
+  emit("change", tab.id);
+  emit("tab-click", tab);
+  updateIndicator();
+};
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    :class="[
+      'relative flex items-center',
+      variant === 'underline' ? 'overflow-visible' : 'gap-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-md'
+    ]"
+  >
+    <!-- Underline Indicator (cynx-lib smooth bezier) -->
+    <div
+      v-if="variant === 'underline'"
+      ref="indRef"
+      class="pointer-events-none z-[2]"
+      style="
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        height: 2px;
+        width: 0px;
+        opacity: 0;
+        background: var(--accent, #12675D);
+        border-radius: 2px 2px 0 0;
+        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
+      "
+    />
+
+    <!-- Tab Items -->
+    <button
+      v-for="t in tabs"
+      :key="t.id"
+      type="button"
+      :data-tabid="t.id"
+      :data-active="String(currentActive) === String(t.id)"
+      :disabled="t.disabled"
+      :class="[
+        'inline-flex items-center gap-2 text-xs font-semibold whitespace-nowrap transition-colors relative z-[1] select-none',
+        String(currentActive) === String(t.id)
+          ? 'text-[#12675D] dark:text-teal-400 font-bold'
+          : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white font-medium',
+        t.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
+      ]"
+      :style="{
+        padding: padding || (variant === 'underline' ? '10px 16px' : '6px 12px'),
+        border: 'none',
+        background: 'none',
+        textTransform: capitalize ? 'capitalize' : 'none',
+      }"
+      @click="selectTab(t)"
+    >
+      <slot name="tab" :tab="t" :is-active="String(currentActive) === String(t.id)">
+        <component
+          :is="t.icon"
+          v-if="t.icon"
+          class="h-4 w-4"
+          :class="String(currentActive) === String(t.id) ? 'text-[#12675D] dark:text-teal-400' : 'text-slate-400'"
+        />
+        <span>{{ t.label || t.name || t.id }}</span>
+        <span
+          v-if="t.badge"
+          class="px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-[#12675D] text-white leading-none"
+        >
+          {{ t.badge }}
+        </span>
+        <span
+          v-if="t.count != null && t.count > 0"
+          :class="[
+            'px-1.5 py-0.5 rounded-full text-[10px] font-bold leading-none',
+            String(currentActive) === String(t.id)
+              ? 'bg-[#12675D]/10 text-[#12675D]'
+              : 'bg-slate-100 text-slate-500'
+          ]"
+        >
+          {{ t.count }}
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>