@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlCalendar.svelte

@@ -1,139 +1,98 @@
-<script lang="ts">
-  import { WEEKDAY_LABELS, type CalendarCell } from './DateTimeCtrl.utils';
-
-  export interface Props {
-    cells: CalendarCell[];
-    isDateSelectable?: (isoDate: string) => boolean;
-    monthLabel: string;
-    onNext?: () => void;
-    onPrev?: () => void;
-    onSelect?: (isoDate: string) => void;
-    selectedIso?: string;
-  }
-
-  let {
-    cells,
-    isDateSelectable,
-    monthLabel,
-    onNext,
-    onPrev,
-    onSelect,
-    selectedIso,
-  }: Props = $props();
-
-  function isCellDisabled(cell: CalendarCell): boolean {
-    if (!cell.inCurrentMonth) {
-      return true;
-    }
-
-    if (!isDateSelectable) {
-      return false;
-    }
-
-    return !isDateSelectable(cell.isoDate);
-  }
-
-  function focusFirstAvailable(): void {
-    if (typeof document === 'undefined') {
-      return;
-    }
-
-    const first = cells.find((cell) => !isCellDisabled(cell));
-    if (!first) {
-      return;
-    }
-
-    const target = document.querySelector<HTMLButtonElement>(`button[data-iso="${first.isoDate}"]`);
-    target?.focus();
-  }
-
-  function focusFromIndex(startIndex: number, step: number): void {
-    if (typeof document === 'undefined') {
-      return;
-    }
-
-    let index = startIndex + step;
-    while (index >= 0 && index < cells.length) {
-      const nextCell = cells[index];
-      if (!isCellDisabled(nextCell)) {
-        const target = document.querySelector<HTMLButtonElement>(
-          `button[data-iso="${nextCell.isoDate}"]`,
-        );
-        target?.focus();
-        return;
-      }
-      index += step;
-    }
-  }
-
-  function handleDayKeydown(event: KeyboardEvent, index: number, cell: CalendarCell): void {
-    if (isCellDisabled(cell)) {
-      return;
-    }
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onSelect?.(cell.isoDate);
-      return;
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      focusFromIndex(index, 1);
-      return;
-    }
-
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      focusFromIndex(index, -1);
-      return;
-    }
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      focusFromIndex(index, 7);
-      return;
-    }
-
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      focusFromIndex(index, -7);
-      return;
-    }
-
-    if (event.key === 'Home') {
-      event.preventDefault();
-      focusFirstAvailable();
-      return;
-    }
-
-    if (event.altKey && event.key === 'PageUp') {
-      event.preventDefault();
-      for (let i = 0; i < 12; i += 1) {
-        onPrev?.();
-      }
-      return;
-    }
-
-    if (event.altKey && event.key === 'PageDown') {
-      event.preventDefault();
-      for (let i = 0; i < 12; i += 1) {
-        onNext?.();
-      }
-      return;
-    }
-
-    if (event.key === 'PageUp') {
-      event.preventDefault();
-      onPrev?.();
-      return;
-    }
-
-    if (event.key === 'PageDown') {
-      event.preventDefault();
-      onNext?.();
-    }
-  }
+<script lang="ts">import { WEEKDAY_LABELS } from "./DateTimeCtrl.utils";
+let { cells, isDateSelectable, monthLabel, onNext, onPrev, onSelect, selectedIso } = $props();
+function isCellDisabled(cell) {
+	if (!cell.inCurrentMonth) {
+		return true;
+	}
+	if (!isDateSelectable) {
+		return false;
+	}
+	return !isDateSelectable(cell.isoDate);
+}
+function focusFirstAvailable() {
+	if (typeof document === "undefined") {
+		return;
+	}
+	const first = cells.find((cell) => !isCellDisabled(cell));
+	if (!first) {
+		return;
+	}
+	const target = document.querySelector(`button[data-iso="${first.isoDate}"]`);
+	target?.focus();
+}
+function focusFromIndex(startIndex, step) {
+	if (typeof document === "undefined") {
+		return;
+	}
+	let index = startIndex + step;
+	while (index >= 0 && index < cells.length) {
+		const nextCell = cells[index];
+		if (!isCellDisabled(nextCell)) {
+			const target = document.querySelector(`button[data-iso="${nextCell.isoDate}"]`);
+			target?.focus();
+			return;
+		}
+		index += step;
+	}
+}
+function handleDayKeydown(event, index, cell) {
+	if (isCellDisabled(cell)) {
+		return;
+	}
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		onSelect?.(cell.isoDate);
+		return;
+	}
+	if (event.key === "ArrowRight") {
+		event.preventDefault();
+		focusFromIndex(index, 1);
+		return;
+	}
+	if (event.key === "ArrowLeft") {
+		event.preventDefault();
+		focusFromIndex(index, -1);
+		return;
+	}
+	if (event.key === "ArrowDown") {
+		event.preventDefault();
+		focusFromIndex(index, 7);
+		return;
+	}
+	if (event.key === "ArrowUp") {
+		event.preventDefault();
+		focusFromIndex(index, -7);
+		return;
+	}
+	if (event.key === "Home") {
+		event.preventDefault();
+		focusFirstAvailable();
+		return;
+	}
+	if (event.altKey && event.key === "PageUp") {
+		event.preventDefault();
+		for (let i = 0; i < 12; i += 1) {
+			onPrev?.();
+		}
+		return;
+	}
+	if (event.altKey && event.key === "PageDown") {
+		event.preventDefault();
+		for (let i = 0; i < 12; i += 1) {
+			onNext?.();
+		}
+		return;
+	}
+	if (event.key === "PageUp") {
+		event.preventDefault();
+		onPrev?.();
+		return;
+	}
+	if (event.key === "PageDown") {
+		event.preventDefault();
+		onNext?.();
+	}
+}
 </script>
 
 <div class="w-full min-w-[16.5rem] max-w-[22rem] rounded border border-surface-300-700 bg-surface-100-900 p-2">

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlPickerPanel.svelte

@@ -1,65 +1,6 @@
-<script lang="ts">
-  import DateTimeCtrlCalendar from './DateTimeCtrlCalendar.svelte';
-  import DateTimeCtrlTimeFields from './DateTimeCtrlTimeFields.svelte';
-  import type { CalendarCell } from './DateTimeCtrl.utils';
-
-  export interface Props {
-    amLabel?: string;
-    calendarCells?: CalendarCell[];
-    calendarMonthLabel?: string;
-    hour?: number;
-    hoursStep?: number;
-    isDateSelectable?: (isoDate: string) => boolean;
-    maxDate?: string;
-    maxTime?: string;
-    minDate?: string;
-    minTime?: string;
-    minute?: number;
-    minutesStep?: number;
-    onNow?: () => void;
-    onClose?: () => void;
-    onSelectCalendarDate?: (isoDate: string) => void;
-    onShiftMonth?: (delta: number) => void;
-    onTimeChange?: (value: { hour: number; minute: number; second: number }) => void;
-    pmLabel?: string;
-    presets?: Array<string | { label: string; value: string }>;
-    second?: number;
-    secondsStep?: number;
-    selectedDateIso?: string;
-    showDatePicker?: boolean;
-    showTimePicker?: boolean;
-    use12Hour?: boolean;
-    withTimeDropdown?: boolean;
-  }
-
-  let {
-    amLabel = 'AM',
-    calendarCells = [],
-    calendarMonthLabel = '',
-    hour = 0,
-    hoursStep = 1,
-    isDateSelectable,
-    maxDate,
-    maxTime,
-    minDate,
-    minTime,
-    minute = 0,
-    minutesStep = 1,
-    onNow,
-    onClose,
-    onSelectCalendarDate,
-    onShiftMonth,
-    onTimeChange,
-    pmLabel = 'PM',
-    presets = [],
-    second = 0,
-    secondsStep = 1,
-    selectedDateIso,
-    showDatePicker = false,
-    showTimePicker = false,
-    use12Hour = false,
-    withTimeDropdown = false,
-  }: Props = $props();
+<script lang="ts">import DateTimeCtrlCalendar from "./DateTimeCtrlCalendar.svelte";
+import DateTimeCtrlTimeFields from "./DateTimeCtrlTimeFields.svelte";
+let { amLabel = "AM", calendarCells = [], calendarMonthLabel = "", hour = 0, hoursStep = 1, isDateSelectable, maxDate, maxTime, minDate, minTime, minute = 0, minutesStep = 1, onNow, onClose, onSelectCalendarDate, onShiftMonth, onTimeChange, pmLabel = "PM", presets = [], second = 0, secondsStep = 1, selectedDateIso, showDatePicker = false, showTimePicker = false, use12Hour = false, withTimeDropdown = false } = $props();
 </script>
 
 <div class="flex flex-col gap-3">

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlTimeFields.svelte

@@ -1,220 +1,146 @@
-<script lang="ts">
-  interface TimePresetOption {
-    label: string;
-    value: string;
-  }
-
-  export interface Props {
-    amLabel?: string;
-    hour?: number;
-    hoursStep?: number;
-    maxTime?: string;
-    minTime?: string;
-    minute?: number;
-    minutesStep?: number;
-    onChange?: (value: { hour: number; minute: number; second: number }) => void;
-    pmLabel?: string;
-    presets?: Array<string | TimePresetOption>;
-    second?: number;
-    secondsStep?: number;
-    use12Hour?: boolean;
-    withDropdown?: boolean;
-  }
-
-  let {
-    amLabel = 'AM',
-    hour = 0,
-    hoursStep = 1,
-    maxTime,
-    minTime,
-    minute = 0,
-    minutesStep = 1,
-    onChange,
-    pmLabel = 'PM',
-    presets = [],
-    second = 0,
-    secondsStep = 1,
-    use12Hour = false,
-    withDropdown = false,
-  }: Props = $props();
-
-  let h = $state('0');
-  let m = $state('0');
-  let s = $state('0');
-  let meridian = $state<'am' | 'pm'>('am');
-
-  const safeHoursStep = $derived(Math.max(1, Math.trunc(hoursStep || 1)));
-  const safeMinutesStep = $derived(Math.max(1, Math.trunc(minutesStep || 1)));
-  const safeSecondsStep = $derived(Math.max(1, Math.trunc(secondsStep || 1)));
-
-  const hourOptions = $derived.by(() => {
-    const options: number[] = [];
-    if (use12Hour) {
-      for (let i = 1; i <= 12; i += safeHoursStep) {
-        options.push(i);
-      }
-      if (!options.includes(12)) {
-        options.push(12);
-      }
-      return options;
-    }
-
-    for (let i = 0; i <= 23; i += safeHoursStep) {
-      options.push(i);
-    }
-    if (!options.includes(23)) {
-      options.push(23);
-    }
-
-    return options;
-  });
-
-  const minuteOptions = $derived.by(() => {
-    const options: number[] = [];
-    for (let i = 0; i <= 59; i += safeMinutesStep) {
-      options.push(i);
-    }
-    if (!options.includes(59)) {
-      options.push(59);
-    }
-    return options;
-  });
-
-  const secondOptions = $derived.by(() => {
-    const options: number[] = [];
-    for (let i = 0; i <= 59; i += safeSecondsStep) {
-      options.push(i);
-    }
-    if (!options.includes(59)) {
-      options.push(59);
-    }
-    return options;
-  });
-
-  const normalizedPresets = $derived.by(() => {
-    return presets
-      .map((preset) => {
-        if (typeof preset === 'string') {
-          return { label: preset, value: preset };
-        }
-
-        return preset;
-      })
-      .filter((preset) => preset.value && preset.value.trim() !== '');
-  });
-
-  function pad2(value: number): string {
-    return String(value).padStart(2, '0');
-  }
-
-  function clamp(value: number, min: number, max: number): number {
-    return Math.max(min, Math.min(max, value));
-  }
-
-  function to12Hour(inputHour: number): { displayHour: number; meridian: 'am' | 'pm' } {
-    const isPm = inputHour >= 12;
-    const displayHour = inputHour % 12 === 0 ? 12 : inputHour % 12;
-    return { displayHour, meridian: isPm ? 'pm' : 'am' };
-  }
-
-  function from12Hour(displayHour: number, nextMeridian: 'am' | 'pm'): number {
-    const normalized = clamp(displayHour, 1, 12) % 12;
-    if (nextMeridian === 'pm') {
-      return normalized + 12;
-    }
-    return normalized;
-  }
-
-  function parsePreset(value: string): { hour: number; minute: number; second: number } | null {
-    const matched = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(value.trim());
-    if (!matched) {
-      return null;
-    }
-
-    const parsedHour = Number(matched[1]);
-    const parsedMinute = Number(matched[2]);
-    const parsedSecond = Number(matched[3] ?? '0');
-
-    if (
-      !Number.isInteger(parsedHour) ||
-      !Number.isInteger(parsedMinute) ||
-      !Number.isInteger(parsedSecond) ||
-      parsedHour < 0 ||
-      parsedHour > 23 ||
-      parsedMinute < 0 ||
-      parsedMinute > 59 ||
-      parsedSecond < 0 ||
-      parsedSecond > 59
-    ) {
-      return null;
-    }
-
-    return {
-      hour: parsedHour,
-      minute: parsedMinute,
-      second: parsedSecond,
-    };
-  }
-
-  function emit(): void {
-    const parsedHour = Number(h);
-    const parsedMinute = Number(m);
-    const parsedSecond = Number(s);
-
-    if (
-      !Number.isFinite(parsedHour) ||
-      !Number.isFinite(parsedMinute) ||
-      !Number.isFinite(parsedSecond)
-    ) {
-      return;
-    }
-
-    const minuteValue = clamp(Math.trunc(parsedMinute), 0, 59);
-    const secondValue = clamp(Math.trunc(parsedSecond), 0, 59);
-
-    let hourValue = clamp(Math.trunc(parsedHour), 0, 23);
-    if (use12Hour) {
-      hourValue = from12Hour(parsedHour, meridian);
-    }
-
-    onChange?.({
-      hour: hourValue,
-      minute: minuteValue,
-      second: secondValue,
-    });
-  }
-
-  function applyPreset(preset: string): void {
-    const parsed = parsePreset(preset);
-    if (!parsed) {
-      return;
-    }
-
-    if (use12Hour) {
-      const converted = to12Hour(parsed.hour);
-      h = String(converted.displayHour);
-      meridian = converted.meridian;
-    } else {
-      h = String(parsed.hour);
-    }
-
-    m = String(parsed.minute);
-    s = String(parsed.second);
-    emit();
-  }
-
-  $effect(() => {
-    if (use12Hour) {
-      const converted = to12Hour(hour);
-      h = String(converted.displayHour);
-      meridian = converted.meridian;
-    } else {
-      h = String(hour);
-    }
-
-    m = String(minute);
-    s = String(second);
-  });
+<script lang="ts">let { amLabel = "AM", hour = 0, hoursStep = 1, maxTime, minTime, minute = 0, minutesStep = 1, onChange, pmLabel = "PM", presets = [], second = 0, secondsStep = 1, use12Hour = false, withDropdown = false } = $props();
+let h = $state("0");
+let m = $state("0");
+let s = $state("0");
+let meridian = $state("am");
+const safeHoursStep = $derived(Math.max(1, Math.trunc(hoursStep || 1)));
+const safeMinutesStep = $derived(Math.max(1, Math.trunc(minutesStep || 1)));
+const safeSecondsStep = $derived(Math.max(1, Math.trunc(secondsStep || 1)));
+const hourOptions = $derived.by(() => {
+	const options = [];
+	if (use12Hour) {
+		for (let i = 1; i <= 12; i += safeHoursStep) {
+			options.push(i);
+		}
+		if (!options.includes(12)) {
+			options.push(12);
+		}
+		return options;
+	}
+	for (let i = 0; i <= 23; i += safeHoursStep) {
+		options.push(i);
+	}
+	if (!options.includes(23)) {
+		options.push(23);
+	}
+	return options;
+});
+const minuteOptions = $derived.by(() => {
+	const options = [];
+	for (let i = 0; i <= 59; i += safeMinutesStep) {
+		options.push(i);
+	}
+	if (!options.includes(59)) {
+		options.push(59);
+	}
+	return options;
+});
+const secondOptions = $derived.by(() => {
+	const options = [];
+	for (let i = 0; i <= 59; i += safeSecondsStep) {
+		options.push(i);
+	}
+	if (!options.includes(59)) {
+		options.push(59);
+	}
+	return options;
+});
+const normalizedPresets = $derived.by(() => {
+	return presets.map((preset) => {
+		if (typeof preset === "string") {
+			return {
+				label: preset,
+				value: preset
+			};
+		}
+		return preset;
+	}).filter((preset) => preset.value && preset.value.trim() !== "");
+});
+function pad2(value) {
+	return String(value).padStart(2, "0");
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function to12Hour(inputHour) {
+	const isPm = inputHour >= 12;
+	const displayHour = inputHour % 12 === 0 ? 12 : inputHour % 12;
+	return {
+		displayHour,
+		meridian: isPm ? "pm" : "am"
+	};
+}
+function from12Hour(displayHour, nextMeridian) {
+	const normalized = clamp(displayHour, 1, 12) % 12;
+	if (nextMeridian === "pm") {
+		return normalized + 12;
+	}
+	return normalized;
+}
+function parsePreset(value) {
+	const matched = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(value.trim());
+	if (!matched) {
+		return null;
+	}
+	const parsedHour = Number(matched[1]);
+	const parsedMinute = Number(matched[2]);
+	const parsedSecond = Number(matched[3] ?? "0");
+	if (!Number.isInteger(parsedHour) || !Number.isInteger(parsedMinute) || !Number.isInteger(parsedSecond) || parsedHour < 0 || parsedHour > 23 || parsedMinute < 0 || parsedMinute > 59 || parsedSecond < 0 || parsedSecond > 59) {
+		return null;
+	}
+	return {
+		hour: parsedHour,
+		minute: parsedMinute,
+		second: parsedSecond
+	};
+}
+function emit() {
+	const parsedHour = Number(h);
+	const parsedMinute = Number(m);
+	const parsedSecond = Number(s);
+	if (!Number.isFinite(parsedHour) || !Number.isFinite(parsedMinute) || !Number.isFinite(parsedSecond)) {
+		return;
+	}
+	const minuteValue = clamp(Math.trunc(parsedMinute), 0, 59);
+	const secondValue = clamp(Math.trunc(parsedSecond), 0, 59);
+	let hourValue = clamp(Math.trunc(parsedHour), 0, 23);
+	if (use12Hour) {
+		hourValue = from12Hour(parsedHour, meridian);
+	}
+	onChange?.({
+		hour: hourValue,
+		minute: minuteValue,
+		second: secondValue
+	});
+}
+function applyPreset(preset) {
+	const parsed = parsePreset(preset);
+	if (!parsed) {
+		return;
+	}
+	if (use12Hour) {
+		const converted = to12Hour(parsed.hour);
+		h = String(converted.displayHour);
+		meridian = converted.meridian;
+	} else {
+		h = String(parsed.hour);
+	}
+	m = String(parsed.minute);
+	s = String(parsed.second);
+	emit();
+}
+$effect(() => {
+	if (use12Hour) {
+		const converted = to12Hour(hour);
+		h = String(converted.displayHour);
+		meridian = converted.meridian;
+	} else {
+		h = String(hour);
+	}
+	m = String(minute);
+	s = String(second);
+});
+export {};
 </script>
 
 <div class="rounded border border-surface-300-700 bg-surface-100-900 p-2">