@sdata/web-vue 1.19.0 → 2.1.1

package/es/calendar/style/token.scss

@@ -1,65 +1,69 @@
 @use '@style/theme/index.scss' as global;
-
-@forward '@style/theme/index.scss';
-@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
-
 @use 'sass:string';
-@use '@style/theme/index.scss' as *;
-
-$calendar-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
-
-$calendar-header-padding-horizontal: 24px;
-$calendar-header-padding-vertical: 24px;
-
-$calendar-panel-date-cell-padding-vertical: 4px;
-$calendar-panel-date-cell-circle-height: 24px;
-$calendar-panel-year-cell-padding-vertical: 4px;
-$calendar-panel-year-cell-circle-height: 24px;
-
-$calendar-color-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
-$calendar-color-bg-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
-$calendar-color-bg-switch-icon_hover: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
-);
 
-$calendar-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$calendar-color-cell-text-in-view: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$calendar-color-cell-text-not-in-view: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
-);
-$calendar-color-bg-circle_selected: global.$color-primary-6;
-$calendar-color-bg-cell-in-range: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
-);
-$calendar-color-bg-cell-disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
-$calendar-color-text-cell-range-boundary: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
-);
-$calendar-color-bg-cell-range-boundary: global.$color-primary-6;
-$calendar-color-bg-cell-hover-in-range: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
-);
-$calendar-color-text-cell-hover-range-boundary: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
-);
-$calendar-color-bg-cell-hover-range-boundary: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
-);
+$calendar-prefix-cls: string.unquote('#{global.$prefix}-calendar');
+$calendar-css-prefix: string.unquote('--#{global.$prefix}-calendar');
 
-$calendar-panel-color-text-cell_hover: global.$color-primary-6;
-$calendar-panel-color-bg-cell_hover: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
-);
-$calendar-panel-color-text-cell_selected: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
-);
-$calendar-panel-color-bg-cell_selected: global.$color-primary-6;
-$calendar-panel-color-current-time-dot: global.$color-primary-6;
+.#{$calendar-prefix-cls}--default-theme,
+[class$='-calendar--default-theme'] {
+  #{$calendar-css-prefix}-primary-color: #{global.$color-primary-6};
+  #{$calendar-css-prefix}-primary-sub-color: #{global.$color-primary-5};
+  #{$calendar-css-prefix}-primary-extra-color: #{global.$color-primary-4};
+  #{$calendar-css-prefix}-secondary-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2')
+  );
+  #{$calendar-css-prefix}-base-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+  );
+  #{$calendar-css-prefix}-contrast-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+  );
+  #{$calendar-css-prefix}-border-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+  );
+  #{$calendar-css-prefix}-header-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+  );
+  #{$calendar-css-prefix}-event-color: var(
+    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+  );
+  #{$calendar-css-prefix}-event-border-color: color-mix(
+    in srgb,
+    var(#{$calendar-css-prefix}-base-color) 12%,
+    transparent
+  );
+  #{$calendar-css-prefix}-border-radius: #{global.$radius-medium};
+  #{$calendar-css-prefix}-height: 500px;
+  #{$calendar-css-prefix}-min-cell-size: 1rem;
 
-// 不放到风格配置平台
-$calendar-panel-cell-boundary-border-radius: (
-  ($calendar-panel-date-cell-circle-height + $calendar-panel-date-cell-padding-vertical * 2) * 0.5
-);
-$calendar-color-box-shadow: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
-);
+  &.#{$calendar-prefix-cls}--dark,
+  &[class*='-calendar--dark'],
+  [sd-theme='dark'] & {
+    #{$calendar-css-prefix}-primary-color: color-mix(
+      in srgb,
+      #{global.$color-primary-6} 78%,
+      #0f172a
+    );
+    #{$calendar-css-prefix}-secondary-color: var(
+      string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+    );
+    #{$calendar-css-prefix}-base-color: var(
+      string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+    );
+    #{$calendar-css-prefix}-contrast-color: var(
+      string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+    );
+    #{$calendar-css-prefix}-border-color: color-mix(
+      in srgb,
+      var(#{$calendar-css-prefix}-base-color) 16%,
+      transparent
+    );
+    #{$calendar-css-prefix}-header-color: var(#{$calendar-css-prefix}-base-color);
+    #{$calendar-css-prefix}-event-color: var(#{$calendar-css-prefix}-base-color);
+    #{$calendar-css-prefix}-event-border-color: color-mix(
+      in srgb,
+      var(#{$calendar-css-prefix}-base-color) 40%,
+      transparent
+    );
+  }
+}

package/es/calendar/utils/conversions.d.ts

@@ -0,0 +1,3 @@
+export function minutesToPercentage(minutes: number, config: any): number;
+export function percentageToMinutes(percentage: number, config: any): number;
+export function pxToPercentage(y: number, containerEl: HTMLElement): number;

package/es/calendar/utils/conversions.js

@@ -0,0 +1,31 @@
+/**
+ * Converts minutes in the day to a percentage position.
+ *
+ * @param {Number} minutes time in minutes
+ */
+export const minutesToPercentage = (minutes, config) => {
+  const dayRangeMinutes = config.timeTo - config.timeFrom;
+  return ((minutes - config.timeFrom) * 100) / dayRangeMinutes;
+};
+
+/**
+ * Converts percentage position to minutes in the day.
+ *
+ * @param {Number} percentage time in percentage
+ */
+export const percentageToMinutes = (percentage, config) => {
+  const dayRangeMinutes = config.timeTo - config.timeFrom;
+  return ~~((percentage * dayRangeMinutes) / 100 + config.timeFrom);
+};
+
+/**
+ * Converts a pixel value to a percentage of the height of a container element.
+ *
+ * @param {number} y - The pixel value to be converted.
+ * @param {HTMLElement} containerEl - The container element whose height is used for the conversion.
+ * @returns {number} The percentage value corresponding to the pixel value.
+ */
+export const pxToPercentage = (y, containerEl) => {
+  const containerElHeight = containerEl.clientHeight;
+  return (y * 100) / containerElHeight;
+};

package/es/calendar/utils/date.d.ts

@@ -0,0 +1,26 @@
+export function createDateUtils(): {
+    addDays: (date: any, days: any) => Date;
+    subtractDays: (date: any, days: any) => Date;
+    addHours: (date: any, hours: any) => Date;
+    subtractHours: (date: any, hours: any) => Date;
+    addMinutes: (date: any, minutes: any) => Date;
+    subtractMinutes: (date: any, minutes: any) => Date;
+    snapToInterval: (input: number | Date, interval: number) => number | void;
+    getWeek: (date: any) => number;
+    isToday: (date: any) => boolean;
+    isSameDate: (date1: any, date2: any) => boolean;
+    isInRange: (date: any, rangeStart: any, rangeEnd: any) => boolean;
+    isLeapYear: (date: any) => boolean | 0;
+    getPreviousFirstDayOfWeek: (date: any) => Date;
+    stringToDate: (date: any) => Date;
+    dateToMinutes: (date: any) => any;
+    countDays: (start: any, end: any) => number;
+    datesInSameTimeStep: (date1: any, date2: any, timeStep: any) => boolean;
+    isValid: (date: any) => any;
+    formatDate: (date: Date, format?: string, _txts?: Object) => string;
+    formatDateLite: (date: any) => string;
+    formatTime: (date: Date | number, format?: string, _txts?: Object, round?: boolean) => string;
+    formatTimeLite: (date: any) => string;
+    formatMinutes: (minutes: any) => string;
+    updateTexts: () => void;
+};

package/es/calendar/utils/date.js

@@ -0,0 +1,253 @@
+/**
+ * Date utils for the calendar component.
+ *
+ * All date formatting delegates to the library's centralized dayjs instance
+ * (which has locale-aware month/weekday names, AM/PM, etc.). Calendar-specific
+ * pure-math helpers are kept as-is.
+ */
+
+import { dayjs } from '../../_utils/date';
+
+// ---------------------------------------------------------------------------
+// Format token mapping
+// ---------------------------------------------------------------------------
+
+/**
+ * Maps calendar-specific format tokens to dayjs equivalents.
+ * The only custom token is `{am}` / `{AM}` which maps to dayjs `A` (AM/PM).
+ * All other tokens (YYYY, MMMM, dddd, HH:mm, etc.) are identical in dayjs.
+ */
+const mapTokens = (fmt) => fmt.replace(/\{am\}/gi, 'A');
+
+// ---------------------------------------------------------------------------
+// Formatters
+// ---------------------------------------------------------------------------
+
+const formatDateLite = (date) => {
+  const m = date.getMonth() + 1;
+  const d = date.getDate();
+  return `${date.getFullYear()}-${m < 10 ? '0' : ''}${m}-${d < 10 ? '0' : ''}${d}`;
+};
+
+const formatTimeLite = (date) => {
+  const h = date.getHours();
+  const m = date.getMinutes();
+  return `${(h < 10 ? '0' : '') + h}:${(m < 10 ? '0' : '') + m}`;
+};
+
+/**
+ * Formats a date to the given format string using dayjs.
+ *
+ * @param {Date} date a JavaScript Date object to format.
+ * @param {String} format the wanted format. Default `'YYYY-MM-DD'`.
+ * @param {Object} _txts deprecated — kept for API compatibility, no longer used.
+ * @return {String} the formatted date.
+ */
+const formatDate = (date, format = 'YYYY-MM-DD', _txts = null) => {
+  if (!format) format = 'YYYY-MM-DD';
+  // Fast path for the most common format.
+  if (format === 'YYYY-MM-DD') return formatDateLite(date);
+  return dayjs(date).format(mapTokens(format));
+};
+
+/**
+ * Formats a time (from Date or number of minutes) to the given format.
+ *
+ * @param {Date | Number} date a JavaScript Date object or a time in minutes.
+ * @param {String} format the wanted format. Default `'HH:mm'`.
+ * @param {Object} _txts deprecated — kept for API compatibility.
+ * @param {Boolean} round if time is 23:59:59, rounds up to 24:00 for formatting only.
+ * @return {String} the formatted time.
+ */
+const formatTime = (date, format = 'HH:mm', _txts = null, round = false) => {
+  let shouldRound = false;
+  if (round && date instanceof Date) {
+    const [h, m, s] = [date.getHours(), date.getMinutes(), date.getSeconds()];
+    if (h + m + s === 23 + 59 + 59) shouldRound = true;
+  }
+
+  if (date instanceof Date && format === 'HH:mm')
+    return shouldRound ? '24:00' : formatTimeLite(date);
+
+  // Handle numeric input (minutes).
+  let d;
+  if (typeof date === 'number') {
+    const hours = Math.floor(date / 60);
+    const minutes = date % 60;
+    d = dayjs().startOf('day').set('hour', hours).set('minute', minutes).set('second', 0);
+  } else {
+    d = dayjs(date);
+  }
+
+  const dayjsFormat = mapTokens(format);
+  let formatted = d.format(dayjsFormat);
+
+  // Round 23:59:59 to 24:00 for display.
+  return shouldRound ? formatted.replace('23:59', '24:00') : formatted;
+};
+
+/**
+ * Formats minutes (number) to `HH:mm`.
+ */
+const formatMinutes = (minutes) => {
+  const h = Math.floor(minutes / 60)
+    .toString()
+    .padStart(2, '0');
+  const m = (minutes % 60).toString().padStart(2, '0');
+  return `${h}:${m}`;
+};
+
+// ---------------------------------------------------------------------------
+// Date manipulation
+// ---------------------------------------------------------------------------
+
+const addDays = (date, days) => dayjs(date).add(days, 'day').toDate();
+
+const subtractDays = (date, days) => dayjs(date).subtract(days, 'day').toDate();
+
+const addHours = (date, hours) => dayjs(date).add(hours, 'hour').toDate();
+
+const subtractHours = (date, hours) => dayjs(date).subtract(hours, 'hour').toDate();
+
+const addMinutes = (date, minutes) => dayjs(date).add(minutes, 'minute').toDate();
+
+const subtractMinutes = (date, minutes) => dayjs(date).subtract(minutes, 'minute').toDate();
+
+// ---------------------------------------------------------------------------
+// Date comparison
+// ---------------------------------------------------------------------------
+
+const isToday = (date) => dayjs(date).isSame(dayjs(), 'day');
+
+const isSameDate = (date1, date2) => {
+  if (!date1 || !date2) {
+    console.warn(
+      `Calendar: missing date${!date1 ? '1' : '2'} parameter for comparison with \`isSameDate(date1, date2)\`.`,
+    );
+    return false;
+  }
+  return dayjs(date1).isSame(dayjs(date2), 'day');
+};
+
+const isInRange = (date, rangeStart, rangeEnd) => {
+  return dayjs(date).isBetween(rangeStart, rangeEnd, null, '[]');
+};
+
+const isValid = (date) => date && date instanceof Date && !isNaN(date);
+
+const isLeapYear = (date) => {
+  const year = date.getFullYear();
+  return !(year % 400) || (year % 100 && !(year % 4));
+};
+
+// ---------------------------------------------------------------------------
+// Week & calendar helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the ISO week number for the given date.
+ * The locale's `weekStart` must be set via `initializeDateLocale()` beforehand
+ * so that `dayjs.week()` returns the correct value.
+ */
+const getWeek = (date) => dayjs(date).week();
+
+/**
+ * Returns the first day of the week containing `date`.
+ * Respects the locale's `weekStart` setting configured via `initializeDateLocale()`.
+ */
+const getPreviousFirstDayOfWeek = (date) => dayjs(date).startOf('week').toDate();
+
+/**
+ * Converts a string or Date to a JavaScript Date object.
+ */
+const stringToDate = (date) => {
+  if (date instanceof Date) return date;
+  if (!date) return new Date(date);
+  return dayjs(date).toDate();
+};
+
+/**
+ * Returns the associated time in minutes (hours * 60 + minutes).
+ */
+const dateToMinutes = (date) => date.getHours() * 60 + date.getMinutes();
+
+/**
+ * Counts the number of distinct days this date range spans onto.
+ * E.g. countDays(2019-11-02 18:00, 2019-11-03 02:00) = 2
+ */
+const countDays = (start, end) => {
+  const s = dayjs(start).startOf('day');
+  const e = dayjs(end).startOf('day');
+  return e.diff(s, 'day') + 1;
+};
+
+/**
+ * Checks if two dates are within the same time step (useful in overlapping events).
+ */
+const datesInSameTimeStep = (date1, date2, timeStep) => {
+  return Math.abs(date1.getTime() - date2.getTime()) <= timeStep * 60 * 1000;
+};
+
+/**
+ * Adjusts the given input to the nearest interval.
+ *
+ * @param {number|Date} input - The input to be adjusted. Can be a number representing minutes or a Date object.
+ * @param {number} interval - The interval to snap to.
+ * @returns {number|void}
+ */
+const snapToInterval = (input, interval) => {
+  const adjustMinutes = (minutes) => {
+    const remainder = minutes % interval;
+    if (remainder !== 0) {
+      minutes += remainder >= interval / 2 ? interval - remainder : -remainder;
+    }
+    return minutes;
+  };
+
+  if (typeof input === 'number') return adjustMinutes(input);
+  if (input instanceof Date) {
+    let minutes = adjustMinutes(input.getMinutes());
+    if (minutes >= 60) {
+      input.setHours(input.getHours() + 1);
+      minutes = 0;
+    }
+    input.setMinutes(minutes, 0, 0);
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates the date utils object consumed by all calendar internals.
+ * The returned method signatures are kept stable so that component files
+ * need no changes.
+ */
+export const createDateUtils = () => ({
+  addDays,
+  subtractDays,
+  addHours,
+  subtractHours,
+  addMinutes,
+  subtractMinutes,
+  snapToInterval,
+  getWeek,
+  isToday,
+  isSameDate,
+  isInRange,
+  isLeapYear,
+  getPreviousFirstDayOfWeek,
+  stringToDate,
+  dateToMinutes,
+  countDays,
+  datesInSameTimeStep,
+  isValid,
+  formatDate,
+  formatDateLite,
+  formatTime,
+  formatTimeLite,
+  formatMinutes,
+  // Kept as no-op for backward compat (config.js calls it).
+  updateTexts: () => {},
+});

package/es/calendar/utils/special-hours-allow-events.d.ts

@@ -0,0 +1,28 @@
+export function eventRangeViolatesAllowEvents({ start, end, schedule, disallowed, hasSchedules, }: Date): boolean;
+export function maxValidEndForFixedStart(start: any, endCandidate: any, schedule: any, disallowed: any, hasSchedules: any): any;
+export function minValidStartForFixedEnd(end: any, startCandidate: any, schedule: any, disallowed: any, hasSchedules: any): any;
+export function clampDragCreateDayMinutes({ anchorDayMinutes, cursorDayMinutes, snappedLow, snappedHigh, cellDate, schedule, disallowed, hasSchedules, }: {
+    anchorDayMinutes: any;
+    cursorDayMinutes: any;
+    snappedLow: any;
+    snappedHigh: any;
+    cellDate: any;
+    schedule: any;
+    disallowed: any;
+    hasSchedules: any;
+}): {
+    low: any;
+    high: any;
+};
+export function clampResizeProposedRange({ proposedStart, proposedEnd, prevStart, prevEnd, schedule, disallowed, hasSchedules, }: {
+    proposedStart: any;
+    proposedEnd: any;
+    prevStart: any;
+    prevEnd: any;
+    schedule: any;
+    disallowed: any;
+    hasSchedules: any;
+}): {
+    start: any;
+    end: any;
+};