cynx-lib 1.3.77 → 1.3.79

package/package.json

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

package/ui/components/DatePicker.jsx

@@ -97,8 +97,7 @@ export function DatePicker({
   maxDate,
   disabled,
   size = 'md',
-  showStepper = false,
-  stepperPosition = 'off',
+  stepper = 'off',
   locale = 'en',
   style,
   fullWidth = false,
@@ -833,12 +832,6 @@ export function DatePicker({
     </button>
   );
 
-  const actualPos = stepperPosition || 'around';
-  const showStepperEffective = showStepper && actualPos !== 'off';
-  const posMode = actualPos === 'left' || actualPos === 'start' ? 'left'
-    : actualPos === 'right' || actualPos === 'end' ? 'right'
-    : 'around';
-
   return (
     <div style={{
       display: fullWidth || style?.display === 'flex' ? 'flex' : 'inline-flex',
@@ -864,15 +857,23 @@ export function DatePicker({
         maxWidth: '100%',
         minWidth: 0,
       }}>
-        {showStepperEffective && posMode === 'around' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'left' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'left' && renderNextBtn()}
+        {stepper === 'around' && renderPrevBtn()}
+        {stepper === 'left' && (
+          <>
+            {renderPrevBtn()}
+            {renderNextBtn()}
+          </>
+        )}
 
         {renderTriggerBtn()}
 
-        {showStepperEffective && posMode === 'around' && renderNextBtn()}
-        {showStepperEffective && posMode === 'right' && renderPrevBtn()}
-        {showStepperEffective && posMode === 'right' && renderNextBtn()}
+        {stepper === 'around' && renderNextBtn()}
+        {stepper === 'right' && (
+          <>
+            {renderPrevBtn()}
+            {renderNextBtn()}
+          </>
+        )}
       </div>
 
       {/* Dropdown via portal */}

package/vue/components/DatePicker.vue

@@ -142,6 +142,8 @@ ensureStyles();
 
 const props = withDefaults(
   defineProps<{
+    type?: "date" | "month" | "year";
+    mode?: "date" | "month" | "year";
     modelValue?: any;
     value?: any;
     label?: string;
@@ -151,8 +153,7 @@ const props = withDefaults(
     maxDate?: any;
     disabled?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
-    showStepper?: boolean;
-    stepperPosition?: "off" | "around" | "left" | "right" | "start" | "end";
+    stepper?: "off" | "around" | "left" | "right";
     locale?: "en" | "ru" | DatePickerLocale | string;
     clearable?: boolean;
     fullWidth?: boolean;
@@ -165,17 +166,18 @@ const props = withDefaults(
     range?: boolean;
   }>(),
   {
+    type: "date",
+    mode: undefined,
     modelValue: undefined,
     value: undefined,
     label: "",
-    placeholder: "Select date",
+    placeholder: undefined,
     badges: () => ({}),
     minDate: undefined,
     maxDate: undefined,
     disabled: false,
     size: "md",
-    showStepper: false,
-    stepperPosition: "off",
+    stepper: "off",
     locale: "en",
     clearable: true,
     fullWidth: false,
@@ -198,10 +200,34 @@ const emit = defineEmits<{
   (e: "clear"): void;
 }>();
 
+const emitValue = (val: any) => {
+  emit("update:modelValue", val);
+  emit("update:value", val);
+  emit("change", val);
+};
+
 const currentVal = computed(() => {
   return props.modelValue !== undefined ? props.modelValue : props.value;
 });
 
+const pickerType = computed(() => props.type || props.mode || "date");
+const initialView = computed<"day" | "month" | "year">(() => {
+  if (pickerType.value === "month") return "month";
+  if (pickerType.value === "year") return "year";
+  return "day";
+});
+
+const defaultPlaceholder = computed(() =>
+  pickerType.value === "month"
+    ? "Select month"
+    : pickerType.value === "year"
+    ? "Select year"
+    : "Select date"
+);
+const effectivePlaceholder = computed(() =>
+  props.placeholder !== undefined ? props.placeholder : defaultPlaceholder.value
+);
+
 const loc = computed<DatePickerLocale>(() => {
   if (typeof props.locale === "object" && props.locale !== null) {
     return props.locale;
@@ -211,7 +237,10 @@ const loc = computed<DatePickerLocale>(() => {
 
 const s = computed(() => SIZES[props.size] || SIZES.md);
 const open = ref(false);
-const view = ref<"day" | "month" | "year">("day");
+const view = ref<"day" | "month" | "year">(initialView.value);
+watch(pickerType, (pt) => {
+  view.value = pt === "month" ? "month" : pt === "year" ? "year" : "day";
+});
 const cursor = ref<Date>(new Date());
 const pos = ref({ top: 0, left: 0, width: 0 });
 
@@ -284,13 +313,13 @@ const handleWindowClick = (e: MouseEvent) => {
   if (dropRef.value?.contains(target)) return;
   if (target.closest?.(".cynx-timepicker-drop")) return;
   open.value = false;
-  view.value = "day";
+  view.value = initialView.value;
 };
 
 const handleKeyDown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value) {
     open.value = false;
-    view.value = "day";
+    view.value = initialView.value;
   }
 };
 
@@ -319,7 +348,10 @@ onBeforeUnmount(() => {
 
 const toggleOpen = () => {
   if (props.disabled) return;
-  if (!open.value) calcPos();
+  if (!open.value) {
+    calcPos();
+    view.value = initialView.value;
+  }
   open.value = !open.value;
 };
 
@@ -346,12 +378,10 @@ function pick(date: Date) {
       rangeEnd.value = end;
 
       const result = [formatDateStr(start), formatDateStr(end)];
-      emit("update:modelValue", result);
-      emit("update:value", result);
-      emit("change", result);
+      emitValue(result);
 
       open.value = false;
-      view.value = "day";
+      view.value = initialView.value;
     }
     return;
   }
@@ -362,18 +392,14 @@ function pick(date: Date) {
   const strVal = `${y}-${m}-${d}`;
 
   if (typeof currentVal.value === "string" || currentVal.value === undefined) {
-    emit("update:modelValue", strVal);
-    emit("update:value", strVal);
-    emit("change", strVal);
+    emitValue(strVal);
   } else {
-    emit("update:modelValue", date);
-    emit("update:value", date);
-    emit("change", date);
+    emitValue(date);
   }
 
   if (!props.showTime) {
     open.value = false;
-    view.value = "day";
+    view.value = initialView.value;
   }
 }
 
@@ -383,27 +409,91 @@ function handleClear(e: MouseEvent) {
     rangeStart.value = null;
     rangeEnd.value = null;
   }
-  emit("update:modelValue", null);
-  emit("update:value", null);
-  emit("change", null);
+  emitValue(null);
   emit("clear");
 }
 
+const isPrevDayDisabled = () => {
+  const minD = toDate(props.minDate);
+  if (!minD) return false;
+  const current = toDate(currentVal.value) || new Date();
+  if (pickerType.value === "year") {
+    return current.getFullYear() - 1 < minD.getFullYear();
+  }
+  if (pickerType.value === "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));
+};
+
+const isNextDayDisabled = () => {
+  const maxD = toDate(props.maxDate);
+  if (!maxD) return false;
+  const current = toDate(currentVal.value) || new Date();
+  if (pickerType.value === "year") {
+    return current.getFullYear() + 1 > maxD.getFullYear();
+  }
+  if (pickerType.value === "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));
+};
+
 const changeDay = (delta: number) => {
   if (props.disabled) return;
   const current = toDate(currentVal.value) || new Date();
+  const minD = toDate(props.minDate);
+  const maxD = toDate(props.maxDate);
+
+  if (pickerType.value === "year") {
+    const next = new Date(current.getFullYear() + delta, 0, 1);
+    if (minD && next.getFullYear() < minD.getFullYear()) return;
+    if (maxD && next.getFullYear() > maxD.getFullYear()) return;
+    if (typeof currentVal.value === "number") {
+      emitValue(next.getFullYear());
+    } else if (typeof currentVal.value === "string") {
+      emitValue(`${next.getFullYear()}`);
+    } else {
+      emitValue(next);
+    }
+    return;
+  }
+
+  if (pickerType.value === "month") {
+    const next = new Date(current.getFullYear(), current.getMonth() + delta, 1);
+    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 currentVal.value === "string") {
+      const y = next.getFullYear();
+      const m = pad(next.getMonth() + 1);
+      emitValue(`${y}-${m}`);
+    } else {
+      emitValue(next);
+    }
+    return;
+  }
+
   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);
+  if (typeof currentVal.value === "string") {
+    const y = next.getFullYear();
+    const m = pad(next.getMonth() + 1);
+    const d = pad(next.getDate());
+    emitValue(`${y}-${m}-${d}`);
+  } else {
+    emitValue(next);
+  }
 };
 
 const isNavNextDisabled = () => {
@@ -458,9 +548,6 @@ function nav(dir: number) {
   cursor.value = c;
 }
 
-function cycleView() {
-  view.value = view.value === "day" ? "month" : "year";
-}
 
 const valDate = computed(() => toDate(currentVal.value));
 
@@ -561,6 +648,21 @@ const formatted = computed(() => {
   const vd = valDate.value;
   const formattedTime =
     props.showTime && props.timeValue ? ` ${props.timeValue}` : "";
+
+  if (pickerType.value === "year") {
+    return vd
+      ? `${vd.getFullYear()}`
+      : currentVal.value !== null && currentVal.value !== undefined && currentVal.value !== ""
+      ? `${currentVal.value}`
+      : null;
+  }
+  if (pickerType.value === "month") {
+    return vd
+      ? `${loc.value.months[vd.getMonth()]} ${vd.getFullYear()}`
+      : typeof currentVal.value === "string" && currentVal.value
+      ? `${currentVal.value}`
+      : null;
+  }
   if (vd) {
     const mName = loc.value.months[vd.getMonth()] || "";
     return `${mName} ${vd.getDate()}, ${vd.getFullYear()}${formattedTime}`;
@@ -571,18 +673,6 @@ const formatted = computed(() => {
   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();
@@ -644,15 +734,6 @@ const isYearDisabled = (yr: number) => {
   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>
@@ -698,9 +779,9 @@ const posMode = computed(() => {
     >
       <!-- Left stepper buttons -->
       <button
-        v-if="showStepperEffective && (posMode === 'around' || posMode === 'left')"
+        v-if="props.stepper === 'around' || props.stepper === 'left'"
         type="button"
-        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() - 1)))"
+        :disabled="disabled || isPrevDayDisabled()"
         style="
           display: flex;
           align-items: center;
@@ -725,6 +806,34 @@ const posMode = computed(() => {
         <ChevronLeft :size="s.iconSize + 2" />
       </button>
 
+      <button
+        v-if="props.stepper === 'left'"
+        type="button"
+        :disabled="disabled || isNextDayDisabled()"
+        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>
+
       <!-- Trigger button -->
       <button
         ref="btnRef"
@@ -770,7 +879,7 @@ const posMode = computed(() => {
             min-width: 0;
           "
         >
-          {{ formatted || placeholder }}
+          {{ formatted || effectivePlaceholder }}
         </span>
         <span
           v-if="currentVal && clearable"
@@ -794,9 +903,37 @@ const posMode = computed(() => {
 
       <!-- Right stepper buttons -->
       <button
-        v-if="showStepperEffective && (posMode === 'around' || posMode === 'right')"
+        v-if="props.stepper === 'right'"
+        type="button"
+        :disabled="disabled || isPrevDayDisabled()"
+        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>
+
+      <button
+        v-if="props.stepper === 'around' || props.stepper === 'right'"
         type="button"
-        :disabled="disabled || isCellDisabled(new Date(new Date(valDate || new Date()).setDate((valDate || new Date()).getDate() + 1)))"
+        :disabled="disabled || isNextDayDisabled()"
         style="
           display: flex;
           align-items: center;
@@ -876,23 +1013,84 @@ const posMode = computed(() => {
             <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>
+          <div style="display: flex; align-items: center; gap: 4px; min-width: 0;">
+            <template v-if="view === 'day'">
+              <button
+                type="button"
+                style="
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  font-size: .82rem;
+                  font-weight: 700;
+                  color: var(--primary-text, #0f172a);
+                  padding: 4px 6px;
+                  border-radius: var(--radxs, 6px);
+                  font-family: var(--sans, inherit);
+                  transition: background .12s;
+                "
+                @click="view = 'month'"
+                @mouseenter="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)')"
+                @mouseleave="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'none')"
+              >
+                {{ loc.months[cursor.getMonth()] }}
+              </button>
+              <button
+                type="button"
+                style="
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  font-size: .82rem;
+                  font-weight: 700;
+                  color: var(--primary-text, #0f172a);
+                  padding: 4px 6px;
+                  border-radius: var(--radxs, 6px);
+                  font-family: var(--sans, inherit);
+                  transition: background .12s;
+                "
+                @click="view = 'year'"
+                @mouseenter="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)')"
+                @mouseleave="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'none')"
+              >
+                {{ cursor.getFullYear() }}
+              </button>
+            </template>
+
+            <button
+              v-else-if="view === 'month'"
+              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);
+                transition: background .12s;
+              "
+              @click="view = 'year'"
+              @mouseenter="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)')"
+              @mouseleave="(e: MouseEvent) => ((e.currentTarget as HTMLElement).style.background = 'none')"
+            >
+              {{ cursor.getFullYear() }}
+            </button>
+
+            <span
+              v-else-if="view === 'year'"
+              style="
+                font-size: .82rem;
+                font-weight: 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"
@@ -1039,7 +1237,18 @@ const posMode = computed(() => {
                 const c = new Date(cursor);
                 c.setMonth(idx);
                 cursor = c;
-                view = 'day';
+                if (pickerType === 'month') {
+                  if (typeof currentVal === 'string') {
+                    const ym = `${c.getFullYear()}-${pad(idx + 1)}`;
+                    emitValue(ym);
+                  } else {
+                    emitValue(c);
+                  }
+                  open = false;
+                  view = 'month';
+                } else {
+                  view = 'day';
+                }
               }
             "
           >
@@ -1082,7 +1291,21 @@ const posMode = computed(() => {
                 const c = new Date(cursor);
                 c.setFullYear(yr);
                 cursor = c;
-                view = 'month';
+                if (pickerType === 'year') {
+                  if (typeof currentVal === 'number') {
+                    emitValue(yr);
+                  } else if (typeof currentVal === 'string') {
+                    emitValue(`${yr}`);
+                  } else {
+                    emitValue(c);
+                  }
+                  open = false;
+                  view = 'year';
+                } else if (pickerType === 'month') {
+                  view = 'month';
+                } else {
+                  view = 'day';
+                }
               }
             "
           >