@ticatec/topside-elements 1.0.0

package/dist/base-calendar/CalendarBase.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    import MonthlyCalendar from "./MonthlyCalendar.svelte";
+    import dateUtils, {type UniDate} from "./dateUtils";
+    import DateContext from "./DateContext";
+    import dayjs from "dayjs";
+    import MonthPickupPanel from "./MonthPickupPanel.svelte";
+    import YearPickupPanel from "./YearPickupPanel.svelte";
+
+    interface Props {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+        style?: string;
+        cellWidth?: number;
+        cellHeight?: number;
+        border?: boolean;
+        onchange?: (value: dayjs.Dayjs) => void;
+    }
+
+    let {
+        value,
+        min,
+        max,
+        style,
+        cellWidth = 32,
+        cellHeight = 32,
+        border = false,
+        onchange
+    }: Props = $props();
+
+    const dateCtx = DateContext.getInstance();
+
+    let dv = $derived(dateUtils.toDayjs(value));
+    let minDate = $derived(dateUtils.toDayjs(min));
+    let maxDate = $derived(dateUtils.toDayjs(max));
+
+    let today = dayjs();
+    let year = $state<number>(today.year());
+    let month = $state<number>(today.month());
+    let date = $state<number>(today.date());
+
+    let showMonths = $state(false);
+    let showYears = $state(false);
+
+    // Sync display cursor (year/month/date) when external `value` changes.
+    // First run also seeds from `value` if provided, otherwise stays at today.
+    $effect(() => {
+        const v = dv;
+        if (v != null) {
+            year = v.year();
+            month = v.month();
+            date = v.date();
+        }
+    });
+
+    const onSelectDate = (d: dayjs.Dayjs) => {
+        onchange?.(d);
+    };
+
+    const pickupMonth = () => {
+        showMonths = true;
+        showYears = false;
+    };
+
+    const pickupYear = () => {
+        showMonths = false;
+        showYears = true;
+    };
+
+    const adjustMonth = (n: number) => () => {
+        let m = month + n;
+        let y = year;
+        if (m > 11) { y += 1; m = 0; }
+        else if (m < 0) { y -= 1; m = 11; }
+        month = m;
+        year = y;
+    };
+
+    const handleKeyActivate = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
+</script>
+<div class="topside-calendar" class:border style="{style}; width: {cellWidth * 7}px">
+    <div>
+        <div class="topside-title-bar">
+            <div class="action-icon" role="button" tabindex="0" aria-label="Previous month"
+                 onclick={adjustMonth(-1)} onkeydown={handleKeyActivate(adjustMonth(-1))}>
+                <i class="icon_google_keyboard_arrow_left"></i>
+            </div>
+            <div style="flex: 1 1 auto; text-align: center">
+                <span class="title-text" role="button" tabindex="0" aria-label="Pick year"
+                      onclick={pickupYear} onkeydown={handleKeyActivate(pickupYear)}>{year}</span>
+                <span class="title-text" role="button" tabindex="0" aria-label="Pick month"
+                      onclick={pickupMonth} onkeydown={handleKeyActivate(pickupMonth)}>{month + 1}</span>
+            </div>
+            <div class="action-icon" role="button" tabindex="0" aria-label="Next month"
+                 onclick={adjustMonth(1)} onkeydown={handleKeyActivate(adjustMonth(1))}>
+                <i class="icon_google_keyboard_arrow_right"></i>
+            </div>
+        </div>
+        <div style="flex: 1 1 auto; overflow: hidden">
+            <MonthlyCalendar
+                weekBegin={dateCtx.weekBegin}
+                weekTitle={dateCtx.weekTitleAbbr}
+                {cellWidth} {cellHeight} {border}
+                min={minDate} max={maxDate}
+                value={dv} {year} {month}
+                onselect={onSelectDate}/>
+            {#if showMonths}
+                <MonthPickupPanel bind:value={month} months={dateCtx.months}
+                                  onclick={() => { showMonths = false; }}/>
+            {:else if showYears}
+                <YearPickupPanel bind:year
+                                 max={maxDate == null ? null : maxDate.year()}
+                                 min={minDate == null ? null : minDate.year()}
+                                 onclick={() => { showYears = false; }}/>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-calendar {
+        display: inline-block;
+        padding: 0;
+        box-sizing: border-box;
+        color: var(--topside-calendar-color-day-text);
+    }
+
+    .topside-calendar > div {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .topside-title-bar {
+        width: 100%;
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        font-size: 1.25em;
+        padding: 0.3em 0;
+        font-weight: 600;
+        align-items: center;
+        border-bottom: 1px solid var(--topside-color-border-secondary);
+        user-select: none;
+    }
+
+    .title-text {
+        cursor: pointer;
+        display: inline-block;
+        min-width: 20px;
+    }
+
+    .action-icon {
+        width: 1.5em;
+        height: 1.5em;
+        margin: 0 8px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        border: 1px solid transparent;
+        text-align: center;
+    }
+
+    .action-icon i {
+        color: var(--topside-calendar-color-action);
+        font-size: 1.2em;
+        cursor: pointer;
+    }
+
+    .action-icon i:active {
+        color: var(--topside-calendar-color-title);
+    }
+
+    .action-icon:hover i {
+        color: var(--topside-primary-hover-color, #42A5F5);
+    }
+
+    .action-icon:focus-visible,
+    .title-text:focus-visible {
+        outline: 2px solid var(--topside-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
+</style>

package/dist/base-calendar/CalendarBase.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type UniDate } from "./dateUtils";
+import dayjs from "dayjs";
+interface Props {
+    value?: UniDate;
+    min?: UniDate;
+    max?: UniDate;
+    style?: string;
+    cellWidth?: number;
+    cellHeight?: number;
+    border?: boolean;
+    onchange?: (value: dayjs.Dayjs) => void;
+}
+declare const CalendarBase: import("svelte").Component<Props, {}, "">;
+type CalendarBase = ReturnType<typeof CalendarBase>;
+export default CalendarBase;

package/dist/base-calendar/CalendarDay.d.ts

@@ -0,0 +1,7 @@
+export interface CalendarDay {
+    y: number;
+    m: number;
+    d: number;
+    isToday: boolean;
+    disabled: boolean;
+}

package/dist/base-calendar/CalendarDay.js

@@ -0,0 +1 @@
+export {};

package/dist/base-calendar/DateContext.d.ts

@@ -0,0 +1,19 @@
+import "../i18nRes";
+export default class DateContext {
+    private _weekBegin;
+    private _dateFmt;
+    private _timeFmt;
+    private static instance;
+    private constructor();
+    static getInstance(): DateContext;
+    get months(): Array<string>;
+    get monthsAbbr(): Array<string>;
+    get weekTitle(): Array<string>;
+    get weekTitleAbbr(): Array<string>;
+    set weekBegin(value: number);
+    get weekBegin(): number;
+    set dateFormat(value: string);
+    get dateFormat(): string;
+    set timeFormat(value: string);
+    get timeFormat(): string;
+}

package/dist/base-calendar/DateContext.js

@@ -0,0 +1,49 @@
+import i18n from "@ticatec/i18n";
+import "../i18nRes"; // side effect: seeds the uniface namespace defaults used by i18n.get() below
+export default class DateContext {
+    _weekBegin = 1;
+    _dateFmt = "YYYY-MM-DD";
+    _timeFmt = "HH:mm:ss";
+    static instance;
+    constructor() {
+    }
+    static getInstance() {
+        if (DateContext.instance == null) {
+            DateContext.instance = new DateContext();
+        }
+        return DateContext.instance;
+    }
+    get months() {
+        return i18n.get('uniface.calendar.months');
+    }
+    get monthsAbbr() {
+        return i18n.get('uniface.calendar.monthsAbbr');
+    }
+    get weekTitle() {
+        return i18n.get('uniface.calendar.weekTitle');
+    }
+    get weekTitleAbbr() {
+        return i18n.get('uniface.calendar.weekTitleAbbr');
+    }
+    set weekBegin(value) {
+        if (value < 0 || value > 6) {
+            throw new Error('Invalid value');
+        }
+        this._weekBegin = value;
+    }
+    get weekBegin() {
+        return this._weekBegin;
+    }
+    set dateFormat(value) {
+        this._dateFmt = value;
+    }
+    get dateFormat() {
+        return this._dateFmt;
+    }
+    set timeFormat(value) {
+        this._timeFmt = value;
+    }
+    get timeFormat() {
+        return this._timeFmt;
+    }
+}

package/dist/base-calendar/MonthPickupPanel.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    interface Props {
+        value: number;
+        months: Array<string>;
+        onclick?: (event: MouseEvent) => void;
+    }
+
+    let {
+        value = $bindable<number>(),
+        months,
+        onclick
+    }: Props = $props();
+
+    const handleMonthClick = (m: number) => (e: MouseEvent) => {
+        if (m !== value) {
+            value = m;
+            onclick?.(e);
+        } else {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+
+    const handleKeyActivate = (m: number) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleMonthClick(m)(e as unknown as MouseEvent);
+        }
+    };
+</script>
+<div class="topside-month-pickup-panel" onclick={onclick} role="presentation">
+    <div>
+        <div style="display: grid; grid-template-columns: auto auto auto; overflow: hidden; width: 100%">
+            {#each months as month, idx}
+                <div class="month-block" class:selected={idx === value}
+                     role="button" tabindex="0" aria-current={idx === value ? 'date' : undefined}
+                     onclick={handleMonthClick(idx)} onkeydown={handleKeyActivate(idx)}>
+                    <span>{month}</span>
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-month-pickup-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        user-select: none;
+        color: var(--topside-calendar-color-title);
+    }
+
+    .topside-month-pickup-panel > div {
+        width: 100%;
+        position: relative;
+        top: 30px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    .topside-month-pickup-panel > div > div {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background-color: var(--topside-calendar-color-surface);
+        border: 1px solid var(--topside-color-border-secondary);
+        overflow: auto;
+    }
+
+    .month-block {
+        margin: 8px 4px;
+        padding: 2px 1px;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.5em;
+        cursor: pointer;
+        border-radius: 6px;
+        border: 1px solid transparent;
+    }
+
+    .month-block:hover {
+        background-color: var(--topside-calendar-color-day-surface-hover);
+    }
+
+    .month-block.selected {
+        color: var(--topside-calendar-color-selected);
+        background-color: var(--topside-calendar-color-selected-surface);
+    }
+
+    .month-block.selected:hover {
+        background-color: unset;
+    }
+
+    .month-block:focus-visible {
+        outline: 2px solid var(--topside-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
+</style>

package/dist/base-calendar/MonthPickupPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value: number;
+    months: Array<string>;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const MonthPickupPanel: import("svelte").Component<Props, {}, "value">;
+type MonthPickupPanel = ReturnType<typeof MonthPickupPanel>;
+export default MonthPickupPanel;

package/dist/base-calendar/MonthlyCalendar.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+    import dateUtils, {type UniDate} from "./dateUtils";
+    import DateContext from "./DateContext";
+    import dayjs from "dayjs";
+    import {onDestroy, type Snippet} from "svelte";
+    import type {CalendarDay} from "./CalendarDay";
+
+    interface Props {
+        min?: UniDate;
+        max?: UniDate;
+        weekTitle: Array<string>;
+        weekBegin?: number;
+        year: number;
+        month: number;
+        value?: UniDate;
+        cellWidth: number;
+        cellHeight: number;
+        border?: boolean;
+        dailyContent?: Snippet<[{ year: number, month: number, day: CalendarDay }]>;
+        onselect?: (value: dayjs.Dayjs) => void;
+    }
+
+    let {
+        min,
+        max,
+        weekTitle,
+        weekBegin = DateContext.getInstance().weekBegin,
+        year,
+        month,
+        value,
+        cellWidth,
+        cellHeight,
+        border = false,
+        dailyContent,
+        onselect
+    }: Props = $props();
+
+    const today = dateUtils.today();
+
+    let selected = $state({year: 0, month: 0, date: 0});
+    let days = $state<Array<CalendarDay>>([]);
+
+    const isWeekend = (idx: number) => {
+        const dow = (idx + weekBegin) % 7;
+        return dow === 6 || dow === 0;
+    };
+
+    const isNotAllowed = (d: dayjs.Dayjs): boolean =>
+        (min != null && d.isBefore(min as dayjs.Dayjs)) ||
+        (max != null && d.isAfter(max as dayjs.Dayjs));
+
+    const computeDays = (y: number, m: number) => {
+        const beginDay = dayjs(new Date(y, m, 1));
+        let od = ((beginDay.day() % 7 - weekBegin) + 7) % 7;
+        if (od === 0) od = 7;
+        let from = beginDay.add(-od, "day");
+        const result: CalendarDay[] = [];
+        for (let i = 0; i < 42; i++) {
+            result.push({
+                y,
+                m: from.month(),
+                d: from.date(),
+                isToday: from.month() === month && from.isSame(today),
+                disabled: from.month() !== month || isNotAllowed(from)
+            });
+            from = from.add(1, "day");
+        }
+        days = result;
+    };
+
+    // Initial selection from incoming value (and follow external changes)
+    $effect(() => {
+        if (value != null) {
+            const d = dayjs(value);
+            selected = {year: d.year(), month: d.month(), date: d.date()};
+        }
+    });
+
+    // Recompute grid whenever display month/year or min/max changes
+    $effect(() => {
+        computeDays(year, month);
+    });
+
+    let respondClick = true;
+    let respondTimer: any;
+
+    const handleDayClick = (ad: CalendarDay) => () => {
+        if (!ad.disabled && respondClick) {
+            respondClick = false;
+            clearTimeout(respondTimer);
+            respondTimer = setTimeout(() => {
+                respondClick = true;
+            }, 200);
+            selected = {year, month, date: ad.d};
+            onselect?.(dayjs(new Date(year, month, ad.d)));
+        }
+    };
+
+    onDestroy(() => {
+        if (respondTimer != null) {
+            clearTimeout(respondTimer);
+            respondTimer = null;
+        }
+    });
+
+    const handleDayKeyDown = (ad: CalendarDay) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleDayClick(ad)();
+        }
+    };
+</script>
+<div class="monthly-calendar" class:border>
+    {#each Array(7) as _, idx}
+        <div class="cell week-title" class:weekend={isWeekend(idx)}>
+            <span>{weekTitle[(idx + weekBegin + 7) % 7]}</span>
+        </div>
+    {/each}
+    {#each days as day, idx}
+        <div class="cell calendar-day"
+             role="button" tabindex={day.disabled ? -1 : 0}
+             aria-disabled={day.disabled}
+             aria-current={day.isToday ? 'date' : undefined}
+             aria-pressed={selected.year === day.y && selected.month === day.m && selected.date === day.d}
+             aria-label="{day.y}-{day.m + 1}-{day.d}"
+             style="width: {cellWidth}px; height: {cellHeight}px;"
+             class:weekend={isWeekend(idx)}
+             class:today={day.isToday}
+             class:selected={selected.year === day.y && selected.month === day.m && selected.date === day.d}
+             class:lastRow={idx > 34}
+             class:disabled={day.disabled}
+             onclick={handleDayClick(day)} onkeydown={handleDayKeyDown(day)}>
+            <span>{day.d}</span>
+            {#if dailyContent}
+                <div>
+                    {@render dailyContent({year, month, day})}
+                </div>
+            {/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .monthly-calendar {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto;
+        overflow: hidden;
+    }
+
+    .cell {
+        width: 100%;
+        position: relative;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.9em;
+    }
+
+    .cell > span:first-child {
+        user-select: none;
+        position: relative;
+        line-height: 1.5em;
+        display: inline-block;
+        padding: 0.125em;
+        width: 1.75em;
+        height: 1.75em;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        margin: 2px 0;
+        cursor: pointer;
+    }
+
+    .cell.week-title {
+        font-weight: 600;
+    }
+
+    .calendar-day > span:first-child:hover {
+        background-color: var(--topside-calendar-color-day-surface-hover);
+    }
+
+    .calendar-day.today > span:first-child {
+        border-color: var(--topside-calendar-today-border-color);
+        border-radius: 2px;
+        border-style: dotted;
+    }
+
+    .cell.week-title > span {
+        width: 100%;
+        height: auto;
+        padding: 0;
+        border-radius: unset;
+        border: none;
+        margin: 0;
+        cursor: default;
+    }
+
+    .calendar-day.disabled {
+        color: var(--topside-calendar-color-day-muted-text);
+    }
+
+
+    .calendar-day.selected > span:first-child {
+        color: var(--topside-calendar-color-selected);
+        background-color: var(--topside-calendar-color-selected-surface)
+    }
+
+    .calendar-day.disabled > span:first-child {
+        cursor: not-allowed;
+    }
+
+    .calendar-day.selected > span:first-child:hover {
+        background-color: unset;
+    }
+
+    .weekend {
+        color: var(--topside-calendar-color-weekend-text);
+    }
+
+    .disabled > span:first-child:hover {
+        background-color: unset;
+    }
+
+    .calendar-day:focus-visible > span:first-child {
+        outline: 2px solid var(--topside-primary-border-color, #298DFF);
+        outline-offset: 1px;
+    }
+</style>

package/dist/base-calendar/MonthlyCalendar.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type UniDate } from "./dateUtils";
+import dayjs from "dayjs";
+import { type Snippet } from "svelte";
+import type { CalendarDay } from "./CalendarDay";
+interface Props {
+    min?: UniDate;
+    max?: UniDate;
+    weekTitle: Array<string>;
+    weekBegin?: number;
+    year: number;
+    month: number;
+    value?: UniDate;
+    cellWidth: number;
+    cellHeight: number;
+    border?: boolean;
+    dailyContent?: Snippet<[{
+        year: number;
+        month: number;
+        day: CalendarDay;
+    }]>;
+    onselect?: (value: dayjs.Dayjs) => void;
+}
+declare const MonthlyCalendar: import("svelte").Component<Props, {}, "">;
+type MonthlyCalendar = ReturnType<typeof MonthlyCalendar>;
+export default MonthlyCalendar;