@dooboostore/simple-web-component 1.0.29 → 1.0.31

package/dist/esm/elements/register.js

@@ -123,49 +123,34 @@ const registerAllElements = (w) => {
       this._value = Boolean(nv);
       this.render();
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script: portalScript,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof HTMLElement)
-        return res;
-      if (typeof res === "string")
-        return win.document.querySelector(res);
-      return this.parentElement;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
         return;
       FunctionUtils.execute({ script, context: this, args });
     }
-    refreshValue() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
+    refreshValue(valueAttr) {
+      valueAttr ?? (valueAttr = this.getAttribute("value"));
+      if (valueAttr === null) {
         this.value = false;
         return;
       }
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof Promise) {
-        res.then((v) => this.value = v).catch(() => this.value = false);
+      if (valueAttr.startsWith("{{") && valueAttr.endsWith("}}")) {
+        const script = valueAttr.slice(2, -2).trim();
+        const win = this.ownerDocument?.defaultView || window;
+        const result = FunctionUtils.executeReturn({
+          script,
+          context: this,
+          args: SwcUtils.getHelperAndHostSet(win, this)
+        });
+        this.value = result;
       } else {
-        this.value = res;
+        this.value = Boolean(valueAttr);
       }
     }
     render() {
       this.cleanup();
-      const portal = this._resolvePortal();
+      const portal = this.parentElement;
       if (!portal)
         return;
       const win = this.ownerDocument?.defaultView || window;
@@ -185,16 +170,24 @@ const registerAllElements = (w) => {
         const elements = this._nodes.filter((n) => n.nodeType === 1);
         const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
         this._nodes.forEach((node, nodeIdx) => {
-          if (node instanceof HTMLElement)
-            node.__swc_host = this;
           this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+          if (node instanceof HTMLElement) {
+            Array.from(node.attributes).forEach((attr) => {
+              const value = attr.value || "";
+              if (value.startsWith("{{") && value.endsWith("}}")) {
+                const script = value.slice(2, -2).trim();
+                const result = FunctionUtils.executeReturn({
+                  script,
+                  context: node,
+                  args: { ...groupArgs, $value: this._value }
+                });
+                node.setAttribute(attr.name, String(result));
+              }
+            });
+          }
         });
         this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
+        portal.insertBefore(clone, this.nextSibling);
       }
     }
     cleanup() {
@@ -209,9 +202,9 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcIf.prototype, "refreshValue", null);
   SwcIf = __decorate([
@@ -230,22 +223,6 @@ const registerAllElements = (w) => {
       this._value = Array.isArray(nv) ? [...nv] : [];
       this.render();
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script: portalScript,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof HTMLElement)
-        return res;
-      if (typeof res === "string")
-        return win.document.querySelector(res);
-      return this.parentElement;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
@@ -257,11 +234,14 @@ const registerAllElements = (w) => {
       this._nodeGroups = [];
     }
     refreshValue() {
-      const script = this.getAttribute("on-get-value");
+      let script = this.getAttribute("value");
       if (!script) {
         this.value = [];
         return;
       }
+      if (script.startsWith("{{") && script.endsWith("}}")) {
+        script = script.slice(2, -2).trim();
+      }
       const win = this.ownerDocument?.defaultView || window;
       const res = FunctionUtils.executeReturn({
         script,
@@ -276,7 +256,7 @@ const registerAllElements = (w) => {
     }
     render() {
       this._cleanup();
-      const portal = this._resolvePortal();
+      const portal = this.parentElement;
       if (!portal)
         return;
       const win = this.ownerDocument?.defaultView || window;
@@ -299,9 +279,21 @@ const registerAllElements = (w) => {
           const elements = nodes.filter((n) => n.nodeType === 1);
           const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value, $nodes: nodes, $elements: elements, $firstElement: elements[0] };
           nodes.forEach((node, nodeIdx) => {
-            if (node instanceof HTMLElement)
-              node.__swc_host = this;
             this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+            if (node instanceof HTMLElement) {
+              Array.from(node.attributes).forEach((attr) => {
+                const value = attr.value || "";
+                if (value.startsWith("{{") && value.endsWith("}}")) {
+                  const script = value.slice(2, -2).trim();
+                  const result = FunctionUtils.executeReturn({
+                    script,
+                    context: node,
+                    args: groupArgs
+                  });
+                  node.setAttribute(attr.name, String(result));
+                }
+              });
+            }
           });
           this._executeCloneCallback("on-clone-nodes", groupArgs);
           this._nodeGroups.push(nodes);
@@ -322,7 +314,7 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
@@ -335,6 +327,7 @@ const registerAllElements = (w) => {
       super(...arguments);
       this._nodes = [];
       this._value = null;
+      this._previousTemplate = null;
     }
     get value() {
       return this._value;
@@ -343,70 +336,86 @@ const registerAllElements = (w) => {
       this._value = nv;
       this.render();
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script: portalScript,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof HTMLElement)
-        return res;
-      if (typeof res === "string")
-        return win.document.querySelector(res);
-      return this.parentElement;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
         return;
       FunctionUtils.execute({ script, context: this, args });
     }
-    refresh() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
+    refresh(valueAttr) {
+      valueAttr ?? (valueAttr = this.getAttribute("value"));
+      if (valueAttr === null) {
         this.value = null;
         return;
       }
-      const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
-      this.value = result;
+      if (valueAttr.startsWith("{{") && valueAttr.endsWith("}}")) {
+        const script = valueAttr.slice(2, -2).trim();
+        const win = this.ownerDocument?.defaultView || window;
+        const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this));
+        const result = FunctionUtils.executeReturn({ script, context: this, args: helperAndHostSet });
+        this.value = result;
+      } else {
+        this.value = valueAttr;
+      }
     }
     render() {
-      this.cleanup();
-      const portal = this._resolvePortal();
-      if (!portal)
-        return;
       const win = this.ownerDocument?.defaultView || window;
       const helperSet = SwcUtils.getHelperAndHostSet(win, this);
       const templates = Array.from(this.content.querySelectorAll("template"));
       let selected = null;
       for (const t of templates) {
-        if (t.getAttribute("is") === "swc-when" && String(t.getAttribute("value")) === String(this._value)) {
-          selected = t;
-          break;
+        if (t.getAttribute("is") === "swc-when") {
+          let matches = false;
+          const value = t.getAttribute("value") || "";
+          if (value.startsWith("{{") && value.endsWith("}}")) {
+            const script = value.slice(2, -2).trim();
+            const result = FunctionUtils.executeReturn({
+              script,
+              context: t,
+              args: { ...helperSet, $value: this._value }
+            });
+            matches = result === true;
+          } else {
+            matches = String(value) === String(this._value);
+          }
+          if (matches) {
+            selected = t;
+            break;
+          }
         }
       }
       const target = selected || this.content.querySelector('template[is="swc-otherwise"]');
+      const targetHasSkipIfSame = target?.hasAttribute("skip-if-same");
+      const shouldSkip = (this.hasAttribute("skip-if-same") || targetHasSkipIfSame) && this._previousTemplate === target;
+      if (shouldSkip) {
+        return;
+      }
+      this.cleanup();
+      this._previousTemplate = target;
       if (target) {
         const clone = target.content.cloneNode(true);
         this._nodes = Array.from(clone.childNodes);
         const elements = this._nodes.filter((n) => n.nodeType === 1);
         const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
         this._nodes.forEach((n, nodeIdx) => {
-          if (n instanceof HTMLElement)
-            n.__swc_host = this;
           this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+          if (n instanceof HTMLElement) {
+            Array.from(n.attributes).forEach((attr) => {
+              const value = attr.value || "";
+              if (value.startsWith("{{") && value.endsWith("}}")) {
+                const script = value.slice(2, -2).trim();
+                const result = FunctionUtils.executeReturn({
+                  script,
+                  context: n,
+                  args: { ...groupArgs, $value: this._value }
+                });
+                n.setAttribute(attr.name, String(result));
+              }
+            });
+          }
         });
         this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
+        this.parentElement?.insertBefore(clone, this.nextSibling);
       }
     }
     cleanup() {
@@ -421,9 +430,9 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcChoose.prototype, "refresh", null);
   SwcChoose = __decorate([
@@ -435,34 +444,32 @@ const registerAllElements = (w) => {
       this._nodes = [];
       this._value = null;
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script: portalScript,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof HTMLElement)
-        return res;
-      if (typeof res === "string")
-        return win.document.querySelector(res);
-      return this.parentElement;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
         return;
       FunctionUtils.execute({ script, context: this, args });
     }
-    refresh() {
-      const script = this.getAttribute("on-get-value");
-      if (!script)
+    refresh(valueAttr) {
+      valueAttr ?? (valueAttr = this.getAttribute("value"));
+      if (!valueAttr) {
+        this.render("default");
         return;
-      const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+      }
+      if (valueAttr.startsWith("{{") && valueAttr.endsWith("}}")) {
+        const script = valueAttr.slice(2, -2).trim();
+        const win = this.ownerDocument?.defaultView || window;
+        const result = FunctionUtils.executeReturn({
+          script,
+          context: this,
+          args: SwcUtils.getHelperAndHostSet(win, this)
+        });
+        this.executeAsync(result);
+      } else {
+        this.executeAsync(valueAttr);
+      }
+    }
+    executeAsync(result) {
       if (result instanceof Promise) {
         this.render("loading");
         result.then((v) => {
@@ -476,7 +483,7 @@ const registerAllElements = (w) => {
     }
     render(state) {
       this.cleanup();
-      const portal = this._resolvePortal();
+      const portal = this.parentElement;
       if (!portal)
         return;
       const win = this.ownerDocument?.defaultView || window;
@@ -488,16 +495,24 @@ const registerAllElements = (w) => {
         const elements = this._nodes.filter((n) => n.nodeType === 1);
         const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0], $state: state };
         this._nodes.forEach((n, nodeIdx) => {
-          if (n instanceof HTMLElement)
-            n.__swc_host = this;
           this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+          if (n instanceof HTMLElement) {
+            Array.from(n.attributes).forEach((attr) => {
+              const value = attr.value || "";
+              if (value.startsWith("{{") && value.endsWith("}}")) {
+                const script = value.slice(2, -2).trim();
+                const result = FunctionUtils.executeReturn({
+                  script,
+                  context: n,
+                  args: groupArgs
+                });
+                n.setAttribute(attr.name, String(result));
+              }
+            });
+          }
         });
         this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
+        portal.insertBefore(clone, this.nextSibling);
       }
     }
     cleanup() {
@@ -512,9 +527,9 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcAsync.prototype, "refresh", null);
   SwcAsync = __decorate([
@@ -805,6 +820,79 @@ const registerAllElements = (w) => {
   SwcAppBody = __decorate([
     elementDefine("swc-app-body", { extends: "body", window: w })
   ], SwcAppBody);
+  return {
+    // Sub Templates
+    SwcLoading,
+    SwcError,
+    SwcSuccess,
+    SwcWhen,
+    SwcOtherwise,
+    SwcDefault,
+    // Core Elements
+    SwcApp,
+    SwcIf,
+    SwcLoop,
+    SwcChoose,
+    SwcAsync,
+    // App Elements
+    SwcAppAnchor,
+    SwcAppArea,
+    SwcAppAudio,
+    SwcAppBase,
+    SwcAppButton,
+    SwcAppCanvas,
+    SwcAppData,
+    SwcAppDataList,
+    SwcAppDetails,
+    SwcAppDialog,
+    SwcAppDiv,
+    SwcAppDList,
+    SwcAppEmbed,
+    SwcAppFieldSet,
+    SwcAppForm,
+    SwcAppHR,
+    SwcAppIFrame,
+    SwcAppImage,
+    SwcAppInput,
+    SwcAppLabel,
+    SwcAppLegend,
+    SwcAppLI,
+    SwcAppLink,
+    SwcAppMap,
+    SwcAppMeta,
+    SwcAppMeter,
+    SwcAppMod,
+    SwcAppObject,
+    SwcAppOList,
+    SwcAppOptGroup,
+    SwcAppOption,
+    SwcAppOutput,
+    SwcAppParagraph,
+    SwcAppParam,
+    SwcAppPicture,
+    SwcAppPre,
+    SwcAppProgress,
+    SwcAppQuote,
+    SwcAppScript,
+    SwcAppSelect,
+    SwcAppSlot,
+    SwcAppSource,
+    SwcAppSpan,
+    SwcAppStyle,
+    SwcAppTable,
+    SwcAppTableSection,
+    SwcAppTableCell,
+    SwcAppTemplate,
+    SwcAppTextArea,
+    SwcAppTime,
+    SwcAppTitle,
+    SwcAppTableRow,
+    SwcAppTrack,
+    SwcAppUList,
+    SwcAppVideo,
+    SwcAppHeading,
+    SwcAppBody
+  };
 };
 export {
   registerAllElements