@dooboostore/dom-render 1.0.98

package/components/ComponentBase.d.ts

@@ -0,0 +1,41 @@
+import { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';
+import { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';
+import { RawSet } from '../rawsets/RawSet';
+import { ConstructorType } from '@dooboostore/core/types';
+import { OnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';
+import { OnInitRender } from '../lifecycle/OnInitRender';
+import { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';
+import { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
+import { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
+import * as Render from '../rawsets/Render';
+export declare abstract class ComponentBase<T> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
+    private config?;
+    private _rawSet?;
+    private _children;
+    private _render;
+    private _attribute?;
+    get render(): Render.Render | undefined;
+    get rawSet(): RawSet | undefined;
+    getAttribute<K extends keyof T>(name: K, attribute?: T): T[K] | null;
+    hasAttribute(name: keyof T): boolean;
+    equalsAttributeName(n: string, name: keyof T): boolean;
+    get uuid(): string | undefined;
+    get children(): any[];
+    getElement<T extends Element>(): T | undefined;
+    getFirstChild<T>(type: ConstructorType<T>): T | undefined;
+    getParentThis<P>(): P;
+    getChildren<C extends ConstructorType<any>>(type: C): InstanceType<C>[];
+    getChildren<C extends ConstructorType<any>[]>(types: C): InstanceType<C[number]>[];
+    constructor(config?: {
+        onlyParentType: ConstructorType<any>[] | ConstructorType<any>;
+    });
+    setAttribute(attribute: T): void;
+    onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
+    onCreateRenderData(data: OnCreateRenderDataParams): void;
+    onChangeAttrRender(name: string, value: any, other: OtherData): void;
+    onInitRender(param: any, rawSet: RawSet): void;
+    onDrThisBind(): void;
+    onDrThisUnBind(): void;
+    onDestroyRender(data: OnDestroyRenderParams): void;
+}
+//# sourceMappingURL=ComponentBase.d.ts.map

package/components/ComponentBase.js

@@ -0,0 +1,210 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { RawSet } from '../rawsets/RawSet';
+import { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';
+import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+import * as Render from '../rawsets/Render';
+export class ComponentBase {
+    // private attributeData?: FieldUnionType<T, null>;
+    get render() {
+        return this._render;
+    }
+    get rawSet() {
+        return this._rawSet;
+    }
+    getAttribute(name, attribute = this._attribute) {
+        const target = attribute;
+        if (!target) {
+            return null;
+        }
+        const nameString = String(name);
+        let p = nameString;
+        if (p in target) {
+            return target[p];
+        }
+        p = ConvertUtils.snakeToCamelCase(nameString);
+        if (p in target) {
+            return target[p];
+        }
+        p = ConvertUtils.camelToSnakeCase(nameString);
+        if (p in target) {
+            return target[p];
+        }
+        p = nameString.toUpperCase();
+        if (p in target) {
+            return target[p];
+        }
+        p = nameString.toLowerCase();
+        if (p in target) {
+            return target[p];
+        }
+        return null;
+    }
+    // get attribute(): T | undefined {
+    //   const handler = {
+    //     get(target: any, prop: string) {
+    //       let p = prop;
+    //       if (p in target) {
+    //         return target[p];
+    //       }
+    //       p = ConvertUtils.snakeToCamelCase(prop);
+    //       if (p in target) {
+    //         return target[p];
+    //       }
+    //       p = ConvertUtils.camelToSnakeCase(prop);
+    //       if (p in target) {
+    //         return target[p];
+    //       }
+    //       p = prop.toUpperCase()
+    //       if (p in target) {
+    //         return target[p];
+    //       }
+    //       p = prop.toLowerCase()
+    //       if (p in target) {
+    //         return target[p];
+    //       }
+    //       return null;
+    //     }
+    //   };
+    //   const obj = new Proxy(this._attribute, handler);
+    //   return obj;
+    // }
+    hasAttribute(name) {
+        return this.getAttribute(name) !== null;
+    }
+    equalsAttributeName(n, name) {
+        return n === name ||
+            ConvertUtils.snakeToCamelCase(n) === name ||
+            ConvertUtils.camelToSnakeCase(n) === name ||
+            n.toUpperCase() === name.toUpperCase() ||
+            n.toLowerCase() === name.toLowerCase();
+    }
+    // attribute(name: keyof T, {attribute = this._attribute}: {equals?: (data: T[keyof T]) => void, notEquals?: () => void,attribute?: T} = {}) {
+    //   const data = this.getAttribute(name, attribute)
+    //   return n === name ||
+    //   ConvertUtils.snakeToCamelCase(n) === name ||
+    //   ConvertUtils.camelToSnakeCase(n) === name ||
+    //     n.toUpperCase() === (name as string).toUpperCase() ||
+    //     n.toLowerCase() === (name as string).toLowerCase()
+    //   ;
+    // }
+    get uuid() {
+        var _a;
+        return (_a = this._rawSet) === null || _a === void 0 ? void 0 : _a.uuid;
+    }
+    get children() {
+        return this._children;
+    }
+    getElement() {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = ((_a = this.render) !== null && _a !== void 0 ? _a : (_c = (_b = this.rawSet) === null || _b === void 0 ? void 0 : _b.dataSet) === null || _c === void 0 ? void 0 : _c.render)) === null || _d === void 0 ? void 0 : _d.getElement) === null || _e === void 0 ? void 0 : _e.call(_d);
+    }
+    getFirstChild(type) {
+        return this._children.find(it => it instanceof type);
+    }
+    getParentThis() {
+        var _a;
+        return (_a = this.render) === null || _a === void 0 ? void 0 : _a.parentThis;
+    }
+    // 구현 시그니처 (오버로드 시그니처보다 더 일반적이어야 함)
+    getChildren(typeOrTypes) {
+        const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];
+        // filter의 결과는 항상 배열이므로 `?? []`는 필요 없습니다.
+        // filter가 아무것도 찾지 못하면 빈 배열을 반환합니다.
+        return this._children.filter(child => targets.some(targetConstructor => child instanceof targetConstructor));
+    }
+    // getChildren<T extends ConstructorType<any>[] | ConstructorType<any>>(
+    //   type: T
+    // ): T extends (infer U)[] ? InstanceType<U>[] : T extends ConstructorType<infer V> ? V[] : never {
+    //   const target = Array.isArray(type) ? type : [type];
+    //   return this._children.filter(it => target.some(t => it instanceof t)) ?? [];
+    // }
+    // getChildren<T>(type: ConstructorType<T> | ConstructorType<T>[]): T[] {
+    //   const target = Array.isArray(type) ? type : [type];
+    //   return this._children.filter(it => target.some(t => it instanceof t)) ?? [];
+    // }
+    /*
+      getChildren<T>(type: ConstructorType<T>): T[] {
+      return this._children.filter(it => it instanceof type) ?? [];
+    }
+     */
+    constructor(config) {
+        this.config = config;
+        this._children = [];
+    }
+    setAttribute(attribute) {
+        this._attribute = attribute;
+        // this.attributeData = this._attribute;
+    }
+    onCreatedThisChild(child, data) {
+        this._children.push(child);
+        // this._rawSet = data.render?.rawSet;
+        // this._attribute = data.render?.attribute as T;
+    }
+    onCreateRenderData(data) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this._rawSet = (_a = data.render) === null || _a === void 0 ? void 0 : _a.rawSet;
+        this.setAttribute((_b = data.render) === null || _b === void 0 ? void 0 : _b.attribute);
+        this._render = data.render;
+        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.onlyParentType) {
+            const isOk = Array.isArray((_d = this.config) === null || _d === void 0 ? void 0 : _d.onlyParentType) ? (_e = this.config) === null || _e === void 0 ? void 0 : _e.onlyParentType : [(_f = this.config) === null || _f === void 0 ? void 0 : _f.onlyParentType].some(it => { var _a; return ((_a = data.render) === null || _a === void 0 ? void 0 : _a.parentThis) instanceof it; });
+            if (!isOk) {
+                throw new Error('only my parentThis ' + ((_g = this.config) === null || _g === void 0 ? void 0 : _g.onlyParentType));
+            }
+        }
+    }
+    onChangeAttrRender(name, value, other) {
+        var _a, _b;
+        if (other.rawSet) {
+            this._rawSet = other.rawSet;
+            if (this._rawSet) {
+                this.setAttribute((_b = (_a = this._rawSet.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.attribute);
+            }
+        }
+        // this.changeAttribute?.(this._attribute);
+    }
+    onInitRender(param, rawSet) {
+        var _a, _b;
+        if (rawSet) {
+            this._rawSet = rawSet;
+            if (this._rawSet) {
+                this.setAttribute((_b = (_a = rawSet.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.attribute);
+            }
+            const e = this.getElement();
+            if (e) {
+                e.component = this;
+            }
+        }
+    }
+    onDrThisBind() {
+    }
+    onDrThisUnBind() {
+    }
+    onDestroyRender(data) {
+        // console.log('ComponentBase---onDestroyRender----')
+    }
+}
+__decorate([
+    DomRenderNoProxy,
+    __metadata("design:type", RawSet)
+], ComponentBase.prototype, "_rawSet", void 0);
+__decorate([
+    DomRenderNoProxy,
+    __metadata("design:type", Array)
+], ComponentBase.prototype, "_children", void 0);
+__decorate([
+    DomRenderNoProxy,
+    __metadata("design:type", Object)
+], ComponentBase.prototype, "_render", void 0);
+__decorate([
+    DomRenderNoProxy,
+    __metadata("design:type", Object)
+], ComponentBase.prototype, "_attribute", void 0);
+//# sourceMappingURL=ComponentBase.js.map

package/components/ComponentSet.d.ts

@@ -0,0 +1,22 @@
+export type ComponentSetConfig = {
+    objPath?: string | null;
+    beforeComponentSet?: ComponentSet;
+};
+export declare class ComponentSet<T = any> {
+    obj: T;
+    private _config;
+    private _template;
+    private _styles;
+    constructor(obj: T, source: {
+        template?: string;
+        styles?: (string[]) | string;
+    }, config?: ComponentSetConfig);
+    get template(): string;
+    get styles(): string | string[];
+    get config(): ComponentSetConfig;
+    setTemplateStyle(set: {
+        template?: string;
+        styles?: string | (string[]);
+    }): void;
+}
+//# sourceMappingURL=ComponentSet.d.ts.map

package/components/ComponentSet.js

@@ -0,0 +1,23 @@
+import { DomRenderFinalProxy } from '../types/Types';
+export class ComponentSet {
+    constructor(obj, source, config) {
+        this.obj = obj;
+        this._template = source.template;
+        this._styles = source.styles;
+        this._config = DomRenderFinalProxy.final(Object.assign({ objPath: 'obj' }, config));
+    }
+    get template() {
+        return this._template;
+    }
+    get styles() {
+        return this._styles;
+    }
+    get config() {
+        return this._config;
+    }
+    setTemplateStyle(set) {
+        this._template = set.template;
+        this._styles = set.styles;
+    }
+}
+//# sourceMappingURL=ComponentSet.js.map

package/components/appender/Appender.d.ts

@@ -0,0 +1,23 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } 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 declare namespace Appender {
+    const selector = "dr-appender";
+    type Attribute<D> = {
+        value: DomRenderAppender<D>;
+        onCreate?: (appender: DomRenderAppender) => void;
+    };
+    class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
+        private value?;
+        onInitRender(param: any, rawSet: RawSet): void;
+        onChangeAttrRender(name: string, value: any, other: OtherData): void;
+    }
+}
+declare const _default: {
+    appender: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=Appender.d.ts.map

package/components/appender/Appender.js

@@ -0,0 +1,59 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+export var Appender;
+(function (Appender_1) {
+    Appender_1.selector = 'dr-appender';
+    // @Component({
+    //   template: '<div dr-appender="@this@.appender" dr-option-strip="true">#innerHTML#</div>',
+    //   selector: `${selector}`
+    // })
+    class Appender extends ComponentBase {
+        // onCreateRender(...param: any) {
+        //   console.log('--onCreateRender')
+        // }
+        // test() {
+        //   console.log('t', this.getAttribute('appender'))
+        // }
+        onInitRender(param, 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, value, other) {
+            super.onChangeAttrRender(name, value, other);
+            if (this.equalsAttributeName(name, 'value')) {
+                this.value = value;
+            }
+            // console.log('------>appender', name, value);
+        }
+    }
+    Appender_1.Appender = Appender;
+})(Appender || (Appender = {}));
+export default {
+    appender: (config) => {
+        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 });
+            }
+        });
+    },
+};
+//# sourceMappingURL=Appender.js.map

package/components/checkbox/CheckBox.d.ts

@@ -0,0 +1,47 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+export declare 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> {
+        hidden: boolean;
+    }
+    export class Checked extends CheckBoxBase {
+        name: string;
+        constructor();
+    }
+    export class UnChecked extends CheckBoxBase {
+        name: string;
+        constructor();
+    }
+    export class CheckBox extends ComponentBase<WrapAttribute> {
+        private checked;
+        private inputElement?;
+        change(option: ChangeOption, checked?: boolean): void;
+        private setChildrenHidden;
+        onCreatedThisChild(child: CheckBoxBase, childData: OnCreateRenderDataParams): void;
+        onInitInputElement(element: HTMLInputElement): void;
+        onChangeAttrRender(name: string, val: any, other: OtherData): void;
+    }
+    export {};
+}
+declare const _default: {
+    checkBoxChecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    checkBoxUnchecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    checkBox: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=CheckBox.d.ts.map

package/components/checkbox/CheckBox.js

@@ -0,0 +1,118 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+export var CheckBox;
+(function (CheckBox_1) {
+    CheckBox_1.selector = 'dr-checkbox';
+    class CheckBoxBase extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.hidden = true;
+        }
+    }
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   styles: '',
+    //   selector: `${selector}.Checked`
+    // })
+    class Checked extends CheckBoxBase {
+        constructor() {
+            super({ onlyParentType: CheckBox });
+            this.name = 'checked';
+        }
+    }
+    CheckBox_1.Checked = Checked;
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   styles: '',
+    //   selector: `${selector}.UnChecked`
+    // })
+    class UnChecked extends CheckBoxBase {
+        constructor() {
+            super({ onlyParentType: CheckBox });
+            this.name = 'unChecked';
+        }
+    }
+    CheckBox_1.UnChecked = UnChecked;
+    // @Component({
+    //   template: template,
+    //   styles: style,
+    //   selector: `${selector}`
+    // })
+    class CheckBox extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.checked = false;
+        }
+        change(option, checked = this.checked) {
+            var _a;
+            this.checked = checked;
+            this.setChildrenHidden(checked);
+            (_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a(checked, option);
+        }
+        setChildrenHidden(checked) {
+            this.getChildren(Checked).forEach(it => {
+                it.hidden = !checked;
+            });
+            this.getChildren(UnChecked).forEach(it => {
+                it.hidden = checked;
+            });
+        }
+        onCreatedThisChild(child, childData) {
+            super.onCreatedThisChild(child, childData);
+            this.setChildrenHidden(this.checked);
+        }
+        onInitInputElement(element) {
+            // console.log('---cr', element)
+            this.inputElement = element;
+            this.inputElement.checked = !!this.getAttribute('checked');
+            this.change({ type: 'initialize' }, !!this.getAttribute('checked'));
+        }
+        onChangeAttrRender(name, val, other) {
+            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'));
+            }
+        }
+    }
+    CheckBox_1.CheckBox = CheckBox;
+})(CheckBox || (CheckBox = {}));
+export default {
+    checkBoxChecked: (config) => {
+        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) => {
+        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) => {
+        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 });
+            }
+        });
+    },
+};
+//# sourceMappingURL=CheckBox.js.map

package/components/choose/Choose.d.ts

@@ -0,0 +1,39 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+export declare 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> {
+        hidden: boolean;
+    }
+    class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {
+        data?: D;
+    }
+    export class When<D> extends ChildBase<D> {
+        constructor();
+    }
+    export class OtherWise<D> extends ChildBase<D> {
+        constructor();
+    }
+    export class Choose<D> extends ComponentBase<Attribute<D>> {
+        private choose?;
+        onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
+        onChangeAttrRender(name: string, value: any, other: OtherData): void;
+        private setChange;
+    }
+    export {};
+}
+declare const _default: {
+    chooseWhen: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    chooseOtherWise: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    choose: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=Choose.d.ts.map