cynx-lib 1.3.50 → 1.3.52

package/vue/components/Table.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+  ChevronUp,
+  ChevronDown,
+  ArrowUpDown,
+  FileText,
+} from "lucide-vue-next";
+import Skeleton from "./Skeleton.vue";
+import { useAutoSkeletonRows } from "../composables/useAutoSkeletonRows";
+
+export interface TableColumn {
+  key: string;
+  title?: string;
+  label?: string;
+  width?: string | number;
+  minWidth?: string | number;
+  align?: "left" | "center" | "right";
+  sortable?: boolean;
+  fixed?: "left" | "right" | boolean;
+  headerClass?: string;
+  cellClass?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns?: TableColumn[];
+    data?: any[];
+    loading?: boolean;
+    rowKey?: string | ((row: any) => string | number);
+    sortBy?: string;
+    sortOrder?: "asc" | "desc" | string;
+    emptyText?: string;
+    height?: string | number;
+    hoverable?: boolean;
+    striped?: boolean;
+    bordered?: boolean;
+    skeletonRows?: number;
+    autoSkeleton?: boolean;
+    rowHeight?: number;
+  }>(),
+  {
+    columns: () => [],
+    data: () => [],
+    loading: false,
+    rowKey: "id",
+    sortBy: "",
+    sortOrder: "",
+    emptyText: "No data available",
+    hoverable: true,
+    striped: false,
+    bordered: true,
+    skeletonRows: undefined,
+    autoSkeleton: true,
+    rowHeight: 51,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "row-click", row: any, event: MouseEvent): void;
+  (e: "sort-change", payload: { key: string; order: "asc" | "desc" | null }): void;
+}>();
+
+const rootRef = ref<HTMLElement | null>(null);
+const headerScrollRef = ref<HTMLElement | null>(null);
+const bodyScrollRef = ref<HTMLElement | null>(null);
+
+const handleBodyScroll = () => {
+  if (headerScrollRef.value && bodyScrollRef.value) {
+    headerScrollRef.value.scrollLeft = bodyScrollRef.value.scrollLeft;
+  }
+};
+
+const { rows: autoRows } = useAutoSkeletonRows(rootRef, {
+  rowHeight: props.rowHeight,
+  bottomBuffer: 72,
+});
+
+const skeletonCount = computed(() => {
+  if (props.skeletonRows && props.skeletonRows > 0) return props.skeletonRows;
+  if (props.autoSkeleton) return autoRows.value;
+  return 10;
+});
+
+const getRowKey = (row: any, index: number) => {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row[props.rowKey] !== undefined) return row[props.rowKey];
+  return index;
+};
+
+const handleSort = (col: TableColumn) => {
+  if (!col.sortable) return;
+  const isCurrent = props.sortBy === col.key;
+  let nextOrder: "asc" | "desc" | null = "asc";
+
+  if (isCurrent) {
+    if (props.sortOrder === "asc") nextOrder = "desc";
+    else if (props.sortOrder === "desc") nextOrder = null;
+    else nextOrder = "asc";
+  }
+
+  emit("sort-change", { key: col.key, order: nextOrder });
+};
+
+const formatWidth = (val?: string | number) => {
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "number") return `${val}px`;
+  return val;
+};
+
+const titleWidths = ["68%", "82%", "55%", "75%", "62%", "88%", "70%", "64%"];
+const textWidths = ["80%", "65%", "88%", "72%", "58%", "84%", "62%", "76%"];
+const codeWidths = ["50%", "62%", "45%", "58%", "52%", "60%"];
+
+const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
+  if (key === "title" || cIdx === 0) {
+    return titleWidths[(rIdx + cIdx) % titleWidths.length];
+  }
+  if (key === "usdot" || key === "phone" || key === "id") {
+    return codeWidths[(rIdx + cIdx) % codeWidths.length];
+  }
+  return textWidths[(rIdx + cIdx) % textWidths.length];
+};
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="w-full flex flex-col overflow-hidden transition-colors"
+    :class="[
+      bordered ? 'border border-slate-200 dark:border-slate-800' : '',
+      'bg-white dark:bg-[#141629]'
+    ]"
+    :style="height ? { height: formatWidth(height) } : undefined"
+  >
+    <!-- Separate Dedicated Fixed Header Container -->
+    <div
+      ref="headerScrollRef"
+      class="w-full overflow-hidden flex-shrink-0 border-b border-slate-200 dark:border-slate-800 bg-[#f8fafc] dark:bg-[#16192e]"
+    >
+      <table class="w-full border-collapse text-left text-xs table-fixed">
+        <colgroup>
+          <col
+            v-for="col in columns"
+            :key="`h-col-${col.key}`"
+            :style="{
+              width: formatWidth(col.width),
+              minWidth: formatWidth(col.minWidth || col.width || 100),
+            }"
+          />
+        </colgroup>
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              :style="{
+                width: formatWidth(col.width),
+                minWidth: formatWidth(col.minWidth || col.width || 100),
+                textAlign: col.align || 'left',
+              }"
+              :class="[
+                'px-4 py-3 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors',
+                col.sortable ? 'cursor-pointer hover:text-slate-900 dark:hover:text-white' : '',
+                col.headerClass || ''
+              ]"
+              @click="handleSort(col)"
+            >
+              <div
+                class="flex items-center gap-1.5"
+                :class="{
+                  'justify-start': !col.align || col.align === 'left',
+                  'justify-center': col.align === 'center',
+                  'justify-end': col.align === 'right',
+                }"
+              >
+                <slot :name="`header-${col.key}`" :column="col">
+                  <span>{{ col.title || col.label || col.key }}</span>
+                </slot>
+
+                <!-- Sort indicator icon -->
+                <span v-if="col.sortable" class="inline-flex items-center text-slate-400">
+                  <ChevronUp
+                    v-if="sortBy === col.key && sortOrder === 'asc'"
+                    :size="13"
+                    class="text-[#12675D] dark:text-teal-400"
+                  />
+                  <ChevronDown
+                    v-else-if="sortBy === col.key && sortOrder === 'desc'"
+                    :size="13"
+                    class="text-[#12675D] dark:text-teal-400"
+                  />
+                  <ArrowUpDown
+                    v-else
+                    :size="11"
+                    class="opacity-40 hover:opacity-100 transition-opacity"
+                  />
+                </span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+
+    <!-- Scrollable Body Container -->
+    <div
+      ref="bodyScrollRef"
+      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
+      @scroll="handleBodyScroll"
+    >
+      <table class="w-full border-collapse text-left text-xs table-fixed">
+        <colgroup>
+          <col
+            v-for="col in columns"
+            :key="`b-col-${col.key}`"
+            :style="{
+              width: formatWidth(col.width),
+              minWidth: formatWidth(col.minWidth || col.width || 100),
+            }"
+          />
+        </colgroup>
+        <tbody class="divide-y divide-slate-100 dark:divide-slate-800/80">
+          <!-- Loading State (Content-Aware Professional Shimmer) -->
+          <template v-if="loading">
+            <tr
+              v-for="i in skeletonCount"
+              :key="`sk-${i}`"
+              :style="{ height: `${rowHeight}px` }"
+            >
+              <td
+                v-for="(col, cIdx) in columns"
+                :key="`sk-c-${col.key}`"
+                :style="{
+                  textAlign: col.align || 'left',
+                  height: `${rowHeight}px`,
+                }"
+                class="px-4 py-3 align-middle"
+              >
+                <!-- Action button skeleton -->
+                <div v-if="col.key === 'actions'" class="flex items-center justify-center">
+                  <Skeleton :width="28" :height="28" :radius="6" />
+                </div>
+
+                <!-- Centered badge skeleton -->
+                <div v-else-if="col.align === 'center'" class="flex items-center justify-center">
+                  <Skeleton :width="44" :height="20" :radius="10" />
+                </div>
+
+                <!-- Text / Column skeleton -->
+                <Skeleton
+                  v-else
+                  :width="getSkeletonWidth(i, cIdx, col.key)"
+                  :height="col.key === 'title' || cIdx === 0 ? 16 : 14"
+                  :radius="4"
+                />
+              </td>
+            </tr>
+          </template>
+
+          <!-- Empty State -->
+          <tr v-else-if="!data || data.length === 0">
+            <td :colspan="columns.length || 1" class="py-16 text-center text-slate-400 dark:text-slate-500">
+              <slot name="empty">
+                <div class="flex flex-col items-center justify-center gap-2">
+                  <FileText :size="32" class="opacity-30" />
+                  <span class="text-xs">{{ emptyText }}</span>
+                </div>
+              </slot>
+            </td>
+          </tr>
+
+          <!-- Data Rows -->
+          <template v-else>
+            <tr
+              v-for="(row, rIdx) in data"
+              :key="getRowKey(row, rIdx)"
+              :style="{ height: `${rowHeight}px` }"
+              :class="[
+                'transition-colors duration-100',
+                hoverable ? 'hover:bg-slate-50/80 dark:hover:bg-slate-800/50 cursor-pointer' : '',
+                striped && rIdx % 2 === 1 ? 'bg-slate-50/40 dark:bg-slate-900/30' : '',
+              ]"
+              @click="emit('row-click', row, $event)"
+            >
+              <td
+                v-for="col in columns"
+                :key="col.key"
+                :style="{
+                  textAlign: col.align || 'left',
+                  height: `${rowHeight}px`,
+                }"
+                :class="[
+                  'px-4 py-3 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
+                  col.cellClass || ''
+                ]"
+              >
+                <!-- Dedicated Column Cell Slot (e.g. #cell-title, #cell-actions) or default slot -->
+                <slot
+                  :name="`cell-${col.key}`"
+                  :row="row"
+                  :column="col"
+                  :index="rIdx"
+                  :value="row[col.key]"
+                >
+                  <slot
+                    :name="col.key"
+                    :row="row"
+                    :column="col"
+                    :index="rIdx"
+                    :value="row[col.key]"
+                  >
+                    <span>{{ row[col.key] != null && row[col.key] !== '' ? row[col.key] : '-' }}</span>
+                  </slot>
+                </slot>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/vue/components/XTable.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import { defineComponent, h } from "vue";
+
+export const XTable = defineComponent({
+  name: "XTable",
+  props: {
+    style: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            tableLayout: "fixed",
+            fontSize: ".8rem",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XThead = defineComponent({
+  name: "XThead",
+  setup(_, { slots }) {
+    return () => h("thead", null, slots.default?.());
+  },
+});
+
+export const XTbody = defineComponent({
+  name: "XTbody",
+  setup(_, { slots }) {
+    return () => h("tbody", null, slots.default?.());
+  },
+});
+
+export const XTr = defineComponent({
+  name: "XTr",
+  props: {
+    style: { type: Object, default: () => ({}) },
+    onClick: { type: Function, default: undefined },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "tr",
+        {
+          onClick: props.onClick,
+          style: {
+            borderBottom: "1px solid var(--border-light, #ebebf0)",
+            transition: "background .12s",
+            cursor: props.onClick ? "pointer" : undefined,
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XTh = defineComponent({
+  name: "XTh",
+  props: {
+    style: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "th",
+        {
+          style: {
+            textAlign: "left",
+            padding: "8px 12px",
+            fontSize: ".68rem",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: ".06em",
+            color: "var(--muted, #9b9daa)",
+            borderBottom: "1px solid var(--border-light, #ebebf0)",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XTd = defineComponent({
+  name: "XTd",
+  props: {
+    style: { type: Object, default: () => ({}) },
+    colSpan: { type: Number, default: undefined },
+    className: { type: String, default: "" },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "td",
+        {
+          colSpan: props.colSpan,
+          class: props.className,
+          style: {
+            padding: "9px 12px",
+            verticalAlign: "middle",
+            color: "var(--primary-text, #0f111c)",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export default XTable;
+</script>

package/vue/composables/useAutoSkeletonRows.ts

@@ -0,0 +1,71 @@
+import { ref, onMounted, onUnmounted, nextTick, type Ref } from "vue";
+
+export interface UseAutoSkeletonRowsOptions {
+  rowHeight?: number;
+  initialOffset?: number;
+  bottomBuffer?: number;
+  minRows?: number;
+  maxRows?: number;
+}
+
+export function useAutoSkeletonRows(
+  containerRef: Ref<HTMLElement | null | undefined>,
+  options: UseAutoSkeletonRowsOptions = {}
+) {
+  const {
+    rowHeight = 51,
+    initialOffset = 240,
+    bottomBuffer = 72,
+    minRows = 4,
+    maxRows = 30,
+  } = options;
+
+  const rows = ref<number>(
+    typeof window !== "undefined"
+      ? Math.max(minRows, Math.floor((window.innerHeight - initialOffset) / rowHeight))
+      : 10
+  );
+
+  const calculate = () => {
+    if (typeof window === "undefined") return;
+    const el = containerRef.value;
+    if (!el) {
+      const calculated = Math.floor((window.innerHeight - initialOffset) / rowHeight);
+      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
+      return;
+    }
+
+    const rect = el.getBoundingClientRect();
+    const thead = el.querySelector("thead");
+    const theadHeight = thead ? thead.offsetHeight : 40;
+
+    const containerHeight = el.clientHeight;
+    let availableHeight = 0;
+
+    if (containerHeight && containerHeight > theadHeight + 100) {
+      availableHeight = containerHeight - theadHeight - 12;
+    } else {
+      availableHeight = window.innerHeight - rect.top - theadHeight - bottomBuffer;
+    }
+
+    if (availableHeight > 0) {
+      const calculated = Math.floor(availableHeight / rowHeight);
+      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
+    }
+  };
+
+  onMounted(() => {
+    calculate();
+    nextTick(calculate);
+    window.addEventListener("resize", calculate);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", calculate);
+  });
+
+  return {
+    rows,
+    calculate,
+  };
+}

package/vue/index.d.ts

@@ -0,0 +1,58 @@
+import { DefineComponent, Ref } from "vue";
+
+export interface TabItem {
+  id: string | number;
+  label?: string;
+  name?: string;
+  icon?: any;
+  badge?: string;
+  count?: number;
+  disabled?: boolean;
+}
+
+export interface TableColumn {
+  key: string;
+  title?: string;
+  label?: string;
+  width?: string | number;
+  minWidth?: string | number;
+  align?: "left" | "center" | "right";
+  sortable?: boolean;
+  fixed?: "left" | "right" | boolean;
+  headerClass?: string;
+  cellClass?: string;
+}
+
+export interface UseAutoSkeletonRowsOptions {
+  rowHeight?: number;
+  initialOffset?: number;
+  bottomBuffer?: number;
+  minRows?: number;
+  maxRows?: number;
+}
+
+export declare function useAutoSkeletonRows(
+  containerRef: Ref<HTMLElement | null | undefined>,
+  options?: UseAutoSkeletonRowsOptions
+): {
+  rows: Ref<number>;
+  calculate: () => void;
+};
+
+export declare const Button: DefineComponent<any, any, any>;
+export declare const Checkbox: DefineComponent<any, any, any>;
+export declare const TabBar: DefineComponent<any, any, any>;
+export declare const Input: DefineComponent<any, any, any>;
+export declare const Select: DefineComponent<any, any, any>;
+export declare const Badge: DefineComponent<any, any, any>;
+export declare const Spinner: DefineComponent<any, any, any>;
+export declare const Sidebar: DefineComponent<any, any, any>;
+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 XTable: DefineComponent<any, any, any>;
+export declare const XThead: DefineComponent<any, any, any>;
+export declare const XTbody: DefineComponent<any, any, any>;
+export declare const XTr: DefineComponent<any, any, any>;
+export declare const XTh: DefineComponent<any, any, any>;
+export declare const XTd: DefineComponent<any, any, any>;

package/vue/index.js

@@ -0,0 +1,56 @@
+// cynx-lib/vue — Native Vue 3 component exports
+import Button from "./components/Button.vue";
+import Checkbox from "./components/Checkbox.vue";
+import TabBar from "./components/TabBar.vue";
+import Input from "./components/Input.vue";
+import Select from "./components/Select.vue";
+import Badge from "./components/Badge.vue";
+import Spinner from "./components/Spinner.vue";
+import Sidebar from "./components/Sidebar.vue";
+import Table from "./components/Table.vue";
+import Pagination from "./components/Pagination.vue";
+import Skeleton from "./components/Skeleton.vue";
+import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
+import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
+
+export {
+  Button,
+  Checkbox,
+  TabBar,
+  Input,
+  Select,
+  Badge,
+  Spinner,
+  Sidebar,
+  Table,
+  Pagination,
+  Skeleton,
+  XTable,
+  XThead,
+  XTbody,
+  XTr,
+  XTh,
+  XTd,
+  useAutoSkeletonRows,
+};
+
+export default {
+  Button,
+  Checkbox,
+  TabBar,
+  Input,
+  Select,
+  Badge,
+  Spinner,
+  Sidebar,
+  Table,
+  Pagination,
+  Skeleton,
+  XTable,
+  XThead,
+  XTbody,
+  XTr,
+  XTh,
+  XTd,
+  useAutoSkeletonRows,
+};