@ttdk-design-system/library-vue 0.0.0-stage → 1.0.0

package/src/web/calendar/calendar.vue

@@ -0,0 +1,1536 @@
+<template>
+  <div
+    role="group"
+    aria-label="Kalender"
+    :id="id"
+    :class="
+      `ttdk-calendar ttdk-calendar-${variant || 'bordered'} ttdk-calendar-${
+        size || 'md'
+      } ttdk-calendar-rounded-${rounded || 'md'} ${
+        disabled ? 'ttdk-calendar-disabled' : ''
+      } ${className || ''}`.trim()
+    "
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+    }"
+  >
+    <template v-if="getViewMode() === 'day'">
+      <div class="ttdk-calendar-months">
+        <template
+          :key="`${monthItem.year}-${monthItem.month}`"
+          v-for="(monthItem, index) in getMonths()"
+        >
+          <div class="ttdk-calendar-month">
+            <div
+              :class="`ttdk-calendar-header ${headerClass || ''}`.trim()"
+              :style="{
+                ...buildUiStyle(headerStyle),
+              }"
+            >
+              <div class="ttdk-calendar-nav-group">
+                <template v-if="monthItem.isFirst">
+                  <template v-if="yearControls !== false">
+                    <button
+                      type="button"
+                      aria-label="Tahun Sebelumnya"
+                      :class="
+                        `ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()
+                      "
+                      :style="{
+                        ...buildUiStyle(navBtnStyle),
+                      }"
+                      :disabled="disabled"
+                      @click="async (event) => prevYear()"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                      >
+                        <polyline points="11 17 6 12 11 7"></polyline>
+                        <polyline points="18 17 13 12 18 7"></polyline>
+                      </svg>
+                    </button>
+                  </template>
+
+                  <button
+                    type="button"
+                    aria-label="Bulan Sebelumnya"
+                    :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+                    :style="{
+                      ...buildUiStyle(navBtnStyle),
+                    }"
+                    :disabled="disabled"
+                    @click="async (event) => prevMonth()"
+                  >
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                      <polyline points="15 18 9 12 15 6"></polyline>
+                    </svg>
+                  </button>
+                </template>
+              </div>
+              <div class="ttdk-calendar-title-group">
+                <button
+                  type="button"
+                  class="ttdk-calendar-title-btn"
+                  aria-label="Pilih Bulan"
+                  :disabled="disabled"
+                  @click="async (event) => openMonthView()"
+                >
+                  {{ monthItem.monthName }}</button
+                ><button
+                  type="button"
+                  class="ttdk-calendar-title-btn"
+                  aria-label="Pilih Tahun"
+                  :disabled="disabled"
+                  @click="async (event) => openYearView()"
+                >
+                  {{ monthItem.year }}
+                </button>
+              </div>
+              <div class="ttdk-calendar-nav-group">
+                <template v-if="monthItem.isLast">
+                  <button
+                    type="button"
+                    aria-label="Bulan Berikutnya"
+                    :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+                    :style="{
+                      ...buildUiStyle(navBtnStyle),
+                    }"
+                    :disabled="disabled"
+                    @click="async (event) => nextMonth()"
+                  >
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                      <polyline points="9 18 15 12 9 6"></polyline>
+                    </svg>
+                  </button>
+
+                  <template v-if="yearControls !== false">
+                    <button
+                      type="button"
+                      aria-label="Tahun Berikutnya"
+                      :class="
+                        `ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()
+                      "
+                      :style="{
+                        ...buildUiStyle(navBtnStyle),
+                      }"
+                      :disabled="disabled"
+                      @click="async (event) => nextYear()"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                      >
+                        <polyline points="13 17 18 12 13 7"></polyline>
+                        <polyline points="6 17 11 12 6 7"></polyline>
+                      </svg>
+                    </button>
+                  </template>
+                </template>
+              </div>
+            </div>
+            <table class="ttdk-calendar-table" role="grid">
+              <thead>
+                <tr class="ttdk-calendar-thead-row" role="row">
+                  <template
+                    :key="weekday"
+                    v-for="(weekday, index) in getWeekDays()"
+                  >
+                    <th
+                      class="ttdk-calendar-head-cell"
+                      role="columnheader"
+                      :aria-label="weekday"
+                    >
+                      {{ weekday }}
+                    </th>
+                  </template>
+                </tr>
+              </thead>
+              <tbody class="ttdk-calendar-tbody" role="rowgroup">
+                <template :key="wIdx" v-for="(week, wIdx) in monthItem.weeks">
+                  <tr class="ttdk-calendar-row" role="row">
+                    <template
+                      :key="`${cell.dateStr}-${cIdx}`"
+                      v-for="(cell, cIdx) in week"
+                    >
+                      <td
+                        role="gridcell"
+                        :class="
+                          `ttdk-calendar-cell ${cell.rangeClass} ${
+                            cellClass || ''
+                          }`.trim()
+                        "
+                        :aria-selected="cell.selected ? 'true' : 'false'"
+                        :aria-disabled="cell.disabled ? 'true' : 'false'"
+                        :style="{
+                          ...buildUiStyle(cellStyle),
+                        }"
+                        @mouseenter="
+                          async (event) => handleDayHover(cell.dateStr)
+                        "
+                        @mouseleave="async (event) => handleDayHoverLeave()"
+                      >
+                        <button
+                          type="button"
+                          :class="`ttdk-calendar-day ${
+                            cell.selected ? 'ttdk-calendar-day-selected' : ''
+                          } ${cell.today ? 'ttdk-calendar-day-today' : ''} ${
+                            cell.inRange ? 'ttdk-calendar-day-in-range' : ''
+                          } ${
+                            cell.isRangeStart
+                              ? 'ttdk-calendar-day-range-start'
+                              : ''
+                          } ${
+                            cell.isRangeEnd ? 'ttdk-calendar-day-range-end' : ''
+                          } ${
+                            cell.isOutside ? 'ttdk-calendar-day-outside' : ''
+                          } ${
+                            cell.disabled ? 'ttdk-calendar-day-disabled' : ''
+                          } ${
+                            cell.unavailable
+                              ? 'ttdk-calendar-day-unavailable'
+                              : ''
+                          }`"
+                          :disabled="cell.disabled"
+                          :tabIndex="cell.selected || cell.today ? 0 : -1"
+                          @click="
+                            async (event) => handleSelectDate(cell.dateStr)
+                          "
+                        >
+                          <span>{{ cell.day }}</span>
+                          <template v-if="cell.marker">
+                            <span
+                              class="ttdk-calendar-marker-dot"
+                              :style="{
+                                backgroundColor: cell.marker
+                                  ? cell.marker.color
+                                  : undefined,
+                              }"
+                              :title="
+                                cell.marker ? cell.marker.tooltip : undefined
+                              "
+                            ></span>
+                          </template>
+                        </button>
+                      </td>
+                    </template>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <template v-if="getViewMode() === 'month'">
+      <div class="ttdk-calendar-month-picker-view">
+        <div
+          :class="`ttdk-calendar-header ${headerClass || ''}`.trim()"
+          :style="{
+            ...buildUiStyle(headerStyle),
+          }"
+        >
+          <div class="ttdk-calendar-nav-group">
+            <button
+              type="button"
+              aria-label="Tahun Sebelumnya"
+              :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+              :style="{
+                ...buildUiStyle(navBtnStyle),
+              }"
+              :disabled="disabled"
+              @click="async (event) => prevYear()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+          </div>
+          <div class="ttdk-calendar-title-group">
+            <button
+              type="button"
+              class="ttdk-calendar-title-btn"
+              aria-label="Pilih Tahun"
+              :disabled="disabled"
+              @click="async (event) => openYearView()"
+            >
+              {{ getViewYear() }}
+            </button>
+          </div>
+          <div class="ttdk-calendar-nav-group">
+            <button
+              type="button"
+              aria-label="Tahun Berikutnya"
+              :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+              :style="{
+                ...buildUiStyle(navBtnStyle),
+              }"
+              :disabled="disabled"
+              @click="async (event) => nextYear()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="ttdk-calendar-grid-picker" role="grid">
+          <template :key="m.month" v-for="(m, index) in getMonthsList()">
+            <button
+              type="button"
+              :class="`ttdk-calendar-picker-item ${
+                m.isSelected ? 'ttdk-calendar-picker-item-selected' : ''
+              } ${m.isCurrent ? 'ttdk-calendar-picker-item-current' : ''}`"
+              :disabled="disabled"
+              :aria-label="m.fullName"
+              @click="async (event) => selectMonth(m.month)"
+            >
+              {{ m.label }}
+            </button>
+          </template>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="getViewMode() === 'year'">
+      <div class="ttdk-calendar-year-picker-view">
+        <div
+          :class="`ttdk-calendar-header ${headerClass || ''}`.trim()"
+          :style="{
+            ...buildUiStyle(headerStyle),
+          }"
+        >
+          <div class="ttdk-calendar-nav-group">
+            <button
+              type="button"
+              aria-label="Rentang Tahun Sebelumnya"
+              :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+              :style="{
+                ...buildUiStyle(navBtnStyle),
+              }"
+              :disabled="disabled"
+              @click="async (event) => prevDecade()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+          </div>
+          <div class="ttdk-calendar-title-group">
+            <span class="ttdk-calendar-title">{{ getDecadeLabel() }}</span>
+          </div>
+          <div class="ttdk-calendar-nav-group">
+            <button
+              type="button"
+              aria-label="Rentang Tahun Berikutnya"
+              :class="`ttdk-calendar-nav-btn ${navBtnClass || ''}`.trim()"
+              :style="{
+                ...buildUiStyle(navBtnStyle),
+              }"
+              :disabled="disabled"
+              @click="async (event) => nextDecade()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="ttdk-calendar-grid-picker" role="grid">
+          <template :key="y.year" v-for="(y, index) in getYearsList()">
+            <button
+              type="button"
+              :class="`ttdk-calendar-picker-item ${
+                y.isSelected ? 'ttdk-calendar-picker-item-selected' : ''
+              } ${y.isCurrent ? 'ttdk-calendar-picker-item-current' : ''}`"
+              :disabled="disabled"
+              :aria-label="y.label"
+              @click="async (event) => selectYear(y.year)"
+            >
+              {{ y.label }}
+            </button>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onUpdated, ref } from "vue";
+
+import { buildUiStyle, buildUiVars, UiProps } from "../../core/types";
+
+export type CalendarUiProps = UiProps;
+export interface DateRange {
+  start: string | Date | null;
+  end: string | Date | null;
+}
+export interface DateMarker {
+  date: string;
+  color?: string;
+  tooltip?: string;
+  dot?: boolean;
+}
+export interface CalendarProps {
+  /**
+   * Nilai tanggal terpilih pada mode controlled.
+   * - Single: string ('YYYY-MM-DD') atau Date
+   * - Range: { start: string | Date | null, end: string | Date | null }
+   * - Multiple: string[] atau Date[]
+   */
+  value?: any;
+
+  /**
+   * Nilai awal tanggal terpilih pada mode uncontrolled.
+   */
+  defaultValue?: any;
+
+  /**
+   * Atribut ID unik untuk elemen root kalender.
+   */
+  id?: string;
+
+  /**
+   * Mengaktifkan mode pemilihan rentang tanggal (start date - end date).
+   * @default false
+   */
+  range?: boolean;
+
+  /**
+   * Mengaktifkan mode pemilihan banyak tanggal sekaligus.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Batas tanggal paling awal yang dapat dipilih.
+   */
+  min?: string | Date;
+
+  /**
+   * Alias untuk min (kompatibel Nuxt UI: min-value).
+   */
+  minValue?: string | Date;
+
+  /**
+   * Batas tanggal paling akhir yang dapat dipilih.
+   */
+  max?: string | Date;
+
+  /**
+   * Alias untuk max (kompatibel Nuxt UI: max-value).
+   */
+  maxValue?: string | Date;
+
+  /**
+   * Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan).
+   */
+  isDateDisabled?: (date: Date) => boolean;
+
+  /**
+   * Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough).
+   */
+  isDateUnavailable?: (date: Date) => boolean;
+
+  /**
+   * Jumlah bulan yang ditampilkan secara berdampingan.
+   * @default 1
+   */
+  numberOfMonths?: number;
+
+  /**
+   * Hari awal dalam seminggu:
+   * - 0 = Minggu (Sunday)
+   * - 1 = Senin (Monday)
+   * @default 1
+   */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Kode lokal bahasa kalender (misal: 'id-ID', 'en-US').
+   * @default 'id-ID'
+   */
+  locale?: string;
+
+  /**
+   * Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled.
+   */
+  month?: number;
+
+  /**
+   * Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled.
+   */
+  year?: number;
+
+  /**
+   * Bulan awal yang sedang ditampilkan (1 - 12).
+   */
+  defaultMonth?: number;
+
+  /**
+   * Tahun awal yang sedang ditampilkan.
+   */
+  defaultYear?: number;
+
+  /**
+   * Menampilkan tombol navigasi lompat tahun (<< dan >>).
+   * @default true
+   */
+  yearControls?: boolean;
+
+  /**
+   * Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days).
+   * @default true
+   */
+  showOutsideDays?: boolean;
+
+  /**
+   * Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan.
+   * @default true
+   */
+  fixedWeeks?: boolean;
+
+  /**
+   * Daftar penanda agenda / jadwal faskes pada tanggal tertentu.
+   */
+  dateMarkers?: DateMarker[];
+
+  /**
+   * Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px).
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Radius sudut kelengkungan container kalender.
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+
+  /**
+   * Varian visual tampilan kalender:
+   * - 'default': Bersih dengan background putih/gelap.
+   * - 'bordered': Dengan bingkai border solid luar.
+   * - 'card': Dengan elevasi bayangan halus kartu.
+   * - 'flat': Minimalis tanpa border dan tanpa shadow.
+   * @default 'bordered'
+   */
+  variant?: "default" | "bordered" | "card" | "flat";
+
+  /**
+   * Menonaktifkan seluruh kalender dari interaksi.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Mode hanya-baca (read-only).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Callback event saat nilai tanggal berubah.
+   */
+  onValueChange?: (value: any) => void;
+
+  /**
+   * Callback event native saat nilai berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback saat navigasi bulan atau tahun berubah.
+   */
+  onMonthChange?: (month: number, year: number) => void;
+
+  /**
+   * Callback saat tahun tampilan kalender berubah.
+   */
+  onYearChange?: (month: number, year: number) => void;
+
+  /**
+   * Mode tampilan awal kalender ('day', 'month', 'year').
+   * @default 'day'
+   */
+  defaultViewMode?: "day" | "month" | "year";
+
+  /**
+   * Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled.
+   */
+  viewMode?: "day" | "month" | "year";
+
+  /**
+   * Callback saat mode tampilan kalender berubah ('day', 'month', 'year').
+   */
+  onViewModeChange?: (mode: "day" | "month" | "year") => void;
+
+  /**
+   * Class CSS kustom untuk container utama.
+   */
+  className?: string;
+
+  /**
+   * Inline style CSS kustom untuk container utama.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk header kalender.
+   */
+  headerClass?: string;
+
+  /**
+   * Inline style kustom untuk header kalender.
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol navigasi.
+   */
+  navBtnClass?: string;
+
+  /**
+   * Inline style kustom untuk tombol navigasi.
+   */
+  navBtnStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk cell tanggal.
+   */
+  cellClass?: string;
+
+  /**
+   * Inline style kustom untuk cell tanggal.
+   */
+  cellStyle?: UiProps;
+
+  /**
+   * Kustomisasi visual granular UiProps.
+   */
+  ui?: UiProps;
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  yearControls: true,
+  showOutsideDays: true,
+  fixedWeeks: true,
+});
+const viewYear = ref(
+  (() => {
+    if (props.year) return props.year;
+    if (props.defaultYear) return props.defaultYear;
+    const target = props.value !== undefined ? props.value : props.defaultValue;
+    if (target) {
+      const valStr =
+        props.range && typeof target === "object"
+          ? target.start
+          : props.multiple && Array.isArray(target)
+          ? target[0]
+          : target;
+      if (valStr instanceof Date && !isNaN(valStr.getTime()))
+        return valStr.getFullYear();
+      if (typeof valStr === "string" && valStr.trim()) {
+        const parts = valStr.split("-");
+        if (parts.length === 3) {
+          const y = parseInt(parts[0], 10);
+          if (!isNaN(y)) return y;
+        }
+      }
+    }
+    return new Date().getFullYear();
+  })()
+);
+const viewMonth = ref(
+  (() => {
+    if (props.month) return props.month;
+    if (props.defaultMonth) return props.defaultMonth;
+    const target = props.value !== undefined ? props.value : props.defaultValue;
+    if (target) {
+      const valStr =
+        props.range && typeof target === "object"
+          ? target.start
+          : props.multiple && Array.isArray(target)
+          ? target[0]
+          : target;
+      if (valStr instanceof Date && !isNaN(valStr.getTime()))
+        return valStr.getMonth() + 1;
+      if (typeof valStr === "string" && valStr.trim()) {
+        const parts = valStr.split("-");
+        if (parts.length === 3) {
+          const m = parseInt(parts[1], 10);
+          if (!isNaN(m)) return m;
+        }
+      }
+    }
+    return new Date().getMonth() + 1;
+  })()
+);
+const currentViewMode = ref(props.viewMode || props.defaultViewMode || "day");
+const decadeStart = ref(null);
+const selectedSingle = ref(null);
+const rangeStart = ref(null);
+const rangeEnd = ref(null);
+const hoverDate = ref(null);
+const selectedMultiple = ref([]);
+const lastParsedKey = ref(
+  (() => {
+    const target = props.value !== undefined ? props.value : props.defaultValue;
+    if (!target) return "";
+    const valStr =
+      props.range && typeof target === "object"
+        ? target.start
+        : props.multiple && Array.isArray(target)
+        ? target[0]
+        : target;
+    return valStr instanceof Date
+      ? "" + valStr.getTime()
+      : typeof valStr === "string"
+      ? valStr
+      : "";
+  })()
+);
+
+onUpdated(() => {
+  const target = props.value !== undefined ? props.value : props.defaultValue;
+  const valStr = target
+    ? props.range && typeof target === "object"
+      ? target.start
+      : props.multiple && Array.isArray(target)
+      ? target[0]
+      : target
+    : null;
+  const valKey =
+    valStr instanceof Date
+      ? "" + valStr.getTime()
+      : typeof valStr === "string"
+      ? valStr
+      : "";
+  if (valKey !== lastParsedKey.value) {
+    lastParsedKey.value = valKey;
+    if (valStr) {
+      const parsed = parseDate(valStr);
+      if (parsed) {
+        if (!props.year) {
+          viewYear.value = parsed.getFullYear();
+        }
+        if (!props.month) {
+          viewMonth.value = parsed.getMonth() + 1;
+        }
+      }
+    }
+  }
+});
+
+function initialParsed() {
+  const target = props.value !== undefined ? props.value : props.defaultValue;
+  if (!target) return null;
+  if (props.range && typeof target === "object") {
+    const s = target.start;
+    if (s instanceof Date) return isNaN(s.getTime()) ? null : s;
+    if (typeof s === "string" && s.trim()) {
+      const parts = s.split("-");
+      if (parts.length === 3) {
+        const y = parseInt(parts[0], 10);
+        const m = parseInt(parts[1], 10) - 1;
+        const d = parseInt(parts[2], 10);
+        const res = new Date(y, m, d);
+        return isNaN(res.getTime()) ? null : res;
+      }
+      const p = new Date(s);
+      return isNaN(p.getTime()) ? null : p;
+    }
+  } else if (props.multiple && Array.isArray(target) && target.length > 0) {
+    const first = target[0];
+    if (first instanceof Date) return isNaN(first.getTime()) ? null : first;
+    if (typeof first === "string" && first.trim()) {
+      const parts = first.split("-");
+      if (parts.length === 3) {
+        const y = parseInt(parts[0], 10);
+        const m = parseInt(parts[1], 10) - 1;
+        const d = parseInt(parts[2], 10);
+        const res = new Date(y, m, d);
+        return isNaN(res.getTime()) ? null : res;
+      }
+    }
+  } else if (typeof target === "string" && target.trim()) {
+    const parts = target.split("-");
+    if (parts.length === 3) {
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      const d = parseInt(parts[2], 10);
+      const res = new Date(y, m, d);
+      return isNaN(res.getTime()) ? null : res;
+    }
+    const p = new Date(target);
+    return isNaN(p.getTime()) ? null : p;
+  } else if (target instanceof Date && !isNaN(target.getTime())) {
+    return target;
+  }
+  return null;
+}
+function padZero(num: number) {
+  return num < 10 ? "0" + num : "" + num;
+}
+function toDateString(d: Date) {
+  if (!d || isNaN(d.getTime())) {
+    const now = new Date();
+    return (
+      now.getFullYear() +
+      "-" +
+      padZero(now.getMonth() + 1) +
+      "-" +
+      padZero(now.getDate())
+    );
+  }
+  return (
+    d.getFullYear() +
+    "-" +
+    padZero(d.getMonth() + 1) +
+    "-" +
+    padZero(d.getDate())
+  );
+}
+function parseDate(val: any) {
+  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);
+      const res = new Date(y, m, d);
+      return isNaN(res.getTime()) ? null : res;
+    }
+    const parsed = new Date(val);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+function getViewYear(monthOffset: number = 0) {
+  const now = new Date();
+  let m =
+    (props.month || viewMonth.value || now.getMonth() + 1) - 1 + monthOffset;
+  let y = props.year || viewYear.value || now.getFullYear();
+  if (isNaN(m)) m = now.getMonth() + monthOffset;
+  if (isNaN(y)) y = now.getFullYear();
+  while (m > 11) {
+    m -= 12;
+    y += 1;
+  }
+  while (m < 0) {
+    m += 12;
+    y -= 1;
+  }
+  return y;
+}
+function getViewMonth(monthOffset: number = 0) {
+  const now = new Date();
+  let m =
+    (props.month || viewMonth.value || now.getMonth() + 1) - 1 + monthOffset;
+  if (isNaN(m)) m = now.getMonth() + monthOffset;
+  while (m > 11) {
+    m -= 12;
+  }
+  while (m < 0) {
+    m += 12;
+  }
+  return m + 1;
+}
+function getMonthLabel(year: number, month: number) {
+  const loc = props.locale || "id-ID";
+  const d = new Date(year, month - 1, 1);
+  return d.toLocaleDateString(loc, {
+    month: "long",
+    year: "numeric",
+  });
+}
+function getMonthOnlyLabel(year: number, month: number) {
+  const loc = props.locale || "id-ID";
+  const d = new Date(year, month - 1, 1);
+  return d.toLocaleDateString(loc, {
+    month: "long",
+  });
+}
+function getViewMode() {
+  return props.viewMode || currentViewMode.value || "day";
+}
+function setViewMode(mode: "day" | "month" | "year") {
+  currentViewMode.value = mode;
+  if (props.onViewModeChange) {
+    props.onViewModeChange(mode);
+  }
+}
+function openMonthView() {
+  if (props.disabled) return;
+  setViewMode("month");
+}
+function openYearView() {
+  if (props.disabled) return;
+  setViewMode("year");
+}
+function getDecadeStart() {
+  if (decadeStart.value !== null) {
+    return decadeStart.value;
+  }
+  const y = props.year || viewYear.value;
+  return Math.floor(y / 10) * 10;
+}
+function getDecadeLabel() {
+  const start = getDecadeStart();
+  const end = start + 11;
+  return start + " - " + end;
+}
+function prevDecade() {
+  if (props.disabled) return;
+  decadeStart.value = getDecadeStart() - 12;
+}
+function nextDecade() {
+  if (props.disabled) return;
+  decadeStart.value = getDecadeStart() + 12;
+}
+function getYearsList() {
+  const start = getDecadeStart();
+  const currentY = props.year || viewYear.value;
+  const actualY = new Date().getFullYear();
+  const list: any[] = [];
+  for (let i = 0; i < 12; i++) {
+    const y = start + i;
+    list.push({
+      year: y,
+      label: "" + y,
+      isSelected: y === currentY,
+      isCurrent: y === actualY,
+    });
+  }
+  return list;
+}
+function selectYear(year: number) {
+  if (props.disabled) return;
+  viewYear.value = year;
+  decadeStart.value = null;
+  setViewMode("month");
+  if (props.onYearChange) {
+    props.onYearChange(getViewMonth(), year);
+  }
+  if (props.onMonthChange) {
+    props.onMonthChange(getViewMonth(), year);
+  }
+}
+function getMonthsList() {
+  const currentY = props.year || viewYear.value;
+  const currentM = props.month || viewMonth.value;
+  const actualNow = new Date();
+  const actualY = actualNow.getFullYear();
+  const actualM = actualNow.getMonth() + 1;
+  const loc = props.locale || "id-ID";
+  const list: any[] = [];
+  for (let m = 1; m <= 12; m++) {
+    const d = new Date(currentY, m - 1, 1);
+    const shortName = d.toLocaleDateString(loc, {
+      month: "short",
+    });
+    const fullName = d.toLocaleDateString(loc, {
+      month: "long",
+    });
+    list.push({
+      month: m,
+      label: shortName,
+      fullName: fullName,
+      isSelected: m === currentM,
+      isCurrent: currentY === actualY && m === actualM,
+    });
+  }
+  return list;
+}
+function selectMonth(month: number) {
+  if (props.disabled) return;
+  viewMonth.value = month;
+  setViewMode("day");
+  if (props.onMonthChange) {
+    props.onMonthChange(month, getViewYear());
+  }
+}
+function getWeekDays() {
+  const startOn = props.weekStartsOn !== undefined ? props.weekStartsOn : 1;
+  const idLabels = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+  const enLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const loc = props.locale || "id-ID";
+  const base = loc.toLowerCase().indexOf("en") === 0 ? enLabels : idLabels;
+  const result: string[] = [];
+  for (let i = 0; i < 7; i++) {
+    const idx = (startOn + i) % 7;
+    result.push(base[idx]);
+  }
+  return result;
+}
+function prevMonth() {
+  if (props.disabled) return;
+  let nextM = viewMonth.value - 1;
+  let nextY = viewYear.value;
+  if (nextM < 1) {
+    nextM = 12;
+    nextY -= 1;
+  }
+  viewMonth.value = nextM;
+  viewYear.value = nextY;
+  if (props.onMonthChange) {
+    props.onMonthChange(nextM, nextY);
+  }
+}
+function nextMonth() {
+  if (props.disabled) return;
+  let nextM = viewMonth.value + 1;
+  let nextY = viewYear.value;
+  if (nextM > 12) {
+    nextM = 1;
+    nextY += 1;
+  }
+  viewMonth.value = nextM;
+  viewYear.value = nextY;
+  if (props.onMonthChange) {
+    props.onMonthChange(nextM, nextY);
+  }
+}
+function prevYear() {
+  if (props.disabled) return;
+  const nextY = viewYear.value - 1;
+  viewYear.value = nextY;
+  if (props.onMonthChange) {
+    props.onMonthChange(viewMonth.value, nextY);
+  }
+}
+function nextYear() {
+  if (props.disabled) return;
+  const nextY = viewYear.value + 1;
+  viewYear.value = nextY;
+  if (props.onMonthChange) {
+    props.onMonthChange(viewMonth.value, nextY);
+  }
+}
+function goToToday() {
+  if (props.disabled) return;
+  const today = new Date();
+  viewYear.value = today.getFullYear();
+  viewMonth.value = today.getMonth() + 1;
+  decadeStart.value = null;
+  setViewMode("day");
+  handleSelectDate(toDateString(today));
+  if (props.onMonthChange) {
+    props.onMonthChange(viewMonth.value, viewYear.value);
+  }
+}
+function isToday(dateStr: string) {
+  const todayStr = toDateString(new Date());
+  return dateStr === todayStr;
+}
+function isDateDisabledCheck(date: Date) {
+  if (props.disabled) return true;
+  const minDate = parseDate(props.min || props.minValue);
+  if (
+    minDate &&
+    date <
+      new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())
+  ) {
+    return true;
+  }
+  const maxDate = parseDate(props.max || props.maxValue);
+  if (
+    maxDate &&
+    date >
+      new Date(
+        maxDate.getFullYear(),
+        maxDate.getMonth(),
+        maxDate.getDate(),
+        23,
+        59,
+        59
+      )
+  ) {
+    return true;
+  }
+  if (props.isDateDisabled) {
+    return props.isDateDisabled(date);
+  }
+  return false;
+}
+function isDateUnavailableCheck(date: Date) {
+  if (props.isDateUnavailable) {
+    return props.isDateUnavailable(date);
+  }
+  return false;
+}
+function getDateMarker(dateStr: string) {
+  if (!props.dateMarkers || !props.dateMarkers.length) return null;
+  for (let i = 0; i < props.dateMarkers.length; i++) {
+    if (props.dateMarkers[i].date === dateStr) {
+      return props.dateMarkers[i];
+    }
+  }
+  return null;
+}
+function isSelected(dateStr: string) {
+  if (props.range) {
+    return isRangeStart(dateStr) || isRangeEnd(dateStr);
+  }
+  if (props.multiple) {
+    const rawList =
+      props.value !== undefined
+        ? Array.isArray(props.value)
+          ? props.value
+          : []
+        : selectedMultiple.value;
+    const strList = rawList.map((item: any) =>
+      typeof item === "string"
+        ? item
+        : item instanceof Date
+        ? toDateString(item)
+        : ""
+    );
+    return strList.indexOf(dateStr) !== -1;
+  }
+  const current =
+    props.value !== undefined
+      ? typeof props.value === "string"
+        ? props.value
+        : props.value instanceof Date
+        ? toDateString(props.value)
+        : null
+      : selectedSingle.value;
+  if (!current && props.defaultValue && !selectedSingle.value) {
+    const def =
+      typeof props.defaultValue === "string"
+        ? props.defaultValue
+        : props.defaultValue instanceof Date
+        ? toDateString(props.defaultValue)
+        : null;
+    return def === dateStr;
+  }
+  return current === dateStr;
+}
+function isRangeStart(dateStr: string) {
+  if (!props.range) return false;
+  const raw =
+    props.value && props.value.start
+      ? props.value.start
+      : props.defaultValue && props.defaultValue.start
+      ? props.defaultValue.start
+      : rangeStart.value;
+  const start =
+    typeof raw === "string"
+      ? raw
+      : raw instanceof Date
+      ? toDateString(raw)
+      : null;
+  return start === dateStr;
+}
+function isRangeEnd(dateStr: string) {
+  if (!props.range) return false;
+  const raw =
+    props.value && props.value.end
+      ? props.value.end
+      : props.defaultValue && props.defaultValue.end
+      ? props.defaultValue.end
+      : rangeEnd.value;
+  const end =
+    typeof raw === "string"
+      ? raw
+      : raw instanceof Date
+      ? toDateString(raw)
+      : null;
+  return end === dateStr;
+}
+function isInRange(dateStr: string) {
+  if (!props.range) return false;
+  const rawStart =
+    props.value && props.value.start
+      ? props.value.start
+      : props.defaultValue && props.defaultValue.start
+      ? props.defaultValue.start
+      : rangeStart.value;
+  let rawEnd =
+    props.value && props.value.end
+      ? props.value.end
+      : props.defaultValue && props.defaultValue.end
+      ? props.defaultValue.end
+      : rangeEnd.value;
+  const start =
+    typeof rawStart === "string"
+      ? rawStart
+      : rawStart instanceof Date
+      ? toDateString(rawStart)
+      : null;
+  let end =
+    typeof rawEnd === "string"
+      ? rawEnd
+      : rawEnd instanceof Date
+      ? toDateString(rawEnd)
+      : null;
+  if (start && !end && hoverDate.value) {
+    end = hoverDate.value;
+  }
+  if (!start || !end) return false;
+  const minD = start < end ? start : end;
+  const maxD = start < end ? end : start;
+  return dateStr > minD && dateStr < maxD;
+}
+function getCellRangeClass(dateStr: string) {
+  if (!props.range) return "";
+  const isStart = isRangeStart(dateStr);
+  const isEnd = isRangeEnd(dateStr);
+  const inRange = isInRange(dateStr);
+  if (isStart && isEnd) return "ttdk-calendar-cell-range-single";
+  if (isStart) return "ttdk-calendar-cell-range-start";
+  if (isEnd) return "ttdk-calendar-cell-range-end";
+  if (inRange) return "ttdk-calendar-cell-range";
+  return "";
+}
+function handleDayHover(dateStr: string) {
+  if (!props.range || props.disabled || props.readOnly) return;
+  const rawStart =
+    props.value && props.value.start
+      ? props.value.start
+      : props.defaultValue && props.defaultValue.start
+      ? props.defaultValue.start
+      : rangeStart.value;
+  const rawEnd =
+    props.value && props.value.end
+      ? props.value.end
+      : props.defaultValue && props.defaultValue.end
+      ? props.defaultValue.end
+      : rangeEnd.value;
+  const start =
+    typeof rawStart === "string"
+      ? rawStart
+      : rawStart instanceof Date
+      ? toDateString(rawStart)
+      : null;
+  const end =
+    typeof rawEnd === "string"
+      ? rawEnd
+      : rawEnd instanceof Date
+      ? toDateString(rawEnd)
+      : null;
+  if (start && !end) {
+    hoverDate.value = dateStr;
+  }
+}
+function handleDayHoverLeave() {
+  if (hoverDate.value) {
+    hoverDate.value = null;
+  }
+}
+function handleSelectDate(dateStr: string) {
+  if (props.disabled || props.readOnly) return;
+  const dateObj = parseDate(dateStr);
+  if (!dateObj) return;
+  if (isDateDisabledCheck(dateObj) || isDateUnavailableCheck(dateObj)) {
+    return;
+  }
+  if (props.range) {
+    const rawStart =
+      props.value && props.value.start
+        ? props.value.start
+        : props.defaultValue && props.defaultValue.start
+        ? props.defaultValue.start
+        : rangeStart.value;
+    const rawEnd =
+      props.value && props.value.end
+        ? props.value.end
+        : props.defaultValue && props.defaultValue.end
+        ? props.defaultValue.end
+        : rangeEnd.value;
+    const curStart =
+      typeof rawStart === "string"
+        ? rawStart
+        : rawStart instanceof Date
+        ? toDateString(rawStart)
+        : null;
+    const curEnd =
+      typeof rawEnd === "string"
+        ? rawEnd
+        : rawEnd instanceof Date
+        ? toDateString(rawEnd)
+        : null;
+    if (!curStart || (curStart && curEnd)) {
+      rangeStart.value = dateStr;
+      rangeEnd.value = null;
+      hoverDate.value = null;
+      lastParsedKey.value = dateStr;
+      if (props.onValueChange) {
+        props.onValueChange({
+          start: dateStr,
+          end: null,
+        });
+      }
+    } else {
+      let startRes = curStart;
+      let endRes = dateStr;
+      if (dateStr < curStart) {
+        startRes = dateStr;
+        endRes = curStart;
+      }
+      rangeStart.value = startRes;
+      rangeEnd.value = endRes;
+      hoverDate.value = null;
+      if (props.onValueChange) {
+        props.onValueChange({
+          start: startRes,
+          end: endRes,
+        });
+      }
+    }
+  } else if (props.multiple) {
+    let currentList =
+      props.value !== undefined
+        ? Array.isArray(props.value)
+          ? [...props.value]
+          : []
+        : [...selectedMultiple.value];
+    const strList = currentList.map((item: any) =>
+      typeof item === "string" ? item : toDateString(item)
+    );
+    const idx = strList.indexOf(dateStr);
+    if (idx >= 0) {
+      strList.splice(idx, 1);
+    } else {
+      strList.push(dateStr);
+    }
+    selectedMultiple.value = strList;
+    if (props.onValueChange) {
+      props.onValueChange(strList);
+    }
+  } else {
+    selectedSingle.value = dateStr;
+    if (dateObj) {
+      viewYear.value = dateObj.getFullYear();
+      viewMonth.value = dateObj.getMonth() + 1;
+      lastParsedKey.value = dateStr;
+    }
+    if (props.onValueChange) {
+      props.onValueChange(dateStr);
+    }
+  }
+  if (props.onChange) {
+    props.onChange({
+      target: {
+        value: dateStr,
+      },
+      value: dateStr,
+    });
+  }
+}
+function getMonthWeeks(year: number, month: number) {
+  const startOn = props.weekStartsOn !== undefined ? props.weekStartsOn : 1;
+  const showOutside = props.showOutsideDays !== false;
+  const fixed = props.fixedWeeks !== false;
+  const todayStr = toDateString(new Date());
+
+  // Precompute disabled bounds
+  const minDateObj =
+    props.min || props.minValue ? parseDate(props.min || props.minValue) : null;
+  const maxDateObj =
+    props.max || props.maxValue ? parseDate(props.max || props.maxValue) : null;
+  const minTime = minDateObj
+    ? new Date(
+        minDateObj.getFullYear(),
+        minDateObj.getMonth(),
+        minDateObj.getDate()
+      ).getTime()
+    : null;
+  const maxTime = maxDateObj
+    ? new Date(
+        maxDateObj.getFullYear(),
+        maxDateObj.getMonth(),
+        maxDateObj.getDate(),
+        23,
+        59,
+        59
+      ).getTime()
+    : null;
+
+  // Precompute single selection
+  const selectedSingleStr =
+    !props.range && !props.multiple
+      ? props.value !== undefined
+        ? typeof props.value === "string"
+          ? props.value
+          : props.value instanceof Date
+          ? toDateString(props.value)
+          : null
+        : selectedSingle.value ||
+          (props.defaultValue
+            ? typeof props.defaultValue === "string"
+              ? props.defaultValue
+              : toDateString(props.defaultValue)
+            : null)
+      : null;
+
+  // Precompute range selection
+  let rStart: string | null = null;
+  let rEnd: string | null = null;
+  if (props.range) {
+    const rawS =
+      props.value && props.value.start
+        ? props.value.start
+        : props.defaultValue && props.defaultValue.start
+        ? props.defaultValue.start
+        : rangeStart.value;
+    const rawE =
+      props.value && props.value.end
+        ? props.value.end
+        : props.defaultValue && props.defaultValue.end
+        ? props.defaultValue.end
+        : rangeEnd.value;
+    rStart =
+      typeof rawS === "string"
+        ? rawS
+        : rawS instanceof Date
+        ? toDateString(rawS)
+        : null;
+    rEnd =
+      typeof rawE === "string"
+        ? rawE
+        : rawE instanceof Date
+        ? toDateString(rawE)
+        : null;
+    if (rStart && !rEnd && hoverDate.value) {
+      rEnd = hoverDate.value;
+    }
+  }
+  const rangeMin = rStart && rEnd ? (rStart < rEnd ? rStart : rEnd) : null;
+  const rangeMax = rStart && rEnd ? (rStart < rEnd ? rEnd : rStart) : null;
+
+  // Precompute multiple selection Set
+  const multipleSet: any = props.multiple
+    ? new Set(
+        (props.value !== undefined
+          ? Array.isArray(props.value)
+            ? props.value
+            : []
+          : selectedMultiple.value
+        ).map((item: any) =>
+          typeof item === "string"
+            ? item
+            : item instanceof Date
+            ? toDateString(item)
+            : ""
+        )
+      )
+    : null;
+
+  // Precompute marker map
+  const markerMap: any =
+    props.dateMarkers && props.dateMarkers.length
+      ? new Map(props.dateMarkers.map((m: any) => [m.date, m]))
+      : null;
+  const firstDay = new Date(year, month - 1, 1);
+  const lastDay = new Date(year, month, 0);
+  const totalDays = lastDay.getDate();
+  let firstDayIndex = firstDay.getDay() - startOn;
+  if (firstDayIndex < 0) firstDayIndex += 7;
+  const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
+  const days: any[] = [];
+  const buildCell = (d: number, dDate: Date, isCurMonth: boolean) => {
+    const dateStr = toDateString(dDate);
+    const dTime = dDate.getTime();
+    const isDisabled =
+      props.disabled ||
+      (minTime !== null && dTime < minTime) ||
+      (maxTime !== null && dTime > maxTime) ||
+      (props.isDateDisabled ? props.isDateDisabled(dDate) : false);
+    const isUnavailable = props.isDateUnavailable
+      ? props.isDateUnavailable(dDate)
+      : false;
+    const isRangeS = props.range ? rStart === dateStr : false;
+    const isRangeE = props.range ? rEnd === dateStr : false;
+    const inRange =
+      rangeMin !== null &&
+      rangeMax !== null &&
+      dateStr > rangeMin &&
+      dateStr < rangeMax;
+    const isSel = props.range
+      ? isRangeS || isRangeE
+      : props.multiple
+      ? multipleSet
+        ? multipleSet.has(dateStr)
+        : false
+      : dateStr === selectedSingleStr;
+    const rangeCls = !props.range
+      ? ""
+      : (isRangeS && isRangeE) || (isRangeS && !rEnd)
+      ? "ttdk-calendar-cell-range-single"
+      : isRangeS
+      ? "ttdk-calendar-cell-range-start"
+      : isRangeE
+      ? "ttdk-calendar-cell-range-end"
+      : inRange
+      ? "ttdk-calendar-cell-range"
+      : "";
+    const markerObj = markerMap ? markerMap.get(dateStr) || null : null;
+    return {
+      day: d,
+      dateStr: dateStr,
+      isCurrentMonth: isCurMonth,
+      isOutside: !isCurMonth,
+      date: dDate,
+      disabled: isDisabled,
+      unavailable: isUnavailable,
+      today: dateStr === todayStr,
+      selected: isSel,
+      inRange: inRange,
+      isRangeStart: isRangeS,
+      isRangeEnd: isRangeE,
+      rangeClass: rangeCls,
+      marker: markerObj,
+    };
+  };
+  for (let i = firstDayIndex - 1; i >= 0; i--) {
+    const d = prevMonthLastDay - i;
+    const prevMonthDate = new Date(year, month - 2, d);
+    days.push(buildCell(d, prevMonthDate, false));
+  }
+  for (let i = 1; i <= totalDays; i++) {
+    const curDate = new Date(year, month - 1, i);
+    days.push(buildCell(i, curDate, true));
+  }
+  const targetLength = fixed ? 42 : Math.ceil(days.length / 7) * 7;
+  let nextDayNum = 1;
+  while (days.length < targetLength) {
+    const nextMonthDate = new Date(year, month, nextDayNum);
+    days.push(buildCell(nextDayNum, nextMonthDate, false));
+    nextDayNum++;
+  }
+  const weeks: any[][] = [];
+  for (let i = 0; i < days.length; i += 7) {
+    weeks.push(days.slice(i, i + 7));
+  }
+  return weeks;
+}
+function getMonths() {
+  const count =
+    props.numberOfMonths && props.numberOfMonths > 1 ? props.numberOfMonths : 1;
+  const list: any[] = [];
+  for (let i = 0; i < count; i++) {
+    const y = getViewYear(i);
+    const m = getViewMonth(i);
+    list.push({
+      offset: i,
+      year: y,
+      month: m,
+      label: getMonthLabel(y, m),
+      monthName: getMonthOnlyLabel(y, m),
+      isFirst: i === 0,
+      isLast: i === count - 1,
+      weeks: getMonthWeeks(y, m),
+    });
+  }
+  return list;
+}
+</script>