@ticatec/topside-elements 1.0.0

package/dist/form/text_editor/TextEditor.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+
+    import type {CaseMode} from "../types";
+    import prefixFilter, {eventFilter} from "../../utils/prefixFilter";
+    import CommonEditor from "../common_editor/CommonEditor.svelte";
+    import type CommonEditorProps from "../common_editor/CommonEditorProps";
+    import type {KeyboardEvents} from "../events";
+    import type {Snippet} from "svelte";
+
+    const excludeAttrs = ['type', 'readonly', 'disabled', 'required', 'wrap', 'value'];
+
+    interface Props extends CommonEditorProps, KeyboardEvents {
+        /*
+         * 大小写模式
+         */
+        caseMode?: CaseMode;
+        /**
+         *
+         */
+        value?: string;
+
+        [key: `input\$${string}`]: any;
+    }
+
+    let {
+        disabled = false,
+        readonly = false,
+        variant,
+        theme,
+        compact = false,
+        style,
+        value = $bindable(),
+        suffix,
+        prefix,
+        caseMode,
+        placeholder,
+        error,
+        tooltip,
+        leadingIcon,
+        trailingIcon,
+        onchange,
+        ...restProps
+    }: Props = $props();
+
+    let editor: HTMLInputElement;
+
+    let oldValue = value;
+
+    export function focus() {
+        editor?.focus();
+    }
+
+    const handleInput = (e: Event) => {
+        const input = e.target as HTMLInputElement;
+        let newValue = input.value;
+        if (caseMode === 'upper') newValue = newValue.toUpperCase();
+        if (caseMode === 'lower') newValue = newValue.toLowerCase();
+        value = newValue;
+
+    }
+
+    const handleChange = () => {
+        if (oldValue !== value) {
+            oldValue = value;
+            if (error) {
+                error = undefined;
+            }
+        }
+        onchange?.(value);
+    }
+
+    let input$ = $derived(prefixFilter(restProps, 'input$', excludeAttrs));
+    // Forward every on* handler a consumer passes (onfocus/onblur/onkeydown/…) to the native input.
+    // Kept reactive on purpose (see SearchBox). Internal oninput/onchange are spread AFTER this so they win.
+    let eventHandlers = $derived(eventFilter(restProps));
+
+    // 清空按钮 / 键盘清空都走这里：统一通知 onchange（与 Lookup / ColorPicker / OptionsMultiSelect 一致）
+    const clear = () => {
+        value = undefined;
+        handleChange();
+    }
+
+
+</script>
+
+
+<CommonEditor textValue={value} {clear} {style} {suffix} {prefix} {readonly} {disabled} {variant} {theme} {compact} {leadingIcon} {trailingIcon} {tooltip}
+              {error}>
+    <input bind:this={editor} {...input$} {placeholder} {...eventHandlers}
+           oninput={handleInput} onchange={handleChange} bind:value/>
+</CommonEditor>

package/dist/form/text_editor/TextEditor.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CaseMode } from "../types";
+import type CommonEditorProps from "../common_editor/CommonEditorProps";
+import type { KeyboardEvents } from "../events";
+interface Props extends CommonEditorProps, KeyboardEvents {
+    caseMode?: CaseMode;
+    /**
+     *
+     */
+    value?: string;
+    [key: `input\$${string}`]: any;
+}
+declare const TextEditor: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type TextEditor = ReturnType<typeof TextEditor>;
+export default TextEditor;

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

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

package/dist/form/text_editor/index.js

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

package/dist/form/time_editor/README.md

@@ -0,0 +1,386 @@
+# TimeEditor
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `mandatory` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A specialized time input component with interactive time selection functionality. Features keyboard navigation, automatic validation, and support for both minute and second precision. The component stores time as a numeric value representing total minutes (with fractional seconds).
+
+## Features
+
+- **Interactive Selection**: Click or use arrow keys to navigate between time segments.
+- **Automatic Validation**: Prevents invalid time entries (e.g. 25:70).
+- **Flexible Precision**: Support for both minute (HH:MM) and second (HH:MM:SS) precision.
+- **Clear Functionality**: Built-in clear button to reset the time.
+- **Visual Feedback**: Highlighted segments show current cursor position.
+- **Mandatory Mode**: Option to show zeros instead of underscores for required fields.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let timeValue = undefined; // undefined or number (minutes)
+</script>
+
+<TimeEditor bind:value={timeValue} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number \| undefined` | `undefined` | Time value in minutes (e.g. `90.5` = 1:30:30). Bindable. |
+| `precision` | `"M" \| "S"` | `"M"` | Time precision: `"M"` for minutes (HH:MM), `"S"` for seconds (HH:MM:SS). |
+| `clearable` | `boolean` | `true` | Whether the value can be cleared (shows the clear button). The old `mandatory` prop meant the opposite (`mandatory={true}` = `clearable={false}`) and was removed in 5.1.0. |
+| `variant` | `"" \| "plain" \| "outlined" \| "filled"` | `""` | Visual style variant. |
+| `compact` | `boolean` | `false` | Compact spacing layout. |
+| `disabled` | `boolean` | `false` | Disables the editor. |
+| `readonly` | `boolean` | `false` | Makes the editor read-only. |
+| `prefix` | `string` | `""` | Text prefix shown before the time. |
+| `suffix` | `string` | `""` | Text suffix shown after the time. |
+| `leadingIcon` | `Snippet` | `undefined` | Snippet rendered before the time. |
+| `trailingIcon` | `Snippet` | `undefined` | Snippet rendered after the time. |
+| `error` | `string` | `undefined` | Error message text. |
+| `tooltip` | `string` | `undefined` | Hover tooltip text. |
+| `theme` | `string` | `undefined` | Theme name for appearance switching. |
+| `style` | `string` | `""` | Inline CSS styles. |
+| `onchange` | `(value: number \| undefined) => void` | `undefined` | Fired with the committed time value (on blur). |
+| `onfocus` | `(e: FocusEvent) => void` | `undefined` | Input gains focus. |
+| `onblur` | `(e: FocusEvent) => void` | `undefined` | Input loses focus. |
+
+## Value Format
+
+The TimeEditor stores time as a number representing total minutes:
+
+| Value | Display | Description |
+|-------|---------|-------------|
+| `undefined` | `__:__` or `00:00` | Empty / unset |
+| `570` | `09:30` | 9 hours, 30 minutes |
+| `90.5` | `01:30:30` | 1 hour, 30 minutes, 30 seconds |
+
+Range: `0` to `1439` minutes (23:59).
+
+## Keyboard Navigation
+
+| Key | Action |
+|-----|--------|
+| `Arrow Left/Up` | Move cursor to previous time segment. |
+| `Arrow Right/Down` | Move cursor to next time segment. |
+| `0-9` | Input number at current cursor position. |
+| `Delete` | Clear current segment. |
+| `Backspace` | Clear current segment and move cursor back. |
+| `Tab` | Move focus to next element. |
+
+## Examples
+
+### Basic Time Input (Minutes)
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let meetingTime = 570; // 9:30 AM (9*60 + 30 = 570 minutes)
+</script>
+
+<div class="form-group">
+  <label>Meeting Time:</label>
+  <TimeEditor bind:value={meetingTime} precision="M" />
+</div>
+
+<p>Selected time: {Math.floor(meetingTime / 60)}:{(meetingTime % 60).toString().padStart(2, '0')}</p>
+```
+
+### Time Input with Seconds
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let duration = 125.75; // 2:05:45 (125 minutes + 45 seconds)
+</script>
+
+<div class="form-group">
+  <label>Video Duration:</label>
+  <TimeEditor bind:value={duration} precision="S" />
+</div>
+```
+
+### With Event Handlers
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let scheduleTime = undefined;
+  let isFocused = false;
+
+  function handleTimeChange(newTime) {
+    console.log("Time changed:", newTime);
+    if (newTime !== undefined) {
+      const hours = Math.floor(newTime / 60);
+      const minutes = Math.floor(newTime % 60);
+      const seconds = Math.floor((newTime % 1) * 60);
+      console.log(`Time: ${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
+    }
+  }
+
+  function handleFocus() {
+    isFocused = true;
+  }
+
+  function handleBlur() {
+    isFocused = false;
+  }
+</script>
+
+<TimeEditor
+  bind:value={scheduleTime}
+  precision="S"
+  onchange={handleTimeChange}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+/>
+
+<p>{isFocused ? "Time editor is active" : "Time editor is inactive"}</p>
+```
+
+### Mandatory Mode
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let optionalTime = undefined;
+  let requiredTime = undefined;
+</script>
+
+<!-- Optional mode (shows underscores) -->
+<div class="form-group">
+  <label>Optional Time:</label>
+  <TimeEditor bind:value={optionalTime} />
+</div>
+
+<!-- Mandatory mode (shows zeros) -->
+<div class="form-group">
+  <label>Required Time:</label>
+  <TimeEditor bind:value={requiredTime} clearable={false} />
+</div>
+```
+
+### With Prefix and Suffix
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let startTime = 480; // 8:00 AM
+  let duration = 120;  // 2:00 hours
+</script>
+
+<div class="form-group">
+  <label>Start Time:</label>
+  <TimeEditor bind:value={startTime} suffix=" AM" />
+</div>
+
+<div class="form-group">
+  <label>Duration:</label>
+  <TimeEditor bind:value={duration} prefix="Duration: " suffix=" hrs" />
+</div>
+```
+
+### Schedule Form
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let schedule = {
+    title: "",
+    startTime: undefined,
+    endTime: undefined,
+    breakDuration: 15 // 15 minutes
+  };
+
+  function handleSubmit() {
+    console.log("Schedule:", schedule);
+  }
+
+  function formatTime(minutes) {
+    if (minutes === undefined) return "Not set";
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.floor(minutes % 60);
+    return `${hours}:${mins.toString().padStart(2, '0')}`;
+  }
+</script>
+
+<div class="schedule-form">
+  <h3>Create Schedule</h3>
+
+  <div class="form-field">
+    <label>Event Title</label>
+    <input bind:value={schedule.title} placeholder="Enter event title" />
+  </div>
+
+  <div class="form-row">
+    <div class="form-field">
+      <label>Start Time</label>
+      <TimeEditor bind:value={schedule.startTime} precision="M" />
+    </div>
+
+    <div class="form-field">
+      <label>End Time</label>
+      <TimeEditor bind:value={schedule.endTime} precision="M" />
+    </div>
+  </div>
+
+  <div class="form-field">
+    <label>Break Duration (minutes)</label>
+    <TimeEditor bind:value={schedule.breakDuration} precision="M" />
+  </div>
+
+  <button onclick={handleSubmit}>Create Schedule</button>
+</div>
+
+<style>
+  .schedule-form {
+    max-width: 500px;
+    padding: 24px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+  }
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  .form-field {
+    margin-bottom: 16px;
+  }
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+  button {
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+</style>
+```
+
+### Timer/Stopwatch Example
+
+```svelte
+<script>
+  import TimeEditor from "@ticatec/topside-elements/TimeEditor";
+
+  let timerDuration = 5; // 5 minutes
+  let currentTime = 0;
+  let isRunning = false;
+  let interval;
+
+  function startTimer() {
+    if (timerDuration > 0) {
+      currentTime = timerDuration;
+      isRunning = true;
+
+      interval = setInterval(() => {
+        currentTime -= 1 / 60; // Subtract 1 second (1/60 minute)
+
+        if (currentTime <= 0) {
+          currentTime = 0;
+          stopTimer();
+          alert("Timer finished!");
+        }
+      }, 1000);
+    }
+  }
+
+  function stopTimer() {
+    isRunning = false;
+    if (interval) {
+      clearInterval(interval);
+      interval = undefined;
+    }
+  }
+
+  function resetTimer() {
+    stopTimer();
+    currentTime = 0;
+  }
+</script>
+
+<div class="timer-container">
+  <h3>Timer</h3>
+
+  <div class="form-field">
+    <label>Set Duration:</label>
+    <TimeEditor bind:value={timerDuration} precision="S" disabled={isRunning} />
+  </div>
+
+  <div class="form-field">
+    <label>Remaining Time:</label>
+    <TimeEditor bind:value={currentTime} precision="S" readonly />
+  </div>
+
+  <div class="timer-controls">
+    {#if !isRunning}
+      <button onclick={startTimer} disabled={timerDuration <= 0}>Start</button>
+    {:else}
+      <button onclick={stopTimer}>Stop</button>
+    {/if}
+    <button onclick={resetTimer}>Reset</button>
+  </div>
+</div>
+
+<style>
+  .timer-container {
+    max-width: 300px;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+  }
+  .form-field {
+    margin-bottom: 16px;
+  }
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+  .timer-controls {
+    display: flex;
+    gap: 8px;
+  }
+  button {
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+</style>
+```
+
+## Best Practices
+
+1. **Precision**: Use minute precision for most scheduling applications; use `"S"` only when sub-minute accuracy is needed.
+2. **Validation**: The component validates on blur; additional validation can be added in `onchange`.
+3. **Labels**: Provide clear labels describing the expected time format.
+4. **Default Values**: Consider providing sensible default times.
+5. **Range Validation**: Validate time ranges in your application logic.
+
+## Related Components
+
+- [DatePicker](../date_picker/README.md) — Date selection component.
+- [DateTimePicker](../date_picker/README.md) — Combined date and time selection.
+- [NumberEditor](../number_editor/README.md) — Numeric input with validation.