@ticatec/topside-elements 1.0.0

package/dist/form/date_picker/ScrollBar.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+
+    import {onDestroy} from 'svelte';
+    import type {OnChange} from "../../types";
+
+    interface Props {
+        value: number;
+        mode?: 24 | 60;
+        disabled?: boolean;
+        onchange?: OnChange<number>;
+    }
+
+    let {value = $bindable(), mode = 60, disabled = false, onchange}: Props = $props();
+
+    // 显示窗口：当前值前后各 3 个刻度。用 $derived 而不是在 $effect 里 push 到 $state 数组 ——
+    // 后者在同一个 effect 里既读又写 list，会触发 effect_update_depth_exceeded（DateTimePicker 弹层打不开）。
+    const list = $derived(Array.from({length: 7}, (_, i) => (value + i - 3 + mode) % mode));
+
+    const decValue = () => {
+        if (!disabled) {
+            value = (value - 1 + mode) % mode;
+            resetList();
+        }
+    }
+
+    const incValue = () => {
+        if (!disabled) {
+            value = (value + 1 + mode) % mode;
+            resetList();
+        }
+    }
+
+    // 只在用户操作后通知父组件；外部通过 bind:value 写入时不再回调
+    const resetList = () => {
+        onchange?.(value);
+    }
+
+    let amendValue = 0;
+
+    const handleMouseWheel = (e: WheelEvent) => {
+        if (!disabled) {
+            value = (value + Math.round(e.deltaY / 5) + mode) % mode;
+            resetList();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    const handleMouseDown = (v: number) => (e: MouseEvent) => {
+        if (!disabled) {
+            amendValue = v;
+            timer = setInterval(() => {
+                if (amendValue != 0) {
+                    value = (value + amendValue + mode) % mode;
+                    resetList();
+                }
+            }, 200)
+        }
+    }
+
+    const handleMouseUp = () => {
+        if (timer != null) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+
+    const handleDigitalClick = (v: number) => {
+        value = v;
+        resetList();
+    }
+
+    const handleKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    }
+
+    let timer: any;
+
+    onDestroy(() => {
+        if (timer != null) {
+            clearInterval(timer);
+            timer = null;
+        }
+    });
+
+</script>
+<div class="scroll-bar" onwheel={handleMouseWheel}>
+    <div class="action-bar">
+        <div class="arrow-up" class:disabled={disabled}>
+            <i class="icon_google_keyboard_arrow_up" onclick={decValue} onkeydown={handleKeyDown(decValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(-1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
+                 role="button" tabindex="0" aria-label="Decrease value"></i>
+        </div>
+    </div>
+    {#each list as v}
+        <div style={disabled && v!= value ? "visibility: hidden; " : ""} class="digital-block" onclick={()=>{handleDigitalClick(v)}} onkeydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
+             role="button" tabindex="0" aria-label="Select {v}"><span>{v}</span></div>
+    {/each}
+    <div class="action-bar">
+        <div class="arrow-down" class:disabled={disabled}>
+            <i class="icon_google_keyboard_arrow_down" onclick={incValue} onkeydown={handleKeyDown(incValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
+                 role="button" tabindex="0" aria-label="Increase value"></i>
+        </div>
+    </div>
+</div>
+
+<style>
+    .scroll-bar {
+        width: 33%;
+    }
+
+
+    .digital-block {
+        padding: 3px 0;
+        line-height: 1.2em;
+        font-weight: 600;
+        font-size: 13px;
+    }
+
+    .inactive {
+        font-size: 1.0em;
+        font-weight: 100;
+        color: var(--topside-calendar-color-day-muted-text);
+    }
+</style>

package/dist/form/date_picker/ScrollBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { OnChange } from "../../types";
+interface Props {
+    value: number;
+    mode?: 24 | 60;
+    disabled?: boolean;
+    onchange?: OnChange<number>;
+}
+declare const ScrollBar: import("svelte").Component<Props, {}, "value">;
+type ScrollBar = ReturnType<typeof ScrollBar>;
+export default ScrollBar;

package/dist/form/date_picker/TimePanel.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+
+    import {untrack} from 'svelte';
+    import ScrollBar from "./ScrollBar.svelte";
+    import dayjs from "dayjs";
+    import type {UniDate} from "../../base-calendar/dateUtils";
+    import dateUtils from "../../base-calendar/dateUtils";
+
+    interface Props {
+        value: UniDate;
+        style?: string;
+        precision?: "H" | "M" | "S";
+        onchange?: (value: dayjs.Dayjs) => void;
+    }
+
+    let {
+        value,
+        style = '',
+        precision = "M",
+        onchange
+    }: Props = $props();
+
+    let time: dayjs.Dayjs = $state(untrack(() => dateUtils.toDayjs(value)));
+    let hour = $state(0);
+    let minute = $state(0);
+    let second = $state(0);
+
+    $effect(() => {
+        hour = time == null ? 0 : time.hour();
+        minute = precision == "H" ? 0 : time == null ? 0 : time.minute();
+        second = precision == "S" ? (time == null ? 0 : time.second()) : 0;
+    });
+
+    const resetTime = (unit: dayjs.UnitType) => (v: number) => {
+        time = time.set(unit, v);
+        onchange?.(time);
+    }
+
+</script>
+<div class="time-picker-panel" {style}>
+    <div class="scroll-panel" style="flex: 1 1 auto">
+        <ScrollBar bind:value={hour} mode={24} onchange={resetTime('hour')}/>
+        {#if precision === "M" || precision === "S"}
+            <ScrollBar bind:value={minute} onchange={resetTime('minute')}/>
+            {#if precision === "S"}
+                <ScrollBar bind:value={second} onchange={resetTime('second')}/>
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .time-picker-panel {
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .scroll-panel {
+        width: 100%;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        justify-items: center;
+    }
+
+    .scroll-panel :global(.scroll-bar) {
+        flex: 0 0 33.33%;
+        line-height: 18px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    .scroll-panel :global(.scroll-bar > div) {
+        text-align: center;
+        padding: 3px 0;
+    }
+
+    .scroll-panel :global(.action-bar i) {
+        color: var(--topside-inactive-icon-color, #e1e1e1);
+    }
+
+    .scroll-panel :global(.action-bar i:active) {
+        position: relative;
+        top: 1px;
+    }
+
+    .scroll-panel :global(.action-bar:hover i) {
+        color: var(--topside-active-icon-color, #333333);
+    }
+</style>

package/dist/form/date_picker/TimePanel.svelte.d.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import type { UniDate } from "../../base-calendar/dateUtils";
+interface Props {
+    value: UniDate;
+    style?: string;
+    precision?: "H" | "M" | "S";
+    onchange?: (value: dayjs.Dayjs) => void;
+}
+declare const TimePanel: import("svelte").Component<Props, {}, "">;
+type TimePanel = ReturnType<typeof TimePanel>;
+export default TimePanel;

package/dist/form/date_picker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from "./DatePicker.svelte";
+import DateTimePicker from "./DateTimePicker.svelte";
+export default DatePicker;
+export { DateTimePicker };

package/dist/form/date_picker/index.js

@@ -0,0 +1,4 @@
+import DatePicker from "./DatePicker.svelte";
+import DateTimePicker from "./DateTimePicker.svelte";
+export default DatePicker;
+export { DateTimePicker };

package/dist/form/date_range/DateRangeEditor.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+    import dayjs from "dayjs";
+    import CommonRangeEditor from "../common_range_editor";
+    import dateUtils from "../../base-calendar/dateUtils";
+    import Calendar from "../../base-calendar";
+    import Popover from "../../overlay/common/Popover.svelte";
+    import type {UniDate} from "../../base-calendar/dateUtils";
+    import type {EditorVariant} from "../types";
+
+    interface Props {
+        variant?: EditorVariant;
+        compact?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        error?: string;
+        tooltip?: string;
+        theme?: string;
+        class?: string;
+        style?: string;
+        fromValue?: UniDate;
+        toValue?: UniDate;
+        format?: string;
+        min?: string | Date | undefined;
+        max?: string | Date | undefined;
+    }
+
+    let {
+        variant,
+        compact = false,
+        disabled = false,
+        readonly = false,
+        error,
+        tooltip,
+        theme,
+        class: className = '',
+        style = '',
+        fromValue = $bindable<UniDate>(),
+        toValue = $bindable<UniDate>(),
+        format = "YYYY-MM-DD",
+        min = undefined,
+        max = undefined,
+    }: Props = $props();
+
+    let isOpen = $state(false);
+    let rootElement: HTMLElement | undefined = $state(undefined);
+
+    const normalizeValue = (date: UniDate, isStart: boolean): Date | undefined => {
+        if (!date) return undefined;
+        return isStart
+            ? dayjs(date).startOf('day').toDate()
+            : dayjs(date).endOf('day').toDate();
+    };
+
+    const normalizedFromValue = $derived(normalizeValue(fromValue, true));
+    const normalizedToValue = $derived(normalizeValue(toValue, false));
+
+    const textFrom = $derived(dateUtils.formatDate(normalizedFromValue, format));
+    const textTo = $derived(dateUtils.formatDate(normalizedToValue, format));
+
+    const maxFrom = $derived(normalizedToValue ?? max);
+    const minTo = $derived(normalizedFromValue ?? min);
+
+    const fromClearable = $derived(!disabled && !readonly && normalizedFromValue != null);
+    const toClearable = $derived(!disabled && !readonly && normalizedToValue != null);
+
+    const showPopover = () => {
+        if (!disabled && !readonly) {
+            isOpen = true;
+        }
+    };
+
+    const cleanFromValue = () => { fromValue = undefined; };
+    const cleanToValue = () => { toValue = undefined; };
+
+    const handleFormCalendarSelect = (value: dayjs.Dayjs) => {
+        fromValue = normalizeValue(value.toDate(), true);
+    };
+
+    const handleToCalendarSelect = (value: dayjs.Dayjs) => {
+        toValue = normalizeValue(value.toDate(), false);
+        isOpen = false;
+    };
+
+    const handleIconKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            showPopover();
+        }
+    };
+</script>
+
+<div bind:this={rootElement}>
+    <CommonRangeEditor {compact} {disabled} {readonly} {error} {tooltip} {theme} {fromClearable} {toClearable} class={className} {variant} {style} cleanFrom={cleanFromValue} cleanTo={cleanToValue}>
+        {#snippet from()}
+            <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textFrom}/>
+        {/snippet}
+        {#snippet to()}
+            <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textTo}/>
+        {/snippet}
+        {#snippet actionIcon()}
+            <i class="icon_google_event_note action-icon" role="button" tabindex="-1" aria-label="Open date range picker"
+               onclick={showPopover} onkeydown={handleIconKeyDown}></i>
+        {/snippet}
+    </CommonRangeEditor>
+
+    {#if isOpen}
+        <Popover target={rootElement} onclose={() => { isOpen = false; }} style="width: 452px" autoFit={false}>
+            <div style="white-space: nowrap">
+                <Calendar
+                    style="border-right: 1px solid #f0f0f0"
+                    value={fromValue}
+                    onchange={handleFormCalendarSelect}
+                    {min}
+                    max={maxFrom}/>
+                <Calendar
+                    value={toValue}
+                    onchange={handleToCalendarSelect}
+                    min={minTo}
+                    {max}/>
+            </div>
+        </Popover>
+    {/if}
+</div>

package/dist/form/date_range/DateRangeEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { UniDate } from "../../base-calendar/dateUtils";
+import type { EditorVariant } from "../types";
+interface Props {
+    variant?: EditorVariant;
+    compact?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    tooltip?: string;
+    theme?: string;
+    class?: string;
+    style?: string;
+    fromValue?: UniDate;
+    toValue?: UniDate;
+    format?: string;
+    min?: string | Date | undefined;
+    max?: string | Date | undefined;
+}
+declare const DateRangeEditor: import("svelte").Component<Props, {}, "fromValue" | "toValue">;
+type DateRangeEditor = ReturnType<typeof DateRangeEditor>;
+export default DateRangeEditor;

package/dist/form/date_range/README.md

@@ -0,0 +1,250 @@
+# DateRangeEditor
+
+A date range field with a dual-calendar popup for selecting start (`fromValue`) and end (`toValue`) dates. Inputs are read-only; values are chosen from the calendars with cross-constraints between the two ends.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+```
+
+## Features
+
+- Side-by-side calendars for start and end dates
+- Cross-constraints: start cannot exceed end; end cannot precede start
+- Global `min` / `max` limits on both calendars
+- Start normalized to **start of day**, end to **end of day**
+- Custom display `format` via Day.js tokens
+- Independent clear actions for start and end
+- Variants: default, `plain`, `outlined`, `filled`
+- Compact, disabled, and read-only modes
+- Error text and tooltip via the shared form editor shell
+
+## Basic Usage
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+
+  let fromDate = $state(/** @type {Date | string | undefined} */ (undefined));
+  let toDate = $state(/** @type {Date | string | undefined} */ (undefined));
+</script>
+
+<DateRangeEditor bind:fromValue={fromDate} bind:toValue={toDate} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fromValue` | `UniDate` | — | Start date. Bindable via `bind:fromValue`. Accepts `Date`, Day.js, string, or `undefined` |
+| `toValue` | `UniDate` | — | End date. Bindable via `bind:toValue` |
+| `format` | `string` | `"YYYY-MM-DD"` | Display format (Day.js tokens) for both fields |
+| `min` | `string \| Date` | — | Global earliest selectable date |
+| `max` | `string \| Date` | — | Global latest selectable date |
+| `variant` | `"" \| "plain" \| "outlined" \| "filled"` | `""` | Visual style |
+| `compact` | `boolean` | `false` | Compact spacing |
+| `disabled` | `boolean` | `false` | Non-interactive |
+| `readonly` | `boolean` | `false` | Display-only; popup does not open |
+| `error` | `string` | — | Error message shown by the field shell |
+| `tooltip` | `string` | — | Hover tooltip |
+| `theme` | `string` | — | Theme name passed to the form editor shell |
+| `style` | `string` | `""` | Inline styles on the editor |
+| `class` | `string` | `""` | Extra CSS class on the editor |
+
+There are **no** `onchange` / `onfocus` / `onblur` props. React to range changes with `bind:fromValue` and `bind:toValue` (or `$effect` / reactive statements on those variables).
+
+## Type Definitions
+
+```typescript
+// From dateUtils
+type UniDate = dayjs.Dayjs | Date | string | undefined;
+
+type EditorVariant = "" | "plain" | "outlined" | "filled";
+```
+
+## Examples
+
+### Custom format and outlined style
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+
+  let projectStart = $state(/** @type {Date | undefined} */ (undefined));
+  let projectEnd = $state(/** @type {Date | undefined} */ (undefined));
+</script>
+
+<DateRangeEditor
+  variant="outlined"
+  format="DD/MM/YYYY"
+  bind:fromValue={projectStart}
+  bind:toValue={projectEnd}
+/>
+```
+
+### Compact filled range
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+
+  let reportFrom = $state(/** @type {Date | undefined} */ (undefined));
+  let reportTo = $state(/** @type {Date | undefined} */ (undefined));
+</script>
+
+<DateRangeEditor
+  variant="filled"
+  compact
+  bind:fromValue={reportFrom}
+  bind:toValue={reportTo}
+/>
+```
+
+### Min / max constraints
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+
+  const year = new Date().getFullYear();
+  let periodStart = $state(new Date(year, 0, 1));
+  let periodEnd = $state(new Date(year, 11, 31));
+</script>
+
+<DateRangeEditor
+  variant="outlined"
+  bind:fromValue={periodStart}
+  bind:toValue={periodEnd}
+  min={new Date(year, 0, 1)}
+  max={new Date(year, 11, 31)}
+/>
+```
+
+### Disabled, read-only, and error
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+
+  let fromDate = $state("2025-03-01");
+  let toDate = $state("2025-03-15");
+</script>
+
+<DateRangeEditor disabled bind:fromValue={fromDate} bind:toValue={toDate} />
+<DateRangeEditor readonly bind:fromValue={fromDate} bind:toValue={toDate} />
+<DateRangeEditor error="Invalid range" />
+```
+
+### Derived stay length
+
+```svelte
+<script>
+  import DateRangeEditor from "@ticatec/topside-elements/DateRange";
+  import dayjs from "dayjs";
+
+  let checkIn = $state(/** @type {Date | undefined} */ (undefined));
+  let checkOut = $state(/** @type {Date | undefined} */ (undefined));
+
+  let nights = $derived(
+    checkIn && checkOut
+      ? dayjs(checkOut).startOf("day").diff(dayjs(checkIn).startOf("day"), "day")
+      : 0
+  );
+</script>
+
+<div class="hotel-booking">
+  <h3>Hotel booking</h3>
+  <DateRangeEditor
+    variant="outlined"
+    format="MMM DD, YYYY"
+    min={new Date()}
+    bind:fromValue={checkIn}
+    bind:toValue={checkOut}
+  />
+  <p>Stay: {nights} night{nights === 1 ? "" : "s"}</p>
+</div>
+```
+
+## Behavior
+
+### Layout
+
+The field shows two centered read-only inputs separated by a divider, plus a calendar action icon (`icon_google_event_note`). Clicking either input or the icon opens a fixed-width (~452px) popup with two calendars side by side.
+
+### Normalization
+
+When a day is selected:
+
+| End | Storage |
+|-----|---------|
+| **Start** (`fromValue`) | `dayjs(date).startOf("day").toDate()` |
+| **End** (`toValue`) | `dayjs(date).endOf("day").toDate()` |
+
+Display text uses the normalized values formatted with `format`.
+
+### Calendar constraints
+
+| Calendar | `min` | `max` |
+|----------|-------|-------|
+| **Start** (left) | global `min` | selected end date if set, otherwise global `max` |
+| **End** (right) | selected start date if set, otherwise global `min` | global `max` |
+
+### Selection workflow
+
+1. Open the popup (click input or calendar icon; blocked when `disabled` / `readonly`).
+2. Pick a start date on the **left** calendar — popup stays open.
+3. Pick an end date on the **right** calendar — popup closes.
+4. Clear start or end independently with the × control (visible when that end has a value and the field is editable).
+
+### Clear
+
+- `cleanFrom` sets `fromValue` to `undefined`.
+- `cleanTo` sets `toValue` to `undefined`.
+- Clear icons are hidden when `disabled` or `readonly`.
+
+## Date Formats
+
+`format` accepts Day.js tokens:
+
+| Format | Example | Notes |
+|--------|---------|--------|
+| `YYYY-MM-DD` | 2024-03-15 | Default |
+| `DD/MM/YYYY` | 15/03/2024 | Day-first |
+| `MM/DD/YYYY` | 03/15/2024 | Month-first |
+| `MMM DD, YYYY` | Mar 15, 2024 | Short month name |
+| `DD MMM YYYY` | 15 Mar 2024 | Day + short month |
+
+```svelte
+<DateRangeEditor format="DD/MM/YYYY" bind:fromValue={start} bind:toValue={end} />
+<DateRangeEditor format="MMM DD, YYYY" bind:fromValue={start} bind:toValue={end} />
+```
+
+## Variants
+
+| Variant | Description |
+|---------|-------------|
+| `""` | Default field chrome |
+| `"plain"` | Minimal styling |
+| `"outlined"` | Outlined border |
+| `"filled"` | Filled background |
+
+## Notes
+
+- Day.js is used for parse, normalize, and format.
+- Inputs are always `readonly`; values come only from calendar selection or binding.
+- Closing the popup (outside click / popover close) does not clear partial selection.
+- Inbound strings such as `"2025-03-01"` are valid `UniDate` values.
+- Outbound values after selection are native `Date` objects (start-of-day / end-of-day).
+
+## Related Components
+
+- [DatePicker](../date_picker/README.md) — single date or datetime
+- [NumberRange](../number_range/README.md) — numeric from/to range
+- [TimeEditor](../time_editor/README.md) — standalone time input