@ticatec/topside-elements 1.0.0

package/dist/form/common_range_editor/CommonRangeEditor.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import type {Snippet} from "svelte";
+    import FormEditor from "../FormEditor.svelte";
+    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;
+        fromClearable?: boolean;
+        toClearable?: boolean;
+        cleanFrom: () => void;
+        cleanTo: () => void;
+        from: Snippet;
+        to: Snippet;
+        actionIcon?: Snippet;
+    }
+
+    let {
+        variant,
+        compact = false,
+        disabled = false,
+        readonly = false,
+        error,
+        tooltip,
+        theme,
+        class: className,
+        style = '',
+        fromClearable = false,
+        toClearable = false,
+        cleanFrom,
+        cleanTo,
+        from,
+        to,
+        actionIcon
+    }: Props = $props();
+
+    const handleCleanKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
+</script>
+
+<FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} class={className}>
+    <div class="topside-common-editor topside-common-picker" tabindex="-1">
+        <div class="range-row">
+            <div class="range-cell">
+                {@render from()}
+                <div class="clean-icon" class:visible={fromClearable}>
+                    <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
+                       onclick={cleanFrom} onkeydown={handleCleanKeyDown(cleanFrom)}></i>
+                </div>
+            </div>
+            <div class="divider"></div>
+            <div class="range-cell">
+                {@render to()}
+                <div class="clean-icon" class:visible={toClearable}>
+                    <i class="icon_google_clear" role="button" tabindex="-1" aria-label="Clear"
+                       onclick={cleanTo} onkeydown={handleCleanKeyDown(cleanTo)}></i>
+                </div>
+            </div>
+        </div>
+        {#if actionIcon}
+            {@render actionIcon()}
+        {/if}
+    </div>
+</FormEditor>
+
+<style>
+    .range-row {
+        flex: 1 1 auto;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: 2px;
+        position: relative;
+    }
+
+    .range-cell {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 0;
+    }
+
+    .divider {
+        position: relative;
+        flex: 0 0 auto;
+        width: 6px;
+    }
+
+    .divider::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--topside-editor-inline-action-icon-color, #37415170);
+        transform: translateY(-50%);
+    }
+
+    .clean-icon {
+        flex: 0 0 16px;
+        width: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.15s;
+        pointer-events: none;
+    }
+
+    .clean-icon.visible {
+        opacity: 0.6;
+        pointer-events: auto;
+    }
+
+    .clean-icon.visible:hover {
+        opacity: 1;
+    }
+
+    .clean-icon i {
+        font-size: 10px;
+        cursor: pointer;
+    }
+
+    /* 覆盖全局 .topside-form-editor .topside-common-picker .clean-icon i { display: none } */
+    :global(.topside-form-editor .topside-common-picker) .range-cell .clean-icon i {
+        display: block !important;
+    }
+</style>

package/dist/form/common_range_editor/CommonRangeEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+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;
+    fromClearable?: boolean;
+    toClearable?: boolean;
+    cleanFrom: () => void;
+    cleanTo: () => void;
+    from: Snippet;
+    to: Snippet;
+    actionIcon?: Snippet;
+}
+declare const CommonRangeEditor: import("svelte").Component<Props, {}, "">;
+type CommonRangeEditor = ReturnType<typeof CommonRangeEditor>;
+export default CommonRangeEditor;

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

@@ -0,0 +1,2 @@
+import CommonRangeEditor from "./CommonRangeEditor.svelte";
+export default CommonRangeEditor;

package/dist/form/common_range_editor/index.js

@@ -0,0 +1,2 @@
+import CommonRangeEditor from "./CommonRangeEditor.svelte";
+export default CommonRangeEditor;

package/dist/form/date_picker/DatePicker.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+
+    import dayjs, {isDayjs} from "dayjs";
+    import Calendar from "../../base-calendar";
+    import type {UniDate} from "../../base-calendar/dateUtils";
+    import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonPickerProps from "../common_editor/CommonPickerProps";
+    import type {KeyboardEvents} from "../events";
+
+    interface Props extends CommonPickerProps, KeyboardEvents {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+    }
+
+    let {
+        error,
+        tooltip,
+        variant,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        clearable,
+        value = $bindable<UniDate>(),
+        style,
+        placeholder,
+        min,
+        max,
+        onchange,
+        onfocus,
+        onblur
+    }: Props = $props();
+
+    let textValue = $state('');
+    let isOpen = $state(false);
+
+    const handleValueChange = (d: dayjs.Dayjs | Date | undefined): void => {
+        const newValue = d == null ? undefined : isDayjs(d) ? d.toDate() : d;
+        value = newValue;
+        onchange?.(newValue);
+    }
+
+    const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        handleValueChange(d);
+        isOpen = false;
+        picker.focus();
+    }
+
+    $effect(() => {
+        textValue = value == null ? '' : dayjs(value).format('YYYY-MM-DD');
+    });
+
+    let picker: CommonPicker;
+
+</script>
+
+<CommonPicker bind:this={picker} {variant} {style} {error} {tooltip} {compact} {clearable}
+              iconName="icon_google_event_available" clear={() => handleValueChange(undefined)} {onfocus} {onblur} {placeholder} {value}
+              bind:expanded={isOpen} autoFit={false} {textValue} {readonly} {disabled}>
+    {#snippet popup()}
+        <div class="date-popover">
+            <Calendar value={value} {min} {max} onchange={handleCalendarSelect}/>
+        </div>
+    {/snippet}
+</CommonPicker>
+
+<style>
+    .date-popover {
+        user-select: none;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { UniDate } from "../../base-calendar/dateUtils";
+import type CommonPickerProps from "../common_editor/CommonPickerProps";
+import type { KeyboardEvents } from "../events";
+interface Props extends CommonPickerProps, KeyboardEvents {
+    value?: UniDate;
+    min?: UniDate;
+    max?: UniDate;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/form/date_picker/DateTimePicker.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+    import {onDestroy} from 'svelte';
+    import dayjs from "dayjs";
+    import dateUtils, {type UniDate} from "../../base-calendar/dateUtils";
+    import Calendar from "../../base-calendar";
+    import TimePanel from "./TimePanel.svelte";
+    import {TextButton} from "../../general/button";
+    import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonPickerProps from "../common_editor/CommonPickerProps";
+    import i18nRes from "../../i18nRes";
+
+    type Precision = "H" | "M" | "S";
+
+    interface Props extends CommonPickerProps {
+        value?: UniDate;
+        min?: UniDate;
+        max?: UniDate;
+        precision?: Precision;
+    }
+
+    let {
+        variant,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        clearable,
+        error,
+        tooltip,
+        theme,
+        style,
+        placeholder,
+        value = $bindable<UniDate>(),
+        min = undefined,
+        max = undefined,
+        precision = "M",
+        onchange,
+        onfocus,
+        onblur,
+    }: Props = $props();
+
+    const dateFmts: Record<Precision, string> = {
+        "H": "YYYY-MM-DD HH:mm",
+        "M": "YYYY-MM-DD HH:mm",
+        "S": "YYYY-MM-DD HH:mm:ss",
+    };
+
+    const format = $derived(dateFmts[precision]);
+    const confirmText = $derived(i18nRes.calendar.confirmText());
+
+    let isOpen = $state(false);
+    let currentValue = $state<dayjs.Dayjs>(dayjs());
+
+    const textValue = $derived(value == null ? '' : dateUtils.formatDate(value, format));
+    const displayTime = $derived(dateUtils.formatDate(currentValue, format));
+    const btnDisabled = $derived(currentValue == null);
+
+    let picker: CommonPicker;
+    let focusTimer: any;
+
+    export function focus() {
+        clearTimeout(focusTimer);
+        focusTimer = setTimeout(() => {
+            picker?.focus();
+        }, 50);
+    }
+
+    onDestroy(() => {
+        if (focusTimer != null) {
+            clearTimeout(focusTimer);
+            focusTimer = null;
+        }
+    });
+
+    // Resync currentValue from external value / precision changes.
+    $effect(() => {
+        const v = value;
+        const p = precision;
+        let next = v ? (dateUtils.toDayjs(v) ?? dayjs()) : dayjs();
+        next = next.millisecond(0);
+        if (p === "H") {
+            next = next.second(0).minute(0);
+        } else if (p === "M") {
+            next = next.second(0);
+        }
+        currentValue = next;
+    });
+
+    const openPopup = () => {
+        isOpen = true;
+    };
+
+    const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        currentValue = currentValue
+            .year(d.year())
+            .month(d.month())
+            .date(d.date());
+        picker?.focus();
+    };
+
+    const handleTimeChange = (t: dayjs.Dayjs) => {
+        currentValue = t;
+    };
+
+    const confirm = () => {
+        const existing = dateUtils.toDayjs(value);
+        if (existing == null || !existing.isSame(currentValue)) {
+            value = currentValue;
+            onchange?.(currentValue.toDate());
+        }
+        isOpen = false;
+        picker?.focus();
+    };
+
+    // 清空按钮 / 键盘清空都走这里：统一通知 onchange（与 Lookup / ColorPicker / OptionsMultiSelect 一致）
+    const cleanData = () => {
+        value = undefined;
+        onchange?.(undefined);
+    };
+</script>
+
+<CommonPicker
+        bind:this={picker}
+        {variant} {style} {error} {tooltip} {theme}
+        {compact} {clearable}
+        iconName="icon_google_access_time"
+        clear={cleanData}
+        {placeholder} {value} {textValue}
+        {readonly} {disabled}
+        bind:expanded={isOpen}
+        autoFit={false}
+        {onfocus} {onblur}>
+    {#snippet popup()}
+        <div class="date-popover">
+            <div style="display: flex; flex-direction: row">
+                <Calendar
+                        style="border-right: 1px solid var(--topside-inside-border-color, #f0f0f0)"
+                        value={currentValue}
+                        onchange={handleCalendarSelect}
+                        {min} {max}/>
+                <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
+            </div>
+            <div class="confirm-bar">
+                <div style="flex: 1 1 auto">
+                    <span>{displayTime}</span>
+                </div>
+                <div style="flex: 0 0 auto;">
+                    <TextButton label={confirmText} type="primary" disabled={btnDisabled} onclick={confirm}/>
+                </div>
+            </div>
+        </div>
+    {/snippet}
+</CommonPicker>
+
+<style>
+    .date-popover {
+        user-select: none;
+    }
+
+    .confirm-bar {
+        border-top: 1px solid var(--topside-inside-border-color, #f0f0f0);
+        display: flex;
+        flex-direction: row;
+        box-sizing: border-box;
+        padding: 4px 8px;
+        text-align: left;
+        align-items: center;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import { type UniDate } from "../../base-calendar/dateUtils";
+import type CommonPickerProps from "../common_editor/CommonPickerProps";
+type Precision = "H" | "M" | "S";
+interface Props extends CommonPickerProps {
+    value?: UniDate;
+    min?: UniDate;
+    max?: UniDate;
+    precision?: Precision;
+}
+declare const DateTimePicker: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;