@dooboostore/dom-render 1.0.108 → 1.0.110

package/src/components/radio/Radio.ts

@@ -2,24 +2,20 @@ import { ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { OnInitRender } from '../../lifecycle/OnInitRender';
-import { ComponentSet } from '../../components/ComponentSet';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
-
-
 export namespace Radio {
   export const selector = 'System:Radio';
   export type Attribute = {
     class?: string;
-  }
+  };
   export type LabelAttribute = {
     class?: string;
     name?: string;
     value?: string;
     checked?: boolean;
-    on_change_checked?: (checked: boolean, element: HTMLInputElement) => void
-  }
+    on_change_checked?: (checked: boolean, element: HTMLInputElement) => void;
+  };
 
   class RadioBase extends ComponentBase<Attribute> {
     public hidden = true;
@@ -29,7 +25,7 @@ export namespace Radio {
     public name = 'Checked';
 
     constructor() {
-      super({onlyParentType: Radio});
+      super({ onlyParentType: Radio });
     }
   }
 
@@ -37,7 +33,7 @@ export namespace Radio {
     public name = 'unChecked';
 
     constructor() {
-      super({onlyParentType: Radio});
+      super({ onlyParentType: Radio });
     }
   }
 
@@ -45,10 +41,11 @@ export namespace Radio {
     private checked = false;
     private inputElement?: HTMLInputElement;
 
-    change(checked?: boolean) { checked = checked ?? this.checked;
+    change(checked?: boolean) {
+      checked = checked ?? this.checked;
       this.checked = checked;
       this.setChildrenHidden(checked);
-      console.log('radio checked!!!!!!!', checked, this.checked, this.inputElement?.checked)
+      console.log('radio checked!!!!!!!', checked, this.checked, this.inputElement?.checked);
       if (this.getAttribute('on_change_checked')) {
         this.getAttribute('on_change_checked')?.(checked, this.inputElement!);
       }
@@ -76,39 +73,37 @@ export namespace Radio {
       super.onChangeAttrRender(name, val, other);
       if (this.inputElement && this.getAttribute('checked') !== this.checked) {
         this.inputElement.checked = !!this.getAttribute('checked');
-        console.log('----changeAttribute', this.getAttribute('checked'))
+        console.log('----changeAttribute', this.getAttribute('checked'));
         this.change(!!this.getAttribute('checked'));
       }
     }
-
   }
 }
 
-
-
 export default {
   radioChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}-checked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.Checked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.Checked(), config: config });
       }
-    })
+    });
   },
   radioUnChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}-unchecked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.UnChecked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.UnChecked(), config: config });
       }
-    })
+    });
   },
   radio: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}`,
-      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+      template:
+        '<label class="${@this@.getAttribute(\'class\')}$">\n' +
         '  <input\n' +
         '    name="${@this@.getAttribute(\'name\')}$"\n' +
         '    checked="${@this@.getAttribute(\'checked\')}$"\n' +
@@ -118,12 +113,12 @@ export default {
         '    type="radio"\n' +
         '\n' +
         '  />\n' +
-        '  ${@this@.getAttribute(\'checked\')}$\n' +
+        "  ${@this@.getAttribute('checked')}$\n" +
         '  #innerHTML#\n' +
         '</label>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.Radio(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/router/Route.ts

@@ -1,5 +1,4 @@
 import { attribute, ComponentBase } from '../ComponentBase';
-import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { DomRender } from '../../DomRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { RawSet } from '../../rawsets/RawSet';
@@ -7,17 +6,16 @@ import type { DomRenderConfig } from '../../configs/DomRenderConfig';
 import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 import { Subscription } from '@dooboostore/core/message/Subscription';
-import { If } from '../if/If';
 
 export namespace Route {
   export const selector = 'dr-route';
   export type Attribute<D> = {
     value?: null | string;
-  }
+  };
 
   abstract class CheckerBase<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     protected sw: boolean = false;
-    @attribute({name: 'value'})
+    @attribute({ name: 'value' })
     value?: string;
     @DomRenderNoProxy
     private inputDomRenderConfig?: DomRenderConfig;
@@ -28,8 +26,8 @@ export namespace Route {
       this.inputDomRenderConfig = domRenderConfig;
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       this.routerSubscription = this.inputDomRenderConfig?.router?.observable.subscribe(it => {
         if (this.value && this.inputDomRenderConfig) {
           this.sw = this.check(this.inputDomRenderConfig);
@@ -55,7 +53,6 @@ export namespace Route {
     abstract check(config?: DomRenderConfig): boolean;
   }
 
-
   export class Match<D> extends CheckerBase<D> {
     check(config?: DomRenderConfig): boolean {
       return !!config?.router?.test(this.value);
@@ -75,17 +72,17 @@ export default {
       name: `${Route.selector}-match`,
       template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Route.Match(config), config: config});
+        return DomRender.run({ rootObject: new Route.Match(config), config: config });
       }
-    })
+    });
   },
   regexp: (config?: DomRenderConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Route.selector}-regexp`,
       template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Route.Regexp(config), config: config});
+        return DomRender.run({ rootObject: new Route.Regexp(config), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/router/RouterOutlet.ts

@@ -1,11 +1,13 @@
-import { ComponentBase } from '../ComponentBase';
-import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { ChildrenSet, ComponentBase } from '../ComponentBase';
+import { DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { ComponentSet } from '../../components/ComponentSet';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
-import { ComponentRouterBase } from '../../components/ComponentRouterBase';
+import { ComponentRouterBase, isOnCreatedOutletDebounce } from '../../components/ComponentRouterBase';
+import { OnCreateRenderDataParams } from 'src/lifecycle';
+
 export namespace RouterOutlet {
   export const selector = 'dr-router-outlet';
   export type Attribute = {
@@ -13,6 +15,7 @@ export namespace RouterOutlet {
     if: boolean | null;
     createArguments: any[];
     onCreated?: (value: any) => void;
+    onCreatedDebounce?: (value: any) => void;
     onDestroyRender?: () => void;
   };
 
@@ -23,13 +26,17 @@ export namespace RouterOutlet {
 
     setValue(value: ComponentSet) {
       this.value = value;
+      // console.log('sssssssssss');
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       const c = this.getParentThis();
-      if (c instanceof ComponentRouterBase){
-        this.value = c.child
+      const userValue = this.getAttribute('value');
+      if (userValue) {
+        this.value = userValue;
+      } else if (c instanceof ComponentRouterBase) {
+        this.value = c.child;
       }
       // console.log('------',c);
     }
@@ -51,6 +58,20 @@ export namespace RouterOutlet {
       }
     }
 
+    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
+      super.onCreatedThisChild(child, data);
+      // console.log('outlet--oncreatedThisChild',child);
+    }
+
+    onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+      super.onCreatedThisChildDebounce(childrenSet);
+      let parentThis = this.getParentThis();
+      // console.log('---', parentThis);
+      if (isOnCreatedOutletDebounce(parentThis)) {
+        parentThis.onCreatedOutletDebounce(this.value?.obj);
+      }
+      this.getAttribute('onCreatedDebounce')?.(this.value?.obj);
+    }
     created(component: any) {
       component ??= this.value?.obj;
       this.getAttribute('onCreated')?.(component);
@@ -60,7 +81,7 @@ export namespace RouterOutlet {
 
 export default {
   // TODO: 왜 이놈만 webpack에서 순환참조 에러나는지모르겠다.. 왜 이놈만.. 그래서 이렇게 하긴함.
-  routerOutlet: (config?: DomRenderRunConfig, executer?: {run: (...data: any[])=>any}) => {
+  routerOutlet: (config?: DomRenderRunConfig, executer?: { run: (...data: any[]) => any }) => {
     return RawSet.createComponentTargetElement({
       name: RouterOutlet.selector,
       template:

package/src/components/select/Select.ts

@@ -1,7 +1,7 @@
 import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
-import { OnCreateRenderData, OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+import { OnCreateRenderData } from '../../lifecycle/OnCreateRenderData';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { OnDestroyRender } from '../../lifecycle/OnDestroyRender';
 import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
@@ -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-->
@@ -121,8 +122,8 @@ export namespace Select {
       super({onlyParentType: SelectBody});
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // console.log('-----', this.value, this.selected)
       // this.getElement()?.addEventListener('click', (e) => {
       //   e.stopPropagation();
@@ -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,22 +237,22 @@ 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));
         }
       }
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // this.getElement()?.addEventListener('click', (e) => {
       //   e.stopPropagation();
       //   this.getParentThis<Select>().toggle();
@@ -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();
             }
           });
         }
@@ -366,8 +380,8 @@ export namespace Select {
 
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // console.log('select onInitRender', this.multiple)
 
       if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
@@ -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/this/This.ts

@@ -5,6 +5,7 @@ import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { ComponentSet } from '../../components/ComponentSet';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+
 export namespace This {
   export const selector = 'dr-this';
   export type Attribute = {
@@ -13,15 +14,15 @@ export namespace This {
     createArguments: any[];
     onCreated?: (value: any) => void;
     onDestroyRender?: () => void;
-  }
+  };
 
   export class This extends ComponentBase<Attribute> implements OnInitRender {
-    private value?: ComponentSet
+    private value?: ComponentSet;
     private if?: boolean | null = null;
-    private createArguments?: any[]
+    private createArguments?: any[];
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
     }
 
     onDestroyRender(data: OnDestroyRenderParams) {
@@ -41,8 +42,8 @@ export namespace This {
       }
     }
 
-    created(component: any){
-      component??=this.value?.obj;
+    created(component: any) {
+      component ??= this.value?.obj;
       this.getAttribute('onCreated')?.(component);
     }
   }
@@ -52,11 +53,11 @@ export default {
   this: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: This.selector,
-      template: '<div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.created?.($component)">#innerHTML#</div>',
+      template:
+        '<div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.created?.($component)">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new This.This(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new This.This(...counstructorParam), config: config });
       }
-    })
+    });
   }
-}
-
+};

package/src/components/timer/Timer.ts

@@ -4,57 +4,21 @@ import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 
-
 export namespace Timer {
   export const selector = 'dr-timer';
   export type Attribute = {
-    timeSecond?: string;
-  }
-
-  // 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
-  // })
+    value?: string;
+    interval?: number;
+    onCreated?: (timer: Timer) => void;
+  };
   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)
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
+      this.getAttribute('onCreated')?.(this);
+      // console.log('---2', this.getElement()?.isConnected)
       // const element = this.getElement();
       // if(element){
       //   (element as any).component = this;
@@ -62,58 +26,58 @@ 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);
       }
     }
 
-
     stop() {
       if (this.interval) {
         clearInterval(this.interval);
         this.interval = undefined;
-        this.timeSecond = undefined;
+        this.value = undefined;
       }
     }
 
     onChangeAttrRender(name: string, val: any, other: OtherData) {
       super.onChangeAttrRender(name, val, other);
-      console.log('-----', name, val, this.getElement())
+      console.log('-----', name, val, this.getElement());
     }
 
     onDestroyRender(data: OnDestroyRenderParams) {
       super.onDestroyRender(data);
-      if (this.interval){
+      if (this.interval) {
         clearInterval(this.interval);
       }
     }
   }
 }
 
-
 export default {
-  choose: (config?: DomRenderRunConfig) => {
+  timer: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Timer.selector}`,
       template: '#innerHTML#',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Timer.Timer(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Timer.Timer(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};