@dooboostore/dom-render 1.0.106 → 1.0.108

package/src/components/ComponentRouterBase.ts

@@ -0,0 +1,44 @@
+import { ChildrenSet, ComponentBase, ComponentBaseConfig } from './ComponentBase';
+import { ComponentSet } from './ComponentSet';
+import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
+
+
+export type ComponentRouterBaseConfig = ComponentBaseConfig & { sameRouteNoApply?: boolean };
+
+export abstract class ComponentRouterBase<T = any>
+  extends ComponentBase<T, ComponentRouterBaseConfig>
+{
+  // OnDrThisBind
+  public child?: ComponentSet;
+
+  constructor(_config?: ComponentRouterBaseConfig) {
+    super(_config);
+  }
+
+  // get child() {
+  //   return this._child;
+  // }
+
+  setChild(child: ComponentSet) {
+    // console.log('setChild!!', child, (this as any).name)
+    if (child) {
+      this.child = child;
+    } else {
+      this.child = undefined;
+    }
+  }
+
+  onDrThisUnBind(): void {
+    // console.log('--ComponentRouterBase--onDrThisUnBind-')
+    super.onDrThisUnBind();
+    if (this.child && isOnDrThisUnBind(this.child?.obj)) {
+      this.child.obj.onDrThisUnBind();
+    }
+  }
+
+  onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+    super.onCreatedThisChildDebounce(childrenSet);
+  }
+
+
+}

package/src/components/ComponentSet.ts

@@ -0,0 +1,26 @@
+import { DomRenderFinalProxy } from '../types/Types';
+
+export type ComponentSetConfig = {objPath?: string | null, beforeComponentSet?: ComponentSet};
+export class ComponentSet<T = any> {
+    private _config: ComponentSetConfig;
+    private _template?: string;
+    private _styles?: string[] | string;
+    constructor(public obj: T, source: {template?: string, styles?: (string[]) | string}, config?: ComponentSetConfig) {
+        this._template = source.template;
+        this._styles = source.styles;
+        this._config = DomRenderFinalProxy.final(Object.assign({objPath: 'obj'} as ComponentSetConfig, config))
+    }
+    get template() {
+        return this._template;
+    }
+    get styles() {
+        return this._styles;
+    }
+    get config() {
+        return this._config;
+    }
+    public setTemplateStyle(set: {template?: string, styles?: string | (string[])}) {
+        this._template = set.template;
+        this._styles = set.styles;
+    }
+}

package/src/components/a/A.ts

@@ -0,0 +1,81 @@
+import { attribute, ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+
+export namespace A {
+  export const selector = 'dr-a';
+
+  export type ClickCallbackData = {
+      event: MouseEvent,
+      attributes: {
+          href: string | null;
+          target: string | null;
+          style: string | null;
+          class: string | null;
+          replace?: boolean;
+          scrollToTop?: boolean;
+      }
+  }
+
+  export type Attribute = {
+    href?: string | null;
+    target?: string | null;
+    style?: string | null;
+    class?: string | null;
+    click?: ((data: ClickCallbackData) => void) | null;
+    replace?: boolean | null;
+    scrollToTop?: boolean | null;
+  };
+
+  export class A extends ComponentBase<Attribute> {
+    @attribute({ converter: v => v || null }) href: string | null = null;
+    @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() 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;
+
+    onClick(event: MouseEvent) {
+      if (this.click) {
+          const attributes = {
+              href: this.href,
+              target: this.target,
+              style: this.style,
+              class: this.classAttr,
+              replace: this.replace,
+              scrollToTop: this.scrollToTop
+          };
+          this.click({ event, attributes });
+      }
+
+      if (event.defaultPrevented) {
+          return;
+      }
+
+      if (this.target !== '_blank' && this.href) {
+        event.preventDefault();
+        // console.log('scrollTop', this.scrollToTop);
+        this.domRenderConfig?.router?.go({path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });
+      }
+    }
+  }
+}
+
+export default {
+  a: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: A.selector,
+      template: `<a
+        href="\${@this@.href}$"
+        target="\${@this@.target}$"
+        style="\${@this@.style}$"
+        class="\${@this@.classAttr}$"
+        dr-event-click="@this@.onClick($event)"
+      >#innerHTML#</a>`,
+      objFactory: (e, o, r2, constructorParam) => {
+        return DomRender.run({ rootObject: new A.A(...constructorParam), config });
+      },
+    });
+  },
+};

package/src/components/a/index.ts

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

package/src/components/appender/Appender.ts

@@ -0,0 +1,86 @@
+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 { Appender as DomRenderAppender } from '../../operators/Appender';
+
+
+export namespace Appender {
+  export const selector = 'dr-appender';
+  // 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: DomRenderAppender<D>;
+    onCreate?: (appender: DomRenderAppender) => void;
+  }
+
+  // @Component({
+  //   template: '<div dr-appender="@this@.appender" dr-option-strip="true">#innerHTML#</div>',
+  //   selector: `${selector}`
+  // })
+  export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
+    private value?:DomRenderAppender
+
+    // onCreateRender(...param: any) {
+    //   console.log('--onCreateRender')
+    // }
+
+    // test() {
+    //   console.log('t', this.getAttribute('appender'))
+    // }
+    onInitRender(param: any, rawSet: RawSet) {
+      // console.log('--onInitRender onInitRender')
+      super.onInitRender(param, rawSet);
+
+
+    }
+
+    // push(...data:D[]) {
+    //   console.log('push/////', data);
+    //   this.appender.push(...data);
+    // }
+    //
+    // set(key: string, v: D): void {
+    //   this.appender.set(key, v)
+    // }
+    //
+    // delete(key: string): void {
+    //   this.appender.delete(key);
+    // }
+    //
+    // clear(): void {
+    //   this.appender.clear();
+    // }
+
+
+
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if(this.equalsAttributeName(name, 'value')) {
+        this.value = value;
+      }
+      // console.log('------>appender', name, value);
+    }
+  }
+}
+
+
+export default {
+  appender: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: Appender.selector,
+      template: '<div dr-appender="@this@.value" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});
+      }
+    })
+  },
+}
+
+

package/src/components/appender/index.ts

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

package/src/components/checkbox/CheckBox.ts

@@ -0,0 +1,137 @@
+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 CheckBox {
+  export const selector = 'dr-checkbox';
+  export type Attribute = {
+    class?: string;
+  }
+  export type ChangeOption = { type: 'initialize' | 'event' | 'attributeChange' };
+  export type WrapAttribute = {
+    class?: string;
+    name?: string;
+    checked?: boolean;
+    change?: (checked: boolean, option: ChangeOption) => void
+  }
+
+  class CheckBoxBase extends ComponentBase<Attribute> {
+    public hidden = true;
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   styles: '',
+  //   selector: `${selector}.Checked`
+  // })
+  export class Checked extends CheckBoxBase {
+    public name = 'checked';
+
+    constructor() {
+      super({onlyParentType: CheckBox});
+    }
+  }
+
+  // @Component({
+  //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+  //   styles: '',
+  //   selector: `${selector}.UnChecked`
+  // })
+  export class UnChecked extends CheckBoxBase {
+    public name = 'unChecked';
+
+    constructor() {
+      super({onlyParentType: CheckBox});
+    }
+  }
+
+  // @Component({
+  //   template: template,
+  //   styles: style,
+  //   selector: `${selector}`
+  // })
+  export class CheckBox extends ComponentBase<WrapAttribute> {
+    private checked = false;
+    private inputElement?: HTMLInputElement;
+
+    change(option: ChangeOption, checked?: boolean) { checked = checked ?? this.checked;
+      this.checked = checked;
+      this.setChildrenHidden(checked);
+      this.getAttribute('change')?.(checked, option);
+    }
+
+    private setChildrenHidden(checked: boolean) {
+      this.getChildren(Checked).forEach(it => {
+        it.hidden = !checked;
+      });
+      this.getChildren(UnChecked).forEach(it => {
+        it.hidden = checked;
+      });
+    }
+
+    onCreatedThisChild(child: CheckBoxBase, childData: OnCreateRenderDataParams): void {
+      super.onCreatedThisChild(child, childData);
+      this.setChildrenHidden(this.checked);
+    }
+
+    onInitInputElement(element: HTMLInputElement) {
+      // console.log('---cr', element)
+      this.inputElement = element;
+      this.inputElement.checked = !!this.getAttribute('checked');
+      this.change({type: 'initialize'}, !!this.getAttribute('checked'));
+    }
+
+    onChangeAttrRender(name: string, val: any, other: OtherData) {
+      super.onChangeAttrRender(name, val, other);
+      // console.log('Checkbox ChangeAttr------', name, val, this.inputElement)
+      if (this.inputElement && this.getAttribute('checked') !== this.checked) {
+        this.inputElement.checked = !!this.getAttribute('checked');
+        this.change({type: 'attributeChange'}, !!this.getAttribute('checked'));
+      }
+    }
+
+  }
+}
+
+
+
+export default {
+  checkBoxChecked: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${CheckBox.selector}-checked`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new CheckBox.Checked(), config: config});
+      }
+    })
+  },
+  checkBoxUnchecked: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${CheckBox.selector}-unchecked`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new CheckBox.UnChecked(), config: config});
+      }
+    })
+  },
+  checkBox: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${CheckBox.selector}`,
+      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+        '  <input\n' +
+        '    name="${@this@.getAttribute(\'name\')}$"\n' +
+        '    dr-on-init="@this@.onInitInputElement($element)"\n' +
+        '    dr-event-change="@this@.change({type: \'event\'},$element.checked);"\n' +
+        '    type="checkbox" hidden="hidden"/>\n' +
+        '  #innerHTML#\n' +
+        '</label>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new CheckBox.CheckBox(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/checkbox/index.ts

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

package/src/components/choose/Choose.ts

@@ -0,0 +1,111 @@
+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 Choose {
+  export const selector = 'dr-choose';
+  export type Attribute<D> = {
+    data: D;
+  }
+  export type WhenAttribute<D> = {
+    test: (data?: D | null) => boolean;
+  }
+
+  class ChildOtherWiseBase<A> extends ComponentBase<A> {
+    public hidden = true;
+  }
+
+  class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {
+    data?: D;
+  }
+
+  export class When<D> extends ChildBase<D> {
+    constructor() {
+      super({onlyParentType: Choose<D>});
+    }
+  }
+
+  export class OtherWise<D> extends ChildBase<D> {
+    constructor() {
+      super({onlyParentType: Choose<D>});
+    }
+  }
+
+  export class Choose<D> extends ComponentBase<Attribute<D>> {
+
+    private choose?: When<D> | OtherWise<D>;
+
+    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
+      super.onCreatedThisChild(child, data);
+      this.setChange(child);
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.equalsAttributeName(name, 'data')) {
+        this.choose = undefined;
+        const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));
+        children.forEach(it => this.setChange(it as any));
+
+      }
+    }
+
+    private setChange(child: When<D> | OtherWise<D>) {
+      child.data = this.getAttribute('data') as any;
+      // when.hidden = true;
+
+      if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {
+        // console.log('------------', child.attribute?.test?.(this.attribute?.data))
+        this.choose = child;
+        if (child.hidden) {
+          child.hidden = false;
+        }
+        // console.log('--------', when)
+      } else if (this.choose !== child) {
+        child.hidden = true;
+      }
+
+      if (!this.choose && child instanceof OtherWise) {
+        this.choose = child;
+        if (child.hidden) {
+          child.hidden = false;
+        }
+      }
+    }
+  }
+}
+
+
+export default {
+  chooseWhen: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Choose.selector}-when`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Choose.When(), config: config});
+      }
+    })
+  },
+  chooseOtherWise: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Choose.selector}-other-wise`,
+      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Choose.OtherWise(), config: config});
+      }
+    })
+  },
+  choose: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Choose.selector}`,
+      template: '#innerHTML#',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Choose.Choose(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/choose/index.ts

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