dolphin-client 1.1.1 → 1.1.2

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "html.customData": [
+    "./.vscode/dolphin-tags.json"
+  ]
+}

package/dist/dolphin-client.js

@@ -997,6 +997,82 @@ var DolphinModule = (() => {
     function escapeRegExp(str) {
       return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
+    function evaluateExpression(expr, ctx) {
+      if (!ctx || typeof ctx !== "object") return void 0;
+      try {
+        const safeCtx = new Proxy(ctx, {
+          has(target, prop) {
+            return true;
+          },
+          get(target, prop) {
+            if (typeof prop === "string") {
+              if (prop in target) return target[prop];
+              if (typeof globalThis !== "undefined" && prop in globalThis) return globalThis[prop];
+              if (typeof window !== "undefined" && prop in window) return window[prop];
+            }
+            return void 0;
+          }
+        });
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        return fn(safeCtx);
+      } catch {
+        return ctx[expr];
+      }
+    }
+    function splitByUnquotedChar(str, char) {
+      const parts = [];
+      let current = "";
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === char && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          parts.push(current);
+          current = "";
+        } else {
+          current += c;
+        }
+      }
+      parts.push(current);
+      return parts;
+    }
+    function splitFirstUnquotedColon(str) {
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === ":" && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          return [str.slice(0, i), str.slice(i + 1)];
+        }
+      }
+      return null;
+    }
     function resolveTemplate(el) {
       const template = el.getAttribute("data-rt-template");
       if (!template) return null;
@@ -1013,9 +1089,26 @@ var DolphinModule = (() => {
       if (!templateStr.includes("{#if") && !templateStr.includes("{#each")) {
         let result = templateStr;
         for (let key in context) {
-          const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          result = result.replace(new RegExp(`\\{\\{${escapedKey}\\}\\}`, "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
-        }
+          const escapedKey = key.replace(/[.*+?^$${}()|[\]\\]/g, "\\$&");
+          result = result.replace(new RegExp("\\{\\{" + escapedKey + "\\}}", "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
+        }
+        result = result.replace(/\{\{([\s\S]*?)\}\}/g, (match, expr) => {
+          const trimmed = expr.trim();
+          if (!trimmed) return "";
+          if (/^[a-zA-Z_$][a-zA-Z0-9_$]*(?:\??\.[a-zA-Z_$][a-zA-Z0-9_$]*)+$/.test(trimmed)) {
+            const parts = trimmed.split(/\??\./);
+            let val = context;
+            for (const part of parts) {
+              if (val === void 0 || val === null) {
+                val = void 0;
+                break;
+              }
+              val = val[part];
+            }
+            return val !== void 0 && val !== null ? val : "";
+          }
+          return match;
+        });
         return result;
       }
       try {
@@ -1135,7 +1228,9 @@ var DolphinModule = (() => {
       if (typeof document === "undefined") return html;
       try {
         const parser = new DOMParser();
-        const doc = parser.parseFromString(html, "text/html");
+        const hasBodyOrHtml = /<\s*(?:body|html)\b/i.test(html);
+        const parseString = hasBodyOrHtml ? html : `<body>${html}</body>`;
+        const doc = parser.parseFromString(parseString, "text/html");
         const body = doc.body;
         const sanitizeNode = (el) => {
           const tag = el.tagName.toLowerCase();
@@ -1249,7 +1344,7 @@ var DolphinModule = (() => {
         });
       }
     }
-    clientProto.setStoreState = function(storeName, key, val) {
+    clientProto.setStoreState = function(storeName, key, val, originEl) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
       if (!this.uiStores.has(storeName)) {
         this.uiStores.set(storeName, {});
@@ -1262,6 +1357,7 @@ var DolphinModule = (() => {
       if (typeof document !== "undefined") {
         const readElements = document.querySelectorAll(`[data-store-read="${storeName}.${key}"]`);
         readElements.forEach((el) => {
+          if (el === originEl) return;
           if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
             if (el.type === "checkbox") {
               el.checked = !!val;
@@ -1337,20 +1433,49 @@ var DolphinModule = (() => {
           if (key) return ctx[key];
           return ctx;
         }
-        current = current.parentElement;
+        current = current.parentElement || current.parentNode;
       }
       return null;
     };
     clientProto._executeStoreAction = function(expression, element) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
+      const parentCtx = element && typeof this.getClosestContext === "function" ? this.getClosestContext(element) : null;
       const context = new Proxy({}, {
         has: (target, prop) => {
           return true;
         },
         get: (target, prop) => {
           if (typeof prop === "string") {
+            if (prop === "log") {
+              return (arg) => {
+                if (arg === void 0) {
+                  const allStores = {};
+                  this.uiStores.forEach((val, key) => {
+                    allStores[key] = { ...val };
+                  });
+                  console.log(`%c\u{1F4CA} [Dolphin All UI Stores]:`, "color: #06b6d4; font-weight: bold;", allStores);
+                } else if (arg && typeof arg === "object" && arg.__isStoreProxy__) {
+                  const storeName = arg.__storeName__;
+                  const store = this.uiStores.get(storeName);
+                  console.log(`%c\u{1F4CA} [Dolphin Store: ${storeName}]:`, "color: #06b6d4; font-weight: bold;", store ? { ...store } : {});
+                } else {
+                  console.log(`%c\u{1F4CA} [Dolphin Log]:`, "color: #06b6d4; font-weight: bold;", arg);
+                }
+              };
+            }
+            if (parentCtx && parentCtx[prop] !== void 0) {
+              return parentCtx[prop];
+            }
+            if (typeof globalThis !== "undefined" && prop in globalThis) {
+              return globalThis[prop];
+            }
+            if (typeof window !== "undefined" && prop in window) {
+              return window[prop];
+            }
             return new Proxy({}, {
               get: (subTarget, subProp) => {
+                if (subProp === "__storeName__") return prop;
+                if (subProp === "__isStoreProxy__") return true;
                 if (typeof subProp === "string") {
                   return this.getStoreState(prop, subProp);
                 }
@@ -1377,86 +1502,6 @@ var DolphinModule = (() => {
         console.error("%cFailed Expression:", "color: #3b82f6; font-style: italic;", expression);
       }
     };
-    clientProto._showAlert = function(id, duration) {
-      if (typeof document === "undefined") return;
-      const el = document.getElementById(id) || document.querySelector(`[id="${id}"]`);
-      if (!el) return;
-      el.removeAttribute("hidden");
-      el.style.display = "";
-      if (duration && duration > 0) {
-        setTimeout(() => {
-          el.setAttribute("hidden", "");
-        }, duration);
-      }
-    };
-    clientProto._showToast = function(message, type = "success") {
-      if (typeof document === "undefined") return;
-      const colors = {
-        success: { bg: "rgba(16,185,129,0.15)", border: "#10b981", icon: "\u2705" },
-        error: { bg: "rgba(239,68,68,0.15)", border: "#ef4444", icon: "\u274C" },
-        info: { bg: "rgba(59,130,246,0.15)", border: "#3b82f6", icon: "\u2139\uFE0F" }
-      };
-      const c = colors[type] || colors.success;
-      const toast = document.createElement("div");
-      toast.setAttribute("data-dolphin-toast", "");
-      const existing = document.querySelectorAll("[data-dolphin-toast]");
-      const offset = existing.length * 72;
-      toast.style.cssText = [
-        "position:fixed",
-        `bottom:${24 + offset}px`,
-        "right:24px",
-        "z-index:2147483647",
-        `background:${c.bg}`,
-        `border:1px solid ${c.border}`,
-        "color:#fff",
-        "padding:14px 20px",
-        "border-radius:14px",
-        "font-size:14px",
-        "font-weight:600",
-        "font-family:system-ui,sans-serif",
-        "box-shadow:0 8px 32px rgba(0,0,0,0.4)",
-        "display:flex",
-        "align-items:center",
-        "gap:10px",
-        "max-width:380px",
-        "word-break:break-word",
-        "transform:translateY(80px)",
-        "opacity:0",
-        "transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease",
-        "pointer-events:auto",
-        "backdrop-filter:blur(12px)"
-      ].join(";");
-      toast.innerHTML = `<span style="font-size:18px">${c.icon}</span><span>${message}</span>`;
-      document.body.appendChild(toast);
-      const restack = () => {
-        const remaining = document.querySelectorAll("[data-dolphin-toast]");
-        remaining.forEach((el, i) => {
-          el.style.bottom = `${24 + i * 72}px`;
-        });
-      };
-      const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
-      raf(() => raf(() => {
-        toast.style.transform = "translateY(0)";
-        toast.style.opacity = "1";
-      }));
-      const removeToast = () => {
-        clearTimeout(toast._removeTimer);
-        if (toast.parentNode) {
-          toast.parentNode.removeChild(toast);
-          restack();
-        }
-      };
-      const hideTimer = setTimeout(() => {
-        toast.style.transform = "translateY(80px)";
-        toast.style.opacity = "0";
-        toast._removeTimer = setTimeout(removeToast, 400);
-      }, 3500);
-      toast._hideTimer = hideTimer;
-      toast.addEventListener("click", () => {
-        clearTimeout(toast._hideTimer);
-        removeToast();
-      }, { once: true });
-    };
     clientProto._initDOMBinding = function() {
       if (this._domInitialized) return;
       this._domInitialized = true;
@@ -1472,7 +1517,7 @@ var DolphinModule = (() => {
               const storeName = parts[0];
               const key = parts[1];
               const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
-              this.setStoreState(storeName, key, val);
+              this.setStoreState(storeName, key, val, e.target);
             }
           }
           const rules = e.target.getAttribute("data-rt-validate");
@@ -1555,11 +1600,6 @@ var DolphinModule = (() => {
               resolvedTopic = resolvedTopic.replace(new RegExp(`\\{\\{${escapedK}\\}\\}`, "g"), parentCtx[k] !== void 0 && parentCtx[k] !== null ? parentCtx[k] : "");
             }
             this.publish(resolvedTopic, data);
-            const rtSuccessId = e.target.getAttribute("data-rt-api-success");
-            if (rtSuccessId) {
-              const rtSuccessEl = document.getElementById(rtSuccessId);
-              if (rtSuccessEl) this._showToast(rtSuccessEl.textContent || rtSuccessEl.innerText || "", "success");
-            }
           } else if (apiTarget) {
             let resolvedTarget = apiTarget;
             for (const k in parentCtx) {
@@ -1576,40 +1616,16 @@ var DolphinModule = (() => {
               const result = await this.api.request(method, path, data);
               const resultBind = e.target.getAttribute("data-api-result");
               if (resultBind) this._updateDOM(resultBind, result);
-              const successToast = e.target.getAttribute("data-api-toast");
-              if (successToast) this._showToast(successToast, "success");
-              const successElId = e.target.getAttribute("data-rt-api-success");
-              if (successElId) {
-                const duration = parseInt(e.target.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(successElId, duration);
-                const errElId = e.target.getAttribute("data-rt-api-error");
-                if (errElId) {
-                  const errEl = document.getElementById(errElId);
-                  if (errEl) errEl.setAttribute("hidden", "");
-                }
-              }
               const redirect = e.target.getAttribute("data-api-redirect");
               if (redirect) window.location.href = redirect;
               if (e.target.hasAttribute("data-api-reload")) window.location.reload();
             } catch (err) {
               console.error("[Dolphin] API Submit Error:", err);
-              const errorToast = e.target.getAttribute("data-api-error-toast");
-              if (errorToast) this._showToast(errorToast, "error");
-              const errorElId = e.target.getAttribute("data-rt-api-error");
-              if (errorElId) {
-                const duration = parseInt(e.target.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(errorElId, duration);
-                const sucElId = e.target.getAttribute("data-rt-api-success");
-                if (sucElId) {
-                  const sucEl = document.getElementById(sucElId);
-                  if (sucEl) sucEl.setAttribute("hidden", "");
-                }
-              }
             }
           }
         }
       });
-      const INTERACTION_EVENTS = ["click", "change", "input", "keydown", "keyup", "dblclick", "focus", "blur", "mouseenter", "mouseleave"];
+      const INTERACTION_EVENTS = ["click", "change", "submit", "input", "keydown", "keyup", "dblclick", "focus", "blur", "mouseenter", "mouseleave"];
       INTERACTION_EVENTS.forEach((evtName) => {
         this.addDomListener(document, evtName, async (e) => {
           if (!e.target || !e.target.closest) return;
@@ -1640,12 +1656,7 @@ var DolphinModule = (() => {
             const apiTarget = apiBtn.getAttribute(`data-api-${evtName}`);
             const actionData = apiBtn.getAttribute("data-api-payload");
             const parentCtx = this.getClosestContext(apiBtn) || {};
-            let resolvedApiTarget = apiTarget;
-            for (const k in parentCtx) {
-              const escapedK = escapeRegExp(k);
-              resolvedApiTarget = resolvedApiTarget.replace(new RegExp(`\\{\\{${escapedK}\\}\\}`, "g"), parentCtx[k] !== void 0 && parentCtx[k] !== null ? parentCtx[k] : "");
-            }
-            const parts = resolvedApiTarget.trim().split(" ");
+            const parts = apiTarget.trim().split(" ");
             const method = parts.length > 1 ? parts[0].toUpperCase() : "POST";
             const path = parts.length > 1 ? parts[1] : parts[0];
             let payload = null;
@@ -1665,35 +1676,11 @@ var DolphinModule = (() => {
               const result = await this.api.request(method, path, payload);
               const resultBind = apiBtn.getAttribute("data-api-result");
               if (resultBind) this._updateDOM(resultBind, result);
-              const successToast = apiBtn.getAttribute("data-api-toast");
-              if (successToast) this._showToast(successToast, "success");
-              const successElId = apiBtn.getAttribute("data-rt-api-success");
-              if (successElId) {
-                const duration = parseInt(apiBtn.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(successElId, duration);
-                const errElId = apiBtn.getAttribute("data-rt-api-error");
-                if (errElId) {
-                  const errEl = document.getElementById(errElId);
-                  if (errEl) errEl.setAttribute("hidden", "");
-                }
-              }
               const redirect = apiBtn.getAttribute("data-api-redirect");
               if (redirect) window.location.href = redirect;
               if (apiBtn.hasAttribute("data-api-reload")) window.location.reload();
             } catch (err) {
               console.error(`[Dolphin] API ${evtName} Error:`, err);
-              const errorToast = apiBtn.getAttribute("data-api-error-toast");
-              if (errorToast) this._showToast(errorToast, "error");
-              const errorElId = apiBtn.getAttribute("data-rt-api-error");
-              if (errorElId) {
-                const duration = parseInt(apiBtn.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(errorElId, duration);
-                const sucElId = apiBtn.getAttribute("data-rt-api-success");
-                if (sucElId) {
-                  const sucEl = document.getElementById(sucElId);
-                  if (sucEl) sucEl.setAttribute("hidden", "");
-                }
-              }
             }
           }
           const storeActionBtn = e.target.closest(`[data-store-${evtName}]`);
@@ -1890,24 +1877,33 @@ var DolphinModule = (() => {
           const processNode = (node) => {
             if (node.hasAttribute("data-rt-text")) {
               const key = node.getAttribute("data-rt-text");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) node.textContent = processedPayload[key];
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) node.textContent = val;
+              }
             }
             if (node.hasAttribute("data-rt-html")) {
               const key = node.getAttribute("data-rt-html");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                node.innerHTML = sanitizeHTML(processedPayload[key]);
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) {
+                  node.innerHTML = sanitizeHTML(val);
+                }
               }
             }
             if (node.hasAttribute("data-rt-attr")) {
               const attrStr = node.getAttribute("data-rt-attr");
               if (attrStr) {
-                attrStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const attrName = parts[0].trim();
-                    const key = parts[1].trim();
-                    if (attrName && key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                      node.setAttribute(attrName, processedPayload[key]);
+                splitByUnquotedChar(attrStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const attrName = pair[0].trim();
+                    const key = pair[1].trim();
+                    if (attrName && key) {
+                      const val = evaluateExpression(key, processedPayload);
+                      if (val !== void 0 && val !== null) {
+                        node.setAttribute(attrName, val);
+                      }
                     }
                   }
                 });
@@ -1916,13 +1912,13 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-class")) {
               const classStr = node.getAttribute("data-rt-class");
               if (classStr) {
-                classStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const className = parts[0].trim();
-                    const key = parts[1].trim();
+                splitByUnquotedChar(classStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const className = pair[0].trim();
+                    const key = pair[1].trim();
                     const classNames = className.split(/\s+/).filter(Boolean);
-                    if (processedPayload[key]) {
+                    if (evaluateExpression(key, processedPayload)) {
                       classNames.forEach((c) => node.classList.add(c));
                     } else {
                       classNames.forEach((c) => node.classList.remove(c));
@@ -1934,7 +1930,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-if")) {
               const key = node.getAttribute("data-rt-if");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "";
                 } else {
                   node.style.display = "none";
@@ -1944,7 +1940,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-hide")) {
               const key = node.getAttribute("data-rt-hide");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "none";
                 } else {
                   node.style.display = "";
@@ -1994,21 +1990,35 @@ var DolphinModule = (() => {
           return;
         }
         resolvingSet.add(src);
-        let promise = componentPromiseCache.get(src);
+        const hashIndex = src.indexOf("#");
+        const url = hashIndex !== -1 ? src.substring(0, hashIndex) : src;
+        const selector = hashIndex !== -1 ? src.substring(hashIndex) : null;
+        let promise = componentPromiseCache.get(url);
         if (!promise) {
-          promise = fetch(src).then((res) => {
+          promise = fetch(url).then((res) => {
             if (!res.ok) throw new Error(`HTTP ${res.status}`);
             return res.text();
           });
-          promise.catch(() => componentPromiseCache.delete(src));
-          componentPromiseCache.set(src, promise);
+          promise.catch(() => componentPromiseCache.delete(url));
+          componentPromiseCache.set(url, promise);
         }
         let content = "";
         try {
           content = await promise;
+          if (selector && typeof DOMParser !== "undefined") {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, "text/html");
+            const targetEl = doc.querySelector(selector);
+            if (targetEl) {
+              content = targetEl.outerHTML;
+            } else {
+              console.warn(`[Dolphin Component Warning]: Selector "${selector}" not found in imported file "${url}".`);
+              content = `<span style="color:orange;font-weight:bold;">Selector ${selector} not found in ${url}</span>`;
+            }
+          }
         } catch (err) {
-          console.error(`[Dolphin Component Error]: Failed to fetch component "${src}":`, err);
-          content = `<span style="color:red;font-weight:bold;">Failed to import ${src}</span>`;
+          console.error(`[Dolphin Component Error]: Failed to fetch component "${url}":`, err);
+          content = `<span style="color:red;font-weight:bold;">Failed to import ${url}</span>`;
         }
         el.innerHTML = sanitizeHTML(content);
         el.removeAttribute("data-import");