@dooboostore/dom-render 1.0.110 → 1.0.112

package/src/components/ComponentBase.ts

@@ -17,6 +17,8 @@ import { Subject } from '@dooboostore/core/message/Subject';
 import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
 import type { Subscription } from '@dooboostore/core/message/Subscription';
 import { OnRawSetRendered, OnRawSetRenderedOtherData } from "../lifecycle/OnRawSetRendered";
+import {bufferTime} from "@dooboostore/core/message/operators/bufferTime";
+import {OnChildRawSetRendered} from "../lifecycle/OnChildRawSetRendered";
 
 
 export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
@@ -131,11 +133,15 @@ export function event(options: { query: string, name: string, onDestroy?: (compo
 }
 
 
-export type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>, createChildrenDebounce?: number };
+export type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>,
+  createChildrenDebounce?: number,
+  onRawSetRenderedOtherDataDebounce?: number
+  onChildRawSetRenderedOtherDataDebounce?: number
+};
 
 export type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };
 
-export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {
+export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered, OnChildRawSetRendered {
   @DomRenderNoProxy
   private _rawSet?: RawSet;
   @DomRenderNoProxy
@@ -157,6 +163,14 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   private childrenSetSubject = new Subject<ChildrenSet[]>();
   @DomRenderNoProxy
   private createChildrenDebounceSubscription?: Subscription | undefined;
+  @DomRenderNoProxy
+  private onRawSetRenderedOtherDataSubject = new Subject<OnRawSetRenderedOtherData>();
+  @DomRenderNoProxy
+  private onChildRawSetRenderedOtherDataSubject = new Subject<void>();
+  @DomRenderNoProxy
+  private onRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;
+  @DomRenderNoProxy
+  private onChildRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;
 
   constructor(private _config?: C) {
   }
@@ -374,6 +388,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
+    this.onRawSetRenderedOtherDataSubject.next(otherData);
+    // this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(debounceTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)).subscribe(it => {
+    //   this.onRawSetRenderedDebounce(it);
+    // });
+
     const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);
     if (queries) {
       queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {
@@ -388,6 +407,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
       });
     }
   }
+
+  async onChildRawSetRendered(): Promise<void> {
+    this.onChildRawSetRenderedOtherDataSubject.next();
+  }
+
   /**
    * Manually refresh all query and event decorators
    * Useful when DOM elements are dynamically added/removed and you want to update bindings
@@ -517,7 +541,20 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
       }
     }
   }
-
+getAttributeNames(attribute = this._attribute): string[] {
+  const target = attribute as any;
+  if (!target) return [];
+  const keys = Object.keys(target);
+  const names = new Set<string>();
+  for (const k of keys) {
+    names.add(k);
+    // names.add(ConvertUtils.camelToSnakeCase(k));
+    // names.add(ConvertUtils.snakeToCamelCase(k));
+    // names.add(k.toLowerCase());
+    // names.add(k.toUpperCase());
+  }
+  return Array.from(names);
+}
   getAttribute<K extends keyof T>(name: K, attribute = this._attribute): T[K] | null {
     const target = attribute as any;
     if (!target) {
@@ -624,6 +661,10 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+  }
+  onRawSetRenderedDebounce(childrenSet: OnRawSetRenderedOtherData[]) {
+  }
+  onChildRawSetRenderedDebounce(){
 
   }
 
@@ -641,7 +682,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   onChangeAttrRender(name: string, value: any, other: OtherData): void {
-    if (other.rawSet) {
+    if (other?.rawSet) {
       this.setRawSet(other.rawSet);
     }
 
@@ -664,9 +705,22 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   async onInitRender(param: any, rawSet: RawSet) {
-    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {
+    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(
+      debounceTime(this.componentConfig?.createChildrenDebounce??0)
+    ).subscribe(it => {
+      // console.log('call onCreatedThisChildDebounce', it);
       this.onCreatedThisChildDebounce(it);
     });
+    this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(
+      bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)
+    ).subscribe(it => {
+      this.onRawSetRenderedDebounce(it);
+    });
+    this.onChildRawSetRenderedOtherDataSubjectSubscription = this.onChildRawSetRenderedOtherDataSubject.pipe(
+      debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??0)
+    ).subscribe(it => {
+      this.onChildRawSetRenderedDebounce();
+    });
     if (rawSet) {
       this.setRawSet(rawSet);
 
@@ -699,6 +753,8 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
     this._cleanupEventBindings();
     this._clearAllRefreshTimers();
     this.createChildrenDebounceSubscription?.unsubscribe();
+    this.onRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
+    this.onChildRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
   }
 
 }

package/src/components/a/A.ts

@@ -1,6 +1,7 @@
 import { attribute, ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
+import {OtherData} from "../../lifecycle";
 
 export namespace A {
   export const selector = 'dr-a';
@@ -23,6 +24,7 @@ export namespace A {
     style?: string | null;
     class?: string | null;
     click?: ((data: ClickCallbackData) => void) | null;
+    onInit?: (e: HTMLAnchorElement) => void;
     replace?: boolean | null;
     scrollToTop?: boolean | null;
   };
@@ -32,9 +34,11 @@ export namespace A {
     @attribute({ converter: v => v || null }) target: string | null = null;
     @attribute({ converter: v => v || null }) style: string | null = null;
     @attribute({ name: 'class', converter: v => v || null }) classAttr: string | null = null;
+    @attribute({ name: 'dr-class', converter: v => v || null }) drClass: string | null = null;
     @attribute() click?: ((data: ClickCallbackData) => void) | null = null;
     @attribute({ converter: v => v !== null && String(v) !== 'false' }) replace = false;
     @attribute({ converter: v => v !== null && String(v) !== 'false' }) scrollToTop = true;
+    private element?: HTMLElement;
 
     onClick(event: MouseEvent) {
       if (this.click) {
@@ -59,6 +63,25 @@ export namespace A {
         this.domRenderConfig?.router?.go({path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });
       }
     }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.element && name.startsWith('attribute-')) {
+        this.element.setAttribute(name, value);
+      }
+    }
+
+    onAElementInit($element: HTMLElement) {
+      this.element = $element;
+      this.getAttribute('onInit')?.($element as HTMLAnchorElement);
+      this.getAttributeNames()
+        .filter(it => it.startsWith('attribute-'))
+        .forEach(it => {
+          const attrName = it.replace(/^attribute-/, '');
+          const attrValue = this.getAttribute(it as any);
+          this.element.setAttribute(attrName, attrValue);
+        });
+    }
   }
 }
 
@@ -72,6 +95,8 @@ export default {
         style="\${@this@.style}$"
         class="\${@this@.classAttr}$"
         dr-event-click="@this@.onClick($event)"
+        dr-class="\${@this@.drClass}$"
+        dr-on-init="@this@.onAElementInit($element)"
       >#innerHTML#</a>`,
       objFactory: (e, o, r2, constructorParam) => {
         return DomRender.run({ rootObject: new A.A(...constructorParam), config });

package/src/components/appender/Appender.ts

@@ -1,4 +1,4 @@
-import { ComponentBase } from '../ComponentBase';
+import {attribute, ComponentBase} from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
@@ -25,7 +25,7 @@ export namespace Appender {
   // })
   export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     private value?:DomRenderAppender
-
+    @attribute({ name: 'dr-option-item-variable-name', converter: v => v || null }) drOptionItemVariableName: string | null = null;
     // onCreateRender(...param: any) {
     //   console.log('--onCreateRender')
     // }
@@ -70,7 +70,7 @@ export default {
   appender: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: Appender.selector,
-      template: '<div dr-appender="@this@.value" dr-option-strip="true">#innerHTML#</div>',
+      template: '<div dr-appender="@this@.value" dr-option-item-variable-name="${@this@.drOptionItemVariableName}$" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e,o,r2, counstructorParam) => {
         return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});
       }

package/src/components/details/Details.ts

@@ -16,6 +16,8 @@ export namespace Details {
     class?: string;
     toggle_form_reset?: boolean;
     disableOtherClickClose?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
     toggle?: (open: boolean) => void;
   };
   export type BodyAttribute = {
@@ -101,6 +103,11 @@ export namespace Details {
       if (toggleAttribute) {
         toggleAttribute?.(element.open);
       }
+      if (element.open) {
+        this.getAttribute('onOpen')?.();
+      } else {
+        this.getAttribute('onClose')?.();
+      }
     }
     async onInitRender(param: any, rawSet: RawSet) {
       await super.onInitRender(param, rawSet);

package/src/components/forOf/ForOf.ts

@@ -4,7 +4,7 @@ import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 
 export namespace ForOf {
-  export const selector = 'System:ForOf';
+  export const selector = 'dr-for-of';
   export type Attribute<D> = {
     value: D;
   };
@@ -29,7 +29,7 @@ export default {
   forOf: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: ForOf.selector,
-      template: '<div dr-for-of="@this@.data" dr-option-strip="true">#innerHTML#</div>',
+      template: '<div dr-for-of="@this@.value" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
         return DomRender.run({ rootObject: new ForOf.ForOf(...counstructorParam), config: config });
       }

package/src/components/if/If.ts

@@ -7,6 +7,7 @@ import { DomRenderConfig } from '../../configs/DomRenderConfig';
 
 export namespace If {
   export const selector = 'dr-if';
+
   // export type AppenderInterface<D> = {
   //   push(...data:D[]):void;
   //   set(key: string, ...v:D[]):void
@@ -19,7 +20,6 @@ export namespace If {
 
   export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     private sw: boolean = false;
-
     async onInitRender(param: any, rawSet: RawSet) {
       super.onInitRender(param, rawSet);
     }
@@ -50,9 +50,10 @@ export default {
     //   });
     // }
 
+
     return RawSet.createComponentTargetElement({
       name: If.selector,
-      template: '<div dr-if="@this@.sw" >#innerHTML#</div>',
+      template: '<div dr-if="@this@.sw" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
         return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });
       }

package/src/components/index.ts

@@ -1,3 +1,4 @@
+
 export * from './ComponentBase';
 export * from './ComponentRouterBase';
 export * from './ComponentSet';
@@ -30,6 +31,7 @@ import Details from './details/Details';
 import Input from './input/Input';
 import Route from './router/Route';
 import A from './a/A';
+import ForOf from './forOf/ForOf';
 
 export const drComponent = {
   ...If,
@@ -46,4 +48,5 @@ export const drComponent = {
   ...Route,
   ...RouterOutlet,
   ...A,
+...ForOf
 }

package/src/components/router/RouterOutlet.ts

@@ -1,17 +1,17 @@
-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, isOnCreatedOutletDebounce } from '../../components/ComponentRouterBase';
-import { OnCreateRenderDataParams } from 'src/lifecycle';
+import {ChildrenSet, ComponentBase} from '../ComponentBase';
+import {DomRenderRunConfig} from '../../DomRender';
+import {RawSet} from '../../rawsets/RawSet';
+import {isOnChangeAttrRender, OtherData} from '../../lifecycle/OnChangeAttrRender';
+import {OnInitRender} from '../../lifecycle/OnInitRender';
+import {ComponentSet} from '../../components/ComponentSet';
+import {OnDestroyRenderParams} from '../../lifecycle/OnDestroyRender';
+import {ComponentRouterBase, isOnCreatedOutletDebounce} from '../../components/ComponentRouterBase';
+import {OnCreateRenderDataParams} from '../../lifecycle';
 
 export namespace RouterOutlet {
   export const selector = 'dr-router-outlet';
   export type Attribute = {
-    value: ComponentSet;
+    value: ComponentSet | string;
     if: boolean | null;
     createArguments: any[];
     onCreated?: (value: any) => void;
@@ -23,20 +23,32 @@ export namespace RouterOutlet {
     private value?: ComponentSet;
     private if?: boolean | null = null;
     private createArguments?: any[];
+    private childObject?: any;
+    private childRawSet?: RawSet;
+    private sw = false;
 
     setValue(value: ComponentSet) {
-      this.value = value;
+      this.sw = false;
+      setTimeout(() => {
+        this.value = value;
+      }, 0)
+
+      setTimeout(() => {
+        this.sw = true;
+      }, 0)
       // console.log('sssssssssss');
     }
 
     async onInitRender(param: any, rawSet: RawSet) {
       await super.onInitRender(param, rawSet);
-      const c = this.getParentThis();
+      const c = this.getParentThis<any>();
       const userValue = this.getAttribute('value');
-      if (userValue) {
-        this.value = userValue;
-      } else if (c instanceof ComponentRouterBase) {
-        this.value = c.child;
+      if (typeof userValue === 'string') {
+        this.setValue(c[userValue]);
+      } else if (userValue instanceof ComponentSet) {
+        this.setValue(userValue);
+      } else if (!userValue && c instanceof ComponentRouterBase) {
+        this.setValue(c.child);
       }
       // console.log('------',c);
     }
@@ -47,8 +59,9 @@ export namespace RouterOutlet {
 
     onChangeAttrRender(name: string, value: any, other: OtherData) {
       super.onChangeAttrRender(name, value, other);
+      // console.log('--------------', name, value);
       if (this.equalsAttributeName(name, 'value')) {
-        this.value = value;
+        this.setValue(value);
       }
       if (this.equalsAttributeName(name, 'if')) {
         this.if = value;
@@ -56,6 +69,10 @@ export namespace RouterOutlet {
       if (this.equalsAttributeName(name, 'createArguments')) {
         this.createArguments = value;
       }
+
+      if (this.childObject && this.childRawSet && isOnChangeAttrRender(this.childObject)) {
+        this.childObject.onChangeAttrRender(name, value, {rawSet: this.childRawSet});
+      }
     }
 
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
@@ -72,9 +89,26 @@ export namespace RouterOutlet {
       }
       this.getAttribute('onCreatedDebounce')?.(this.value?.obj);
     }
-    created(component: any) {
-      component ??= this.value?.obj;
-      this.getAttribute('onCreated')?.(component);
+
+
+    onCreateDrThis($component: any, $rawSet: RawSet) {
+      this.childObject = $component ??= this.value?.obj;
+      this.childRawSet = $rawSet;
+      if ($component) {
+        this.getAttribute('onCreated')?.($component);
+        // console.log('21222');
+        if (isOnChangeAttrRender($component)) {
+          this.getAttributeNames()
+            .filter(it => it.startsWith('attribute-'))
+            .forEach(it => {
+              const attrName = it.replace(/^attribute-/, '');
+              const attrValue = this.getAttribute(it as any);
+              $rawSet.dataSet.render.attribute ??= {};
+              $rawSet.dataSet.render.attribute[attrName] = attrValue;
+              $component.onChangeAttrRender(attrName, attrValue, {rawSet: $rawSet});
+            });
+        }
+      }
     }
   }
 }
@@ -85,9 +119,13 @@ export default {
     return RawSet.createComponentTargetElement({
       name: RouterOutlet.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>',
+        `
+        <dr-if value="\${@this@.sw}$">
+            <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@?.onCreateDrThis?.($component, $rawSet)">#innerHTML#</div>
+        </dr-if>
+        `,
       objFactory: (e, o, r2, counstructorParam) => {
-        return executer?.run({ rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config });
+        return executer?.run({rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config});
       }
     });
   }

package/src/components/select/Select.ts

@@ -1,17 +1,17 @@
-import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';
-import { DomRender, DomRenderRunConfig } from '../../DomRender';
-import { RawSet } from '../../rawsets/RawSet';
-import { OnCreateRenderData } from '../../lifecycle/OnCreateRenderData';
-import { OnInitRender } from '../../lifecycle/OnInitRender';
-import { OnDestroyRender } from '../../lifecycle/OnDestroyRender';
-import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
-import { type Subscription } from '@dooboostore/core/message/Subscription';
-import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';
-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';
+import {attribute, ChildrenSet, ComponentBase} from '../ComponentBase';
+import {DomRender, DomRenderRunConfig} from '../../DomRender';
+import {RawSet} from '../../rawsets/RawSet';
+import {OnCreateRenderData} from '../../lifecycle/OnCreateRenderData';
+import {OnInitRender} from '../../lifecycle/OnInitRender';
+import {OnDestroyRender} from '../../lifecycle/OnDestroyRender';
+import {EventUtils} from '@dooboostore/core-web/event/EventUtils';
+import {type Subscription} from '@dooboostore/core/message/Subscription';
+import {ValidUtils} from '@dooboostore/core-web/valid/ValidUtils';
+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 '../../lifecycle';
 
 /** 사용법
  <dr-select class="card-select-container" changeSelected="${(data) => @this@.changeSelected(data)}$">  <!-- multiple attribute optional-->
@@ -150,7 +150,7 @@ export namespace Select {
     toggleSelected(event: Event) {
       // console.log('isMultiple', this.isMultiple())
       if (!this.disabled) {
-        this.selected = this.isMultiple()? !this.selected : true;
+        this.selected = this.isMultiple() ? !this.selected : true;
         // this.selected =  !this.selected;
         this.updateStatus();
         this.getParentThis<SelectBody>().changeOptionState(this);
@@ -215,7 +215,7 @@ 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;
@@ -290,18 +290,18 @@ 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});
     }
 
     async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
       await super.onRawSetRendered(rawSet, otherData);
-    // }
-    // onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
-    //   super.onCreatedThisChildDebounce(childrenSet);
+      // }
+      // onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+      //   super.onCreatedThisChildDebounce(childrenSet);
       this.changeOptionState();
     }
 
@@ -337,7 +337,8 @@ export namespace Select {
   // --- Main Select Component ---
   export type SelectAttribute = {
     multiple?: boolean | null; class?: string;
-    changeSelected?: (value: (string | null)[]) => void;
+    onchange?: (value?: string) => void;
+    onchangeValues?: (value: string[]) => void;
     name?: string;
     float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     disableOtherClickClose?: boolean;
@@ -354,7 +355,7 @@ export namespace Select {
     // public isOpen = false;
     public selectedValues: (string | null)[] = [];
     public selectedOptions: Option[] = [];
-    public value: string | (string | null)[] | null | undefined;
+    private value: string | (string | null)[] | null | undefined;
 
     @DomRenderNoProxy private element?: HTMLDetailsElement;
     @DomRenderNoProxy private documentClickSubscription?: Subscription;
@@ -368,6 +369,14 @@ export namespace Select {
       // console.log('----Select constructor')
     }
 
+    // get value(): string | (string | null)[] | null | undefined {
+    //   return this._value;
+    // }
+    // set value(val: string | (string | null)[] | null | undefined) {
+    //   console.log('value set', val)
+    //   this._value = val;
+    // }
+
     get optionComponents(): Option[] {
       return this.getChildren(Option);
     }
@@ -431,13 +440,17 @@ export namespace Select {
       this.options = options;
 
       const values = this.options.filter(it => it.selected && !it.disabled).map(it => it.value)
-      this.getAttribute('changeSelected')?.(values);
       summaries?.forEach(it => {
         it.setDisabled(this.disabled);
         if (!this.disabled) {
           it.setOptions(options);
         }
-      })
+      });
+      this.selectedValues = values;
+      this.selectedOptions = this.options.filter(it => it.selected && !it.disabled);
+      this.value = this.selectedValues[0];
+      this.getAttribute('onchange')?.(this.value);
+      this.getAttribute('onchangeValues')?.(values);
     }
 
     onInitDetailsElement(detailsElement: HTMLDetailsElement) {
@@ -456,6 +469,32 @@ export namespace Select {
       this.windowBlurSubscription?.unsubscribe();
     }
 
+    @attribute('value')
+    setValue(value: string | null | undefined) {
+      this.value = value;
+      if (this.options) {
+
+        // clear
+        this.options.forEach(it=> {
+          it.selected = false;
+          it.updateStatus();
+        });
+        for (let option of this.options) {
+          if (option.value === value) {
+            option.selected = true;
+            if (!this.multiple) {
+              // 하나만 선택
+              break;
+            }
+          } else {
+            option.selected = false;
+          }
+          option.updateStatus()
+        }
+      }
+      console.log('value set', value)
+    }
+
     test() {
       console.log('tttttttt')
     }
@@ -467,7 +506,7 @@ const stateComponentFactory = (name: string, type: any) => {
     RawSet.createComponentTargetElement({
       name,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>\n',
-      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new type(), config })
+      objFactory: (e, o, r2, constructorParam) => DomRender.run({rootObject: new type(), config})
     });
 };
 
@@ -550,7 +589,7 @@ export default {
         '<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>',
-      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })
+      objFactory: (e, o, r2, constructorParam) => DomRender.run({rootObject: new Select.Select(config), config})
     });
   },
   selectSummary: (config?: DomRenderRunConfig) => {
@@ -563,7 +602,7 @@ export default {
         '>\n' +
         '#innerHTML#\n' +
         '</summary>',
-      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Summary(), config })
+      objFactory: (e, o, r2, constructorParam) => DomRender.run({rootObject: new Select.Summary(), config})
     });
   },
   selectSummaryPlaceholder: stateComponentFactory(`${Select.selector}-summary-placeholder`, Select.SummaryPlaceholder),
@@ -585,7 +624,7 @@ export default {
       name: `${Select.selector}-option`,
       template:
         '<a dr-class="{[@this@.classAttr]: @this@.classAttr}" dr-event-click="@this@.toggleSelected($event)">#innerHTML#</a>\n',
-      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Option(), config })
+      objFactory: (e, o, r2, constructorParam) => DomRender.run({rootObject: new Select.Option(), config})
     });
   },
   selectOptionSelected: stateComponentFactory(`${Select.selector}-option-selected`, Select.OptionSelected),