cynx-lib 1.3.74 → 1.3.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.74",
+  "version": "1.3.76",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/DatePicker.jsx

@@ -41,8 +41,24 @@ function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
 function toDate(val) {
   if (!val) return null;
   if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  if (typeof val === 'number') {
+    if (val >= 1000 && val <= 9999) return new Date(val, 0, 1);
+    const d = new Date(val);
+    return isNaN(d.getTime()) ? null : d;
+  }
   if (typeof val === 'string') {
-    const parts = val.split('-');
+    const trimmed = val.trim();
+    if (/^\d{4}$/.test(trimmed)) {
+      const y = parseInt(trimmed, 10);
+      if (!isNaN(y)) return new Date(y, 0, 1);
+    }
+    const ym = trimmed.split('-');
+    if (ym.length === 2) {
+      const y = parseInt(ym[0], 10);
+      const m = parseInt(ym[1], 10) - 1;
+      if (!isNaN(y) && !isNaN(m)) return new Date(y, m, 1);
+    }
+    const parts = trimmed.split('-');
     if (parts.length === 3) {
       const y = parseInt(parts[0], 10);
       const m = parseInt(parts[1], 10) - 1;
@@ -72,8 +88,10 @@ const SIZES = {
 export function DatePicker({
   value,
   onChange,
+  type = 'date',
+  mode,
   label,
-  placeholder = 'Select date',
+  placeholder,
   badges = {},
   minDate,
   maxDate,
@@ -97,8 +115,13 @@ export function DatePicker({
   const DAYS = loc.days;
   const MONTHS = loc.months;
   const s = SIZES[size] || SIZES.md;
+  const pickerType = type || mode || 'date';
+  const initialView = pickerType === 'month' ? 'month' : pickerType === 'year' ? 'year' : 'day';
+  const defaultPlaceholder = pickerType === 'month' ? 'Select month' : pickerType === 'year' ? 'Select year' : 'Select date';
+  const effectivePlaceholder = placeholder !== undefined ? placeholder : defaultPlaceholder;
+
   const [open,    setOpen]    = useState(false);
-  const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
+  const [view,    setView]    = useState(initialView);    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => new Date());
   const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
   const [rangeStart, setRangeStart] = useState(null);
@@ -108,11 +131,46 @@ export function DatePicker({
   const btnRef = useRef(null);
   const dropRef = useRef(null);
 
+  useEffect(() => {
+    setView(initialView);
+  }, [pickerType]);
+
   const changeDay = (delta) => {
     if (disabled) return;
     const current = toDate(value) || new Date();
-    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
+    if (pickerType === 'year') {
+      const next = new Date(current.getFullYear() + delta, 0, 1);
+      const minD = toDate(minDate);
+      const maxD = toDate(maxDate);
+      if (minD && next.getFullYear() < minD.getFullYear()) return;
+      if (maxD && next.getFullYear() > maxD.getFullYear()) return;
+      if (typeof value === 'number') {
+        onChange?.(next.getFullYear());
+      } else if (typeof value === 'string') {
+        onChange?.(`${next.getFullYear()}`);
+      } else {
+        onChange?.(next);
+      }
+      return;
+    }
+    if (pickerType === 'month') {
+      const next = new Date(current.getFullYear(), current.getMonth() + delta, 1);
+      const minD = toDate(minDate);
+      const maxD = toDate(maxDate);
+      const nextEnd = new Date(next.getFullYear(), next.getMonth() + 1, 0, 23, 59, 59, 999);
+      if (minD && nextEnd < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+      if (maxD && next > new Date(new Date(maxD).setHours(23, 59, 59, 999))) return;
+      if (typeof value === 'string') {
+        const y = next.getFullYear();
+        const m = pad(next.getMonth() + 1);
+        onChange?.(`${y}-${m}`);
+      } else {
+        onChange?.(next);
+      }
+      return;
+    }
 
+    const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);
     const minD = toDate(minDate);
     const maxD = toDate(maxDate);
     if (minD && next < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
@@ -137,13 +195,13 @@ export function DatePicker({
       if (e.target?.closest?.('.cynx-timepicker-drop') || e.target?.closest?.('.cynx-timepicker-cell')) return;
       if (document.querySelector('.cynx-timepicker-drop')) return;
       if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
-      setOpen(false); setView('day');
+      setOpen(false); setView(initialView);
     }
     function onKey(e) {
       if (e.key === 'Escape') {
         if (document.querySelector('.cynx-timepicker-drop')) return;
         if (typeof window !== 'undefined') window.__cynx_last_portal_closed_at = Date.now();
-        setOpen(false); setView('day');
+        setOpen(false); setView(initialView);
       }
     }
     document.addEventListener('mousedown', close, true);
@@ -152,7 +210,7 @@ export function DatePicker({
       document.removeEventListener('mousedown', close, true);
       document.removeEventListener('keydown', onKey);
     };
-  }, [open]);
+  }, [open, initialView]);
 
   const [stepperPosState, setStepperPosState] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('datepicker_stepper_position') : null);
 
@@ -225,6 +283,7 @@ export function DatePicker({
     if (disabled) return;
     if (!open) {
       calcPos();
+      setView(initialView);
     }
     setOpen(o => !o);
   };
@@ -417,6 +476,10 @@ export function DatePicker({
   const formattedTime = showTime && timeValue ? ` ${timeValue}` : '';
   const formatted = range
     ? (rangeStart && rangeEnd ? `${formatDateStr(rangeStart)} — ${formatDateStr(rangeEnd)}` : rangeStart ? `${formatDateStr(rangeStart)} — ...` : null)
+    : pickerType === 'year'
+    ? (valDate ? `${valDate.getFullYear()}` : (value !== null && value !== undefined && value !== '' ? `${value}` : null))
+    : pickerType === 'month'
+    ? (valDate ? `${MONTHS[valDate.getMonth()]} ${valDate.getFullYear()}` : (typeof value === 'string' && value ? `${value}` : null))
     : valDate
     ? `${MONTHS[valDate.getMonth()]} ${valDate.getDate()}, ${valDate.getFullYear()}${formattedTime}`
     : (typeof value === 'string' && value ? `${value}${formattedTime}` : null);
@@ -555,7 +618,18 @@ export function DatePicker({
                 const c = new Date(cursor);
                 c.setMonth(i);
                 setCursor(c);
-                setView('day');
+                if (pickerType === 'month') {
+                  if (typeof value === 'string') {
+                    const ym = `${y}-${pad(i + 1)}`;
+                    onChange?.(ym);
+                  } else {
+                    onChange?.(c);
+                  }
+                  setOpen(false);
+                  setView('month');
+                } else {
+                  setView('day');
+                }
               }}
               style={{
                 textAlign: 'center',
@@ -605,7 +679,21 @@ export function DatePicker({
                 const c = new Date(cursor);
                 c.setFullYear(yr);
                 setCursor(c);
-                setView('month');
+                if (pickerType === 'year') {
+                  if (typeof value === 'number') {
+                    onChange?.(yr);
+                  } else if (typeof value === 'string') {
+                    onChange?.(`${yr}`);
+                  } else {
+                    onChange?.(c);
+                  }
+                  setOpen(false);
+                  setView('year');
+                } else if (pickerType === 'month') {
+                  setView('month');
+                } else {
+                  setView('day');
+                }
               }}
               style={{
                 textAlign: 'center',
@@ -641,6 +729,13 @@ export function DatePicker({
     const maxD = toDate(maxDate);
     if (!maxD) return false;
     const current = toDate(value) || new Date();
+    if (pickerType === 'year') {
+      return (current.getFullYear() + 1) > maxD.getFullYear();
+    }
+    if (pickerType === 'month') {
+      const nextMonthStart = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+      return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+    }
     const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
     return next > new Date(new Date(maxD).setHours(23, 59, 59, 999));
   };
@@ -650,6 +745,13 @@ export function DatePicker({
     const minD = toDate(minDate);
     if (!minD) return false;
     const current = toDate(value) || new Date();
+    if (pickerType === 'year') {
+      return (current.getFullYear() - 1) < minD.getFullYear();
+    }
+    if (pickerType === 'month') {
+      const prevMonthEnd = new Date(current.getFullYear(), current.getMonth(), 0, 23, 59, 59, 999);
+      return prevMonthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+    }
     const prev = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
     return prev < new Date(new Date(minD).setHours(0, 0, 0, 0));
   };
@@ -717,7 +819,7 @@ export function DatePicker({
     onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
       <Calendar size={s.iconSize} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
       <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
-        {formatted || placeholder}
+        {formatted || effectivePlaceholder}
       </span>
       {value && (
         <span
@@ -783,7 +885,7 @@ export function DatePicker({
           animation: 'dp-in .12s ease',
         }}>
           {/* Calendar header */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, gap: 4 }}>
             <button
               type="button"
               disabled={isNavPrevDisabled()}
@@ -800,11 +902,65 @@ export function DatePicker({
             >
               <ChevronLeft size={15} />
             </button>
-            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans, inherit)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-              {headerLabel}
-            </button>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+              {view === 'day' && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setView('month')}
+                    style={{
+                      background: 'none', border: 'none', cursor: 'pointer',
+                      fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                      padding: '4px 6px', borderRadius: 'var(--radxs, 6px)',
+                      fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                  >
+                    {MONTHS[cursor.getMonth()]}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setView('year')}
+                    style={{
+                      background: 'none', border: 'none', cursor: 'pointer',
+                      fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                      padding: '4px 6px', borderRadius: 'var(--radxs, 6px)',
+                      fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                  >
+                    {cursor.getFullYear()}
+                  </button>
+                </>
+              )}
+
+              {view === 'month' && (
+                <button
+                  type="button"
+                  onClick={() => setView('year')}
+                  style={{
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)',
+                    padding: '4px 8px', borderRadius: 'var(--radxs, 6px)',
+                    fontFamily: 'var(--sans, inherit)', transition: 'background .12s'
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                >
+                  {cursor.getFullYear()}
+                </button>
+              )}
+
+              {view === 'year' && (
+                <span style={{ fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px' }}>
+                  {Math.floor(cursor.getFullYear() / 12) * 12} – {Math.floor(cursor.getFullYear() / 12) * 12 + 11}
+                </span>
+              )}
+            </div>
+
             <button
               type="button"
               disabled={isNavNextDisabled()}

package/vue/components/Divider.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const SIZE_CONFIG: Record<string, any> = {
+  xs: { hMargin: "8px 0", vMargin: "0 4px", vHeight: "14px", fontSize: ".7rem", padding: "0 8px" },
+  sm: { hMargin: "12px 0", vMargin: "0 8px", vHeight: "18px", fontSize: ".75rem", padding: "0 10px" },
+  md: { hMargin: "16px 0", vMargin: "0 12px", vHeight: "24px", fontSize: ".82rem", padding: "0 12px" },
+  lg: { hMargin: "24px 0", vMargin: "0 16px", vHeight: "32px", fontSize: ".9rem", padding: "0 16px" },
+  xl: { hMargin: "32px 0", vMargin: "0 24px", vHeight: "48px", fontSize: "1rem", padding: "0 20px" },
+};
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    orientation?: "horizontal" | "vertical";
+    align?: "left" | "center" | "right";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    color?: string;
+    thickness?: number | string;
+    variant?: string;
+  }>(),
+  {
+    orientation: "horizontal",
+    align: "center",
+    size: "md",
+    color: "var(--border-light, #ebebf0)",
+    thickness: 1,
+    variant: "solid",
+  }
+);
+
+const slots = useSlots();
+const hasContent = computed(() => Boolean(props.label || slots.default));
+const cfg = computed(() => SIZE_CONFIG[props.size] || SIZE_CONFIG.md);
+const thickStr = computed(() =>
+  typeof props.thickness === "number" ? `${props.thickness}px` : props.thickness
+);
+const lineStyle = computed(() => `${thickStr.value} ${props.variant} ${props.color}`);
+const leftFlex = computed(() => (props.align === "left" ? "0 0 16px" : "1"));
+const rightFlex = computed(() => (props.align === "right" ? "0 0 16px" : "1"));
+</script>
+
+<template>
+  <div
+    v-if="orientation === 'vertical'"
+    class="cynx-divider cynx-divider-vertical"
+    :style="{
+      display: 'inline-block',
+      width: 0,
+      height: cfg.vHeight,
+      margin: cfg.vMargin,
+      borderLeft: lineStyle,
+      verticalAlign: 'middle',
+      alignSelf: 'center',
+      flexShrink: 0,
+    }"
+  />
+
+  <div
+    v-else-if="hasContent"
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      margin: cfg.hMargin,
+    }"
+  >
+    <div :style="{ flex: leftFlex, borderBottom: lineStyle }" />
+    <span
+      :style="{
+        padding: cfg.padding,
+        fontSize: cfg.fontSize,
+        color: 'var(--muted, #9b9daa)',
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        lineHeight: 1,
+      }"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <div :style="{ flex: rightFlex, borderBottom: lineStyle }" />
+  </div>
+
+  <div
+    v-else
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      width: '100%',
+      margin: cfg.hMargin,
+      borderBottom: lineStyle,
+    }"
+  />
+</template>

package/vue/index.d.ts

@@ -58,6 +58,7 @@ 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 Divider: 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

@@ -19,6 +19,7 @@ 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 Divider from "./components/Divider.vue";
 import { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -43,6 +44,7 @@ export {
   CircularProgress,
   StatusTag,
   InfoBadge,
+  Divider,
   XTable,
   XThead,
   XTbody,
@@ -73,6 +75,7 @@ export default {
   CircularProgress,
   StatusTag,
   InfoBadge,
+  Divider,
   XTable,
   XThead,
   XTbody,