@kashi-ui/elements 0.0.0-stage → 0.25.0

package/dist/fields.js

@@ -0,0 +1,103 @@
+import { onlyDigits, toFaDigits } from "@kashi-ui/persian";
+import { HTMLBase, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+/**
+ * کد تأیید یک‌بارمصرف: یک input واقعی (نه شش input جدا)، پس چسباندن، پاک کردن،
+ * صفحه‌خوان و پر شدن خودکار کد پیامکی (autocomplete="one-time-code") کار می‌کنند.
+ */
+export class KashiOtp extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.code = "";
+        this.caret = 0;
+        this.valueSet = false;
+        this.rendered = false;
+        this.key = uid("kashi-otp");
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.code = onlyDigits(this.getAttribute("value") ?? "").slice(0, this.length);
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value") {
+            this.code = onlyDigits(next ?? "").slice(0, this.length);
+            this.paint();
+        }
+        else
+            this.render();
+    }
+    get value() {
+        return this.code;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.code = onlyDigits(String(v ?? "")).slice(0, this.length);
+        if (this.rendered)
+            this.paint();
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    get length() {
+        const n = Number(this.getAttribute("length"));
+        return Number.isInteger(n) && n > 0 ? n : 6;
+    }
+    render() {
+        const id = this.key;
+        const length = this.length;
+        const group = Number(this.getAttribute("group-after")) || 0;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "کد تأیید";
+        const slots = Array.from({ length }, (_, i) => `${group && i === group ? '<span class="k-otp__sep" aria-hidden="true"></span>' : ""}<span class="k-otp__slot" aria-hidden="true"></span>`).join("");
+        const control = `<div class="k-otp${this.getAttribute("size") === "sm" ? " k-otp--sm" : ""}"><input id="${id}" class="k-otp__input" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="\\d*" maxlength="${length * 2}"${this.hasAttribute("disabled") ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}>${slots}</div>`;
+        this.querySelector(":scope > .k-field")?.remove();
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
+        this.input = this.querySelector(".k-otp__input");
+        this.querySelector(".k-otp").addEventListener("click", () => this.input.focus());
+        this.input.addEventListener("input", () => {
+            const next = onlyDigits(this.input.value).slice(0, this.length);
+            const prev = this.code;
+            this.code = next;
+            this.caret = next.length;
+            this.paint();
+            if (next !== prev)
+                emit(this, "kashi-change", { value: next });
+            if (next.length === this.length && next !== prev)
+                emit(this, "kashi-complete", { value: next });
+        });
+        const sync = () => {
+            this.caret = Math.min(this.input.selectionStart ?? this.code.length, this.length);
+            this.paintSlots();
+        };
+        for (const t of ["select", "keyup", "focus"])
+            this.input.addEventListener(t, sync);
+        this.input.addEventListener("blur", () => this.paintSlots());
+        this.rendered = true;
+        this.paint();
+    }
+    paint() {
+        if (this.input.value !== this.code)
+            this.input.value = this.code;
+        this.paintSlots();
+        const error = this.getAttribute("error");
+        this.querySelector(".k-otp").classList.toggle("k-otp--invalid", !!error);
+        setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, error, this.getAttribute("hint"));
+        syncHidden(this, this.getAttribute("name"), this.code);
+    }
+    /** فقط خانه‌ها؛ مقدار input را دست نمی‌زند تا تایپ کاربر پیش از رویداد input پاک نشود */
+    paintSlots() {
+        const fa = this.getAttribute("digits") !== "latin";
+        const focused = this.ownerDocument.activeElement === this.input;
+        const active = Math.min(this.caret, this.length - 1);
+        this.querySelectorAll(".k-otp__slot").forEach((slot, i) => {
+            const c = this.code[i] ?? "";
+            slot.textContent = fa ? toFaDigits(c) : c;
+            slot.toggleAttribute("data-filled", !!c);
+            slot.toggleAttribute("data-active", focused && i === active);
+        });
+    }
+}
+KashiOtp.observedAttributes = ["label", "hint", "error", "length", "digits", "group-after", "size", "disabled", "name", "value", "aria-label"];
+define("kashi-otp", KashiOtp, "block");

package/dist/forms.d.ts

@@ -0,0 +1,186 @@
+import { type Plate } from "@kashi-ui/persian";
+import { HTMLBase } from "./base.js";
+import { type ComboboxOption } from "./combobox.js";
+/**
+ * انتخاب چندتایی با جستجو: انتخاب‌ها به‌شکل برچسب، با Backspace حذف آخرین، ↑↓ و Enter برای انتخاب.
+ * گزینه‌ها از <option> (selected برای انتخاب اولیه) یا element.options.
+ */
+export declare class KashiMultiSelect extends HTMLBase {
+    static observedAttributes: string[];
+    private list;
+    private chosen;
+    private query;
+    private active;
+    private isOpen;
+    private valueSet;
+    private key;
+    private input;
+    private box;
+    private listbox;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_n: string, old: string | null, next: string | null): void;
+    get options(): ComboboxOption[];
+    set options(o: ComboboxOption[]);
+    /** مقدار گزینه‌های انتخاب‌شده */
+    get value(): string[];
+    set value(v: string[]);
+    private render;
+    private labelOf;
+    private filtered;
+    private get full();
+    private toggle;
+    private set;
+    private announce;
+    private open;
+    private close;
+    private onOutside;
+    private onKey;
+    private paint;
+    private paintList;
+}
+/** اسلایدر روی input range بومی؛ با range دو دستگیره برای بازه (min و max) */
+export declare class KashiSlider extends HTMLBase {
+    static observedAttributes: string[];
+    private lo;
+    private hi;
+    private valueSet;
+    private rendered;
+    private key;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    private num;
+    private get min();
+    private get max();
+    private get isRange();
+    private readValue;
+    /** عدد، یا در حالت range آرایهٔ [کمینه، بیشینه] */
+    get value(): number | [number, number];
+    set value(v: number | [number, number]);
+    private fmt;
+    private render;
+}
+/** گروه چیپ برای فیلتر: هر فرزند <button> (با data-value، data-count) یک چیپ است؛ با single فقط یکی */
+export declare class KashiChipGroup extends HTMLBase {
+    static observedAttributes: string[];
+    private built;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** مقدار چیپ‌های روشن */
+    get value(): string[];
+    set value(v: string[]);
+    private build;
+    private sync;
+}
+/** قدرت رمز زیر فیلد رمز؛ با for="شناسهٔ فیلد" به آن وصل می‌شود و با هر تایپ به‌روز می‌شود */
+export declare class KashiPasswordStrength extends HTMLBase {
+    static observedAttributes: string[];
+    private target;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private attach;
+    private onInput;
+    /** امتیاز ۰ تا ۴ */
+    score(password: string): number;
+    private render;
+}
+/** پایهٔ فیلد متنی ساده با برچسب، راهنما و خطا، برای فیلدهای متنی فارسی */
+declare abstract class TextField extends HTMLBase {
+    protected key: string;
+    protected control: HTMLInputElement | HTMLTextAreaElement;
+    protected rendered: boolean;
+    protected valueSet: boolean;
+    protected text: string;
+    protected abstract multiline: boolean;
+    protected abstract defaultLabel: string;
+    protected abstract hint(): string | null;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    get value(): string;
+    set value(v: string);
+    focus(options?: FocusOptions): void;
+    protected render(): void;
+    /** راهنمای زیر فیلد؛ HTML ساخته‌شده توسط زیرکلاس */
+    protected paint(): void;
+    protected replace(next: string): void;
+}
+/** متن چندخطی با ویرایش نگارشی: ی و ک عربی، نیم‌فاصله، علامت‌ها و ارقام را می‌شمارد و با یک دکمه اصلاح می‌کند */
+export declare class KashiPersianTextarea extends TextField {
+    static observedAttributes: string[];
+    protected multiline: boolean;
+    protected defaultLabel: string;
+    protected render(): void;
+    private result;
+    protected hint(): string | null;
+}
+/** فیلد متنی که متن تایپ‌شده با صفحه‌کلید انگلیسی را تشخیص می‌دهد و نسخهٔ فارسی‌اش را پیشنهاد می‌کند («sghl» ← «سلام») */
+export declare class KashiKeyboardFix extends TextField {
+    static observedAttributes: string[];
+    protected multiline: boolean;
+    protected defaultLabel: string;
+    protected render(): void;
+    protected hint(): string | null;
+}
+/** ساعت ۲۴ساعته: ۹:۳۰، ۰۹۳۰ و ارقام فارسی را می‌فهمد؛ ↑↓ با گام step دقیقه */
+export declare class KashiTimeInput extends HTMLBase {
+    static observedAttributes: string[];
+    private current;
+    private invalid;
+    private valueSet;
+    private rendered;
+    private key;
+    private input;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    /** ساعت به شکل HH:MM، یا رشتهٔ خالی */
+    get value(): string;
+    set value(v: string);
+    private normal;
+    private show;
+    private get lo();
+    private get hi();
+    private render;
+    private commitText;
+    private commit;
+    private paint;
+}
+/** پلاک خودرو با چهار بخش (۱۲ ب ۳۴۵ ایران ۶۷)؛ فوکوس خودکار به بخش بعد و رنگ بر اساس نوع پلاک */
+export declare class KashiPlateInput extends HTMLBase {
+    static observedAttributes: string[];
+    private plate;
+    private touched;
+    private valueSet;
+    private rendered;
+    private key;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    /** «12-ب-345-67» */
+    private parse;
+    get value(): Plate;
+    set value(p: Plate);
+    get valid(): boolean;
+    private render;
+    private paint;
+}
+/**
+ * ویرایش درجا: متن با کلیک یا Enter به فیلد تبدیل می‌شود، Enter ثبت و Esc انصراف.
+ * رویداد kashi-save با detail.value؛ برای ذخیرهٔ سمت سرور event.detail.wait(promise) را صدا بزنید.
+ */
+export declare class KashiInlineEdit extends HTMLBase {
+    static observedAttributes: string[];
+    private text;
+    private editing;
+    private valueSet;
+    private rendered;
+    /** اعتبارسنجی؛ پیام خطا یا undefined */
+    validate?: (value: string) => string | undefined;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    get value(): string;
+    set value(v: string);
+    private render;
+    private edit;
+    private commit;
+}
+export {};