cynx-lib 1.3.83 → 1.3.85

package/utils/utils/ui.js

@@ -1,111 +1,111 @@
-/**
- * cynx/utils — UI and Formatting Helpers (ui.js)
- *
- * Universal classname merger (cn), clipboard helper, and friendly date/byte formatters.
- */
-
-/**
- * Universal class names combiner / merger (zero-dependency clsx replacement).
- * Handles strings, arrays, objects, booleans, and null/undefined values.
- *
- * @param {...any} inputs
- * @returns {string} Combined class string
- */
-export function cn(...inputs) {
-  const classes = [];
-
-  for (let i = 0; i < inputs.length; i++) {
-    const arg = inputs[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg)) {
-      if (arg.length) {
-        const inner = cn(...arg);
-        if (inner) classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (Object.prototype.hasOwnProperty.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}
-
-/**
- * Safely copy text to clipboard with modern Clipboard API and legacy fallback.
- *
- * @param {string} text
- * @returns {Promise<boolean>}
- */
-export async function copyToClipboard(text) {
-  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {}
-  }
-
-  if (typeof document !== 'undefined') {
-    try {
-      const el = document.createElement('textarea');
-      el.value = text;
-      el.setAttribute('readonly', '');
-      el.style.position = 'absolute';
-      el.style.left = '-9999px';
-      document.body.appendChild(el);
-      el.select();
-      const successful = document.execCommand('copy');
-      document.body.removeChild(el);
-      return successful;
-    } catch {}
-  }
-
-  return false;
-}
-
-/**
- * Format relative time (e.g. "5s ago", "12m ago", "3h ago", "2d ago").
- *
- * @param {Date|string|number} d
- * @returns {string}
- */
-export function fmtAgo(d) {
-  if (!d) return '—';
-  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000);
-  if (isNaN(s)) return '—';
-  if (s < 60) return `${Math.max(0, s)}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
-}
-
-/**
- * Format localized date or return fallback dash.
- *
- * @param {Date|string|number} d
- * @param {string} [locale='ru-RU']
- * @returns {string}
- */
-export function fmtDate(d, locale = 'ru-RU') {
-  if (!d) return '—';
-  try {
-    const date = new Date(d);
-    return isNaN(date.getTime()) ? '—' : date.toLocaleString(locale);
-  } catch {
-    return '—';
-  }
-}
-
-export default {
-  cn,
-  copyToClipboard,
-  fmtAgo,
-  fmtDate,
-};
+/**
+ * cynx/utils — UI and Formatting Helpers (ui.js)
+ *
+ * Universal classname merger (cn), clipboard helper, and friendly date/byte formatters.
+ */
+
+/**
+ * Universal class names combiner / merger (zero-dependency clsx replacement).
+ * Handles strings, arrays, objects, booleans, and null/undefined values.
+ *
+ * @param {...any} inputs
+ * @returns {string} Combined class string
+ */
+export function cn(...inputs) {
+  const classes = [];
+
+  for (let i = 0; i < inputs.length; i++) {
+    const arg = inputs[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = cn(...arg);
+        if (inner) classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (const key in arg) {
+        if (Object.prototype.hasOwnProperty.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Safely copy text to clipboard with modern Clipboard API and legacy fallback.
+ *
+ * @param {string} text
+ * @returns {Promise<boolean>}
+ */
+export async function copyToClipboard(text) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+
+  if (typeof document !== 'undefined') {
+    try {
+      const el = document.createElement('textarea');
+      el.value = text;
+      el.setAttribute('readonly', '');
+      el.style.position = 'absolute';
+      el.style.left = '-9999px';
+      document.body.appendChild(el);
+      el.select();
+      const successful = document.execCommand('copy');
+      document.body.removeChild(el);
+      return successful;
+    } catch {}
+  }
+
+  return false;
+}
+
+/**
+ * Format relative time (e.g. "5s ago", "12m ago", "3h ago", "2d ago").
+ *
+ * @param {Date|string|number} d
+ * @returns {string}
+ */
+export function fmtAgo(d) {
+  if (!d) return '—';
+  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000);
+  if (isNaN(s)) return '—';
+  if (s < 60) return `${Math.max(0, s)}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+/**
+ * Format localized date or return fallback dash.
+ *
+ * @param {Date|string|number} d
+ * @param {string} [locale='ru-RU']
+ * @returns {string}
+ */
+export function fmtDate(d, locale = 'ru-RU') {
+  if (!d) return '—';
+  try {
+    const date = new Date(d);
+    return isNaN(date.getTime()) ? '—' : date.toLocaleString(locale);
+  } catch {
+    return '—';
+  }
+}
+
+export default {
+  cn,
+  copyToClipboard,
+  fmtAgo,
+  fmtDate,
+};

package/vue/components/Badge.vue

@@ -1,79 +1,79 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const VARIANTS: Record<string, any> = {
-  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
-};
-
-const SIZE_MAP: Record<string, any> = {
-  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
-  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
-  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
-  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
-};
-
-const props = withDefaults(
-  defineProps<{
-    variant?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    dot?: boolean;
-    pill?: boolean;
-    plain?: boolean;
-    minimal?: boolean;
-  }>(),
-  {
-    variant: "dim",
-    size: "sm",
-    dot: false,
-    pill: true,
-    plain: false,
-    minimal: false,
-  }
-);
-
-const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
-const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
-const isPlain = computed(() => props.plain || props.minimal);
-</script>
-
-<template>
-  <span
-    :class="[
-      'inline-flex items-center gap-1.5 select-none',
-      isPlain ? 'font-semibold' : 'font-bold leading-none',
-      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
-    ]"
-    :style="{
-      background: isPlain ? 'transparent' : v.bg,
-      color: v.color,
-      border: isPlain ? 'none' : `1px solid ${v.border}`,
-      padding: isPlain ? s.plainPadding : s.padding,
-      fontSize: s.fontSize,
-    }"
-  >
-    <span
-      v-if="dot"
-      class="rounded-full flex-shrink-0"
-      :style="{
-        width: `${s.dotSize}px`,
-        height: `${s.dotSize}px`,
-        background: v.dot,
-      }"
-    />
-    <slot />
-  </span>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const VARIANTS: Record<string, any> = {
+  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
+};
+
+const SIZE_MAP: Record<string, any> = {
+  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
+  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
+  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
+  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    dot?: boolean;
+    pill?: boolean;
+    plain?: boolean;
+    minimal?: boolean;
+  }>(),
+  {
+    variant: "dim",
+    size: "sm",
+    dot: false,
+    pill: true,
+    plain: false,
+    minimal: false,
+  }
+);
+
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
+const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
+const isPlain = computed(() => props.plain || props.minimal);
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center gap-1.5 select-none',
+      isPlain ? 'font-semibold' : 'font-bold leading-none',
+      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
+    ]"
+    :style="{
+      background: isPlain ? 'transparent' : v.bg,
+      color: v.color,
+      border: isPlain ? 'none' : `1px solid ${v.border}`,
+      padding: isPlain ? s.plainPadding : s.padding,
+      fontSize: s.fontSize,
+    }"
+  >
+    <span
+      v-if="dot"
+      class="rounded-full flex-shrink-0"
+      :style="{
+        width: `${s.dotSize}px`,
+        height: `${s.dotSize}px`,
+        background: v.dot,
+      }"
+    />
+    <slot />
+  </span>
+</template>