@dooboostore/dom-render 1.0.107 → 1.0.108

package/src/components/forOf/ForOf.ts

@@ -0,0 +1,41 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+
+
+export namespace ForOf {
+  export const selector = 'System:ForOf';
+  export type Attribute<D> = {
+    value: D;
+  }
+
+  // @Component({
+  //   template: '<div dr-for-of="@this@.data" dr-option-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}`
+  // })
+  export class ForOf<D> extends ComponentBase<Attribute<D>> {
+    private value?: D;
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.equalsAttributeName(name, 'value')) {
+        this.value = value;
+      }
+    }
+
+  }
+}
+
+
+export default {
+  forOf: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: ForOf.selector,
+      template: '<div dr-for-of="@this@.data" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new ForOf.ForOf(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/forOf/index.ts

@@ -0,0 +1 @@
+export * from './ForOf';

package/src/components/if/If.ts

@@ -0,0 +1,63 @@
+import { ComponentBase } from '../ComponentBase';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { OnInitRender } from '../../lifecycle/OnInitRender';
+import { RawSet } from '../../rawsets/RawSet';
+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
+  //   delete(key: string):void
+  //   clear():void
+  // }
+  export type Attribute<D> = {
+    value?: null | boolean;
+  }
+
+  export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
+    private sw: boolean = false;
+
+    onInitRender(param: any, rawSet: RawSet) {
+      super.onInitRender(param, rawSet);
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+
+      if (this.equalsAttributeName(name, 'value')) {
+        // console.log('------',this,name, value)
+        this.sw = value;
+      }
+    }
+  }
+}
+
+// const iif = DomRender.createComponent({
+//   type: If.If,
+//   tagName: If.selector,
+//   template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>' });
+export default {
+  if: (config?: DomRenderConfig) => {
+
+
+    // if (!customElements.get(If.selector)) {
+    //   customElements.define(If.selector, class extends HTMLElement {
+    //     constructor() {
+    //       super();
+    //       this.hidden = true;
+    //     }
+    //   });
+    // }
+
+    return RawSet.createComponentTargetElement({
+      name: If.selector,
+      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/if/index.ts

@@ -0,0 +1 @@
+export * from './If';

package/src/components/index.ts

@@ -0,0 +1,49 @@
+export * from './ComponentBase';
+export * from './ComponentRouterBase';
+export * from './ComponentSet';
+export * from './a';
+export * from './appender';
+export * from './checkbox';
+export * from './choose';
+export * from './details';
+export * from './forOf';
+export * from './if';
+export * from './input';
+export * from './promise';
+export * from './radio';
+export * from './router';
+export * from './select';
+export * from './this';
+export * from './timer';
+
+import If from './if/If';
+import This from './this/This';
+import Appender from './appender/Appender';
+import PromiseSwitch from './promise/PromiseSwitch';
+import Choose from './choose/Choose';
+import CheckBox from './checkbox/CheckBox';
+import Radio from './radio/Radio';
+import RouterOutlet from './router/RouterOutlet';
+import Select from './select/Select';
+import Timer from './timer/Timer';
+import Details from './details/Details';
+import Input from './input/Input';
+import Route from './router/Route';
+import A from './a/A';
+
+export const drComponent = {
+  ...If,
+  ...This,
+  ...Appender,
+  ...PromiseSwitch,
+  ...Choose,
+  ...CheckBox,
+  ...Radio,
+  ...Select,
+  ...Timer,
+  ...Details,
+  ...Input,
+  ...Route,
+  ...RouterOutlet,
+  ...A,
+}

package/src/components/input/Input.ts

@@ -0,0 +1,125 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRender } from '../../lifecycle/OnCreateRender';
+import { OnDestroyRender, OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+import { Subscription } from '@dooboostore/core/message/Subscription';
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import { map } from '@dooboostore/core/message/operators/map';
+import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
+import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
+import { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';
+
+
+export namespace Input {
+  export const selector = `dr-input`;
+  export type Attribute = {
+    name?: string;
+    type?: string;
+    id?: string;
+    class?: string;
+    debounceTime?: number;
+    distinct?: boolean;
+    input?: (value: string, element: Element) => void
+
+  }
+
+  export class Base extends ComponentBase<any> {
+
+  }
+
+  // @Component({
+  //   selector: `${selector}`,
+  //   template,
+  //   styles,
+  // })
+  export class Input extends Base implements OnCreateRender, OnDestroyRender {
+    private element?: HTMLInputElement;
+    private inputSubscription?: Subscription;
+    private resetSubscripton?: Subscription;
+
+    onCreateRender(...param: any[]): void {
+    }
+
+
+    onInitRender(param: any, rawSet: RawSet) {
+      super.onInitRender(param, rawSet);
+      // console.log('dr-input, rawSet', rawSet)
+      const inputElement = this.element;
+      const debounceTimeAttribute = this.getAttribute('debounceTime');
+      const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
+      const distinct = ValidUtils.isNotNullUndefined(this.getAttribute('distinct'));
+
+      if (inputElement) {
+        const makeDeboundceDistinctUtilChanged = () => {
+          // let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');
+
+          let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(
+            map((event: Event) => {
+              const target = event.target;
+              if (target instanceof HTMLInputElement) {
+                return target.value.trim();
+              }
+              console.warn('Input event target is not an HTMLInputElement:', target);
+              return '';
+            })
+          );
+
+          if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
+            result$ = result$.pipe(debounceTime(debounceTimeValue));
+          }
+          if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
+            result$ = result$.pipe(distinctUntilChanged());
+          }
+          return result$;
+        };
+        this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
+          // console.log('change?????????????', it);
+          this.getAttribute('input')?.(it, inputElement);
+        });
+
+        if (inputElement.form) {
+          this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, 'reset').subscribe(it => {
+            // console.log('rrrraaa?,', this.inputSubscription, it)
+            this.inputSubscription?.unsubscribe();
+            this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
+              // console.log('rrrr?')
+              this.getAttribute('input')?.(it, inputElement);
+            });
+          })
+        }
+      }
+
+
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      // console.log('-------->',name, value)
+      if (name === 'value') {
+        // console.log('changeAttribu', name, value)
+        // this.wow = {value: value};
+        // this.name = value;
+      }
+    }
+
+    onDestroyRender(metaData?: OnDestroyRenderParams): void {
+      this.resetSubscripton?.unsubscribe();
+      this.inputSubscription?.unsubscribe();
+    }
+
+  }
+}
+
+export default {
+  input: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Input.selector}`,
+      template: '<Input type="${@this@.getAttribute(\'type\')}$" class="${@this@.getAttribute(\'class\')}$" id="${@this@.getAttribute(\'id\')}$" name="${@this@.getAttribute(\'name\')}$" dr-on-init="@this@.element=$element" >#innerHTML#',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Input.Input(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export * from './Input';

package/src/components/promise/PromiseSwitch.ts

@@ -0,0 +1,232 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+
+
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import { Promises  } from '@dooboostore/core/promise/Promises';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+
+export namespace PromiseSwitch {
+  export const selector = 'dr-promise-switch';
+  export type ChangeParams<T> = { status: 'pending' } | { status: 'finally' } | { status: 'fulfilled', data: T } | { status: 'rejected', data: any };
+  export type Attribute = {
+    // trigger?: boolean;
+    data: Promise<any> | (() => Promise<any>);
+    change?: <T>(data: ChangeParams<T>) => void;
+  }
+
+  class ChildBase<T = any> extends ComponentBase<T> {
+    public hidden = true;
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}.Default`
+  // })
+  export class Default extends ChildBase {
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}.Pending`
+  //   // selector: `System-PromiseSwitch.Pending`
+  // })
+  export class Pending extends ChildBase<{ defaultView?: null }> {
+    // onChangeAttrRender(name: string, value: any, other: OtherData) {
+    //   super.onChangeAttrRender(name, value, other);
+    //   if (this.equalsAttributeName(name, 'defaultView')) {
+    //     // console.log('--------------', value)
+    //     if (value !== null) {
+    //       this.hidden = false;
+    //     } else {
+    //       this.hidden = true;
+    //     }
+    //     // console.log('--------------', this.hidden)
+    //   }
+    // }
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}.Fulfilled`
+  // })
+  export class Fulfilled<T = any> extends ChildBase {
+    private data?: T;
+
+    setData(data: T) {
+      this.data = data;
+    }
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}.Rejected`
+  // })
+  export class Rejected<T = any> extends ChildBase {
+    private data?: T;
+
+    setData(data: T) {
+      this.data = data;
+    }
+  }
+
+
+  /*
+      <dr-promise-switch data="${@this@.pickWorldPromise}$">
+        ${@nearThis@.promiseState.status}$
+        <dr-promise-switch-default>
+            <button class="random-world-button" dr-event-click="@this@.pickWorld()">
+                <i class="fa-solid fa-dice"></i>
+            </button>
+        </dr-promise-switch-default>
+        <dr-promise-switch-pending>
+            <button class="random-world-button disabled spin" >
+                <i class="fa-solid fa-dice"></i>
+            </button>
+        </dr-promise-switch-pending>
+    </dr-promise-switch>
+   */
+  // @Component({
+  //   template: '#innerHTML#',
+  //   selector: `${selector}`
+  // })
+  export class PromiseSwitch extends ComponentBase<Attribute> {
+    // private promise?:  {
+    //   state: 'reject' | 'resolve',
+    //
+    // }
+    private promiseState?: Promises.Result.PromiseState<any, unknown>;
+    private status?: Promises.Result.PromiseState<any, unknown>["status"];
+
+    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
+      super.onCreatedThisChild(child, data);
+      this.childStateChange();
+    }
+
+    childStateChange() {
+      const defaults = this.getChildren(Default);
+      const pendings = this.getChildren(Pending);
+      const fulfilleds = this.getChildren(Fulfilled);
+      const rejecteds = this.getChildren(Rejected);
+      const full = [...fulfilleds, ...rejecteds, ...pendings, ...defaults]
+      // console.log('----!!!!!!-------', this.promiseState, full)
+      if (this.promiseState === undefined) {
+        this.status = undefined;
+        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        defaults.filter(it => it.hidden).forEach(it => it.hidden = false);
+        pendings.filter(it => it.getAttribute('defaultView') && it.hidden).forEach(it => it.hidden = false);
+      } else if (this.promiseState.status === 'pending') {
+        this.status = 'pending';
+        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        pendings.filter(it => it.hidden).forEach(it => it.hidden = false);
+      } else if (this.promiseState.status === 'fulfilled') {
+        this.status = 'fulfilled';
+        const value = this.promiseState.value;
+        // console.log('-----------fulfilled promises', value);
+        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        fulfilleds.forEach(it => {
+          it.setData(value)
+        })
+        fulfilleds.filter(it => it.hidden).forEach(it => it.hidden = false);
+      } else if (this.promiseState.status === 'rejected') {
+        this.status = 'rejected';
+        const value = this.promiseState.reason;
+        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        rejecteds.forEach(it => {
+          it.setData(value)
+        })
+        rejecteds.filter(it => it.hidden).forEach(it => it.hidden = false);
+      }
+      return this.status;
+      // console.log('----!!!!!!-end------', this.promiseState, full.map(it=>it.hidden))
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      // console.log('-----------changer promises', name, value, this.getChildren(Default));
+      if (this.equalsAttributeName(name, 'data') && value) {
+        // this.childStateChange();
+        this.promiseState = undefined;
+        this.status = undefined;
+        this.promiseState = Promises.Result.wrap(typeof value === 'function' ? value() : value as Promise<any>);
+        this.getAttribute('change')?.({status: 'pending'});
+        this.childStateChange();
+        // console.log('----?', this.promiseState)
+        this.promiseState.then(data => {
+          // console.log('------------then', data);
+          this.childStateChange();
+          this.getAttribute('change')?.({status: 'fulfilled', data: data});
+          return data;
+        }).catch((e) => {
+          // console.log('catch', e)
+          this.childStateChange();
+          this.getAttribute('change')?.({status: 'rejected', data: e});
+          throw e;
+        }).finally(() => {
+          // console.log('-------------finally--------rrrrrrrrrrr', this.promiseState)
+          // this.childStateChange();
+          this.getAttribute('change')?.({status: 'finally'});
+        })
+        // await this.promiseState;
+
+
+        // console.log('---------------------rrrrrrrrrrr', this.promiseState)
+      } else if(this.equalsAttributeName(name, 'data') && ValidUtils.isNullOrUndefined(value)) {
+        this.promiseState = undefined;
+        this.childStateChange();
+      }
+    }
+  }
+}
+
+
+export default {
+  promiseDefault: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${PromiseSwitch.selector}-default`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new PromiseSwitch.Default(...counstructorParam), config: config});
+      }
+    })
+  },
+  promisePending: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${PromiseSwitch.selector}-pending`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new PromiseSwitch.Pending(...counstructorParam), config: config});
+      }
+    })
+  },
+  promiseFulfilled: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${PromiseSwitch.selector}-fulfilled`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new PromiseSwitch.Fulfilled(...counstructorParam), config: config});
+      }
+    })
+  },
+  promiseRejected: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${PromiseSwitch.selector}-rejected`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new PromiseSwitch.Rejected(...counstructorParam), config: config});
+      }
+    })
+  },
+  promiseSwitch: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${PromiseSwitch.selector}`,
+      template: '#innerHTML#',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new PromiseSwitch.PromiseSwitch(...counstructorParam), config: config});
+      }
+    })
+  },
+
+}

package/src/components/promise/index.ts

@@ -0,0 +1 @@
+export * from './PromiseSwitch';

package/src/components/radio/Radio.ts

@@ -0,0 +1,129 @@
+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
+  }
+
+  class RadioBase extends ComponentBase<Attribute> {
+    public hidden = true;
+  }
+
+  export class Checked extends RadioBase {
+    public name = 'Checked';
+
+    constructor() {
+      super({onlyParentType: Radio});
+    }
+  }
+
+  export class UnChecked extends RadioBase {
+    public name = 'unChecked';
+
+    constructor() {
+      super({onlyParentType: Radio});
+    }
+  }
+
+  export class Radio extends ComponentBase<LabelAttribute> {
+    private checked = false;
+    private inputElement?: HTMLInputElement;
+
+    change(checked?: boolean) { checked = checked ?? this.checked;
+      this.checked = checked;
+      this.setChildrenHidden(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!);
+      }
+    }
+
+    private setChildrenHidden(checked: boolean) {
+      this.getChildren(Checked).forEach(it => {
+        it.hidden = !checked;
+      });
+      this.getChildren(UnChecked).forEach(it => {
+        it.hidden = checked;
+      });
+    }
+
+    onCreatedThisChild(child: RadioBase, childData: OnCreateRenderDataParams): void {
+      super.onCreatedThisChild(child, childData);
+      this.setChildrenHidden(this.checked);
+    }
+
+    onInitInputElement(element: HTMLInputElement) {
+      this.inputElement = element;
+    }
+
+    onChangeAttrRender(name: string, val: any, other: OtherData) {
+      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'))
+        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});
+      }
+    })
+  },
+  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});
+      }
+    })
+  },
+  radio: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Radio.selector}`,
+      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+        '  <input\n' +
+        '    name="${@this@.getAttribute(\'name\')}$"\n' +
+        '    checked="${@this@.getAttribute(\'checked\')}$"\n' +
+        '    value="${@this@.getAttribute(\'value\')}$"\n' +
+        '    dr-on-init="@this@.onInitInputElement($element)"\n' +
+        '    dr-event-change="@this@.change($element.checked);"\n' +
+        '    type="radio"\n' +
+        '\n' +
+        '  />\n' +
+        '  ${@this@.getAttribute(\'checked\')}$\n' +
+        '  #innerHTML#\n' +
+        '</label>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Radio.Radio(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/radio/index.ts

@@ -0,0 +1 @@
+export * from './Radio';