cynx-lib 1.3.67 → 1.3.69

package/vue/components/DatePicker.vue

@@ -0,0 +1,1136 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useSlots,
+} from "vue";
+import { ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
+
+export interface DatePickerBadge {
+  dot?: boolean;
+  color?: string;
+}
+
+export interface DatePickerLocale {
+  days: string[];
+  months: string[];
+  today?: string;
+  time?: string;
+  ok?: string;
+}
+
+const LOCALES: Record<string, DatePickerLocale> = {
+  en: {
+    days: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+    months: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    today: "Today",
+    time: "Time:",
+    ok: "OK",
+  },
+  ru: {
+    days: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
+    months: [
+      "Янв",
+      "Фев",
+      "Мар",
+      "Апр",
+      "Май",
+      "Июн",
+      "Июл",
+      "Авг",
+      "Сен",
+      "Окт",
+      "Ноя",
+      "Дек",
+    ],
+    today: "Сегодня",
+    time: "Время:",
+    ok: "OK",
+  },
+};
+
+const SIZES: Record<
+  string,
+  {
+    height: number;
+    fontSize: number;
+    paddingH: number;
+    iconSize: number;
+    btnSize: number;
+    closeSize: number;
+  }
+> = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, iconSize: 11, btnSize: 24, closeSize: 11 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, iconSize: 12, btnSize: 28, closeSize: 12 },
+  md: { height: 32, fontSize: 13, paddingH: 10, iconSize: 13, btnSize: 32, closeSize: 13 },
+  lg: { height: 36, fontSize: 14, paddingH: 12, iconSize: 14, btnSize: 36, closeSize: 14 },
+};
+
+function pad(n: number) {
+  return String(n).padStart(2, "0");
+}
+
+function toKey(y: number, m: number, d: number) {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+
+function toDate(val: any): Date | null {
+  if (!val) return null;
+  if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  if (typeof val === "string") {
+    const parts = val.split("-");
+    if (parts.length === 3) {
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      const d = parseInt(parts[2], 10);
+      if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
+        return new Date(y, m, d);
+      }
+    }
+  }
+  const d = new Date(val);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function isSameDay(a: any, b: any) {
+  const da = toDate(a);
+  const db = toDate(b);
+  return (
+    Boolean(da && db) &&
+    da!.getFullYear() === db!.getFullYear() &&
+    da!.getMonth() === db!.getMonth() &&
+    da!.getDate() === db!.getDate()
+  );
+}
+
+function isToday(y: number, m: number, d: number) {
+  const t = new Date();
+  return t.getFullYear() === y && t.getMonth() === m && t.getDate() === d;
+}
+
+const STYLES = `
+@keyframes dpFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+`;
+const _id = "cynx-datepicker-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+ensureStyles();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any;
+    value?: any;
+    label?: string;
+    placeholder?: string;
+    badges?: Record<string, DatePickerBadge>;
+    minDate?: any;
+    maxDate?: any;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    showStepper?: boolean;
+    stepperPosition?: "off" | "around" | "left" | "right" | "start" | "end";
+    locale?: "en" | "ru" | DatePickerLocale | string;
+    clearable?: boolean;
+    fullWidth?: boolean;
+    style?: Record<string, any>;
+    showTime?: boolean;
+    timeValue?: string;
+    timeFormat?: "24h" | "12h";
+    showSeconds?: boolean;
+    timePlaceholder?: string;
+    range?: boolean;
+  }>(),
+  {
+    modelValue: undefined,
+    value: undefined,
+    label: "",
+    placeholder: "Select date",
+    badges: () => ({}),
+    minDate: undefined,
+    maxDate: undefined,
+    disabled: false,
+    size: "md",
+    showStepper: false,
+    stepperPosition: "off",
+    locale: "en",
+    clearable: true,
+    fullWidth: false,
+    style: () => ({}),
+    showTime: false,
+    timeValue: "",
+    timeFormat: "24h",
+    showSeconds: false,
+    timePlaceholder: "00:00",
+    range: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: any): void;
+  (e: "update:value", value: any): void;
+  (e: "change", value: any): void;
+  (e: "update:timeValue", value: string): void;
+  (e: "time-change", value: string): void;
+  (e: "clear"): void;
+}>();
+
+const currentVal = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+const loc = computed<DatePickerLocale>(() => {
+  if (typeof props.locale === "object" && props.locale !== null) {
+    return props.locale;
+  }
+  return LOCALES[props.locale as string] || LOCALES.en;
+});
+
+const s = computed(() => SIZES[props.size] || SIZES.md);
+const open = ref(false);
+const view = ref<"day" | "month" | "year">("day");
+const cursor = ref<Date>(new Date());
+const pos = ref({ top: 0, left: 0, width: 0 });
+
+const rangeStart = ref<Date | null>(null);
+const rangeEnd = ref<Date | null>(null);
+const hoverDate = ref<Date | null>(null);
+
+function formatDateStr(d: Date | null): string {
+  if (!d) return "";
+  const y = d.getFullYear();
+  const m = pad(d.getMonth() + 1);
+  const day = pad(d.getDate());
+  return `${y}-${m}-${day}`;
+}
+
+const wrapRef = ref<HTMLElement | null>(null);
+const btnRef = ref<HTMLElement | null>(null);
+const dropRef = ref<HTMLElement | null>(null);
+
+watch(
+  currentVal,
+  (newVal) => {
+    if (props.range) {
+      if (Array.isArray(newVal)) {
+        rangeStart.value = toDate(newVal[0]);
+        rangeEnd.value = toDate(newVal[1]);
+        if (rangeStart.value) cursor.value = rangeStart.value;
+      } else if (typeof newVal === "string" && newVal.includes(",")) {
+        const parts = newVal.split(",");
+        rangeStart.value = toDate(parts[0]);
+        rangeEnd.value = toDate(parts[1]);
+        if (rangeStart.value) cursor.value = rangeStart.value;
+      } else {
+        rangeStart.value = null;
+        rangeEnd.value = null;
+      }
+    } else {
+      const d = toDate(newVal);
+      if (d) cursor.value = d;
+    }
+  },
+  { immediate: true }
+);
+
+const calcPos = () => {
+  if (!btnRef.value) return;
+  const r = btnRef.value.getBoundingClientRect();
+  const dropW = Math.max(r.width, 260);
+  const dropH = dropRef.value ? dropRef.value.offsetHeight : 280;
+
+  let left = r.left;
+  if (left + dropW > window.innerWidth - 12) {
+    left = Math.max(12, r.right - dropW);
+  }
+  if (left < 12) left = 12;
+
+  let top = r.bottom + 6;
+  if (top + dropH > window.innerHeight - 12 && r.top - 6 - dropH > 12) {
+    top = r.top - 6 - dropH;
+  }
+
+  pos.value = { top, left, width: dropW };
+};
+
+const handleWindowClick = (e: MouseEvent) => {
+  if (!open.value) return;
+  const target = e.target as Node;
+  if (wrapRef.value?.contains(target)) return;
+  if (dropRef.value?.contains(target)) return;
+  open.value = false;
+  view.value = "day";
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value) {
+    open.value = false;
+    view.value = "day";
+  }
+};
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calcPos();
+    window.addEventListener("scroll", calcPos, true);
+    window.addEventListener("resize", calcPos);
+    document.addEventListener("mousedown", handleWindowClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    nextTick(calcPos);
+  } else {
+    window.removeEventListener("scroll", calcPos, true);
+    window.removeEventListener("resize", calcPos);
+    document.removeEventListener("mousedown", handleWindowClick, true);
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPos, true);
+  window.removeEventListener("resize", calcPos);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+  document.removeEventListener("keydown", handleKeyDown);
+});
+
+const toggleOpen = () => {
+  if (props.disabled) return;
+  if (!open.value) calcPos();
+  open.value = !open.value;
+};
+
+function pick(date: Date) {
+  if (!date) return;
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  if (minD && date < new Date(new Date(minD).setHours(0, 0, 0, 0))) return;
+  if (maxD && date > new Date(new Date(maxD).setHours(23, 59, 59, 999))) return;
+
+  if (props.range) {
+    if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
+      rangeStart.value = date;
+      rangeEnd.value = null;
+    } else {
+      let start = rangeStart.value;
+      let end = date;
+      if (start > end) {
+        const tmp = start;
+        start = end;
+        end = tmp;
+      }
+      rangeStart.value = start;
+      rangeEnd.value = end;
+
+      const result = [formatDateStr(start), formatDateStr(end)];
+      emit("update:modelValue", result);
+      emit("update:value", result);
+      emit("change", result);
+
+      open.value = false;
+      view.value = "day";
+    }
+    return;
+  }
+
+  const y = date.getFullYear();
+  const m = pad(date.getMonth() + 1);
+  const d = pad(date.getDate());
+  const strVal = `${y}-${m}-${d}`;
+
+  if (typeof currentVal.value === "string" || currentVal.value === undefined) {
+    emit("update:modelValue", strVal);
+    emit("update:value", strVal);
+    emit("change", strVal);
+  } else {
+    emit("update:modelValue", date);
+    emit("update:value", date);
+    emit("change", date);
+  }
+
+  if (!props.showTime) {
+    open.value = false;
+    view.value = "day";
+  }
+}
+
+function handleClear(e: MouseEvent) {
+  e.stopPropagation();
+  if (props.range) {
+    rangeStart.value = null;
+    rangeEnd.value = null;
+  }
+  emit("update:modelValue", null);
+  emit("update:value", null);
+  emit("change", null);
+  emit("clear");
+}
+
+const changeDay = (delta: number) => {
+  if (props.disabled) return;
+  const current = toDate(currentVal.value) || new Date();
+  const next = new Date(
+    current.getFullYear(),
+    current.getMonth(),
+    current.getDate() + delta
+  );
+
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  if (minD && next < 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;
+
+  pick(next);
+};
+
+const isNavNextDisabled = () => {
+  const maxD = toDate(props.maxDate);
+  if (!maxD) return false;
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "day") {
+    const nextMonthStart = new Date(y, m + 1, 1);
+    return nextMonthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  }
+  if (view.value === "month") {
+    const nextYearStart = new Date(y + 1, 0, 1);
+    return nextYearStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  }
+  if (view.value === "year") {
+    const base = Math.floor(y / 12) * 12;
+    const nextBlockStart = new Date(base + 12, 0, 1);
+    return nextBlockStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  }
+  return false;
+};
+
+const isNavPrevDisabled = () => {
+  const minD = toDate(props.minDate);
+  if (!minD) return false;
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "day") {
+    const prevMonthEnd = new Date(y, m, 0, 23, 59, 59, 999);
+    return prevMonthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  }
+  if (view.value === "month") {
+    const prevYearEnd = new Date(y - 1, 11, 31, 23, 59, 59, 999);
+    return prevYearEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  }
+  if (view.value === "year") {
+    const base = Math.floor(y / 12) * 12;
+    const prevBlockEnd = new Date(base - 1, 11, 31, 23, 59, 59, 999);
+    return prevBlockEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  }
+  return false;
+};
+
+function nav(dir: number) {
+  if (dir > 0 && isNavNextDisabled()) return;
+  if (dir < 0 && isNavPrevDisabled()) return;
+  const c = new Date(cursor.value);
+  if (view.value === "day") c.setMonth(c.getMonth() + dir);
+  if (view.value === "month") c.setFullYear(c.getFullYear() + dir);
+  if (view.value === "year") c.setFullYear(c.getFullYear() + dir * 12);
+  cursor.value = c;
+}
+
+function cycleView() {
+  view.value = view.value === "day" ? "month" : "year";
+}
+
+const valDate = computed(() => toDate(currentVal.value));
+
+function isRangeStartActive(date: Date) {
+  if (!props.range || !rangeStart.value) return false;
+  if (rangeEnd.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const eTime = new Date(rangeEnd.value.getFullYear(), rangeEnd.value.getMonth(), rangeEnd.value.getDate()).getTime();
+    const minD = sTime <= eTime ? rangeStart.value : rangeEnd.value;
+    return isSameDay(date, minD);
+  }
+  if (hoverDate.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const hTime = new Date(hoverDate.value.getFullYear(), hoverDate.value.getMonth(), hoverDate.value.getDate()).getTime();
+    const minD = sTime <= hTime ? rangeStart.value : hoverDate.value;
+    return isSameDay(date, minD);
+  }
+  return isSameDay(date, rangeStart.value);
+}
+
+function isRangeEndActive(date: Date) {
+  if (!props.range || !rangeStart.value) return false;
+  if (rangeEnd.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const eTime = new Date(rangeEnd.value.getFullYear(), rangeEnd.value.getMonth(), rangeEnd.value.getDate()).getTime();
+    const maxD = sTime <= eTime ? rangeEnd.value : rangeStart.value;
+    return isSameDay(date, maxD);
+  }
+  if (hoverDate.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const hTime = new Date(hoverDate.value.getFullYear(), hoverDate.value.getMonth(), hoverDate.value.getDate()).getTime();
+    const maxD = sTime <= hTime ? hoverDate.value : rangeStart.value;
+    return isSameDay(date, maxD);
+  }
+  return false;
+}
+
+function isRangeEndpoint(date: Date) {
+  return isRangeStartActive(date) || isRangeEndActive(date);
+}
+
+function isRangeBetween(date: Date) {
+  if (!props.range || !rangeStart.value) return false;
+  const dTime = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  if (rangeEnd.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const eTime = new Date(rangeEnd.value.getFullYear(), rangeEnd.value.getMonth(), rangeEnd.value.getDate()).getTime();
+    const minT = Math.min(sTime, eTime);
+    const maxT = Math.max(sTime, eTime);
+    return dTime > minT && dTime < maxT;
+  }
+  if (hoverDate.value) {
+    const sTime = new Date(rangeStart.value.getFullYear(), rangeStart.value.getMonth(), rangeStart.value.getDate()).getTime();
+    const hTime = new Date(hoverDate.value.getFullYear(), hoverDate.value.getMonth(), hoverDate.value.getDate()).getTime();
+    const minT = Math.min(sTime, hTime);
+    const maxT = Math.max(sTime, hTime);
+    return dTime > minT && dTime < maxT;
+  }
+  return false;
+}
+
+function getRangeRadius(date: Date) {
+  if (!props.range) return 'var(--radxs, 6px)';
+  const isStart = isRangeStartActive(date);
+  const isEnd = isRangeEndActive(date);
+  const dayOfWeek = date.getDay();
+  const isRowStart = dayOfWeek === 1;
+  const isRowEnd = dayOfWeek === 0;
+
+  if (isStart && isEnd) {
+    return 'var(--radxs, 6px)';
+  }
+  if (isStart) {
+    return 'var(--radxs, 6px) 0 0 var(--radxs, 6px)';
+  }
+  if (isEnd) {
+    return '0 var(--radxs, 6px) var(--radxs, 6px) 0';
+  }
+  if (isRangeBetween(date)) {
+    if (isRowStart && isRowEnd) return 'var(--radxs, 6px)';
+    if (isRowStart) return 'var(--radxs, 6px) 0 0 var(--radxs, 6px)';
+    if (isRowEnd) return '0 var(--radxs, 6px) var(--radxs, 6px) 0';
+    return '0';
+  }
+  return 'var(--radxs, 6px)';
+}
+
+const formatted = computed(() => {
+  if (props.range) {
+    if (rangeStart.value && rangeEnd.value) {
+      return `${formatDateStr(rangeStart.value)} — ${formatDateStr(rangeEnd.value)}`;
+    }
+    if (rangeStart.value) {
+      return `${formatDateStr(rangeStart.value)} — ...`;
+    }
+    return null;
+  }
+  const vd = valDate.value;
+  const formattedTime =
+    props.showTime && props.timeValue ? ` ${props.timeValue}` : "";
+  if (vd) {
+    const mName = loc.value.months[vd.getMonth()] || "";
+    return `${mName} ${vd.getDate()}, ${vd.getFullYear()}${formattedTime}`;
+  }
+  if (typeof currentVal.value === "string" && currentVal.value) {
+    return `${currentVal.value}${formattedTime}`;
+  }
+  return null;
+});
+
+const headerLabel = computed(() => {
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  if (view.value === "day") {
+    return `${loc.value.months[m]} ${y}`;
+  }
+  if (view.value === "month") {
+    return `${y}`;
+  }
+  const base = Math.floor(y / 12) * 12;
+  return `${base} – ${base + 11}`;
+});
+
+const daysCells = computed(() => {
+  const y = cursor.value.getFullYear();
+  const m = cursor.value.getMonth();
+  const first = new Date(y, m, 1).getDay(); // 0=Sun
+  const offset = first === 0 ? 6 : first === 1 ? 7 : first - 1;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const prevDays = new Date(y, m, 0).getDate();
+
+  const cells: Array<{ day: number; cur: boolean; next: boolean; date: Date }> =
+    [];
+  for (let i = offset - 1; i >= 0; i--) {
+    const d = prevDays - i;
+    cells.push({ day: d, cur: false, next: false, date: new Date(y, m - 1, d) });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, cur: true, next: false, date: new Date(y, m, d) });
+  }
+  const totalSoFar = cells.length;
+  let remaining = (7 - (totalSoFar % 7)) % 7;
+  if (remaining === 0) remaining = 7;
+  for (let d = 1; d <= remaining; d++) {
+    cells.push({ day: d, cur: false, next: true, date: new Date(y, m + 1, d) });
+  }
+  return cells;
+});
+
+const yearsList = computed(() => {
+  const base = Math.floor(cursor.value.getFullYear() / 12) * 12;
+  return Array.from({ length: 12 }, (_, i) => base + i);
+});
+
+const isCellDisabled = (date: Date) => {
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  const disMin = minD && date < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  const disMax = maxD && date > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  return Boolean(disMin || disMax);
+};
+
+const isMonthDisabled = (monthIndex: number) => {
+  const y = cursor.value.getFullYear();
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  const monthStart = new Date(y, monthIndex, 1);
+  const monthEnd = new Date(y, monthIndex + 1, 0, 23, 59, 59, 999);
+  const disMin = minD && monthEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  const disMax = maxD && monthStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  return Boolean(disMin || disMax);
+};
+
+const isYearDisabled = (yr: number) => {
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+  const yrStart = new Date(yr, 0, 1);
+  const yrEnd = new Date(yr, 11, 31, 23, 59, 59, 999);
+  const disMin = minD && yrEnd < new Date(new Date(minD).setHours(0, 0, 0, 0));
+  const disMax = maxD && yrStart > new Date(new Date(maxD).setHours(23, 59, 59, 999));
+  return Boolean(disMin || disMax);
+};
+
+const showStepperEffective = computed(
+  () => props.showStepper && props.stepperPosition !== "off"
+);
+const posMode = computed(() => {
+  const p = props.stepperPosition;
+  if (p === "left" || p === "start") return "left";
+  if (p === "right" || p === "end") return "right";
+  return "around";
+});
+</script>
+
+<template>
+  <div
+    ref="wrapRef"
+    :style="{
+      display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: style?.width || (fullWidth ? '100%' : 'auto'),
+      maxWidth: style?.maxWidth || (fullWidth ? '100%' : '320px'),
+      boxSizing: 'border-box',
+      minWidth: 0,
+      ...style,
+    }"
+  >
+    <label
+      v-if="label"
+      style="
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--t2, var(--muted, #797b8d));
+        text-transform: uppercase;
+        letter-spacing: .08em;
+        display: block;
+        margin-bottom: 4px;
+        user-select: none;
+      "
+    >
+      {{ label }}
+    </label>
+
+    <div
+      style="
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+      "
+    >
+      <!-- Left stepper buttons -->
+      <button
+        v-if="showStepperEffective && (posMode === 'around' || posMode === 'left')"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() - 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Previous day (-1)"
+        @click.stop="changeDay(-1)"
+      >
+        <ChevronLeft :size="s.iconSize + 2" />
+      </button>
+
+      <!-- Trigger button -->
+      <button
+        ref="btnRef"
+        type="button"
+        :disabled="disabled"
+        style="
+          display: flex;
+          align-items: center;
+          gap: 7px;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          font-family: var(--sans, inherit);
+          transition: border-color .15s;
+          white-space: nowrap;
+          min-width: 0;
+          flex: 1;
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          overflow: hidden;
+        "
+        :style="{
+          height: `${s.height}px`,
+          padding: `0 ${s.paddingH}px`,
+          fontSize: `${s.fontSize}px`,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled ? 0.5 : 1,
+          color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
+          borderColor: open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)',
+        }"
+        @click="toggleOpen"
+      >
+        <Calendar
+          :size="s.iconSize"
+          style="color: var(--muted, #797b8d); flex-shrink: 0;"
+        />
+        <span
+          style="
+            flex: 1;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            min-width: 0;
+          "
+        >
+          {{ formatted || placeholder }}
+        </span>
+        <span
+          v-if="currentVal && clearable"
+          title="Clear"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--muted, #797b8d);
+            cursor: pointer;
+            flex-shrink: 0;
+            line-height: 1;
+            padding: 0 2px;
+          "
+          :style="{ fontSize: `${s.closeSize}px` }"
+          @click.stop="handleClear"
+        >
+          ✕
+        </span>
+      </button>
+
+      <!-- Right stepper buttons -->
+      <button
+        v-if="showStepperEffective && (posMode === 'around' || posMode === 'right')"
+        type="button"
+        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() + 1)))"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: var(--rads, 8px);
+          border: 1px solid var(--border, #e2e8f0);
+          background: var(--surface, #ffffff);
+          color: var(--muted, #797b8d);
+          box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08));
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: all .15s;
+        "
+        :style="{
+          width: `${s.btnSize}px`,
+          height: `${s.btnSize}px`,
+          opacity: disabled ? 0.35 : 1,
+        }"
+        title="Next day (+1)"
+        @click.stop="changeDay(1)"
+      >
+        <ChevronRight :size="s.iconSize + 2" />
+      </button>
+    </div>
+
+    <!-- Dropdown via Teleport -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        class="cynx-datepicker-drop"
+        :style="{
+          position: 'fixed',
+          top: `${pos.top}px`,
+          left: `${pos.left}px`,
+          width: `${pos.width}px`,
+          zIndex: 9000,
+          background: 'var(--surface, #ffffff)',
+          border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: 'var(--rad, 10px)',
+          boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
+          padding: '10px 12px',
+          animation: 'dpFadeIn .12s ease',
+          boxSizing: 'border-box',
+        }"
+        @mousedown.stop
+      >
+        <!-- Calendar Header -->
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+          "
+        >
+          <button
+            type="button"
+            :disabled="isNavPrevDisabled()"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              border-radius: var(--radxs, 6px);
+              color: var(--muted, #797b8d);
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+              transition: background .12s;
+            "
+            :style="{
+              opacity: isNavPrevDisabled() ? 0.35 : 1,
+              cursor: isNavPrevDisabled() ? 'not-allowed' : 'pointer',
+            }"
+            @click="nav(-1)"
+          >
+            <ChevronLeft :size="15" />
+          </button>
+
+          <button
+            type="button"
+            style="
+              background: none;
+              border: none;
+              cursor: pointer;
+              font-size: .82rem;
+              font-weight: 700;
+              color: var(--primary-text, #0f172a);
+              padding: 4px 8px;
+              border-radius: var(--radxs, 6px);
+              font-family: var(--sans, inherit);
+            "
+            @click="cycleView"
+          >
+            {{ headerLabel }}
+          </button>
+
+          <button
+            type="button"
+            :disabled="isNavNextDisabled()"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              border-radius: var(--radxs, 6px);
+              color: var(--muted, #797b8d);
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+              transition: background .12s;
+            "
+            :style="{
+              opacity: isNavNextDisabled() ? 0.35 : 1,
+              cursor: isNavNextDisabled() ? 'not-allowed' : 'pointer',
+            }"
+            @click="nav(1)"
+          >
+            <ChevronRight :size="15" />
+          </button>
+        </div>
+
+        <!-- Day View -->
+        <div v-if="view === 'day'">
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              margin-bottom: 4px;
+            "
+          >
+            <div
+              v-for="d in loc.days"
+              :key="d"
+              style="
+                text-align: center;
+                font-size: .68rem;
+                font-weight: 700;
+                color: var(--muted, #797b8d);
+                padding: 4px 0;
+                font-family: var(--mono, ui-monospace, monospace);
+              "
+            >
+              {{ d }}
+            </div>
+          </div>
+
+          <div
+            style="
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 2px 0;
+            "
+          >
+            <div
+              v-for="(c, i) in daysCells"
+              :key="i"
+              :style="{
+                position: 'relative',
+                textAlign: 'center',
+                padding: '6px 2px',
+                fontSize: c.cur ? '.8rem' : '.78rem',
+                fontWeight: (props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal)) ? 700 : isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate()) ? 600 : 400,
+                borderRadius: getRangeRadius(c.date),
+                cursor: isCellDisabled(c.date) ? 'not-allowed' : 'pointer',
+                opacity: isCellDisabled(c.date) ? 0.35 : c.cur ? 1 : 0.65,
+                background: (props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
+                  ? 'var(--accent, #12675D)'
+                  : isRangeBetween(c.date)
+                  ? 'rgba(18, 103, 93, 0.14)'
+                  : 'transparent',
+                color: (props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
+                  ? '#ffffff'
+                  : isCellDisabled(c.date)
+                  ? 'var(--border, #e2e8f0)'
+                  : isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate())
+                  ? 'var(--accent, #12675D)'
+                  : c.cur
+                  ? 'var(--primary-text, #0f172a)'
+                  : 'var(--muted, #797b8d)',
+                border: isToday(c.date.getFullYear(), c.date.getMonth(), c.date.getDate()) && !(props.range ? isRangeEndpoint(c.date) : isSameDay(c.date, currentVal))
+                  ? '1.5px solid var(--accent, #12675D)'
+                  : '1.5px solid transparent',
+                transition: 'background .12s, color .12s',
+              }"
+              @mouseenter="props.range && rangeStart && !rangeEnd && (hoverDate = c.date)"
+              @click="!isCellDisabled(c.date) && pick(c.date)"
+            >
+              {{ c.day }}
+              <span
+                v-if="badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]"
+                :style="{
+                  position: 'absolute',
+                  bottom: '2px',
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                  width: '4px',
+                  height: '4px',
+                  borderRadius: '50%',
+                  background: badges[toKey(c.date.getFullYear(), c.date.getMonth(), c.day)]?.color || 'var(--accent, #12675D)',
+                }"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Month View -->
+        <div
+          v-else-if="view === 'month'"
+          style="
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+            padding: 4px 0;
+          "
+        >
+          <div
+            v-for="(mName, idx) in loc.months"
+            :key="idx"
+            :style="{
+              textAlign: 'center',
+              padding: '10px 4px',
+              borderRadius: 'var(--radxs, 6px)',
+              fontSize: '.82rem',
+              fontWeight: 600,
+              cursor: isMonthDisabled(idx) ? 'not-allowed' : 'pointer',
+              opacity: isMonthDisabled(idx) ? 0.35 : 1,
+              background: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
+                ? 'var(--accent, #12675D)'
+                : 'transparent',
+              color: valDate && valDate.getFullYear() === cursor.getFullYear() && valDate.getMonth() === idx
+                ? '#ffffff'
+                : isMonthDisabled(idx)
+                ? 'var(--border, #e2e8f0)'
+                : 'var(--primary-text, #0f172a)',
+              transition: 'background .12s',
+            }"
+            @click="
+              () => {
+                if (isMonthDisabled(idx)) return;
+                const c = new Date(cursor);
+                c.setMonth(idx);
+                cursor = c;
+                view = 'day';
+              }
+            "
+          >
+            {{ mName }}
+          </div>
+        </div>
+
+        <!-- Year View -->
+        <div
+          v-else-if="view === 'year'"
+          style="
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+            padding: 4px 0;
+          "
+        >
+          <div
+            v-for="yr in yearsList"
+            :key="yr"
+            :style="{
+              textAlign: 'center',
+              padding: '10px 4px',
+              borderRadius: 'var(--radxs, 6px)',
+              fontSize: '.82rem',
+              fontWeight: 600,
+              cursor: isYearDisabled(yr) ? 'not-allowed' : 'pointer',
+              opacity: isYearDisabled(yr) ? 0.35 : 1,
+              background: valDate && valDate.getFullYear() === yr ? 'var(--accent, #12675D)' : 'transparent',
+              color: valDate && valDate.getFullYear() === yr
+                ? '#ffffff'
+                : isYearDisabled(yr)
+                ? 'var(--border, #e2e8f0)'
+                : 'var(--primary-text, #0f172a)',
+              transition: 'background .12s',
+            }"
+            @click="
+              () => {
+                if (isYearDisabled(yr)) return;
+                const c = new Date(cursor);
+                c.setFullYear(yr);
+                cursor = c;
+                view = 'month';
+              }
+            "
+          >
+            {{ yr }}
+          </div>
+        </div>
+
+        <!-- Time Picker Footer (Optional) -->
+        <div
+          v-if="showTime"
+          style="
+            border-top: 1px solid var(--border-light, #ebebf0);
+            margin-top: 8px;
+            padding-top: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+          "
+        >
+          <div
+            style="
+              display: inline-flex;
+              align-items: center;
+              gap: 5px;
+              font-size: .76rem;
+              color: var(--muted, #797b8d);
+              fontWeight: 600;
+            "
+          >
+            <Clock :size="13" style="opacity: 0.85;" />
+            <span>{{ loc.time || 'Time:' }}</span>
+          </div>
+          <button
+            type="button"
+            style="
+              padding: 4px 10px;
+              border-radius: var(--radxs, 6px);
+              background: var(--accent, #12675D);
+              color: var(--def-btn-text, #ffffff);
+              border: none;
+              font-size: 11.5px;
+              font-weight: 600;
+              cursor: pointer;
+            "
+            @click="open = false; view = 'day';"
+          >
+            {{ loc.ok || 'OK' }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>