@dooboostore/simple-web-component 1.0.15 → 1.0.16

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -1248,16 +1248,15 @@ var getInnerHtmlMetadataList = (target) => {
 
 // src/decorators/addEventListener.ts
 var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-function addEventListener(arg1, arg2) {
+function addEventListener(selector, type, options = {}) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
-    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ options, propertyKey });
+    listeners.push({ selector, type, options, propertyKey });
   };
 }
 var getAddEventListenerMetadata = (target) => {
@@ -1303,11 +1302,11 @@ var findAllLifecycleMetadata = (target, metadataKey) => {
 // src/decorators/emitCustomEvent.ts
 var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
 function emitCustomEvent(typeOrOptions) {
-  return (target, propertyKey, descriptor) => {
+  return (target, propertyKey) => {
     const constructor = target.constructor;
     const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
     if (!options.attributeName) {
-      options.attributeName = `on${options.type}`;
+      options.attributeName = `swc-on-${options.type}`;
     }
     if (options.bubbles === void 0) options.bubbles = true;
     if (options.composed === void 0) options.composed = true;
@@ -1317,18 +1316,6 @@ function emitCustomEvent(typeOrOptions) {
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, options });
-    const originalMethod = descriptor.value;
-    descriptor.value = function(...args) {
-      const detail = originalMethod.apply(this, args);
-      const event = new CustomEvent(options.type, {
-        detail,
-        bubbles: options.bubbles,
-        composed: options.composed,
-        cancelable: options.cancelable
-      });
-      this.dispatchEvent(event);
-      return detail;
-    };
   };
 }
 var getEmitCustomEventMetadataList = (target) => {
@@ -1393,148 +1380,43 @@ var findAllSetAttributeMetadata = (target) => {
 
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-var SwcUtils = class _SwcUtils {
+var SwcUtils = class {
   static getValueByPath(obj, path, rootName) {
     if (!obj || !path) return SWC_NOT_FOUND;
     const parts = path.split(".");
-    if (parts[0] === rootName && parts.length > 1) {
-      const subParts = parts.slice(1);
-      let subResult = obj;
-      for (const part of subParts) {
-        if (subResult === null || typeof subResult !== "object" || !(part in subResult)) return SWC_NOT_FOUND;
-        subResult = subResult[part];
-      }
-      return subResult;
-    }
-    let result = obj;
+    let current = obj;
     for (const part of parts) {
-      if (result === null || typeof result !== "object" || !(part in result)) {
-        return SWC_NOT_FOUND;
-      }
-      result = result[part];
-    }
-    if (result !== obj && !(result instanceof HTMLElement)) {
-      return result;
+      if (current === null || current === void 0) return SWC_NOT_FOUND;
+      current = current[part];
     }
-    return SWC_NOT_FOUND;
-  }
-  static evalExpression(expr, context) {
-    try {
-      const keys = Object.keys(context);
-      const values = Object.values(context);
-      return new Function(...keys, `return (${expr})`).apply(null, values);
-    } catch {
-      return SWC_NOT_FOUND;
-    }
-  }
-  static applyData(node, data, options) {
-    const { asKey, asIndexKey, index, hostContext } = options;
-    const context = {};
-    if (index !== void 0) {
-      context[asIndexKey] = index;
-    }
-    if (data !== null && data !== void 0) {
-      context[asKey] = data;
-      context["value"] = data;
-    }
-    const fullContext = { ...hostContext || {}, ...context };
-    const resolveExpr = (expr, match) => {
-      expr = expr.trim();
-      const simpleVal = _SwcUtils.getValueByPath(data, expr, asKey);
-      if (simpleVal !== SWC_NOT_FOUND && typeof simpleVal !== "symbol") {
-        return simpleVal === null || simpleVal === void 0 ? "" : String(simpleVal);
-      }
-      const exprVal = _SwcUtils.evalExpression(expr, fullContext);
-      if (exprVal !== SWC_NOT_FOUND && typeof exprVal !== "symbol") {
-        return exprVal === null || exprVal === void 0 ? "" : String(exprVal);
-      }
-      return match;
-    };
-    const walk = (n) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!n._original) n._original = n.textContent;
-        let text = n._original;
-        text = text.replace(/{{(.*?)}}/g, (match, path) => {
-          return resolveExpr(path, match);
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n;
-        Array.from(el.attributes).forEach((a) => {
-          if (!a._original) a._original = a.value;
-          let val = a._original;
-          val = val.replace(/{{(.*?)}}/g, (match, path) => {
-            return resolveExpr(path, match);
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
-  }
-  static createReactiveProxy(target, onChange, onIndexChange) {
-    const makeRecursiveProxy = (obj) => {
-      if (typeof obj !== "object" || obj === null || obj instanceof Node) return obj;
-      if (obj.__swc_is_proxy) return obj;
-      const IS_PROXY_KEY = "__swc_is_proxy";
-      const proxy = new Proxy(obj, {
-        get: (t, prop) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === "symbol") return t[prop];
-          return t[prop];
-        },
-        set: (t, prop, val) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === "symbol") {
-            t[prop] = val;
-            return true;
-          }
-          const oldVal = t[prop];
-          if (oldVal === val) return true;
-          t[prop] = makeRecursiveProxy(val);
-          const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
-          if (isIndex && onIndexChange) {
-            onIndexChange(Number(prop), val);
-          } else {
-            onChange();
-          }
-          return true;
-        },
-        deleteProperty: (t, prop) => {
-          delete t[prop];
-          onChange();
-          return true;
-        }
-      });
-      return proxy;
-    };
-    return makeRecursiveProxy(target);
+    return current;
   }
   static findNearestSwcHost(el) {
-    const hosts = this.findAllSwcHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : null;
+    let current = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
+    current = current?.parentElement || current?.getRootNode()?.host;
+    while (current) {
+      if (getElementConfig(current)) return current;
+      current = current.parentElement || current?.getRootNode()?.host;
+    }
+    return void 0;
   }
+  /**
+   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
+   */
   static findAllSwcHosts(el) {
     const hosts = [];
-    let curr = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
-    curr = curr?.parentElement || curr?.getRootNode()?.host;
-    while (curr) {
-      if (curr._swcId) hosts.push(curr);
-      curr = curr.parentElement || curr?.getRootNode()?.host;
+    let current = this.findNearestSwcHost(el);
+    while (current) {
+      hosts.push(current);
+      current = this.findNearestSwcHost(current);
     }
     return hosts.reverse();
   }
   static getHosts(el) {
-    return this.findAllSwcHosts(el);
+    return [...this.findAllSwcHosts(el), el];
   }
   static getHost(el) {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : void 0;
-  }
-  static getFirstHost(el) {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[0] : void 0;
+    return el;
   }
   static getAppHosts(el) {
     const hosts = this.getHosts(el);
@@ -1542,31 +1424,28 @@ var SwcUtils = class _SwcUtils {
   }
   static getAppHost(el) {
     const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[appHosts.length - 1] : void 0;
-  }
-  static getFirstAppHost(el) {
-    const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[0] : void 0;
-  }
-  static getLastAppHost(el) {
-    return this.getAppHost(el);
+    const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
+    return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
   }
   static getHostSet(el) {
-    const $hosts = this.getHosts(el);
-    const $appHosts = this.getAppHosts(el);
-    const $firstHost = $hosts[0] || null;
-    const $lastHost = $hosts[$hosts.length - 1] || null;
-    const $firstAppHost = $appHosts[0] || null;
-    const $lastAppHost = $appHosts[$appHosts.length - 1] || null;
+    const ancestors = this.findAllSwcHosts(el);
+    const $host = el;
+    const $hosts = [...ancestors, $host];
+    const $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
+    const $firstHost = ancestors.length > 0 ? ancestors[0] : null;
+    const $appHosts = $hosts.filter((h) => h.tagName.toLowerCase() === "swc-app" || h.getAttribute("is")?.startsWith("swc-app-"));
+    const $appHost = $appHosts.length > 0 ? $appHosts[$appHosts.length - 1] === el ? $appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null : $appHosts[$appHosts.length - 1] : null;
+    const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
     return {
-      $host: $lastHost,
+      $host,
+      $parentHost,
       $hosts,
       $firstHost,
-      $lastHost,
-      $appHost: $lastAppHost,
+      $lastHost: $parentHost,
+      $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost
+      $lastAppHost: $appHost
     };
   }
 };
@@ -1681,6 +1560,7 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
   InjectSituationType2["APP_HOST"] = "SIMPLE_WEB_COMPONENT://APPHOST";
   InjectSituationType2["APP_HOSTS"] = "SIMPLE_WEB_COMPONENT://APPHOSTS";
   InjectSituationType2["HOST"] = "SIMPLE_WEB_COMPONENT://HOST";
+  InjectSituationType2["PARENT_HOST"] = "SIMPLE_WEB_COMPONENT://PARENTHOST";
   InjectSituationType2["HOSTS"] = "SIMPLE_WEB_COMPONENT://HOSTS";
   InjectSituationType2["FIRST_HOST"] = "SIMPLE_WEB_COMPONENT://FIRSTHOST";
   InjectSituationType2["LAST_HOST"] = "SIMPLE_WEB_COMPONENT://LASTHOST";
@@ -1769,10 +1649,12 @@ var elementDefine = (inConfig) => (constructor) => {
         return this[methodName](...extraArgs);
       }
     }
-    _bindAttributeEvent(el, attrName, script) {
-      if (!attrName.startsWith("swc-on-"))
-        return;
-      const eventName = attrName.substring(7);
+    _bindAttributeEvent(el, attrName, script, eventName) {
+      if (!eventName) {
+        if (!attrName.startsWith("swc-on-"))
+          return;
+        eventName = attrName.substring(7);
+      }
       if (swcLifecycleAttributes.includes(attrName))
         return;
       const elHandlers = getHandlers(this);
@@ -1833,44 +1715,79 @@ var elementDefine = (inConfig) => (constructor) => {
           this.innerHTML = lContent;
       }
       addEventListenerList.forEach((meta) => {
-        const { type, query: query2, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-        const targetEls = [];
-        if (!query2) {
-          targetEls.push(this);
-        } else {
-          const searchRoots = [];
+        const { selector, type, options } = meta;
+        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
+        if (delegate && selector && selector !== ":host") {
+          const bindRoots = [];
           const r = root || "auto";
           if (r === "auto") {
-            searchRoots.push(this.shadowRoot || this);
+            bindRoots.push(this.shadowRoot || this);
           } else if (r === "light") {
-            searchRoots.push(this);
+            bindRoots.push(this);
           } else if (r === "shadow") {
             if (this.shadowRoot)
-              searchRoots.push(this.shadowRoot);
+              bindRoots.push(this.shadowRoot);
           } else if (r === "all") {
-            searchRoots.push(this);
+            bindRoots.push(this);
             if (this.shadowRoot)
-              searchRoots.push(this.shadowRoot);
+              bindRoots.push(this.shadowRoot);
           }
-          searchRoots.forEach((sr) => {
-            const found = sr.querySelectorAll(query2);
-            found.forEach((el) => targetEls.push(el));
+          bindRoots.forEach((bindRoot) => {
+            const handler = (event) => {
+              const target = event.target;
+              const matchedEl = target.closest(selector);
+              if (matchedEl && bindRoot.contains(matchedEl)) {
+                if (stopPropagation)
+                  event.stopPropagation();
+                if (stopImmediatePropagation)
+                  event.stopImmediatePropagation();
+                if (preventDefault)
+                  event.preventDefault();
+                const hostSet2 = SwcUtils.getHostSet(this);
+                this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2, matchedEl]);
+              }
+            };
+            bindRoot.addEventListener(type, handler, { capture, once, passive });
+          });
+        } else {
+          const targetEls = [];
+          if (!selector || selector === ":host") {
+            targetEls.push(this);
+          } else {
+            const searchRoots = [];
+            const r = root || "auto";
+            if (r === "auto") {
+              searchRoots.push(this.shadowRoot || this);
+            } else if (r === "light") {
+              searchRoots.push(this);
+            } else if (r === "shadow") {
+              if (this.shadowRoot)
+                searchRoots.push(this.shadowRoot);
+            } else if (r === "all") {
+              searchRoots.push(this);
+              if (this.shadowRoot)
+                searchRoots.push(this.shadowRoot);
+            }
+            searchRoots.forEach((sr) => {
+              const found = sr.querySelectorAll(selector);
+              found.forEach((el) => targetEls.push(el));
+            });
+          }
+          targetEls.forEach((el) => {
+            const handler = (event) => {
+              if (stopPropagation)
+                event.stopPropagation();
+              if (stopImmediatePropagation)
+                event.stopImmediatePropagation();
+              if (preventDefault)
+                event.preventDefault();
+              const hostSet2 = SwcUtils.getHostSet(this);
+              this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
+            };
+            const opts = { capture, once, passive };
+            el.addEventListener(type, handler, opts);
           });
         }
-        targetEls.forEach((el) => {
-          const handler = (event) => {
-            if (stopPropagation)
-              event.stopPropagation();
-            if (stopImmediatePropagation)
-              event.stopImmediatePropagation();
-            if (preventDefault)
-              event.preventDefault();
-            const hostSet2 = SwcUtils.getHostSet(this);
-            this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
-          };
-          const options = { capture, once, passive };
-          el.addEventListener(type, handler, options);
-        });
       });
       if (super.connectedCallback)
         await super.connectedCallback();
@@ -1915,7 +1832,9 @@ var elementDefine = (inConfig) => (constructor) => {
         super.attributeChangedCallback(name, old, newVal);
       if (name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
-          this._bindAttributeEvent(this, name, newVal);
+          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+          const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
+          this._bindAttributeEvent(this, name, newVal, eventName);
         }
       }
       const mKeys = attrChangeMap.get(name);
@@ -1940,6 +1859,23 @@ var elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  emitCustomEventList.forEach((meta) => {
+    const { propertyKey, options } = meta;
+    const original = NewClass.prototype[propertyKey];
+    if (typeof original === "function") {
+      NewClass.prototype[propertyKey] = function(...args) {
+        const detail = original.apply(this, args);
+        const event = new CustomEvent(options.type, {
+          detail,
+          bubbles: options.bubbles,
+          composed: options.composed,
+          cancelable: options.cancelable
+        });
+        this.dispatchEvent(event);
+        return detail;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -1963,48 +1899,37 @@ var getElementConfig = (target) => {
 
 // src/decorators/query.ts
 var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
-function query(arg1, arg2) {
-  const decorator = (selector, options, target, propertyKey, descriptor) => {
-    const isMethod = !!descriptor;
+function query(selector, options = {}) {
+  return (target, propertyKey, descriptor) => {
+    if (descriptor !== void 0) {
+      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
     const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get() {
-          if (!selector)
-            return this;
-          let searchRoot = this;
-          if (options.root === "shadow")
-            searchRoot = this.shadowRoot || this;
-          else if (options.root === "light")
-            searchRoot = this;
-          else
-            searchRoot = this.shadowRoot || this;
-          return searchRoot.querySelector(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-  if (arg1 && typeof arg2 === "string") {
-    return decorator("", {}, arg1, arg2);
-  }
-  return (target, propertyKey, descriptor) => {
-    let selector = "";
-    let options = {};
-    if (typeof arg1 === "string") {
-      selector = arg1;
-    } else if (typeof arg1 === "object") {
-      options = arg1;
-      selector = options.selector || "";
-    }
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (!selector || selector === ":host")
+          return this;
+        const r = options.root || "auto";
+        if (r === "shadow") {
+          return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+        }
+        if (r === "light") {
+          return this.querySelector(selector);
+        }
+        if (r === "all") {
+          return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+        }
+        return (this.shadowRoot || this).querySelector(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 var getQueryMetadata = (target) => {
@@ -2014,48 +1939,40 @@ var getQueryMetadata = (target) => {
 
 // src/decorators/queryAll.ts
 var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
-function queryAll(arg1, arg2) {
-  const decorator = (selector, options, target, propertyKey, descriptor) => {
-    const isMethod = !!descriptor;
+function queryAll(selector, options = {}) {
+  return (target, propertyKey, descriptor) => {
+    if (descriptor !== void 0) {
+      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
     const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get() {
-          if (!selector)
-            return [this];
-          let searchRoot = this;
-          if (options.root === "shadow")
-            searchRoot = this.shadowRoot || this;
-          else if (options.root === "light")
-            searchRoot = this;
-          else
-            searchRoot = this.shadowRoot || this;
-          return searchRoot.querySelectorAll(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-  if (arg1 && typeof arg2 === "string") {
-    return decorator("", {}, arg1, arg2);
-  }
-  return (target, propertyKey, descriptor) => {
-    let selector = "";
-    let options = {};
-    if (typeof arg1 === "string") {
-      selector = arg1;
-    } else if (typeof arg1 === "object") {
-      options = arg1;
-      selector = options.selector || "";
-    }
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (!selector || selector === ":host")
+          return [this];
+        const r = options.root || "auto";
+        if (r === "shadow") {
+          return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
+        }
+        if (r === "light") {
+          return this.querySelectorAll(selector);
+        }
+        if (r === "all") {
+          const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          const lNodes = Array.from(this.querySelectorAll(selector));
+          return [...sNodes, ...lNodes];
+        }
+        const root = this.shadowRoot || this;
+        return root.querySelectorAll(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 var getQueryAllMetadata = (target) => {