@type-dom/ui 0.1.0 → 0.1.2

package/src/components/form/td-date-picker/composables/use-basic-date-table.js

@@ -0,0 +1,488 @@
+"use strict";
+// // import { computed, nextTick, ref, unref, watch } from 'vue'
+// import dayjs from 'dayjs';
+// import { flatten } from 'lodash';
+// // import { useLocale, useNamespace } from '@element-plus/hooks'
+// // import { castArray, isArray } from '@element-plus/utils'
+// //
+// // import type { SetupContext } from 'vue'
+// import type { Dayjs } from 'dayjs';
+// import { AnyFn, nextTick } from '@type-dom/framework';
+// import { computed, signal, unref, watch } from '@type-dom/signals';
+// import { castArray, isArray } from '@type-dom/utils';
+// import { useNamespace } from '../../../../hooks/use-namespace';
+// import { useLocale } from '../../../../hooks/use-locale';
+// import type {
+//   BasicDateTableEmits,
+//   BasicDateTableProps,
+// } from '../props/basic-date-table';
+// import type { DateCell } from '../date-picker.type';
+// import { buildPickerTable } from '../utils';
+//
+// const isNormalDay = (type = '') => {
+//   return ['normal', 'today'].includes(type);
+// };
+//
+// export const useBasicDateTable = (props: BasicDateTableProps, emit: AnyFn) => {
+//   const { lang } = useLocale();
+//   const tbodyRef = signal<HTMLElement>();
+//   const currentCellRef = signal<HTMLElement>();
+//   // data
+//   const lastRow = signal<number>();
+//   const lastColumn = signal<number>();
+//   const tableRows = signal<DateCell[][]>([[], [], [], [], [], []]);
+//
+//   let focusWithClick = false;
+//
+//   // todo better way to get Day.js locale object
+//   const firstDayOfWeek = (props.date as any).$locale().weekStart || 7;
+//   const WEEKS_CONSTANT = props
+//     .date!.locale('en')
+//     // .localeData() // todo
+//     // .weekdaysShort()
+//     // .map((_) => _.toLowerCase());
+//
+//   const offsetDay = computed(() => {
+//     // Sunday 7(0), cal the left and right offset days, 3217654, such as Monday is -1, the is to adjust the position of the first two rows of dates
+//     return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
+//   });
+//
+//   const startDate = computed(() => {
+//     const startDayOfMonth = props.date?.startOf('month');
+//     return startDayOfMonth?.subtract(startDayOfMonth.day() || 7, 'day');
+//   });
+//
+//   const WEEKS = computed(() => {
+//     return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(
+//       firstDayOfWeek,
+//       firstDayOfWeek + 7
+//     );
+//   });
+//
+//   const hasCurrent = computed<boolean>(() => {
+//     return flatten(unref(rows)).some((row) => {
+//       return row.isCurrent;
+//     });
+//   });
+//
+//   const days = computed(() => {
+//     const startOfMonth = props.date?.startOf('month');
+//     const startOfMonthDay = startOfMonth?.day() || 7; // day of first day
+//     const dateCountOfMonth = startOfMonth?.daysInMonth();
+//
+//     const dateCountOfLastMonth = startOfMonth
+//       ?.subtract(1, 'month')
+//       .daysInMonth();
+//
+//     return {
+//       startOfMonthDay,
+//       dateCountOfMonth,
+//       dateCountOfLastMonth,
+//     };
+//   });
+//
+//   const selectedDate = computed(() => {
+//     return props.selectionMode === 'dates'
+//       ? (castArray(props.parsedValue) as Dayjs[])
+//       : ([] as Dayjs[]);
+//   });
+//
+//   // Return value indicates should the counter be incremented
+//   type CellCoordinate = { columnIndex: number; rowIndex: number };
+//   type CellMeta = CellCoordinate & {
+//     count: number;
+//   };
+//   const setDateText = (
+//     cell: DateCell,
+//     { count, rowIndex, columnIndex }: CellMeta
+//   ): boolean => {
+//     const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } =
+//       unref(days);
+//     const offset = unref(offsetDay);
+//     if (rowIndex >= 0 && rowIndex <= 1) {
+//       const numberOfDaysFromPreviousMonth =
+//         startOfMonthDay + offset < 0
+//           ? 7 + startOfMonthDay + offset
+//           : startOfMonthDay + offset;
+//
+//       if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) {
+//         cell.text = count;
+//         return true;
+//       } else {
+//         cell.text =
+//           dateCountOfLastMonth! -
+//           (numberOfDaysFromPreviousMonth - (columnIndex % 7)) +
+//           1 +
+//           rowIndex * 7;
+//         cell.type = 'prev-month';
+//       }
+//     } else {
+//       if (count <= dateCountOfMonth!) {
+//         cell.text = count;
+//       } else {
+//         cell.text = count - dateCountOfMonth!;
+//         cell.type = 'next-month';
+//       }
+//       return true;
+//     }
+//     return false;
+//   };
+//
+//   const setCellMetadata = (
+//     cell: DateCell,
+//     { columnIndex, rowIndex }: CellCoordinate,
+//     count: number
+//   ) => {
+//     const { disabledDate, cellClassName } = props;
+//     const _selectedDate = unref(selectedDate);
+//     const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
+//
+//     const cellDate = cell.dayjs!.toDate();
+//     cell.selected = _selectedDate.find((d) => d.isSame(cell.dayjs, 'day'));
+//     cell.isSelected = !!cell.selected;
+//     cell.isCurrent = isCurrent(cell);
+//     cell.disabled = disabledDate?.(cellDate);
+//     cell.customClass = cellClassName?.(cellDate);
+//     return shouldIncrement;
+//   };
+//
+//   const setRowMetadata = (row: DateCell[]) => {
+//     if (props.selectionMode === 'week') {
+//       const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
+//       const isActive = isWeekActive(row[start + 1]);
+//       row[start].inRange = isActive;
+//       row[start].start = isActive;
+//       row[end].inRange = isActive;
+//       row[end].end = isActive;
+//     }
+//   };
+//
+//   const rows = computed(() => {
+//     const { minDate, maxDate, rangeState, showWeekNumber } = props;
+//
+//     const offset = unref(offsetDay);
+//     const rows_ = unref(tableRows);
+//     const dateUnit = 'day';
+//     let count = 1;
+//
+//     if (showWeekNumber) {
+//       for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
+//         if (!rows_[rowIndex][0]) {
+//           rows_[rowIndex][0] = {
+//             type: 'week',
+//             text: unref(startDate)
+//               ?.add(rowIndex * 7 + 1, dateUnit)
+//               ?.week(),
+//           };
+//         }
+//       }
+//     }
+//
+//     buildPickerTable({ row: 6, column: 7 }, rows_, {
+//       startDate: minDate,
+//       columnIndexOffset: showWeekNumber ? 1 : 0,
+//       nextEndDate:
+//         rangeState?.endDate ||
+//         maxDate ||
+//         (rangeState?.selecting && minDate) ||
+//         null,
+//       now: dayjs().locale(unref(lang)).startOf(dateUnit),
+//       unit: dateUnit,
+//       relativeDateGetter: (idx: number) =>
+//         unref(startDate)?.add(idx - offset, dateUnit)!,
+//       setCellMetadata: (...args) => {
+//         if (setCellMetadata(...args, count)) {
+//           count += 1;
+//         }
+//       },
+//
+//       setRowMetadata,
+//     });
+//
+//     return rows_;
+//   });
+//
+//   watch(
+//     () => props.date,
+//     async () => {
+//       if (unref(tbodyRef)?.contains(document.activeElement)) {
+//         await nextTick();
+//         await focus();
+//         // currentCellRef.value?.focus()
+//       }
+//     }
+//   );
+//
+//   const focus = async () => unref(currentCellRef)?.focus();
+//
+//   const isCurrent = (cell: DateCell): boolean => {
+//     return (
+//       props.selectionMode === 'date' &&
+//       isNormalDay(cell.type) &&
+//       cellMatchesDate(cell, props.parsedValue as Dayjs)
+//     );
+//   };
+//
+//   const cellMatchesDate = (cell: DateCell, date: Dayjs) => {
+//     if (!date) return false;
+//     return dayjs(date)
+//       .locale(unref(lang))
+//       .isSame(props.date?.date(Number(cell.text)), 'day');
+//   };
+//
+//   const getDateOfCell = (row: number, column: number) => {
+//     const offsetFromStart =
+//       row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - unref(offsetDay);
+//     return unref(startDate)?.add(offsetFromStart, 'day');
+//   };
+//
+//   const handleMouseMove = (event: MouseEvent) => {
+//     if (!props.rangeState?.selecting) return;
+//
+//     let target = event.target as HTMLElement;
+//     if (target.tagName === 'SPAN') {
+//       target = target.parentNode?.parentNode as HTMLElement;
+//     }
+//     if (target.tagName === 'DIV') {
+//       target = target.parentNode as HTMLElement;
+//     }
+//     if (target.tagName !== 'TD') return;
+//
+//     const row = (target.parentNode as HTMLTableRowElement).rowIndex - 1;
+//     const column = (target as HTMLTableCellElement).cellIndex;
+//
+//     // can not select disabled date
+//     if (unref(rows)[row][column].disabled) return;
+//
+//     // only update rangeState when mouse moves to a new cell
+//     // this avoids frequent Date object creation and improves performance
+//     if (row !== unref(lastRow) || column !== unref(lastColumn)) {
+//       lastRow.set(row);
+//       lastColumn.set(column);
+//       emit('changerange', {
+//         selecting: true,
+//         endDate: getDateOfCell(row, column),
+//       });
+//     }
+//   };
+//
+//   const isSelectedCell = (cell: DateCell) => {
+//     return (
+//       (!unref(hasCurrent) && cell?.text === 1 && cell.type === 'normal') ||
+//       cell.isCurrent
+//     );
+//   };
+//
+//   const handleFocus = (event: FocusEvent) => {
+//     if (focusWithClick || unref(hasCurrent) || props.selectionMode !== 'date')
+//       return;
+//     handlePickDate(event, true);
+//   };
+//
+//   const handleMouseDown = (event: MouseEvent) => {
+//     const target = (event.target as HTMLElement).closest('td');
+//     if (!target) return;
+//     focusWithClick = true;
+//   };
+//
+//   const handleMouseUp = (event: MouseEvent) => {
+//     const target = (event.target as HTMLElement).closest('td');
+//     if (!target) return;
+//     focusWithClick = false;
+//   };
+//
+//   const handleRangePick = (newDate: Dayjs) => {
+//     if (!props.rangeState?.selecting || !props.minDate) {
+//       emit('pick', { minDate: newDate, maxDate: null });
+//       emit('select', true);
+//     } else {
+//       if (newDate >= props.minDate) {
+//         emit('pick', { minDate: props.minDate, maxDate: newDate });
+//       } else {
+//         emit('pick', { minDate: newDate, maxDate: props.minDate });
+//       }
+//       emit('select', false);
+//     }
+//   };
+//
+//   const handleWeekPick = (newDate: Dayjs) => {
+//     const weekNumber = newDate.week();
+//     const value = `${newDate.year()}w${weekNumber}`;
+//     emit('pick', {
+//       year: newDate.year(),
+//       week: weekNumber,
+//       value,
+//       date: newDate.startOf('week'),
+//     });
+//   };
+//
+//   const handleDatesPick = (newDate: Dayjs, selected: boolean) => {
+//     const newValue = selected
+//       ? castArray(props.parsedValue).filter(
+//           (d) => d?.valueOf() !== newDate.valueOf()
+//         )
+//       : castArray(props.parsedValue).concat([newDate]);
+//     emit('pick', newValue);
+//   };
+//
+//   const handlePickDate = (
+//     event: FocusEvent | MouseEvent,
+//     isKeyboardMovement = false
+//   ) => {
+//     const target = (event.target as HTMLElement).closest('td');
+//
+//     if (!target) return;
+//
+//     const row = (target.parentNode as HTMLTableRowElement).rowIndex - 1;
+//     const column = (target as HTMLTableCellElement).cellIndex;
+//     const cell = unref(rows)[row][column];
+//
+//     if (cell.disabled || cell.type === 'week') return;
+//
+//     const newDate = getDateOfCell(row, column)!;
+//
+//     switch (props.selectionMode) {
+//       case 'range': {
+//         handleRangePick(newDate);
+//         break;
+//       }
+//       case 'date': {
+//         emit('pick', newDate, isKeyboardMovement);
+//         break;
+//       }
+//       case 'week': {
+//         handleWeekPick(newDate);
+//         break;
+//       }
+//       case 'dates': {
+//         handleDatesPick(newDate, !!cell.selected);
+//         break;
+//       }
+//       default: {
+//         break;
+//       }
+//     }
+//   };
+//
+//   const isWeekActive = (cell: DateCell) => {
+//     if (props.selectionMode !== 'week') return false;
+//     let newDate = props.date?.startOf('day')!;
+//
+//     if (cell.type === 'prev-month') {
+//       newDate = newDate.subtract(1, 'month');
+//     }
+//
+//     if (cell.type === 'next-month') {
+//       newDate = newDate.add(1, 'month');
+//     }
+//
+//     newDate = newDate.date(Number.parseInt(cell.text as any, 10));
+//
+//     if (props.parsedValue && !isArray(props.parsedValue)) {
+//       const dayOffset =
+//         ((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1;
+//       const weekDate = props.parsedValue.subtract(dayOffset, 'day');
+//       return weekDate.isSame(newDate, 'day');
+//     }
+//     return false;
+//   };
+//
+//   return {
+//     WEEKS,
+//     rows,
+//     tbodyRef,
+//     currentCellRef,
+//
+//     // cellMatchesDate,
+//     // getDateOfCell,
+//     focus,
+//     isCurrent,
+//     isWeekActive,
+//     isSelectedCell,
+//
+//     handlePickDate,
+//     handleMouseUp,
+//     handleMouseDown,
+//     handleMouseMove,
+//     handleFocus,
+//   };
+// };
+//
+// export const useBasicDateTableDOM = (
+//   props: BasicDateTableProps,
+//   {
+//     isCurrent,
+//     isWeekActive,
+//   }: Pick<ReturnType<typeof useBasicDateTable>, 'isCurrent' | 'isWeekActive'>
+// ) => {
+//   const ns = useNamespace('date-table');
+//   const { t } = useLocale();
+//
+//   const tableKls = computed(() => [
+//     ns.b(),
+//     { 'is-week-mode': props.selectionMode === 'week' },
+//   ]);
+//
+//   const tableLabel = computed(() => t('el.datepicker.dateTablePrompt'));
+//   const weekLabel = computed(() => t('el.datepicker.week'));
+//
+//   const getCellClasses = (cell: DateCell) => {
+//     const classes: string[] = [];
+//     if (isNormalDay(cell.type) && !cell.disabled) {
+//       classes.push('available');
+//       if (cell.type === 'today') {
+//         classes.push('today');
+//       }
+//     } else {
+//       classes.push(cell.type!);
+//     }
+//
+//     if (isCurrent(cell)) {
+//       classes.push('current');
+//     }
+//
+//     if (
+//       cell.inRange &&
+//       (isNormalDay(cell.type) || props.selectionMode === 'week')
+//     ) {
+//       classes.push('in-range');
+//
+//       if (cell.start) {
+//         classes.push('start-date');
+//       }
+//
+//       if (cell.end) {
+//         classes.push('end-date');
+//       }
+//     }
+//
+//     if (cell.disabled) {
+//       classes.push('disabled');
+//     }
+//
+//     if (cell.selected) {
+//       classes.push('selected');
+//     }
+//
+//     if (cell.customClass) {
+//       classes.push(cell.customClass);
+//     }
+//
+//     return classes;
+//   };
+//
+//   const getRowKls = (cell: DateCell) => [
+//     ns.e('row'),
+//     { current: isWeekActive(cell) },
+//   ];
+//
+//   return {
+//     tableKls,
+//     tableLabel,
+//     weekLabel,
+//
+//     getCellClasses,
+//     getRowKls,
+//     t,
+//   };
+// };

package/src/components/form/td-date-picker/composables/use-month-range-header.d.ts

@@ -0,0 +1,16 @@
+import type { Dayjs } from 'dayjs';
+import { ToRef, Ref } from '@type-dom/signals';
+export declare const useMonthRangeHeader: ({ unlinkPanels, leftDate, rightDate, }: {
+    unlinkPanels: ToRef<boolean>;
+    leftDate: Ref<Dayjs>;
+    rightDate: Ref<Dayjs>;
+}) => {
+    leftPrevYear: () => void;
+    rightNextYear: () => void;
+    leftNextYear: () => void;
+    rightPrevYear: () => void;
+    leftLabel: import("@type-dom/signals").Computed<string>;
+    rightLabel: import("@type-dom/signals").Computed<string>;
+    leftYear: import("@type-dom/signals").Computed<number>;
+    rightYear: import("@type-dom/signals").Computed<number>;
+};

package/src/components/form/td-date-picker/composables/use-month-range-header.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMonthRangeHeader = void 0;
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../../hooks/use-locale");
+const useMonthRangeHeader = ({ unlinkPanels, leftDate, rightDate, }) => {
+    const { t } = (0, use_locale_1.useLocale)();
+    const leftPrevYear = () => {
+        leftDate.set(leftDate.get().subtract(1, 'year'));
+        if (!unlinkPanels.get()) {
+            rightDate.set(rightDate.get().subtract(1, 'year'));
+        }
+    };
+    const rightNextYear = () => {
+        if (!unlinkPanels.get()) {
+            leftDate.set(leftDate.get().add(1, 'year'));
+        }
+        rightDate.set(rightDate.get().add(1, 'year'));
+    };
+    const leftNextYear = () => {
+        leftDate.set(leftDate.get().add(1, 'year'));
+    };
+    const rightPrevYear = () => {
+        rightDate.set(rightDate.get().subtract(1, 'year'));
+    };
+    const leftLabel = (0, signals_1.computed)(() => {
+        return `${leftDate.get().year()} ${t('el.datepicker.year')}`;
+    });
+    const rightLabel = (0, signals_1.computed)(() => {
+        return `${rightDate.get().year()} ${t('el.datepicker.year')}`;
+    });
+    const leftYear = (0, signals_1.computed)(() => {
+        return leftDate.get().year();
+    });
+    const rightYear = (0, signals_1.computed)(() => {
+        return rightDate.get().year() === leftDate.get().year()
+            ? leftDate.get().year() + 1
+            : rightDate.get().year();
+    });
+    return {
+        leftPrevYear,
+        rightNextYear,
+        leftNextYear,
+        rightPrevYear,
+        leftLabel,
+        rightLabel,
+        leftYear,
+        rightYear,
+    };
+};
+exports.useMonthRangeHeader = useMonthRangeHeader;

package/src/components/form/td-date-picker/composables/use-range-picker.d.ts

@@ -0,0 +1,60 @@
+import type { Dayjs } from 'dayjs';
+import { Ref } from '@type-dom/signals';
+import type { PanelRangeSharedProps, RangeState } from '../props/shared';
+import type { DefaultValue } from '../utils';
+type UseRangePickerProps = {
+    onParsedValueChanged: (minDate: Dayjs | undefined, maxDate: Dayjs | undefined) => void;
+    defaultValue: Ref<DefaultValue>;
+    leftDate: Ref<Dayjs>;
+    rightDate: Ref<Dayjs>;
+    unit: 'month' | 'year';
+};
+export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultValue, leftDate, rightDate, unit, onParsedValueChanged, }: UseRangePickerProps) => {
+    minDate: import("@type-dom/signals").Signal<Dayjs | undefined>;
+    maxDate: import("@type-dom/signals").Signal<Dayjs | undefined>;
+    rangeState: import("@type-dom/signals").Signal<RangeState>;
+    lang: Ref<string>;
+    ppNs: {
+        namespace: import("@type-dom/signals").Computed<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | "" | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    drpNs: {
+        namespace: import("@type-dom/signals").Computed<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | "" | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    handleChangeRange: (val: RangeState) => void;
+    handleRangeConfirm: (visible?: boolean) => void;
+    handleShortcutClick: (shortcut: import("./use-shortcut").Shortcut) => void;
+    onSelect: (selecting: boolean) => void;
+    onReset: (parsedValue: PanelRangeSharedProps["parsedValue"]) => void;
+    t: import("../../../../hooks/use-locale").Translator;
+};
+export {};