@t007/dialog 0.0.1 → 0.0.3

package/dist/index.global.js

@@ -10,17 +10,23 @@
       return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
     }
   }
-  function createEl(tag, props = {}, dataset = {}, styles = {}) {
-    return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
+  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+    return assignEl(el, props, dataset, styles), el;
   }
-  function assignEl(el, props = {}, dataset = {}, styles = {}) {
+  function assignEl(el, props, dataset, styles) {
     if (!el) return;
-    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    if (props) {
+      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+    }
+    if (dataset) {
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+    }
+    if (styles) {
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    }
   }
   function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
-    w.t007 ??= {}, w.t007._resourceCache ??= {};
+    w.t007._resourceCache ??= {};
     if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
     const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
     if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
@@ -60,17 +66,15 @@
       owner2[method] = owner2[method].bind(owner2);
     });
   }
-  var _SCROLLERS = /* @__PURE__ */ new WeakMap();
-  var _SCROLLER_R_OBSERVER = typeof window !== "undefined" ? new ResizeObserver((entries) => entries.forEach(({ target }) => _SCROLLERS.get(target)?.update())) : null;
-  var _SCROLLER_M_OBSERVER = typeof window !== "undefined" ? new MutationObserver((entries) => {
-    const els = /* @__PURE__ */ new Set();
-    for (const entry of entries) {
-      let node = entry.target instanceof Element ? entry.target : null;
-      while (node && !_SCROLLERS.has(node)) node = node.parentElement;
-      if (node) els.add(node);
-    }
-    for (const el of els) _SCROLLERS.get(el)?.update();
-  }) : null;
+  if (typeof window !== "undefined") {
+    window.t007 ??= {};
+    window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
+    window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
+    window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
+    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
+    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
+    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
+  }
 
   // src/index.js
   var T007_Dialog = class {
@@ -197,9 +201,6 @@
     return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
   }
   if (typeof window !== "undefined") {
-    window.t007 ??= {};
-    window.T007_DIALOG_CSS_SRC ??= `https://unpkg.com/@t007/dialog@latest/style.css`;
-    window.T007_INPUT_JS_SRC ??= `https://unpkg.com/@t007/input@latest`;
     t007.alert = alert;
     t007.confirm = confirm;
     t007.prompt = prompt;

package/dist/index.js

@@ -124,9 +124,6 @@ function prompt(question, defaultValue, options) {
   return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
 }
 if (typeof window !== "undefined") {
-  window.t007 ??= {};
-  window.T007_DIALOG_CSS_SRC ??= `https://unpkg.com/@t007/dialog@latest/style.css`;
-  window.T007_INPUT_JS_SRC ??= `https://unpkg.com/@t007/input@latest`;
   t007.alert = alert;
   t007.confirm = confirm;
   t007.prompt = prompt;

package/dist/standalone.js

@@ -0,0 +1,215 @@
+// ../utils/dist/index.js
+function isSameURL(src1, src2) {
+  if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
+  try {
+    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
+    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+  } catch {
+    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+  }
+}
+function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+  return assignEl(el, props, dataset, styles), el;
+}
+function assignEl(el, props, dataset, styles) {
+  if (!el) return;
+  if (props) {
+    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+  }
+  if (dataset) {
+    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+  }
+  if (styles) {
+    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+  }
+}
+function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+  w.t007._resourceCache ??= {};
+  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
+  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
+  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+    (function tryLoad(remaining, el) {
+      const onerror = () => {
+        el?.remove?.();
+        if (remaining > 1) {
+          setTimeout(tryLoad, 1e3, remaining - 1);
+          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+        } else {
+          delete w.t007._resourceCache[src];
+          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+        }
+      };
+      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
+      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else reject(new Error(`Unsupported resource type: ${type}`));
+    })(attempts);
+  });
+  return w.t007._resourceCache[src];
+}
+function onAllMethods(owner, callback) {
+  let proto = owner;
+  while (proto && proto !== Object.prototype) {
+    for (const method of Object.getOwnPropertyNames(proto)) {
+      if (method === "constructor") continue;
+      if ("function" !== typeof Object.getOwnPropertyDescriptor(proto, method)?.value) continue;
+      callback(method, owner);
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+}
+function bindAllMethods(owner) {
+  onAllMethods(owner, (method, owner2) => {
+    owner2[method] = owner2[method].bind(owner2);
+  });
+}
+if (typeof window !== "undefined") {
+  window.t007 ??= {};
+  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
+  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
+  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
+}
+
+// src/index.js
+var T007_Dialog = class {
+  dialog;
+  confirmBtn;
+  cancelBtn;
+  constructor(resolve) {
+    bindAllMethods(this);
+    this.resolve = resolve;
+    document.body.append(
+      this.dialog = createEl("dialog", {
+        className: "t007-dialog",
+        closedBy: "any"
+      })
+    );
+    this.dialog.addEventListener("cancel", this.cancel);
+  }
+  show() {
+    this.dialog.showModal();
+    this.confirmBtn.focus();
+  }
+  remove() {
+    this.dialog.close();
+    this.dialog.remove();
+  }
+  confirm() {
+    this.remove();
+    this.resolve(true);
+  }
+  cancel() {
+    this.remove();
+    this.resolve(false);
+  }
+};
+var T007_Alert_Dialog = class extends T007_Dialog {
+  constructor({ message, resolve, options }) {
+    super(resolve);
+    this.render(message, options);
+  }
+  render(message, options = {}) {
+    this.dialog.innerHTML = `
+      <div class="t007-dialog-top-section">
+        <p class="t007-dialog-question">${message}</p>
+      </div>
+      <div class="t007-dialog-bottom-section">
+        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
+      </div>
+    `;
+    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
+    this.confirmBtn.addEventListener("click", this.confirm);
+    this.show();
+  }
+};
+var T007_Confirm_Dialog = class extends T007_Dialog {
+  constructor({ question, resolve, options }) {
+    super(resolve);
+    this.render(question, options);
+  }
+  render(question, options = {}) {
+    this.dialog.innerHTML = `
+      <div class="t007-dialog-top-section">
+        <p class="t007-dialog-question">${question}</p>
+      </div>
+      <div class="t007-dialog-bottom-section">
+        <button class="t007-dialog-confirm-button" type="button">${options.confirmText || "OK"}</button>
+        <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+      </div>
+    `;
+    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
+    this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
+    this.confirmBtn.addEventListener("click", this.confirm);
+    this.cancelBtn.addEventListener("click", this.cancel);
+    this.show();
+  }
+};
+var T007_Prompt_Dialog = class extends T007_Dialog {
+  constructor({ question, defaultValue, resolve, options }) {
+    super(resolve);
+    this.render(question, defaultValue, options);
+  }
+  async render(question, defaultValue, options = {}) {
+    await loadResource(window.T007_INPUT_JS_SRC, "script");
+    options.value = defaultValue;
+    this.dialog.innerHTML = `
+      <form class="t007-input-form" novalidate>
+        <div class="t007-dialog-top-section">
+          <p class="t007-dialog-question">${question}</p>
+        </div>
+        <div class="t007-dialog-bottom-section">
+          <button class="t007-dialog-confirm-button" type="submit">${options.confirmText || "OK"}</button>
+          <button class="t007-dialog-cancel-button" type="button">${options.cancelText || "Cancel"}</button>
+        </div>
+      </form>
+    `;
+    (this.form = this.dialog.querySelector("form")).lastElementChild.insertAdjacentElement("beforebegin", t007.FM?.field(options) || createEl("input", options));
+    this.form.onSubmit = this.confirm;
+    this.confirmBtn = this.dialog.querySelector(".t007-dialog-confirm-button");
+    this.cancelBtn = this.dialog.querySelector(".t007-dialog-cancel-button");
+    this.cancelBtn.addEventListener("click", this.cancel);
+    t007.FM?.handleFormValidation?.(this.form);
+    this.show();
+  }
+  show() {
+    this.dialog.showModal();
+    this.form.elements[0]?.focus();
+    this.form.elements[0]?.select?.();
+  }
+  confirm() {
+    this.remove();
+    this.resolve(this.form.elements[0]?.value);
+  }
+  cancel() {
+    this.remove();
+    this.resolve(null);
+  }
+};
+function alert(message, options) {
+  return new Promise((resolve) => new T007_Alert_Dialog({ message, resolve, options }));
+}
+function confirm(question, options) {
+  return new Promise((resolve) => new T007_Confirm_Dialog({ question, resolve, options }));
+}
+function prompt(question, defaultValue, options) {
+  return new Promise((resolve) => new T007_Prompt_Dialog({ question, defaultValue, resolve, options }));
+}
+if (typeof window !== "undefined") {
+  t007.alert = alert;
+  t007.confirm = confirm;
+  t007.prompt = prompt;
+  loadResource(T007_DIALOG_CSS_SRC), loadResource(window.T007_INPUT_JS_SRC, "script");
+  window.Alert ??= t007.alert;
+  window.Confirm ??= t007.confirm;
+  window.Prompt ??= t007.prompt;
+  console.log("%cT007 Dialogs attached to window!", "color: darkturquoise");
+}
+export {
+  alert,
+  confirm,
+  prompt
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/dialog",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A lightweight, pure JS dialog system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -16,8 +16,8 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "browser": "./dist/index.global.js",
   "unpkg": "./dist/index.global.js",
+  "jsdelivr": "./dist/index.global.js",
   "types": "./src/ts/types/index.d.ts",
   "style": "./src/css/index.css",
   "sideEffects": [
@@ -27,19 +27,21 @@
     ".": {
       "types": "./src/ts/types/index.d.ts",
       "import": "./dist/index.js",
-      "default": "./dist/index.global.js"
+      "default": "./dist/index.js"
     },
+    "./standalone": "./dist/standalone.js",
+    "./global": "./dist/index.global.js",
     "./style.css": "./src/css/index.css"
   },
   "scripts": {
-    "build": "tsup src/index.js --format esm,iife --clean"
+    "build": "tsup --config ../../tsup.config.ts"
   },
   "files": [
     "dist",
     "./src/ts/types/index.d.ts",
     "./src/css/index.css"
   ],
-"keywords": [
+  "keywords": [
     "t007",
     "dialog",
     "modal",

package/src/ts/types/index.d.ts

@@ -24,11 +24,6 @@ declare global {
   }
 
   interface Window {
-    t007: T007Namespace;
-
-    T007_DIALOG_CSS_SRC?: string;
-    T007_INPUT_JS_SRC?: string;
-
     Alert?: T007Namespace["alert"];
     Confirm?: T007Namespace["confirm"];
     Prompt?: T007Namespace["prompt"];