@abydahana/aksara-ui 1.1.2 → 1.1.4

package/dist/aksara.d.ts

@@ -226,6 +226,26 @@ export declare class Offcanvas extends Modal {
     show(): this;
     hide(): this;
 }
+export interface ConfirmModalOptions {
+    title: string;
+    message: string;
+    tone?: "danger" | "warning" | "primary" | "info" | "success" | string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    icon?: string;
+}
+export interface AlertModalOptions {
+    title: string;
+    message: string;
+    tone?: "primary" | "danger" | "warning" | "info" | "success" | string;
+    buttonLabel?: string;
+    icon?: string;
+}
+export interface ToastNotifyOptions {
+    icon?: string;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | string;
+    duration?: number;
+}
 export interface AksaraNamespace {
     Modal: typeof Modal;
     Tooltip: typeof Tooltip;
@@ -275,6 +295,9 @@ export interface AksaraNamespace {
     setTheme(theme: "light" | "dark" | "system"): "light" | "dark" | "system";
     getTheme(): "light" | "dark" | "system";
     initTheme(): "light" | "dark" | "system";
+    confirm(options: ConfirmModalOptions): Promise<boolean>;
+    alert(options: AlertModalOptions): Promise<void>;
+    notify(message: string, options?: ToastNotifyOptions): void;
     clipboard(target: string | HTMLElement, text?: string): Promise<boolean>;
     init(root?: ParentNode | Document | HTMLElement): AksaraNamespace;
     destroy(): AksaraNamespace;

package/dist/aksara.esm.js

@@ -431,6 +431,12 @@ export class Dropdown extends Component {
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
         const triggerRect = this.trigger.getBoundingClientRect();
+        if (this.trigger.classList.contains("form-select") ||
+            this.element.classList.contains("variant-form-select") ||
+            this.element.hasAttribute("data-dropdown-select")) {
+            this.menu.style.width = `${triggerRect.width}px`;
+            this.menu.style.minWidth = `${triggerRect.width}px`;
+        }
         const menuRect = this.menu.getBoundingClientRect();
         const gap = this.offset;
         let top;
@@ -1679,6 +1685,147 @@ export const Aksara = {
         }
         return currentTheme;
     },
+    confirm(options) {
+        if (typeof document === "undefined")
+            return Promise.resolve(false);
+        let host = document.getElementById("aksara-dialog-host");
+        if (!host) {
+            host = document.createElement("div");
+            host.id = "aksara-dialog-host";
+            document.body.appendChild(host);
+        }
+        const tone = options.tone ?? "danger";
+        const confirmLabel = options.confirmLabel ?? "Confirm";
+        const cancelLabel = options.cancelLabel ?? "Cancel";
+        const icon = options.icon ?? (tone === "danger" ? "mdi-alert-circle-outline" : "mdi-alert-outline");
+        host.innerHTML = `
+      <div class="modal fade modal-sm" id="aksaraConfirmModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-confirm-title">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content overflow-hidden border-0 shadow-lg">
+            <div class="modal-body text-center p-4">
+              <i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i>
+              <h5 id="aksara-confirm-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5>
+              <p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p>
+            </div>
+            <div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top">
+              <button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-cancel>
+                ${escapeHtmlStr(cancelLabel)}
+              </button>
+              <button class="btn btn-ghost border-start text-${escapeHtmlStr(tone)} rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-accept>
+                <i class="mdi mdi-check me-1" aria-hidden="true"></i>
+                ${escapeHtmlStr(confirmLabel)}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        const modalEl = host.querySelector("#aksaraConfirmModal");
+        if (!modalEl)
+            return Promise.resolve(false);
+        const modalInstance = Aksara.modal(modalEl);
+        modalInstance.show();
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                modalInstance.hide();
+                setTimeout(() => {
+                    if (host)
+                        host.innerHTML = "";
+                }, 200);
+                resolve(value);
+            };
+            modalEl.addEventListener("modal:hide", () => finish(false), { once: true });
+            host
+                ?.querySelector("[data-aksara-confirm-cancel]")
+                ?.addEventListener("click", () => finish(false), { once: true });
+            host
+                ?.querySelector("[data-aksara-confirm-accept]")
+                ?.addEventListener("click", () => finish(true), { once: true });
+        });
+    },
+    alert(options) {
+        if (typeof document === "undefined")
+            return Promise.resolve();
+        let host = document.getElementById("aksara-dialog-host");
+        if (!host) {
+            host = document.createElement("div");
+            host.id = "aksara-dialog-host";
+            document.body.appendChild(host);
+        }
+        const tone = options.tone ?? "primary";
+        const buttonLabel = options.buttonLabel ?? "OK";
+        const icon = options.icon ??
+            (tone === "danger"
+                ? "mdi-alert-circle-outline"
+                : tone === "warning"
+                    ? "mdi-alert-outline"
+                    : "mdi-information-outline");
+        host.innerHTML = `
+      <div class="modal fade modal-sm" id="aksaraAlertModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-alert-title">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content overflow-hidden border-0 shadow-lg">
+            <div class="modal-body text-center p-4">
+              <i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i>
+              <h5 id="aksara-alert-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5>
+              <p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p>
+            </div>
+            <div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top">
+              <button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-100" type="button" data-aksara-alert-dismiss>
+                ${escapeHtmlStr(buttonLabel)}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        const modalEl = host.querySelector("#aksaraAlertModal");
+        if (!modalEl)
+            return Promise.resolve();
+        const modalInstance = Aksara.modal(modalEl);
+        modalInstance.show();
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                modalInstance.hide();
+                setTimeout(() => {
+                    if (host)
+                        host.innerHTML = "";
+                }, 200);
+                resolve();
+            };
+            modalEl.addEventListener("modal:hide", () => finish(), { once: true });
+            host?.querySelector("[data-aksara-alert-dismiss]")?.addEventListener("click", () => finish(), { once: true });
+        });
+    },
+    notify(message, options = {}) {
+        if (typeof document === "undefined")
+            return;
+        let container = document.getElementById("aksara-toast-container");
+        if (!container) {
+            container = document.createElement("div");
+            container.id = "aksara-toast-container";
+            container.className = "aksara-toast-container";
+            document.body.appendChild(container);
+        }
+        const toast = document.createElement("div");
+        toast.className = "aksara-toast-pill";
+        const iconClass = options.icon ?? "mdi-information-outline";
+        toast.innerHTML = `<i class="mdi ${escapeHtmlStr(iconClass)} text-primary" style="font-size: 1.15rem; line-height: 1;"></i><span>${escapeHtmlStr(message)}</span>`;
+        container.appendChild(toast);
+        const duration = options.duration ?? 2500;
+        setTimeout(() => {
+            toast.style.opacity = "0";
+            toast.style.transform = "translateY(8px)";
+            setTimeout(() => toast.remove(), 250);
+        }, duration);
+    },
     async clipboard(target, text) {
         if (typeof navigator === "undefined" || !navigator.clipboard)
             return false;
@@ -1753,7 +1900,7 @@ function toAttributes(attributes) {
             parts.push(key);
         }
         else if (value !== false && value !== null && value !== undefined) {
-            parts.push(`${key}="${escapeHtml(value)}"`);
+            parts.push(`${key}="${escapeHtmlStr(value)}"`);
         }
     }
     return parts.length > 0 ? ` ${parts.join(" ")}` : "";

package/dist/aksara.js

@@ -432,6 +432,12 @@ class Dropdown extends Component {
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
         const triggerRect = this.trigger.getBoundingClientRect();
+        if (this.trigger.classList.contains("form-select") ||
+            this.element.classList.contains("variant-form-select") ||
+            this.element.hasAttribute("data-dropdown-select")) {
+            this.menu.style.width = `${triggerRect.width}px`;
+            this.menu.style.minWidth = `${triggerRect.width}px`;
+        }
         const menuRect = this.menu.getBoundingClientRect();
         const gap = this.offset;
         let top;
@@ -1680,6 +1686,147 @@ const Aksara = {
         }
         return currentTheme;
     },
+    confirm(options) {
+        if (typeof document === "undefined")
+            return Promise.resolve(false);
+        let host = document.getElementById("aksara-dialog-host");
+        if (!host) {
+            host = document.createElement("div");
+            host.id = "aksara-dialog-host";
+            document.body.appendChild(host);
+        }
+        const tone = options.tone ?? "danger";
+        const confirmLabel = options.confirmLabel ?? "Confirm";
+        const cancelLabel = options.cancelLabel ?? "Cancel";
+        const icon = options.icon ?? (tone === "danger" ? "mdi-alert-circle-outline" : "mdi-alert-outline");
+        host.innerHTML = `
+      <div class="modal fade modal-sm" id="aksaraConfirmModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-confirm-title">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content overflow-hidden border-0 shadow-lg">
+            <div class="modal-body text-center p-4">
+              <i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i>
+              <h5 id="aksara-confirm-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5>
+              <p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p>
+            </div>
+            <div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top">
+              <button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-cancel>
+                ${escapeHtmlStr(cancelLabel)}
+              </button>
+              <button class="btn btn-ghost border-start text-${escapeHtmlStr(tone)} rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-accept>
+                <i class="mdi mdi-check me-1" aria-hidden="true"></i>
+                ${escapeHtmlStr(confirmLabel)}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        const modalEl = host.querySelector("#aksaraConfirmModal");
+        if (!modalEl)
+            return Promise.resolve(false);
+        const modalInstance = Aksara.modal(modalEl);
+        modalInstance.show();
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                modalInstance.hide();
+                setTimeout(() => {
+                    if (host)
+                        host.innerHTML = "";
+                }, 200);
+                resolve(value);
+            };
+            modalEl.addEventListener("modal:hide", () => finish(false), { once: true });
+            host
+                ?.querySelector("[data-aksara-confirm-cancel]")
+                ?.addEventListener("click", () => finish(false), { once: true });
+            host
+                ?.querySelector("[data-aksara-confirm-accept]")
+                ?.addEventListener("click", () => finish(true), { once: true });
+        });
+    },
+    alert(options) {
+        if (typeof document === "undefined")
+            return Promise.resolve();
+        let host = document.getElementById("aksara-dialog-host");
+        if (!host) {
+            host = document.createElement("div");
+            host.id = "aksara-dialog-host";
+            document.body.appendChild(host);
+        }
+        const tone = options.tone ?? "primary";
+        const buttonLabel = options.buttonLabel ?? "OK";
+        const icon = options.icon ??
+            (tone === "danger"
+                ? "mdi-alert-circle-outline"
+                : tone === "warning"
+                    ? "mdi-alert-outline"
+                    : "mdi-information-outline");
+        host.innerHTML = `
+      <div class="modal fade modal-sm" id="aksaraAlertModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-alert-title">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content overflow-hidden border-0 shadow-lg">
+            <div class="modal-body text-center p-4">
+              <i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i>
+              <h5 id="aksara-alert-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5>
+              <p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p>
+            </div>
+            <div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top">
+              <button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-100" type="button" data-aksara-alert-dismiss>
+                ${escapeHtmlStr(buttonLabel)}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        const modalEl = host.querySelector("#aksaraAlertModal");
+        if (!modalEl)
+            return Promise.resolve();
+        const modalInstance = Aksara.modal(modalEl);
+        modalInstance.show();
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                modalInstance.hide();
+                setTimeout(() => {
+                    if (host)
+                        host.innerHTML = "";
+                }, 200);
+                resolve();
+            };
+            modalEl.addEventListener("modal:hide", () => finish(), { once: true });
+            host?.querySelector("[data-aksara-alert-dismiss]")?.addEventListener("click", () => finish(), { once: true });
+        });
+    },
+    notify(message, options = {}) {
+        if (typeof document === "undefined")
+            return;
+        let container = document.getElementById("aksara-toast-container");
+        if (!container) {
+            container = document.createElement("div");
+            container.id = "aksara-toast-container";
+            container.className = "aksara-toast-container";
+            document.body.appendChild(container);
+        }
+        const toast = document.createElement("div");
+        toast.className = "aksara-toast-pill";
+        const iconClass = options.icon ?? "mdi-information-outline";
+        toast.innerHTML = `<i class="mdi ${escapeHtmlStr(iconClass)} text-primary" style="font-size: 1.15rem; line-height: 1;"></i><span>${escapeHtmlStr(message)}</span>`;
+        container.appendChild(toast);
+        const duration = options.duration ?? 2500;
+        setTimeout(() => {
+            toast.style.opacity = "0";
+            toast.style.transform = "translateY(8px)";
+            setTimeout(() => toast.remove(), 250);
+        }, duration);
+    },
     async clipboard(target, text) {
         if (typeof navigator === "undefined" || !navigator.clipboard)
             return false;
@@ -1754,7 +1901,7 @@ function toAttributes(attributes) {
             parts.push(key);
         }
         else if (value !== false && value !== null && value !== undefined) {
-            parts.push(`${key}="${escapeHtml(value)}"`);
+            parts.push(`${key}="${escapeHtmlStr(value)}"`);
         }
     }
     return parts.length > 0 ? ` ${parts.join(" ")}` : "";