cynx-lib 1.3.50 → 1.3.52

package/vue/components/Skeleton.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    width?: string | number;
+    height?: string | number;
+    circle?: boolean;
+    size?: string | number;
+    radius?: string | number;
+    className?: string;
+  }>(),
+  {
+    width: "100%",
+    height: 14,
+    circle: false,
+    size: undefined,
+    radius: 4,
+    className: "",
+  }
+);
+
+const formatSize = (val?: string | number) => {
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "number") return `${val}px`;
+  return val;
+};
+
+const computedWidth = computed(() => {
+  if (props.circle) return formatSize(props.size || props.height || 24);
+  return formatSize(props.width);
+});
+
+const computedHeight = computed(() => {
+  if (props.circle) return formatSize(props.size || props.height || 24);
+  return formatSize(props.height);
+});
+
+const computedRadius = computed(() => {
+  if (props.circle) return "50%";
+  return formatSize(props.radius);
+});
+</script>
+
+<template>
+  <div
+    :class="['cynx-skeleton', className]"
+    :style="{
+      width: computedWidth,
+      height: computedHeight,
+      borderRadius: computedRadius,
+    }"
+  />
+</template>
+
+<style>
+@keyframes cynx-sk-shimmer {
+  0% {
+    background-position: -600px 0;
+  }
+  100% {
+    background-position: 600px 0;
+  }
+}
+
+.cynx-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--grey-1, #f0f1f5) 25%,
+    var(--border-light, #e4e5ec) 50%,
+    var(--grey-1, #f0f1f5) 75%
+  );
+  background-size: 600px 100%;
+  animation: cynx-sk-shimmer 1.4s ease infinite;
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+:root.dark1 .cynx-skeleton,
+:root.dark2 .cynx-skeleton,
+.dark .cynx-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--grey-1, #1c1f36) 25%,
+    var(--border-light, #2b304f) 50%,
+    var(--grey-1, #1c1f36) 75%
+  );
+  background-size: 600px 100%;
+}
+</style>

package/vue/components/Spinner.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    size?: number;
+    inline?: boolean;
+    color?: string;
+    fullPage?: boolean;
+    variant?: "default" | "classic";
+  }>(),
+  {
+    size: 20,
+    inline: false,
+    color: "currentColor",
+    fullPage: false,
+    variant: "default",
+  }
+);
+
+const s = computed(() => (props.inline ? 14 : props.size));
+</script>
+
+<template>
+  <!-- Fullpage Loading Container -->
+  <div
+    v-if="fullPage"
+    class="fixed inset-0 bg-[var(--bg,#f8fafc)] flex flex-col items-center justify-center gap-4 z-[9999]"
+  >
+    <div
+      class="v-progress-circular v-progress-circular--indeterminate relative"
+      :style="{ width: `${s}px`, height: `${s}px` }"
+    >
+      <svg
+        viewBox="0 0 42.42 42.42"
+        class="w-full h-full absolute inset-0 -rotate-90"
+      >
+        <circle
+          fill="transparent"
+          cx="50%"
+          cy="50%"
+          r="20"
+          stroke="var(--grey-2,#e0e0e0)"
+          stroke-width="2.42"
+          stroke-dasharray="125.66"
+          stroke-dashoffset="0"
+        />
+        <circle
+          fill="transparent"
+          cx="50%"
+          cy="50%"
+          r="20"
+          :stroke="color === 'currentColor' ? 'var(--accent,#12675D)' : color"
+          stroke-width="2.42"
+          class="v-progress-circular__overlay"
+        />
+      </svg>
+    </div>
+    <div class="text-xs font-mono text-[var(--muted,#797b8d)]">Loading...</div>
+  </div>
+
+  <!-- Inline / Normal Spinner -->
+  <div
+    v-else
+    :class="[inline ? 'inline-flex items-center' : 'flex items-center justify-center py-12']"
+  >
+    <!-- Classic spinner variant -->
+    <svg
+      v-if="variant === 'classic'"
+      class="animate-spin"
+      :width="s"
+      :height="s"
+      viewBox="0 0 24 24"
+      fill="none"
+      :stroke="color"
+      stroke-width="2.5"
+      stroke-linecap="round"
+    >
+      <path
+        d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+      />
+    </svg>
+
+    <!-- Circular spinner variant (default) -->
+    <div
+      v-else
+      class="v-progress-circular v-progress-circular--indeterminate relative"
+      :style="{ width: `${s}px`, height: `${s}px` }"
+    >
+      <svg
+        viewBox="0 0 42.42 42.42"
+        class="w-full h-full absolute inset-0 -rotate-90"
+      >
+        <circle
+          fill="transparent"
+          cx="50%"
+          cy="50%"
+          r="20"
+          stroke="var(--grey-2,#e0e0e0)"
+          stroke-width="2.42"
+          stroke-dasharray="125.66"
+          stroke-dashoffset="0"
+        />
+        <circle
+          fill="transparent"
+          cx="50%"
+          cy="50%"
+          r="20"
+          :stroke="color === 'currentColor' ? 'var(--accent,#12675D)' : color"
+          stroke-width="2.42"
+          class="v-progress-circular__overlay"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.v-progress-circular--indeterminate > svg {
+  animation: progress-circular-rotate 0.8s linear infinite;
+  transform-origin: center center;
+}
+@keyframes progress-circular-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes progress-circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+.v-progress-circular--indeterminate .v-progress-circular__overlay {
+  animation: progress-circular-dash 1.4s ease-in-out infinite;
+  stroke-linecap: round;
+}
+</style>

package/vue/components/TabBar.vue

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