@dooboostore/simple-web-component 1.0.1 → 1.0.2

package/src/elements/SwcObject.ts

@@ -0,0 +1,78 @@
+import { elementDefind, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+
+@elementDefind({ tagName: 'swc-object', useShadow: true })
+export class SwcObject extends SwcHTMLElementBase {
+  private _value: any = {};
+  private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any) {
+    if (typeof val !== 'object' || val === null) val = {};
+    this._value = this.createReactiveProxy(val, () => this.updateUI());
+    this.render();
+  }
+
+  get value(): any {
+    return this._value;
+  }
+
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  renderTemplate() {
+    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+  }
+
+  connectedCallback() {
+    this.initCore();
+    this.render();
+  }
+
+  private updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._value);
+    });
+  }
+
+  private render() {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
+
+    this._renderedNodes.forEach(n => {
+      if (n.parentElement === this) this.removeChild(n);
+    });
+    this._renderedNodes = [];
+
+    let slot = this.shadowRoot.querySelector('slot[name="obj-content"]');
+    if (!slot) {
+      slot = document.createElement('slot');
+      (slot as HTMLSlotElement).name = 'obj-content';
+      this.shadowRoot.appendChild(slot);
+    }
+
+    this._masterTplNodes.forEach(tplNode => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        (clone as HTMLElement).setAttribute('slot', 'obj-content');
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0) return;
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'obj-content');
+        span.appendChild(clone);
+        this.appendChild(span);
+        this._renderedNodes.push(span);
+        this.applyData(span, this._value);
+        return;
+      }
+      this.appendChild(clone);
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._value);
+    });
+  }
+}

package/src/index.ts

@@ -10,3 +10,5 @@ export * from './elements/SwcIf';
 export * from './elements/SwcChoose';
 export * from './elements/SwcWhen';
 export * from './elements/SwcOther';
+export * from './elements/SwcObject';
+export * from './elements/SwcHTMLElementBase';