@ibobbyts/svelte-ui-utils 0.4.1 → 0.4.2

package/README.md

@@ -845,3 +845,23 @@ bun add @ibobbyts/svelte-ui-utils@0.3.1 svelte
 ```
 
 Use it after each release when a Bun-based project will consume the package.
+
+## 分段日期输入（本地新增，尚未发布）
+
+```svelte
+<script lang="ts">
+  import { SegmentedDateInput } from '@ibobbyts/svelte-ui-utils/segmented-date';
+  let dob = $state('');
+</script>
+
+<SegmentedDateInput name="dob" bind:value={dob} ariaLabel="生日"
+  yearLabel="年" monthLabel="月" dayLabel="日" autocomplete="bday" />
+```
+
+支持 `precision="year" | "month" | "day"`（默认 `day`）、数字输入、全角数字归一化、完整日期粘贴及月日失焦补零。`value` 可双向绑定；`onvalueinput` 接收用户输入后的组合值。日历有效性和业务范围由调用方校验。
+
+默认用隐藏字段提交组合值；`submitParts={true}` 改为提交 `${name}Year`、`${name}Month`、`${name}Day`（按精度决定字段）。支持 `required`、`readonly`、`disabled`、`id`（关联年输入框）和生日自动填充。`ariaLabel`、各段标签及占位符由调用方提供，以接入应用本地化。
+
+引入公共 `style.css` 后可独立使用，无需 Tailwind 或 DaisyUI。`class` 定制容器；`inputClass` 替换默认输入框装饰样式，布局仍由组件负责。MMS 通过该参数保留 DaisyUI 外观。
+
+纯函数和类型可从 `@ibobbyts/svelte-ui-utils/segmented-date/state` 引入：`splitSegmentedDate`、`composeSegmentedDate`、`parsePastedSegmentedDate`、`SegmentedDateParts`、`SegmentedDatePrecision`；此入口不加载 Svelte，适用于服务端和 Node。

package/dist/dropdown/Dropdown.svelte

@@ -563,10 +563,11 @@
               {#if group.label}
                 <div class="suu-dropdown__group-label">{group.label}</div>
               {/if}
-              {#each group.options as option}
+              {#each group.options as option, optionIndex}
                 <button
                   type="button"
                   class="suu-dropdown__option"
+                  class:suu-dropdown__option--group-first={Boolean(group.label) && optionIndex === 0}
                   class:suu-dropdown__option--active={option.value === activeValue}
                   class:suu-dropdown__option--disabled={option.disabled}
                   role="option"

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export * from './ordered-list/index.js';
 export * from './sortable-table/index.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from './i18n.js';
 export type { UiLanguage, UiMessages } from './i18n.js';
+export * from './segmented-date/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACxD,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -8,3 +8,4 @@ export * from './sortable-list/index.js';
 export * from './ordered-list/index.js';
 export * from './sortable-table/index.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from './i18n.js';
+export * from './segmented-date/index.js';

package/dist/segmented-date/SegmentedDateInput.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import { untrack } from "svelte";
+    import {
+        composeSegmentedDate,
+        parsePastedSegmentedDate,
+        splitSegmentedDate,
+        type SegmentedDatePrecision,
+    } from "./state.js";
+
+    let {
+        value = $bindable(""),
+        precision = "day",
+        name,
+        id,
+        required = false,
+        readonly = false,
+        disabled = false,
+        ariaLabel,
+        yearLabel,
+        monthLabel,
+        dayLabel,
+        yearPlaceholder = "YYYY",
+        monthPlaceholder = "MM",
+        dayPlaceholder = "DD",
+        submitParts = false,
+        autocomplete,
+        class: className = "",
+        inputClass = "",
+        onvalueinput,
+    } = $props<{
+        value?: string;
+        precision?: SegmentedDatePrecision;
+        name: string;
+        id?: string;
+        required?: boolean;
+        readonly?: boolean;
+        disabled?: boolean;
+        ariaLabel: string;
+        yearLabel: string;
+        monthLabel?: string;
+        dayLabel?: string;
+        yearPlaceholder?: string;
+        monthPlaceholder?: string;
+        dayPlaceholder?: string;
+        submitParts?: boolean;
+        autocomplete?: "bday";
+        class?: string;
+        inputClass?: string;
+        onvalueinput?: (value: string) => void;
+    }>();
+
+    let year = $state("");
+    let month = $state("");
+    let day = $state("");
+
+    $effect(() => {
+        const parts = splitSegmentedDate(value, precision);
+        // Keep partially entered segments while the child is emitting an incomplete value.
+        const current = untrack(() => composeSegmentedDate({ year, month, day }, precision));
+        if (value !== current) {
+            year = parts.year;
+            month = parts.month;
+            day = parts.day;
+        }
+    });
+
+    function updateValue() {
+        const nextValue = composeSegmentedDate({ year, month, day }, precision);
+        if (nextValue === value) return;
+        value = nextValue;
+        onvalueinput?.(value);
+    }
+
+    function handleInput(part: SegmentedDatePrecision, event: Event) {
+        const input = event.currentTarget as HTMLInputElement;
+        const normalized = input.value.normalize("NFKC").replace(/\D/g, "")
+            .slice(0, part === "year" ? 4 : 2);
+        input.value = normalized;
+        if (part === "year") year = normalized;
+        if (part === "month") month = normalized;
+        if (part === "day") day = normalized;
+        updateValue();
+    }
+
+    function handleBlur(part: "month" | "day") {
+        if (part === "month" && /^\d$/.test(month)) month = month.padStart(2, "0");
+        if (part === "day" && /^\d$/.test(day)) day = day.padStart(2, "0");
+        updateValue();
+    }
+
+    function handlePaste(event: ClipboardEvent) {
+        const parts = parsePastedSegmentedDate(
+            event.clipboardData?.getData("text") ?? "",
+            precision,
+        );
+        if (!parts) return;
+        event.preventDefault();
+        year = parts.year;
+        month = parts.month;
+        day = parts.day;
+        updateValue();
+    }
+</script>
+
+{#if !submitParts}
+    <input type="hidden" {name} {value} {disabled} />
+{/if}
+
+<div
+    class={["suu-segmented-date", className]}
+    data-precision={precision}
+    role="group"
+    aria-label={ariaLabel}
+>
+    <input
+        class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+        type="text"
+        name={submitParts ? `${name}Year` : undefined}
+        {id}
+        bind:value={year}
+        oninput={(event) => handleInput("year", event)}
+        onpaste={handlePaste}
+        inputmode="numeric"
+        pattern="[0-9][0-9][0-9][0-9]"
+        maxlength="4"
+        placeholder={yearPlaceholder}
+        aria-label={yearLabel}
+        autocomplete={autocomplete ? "bday-year" : undefined}
+        {required}
+        {readonly}
+        {disabled}
+    />
+    {#if precision !== "year"}
+        <input
+            class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+            type="text"
+            name={submitParts ? `${name}Month` : undefined}
+            bind:value={month}
+            oninput={(event) => handleInput("month", event)}
+            onblur={() => handleBlur("month")}
+            onpaste={handlePaste}
+            inputmode="numeric"
+            pattern="[0-9][0-9]?"
+            maxlength="2"
+            placeholder={monthPlaceholder}
+            aria-label={monthLabel}
+            autocomplete={autocomplete ? "bday-month" : undefined}
+            {required}
+            {readonly}
+            {disabled}
+        />
+    {/if}
+    {#if precision === "day"}
+        <input
+            class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+            type="text"
+            name={submitParts ? `${name}Day` : undefined}
+            bind:value={day}
+            oninput={(event) => handleInput("day", event)}
+            onblur={() => handleBlur("day")}
+            onpaste={handlePaste}
+            inputmode="numeric"
+            pattern="[0-9][0-9]?"
+            maxlength="2"
+            placeholder={dayPlaceholder}
+            aria-label={dayLabel}
+            autocomplete={autocomplete ? "bday-day" : undefined}
+            {required}
+            {readonly}
+            {disabled}
+        />
+    {/if}
+</div>
+
+<style>
+    .suu-segmented-date { display: grid; min-width: 0; gap: 0.5rem; }
+    .suu-segmented-date[data-precision="year"] { grid-template-columns: minmax(0, 1fr); }
+    .suu-segmented-date[data-precision="month"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+    .suu-segmented-date[data-precision="day"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
+    .suu-segmented-date__input { min-width: 0; width: 100%; box-sizing: border-box; }
+    .suu-segmented-date__input--default {
+        padding: 0.5rem 0.75rem;
+        border: 1px solid var(--suu-color-border);
+        border-radius: var(--suu-radius);
+        background: var(--suu-color-bg);
+        color: var(--suu-color-text);
+        font: inherit;
+    }
+    .suu-segmented-date__input--default:focus-visible { outline: 2px solid var(--suu-color-accent); outline-offset: 2px; }
+</style>

package/dist/segmented-date/SegmentedDateInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type SegmentedDatePrecision } from "./state.js";
+type $$ComponentProps = {
+    value?: string;
+    precision?: SegmentedDatePrecision;
+    name: string;
+    id?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    ariaLabel: string;
+    yearLabel: string;
+    monthLabel?: string;
+    dayLabel?: string;
+    yearPlaceholder?: string;
+    monthPlaceholder?: string;
+    dayPlaceholder?: string;
+    submitParts?: boolean;
+    autocomplete?: "bday";
+    class?: string;
+    inputClass?: string;
+    onvalueinput?: (value: string) => void;
+};
+declare const SegmentedDateInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SegmentedDateInput = ReturnType<typeof SegmentedDateInput>;
+export default SegmentedDateInput;
+//# sourceMappingURL=SegmentedDateInput.svelte.d.ts.map

package/dist/segmented-date/SegmentedDateInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedDateInput.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/SegmentedDateInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAIC,KAAK,sBAAsB,EAC9B,MAAM,YAAY,CAAC;AAEvB,KAAK,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAkGN,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/segmented-date/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SegmentedDateInput } from './SegmentedDateInput.svelte';
+export * from './state.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/segmented-date/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,YAAY,CAAC"}

package/dist/segmented-date/index.js

@@ -0,0 +1,2 @@
+export { default as SegmentedDateInput } from './SegmentedDateInput.svelte';
+export * from './state.js';

package/dist/segmented-date/state.d.ts

@@ -0,0 +1,10 @@
+export type SegmentedDatePrecision = "year" | "month" | "day";
+export type SegmentedDateParts = {
+    year: string;
+    month: string;
+    day: string;
+};
+export declare function splitSegmentedDate(value: string, precision: SegmentedDatePrecision): SegmentedDateParts;
+export declare function composeSegmentedDate(parts: SegmentedDateParts, precision: SegmentedDatePrecision): string;
+export declare function parsePastedSegmentedDate(value: string, precision: SegmentedDatePrecision): SegmentedDateParts | null;
+//# sourceMappingURL=state.d.ts.map

package/dist/segmented-date/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/state.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,wBAAgB,kBAAkB,CAC9B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,sBAAsB,GAClC,kBAAkB,CAuBpB;AAED,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,sBAAsB,GAClC,MAAM,CAqBR;AAED,wBAAgB,wBAAwB,CACpC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,sBAAsB,GAClC,kBAAkB,GAAG,IAAI,CAe3B"}

package/dist/segmented-date/state.js

@@ -0,0 +1,67 @@
+const EMPTY_PARTS = { year: "", month: "", day: "" };
+function normalizePart(value) {
+    return value.normalize("NFKC").trim();
+}
+export function splitSegmentedDate(value, precision) {
+    const normalized = value.normalize("NFKC").trim();
+    const patterns = {
+        year: /^([^-]*)$/,
+        month: /^([^-]*)-([^-]*)$/,
+        day: /^([^-]*)-([^-]*)-([^-]*)$/,
+    };
+    const match = normalized.match(patterns[precision]);
+    if (!match) {
+        if (precision === "month" && /^\d{4}$/.test(normalized)) {
+            return { year: normalized, month: "", day: "" };
+        }
+        if (precision === "month" && /^\d{1,2}$/.test(normalized)) {
+            return { year: "", month: normalized, day: "" };
+        }
+        return { ...EMPTY_PARTS };
+    }
+    return {
+        year: match[1] ?? "",
+        month: precision === "year" ? "" : (match[2] ?? ""),
+        day: precision === "day" ? (match[3] ?? "") : "",
+    };
+}
+export function composeSegmentedDate(parts, precision) {
+    const year = normalizePart(parts.year);
+    const month = normalizePart(parts.month);
+    const day = normalizePart(parts.day);
+    if (!year && (precision === "year" || !month) && (precision !== "day" || !day)) {
+        return "";
+    }
+    if (precision === "year")
+        return year;
+    if (precision === "month") {
+        if (/^\d{4}$/.test(year) && /^\d{1,2}$/.test(month)) {
+            return `${year}-${month.padStart(2, "0")}`;
+        }
+        if (/^\d{4}$/.test(year) && !month)
+            return year;
+        if (!year && /^\d{1,2}$/.test(month))
+            return month.padStart(2, "0");
+        return `${year}-${month}`;
+    }
+    if (/^\d{4}$/.test(year) && /^\d{1,2}$/.test(month) && /^\d{1,2}$/.test(day)) {
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    }
+    return `${year}-${month}-${day}`;
+}
+export function parsePastedSegmentedDate(value, precision) {
+    const normalized = value.normalize("NFKC").trim();
+    const patterns = {
+        year: /^(\d{4})$/,
+        month: /^(?:(\d{4})[-/.](\d{1,2})|(\d{1,2}))$/,
+        day: /^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/,
+    };
+    const match = normalized.match(patterns[precision]);
+    if (!match)
+        return null;
+    return {
+        year: match[1] ?? "",
+        month: precision === "year" ? "" : (match[2] ?? match[3]).padStart(2, "0"),
+        day: precision === "day" ? match[3].padStart(2, "0") : "",
+    };
+}

package/dist/style.css

@@ -1283,6 +1283,7 @@
 .suu-dropdown__panel {
   max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;
+  overflow-x: hidden;
   background: var(--suu-color-bg);
   overscroll-behavior: contain;
 }
@@ -1313,6 +1314,10 @@
   text-align: left;
 }
 
+.suu-dropdown__option--group-first {
+  border-top: 1px solid var(--suu-color-border);
+}
+
 .suu-dropdown--multiselect .suu-dropdown__option {
   display: flex;
   gap: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",
@@ -77,7 +77,16 @@
       "svelte": "./dist/sortable-table/index.js",
       "default": "./dist/sortable-table/index.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./segmented-date": {
+      "types": "./dist/segmented-date/index.d.ts",
+      "svelte": "./dist/segmented-date/index.js",
+      "default": "./dist/segmented-date/index.js"
+    },
+    "./segmented-date/state": {
+      "types": "./dist/segmented-date/state.d.ts",
+      "default": "./dist/segmented-date/state.js"
+    }
   },
   "publishConfig": {
     "access": "public",