@kashi-ui/elements 0.0.0-stage → 0.24.0

package/dist/table.js

@@ -0,0 +1,267 @@
+import { normalizePersian, toFaDigits } from "@kashi-ui/persian";
+import { HTMLBase, afterParse, bool, define, emit, esc, uid } from "./base.js";
+import { cellNumber } from "./controls.js";
+const search = (s) => normalizePersian(s, { digits: "latin" }).toLowerCase();
+/**
+ * جدول داده با مرتب‌سازی، انتخاب ردیف و جستجو. دو راه:
+ * ۱) یک <table> معمولی داخلش بگذارید: ستون‌های th[data-sort] مرتب‌شدنی‌اند (data-numeric برای عدد) و tr[data-id] شناسهٔ ردیف است.
+ * ۲) یا با JavaScript: element.columns = [...] و element.rows = [...].
+ * بدون JavaScript همان جدول معمولی با ظاهر کاشی دیده می‌شود.
+ */
+export class KashiDataTable extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.cols = null;
+        this.data = null;
+        this.table = null;
+        this.sort = null;
+        this.query = "";
+        this.key = uid("kashi-table");
+        /** شناسهٔ ردیف در حالت JavaScript @default row.id */
+        this.getRowId = (r) => String(r.id ?? "");
+    }
+    connectedCallback() {
+        afterParse(() => this.isConnected && this.setup());
+    }
+    attributeChangedCallback(_n, old, next) {
+        if (this.table && old !== next)
+            this.setup();
+    }
+    /** ستون‌ها در حالت JavaScript */
+    get columns() {
+        return this.cols ?? [];
+    }
+    set columns(c) {
+        this.cols = c;
+        if (this.isConnected && this.data)
+            this.setup();
+    }
+    /** ردیف‌ها در حالت JavaScript */
+    get rows() {
+        return this.data ?? [];
+    }
+    set rows(r) {
+        this.data = r;
+        if (this.isConnected && this.cols)
+            this.setup();
+    }
+    /** شناسهٔ ردیف‌های انتخاب‌شده */
+    get selected() {
+        return [...this.querySelectorAll('tbody tr[aria-selected="true"]')].map((tr) => tr.dataset.id ?? "");
+    }
+    setup() {
+        if (this.cols && this.data)
+            this.buildFromData();
+        let table = this.querySelector(":scope table");
+        if (!table)
+            return;
+        const wrap = table.closest(".k-table-wrap") ?? this.wrap(table);
+        wrap.className = `k-table-wrap${bool(this, "sticky-header") ? " k-table-wrap--sticky" : ""}`;
+        table.classList.add("k-table");
+        table.classList.toggle("k-table--compact", bool(this, "compact"));
+        table.classList.toggle("k-table--striped", bool(this, "striped"));
+        const caption = table.querySelector("caption");
+        if (caption) {
+            caption.id || (caption.id = `${this.key}-caption`);
+            wrap.setAttribute("aria-labelledby", caption.id);
+        }
+        this.table = table;
+        this.decorateHeader();
+        this.decorateRows();
+        this.searchBox();
+        this.apply();
+    }
+    wrap(table) {
+        const w = document.createElement("div");
+        w.setAttribute("role", "region");
+        w.tabIndex = 0;
+        table.before(w);
+        w.append(table);
+        return w;
+    }
+    buildFromData() {
+        const cols = this.cols;
+        const caption = this.getAttribute("caption") ?? "";
+        const cell = (c, r) => (c.format ? c.format(r[c.key], r) : String(r[c.key] ?? ""));
+        const html = `<table>${caption ? `<caption><span class="k-table__caption-title">${esc(caption)}</span></caption>` : ""}<thead><tr>${cols.map((c) => `<th scope="col"${c.sortable ? " data-sort" : ""}${c.numeric ? " data-numeric" : ""}>${esc(c.header)}</th>`).join("")}</tr></thead><tbody>${this.data.map((r) => `<tr data-id="${esc(this.getRowId(r))}">${cols.map((c) => `<td>${esc(cell(c, r))}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
+        this.querySelector(":scope > .k-table-wrap, :scope > table")?.remove();
+        this.insertAdjacentHTML("beforeend", html);
+    }
+    decorateHeader() {
+        const t = this.table;
+        const ths = this.headCells();
+        ths.forEach((th, i) => {
+            if (th.classList.contains("k-table__check"))
+                return;
+            th.scope || (th.scope = "col");
+            if (th.hasAttribute("data-numeric"))
+                th.classList.add("k-table__num");
+            if (!th.hasAttribute("data-sort") || th.querySelector(".k-table__sort"))
+                return;
+            th.setAttribute("aria-sort", "none");
+            const b = document.createElement("button");
+            b.type = "button";
+            b.className = "k-table__sort";
+            b.append(...th.childNodes);
+            th.append(b);
+            // شمارهٔ ستون همین حالا ثابت می‌شود؛ ستون چک‌باکس ممکن است بعداً اول ردیف اضافه شود
+            const idx = this.dataIndex(i);
+            b.addEventListener("click", () => {
+                this.sort = this.sort?.index === idx && this.sort.dir === "ascending" ? { index: idx, dir: "descending" } : { index: idx, dir: "ascending" };
+                this.apply();
+                emit(this, "kashi-sort", { column: idx, direction: this.sort.dir });
+            });
+        });
+        // ستون عددی: سلول‌های همان ستون هم چپ‌چین عددی می‌شوند
+        const numeric = ths.map((th) => th.hasAttribute("data-numeric"));
+        for (const tr of this.bodyRows())
+            [...tr.children].forEach((td, i) => numeric[i] && td.classList.add("k-table__num"));
+        const selectable = bool(this, "selectable");
+        const head = this.headRow();
+        const existing = head?.querySelector(".k-table__check");
+        if (selectable && head && !existing) {
+            const th = document.createElement("th");
+            th.scope = "col";
+            th.className = "k-table__check";
+            th.innerHTML = '<input type="checkbox" class="k-checkbox" aria-label="انتخاب همهٔ ردیف‌ها">';
+            head.prepend(th);
+            th.querySelector("input").addEventListener("change", (e) => {
+                const on = e.target.checked;
+                this.visibleRows().forEach((tr) => this.setRow(tr, on));
+                this.selectionChanged();
+            });
+        }
+        else if (!selectable && existing)
+            existing.remove();
+    }
+    headRow() {
+        return this.table.querySelector(":scope > thead > tr");
+    }
+    headCells() {
+        return [...(this.headRow()?.children ?? [])];
+    }
+    bodyRows() {
+        return [...this.table.querySelectorAll(":scope > tbody > tr")];
+    }
+    /** شمارهٔ ستون بدون ستون چک‌باکس */
+    dataIndex(i) {
+        return this.headRow()?.querySelector(".k-table__check") ? i - 1 : i;
+    }
+    offset() {
+        return this.headRow()?.querySelector(".k-table__check") ? 1 : 0;
+    }
+    decorateRows() {
+        const selectable = bool(this, "selectable");
+        const rows = this.bodyRows();
+        rows.forEach((tr, i) => {
+            var _a, _b;
+            (_a = tr.dataset).id || (_a.id = String(i + 1));
+            (_b = tr.dataset).order || (_b.order = String(i));
+            const cell = tr.querySelector(".k-table__check");
+            if (selectable && !cell) {
+                const td = document.createElement("td");
+                td.className = "k-table__check";
+                const label = tr.children[0]?.textContent?.trim();
+                td.innerHTML = `<input type="checkbox" class="k-checkbox" aria-label="${esc(label ? `انتخاب ${label}` : "انتخاب ردیف")}">`;
+                tr.prepend(td);
+                tr.setAttribute("aria-selected", "false");
+                td.querySelector("input").addEventListener("change", (e) => {
+                    this.setRow(tr, e.target.checked);
+                    this.selectionChanged();
+                });
+            }
+            else if (!selectable && cell) {
+                cell.remove();
+                tr.removeAttribute("aria-selected");
+            }
+        });
+        this.selectionChanged(false);
+    }
+    setRow(tr, on) {
+        tr.setAttribute("aria-selected", String(on));
+        const box = tr.querySelector(".k-table__check input");
+        if (box)
+            box.checked = on;
+    }
+    selectionChanged(fire = true) {
+        const all = this.headRow()?.querySelector(".k-table__check input");
+        const rows = this.visibleRows();
+        const on = rows.filter((tr) => tr.getAttribute("aria-selected") === "true").length;
+        if (all) {
+            all.checked = rows.length > 0 && on === rows.length;
+            all.indeterminate = on > 0 && on < rows.length;
+        }
+        const name = this.getAttribute("name");
+        this.querySelectorAll(":scope > input[type=hidden]").forEach((el) => el.remove());
+        if (name)
+            for (const id of this.selected)
+                this.insertAdjacentHTML("beforeend", `<input type="hidden" name="${esc(name)}" value="${esc(id)}">`);
+        if (fire)
+            emit(this, "kashi-change", { selected: this.selected });
+    }
+    visibleRows() {
+        return this.bodyRows().filter((tr) => !tr.hidden && !tr.classList.contains("k-table__empty"));
+    }
+    searchBox() {
+        const existing = this.querySelector(":scope > .k-table-search");
+        if (!bool(this, "searchable"))
+            return existing?.remove();
+        if (existing)
+            return;
+        const id = `${this.key}-search`;
+        const box = document.createElement("div");
+        box.className = "k-table-search k-field";
+        box.style.marginBlockEnd = "var(--k-space-3)";
+        box.innerHTML = `<div class="k-input k-input--sm"><input id="${id}" class="k-input__control" type="search" placeholder="جستجو در جدول" aria-label="جستجو در جدول"></div><span class="k-sr-only" aria-live="polite"></span>`;
+        this.prepend(box);
+        const input = box.querySelector("input");
+        input.addEventListener("input", () => {
+            this.query = input.value;
+            this.apply();
+            box.querySelector(".k-sr-only").textContent = `${toFaDigits(this.visibleRows().length)} ردیف`;
+        });
+    }
+    /** مرتب‌سازی و جستجو را روی ردیف‌ها اعمال می‌کند */
+    apply() {
+        const t = this.table;
+        const body = t.querySelector(":scope > tbody");
+        if (!body)
+            return;
+        const off = this.offset();
+        const rows = this.bodyRows().filter((tr) => !tr.classList.contains("k-table__empty"));
+        const ths = this.headCells();
+        ths.forEach((th, i) => {
+            if (!th.hasAttribute("aria-sort"))
+                return;
+            th.setAttribute("aria-sort", this.sort && this.sort.index === i - off ? this.sort.dir : "none");
+        });
+        let ordered = rows.sort((a, b) => Number(a.dataset.order) - Number(b.dataset.order));
+        if (this.sort) {
+            const { index, dir } = this.sort;
+            const numeric = ths[index + off]?.hasAttribute("data-numeric");
+            const val = (tr) => {
+                const td = tr.children[index + off];
+                const text = td?.dataset.value ?? td?.textContent?.trim() ?? "";
+                return numeric ? cellNumber(text) : text;
+            };
+            const k = dir === "ascending" ? 1 : -1;
+            ordered = [...ordered].sort((a, b) => {
+                const x = val(a), y = val(b);
+                return (typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y), "fa")) * k;
+            });
+        }
+        const q = search(this.query.trim());
+        for (const tr of ordered) {
+            tr.hidden = !!q && !search(tr.textContent ?? "").includes(q);
+            body.append(tr);
+        }
+        body.querySelector(".k-table__empty")?.remove();
+        if (q && !this.visibleRows().length) {
+            const cols = ths.length;
+            body.insertAdjacentHTML("beforeend", `<tr class="k-table__empty"><td colspan="${cols}"><p style="padding: 2rem; margin: 0; text-align: center">نتیجه‌ای پیدا نشد.</p></td></tr>`);
+        }
+        this.selectionChanged(false);
+    }
+}
+KashiDataTable.observedAttributes = ["selectable", "searchable", "compact", "striped", "sticky-header", "caption", "name"];
+define("kashi-data-table", KashiDataTable, "block");

package/dist/toast.d.ts

@@ -0,0 +1,45 @@
+import { HTMLBase } from "./base.js";
+export type ToastTone = "neutral" | "success" | "error" | "warning" | "info";
+export interface ToastOptions {
+    /** شناسهٔ دلخواه؛ toast() با همین شناسه اعلان قبلی را به‌روز می‌کند */
+    id?: number | string;
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    /** میلی‌ثانیه؛ Infinity برای ماندن تا بستن دستی. پیش‌فرض ۵ ثانیه، و بی‌نهایت اگر action داشته باشد */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface Item extends Omit<ToastOptions, "id"> {
+    id: number | string;
+    loading?: boolean;
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export declare function toast(options: ToastOptions | string): number | string;
+export declare namespace toast {
+    var success: (title: string, o?: Rest) => string | number;
+    var error: (title: string, o?: Rest) => string | number;
+    var warning: (title: string, o?: Rest) => string | number;
+    var info: (title: string, o?: Rest) => string | number;
+    var dismiss: (id: number | string) => void;
+    var promise: <T>(promise: Promise<T>, msgs: {
+        loading: string;
+        success: string | ((v: T) => string);
+        error: string | ((e: unknown) => string);
+    }) => Promise<T>;
+}
+type Rest = Omit<ToastOptions, "title" | "tone">;
+/** محل نمایش اعلان‌ها؛ ناحیهٔ زنده از قبل در صفحه است تا صفحه‌خوان اعلان‌های جدید را بخواند */
+export declare class KashiToaster extends HTMLBase {
+    static observedAttributes: string[];
+    private list;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private decorate;
+    upsert(item: Item): void;
+    dismiss(id: number | string): void;
+}
+export {};

package/dist/toast.js

@@ -0,0 +1,141 @@
+import { HTMLBase, ICONS, define, esc } from "./base.js";
+let nextId = 1;
+/** نزدیک‌ترین محل نمایش اعلان‌ها؛ اگر در صفحه نباشد یکی ساخته می‌شود */
+function toaster() {
+    const all = document.querySelectorAll("kashi-toaster");
+    if (all.length)
+        return all[all.length - 1];
+    const t = document.createElement("kashi-toaster");
+    document.body.append(t);
+    return t;
+}
+function upsert(o) {
+    const id = o.id ?? nextId++;
+    toaster().upsert({ ...o, id });
+    return id;
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export function toast(options) {
+    return upsert(typeof options === "string" ? { title: options } : options);
+}
+toast.success = (title, o = {}) => toast({ ...o, title, tone: "success" });
+toast.error = (title, o = {}) => toast({ ...o, title, tone: "error" });
+toast.warning = (title, o = {}) => toast({ ...o, title, tone: "warning" });
+toast.info = (title, o = {}) => toast({ ...o, title, tone: "info" });
+toast.dismiss = (id) => document.querySelectorAll("kashi-toaster").forEach((t) => t.dismiss(id));
+/**
+ * اعلان برای کار زمان‌بر: «در حال ذخیره…» و سپس «ذخیره شد» یا پیام خطا، در همان اعلان.
+ *   toast.promise(save(), { loading: "در حال ذخیره…", success: "ذخیره شد", error: (e) => e.message })
+ */
+toast.promise = (promise, msgs) => {
+    const id = upsert({ title: msgs.loading, tone: "info", duration: Infinity, loading: true });
+    promise.then((v) => upsert({ id, title: typeof msgs.success === "function" ? msgs.success(v) : msgs.success, tone: "success" }), (e) => upsert({ id, title: typeof msgs.error === "function" ? msgs.error(e) : msgs.error, tone: "error" }));
+    return promise;
+};
+/** محل نمایش اعلان‌ها؛ ناحیهٔ زنده از قبل در صفحه است تا صفحه‌خوان اعلان‌های جدید را بخواند */
+export class KashiToaster extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.list = null;
+    }
+    connectedCallback() {
+        if (!this.list) {
+            this.innerHTML = '<section><ol class="k-toaster" aria-live="polite"></ol></section>';
+            this.list = this.querySelector("ol");
+        }
+        this.decorate();
+    }
+    attributeChangedCallback() {
+        if (this.list)
+            this.decorate();
+    }
+    decorate() {
+        const place = this.getAttribute("placement") ?? "bottom-end";
+        this.list.className = `k-toaster k-toaster--${place}`;
+        this.list.dataset.placement = place;
+        this.querySelector("section").setAttribute("aria-label", this.getAttribute("label") ?? "اعلان‌ها");
+    }
+    upsert(item) {
+        if (!this.list)
+            this.connectedCallback();
+        const old = [...this.list.children].find((li) => li.toastId === item.id);
+        const li = render(item, this.getAttribute("close-label") ?? "بستن اعلان", () => this.dismiss(item.id));
+        if (old) {
+            old.stop?.();
+            old.replaceWith(li);
+        }
+        else
+            this.list.append(li);
+        // بیشترین تعداد اعلان هم‌زمان؛ قدیمی‌ترها حذف می‌شوند
+        const max = Number(this.getAttribute("max")) || 5;
+        while (this.list.children.length > max)
+            this.list.firstElementChild.stop?.(), this.list.firstElementChild.remove();
+    }
+    dismiss(id) {
+        const li = [...(this.list?.children ?? [])].find((el) => el.toastId === id);
+        if (!li || li.dataset.state === "closing")
+            return;
+        li.stop?.();
+        li.dataset.state = "closing";
+        setTimeout(() => li.remove(), 200);
+    }
+}
+KashiToaster.observedAttributes = ["placement", "label"];
+function render(t, closeLabel, dismiss) {
+    const duration = t.duration ?? (t.action ? Infinity : 5000);
+    const tone = t.tone ?? "neutral";
+    const li = document.createElement("li");
+    li.toastId = t.id;
+    li.className = `k-toast${tone !== "neutral" ? ` k-toast--${tone}` : ""}`;
+    li.dataset.state = "open";
+    li.setAttribute("role", tone === "error" ? "alert" : "status");
+    const icon = t.loading ? '<span class="k-spinner k-spinner--sm" style="color: inherit"></span>' : ICONS[tone === "neutral" ? "info" : tone];
+    li.innerHTML = `<span class="k-toast__icon" aria-hidden="true">${icon}</span><div class="k-toast__content"><p class="k-toast__title">${esc(t.title)}</p>${t.description ? `<p class="k-toast__description">${esc(t.description)}</p>` : ""}${t.action ? `<button type="button" class="k-btn k-btn--link k-toast__action">${esc(t.action.label)}</button>` : ""}</div><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-toast__close" aria-label="${esc(closeLabel)}">${ICONS.close}</button>${Number.isFinite(duration) ? `<span class="k-toast__progress" aria-hidden="true" style="animation-duration: ${duration}ms"></span>` : ""}`;
+    li.querySelector(".k-toast__close").addEventListener("click", dismiss);
+    li.querySelector(".k-toast__action")?.addEventListener("click", () => {
+        t.action.onClick();
+        dismiss();
+    });
+    li.addEventListener("keydown", (e) => e.key === "Escape" && dismiss());
+    // زمان‌سنج با توقف هنگام hover یا فوکوس (WCAG 2.2.1)
+    let remaining = duration;
+    let started = 0;
+    let timer;
+    const start = () => {
+        if (timer !== undefined || !Number.isFinite(remaining))
+            return;
+        started = Date.now();
+        timer = setTimeout(dismiss, remaining);
+    };
+    const pause = () => {
+        if (timer === undefined)
+            return;
+        clearTimeout(timer);
+        timer = undefined;
+        remaining -= Date.now() - started;
+    };
+    li.addEventListener("mouseenter", pause);
+    li.addEventListener("focusin", pause);
+    li.addEventListener("mouseleave", start);
+    li.addEventListener("focusout", start);
+    li.stop = () => {
+        clearTimeout(timer);
+        remaining = Infinity;
+    };
+    start();
+    return li;
+}
+define("kashi-toaster", KashiToaster);
+// اعلان بدون نوشتن JavaScript: <button data-kashi-toast="ذخیره شد" data-tone="success">
+if (typeof document !== "undefined") {
+    document.addEventListener("click", (e) => {
+        const el = e.target?.closest?.("[data-kashi-toast]");
+        if (!el)
+            return;
+        toast({
+            title: el.dataset.kashiToast,
+            description: el.dataset.description,
+            tone: el.dataset.tone ?? "neutral",
+        });
+    });
+}

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@kashi-ui/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.24.0",
+  "description": "وب کامپوننت‌های کاشی: فیلدهای فارسی، تقویم شمسی و کامپوننت‌های تعاملی بدون React؛ برای HTML، Vue، Svelte، Angular و وردپرس",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./cdn": "./dist/cdn/kashi-elements.js",
+    "./*.js": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": true,
+  "scripts": {
+    "build": "node scripts/sync-map.mjs && tsc -p tsconfig.json && node scripts/bundle.mjs",
+    "test": "node --test test/*.test.mjs"
+  },
+  "dependencies": {
+    "@kashi-ui/bank-logos": "^0.24.0",
+    "@kashi-ui/persian": "^0.24.0"
+  },
+  "peerDependencies": {
+    "@kashi-ui/css": "^0.24.0"
+  },
+  "devDependencies": {
+    "happy-dom": "^21.0.4",
+    "rolldown": "^1.2.15",
+    "typescript": "^5.6.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sepantapouya/Kashi.git",
+    "directory": "packages/elements"
+  },
+  "homepage": "https://kashi.sepantapouya.com/docs/web-components/",
+  "bugs": "https://github.com/Sepantapouya/Kashi/issues",
+  "author": "Sepanta Pouya (https://sepantapouya.com)",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "design-system",
+    "persian",
+    "farsi",
+    "rtl",
+    "jalali",
+    "vue",
+    "svelte",
+    "angular"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}