cynx-lib 1.3.78 → 1.3.80

package/package.json

@@ -1,72 +1,73 @@
-{
-  "name": "cynx-lib",
-  "version": "1.3.78",
-  "type": "module",
-  "main": "./index.cjs",
-  "module": "./index.js",
-  "bin": {
-    "cynx-gen": "./gen.js"
-  },
-  "scripts": {
-    "build": "node scripts/build-cjs.js",
-    "prepublishOnly": "node scripts/build-cjs.js"
-  },
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs"
-    },
-    "./vue": {
-      "import": "./vue/index.js",
-      "require": "./vue/index.js"
-    },
-    "./ui": {
-      "import": "./ui/index.js",
-      "require": "./ui/index.cjs"
-    },
-    "./utils": {
-      "import": "./utils/index.js",
-      "require": "./utils/index.cjs"
-    },
-    "./db": {
-      "import": "./utils/utils/db.js",
-      "require": "./utils/utils/db.cjs"
-    },
-    "./storage": {
-      "import": "./utils/utils/storage_manager.js",
-      "require": "./utils/utils/storage_manager.cjs"
-    },
-    "./gen": "./gen.js"
-  },
-  "peerDependencies": {
-    "lucide-react": ">=0.300",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-router-dom": ">=6"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "react-router-dom": {
-      "optional": true
-    },
-    "lucide-react": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "esbuild": "^0.25.12"
-  },
-  "files": [
-    "ui/",
-    "vue/",
-    "utils/",
-    "index.js",
-    "index.cjs",
-    "gen.js"
-  ]
-}
+{
+  "name": "cynx-lib",
+  "version": "1.3.80",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "bin": {
+    "cynx-gen": "./gen.js"
+  },
+  "scripts": {
+    "build": "node scripts/build-cjs.js",
+    "release": "node scripts/release.js",
+    "prepublishOnly": "node scripts/build-cjs.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./vue": {
+      "import": "./vue/index.js",
+      "require": "./vue/index.js"
+    },
+    "./ui": {
+      "import": "./ui/index.js",
+      "require": "./ui/index.cjs"
+    },
+    "./utils": {
+      "import": "./utils/index.js",
+      "require": "./utils/index.cjs"
+    },
+    "./db": {
+      "import": "./utils/utils/db.js",
+      "require": "./utils/utils/db.cjs"
+    },
+    "./storage": {
+      "import": "./utils/utils/storage_manager.js",
+      "require": "./utils/utils/storage_manager.cjs"
+    },
+    "./gen": "./gen.js"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.300",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.12"
+  },
+  "files": [
+    "ui/",
+    "vue/",
+    "utils/",
+    "index.js",
+    "index.cjs",
+    "gen.js"
+  ]
+}

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;
@@ -164,10 +166,12 @@ const props = withDefaults(
     range?: boolean;
   }>(),
   {
+    type: "date",
+    mode: undefined,
     modelValue: undefined,
     value: undefined,
     label: "",
-    placeholder: "Select date",
+    placeholder: undefined,
     badges: () => ({}),
     minDate: undefined,
     maxDate: undefined,
@@ -196,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;
@@ -209,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 });
 
@@ -282,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;
   }
 };
 
@@ -317,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;
 };
 
@@ -344,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;
   }
@@ -360,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;
   }
 }
 
@@ -381,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 = () => {
@@ -456,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));
 
@@ -559,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}`;
@@ -569,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();
@@ -689,7 +781,7 @@ const isYearDisabled = (yr: number) => {
       <button
         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;
@@ -717,7 +809,7 @@ const isYearDisabled = (yr: number) => {
       <button
         v-if="props.stepper === 'left'"
         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;
@@ -787,7 +879,7 @@ const isYearDisabled = (yr: number) => {
             min-width: 0;
           "
         >
-          {{ formatted || placeholder }}
+          {{ formatted || effectivePlaceholder }}
         </span>
         <span
           v-if="currentVal && clearable"
@@ -813,7 +905,7 @@ const isYearDisabled = (yr: number) => {
       <button
         v-if="props.stepper === 'right'"
         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;
@@ -841,7 +933,7 @@ const isYearDisabled = (yr: number) => {
       <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;
@@ -921,23 +1013,84 @@ const isYearDisabled = (yr: number) => {
             <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"
@@ -1084,7 +1237,18 @@ const isYearDisabled = (yr: number) => {
                 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';
+                }
               }
             "
           >
@@ -1127,7 +1291,21 @@ const isYearDisabled = (yr: number) => {
                 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';
+                }
               }
             "
           >