@dooboostore/dom-render 1.0.108 → 1.0.109

package/src/components/select/Select.ts

@@ -11,6 +11,7 @@ import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
 import { OnCreateRender } from '../../lifecycle/OnCreateRender';
 import { DomRenderConfig } from '../../configs/DomRenderConfig';
 import { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';
+import { OnRawSetRenderedOtherData } from 'src/lifecycle';
 
 /** 사용법
  <dr-select class="card-select-container" changeSelected="${(data) => @this@.changeSelected(data)}$">  <!-- multiple attribute optional-->
@@ -137,6 +138,10 @@ export namespace Select {
     //   super.onCreatedThisChild(child, data);
     //   this.updateStatus();
     // }
+
+    // async onRawSetRendered(rawSet:RawSet, otherData:OnRawSetRenderedOtherData):Promise<void>{
+    //   await super.onRawSetRendered(rawSet, otherData);
+    // }
     onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
       super.onCreatedThisChildDebounce(childrenSet);
       this.updateStatus();
@@ -210,22 +215,20 @@ export namespace Select {
 
   // --- Summary Component ---
   export class Summary extends ComponentBase implements OnInitRender {
-    @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;
+    @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;
     private options: Select.Option[] = [];
     private disabled: boolean = false;
     public element?: HTMLElement;
 
-    constructor() {
-      super({onlyParentType: Select});
-    }
-
+    // constructor() {
+    //   super({ onlyParentType: Select });
+    // }
 
     setDisabled(disabled: boolean) {
       this.disabled = disabled;
-      this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = true);
-      this.getChildren(SummarySelected).forEach(it => it.hidden = true);
-      this.getChildren(SummaryDisabled).forEach(it => it.hidden = false);
-
+      this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));
+      this.getChildren(SummarySelected).forEach(it => (it.hidden = true));
+      this.getChildren(SummaryDisabled).forEach(it => (it.hidden = false));
     }
 
     setOptions(options: Option[] = []): void {
@@ -234,16 +237,16 @@ export namespace Select {
       const selectedOptions = this.options.filter(it => it.selected && !it.disabled);
       if (!this.disabled) {
         if (selectedOptions.length > 0) {
-          this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = true);
+          this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));
           this.getChildren(SummarySelected).forEach(c => {
             c.setOptions(options);
             c.hidden = false;
           });
-          this.getChildren(SummaryDisabled).forEach(it => it.hidden = true);
+          this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));
         } else {
-          this.getChildren(SummaryDisabled).forEach(it => it.hidden = true);
-          this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = false);
-          this.getChildren(SummarySelected).forEach(c => c.hidden = true);
+          this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));
+          this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = false));
+          this.getChildren(SummarySelected).forEach(c => (c.hidden = true));
         }
       }
     }
@@ -261,19 +264,21 @@ export namespace Select {
     }
 
     updateView(hasSelection: boolean) {
-      this.getChildren(SummaryPlaceholder).forEach(c => c.hidden = hasSelection);
-      this.getChildren(SummarySelected).forEach(c => c.hidden = !hasSelection);
+      this.getChildren(SummaryPlaceholder).forEach(c => (c.hidden = hasSelection));
+      this.getChildren(SummarySelected).forEach(c => (c.hidden = !hasSelection));
     }
 
     // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
     //   super.onCreatedThisChild(child, data);
     // }
+    // async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
+    //   await super.onRawSetRendered(rawSet, otherData);
+    // }
     onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
       super.onCreatedThisChildDebounce(childrenSet);
-      this.updateView(this.getParentThis<Select>()?.selectedValues.length > 0);
+      this.updateView(this.getParentThis<Select>()?.selectedValues?.length > 0);
     }
 
-
     onSummaryClick(element: HTMLElement, event: Event) {
       if (this.getParentThis<Select>()?.disabled) {
         event.stopPropagation();
@@ -285,31 +290,40 @@ export namespace Select {
 
 
   export class SelectBody extends ComponentBase<SelectBodyAttribute> {
-    @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;
-    @attribute({name: 'float'}) public float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null = null;
+    @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;
+    @attribute({ name: 'float' }) public float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null = null;
 
     constructor() {
-      super({onlyParentType: Select});
+      super({ onlyParentType: Select });
     }
 
-    onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+    async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
+      await super.onRawSetRendered(rawSet, otherData);
+    // }
+    // onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+    //   super.onCreatedThisChildDebounce(childrenSet);
       this.changeOptionState();
     }
 
     changeOptionState(option?: Option) {
       const options = this.getChildren(Option);
       const select = this.getParentThis<Select>();
+      // console.log('------opti',option, select);
       // // 멀티플이 아닐때에는 마지막 선택된값으로 처리
       if (!select.multiple) {
         // 내가 선택한게 있으면
         if (option && option.selected) {
-          options.filter(it => it !== option).forEach(it => it.selected = false);
+          options.filter(it => it !== option).forEach(it => {
+            it.selected = false;
+            it.updateStatus();
+          });
         } else {
-          const selectedOptions = options.filter(it => it.selected && !it.disabled)
+          const selectedOptions = options.filter(it => it.selected && !it.disabled);
           selectedOptions.forEach((opt, idx) => {
             const isLast = idx === selectedOptions.length - 1;
             if (!isLast) {
               opt.selected = false;
+              opt.updateStatus();
             }
           });
         }
@@ -463,7 +477,7 @@ export default {
       name: Select.selector,
       styles:
         '.dr-select-container {\n' +
-        '  /*position: relative;*/\n' +
+        '  position: relative;\n' +
         '\n' +
         '}\n' +
         '.dr-select-options-container {\n' +
@@ -535,7 +549,7 @@ export default {
         '</details>\n' +
         '<select hidden="hidden" name="${@this@.name}$" disabled="${@this@.disabled ? \'disabled\' : null}$"  style="width: 1500px; height:500px"  multiple>\n' +
         '    <option dr-for-of="@this@.options" value="${#it#.value}$" selected="${#it#.selected ? \'selected\' : null}$">#it# ${#it#.value}$</option>\n' +
-        '</select',
+        '</select>',
       objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })
     });
   },

package/src/components/timer/Timer.ts

@@ -8,53 +8,19 @@ import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 export namespace Timer {
   export const selector = 'dr-timer';
   export type Attribute = {
-    timeSecond?: string;
+    value?: string;
+    interval?: number;
+    onCreated?: (timer: Timer) => void;
   }
-
-  // class RadioBase extends ComponentBase<Attribute> {
-  //   public hidden = true;
-  //
-  // }
-
-  // @Component({
-  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
-  //   styles: '',
-  //   selector: `${selector}.Checked`
-  // })
-  // export class RadioChecked extends RadioBase {
-  //   public name = 'Checked';
-  //
-  //   constructor() {
-  //     super({ onlyParentType: Radio });
-  //   }
-  // }
-  //
-  // @Component({
-  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
-  //   styles: '',
-  //   selector: `${selector}.UnChecked`
-  // })
-  // export class UnChecked extends RadioBase {
-  //   public name = 'unChecked';
-  //
-  //   constructor() {
-  //     super({ onlyParentType: Radio });
-  //   }
-  // }
-
-  // @Component({
-  //   template: '#innerHTML#',
-  //   selector: `${selector}`,
-  //   noStrip: true
-  // })
   export class Timer extends ComponentBase<Attribute> {
     private interval?: any;
-    private timeSecond?: number;
+    private value?: number;
 
 
     onInitRender(param: any, rawSet: RawSet) {
       super.onInitRender(param, rawSet);
-      console.log('---2', this.getElement()?.isConnected)
+      this.getAttribute('onCreated')?.(this);
+      // console.log('---2', this.getElement()?.isConnected)
       // const element = this.getElement();
       // if(element){
       //   (element as any).component = this;
@@ -62,23 +28,25 @@ export namespace Timer {
     }
 
     isRunning() {
-      return this.timeSecond !== undefined;
+      return this.value !== undefined;
     }
 
     start() {
-      const timeSecond = this.getAttribute('timeSecond');
-      if (timeSecond) {
-        this.timeSecond = parseInt(timeSecond);
+      const timems = this.getAttribute('value');
+      if (timems) {
+        this.value = parseInt(timems);
+        const intervalValue = this.getAttribute('interval') ?? 1000;
+        console.log('int', this.value, intervalValue);
         this.interval = setInterval(() => {
-          // console.log('--------->',this.timeSecond)
-          if (this.timeSecond) {
-            this.timeSecond--;
+          console.log('--------->',this.value)
+          if (this.value) {
+            this.value--;
           } else {
             clearInterval(this.interval);
-            this.timeSecond = undefined;
+            this.value = undefined;
             this.interval = undefined;
           }
-        }, 1000)
+        }, intervalValue)
       }
     }
 
@@ -87,7 +55,7 @@ export namespace Timer {
       if (this.interval) {
         clearInterval(this.interval);
         this.interval = undefined;
-        this.timeSecond = undefined;
+        this.value = undefined;
       }
     }
 
@@ -107,7 +75,7 @@ export namespace Timer {
 
 
 export default {
-  choose: (config?: DomRenderRunConfig) => {
+  timer: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Timer.selector}`,
       template: '#innerHTML#',

package/src/decorators/DomRenderNoProxy.ts

@@ -1,3 +1,5 @@
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+
 export const DomRenderNoProxyKey = 'DomRender:NoProxy'
 export const DomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
     // 클래스 데코레이터로 사용된 경우
@@ -26,5 +28,5 @@ export const getDomRenderNoProxy = (target: any, propertyKey?: string | symbol)
 }
 
 export const isDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
-  return getDomRenderNoProxy(target, propertyKey) === true;
+  return ValidUtils.isNullOrUndefined(target) || getDomRenderNoProxy(target, propertyKey) === true;
 }

package/src/lifecycle/OnRawSetRendered.ts

@@ -0,0 +1,15 @@
+import { RawSet, RenderResult } from '../rawsets/RawSet';
+
+export type OnRawSetRenderedOtherData = {
+  path?: string
+  renderResult?: RenderResult
+  //     rawSet?: RawSet
+}
+export interface OnRawSetRendered {
+// TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
+    onRawSetRendered (rawSet: RawSet,otherData: OnRawSetRenderedOtherData): Promise<void>;
+}
+
+export const isOnRawSetRendered= (obj: any): obj is OnRawSetRendered => {
+    return typeof obj?.onRawSetRendered === 'function';
+}

package/src/lifecycle/index.ts

@@ -9,4 +9,5 @@ export * from './OnCreatedThisChild';
 export * from './OnDestroyRender';
 export * from './OnInitRender';
 export * from './OnProxyDomRender';
+export * from './OnRawSetRendered';
 export * from './dr-this';

package/src/operators/DrTargetElement.ts

@@ -10,6 +10,7 @@ import {
   Source
 } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 
 declare global {
   interface Window {
@@ -96,6 +97,19 @@ export class DrTargetElement extends OperatorExecuter<void> {
         }
         // console.log('----------2', ElementUtils.toInnerHTML(targetFragment, {document: this.source.config.window.document}));
         const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
+        rr.forEach((it, index) => {
+
+          // const z = ElementUtils.toInnerHTML(it.dataSet.fragment, {document: this.source.config.window.document});
+          // console.log('-z--z('+index+')', z, it);
+          // it.point.start;
+          // // 새로운 comment element 추가
+          // const comment = this.source.config.window.document.createComment('새로 만든 comment element');
+          // it.point.start.parentNode?.insertBefore(comment, it.point.start.nextSibling);
+        })
+        // for (let rawSet of rr) {
+        //   await rawSet.render(this.source.obj, this.source.config)
+        // }
+        // console.log('cccccccccccccccccccccc', rr, typeof Window);
         if (targetElement.noStrip) {
           Array.from(targetFragment.childNodes || []).forEach(child => {
             documentFragment.firstElementChild?.appendChild(child);

package/src/operators/OperatorExecuter.ts

@@ -5,7 +5,6 @@ import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { Attrs } from '../rawsets/Attrs';
 import { DomRenderConfig } from '../configs/DomRenderConfig';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 
 export interface OperatorAround {
@@ -51,7 +50,7 @@ export abstract class OperatorExecuter<T = any> {
     let r = attrValue;
     if (r && this.startingExecute) {
       const optionalPath = ObjectUtils.Path.toOptionalChainPath(attrValue);
-      r = ScriptUtils.evaluate(` ${this.render.bindScript}; return ${optionalPath}`, Object.assign(this.source.obj, {__render: this.render}));
+      r = ObjectUtils.Script.evaluate(` ${this.render.bindScript}; return ${optionalPath}`, Object.assign(this.source.obj, {__render: this.render}));
     }
     if (this.source.operatorAround?.before) {
       r = this.source.operatorAround?.before(r, this);