@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/date-picker/DatePicker.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 
-    import {onMount, tick} from "svelte";
     import {DisplayMode} from "../common/DisplayMode";
     import dayjs from "dayjs";
     import Calendar from "../base-calendar";
@@ -19,7 +18,9 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let min: UniDate = null;
     export let max: UniDate = null;
-    export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export let onchange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
     export const setFocus = () => {
         setTimeout(()=> {
             editor && editor.focus();
@@ -30,34 +31,45 @@
     let textValue: string;
     let editor: any;
     let oldValue = value;
+    let hasFocus: boolean = false;
+    let isUserChange: boolean = false;
 
-    onMount(() => {
-    })
 
     const generateText = (v: string) => {
         textValue = value == null ? '' : dayjs(value).format('YYYY-MM-DD');
     }
 
     const openPopup = () => {
-        editor.focus();
         showPopup = true;
     }
 
     $: generateText(value);
 
     $: if (oldValue != value) {
+        if (isUserChange) {
+            if (value != null) {
+                // 确保传递的是Date对象
+                const dateValue = value instanceof Date ? value : (dayjs.isDayjs(value) ? value.toDate() : new Date(value));
+                onchange?.(dateValue);
+            } else {
+                onchange?.(null);
+            }
+            isUserChange = false;
+        }
         oldValue = value;
-        onChange?.(value);
     }
 
     const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        isUserChange = true;
         value = d.toDate();
         showPopup = false;
+        editor.focus();
     }
 
     const handleKeyDown = (e: KeyboardEvent) => {
         if (!disabled) {
             if (e.key == 'Backspace' || e.key == 'Delete') {
+                isUserChange = true;
                 value = null;
                 textValue = '';
                 showPopup = false;
@@ -78,16 +90,41 @@
     let showPopup: boolean = false;
 
     const cleanData = () => {
+        isUserChange = true;
         value = null;
     }
 
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    }
+
+    const handleBlur = (event: FocusEvent) => {
+        if (!showPopup) {
+            hasFocus = false;
+            onblur?.();
+        }
+    }
+
+    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
+    $: if (!showPopup && hasFocus) {
+        setTimeout(() => {
+            if (document.activeElement !== editor) {
+                hasFocus = false;
+                onblur?.();
+            }
+        }, 50);
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_event_available"
               bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}
-           class="text-editor" bind:value={textValue} on:blur on:focus/>
+           class="text-editor" bind:value={textValue} on:blur={handleBlur} on:focus={handleFocus}/>
 
     <div class="date-popover" slot="popup-panel">
             <Calendar {value}  {min} {max} onSelect={handleCalendarSelect}/>

package/dist/date-picker/DatePicker.svelte.d.ts

@@ -26,12 +26,11 @@ declare const DatePicker: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: DisplayMode;
     min?: UniDate;
     max?: UniDate;
-    onChange?: OnChangeHandler<Date>;
+    onchange?: OnChangeHandler<Date>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
     setFocus?: () => void;
 }, {
-    blur: FocusEvent;
-    focus: FocusEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     setFocus: () => void;

package/dist/date-picker/DateTimePicker.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 
-    import {onMount, tick} from "svelte";
     import dayjs from "dayjs";
     import {DisplayMode} from "../common/DisplayMode";
     import dateUtils, {type UniDate} from "../base-calendar/dateUtils";
@@ -23,7 +22,9 @@
     export let compact: boolean = false;
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let mandatory: boolean = false;
-    export let onChange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export let onchange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
     export const setFocus = () => {
         setTimeout(()=> {
             editor && editor.focus();
@@ -34,6 +35,7 @@
     let confirmText = i18nRes.calendar.confirmText;
     let textValue: string;
     let editor: any;
+    let hasFocus: boolean = false;
 
     let currentValue: dayjs.Dayjs;
 
@@ -47,9 +49,6 @@
 
     let btnDisabled;
 
-    onMount(async () => {
-
-    })
 
     const openPopup = () => {
         displayTime = dateUtils.formatDate(currentValue, format);
@@ -79,9 +78,10 @@
     const confirm = async () => {
         if (dateUtils.toDayjs(value)?.toDate() != currentValue.toDate()) {
             value = currentValue;
-            onChange?.(currentValue.toDate());
+            onchange?.(currentValue.toDate());
         }
         showPopup = false;
+        editor.focus();
     }
 
     let displayTime: string = '';
@@ -119,19 +119,43 @@
         value = null;
     }
 
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    }
+
+    const handleBlur = (event: FocusEvent) => {
+        if (!showPopup) {
+            hasFocus = false;
+            onblur?.();
+        }
+    }
+
+    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
+    $: if (!showPopup && hasFocus) {
+        setTimeout(() => {
+            if (document.activeElement !== editor) {
+                hasFocus = false;
+                onblur?.();
+            }
+        }, 50);
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_access_time"
               bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
 
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}
-           class="text-editor" bind:value={textValue} on:blur on:focus/>
+           class="text-editor" bind:value={textValue} on:blur={handleBlur} on:focus={handleFocus}/>
 
     <div class="date-popover" slot="popup-panel">
         <div style="display: flex; flex-direction: row">
             <Calendar style="border-right: 1px solid var(--uniface-inside-border-color, #f0f0f0)" value={currentValue}
                       onSelect={handleCalendarSelect} {min} {max}/>
-            <TimePanel style="width: 120px" value={currentValue} {precision} onChange={handleTimeChange}/>
+            <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
         </div>
         <div style="border-top: 1px solid var(--uniface-inside-border-color, #f0f0f0); display: flex; flex-direction: row; box-sizing: border-box; padding: 4px 8px; text-align: left; align-items: center">
             <div style="flex: 1 1 auto">

package/dist/date-picker/DateTimePicker.svelte.d.ts

@@ -27,12 +27,11 @@ declare const DateTimePicker: $$__sveltets_2_IsomorphicComponent<{
     compact?: boolean;
     variant?: "" | "plain" | "outlined" | "filled";
     mandatory?: boolean;
-    onChange?: OnChangeHandler<Date>;
+    onchange?: OnChangeHandler<Date>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
     setFocus?: () => void;
 }, {
-    blur: FocusEvent;
-    focus: FocusEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     setFocus: () => void;

package/dist/date-picker/README.md

@@ -0,0 +1,326 @@
+# DatePicker & DateTimePicker Components
+
+A comprehensive date and time selection component library built with Svelte, providing flexible date and datetime picking functionality with various display modes and configurations.
+
+## Features
+
+- **DatePicker**: Simple date selection with calendar popup
+- **DateTimePicker**: Date and time selection with calendar and time panel
+- Multiple visual variants (plain, outlined, filled)
+- Keyboard navigation support
+- Min/max date restrictions
+- Mandatory field support
+- Readonly and disabled states
+- Display-only mode for read-only presentation
+- International date formatting
+- Accessible design with ARIA support
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+```typescript
+import DatePicker from '@ticatec/uniface-element/DatePicker';
+import DateTimePicker from '@ticatec/uniface-element/DateTimePicker';
+```
+
+Or if using within the same project:
+```typescript
+import DatePicker from '$lib/date-picker';
+import { DateTimePicker } from '$lib/date-picker';
+```
+
+## DatePicker
+
+### Basic Usage
+
+```svelte
+<script>
+  import DatePicker from '$lib/date-picker';
+  
+  let selectedDate = null;
+</script>
+
+<DatePicker bind:value={selectedDate} placeholder="Select date" />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| null` | `null` | Selected date value |
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant |
+| `disabled` | `boolean` | `false` | Disables the picker |
+| `readonly` | `boolean` | `false` | Makes the picker read-only |
+| `compact` | `boolean` | `false` | Compact display mode |
+| `mandatory` | `boolean` | `false` | Required field (hides clear button) |
+| `style` | `string` | `''` | Custom CSS styles |
+| `placeholder` | `string` | `""` | Input placeholder text |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode (Edit/View) |
+| `min` | `UniDate` | `null` | Minimum selectable date |
+| `max` | `UniDate` | `null` | Maximum selectable date |
+| `onchange` | `OnChangeHandler<Date>` | `null` | Change event handler |
+| `onfocus` | `() => void` | `null` | Focus event handler |
+| `onblur` | `() => void` | `null` | Blur event handler |
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `setFocus()` | Programmatically focus the picker |
+
+### Examples
+
+#### Basic Date Picker
+```svelte
+<DatePicker bind:value={enrolmentDate} placeholder="Select enrolment date" />
+```
+
+#### Outlined Mandatory Date Picker
+```svelte
+<DatePicker 
+  variant="outlined" 
+  mandatory 
+  bind:value={birthday} 
+  placeholder="Date of birth (required)" 
+/>
+```
+
+#### Filled Date Picker
+```svelte
+<DatePicker 
+  variant="filled" 
+  bind:value={admissionDate} 
+  placeholder="Admission date" 
+/>
+```
+
+#### Date Picker with Min/Max Restrictions
+```svelte
+<!-- Only allow dates up to today -->
+<DatePicker 
+  variant="filled" 
+  max={new Date()} 
+  bind:value={completedDate} 
+  placeholder="Completion date" 
+/>
+
+<!-- Only allow dates from tomorrow onwards -->
+<DatePicker 
+  variant="filled" 
+  min={new Date()} 
+  bind:value={bookFrom} 
+  placeholder="Booking start date" 
+/>
+```
+
+#### Disabled and Readonly States
+```svelte
+<!-- Disabled -->
+<DatePicker variant="filled" disabled bind:value={admissionDate} />
+
+<!-- Readonly -->
+<DatePicker variant="filled" readonly bind:value={admissionDate} />
+
+<!-- Display only mode -->
+<DatePicker 
+  displayMode={DisplayMode.View} 
+  variant="filled" 
+  readonly 
+  bind:value={admissionDate} 
+/>
+```
+
+## DateTimePicker
+
+### Basic Usage
+
+```svelte
+<script>
+  import { DateTimePicker } from '$lib/date-picker';
+  
+  let selectedDateTime = null;
+</script>
+
+<DateTimePicker bind:value={selectedDateTime} placeholder="Select date and time" />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `UniDate` | `null` | Selected datetime value |
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant |
+| `disabled` | `boolean` | `false` | Disables the picker |
+| `readonly` | `boolean` | `false` | Makes the picker read-only |
+| `compact` | `boolean` | `false` | Compact display mode |
+| `mandatory` | `boolean` | `false` | Required field (hides clear button) |
+| `style` | `string` | `''` | Custom CSS styles |
+| `placeholder` | `string` | `""` | Input placeholder text |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode (Edit/View) |
+| `min` | `UniDate` | `null` | Minimum selectable date |
+| `max` | `UniDate` | `null` | Maximum selectable date |
+| `precision` | `"H" \| "M" \| "S"` | `"M"` | Time precision (Hour/Minute/Second) |
+| `onchange` | `OnChangeHandler<Date>` | `null` | Change event handler |
+| `onfocus` | `() => void` | `null` | Focus event handler |
+| `onblur` | `() => void` | `null` | Blur event handler |
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `setFocus()` | Programmatically focus the picker |
+
+### Examples
+
+#### Basic DateTime Picker
+```svelte
+<DateTimePicker bind:value={cutoffTime} placeholder="Select cutoff time" />
+```
+
+#### DateTime Picker with Second Precision
+```svelte
+<DateTimePicker 
+  variant="outlined" 
+  precision="S" 
+  mandatory 
+  bind:value={releaseDate} 
+  placeholder="Release datetime (to seconds)" 
+/>
+```
+
+#### DateTime Picker with Hour Precision
+```svelte
+<DateTimePicker 
+  variant="filled" 
+  precision="H" 
+  bind:value={appointmentTime} 
+  placeholder="Appointment time (hour precision)" 
+/>
+```
+
+## Time Precision
+
+The `precision` prop in DateTimePicker controls the time granularity:
+
+- **"H"**: Hour precision (YYYY-MM-DD HH:00)
+- **"M"**: Minute precision (YYYY-MM-DD HH:mm) - Default
+- **"S"**: Second precision (YYYY-MM-DD HH:mm:ss)
+
+## Display Modes
+
+Both components support different display modes via the `displayMode` prop:
+
+- **`DisplayMode.Edit`**: Full editing capabilities (default)
+- **`DisplayMode.View`**: Read-only display mode
+
+## Variants
+
+Both components support multiple visual styles:
+
+- **Default** (`''`): Basic styling
+- **`'plain'`**: Minimal styling
+- **`'outlined'`**: Outlined border style
+- **`'filled'`**: Filled background style
+
+## Keyboard Navigation
+
+Both components support keyboard navigation:
+
+- **Backspace/Delete**: Clear the selected date/time
+- **Escape**: Close the popup
+- **Tab**: Navigate through the interface
+- **Enter**: Confirm selection (in DateTimePicker)
+
+## Accessibility
+
+- Full ARIA support for screen readers
+- Keyboard navigation
+- Focus management
+- Proper labeling and descriptions
+
+## Date Formats
+
+- **DatePicker**: YYYY-MM-DD
+- **DateTimePicker**: 
+  - Hour precision: YYYY-MM-DD HH:mm
+  - Minute precision: YYYY-MM-DD HH:mm
+  - Second precision: YYYY-MM-DD HH:mm:ss
+
+## Event Handling
+
+```svelte
+<script>
+  function handleDateChange(date) {
+    console.log('Date selected:', date);
+  }
+  
+  function handleFocus() {
+    console.log('Picker focused');
+  }
+  
+  function handleBlur() {
+    console.log('Picker blurred');
+  }
+</script>
+
+<DatePicker 
+  bind:value={selectedDate}
+  onchange={handleDateChange}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+/>
+```
+
+## Styling
+
+Both components inherit styling from the Uniface design system and can be customized with CSS variables:
+
+```css
+.uniface-date-time-editor {
+  --uniface-inside-border-color: #f0f0f0;
+  /* Add custom styling */
+}
+```
+
+## Integration with Forms
+
+Both components work seamlessly with FormField:
+
+```svelte
+<script>
+  import FormField from '$lib/form-field';
+  import DatePicker, { DateTimePicker } from '$lib/date-picker';
+</script>
+
+<FormField label="Date of Birth">
+  <DatePicker variant="outlined" mandatory bind:value={dateOfBirth} />
+</FormField>
+
+<FormField label="Appointment Time">
+  <DateTimePicker variant="filled" precision="M" bind:value={appointmentTime} />
+</FormField>
+```
+
+## Type Definitions
+
+```typescript
+type UniDate = Date | dayjs.Dayjs | string | null;
+type OnChangeHandler<T> = (value: T | null) => void;
+
+enum DisplayMode {
+  Edit = 'edit',
+  View = 'view'
+}
+```
+
+## Notes
+
+- The components use Day.js internally for date manipulation
+- Values are always returned as native JavaScript Date objects
+- The calendar popup automatically closes when a date is selected
+- The DateTime picker requires confirmation before applying the selection
+- Min/max date restrictions are enforced in the calendar view
+- The clear button is hidden when `mandatory` is true