@dooboostore/dom-render 1.0.108 → 1.0.109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +27 -1451
- package/dist/cjs/DomRender.js +41 -26
- package/dist/cjs/DomRender.js.map +2 -2
- package/dist/cjs/DomRenderProxy.js +12 -5
- package/dist/cjs/DomRenderProxy.js.map +2 -2
- package/dist/cjs/bundle-entry.js +32 -21
- package/dist/cjs/bundle-entry.js.map +2 -2
- package/dist/cjs/components/ComponentBase.js +20 -2
- package/dist/cjs/components/ComponentBase.js.map +2 -2
- package/dist/cjs/components/ComponentRouterBase.js +11 -1
- package/dist/cjs/components/ComponentRouterBase.js.map +2 -2
- package/dist/cjs/components/choose/Choose.js +4 -0
- package/dist/cjs/components/choose/Choose.js.map +2 -2
- package/dist/cjs/components/router/RouterOutlet.js +15 -1
- package/dist/cjs/components/router/RouterOutlet.js.map +2 -2
- package/dist/cjs/components/select/Select.js +20 -6
- package/dist/cjs/components/select/Select.js.map +2 -2
- package/dist/cjs/components/timer/Timer.js +14 -11
- package/dist/cjs/components/timer/Timer.js.map +2 -2
- package/dist/cjs/decorators/DomRenderNoProxy.js +2 -1
- package/dist/cjs/decorators/DomRenderNoProxy.js.map +2 -2
- package/dist/cjs/lifecycle/OnRawSetRendered.js +26 -0
- package/dist/cjs/lifecycle/OnRawSetRendered.js.map +7 -0
- package/dist/cjs/lifecycle/index.js +1 -0
- package/dist/cjs/lifecycle/index.js.map +2 -2
- package/dist/cjs/operators/DrTargetElement.js +2 -0
- package/dist/cjs/operators/DrTargetElement.js.map +2 -2
- package/dist/cjs/operators/OperatorExecuter.js +1 -2
- package/dist/cjs/operators/OperatorExecuter.js.map +2 -2
- package/dist/cjs/package.json +5 -0
- package/dist/cjs/rawsets/RawSet.js +154 -74
- package/dist/cjs/rawsets/RawSet.js.map +3 -3
- package/dist/cjs/rawsets/Render.js.map +1 -1
- package/dist/cjs/routers/Router.js +31 -15
- package/dist/cjs/routers/Router.js.map +3 -3
- package/dist/esm/DomRender.js +41 -26
- package/dist/esm/DomRender.js.map +2 -2
- package/dist/esm/DomRenderProxy.js +12 -5
- package/dist/esm/DomRenderProxy.js.map +2 -2
- package/dist/esm/bundle-entry.js +22 -21
- package/dist/esm/bundle-entry.js.map +2 -2
- package/dist/esm/components/ComponentBase.js +20 -2
- package/dist/esm/components/ComponentBase.js.map +2 -2
- package/dist/esm/components/ComponentRouterBase.js +11 -1
- package/dist/esm/components/ComponentRouterBase.js.map +2 -2
- package/dist/esm/components/choose/Choose.js +4 -0
- package/dist/esm/components/choose/Choose.js.map +2 -2
- package/dist/esm/components/router/RouterOutlet.js +16 -2
- package/dist/esm/components/router/RouterOutlet.js.map +2 -2
- package/dist/esm/components/select/Select.js +20 -6
- package/dist/esm/components/select/Select.js.map +2 -2
- package/dist/esm/components/timer/Timer.js +14 -11
- package/dist/esm/components/timer/Timer.js.map +2 -2
- package/dist/esm/decorators/DomRenderNoProxy.js +2 -1
- package/dist/esm/decorators/DomRenderNoProxy.js.map +2 -2
- package/dist/esm/lifecycle/OnRawSetRendered.js +7 -0
- package/dist/esm/lifecycle/OnRawSetRendered.js.map +7 -0
- package/dist/esm/lifecycle/index.js +1 -0
- package/dist/esm/lifecycle/index.js.map +2 -2
- package/dist/esm/operators/DrTargetElement.js +2 -0
- package/dist/esm/operators/DrTargetElement.js.map +2 -2
- package/dist/esm/operators/OperatorExecuter.js +1 -2
- package/dist/esm/operators/OperatorExecuter.js.map +2 -2
- package/dist/esm/rawsets/RawSet.js +154 -74
- package/dist/esm/rawsets/RawSet.js.map +3 -3
- package/dist/esm/routers/Router.js +31 -15
- package/dist/esm/routers/Router.js.map +3 -3
- package/dist/esm-bundle/dooboostore-dom-render.esm.js +12586 -6496
- package/dist/esm-bundle/dooboostore-dom-render.esm.js.map +4 -4
- package/dist/types/DomRender.d.ts +11 -5
- package/dist/types/DomRender.d.ts.map +1 -1
- package/dist/types/DomRenderProxy.d.ts.map +1 -1
- package/dist/types/bundle-entry.d.ts +5 -2
- package/dist/types/bundle-entry.d.ts.map +1 -1
- package/dist/types/components/ComponentBase.d.ts +7 -1
- package/dist/types/components/ComponentBase.d.ts.map +1 -1
- package/dist/types/components/ComponentRouterBase.d.ts +8 -0
- package/dist/types/components/ComponentRouterBase.d.ts.map +1 -1
- package/dist/types/components/choose/Choose.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +2 -1
- package/dist/types/components/index.d.ts.map +1 -1
- package/dist/types/components/router/RouterOutlet.d.ts +5 -1
- package/dist/types/components/router/RouterOutlet.d.ts.map +1 -1
- package/dist/types/components/select/Select.d.ts +2 -2
- package/dist/types/components/select/Select.d.ts.map +1 -1
- package/dist/types/components/timer/Timer.d.ts +5 -3
- package/dist/types/components/timer/Timer.d.ts.map +1 -1
- package/dist/types/decorators/DomRenderNoProxy.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/lifecycle/OnRawSetRendered.d.ts +10 -0
- package/dist/types/lifecycle/OnRawSetRendered.d.ts.map +1 -0
- package/dist/types/lifecycle/index.d.ts +1 -0
- package/dist/types/lifecycle/index.d.ts.map +1 -1
- package/dist/types/operators/DrTargetElement.d.ts.map +1 -1
- package/dist/types/operators/OperatorExecuter.d.ts.map +1 -1
- package/dist/types/rawsets/RawSet.d.ts +11 -4
- package/dist/types/rawsets/RawSet.d.ts.map +1 -1
- package/dist/types/rawsets/Render.d.ts +1 -0
- package/dist/types/rawsets/Render.d.ts.map +1 -1
- package/dist/types/routers/Router.d.ts +2 -3
- package/dist/types/routers/Router.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-dom-render.umd.js +12600 -6529
- package/dist/umd-bundle/dooboostore-dom-render.umd.js.map +4 -4
- package/package.json +6 -5
- package/src/DomRender.ts +62 -34
- package/src/DomRenderProxy.ts +20 -8
- package/src/bundle-entry.ts +5 -3
- package/src/components/ComponentBase.ts +29 -7
- package/src/components/ComponentRouterBase.ts +17 -2
- package/src/components/choose/Choose.ts +4 -0
- package/src/components/router/RouterOutlet.ts +25 -5
- package/src/components/select/Select.ts +40 -26
- package/src/components/timer/Timer.ts +19 -51
- package/src/decorators/DomRenderNoProxy.ts +3 -1
- package/src/lifecycle/OnRawSetRendered.ts +15 -0
- package/src/lifecycle/index.ts +1 -0
- package/src/operators/DrTargetElement.ts +14 -0
- package/src/operators/OperatorExecuter.ts +1 -2
- package/src/rawsets/RawSet.ts +572 -257
- package/src/rawsets/Render.ts +1 -0
- package/src/routers/Router.ts +40 -23
- package/types.d.ts +68 -20
|
@@ -39,7 +39,9 @@ var Choose;
|
|
|
39
39
|
}
|
|
40
40
|
setChange(child) {
|
|
41
41
|
child.data = this.getAttribute("data");
|
|
42
|
+
console.log("eeeeeee?", child, child.getAttribute("test"), this.getAttribute("data"));
|
|
42
43
|
if (!this.choose && child instanceof When && child.getAttribute("test")?.(this.getAttribute("data"))) {
|
|
44
|
+
console.log("eeeeeee?2");
|
|
43
45
|
this.choose = child;
|
|
44
46
|
if (child.hidden) {
|
|
45
47
|
child.hidden = false;
|
|
@@ -47,12 +49,14 @@ var Choose;
|
|
|
47
49
|
} else if (this.choose !== child) {
|
|
48
50
|
child.hidden = true;
|
|
49
51
|
}
|
|
52
|
+
console.log("eeeeeee?3");
|
|
50
53
|
if (!this.choose && child instanceof OtherWise) {
|
|
51
54
|
this.choose = child;
|
|
52
55
|
if (child.hidden) {
|
|
53
56
|
child.hidden = false;
|
|
54
57
|
}
|
|
55
58
|
}
|
|
59
|
+
console.log("eeeeeee?34");
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
_Choose.Choose = Choose2;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/choose/Choose.ts"],
|
|
4
|
-
"sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { ComponentSet } from '../../components/ComponentSet';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace Choose {\n export const selector = 'dr-choose';\n export type Attribute<D> = {\n data: D;\n }\n export type WhenAttribute<D> = {\n test: (data?: D | null) => boolean;\n }\n\n class ChildOtherWiseBase<A> extends ComponentBase<A> {\n public hidden = true;\n }\n\n class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {\n data?: D;\n }\n\n export class When<D> extends ChildBase<D> {\n constructor() {\n super({onlyParentType: Choose<D>});\n }\n }\n\n export class OtherWise<D> extends ChildBase<D> {\n constructor() {\n super({onlyParentType: Choose<D>});\n }\n }\n\n export class Choose<D> extends ComponentBase<Attribute<D>> {\n\n private choose?: When<D> | OtherWise<D>;\n\n onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n super.onCreatedThisChild(child, data);\n this.setChange(child);\n }\n\n onChangeAttrRender(name: string, value: any, other: OtherData) {\n super.onChangeAttrRender(name, value, other);\n if (this.equalsAttributeName(name, 'data')) {\n this.choose = undefined;\n const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));\n children.forEach(it => this.setChange(it as any));\n\n }\n }\n\n private setChange(child: When<D> | OtherWise<D>) {\n child.data = this.getAttribute('data') as any;\n // when.hidden = true;\n\n if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {\n // console.log('------------', child.attribute?.test?.(this.attribute?.data))\n this.choose = child;\n if (child.hidden) {\n child.hidden = false;\n }\n // console.log('--------', when)\n } else if (this.choose !== child) {\n child.hidden = true;\n }\n\n if (!this.choose && child instanceof OtherWise) {\n this.choose = child;\n if (child.hidden) {\n child.hidden = false;\n }\n }\n }\n }\n}\n\n\nexport default {\n chooseWhen: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}-when`,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.When(), config: config});\n }\n })\n },\n chooseOtherWise: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}-other-wise`,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.OtherWise(), config: config});\n }\n })\n },\n choose: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}`,\n template: '#innerHTML#',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.Choose(...counstructorParam), config: config});\n }\n })\n },\n}"],
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,iBAAqC;AAC9C,SAAS,cAAc;AAMhB,IAAU;AAAA,CAAV,CAAU,YAAV;AACE,EAAM,mBAAW;AAAA,EAQxB,MAAM,2BAA8B,cAAiB;AAAA,IAArD;AAAA;AACE,WAAO,SAAS;AAAA;AAAA,EAClB;AAAA,EAEA,MAAM,kBAAqB,mBAAqC;AAAA,EAEhE;AAAA,EAEO,MAAM,aAAgB,UAAa;AAAA,IACxC,cAAc;AACZ,YAAM,EAAC,gBAAgBA,QAAS,CAAC;AAAA,IACnC;AAAA,EACF;AAJO,UAAM;AAAA,EAMN,MAAM,kBAAqB,UAAa;AAAA,IAC7C,cAAc;AACZ,YAAM,EAAC,gBAAgBA,QAAS,CAAC;AAAA,IACnC;AAAA,EACF;AAJO,UAAM;AAAA,EAMN,MAAMA,gBAAkB,cAA4B;AAAA,IAIzD,mBAAmB,OAAY,MAAgC;AAC7D,YAAM,mBAAmB,OAAO,IAAI;AACpC,WAAK,UAAU,KAAK;AAAA,IACtB;AAAA,IAEA,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAC3C,UAAI,KAAK,oBAAoB,MAAM,MAAM,GAAG;AAC1C,aAAK,SAAS;AACd,cAAM,WAAW,KAAK,YAAY,CAAC,MAAM,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,OAAO,aAAa,YAAY,IAAI,MAAM,aAAa,YAAY,IAAI,EAAE;AACvI,iBAAS,QAAQ,QAAM,KAAK,UAAU,EAAS,CAAC;AAAA,MAElD;AAAA,IACF;AAAA,IAEQ,UAAU,OAA+B;AAC/C,YAAM,OAAO,KAAK,aAAa,MAAM;AAGrC,UAAI,CAAC,KAAK,UAAU,iBAAiB,QAAQ,MAAM,aAAa,MAAM,IAAI,KAAK,aAAa,MAAM,CAAC,GAAG;
|
|
4
|
+
"sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { ComponentSet } from '../../components/ComponentSet';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace Choose {\n export const selector = 'dr-choose';\n export type Attribute<D> = {\n data: D;\n }\n export type WhenAttribute<D> = {\n test: (data?: D | null) => boolean;\n }\n\n class ChildOtherWiseBase<A> extends ComponentBase<A> {\n public hidden = true;\n }\n\n class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {\n data?: D;\n }\n\n export class When<D> extends ChildBase<D> {\n constructor() {\n super({onlyParentType: Choose<D>});\n }\n }\n\n export class OtherWise<D> extends ChildBase<D> {\n constructor() {\n super({onlyParentType: Choose<D>});\n }\n }\n\n export class Choose<D> extends ComponentBase<Attribute<D>> {\n\n private choose?: When<D> | OtherWise<D>;\n\n onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n super.onCreatedThisChild(child, data);\n this.setChange(child);\n }\n\n onChangeAttrRender(name: string, value: any, other: OtherData) {\n super.onChangeAttrRender(name, value, other);\n if (this.equalsAttributeName(name, 'data')) {\n this.choose = undefined;\n const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));\n children.forEach(it => this.setChange(it as any));\n\n }\n }\n\n private setChange(child: When<D> | OtherWise<D>) {\n child.data = this.getAttribute('data') as any;\n // when.hidden = true;\n\n console.log('eeeeeee?', child, child.getAttribute('test'), this.getAttribute('data'));\n if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {\n console.log('eeeeeee?2');\n // console.log('------------', child.attribute?.test?.(this.attribute?.data))\n this.choose = child;\n if (child.hidden) {\n child.hidden = false;\n }\n // console.log('--------', when)\n } else if (this.choose !== child) {\n child.hidden = true;\n }\n\n console.log('eeeeeee?3');\n if (!this.choose && child instanceof OtherWise) {\n this.choose = child;\n if (child.hidden) {\n child.hidden = false;\n }\n }\n console.log('eeeeeee?34');\n }\n }\n}\n\n\nexport default {\n chooseWhen: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}-when`,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.When(), config: config});\n }\n })\n },\n chooseOtherWise: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}-other-wise`,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.OtherWise(), config: config});\n }\n })\n },\n choose: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Choose.selector}`,\n template: '#innerHTML#',\n objFactory: (e, o, r2, counstructorParam) => {\n return DomRender.run({rootObject: new Choose.Choose(...counstructorParam), config: config});\n }\n })\n },\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Choose"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentBase } from "../ComponentBase.js";
|
|
2
2
|
import { RawSet } from "../../rawsets/RawSet.js";
|
|
3
|
-
import { ComponentRouterBase } from "../../components/ComponentRouterBase.js";
|
|
3
|
+
import { ComponentRouterBase, isOnCreatedOutletDebounce } from "../../components/ComponentRouterBase.js";
|
|
4
4
|
var RouterOutlet;
|
|
5
5
|
((_RouterOutlet) => {
|
|
6
6
|
_RouterOutlet.selector = "dr-router-outlet";
|
|
@@ -15,7 +15,10 @@ var RouterOutlet;
|
|
|
15
15
|
onInitRender(param, rawSet) {
|
|
16
16
|
super.onInitRender(param, rawSet);
|
|
17
17
|
const c = this.getParentThis();
|
|
18
|
-
|
|
18
|
+
const userValue = this.getAttribute("value");
|
|
19
|
+
if (userValue) {
|
|
20
|
+
this.value = userValue;
|
|
21
|
+
} else if (c instanceof ComponentRouterBase) {
|
|
19
22
|
this.value = c.child;
|
|
20
23
|
}
|
|
21
24
|
}
|
|
@@ -34,6 +37,17 @@ var RouterOutlet;
|
|
|
34
37
|
this.createArguments = value;
|
|
35
38
|
}
|
|
36
39
|
}
|
|
40
|
+
onCreatedThisChild(child, data) {
|
|
41
|
+
super.onCreatedThisChild(child, data);
|
|
42
|
+
}
|
|
43
|
+
onCreatedThisChildDebounce(childrenSet) {
|
|
44
|
+
super.onCreatedThisChildDebounce(childrenSet);
|
|
45
|
+
let parentThis = this.getParentThis();
|
|
46
|
+
if (isOnCreatedOutletDebounce(parentThis)) {
|
|
47
|
+
parentThis.onCreatedOutletDebounce(this.value?.obj);
|
|
48
|
+
}
|
|
49
|
+
this.getAttribute("onCreatedDebounce")?.(this.value?.obj);
|
|
50
|
+
}
|
|
37
51
|
created(component) {
|
|
38
52
|
component ?? (component = this.value?.obj);
|
|
39
53
|
this.getAttribute("onCreated")?.(component);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/router/RouterOutlet.ts"],
|
|
4
|
-
"sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { ComponentSet } from '../../components/ComponentSet';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\nimport { ComponentRouterBase } from '../../components/ComponentRouterBase';\nexport namespace RouterOutlet {\n export const selector = 'dr-router-outlet';\n export type Attribute = {\n value: ComponentSet;\n if: boolean | null;\n createArguments: any[];\n onCreated?: (value: any) => void;\n onDestroyRender?: () => void;\n };\n\n export class RouterOutlet extends ComponentBase<Attribute> implements OnInitRender {\n private value?: ComponentSet;\n private if?: boolean | null = null;\n private createArguments?: any[];\n\n setValue(value: ComponentSet) {\n this.value = value;\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n const c = this.getParentThis();\n if (c instanceof ComponentRouterBase){\n this.value = c.child
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["import { ChildrenSet, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { ComponentSet } from '../../components/ComponentSet';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\nimport { ComponentRouterBase, isOnCreatedOutletDebounce } from '../../components/ComponentRouterBase';\nimport { OnCreateRenderDataParams } from 'src/lifecycle';\nexport namespace RouterOutlet {\n export const selector = 'dr-router-outlet';\n export type Attribute = {\n value: ComponentSet;\n if: boolean | null;\n createArguments: any[];\n onCreated?: (value: any) => void;\n onCreatedDebounce?: (value: any) => void;\n onDestroyRender?: () => void;\n };\n\n export class RouterOutlet extends ComponentBase<Attribute> implements OnInitRender {\n private value?: ComponentSet;\n private if?: boolean | null = null;\n private createArguments?: any[];\n\n setValue(value: ComponentSet) {\n this.value = value;\n // console.log('sssssssssss');\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n const c = this.getParentThis();\n const userValue = this.getAttribute('value');\n if (userValue) {\n this.value = userValue;\n } else if (c instanceof ComponentRouterBase) {\n this.value = c.child;\n }\n // console.log('------',c);\n }\n\n onDestroyRender(data: OnDestroyRenderParams) {\n super.onDestroyRender(data);\n }\n\n onChangeAttrRender(name: string, value: any, other: OtherData) {\n super.onChangeAttrRender(name, value, other);\n if (this.equalsAttributeName(name, 'value')) {\n this.value = value;\n }\n if (this.equalsAttributeName(name, 'if')) {\n this.if = value;\n }\n if (this.equalsAttributeName(name, 'createArguments')) {\n this.createArguments = value;\n }\n }\n\n onCreatedThisChild(child:any, data:OnCreateRenderDataParams){\n super.onCreatedThisChild(child, data);\n // console.log('outlet--oncreatedThisChild',child);\n }\n\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n super.onCreatedThisChildDebounce(childrenSet);\n let parentThis = this.getParentThis();\n // console.log('---', parentThis);\n if (isOnCreatedOutletDebounce(parentThis)) {\n parentThis.onCreatedOutletDebounce(this.value?.obj);\n }\n this.getAttribute('onCreatedDebounce')?.(this.value?.obj);\n }\n created(component: any) {\n component ??= this.value?.obj;\n this.getAttribute('onCreated')?.(component);\n }\n }\n}\n\nexport default {\n // TODO: \uC65C \uC774\uB188\uB9CC webpack\uC5D0\uC11C \uC21C\uD658\uCC38\uC870 \uC5D0\uB7EC\uB098\uB294\uC9C0\uBAA8\uB974\uACA0\uB2E4.. \uC65C \uC774\uB188\uB9CC.. \uADF8\uB798\uC11C \uC774\uB807\uAC8C \uD558\uAE34\uD568.\n routerOutlet: (config?: DomRenderRunConfig, executer?: { run: (...data: any[]) => any }) => {\n return RawSet.createComponentTargetElement({\n name: RouterOutlet.selector,\n template:\n '<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>',\n objFactory: (e, o, r2, counstructorParam) => {\n return executer?.run({ rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config });\n }\n });\n }\n};\n"],
|
|
5
|
+
"mappings": "AAAA,SAAsB,qBAAqB;AAE3C,SAAS,cAAc;AAKvB,SAAS,qBAAqB,iCAAiC;AAExD,IAAU;AAAA,CAAV,CAAU,kBAAV;AACE,EAAM,yBAAW;AAAA,EAUjB,MAAMA,sBAAqB,cAAiD;AAAA,IAA5E;AAAA;AAEL,WAAQ,KAAsB;AAAA;AAAA,IAG9B,SAAS,OAAqB;AAC5B,WAAK,QAAQ;AAAA,IAEf;AAAA,IAEA,aAAa,OAAY,QAAgB;AACvC,YAAM,aAAa,OAAO,MAAM;AAChC,YAAM,IAAI,KAAK,cAAc;AAC7B,YAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,UAAI,WAAW;AACb,aAAK,QAAQ;AAAA,MACf,WAAW,aAAa,qBAAqB;AAC3C,aAAK,QAAQ,EAAE;AAAA,MACjB;AAAA,IAEF;AAAA,IAEA,gBAAgB,MAA6B;AAC3C,YAAM,gBAAgB,IAAI;AAAA,IAC5B;AAAA,IAEA,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAC3C,UAAI,KAAK,oBAAoB,MAAM,OAAO,GAAG;AAC3C,aAAK,QAAQ;AAAA,MACf;AACA,UAAI,KAAK,oBAAoB,MAAM,IAAI,GAAG;AACxC,aAAK,KAAK;AAAA,MACZ;AACA,UAAI,KAAK,oBAAoB,MAAM,iBAAiB,GAAG;AACrD,aAAK,kBAAkB;AAAA,MACzB;AAAA,IACF;AAAA,IAEA,mBAAmB,OAAW,MAA8B;AAC1D,YAAM,mBAAmB,OAAO,IAAI;AAAA,IAEtC;AAAA,IAEA,2BAA2B,aAA4B;AACrD,YAAM,2BAA2B,WAAW;AAC5C,UAAI,aAAa,KAAK,cAAc;AAEpC,UAAI,0BAA0B,UAAU,GAAG;AACzC,mBAAW,wBAAwB,KAAK,OAAO,GAAG;AAAA,MACpD;AACA,WAAK,aAAa,mBAAmB,IAAI,KAAK,OAAO,GAAG;AAAA,IAC1D;AAAA,IACA,QAAQ,WAAgB;AACtB,gCAAc,KAAK,OAAO;AAC1B,WAAK,aAAa,WAAW,IAAI,SAAS;AAAA,IAC5C;AAAA,EACF;AAzDO,gBAAM,eAAAA;AAAA,GAXE;AAuEjB,IAAO,uBAAQ;AAAA;AAAA,EAEb,cAAc,CAAC,QAA6B,aAAgD;AAC1F,WAAO,OAAO,6BAA6B;AAAA,MACzC,MAAM,aAAa;AAAA,MACnB,UACE;AAAA,MACF,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,UAAU,IAAI,EAAE,YAAY,IAAI,aAAa,aAAa,GAAG,iBAAiB,GAAG,OAAe,CAAC;AAAA,MAC1G;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
|
|
6
6
|
"names": ["RouterOutlet"]
|
|
7
7
|
}
|
|
@@ -90,6 +90,9 @@ var Select;
|
|
|
90
90
|
// super.onCreatedThisChild(child, data);
|
|
91
91
|
// this.updateStatus();
|
|
92
92
|
// }
|
|
93
|
+
// async onRawSetRendered(rawSet:RawSet, otherData:OnRawSetRenderedOtherData):Promise<void>{
|
|
94
|
+
// await super.onRawSetRendered(rawSet, otherData);
|
|
95
|
+
// }
|
|
93
96
|
onCreatedThisChildDebounce(childrenSet) {
|
|
94
97
|
super.onCreatedThisChildDebounce(childrenSet);
|
|
95
98
|
this.updateStatus();
|
|
@@ -172,11 +175,14 @@ var Select;
|
|
|
172
175
|
Select_1.Option = Option;
|
|
173
176
|
class Summary extends ComponentBase {
|
|
174
177
|
constructor() {
|
|
175
|
-
super(
|
|
178
|
+
super(...arguments);
|
|
176
179
|
this.classAttr = null;
|
|
177
180
|
this.options = [];
|
|
178
181
|
this.disabled = false;
|
|
179
182
|
}
|
|
183
|
+
// constructor() {
|
|
184
|
+
// super({ onlyParentType: Select });
|
|
185
|
+
// }
|
|
180
186
|
setDisabled(disabled) {
|
|
181
187
|
this.disabled = disabled;
|
|
182
188
|
this.getChildren(SummaryPlaceholder).forEach((it) => it.hidden = true);
|
|
@@ -214,9 +220,12 @@ var Select;
|
|
|
214
220
|
// onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
|
|
215
221
|
// super.onCreatedThisChild(child, data);
|
|
216
222
|
// }
|
|
223
|
+
// async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
|
|
224
|
+
// await super.onRawSetRendered(rawSet, otherData);
|
|
225
|
+
// }
|
|
217
226
|
onCreatedThisChildDebounce(childrenSet) {
|
|
218
227
|
super.onCreatedThisChildDebounce(childrenSet);
|
|
219
|
-
this.updateView(this.getParentThis()?.selectedValues
|
|
228
|
+
this.updateView(this.getParentThis()?.selectedValues?.length > 0);
|
|
220
229
|
}
|
|
221
230
|
onSummaryClick(element, event) {
|
|
222
231
|
if (this.getParentThis()?.disabled) {
|
|
@@ -237,7 +246,8 @@ var Select;
|
|
|
237
246
|
this.classAttr = null;
|
|
238
247
|
this.float = null;
|
|
239
248
|
}
|
|
240
|
-
|
|
249
|
+
async onRawSetRendered(rawSet, otherData) {
|
|
250
|
+
await super.onRawSetRendered(rawSet, otherData);
|
|
241
251
|
this.changeOptionState();
|
|
242
252
|
}
|
|
243
253
|
changeOptionState(option) {
|
|
@@ -245,13 +255,17 @@ var Select;
|
|
|
245
255
|
const select = this.getParentThis();
|
|
246
256
|
if (!select.multiple) {
|
|
247
257
|
if (option && option.selected) {
|
|
248
|
-
options.filter((it) => it !== option).forEach((it) =>
|
|
258
|
+
options.filter((it) => it !== option).forEach((it) => {
|
|
259
|
+
it.selected = false;
|
|
260
|
+
it.updateStatus();
|
|
261
|
+
});
|
|
249
262
|
} else {
|
|
250
263
|
const selectedOptions = options.filter((it) => it.selected && !it.disabled);
|
|
251
264
|
selectedOptions.forEach((opt, idx) => {
|
|
252
265
|
const isLast = idx === selectedOptions.length - 1;
|
|
253
266
|
if (!isLast) {
|
|
254
267
|
opt.selected = false;
|
|
268
|
+
opt.updateStatus();
|
|
255
269
|
}
|
|
256
270
|
});
|
|
257
271
|
}
|
|
@@ -394,7 +408,7 @@ var Select_default = {
|
|
|
394
408
|
select: (config) => {
|
|
395
409
|
return RawSet.createComponentTargetElement({
|
|
396
410
|
name: Select.selector,
|
|
397
|
-
styles: ".dr-select-container {\n
|
|
411
|
+
styles: ".dr-select-container {\n position: relative;\n\n}\n.dr-select-options-container {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n}\n.dr-select-container.is-open .dr-select-options-container {\n display: block;\n}\nsummary::-webkit-details-marker {\n display: none;\n}\n/* Floating styles for dr-select-body */\n.dr-select-body-container {\n position: absolute;\n}\n\n.dr-select-body-bottom-left-container {\n position: absolute;\n left: 0;\n top: 100%;\n}\n\n.dr-select-body-bottom-right-container {\n position: absolute;\n right: 0;\n top: 100%;\n}\n\n.dr-select-body-top-left-container {\n position: absolute;\n left: 0;\n bottom: 100%;\n}\n\n.dr-select-body-top-right-container {\n position: absolute;\n right: 0;\n bottom: 100%;\n}\n\n/* Reset default details/summary styles */\n.dr-select-container details {\n display: block; /* Ensure it behaves like a block element */\n}\n\n.dr-select-container summary {\n display: block; /* Ensure it behaves like a block element */\n list-style: none; /* Remove default marker */\n cursor: pointer; /* Indicate it's clickable */\n}\n\n.dr-select-container summary::-webkit-details-marker,\n.dr-select-container summary::marker {\n display: none; /* Hide marker for Webkit and standard */\n}",
|
|
398
412
|
template: `<details dr-class="{
|
|
399
413
|
'dr-select-container': true,
|
|
400
414
|
'is-open': @this@.isOpen,
|
|
@@ -405,7 +419,7 @@ var Select_default = {
|
|
|
405
419
|
</details>
|
|
406
420
|
<select hidden="hidden" name="\${@this@.name}$" disabled="\${@this@.disabled ? 'disabled' : null}$" style="width: 1500px; height:500px" multiple>
|
|
407
421
|
<option dr-for-of="@this@.options" value="\${#it#.value}$" selected="\${#it#.selected ? 'selected' : null}$">#it# \${#it#.value}$</option>
|
|
408
|
-
</select
|
|
422
|
+
</select>`,
|
|
409
423
|
objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })
|
|
410
424
|
});
|
|
411
425
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/select/Select.ts"],
|
|
4
|
-
"sourcesContent": ["import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OnCreateRenderData, OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnDestroyRender } from '../../lifecycle/OnDestroyRender';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\nimport { type Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';\nimport { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\nimport { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';\n\n/** 사용법\n <dr-select class=\"card-select-container\" changeSelected=\"${(data) => @this@.changeSelected(data)}$\"> <!-- multiple attribute optional-->\n <dr-select-summary class=\"card-select-summary-container\">\n <dr-select-summary-placeholder>\n <div class=\"card-select-summary-placeholder-container\">카드사별 사용처 안내 페이지 선택</div>\n </dr-select-summary-placeholder>\n <dr-select-summary-selected>\n <div dr-if=\"@this@.selectedCard\" class=\"card-select-summary-selected-container\">\n <img dr-attr=\"{src:@this@.selectedCard?.iconImg}\"> ${@this@.selectedCard?.name}$\n </div>\n </dr-select-summary-selected>\n </dr-select-summary>\n\n <dr-select-body float=\"bottom-left\" class=\"card-select-body-container\">\n <dr-select-option dr-for-of=\"@this@.cards\" value=\"${#it#.name}$\" selected=\"${#nearForOfIndex# === 0}$\" class=\"card-select-body-option-container\">\n <img dr-attr=\"{src:#it#.iconImg}\"> ${#it#.name}$\n </dr-select-option>\n </dr-select-body>\n </dr-select>\n */\n\nexport namespace Select {\n export const selector = 'dr-select';\n\n // Base for simple hide/show components\n class StateComponent extends ComponentBase {\n public hidden = true;\n public value: string | null = null;\n\n constructor(config: any) {\n super(config);\n }\n\n setValue(value: string | null) {\n this.value = value;\n }\n }\n\n // --- Option Child Components ---\n export class OptionSelected extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n export class OptionUnselected extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n export class OptionDisabled extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n // --- Summary Child Components ---\n export class SummaryPlaceholder extends StateComponent {\n constructor() {\n super({onlyParentType: Summary});\n }\n }\n\n export class SummarySelected extends StateComponent {\n private selectedOptions: Select.Option[] = [];\n\n constructor() {\n super({onlyParentType: Summary});\n }\n\n setOptions(options: Option[] = []) {\n this.selectedOptions = options.filter(it => it.selected);\n }\n }\n\n export class SummaryDisabled extends StateComponent {\n private selectedOptions: Select.Option[] = [];\n\n constructor() {\n super({onlyParentType: Summary});\n }\n\n setOptions(options: Option[] = []) {\n this.selectedOptions = options.filter(it => it.selected);\n }\n }\n\n // --- Select Body Component ---\n export type SelectBodyAttribute = {\n float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n class?: string;\n }\n // --- Option Component ---\n export type OptionAttribute = { value: string; selected?: boolean | null; disabled?: boolean | null; class?: string; };\n\n export class Option extends ComponentBase<OptionAttribute> implements OnInitRender {\n public hidden = true;\n @attribute({name: 'value'}) public value: string | null = null;\n @attribute({name: 'selected', converter: v => v !== null && v === true}) public selected = false;\n @attribute({name: 'disabled', converter: v => v !== null && v === true}) public disabled = false;\n @attribute({name: 'class', converter: v => (v ? v : null)}) public classAttr: string | null = null;\n\n // public status: 'selected' | 'unselected' | 'disabled' = 'unselected';\n\n constructor() {\n super({onlyParentType: SelectBody});\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // console.log('-----', this.value, this.selected)\n // this.getElement()?.addEventListener('click', (e) => {\n // e.stopPropagation();\n // if (!this.disabled) {\n // this.getParentThis<Select>().handleOptionClick(this);\n // }\n // });\n this.updateStatus();\n }\n\n // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n // super.onCreatedThisChild(child, data);\n // this.updateStatus();\n // }\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n super.onCreatedThisChildDebounce(childrenSet);\n this.updateStatus();\n }\n\n toggleSelected(event: Event) {\n // console.log('isMultiple', this.isMultiple())\n if (!this.disabled) {\n this.selected = this.isMultiple()? !this.selected : true;\n // this.selected = !this.selected;\n this.updateStatus();\n this.getParentThis<SelectBody>().changeOptionState(this);\n } else {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n isMultiple() {\n return this.getParentThis<Select.SelectBody>()?.getParentThis<Select.Select>().multiple;\n }\n\n updateStatus() {\n if (this.disabled) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n return;\n }\n\n if (this.selected) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n }\n\n if (!this.selected) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n }\n }\n }\n\n // --- Summary Component ---\n export class Summary extends ComponentBase implements OnInitRender {\n @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;\n private options: Select.Option[] = [];\n private disabled: boolean = false;\n public element?: HTMLElement;\n\n constructor() {\n super({onlyParentType: Select});\n }\n\n\n setDisabled(disabled: boolean) {\n this.disabled = disabled;\n this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = true);\n this.getChildren(SummarySelected).forEach(it => it.hidden = true);\n this.getChildren(SummaryDisabled).forEach(it => it.hidden = false);\n\n }\n\n setOptions(options: Option[] = []): void {\n this.options = options;\n\n const selectedOptions = this.options.filter(it => it.selected && !it.disabled);\n if (!this.disabled) {\n if (selectedOptions.length > 0) {\n this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = true);\n this.getChildren(SummarySelected).forEach(c => {\n c.setOptions(options);\n c.hidden = false;\n });\n this.getChildren(SummaryDisabled).forEach(it => it.hidden = true);\n } else {\n this.getChildren(SummaryDisabled).forEach(it => it.hidden = true);\n this.getChildren(SummaryPlaceholder).forEach(it => it.hidden = false);\n this.getChildren(SummarySelected).forEach(c => c.hidden = true);\n }\n }\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // this.getElement()?.addEventListener('click', (e) => {\n // e.stopPropagation();\n // this.getParentThis<Select>().toggle();\n // });\n }\n\n onInitSummaryElement(element: HTMLElement, event: Event) {\n this.element = element;\n }\n\n updateView(hasSelection: boolean) {\n this.getChildren(SummaryPlaceholder).forEach(c => c.hidden = hasSelection);\n this.getChildren(SummarySelected).forEach(c => c.hidden = !hasSelection);\n }\n\n // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n // super.onCreatedThisChild(child, data);\n // }\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n super.onCreatedThisChildDebounce(childrenSet);\n this.updateView(this.getParentThis<Select>()?.selectedValues.length > 0);\n }\n\n\n onSummaryClick(element: HTMLElement, event: Event) {\n if (this.getParentThis<Select>()?.disabled) {\n event.stopPropagation();\n event.preventDefault();\n return;\n }\n }\n }\n\n\n export class SelectBody extends ComponentBase<SelectBodyAttribute> {\n @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;\n @attribute({name: 'float'}) public float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null = null;\n\n constructor() {\n super({onlyParentType: Select});\n }\n\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n this.changeOptionState();\n }\n\n changeOptionState(option?: Option) {\n const options = this.getChildren(Option);\n const select = this.getParentThis<Select>();\n // // 멀티플이 아닐때에는 마지막 선택된값으로 처리\n if (!select.multiple) {\n // 내가 선택한게 있으면\n if (option && option.selected) {\n options.filter(it => it !== option).forEach(it => it.selected = false);\n } else {\n const selectedOptions = options.filter(it => it.selected && !it.disabled)\n selectedOptions.forEach((opt, idx) => {\n const isLast = idx === selectedOptions.length - 1;\n if (!isLast) {\n opt.selected = false;\n }\n });\n }\n }\n // console.log('--------', options.map(it=>it.selected))\n select?.setOptions(options);\n }\n }\n\n\n // --- Main Select Component ---\n export type SelectAttribute = {\n multiple?: boolean | null; class?: string;\n changeSelected?: (value: (string | null)[]) => void;\n name?: string;\n float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n disableOtherClickClose?: boolean;\n toggle?: (open: boolean) => void;\n disabled?: boolean | null;\n };\n\n export class Select extends ComponentBase<SelectAttribute> implements OnInitRender, OnCreateRender, OnCreateRenderData, OnDestroyRender {\n @attribute({name: 'multiple', converter: v => v !== null}) public multiple = false;\n @attribute({name: 'disabled', converter: v => v !== null}) public disabled = false;\n @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;\n @attribute({name: 'name', converter: v => (v === '' ? null : v)}) public name: string | null = null;\n\n // public isOpen = false;\n public selectedValues: (string | null)[] = [];\n public selectedOptions: Option[] = [];\n public value: string | (string | null)[] | null | undefined;\n\n @DomRenderNoProxy private element?: HTMLDetailsElement;\n @DomRenderNoProxy private documentClickSubscription?: Subscription;\n @DomRenderNoProxy private windowBlurSubscription?: Subscription;\n @DomRenderNoProxy public summaryComponent?: Summary;\n @DomRenderNoProxy public selectBodyComponent?: SelectBody;\n private options?: Select.Option[];\n\n constructor(config?: DomRenderConfig) {\n super();\n // console.log('----Select constructor')\n }\n\n get optionComponents(): Option[] {\n return this.getChildren(Option);\n }\n\n onCreateRender() {\n\n }\n\n onCreateRenderData() {\n\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // console.log('select onInitRender', this.multiple)\n\n if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n const detailsElement = this.element;\n\n const window = this.rawSet.dataSet!.config!.window!;\n const document = window.document;\n this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n const isSummaryClick = this.getChildren(Summary).some(it => event.target && it.element?.contains(event.target as Node) || it.element === event.target)\n if (!isSummaryClick && this.getAttribute('disableOtherClickClose')) {\n return;\n }\n if (!isSummaryClick && !this.multiple && detailsElement) {\n detailsElement.open = false;\n return;\n }\n if (!isSummaryClick && detailsElement && !detailsElement?.contains(event?.target as Node)) {\n detailsElement.open = false;\n }\n })\n\n this.windowBlurSubscription = WindowUtils.eventObservable(window, 'blur').subscribe(() => {\n if (detailsElement?.open && window.document.activeElement?.tagName === 'IFRAME') {\n detailsElement.open = false;\n }\n });\n }\n }\n\n\n toggle(element: HTMLDetailsElement, event: Event) {\n // console.log('------>', this.disabled, event)\n // if (this.disabled) {\n // event.stopPropagation();\n // event.preventDefault();\n // return;\n // }\n const toggleAttribute = this.getAttribute('toggle');\n if (toggleAttribute) {\n toggleAttribute?.(element.open);\n }\n }\n\n setOptions(options: Option[]) {\n const summaries = this.getChildren(Summary);\n\n this.options = options;\n\n const values = this.options.filter(it => it.selected && !it.disabled).map(it => it.value)\n this.getAttribute('changeSelected')?.(values);\n summaries?.forEach(it => {\n it.setDisabled(this.disabled);\n if (!this.disabled) {\n it.setOptions(options);\n }\n })\n }\n\n onInitDetailsElement(detailsElement: HTMLDetailsElement) {\n // console.log('detailsElement oninit', detailsElement);\n this.element = detailsElement;\n }\n\n onDrThisUnBind() {\n super.onDrThisUnBind();\n this.onDestroyRender();\n }\n\n onDestroyRender() {\n super.onDestroyRender();\n this.documentClickSubscription?.unsubscribe();\n this.windowBlurSubscription?.unsubscribe();\n }\n\n test() {\n console.log('tttttttt')\n }\n }\n}\n\nconst stateComponentFactory = (name: string, type: any) => {\n return (config?: DomRenderRunConfig) =>\n RawSet.createComponentTargetElement({\n name,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>\\n',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new type(), config })\n });\n};\n\nexport default {\n select: (config?: DomRenderConfig) => {\n return RawSet.createComponentTargetElement({\n name: Select.selector,\n styles:\n '.dr-select-container {\\n' +\n ' /*position: relative;*/\\n' +\n '\\n' +\n '}\\n' +\n '.dr-select-options-container {\\n' +\n ' display: none;\\n' +\n ' position: absolute;\\n' +\n ' top: 100%;\\n' +\n ' left: 0;\\n' +\n ' right: 0;\\n' +\n ' z-index: 10;\\n' +\n '}\\n' +\n '.dr-select-container.is-open .dr-select-options-container {\\n' +\n ' display: block;\\n' +\n '}\\n' +\n 'summary::-webkit-details-marker {\\n' +\n ' display: none;\\n' +\n '}\\n' +\n '/* Floating styles for dr-select-body */\\n' +\n '.dr-select-body-container {\\n' +\n ' position: absolute;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-bottom-left-container {\\n' +\n ' position: absolute;\\n' +\n ' left: 0;\\n' +\n ' top: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-bottom-right-container {\\n' +\n ' position: absolute;\\n' +\n ' right: 0;\\n' +\n ' top: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-top-left-container {\\n' +\n ' position: absolute;\\n' +\n ' left: 0;\\n' +\n ' bottom: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-top-right-container {\\n' +\n ' position: absolute;\\n' +\n ' right: 0;\\n' +\n ' bottom: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '/* Reset default details/summary styles */\\n' +\n '.dr-select-container details {\\n' +\n ' display: block; /* Ensure it behaves like a block element */\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-container summary {\\n' +\n ' display: block; /* Ensure it behaves like a block element */\\n' +\n ' list-style: none; /* Remove default marker */\\n' +\n \" cursor: pointer; /* Indicate it's clickable */\\n\" +\n '}\\n' +\n '\\n' +\n '.dr-select-container summary::-webkit-details-marker,\\n' +\n '.dr-select-container summary::marker {\\n' +\n ' display: none; /* Hide marker for Webkit and standard */\\n' +\n '}',\n template:\n '<details dr-class=\"{\\n' +\n \" 'dr-select-container': true,\\n\" +\n \" 'is-open': @this@.isOpen,\\n\" +\n ' [@this@.classAttr]: @this@.classAttr\\n' +\n ' }\" dr-on-init=\"@this@.onInitDetailsElement($element)\" dr-option-complete=\"@this@.test()\" dr-event-toggle=\"@this@.toggle($element, $event)\">\\n' +\n '\\n' +\n ' #innerHTML#\\n' +\n '</details>\\n' +\n '<select hidden=\"hidden\" name=\"${@this@.name}$\" disabled=\"${@this@.disabled ? \\'disabled\\' : null}$\" style=\"width: 1500px; height:500px\" multiple>\\n' +\n ' <option dr-for-of=\"@this@.options\" value=\"${#it#.value}$\" selected=\"${#it#.selected ? \\'selected\\' : null}$\">#it# ${#it#.value}$</option>\\n' +\n '</select',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })\n });\n },\n selectSummary: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-summary`,\n template:\n '<summary dr-class=\"{[@this@.classAttr]: @this@.classAttr}\"\\n' +\n ' dr-on-init=\"@this@.onInitSummaryElement($element, $event)\"\\n' +\n ' dr-event-click=\"@this@.onSummaryClick($element, $event)\"\\n' +\n '>\\n' +\n '#innerHTML#\\n' +\n '</summary>',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Summary(), config })\n });\n },\n selectSummaryPlaceholder: stateComponentFactory(`${Select.selector}-summary-placeholder`, Select.SummaryPlaceholder),\n selectSummarySelected: stateComponentFactory(`${Select.selector}-summary-selected`, Select.SummarySelected),\n selectSummaryDisabled: stateComponentFactory(`${Select.selector}-summary-disabled`, Select.SummaryDisabled),\n\n selectBody: (config?: DomRenderRunConfig) => { // New export\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-body`,\n template: '<div dr-class=\"{[@this@.classAttr]: @this@.classAttr, \\'dr-select-body-container\\': true, [\\'dr-select-body-\\'+@this@.float+\\'-container\\']: @this@.float}\">#innerHTML#</div>',\n objFactory: (e, o, r2, constructorParam) => {\n return DomRender.run({rootObject: new Select.SelectBody(), config: config});\n }\n })\n },\n\n selectOption: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-option`,\n template:\n '<a dr-class=\"{[@this@.classAttr]: @this@.classAttr}\" dr-event-click=\"@this@.toggleSelected($event)\">#innerHTML#</a>\\n',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Option(), config })\n });\n },\n selectOptionSelected: stateComponentFactory(`${Select.selector}-option-selected`, Select.OptionSelected),\n selectOptionUnselected: stateComponentFactory(`${Select.selector}-option-unselected`, Select.OptionUnselected),\n selectOptionDisabled: stateComponentFactory(`${Select.selector}-option-disabled`, Select.OptionDisabled),\n};"],
|
|
5
|
-
"mappings": ";;;;;;;;;AAAA,SAAS,WAAwB,qBAAqB;AACtD,SAAS,iBAAqC;AAC9C,SAAS,cAAc;AAIvB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGjC,SAAS,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OnCreateRenderData, OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnDestroyRender } from '../../lifecycle/OnDestroyRender';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\nimport { type Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';\nimport { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\nimport { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';\nimport { OnRawSetRenderedOtherData } from 'src/lifecycle';\n\n/** 사용법\n <dr-select class=\"card-select-container\" changeSelected=\"${(data) => @this@.changeSelected(data)}$\"> <!-- multiple attribute optional-->\n <dr-select-summary class=\"card-select-summary-container\">\n <dr-select-summary-placeholder>\n <div class=\"card-select-summary-placeholder-container\">카드사별 사용처 안내 페이지 선택</div>\n </dr-select-summary-placeholder>\n <dr-select-summary-selected>\n <div dr-if=\"@this@.selectedCard\" class=\"card-select-summary-selected-container\">\n <img dr-attr=\"{src:@this@.selectedCard?.iconImg}\"> ${@this@.selectedCard?.name}$\n </div>\n </dr-select-summary-selected>\n </dr-select-summary>\n\n <dr-select-body float=\"bottom-left\" class=\"card-select-body-container\">\n <dr-select-option dr-for-of=\"@this@.cards\" value=\"${#it#.name}$\" selected=\"${#nearForOfIndex# === 0}$\" class=\"card-select-body-option-container\">\n <img dr-attr=\"{src:#it#.iconImg}\"> ${#it#.name}$\n </dr-select-option>\n </dr-select-body>\n </dr-select>\n */\n\nexport namespace Select {\n export const selector = 'dr-select';\n\n // Base for simple hide/show components\n class StateComponent extends ComponentBase {\n public hidden = true;\n public value: string | null = null;\n\n constructor(config: any) {\n super(config);\n }\n\n setValue(value: string | null) {\n this.value = value;\n }\n }\n\n // --- Option Child Components ---\n export class OptionSelected extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n export class OptionUnselected extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n export class OptionDisabled extends StateComponent {\n constructor() {\n super({onlyParentType: Option});\n }\n }\n\n // --- Summary Child Components ---\n export class SummaryPlaceholder extends StateComponent {\n constructor() {\n super({onlyParentType: Summary});\n }\n }\n\n export class SummarySelected extends StateComponent {\n private selectedOptions: Select.Option[] = [];\n\n constructor() {\n super({onlyParentType: Summary});\n }\n\n setOptions(options: Option[] = []) {\n this.selectedOptions = options.filter(it => it.selected);\n }\n }\n\n export class SummaryDisabled extends StateComponent {\n private selectedOptions: Select.Option[] = [];\n\n constructor() {\n super({onlyParentType: Summary});\n }\n\n setOptions(options: Option[] = []) {\n this.selectedOptions = options.filter(it => it.selected);\n }\n }\n\n // --- Select Body Component ---\n export type SelectBodyAttribute = {\n float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n class?: string;\n }\n // --- Option Component ---\n export type OptionAttribute = { value: string; selected?: boolean | null; disabled?: boolean | null; class?: string; };\n\n export class Option extends ComponentBase<OptionAttribute> implements OnInitRender {\n public hidden = true;\n @attribute({name: 'value'}) public value: string | null = null;\n @attribute({name: 'selected', converter: v => v !== null && v === true}) public selected = false;\n @attribute({name: 'disabled', converter: v => v !== null && v === true}) public disabled = false;\n @attribute({name: 'class', converter: v => (v ? v : null)}) public classAttr: string | null = null;\n\n // public status: 'selected' | 'unselected' | 'disabled' = 'unselected';\n\n constructor() {\n super({onlyParentType: SelectBody});\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // console.log('-----', this.value, this.selected)\n // this.getElement()?.addEventListener('click', (e) => {\n // e.stopPropagation();\n // if (!this.disabled) {\n // this.getParentThis<Select>().handleOptionClick(this);\n // }\n // });\n this.updateStatus();\n }\n\n // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n // super.onCreatedThisChild(child, data);\n // this.updateStatus();\n // }\n\n // async onRawSetRendered(rawSet:RawSet, otherData:OnRawSetRenderedOtherData):Promise<void>{\n // await super.onRawSetRendered(rawSet, otherData);\n // }\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n super.onCreatedThisChildDebounce(childrenSet);\n this.updateStatus();\n }\n\n toggleSelected(event: Event) {\n // console.log('isMultiple', this.isMultiple())\n if (!this.disabled) {\n this.selected = this.isMultiple()? !this.selected : true;\n // this.selected = !this.selected;\n this.updateStatus();\n this.getParentThis<SelectBody>().changeOptionState(this);\n } else {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n isMultiple() {\n return this.getParentThis<Select.SelectBody>()?.getParentThis<Select.Select>().multiple;\n }\n\n updateStatus() {\n if (this.disabled) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n return;\n }\n\n if (this.selected) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n }\n\n if (!this.selected) {\n this.getChildren(OptionSelected).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n this.getChildren(OptionUnselected).forEach(c => {\n c.hidden = false;\n c.setValue(this.value)\n });\n this.getChildren(OptionDisabled).forEach(c => {\n c.hidden = true;\n c.setValue(this.value)\n });\n }\n }\n }\n\n // --- Summary Component ---\n export class Summary extends ComponentBase implements OnInitRender {\n @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;\n private options: Select.Option[] = [];\n private disabled: boolean = false;\n public element?: HTMLElement;\n\n // constructor() {\n // super({ onlyParentType: Select });\n // }\n\n setDisabled(disabled: boolean) {\n this.disabled = disabled;\n this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));\n this.getChildren(SummarySelected).forEach(it => (it.hidden = true));\n this.getChildren(SummaryDisabled).forEach(it => (it.hidden = false));\n }\n\n setOptions(options: Option[] = []): void {\n this.options = options;\n\n const selectedOptions = this.options.filter(it => it.selected && !it.disabled);\n if (!this.disabled) {\n if (selectedOptions.length > 0) {\n this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));\n this.getChildren(SummarySelected).forEach(c => {\n c.setOptions(options);\n c.hidden = false;\n });\n this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));\n } else {\n this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));\n this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = false));\n this.getChildren(SummarySelected).forEach(c => (c.hidden = true));\n }\n }\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // this.getElement()?.addEventListener('click', (e) => {\n // e.stopPropagation();\n // this.getParentThis<Select>().toggle();\n // });\n }\n\n onInitSummaryElement(element: HTMLElement, event: Event) {\n this.element = element;\n }\n\n updateView(hasSelection: boolean) {\n this.getChildren(SummaryPlaceholder).forEach(c => (c.hidden = hasSelection));\n this.getChildren(SummarySelected).forEach(c => (c.hidden = !hasSelection));\n }\n\n // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n // super.onCreatedThisChild(child, data);\n // }\n // async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n // await super.onRawSetRendered(rawSet, otherData);\n // }\n onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n super.onCreatedThisChildDebounce(childrenSet);\n this.updateView(this.getParentThis<Select>()?.selectedValues?.length > 0);\n }\n\n onSummaryClick(element: HTMLElement, event: Event) {\n if (this.getParentThis<Select>()?.disabled) {\n event.stopPropagation();\n event.preventDefault();\n return;\n }\n }\n }\n\n\n export class SelectBody extends ComponentBase<SelectBodyAttribute> {\n @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;\n @attribute({ name: 'float' }) public float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null = null;\n\n constructor() {\n super({ onlyParentType: Select });\n }\n\n async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n await super.onRawSetRendered(rawSet, otherData);\n // }\n // onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n // super.onCreatedThisChildDebounce(childrenSet);\n this.changeOptionState();\n }\n\n changeOptionState(option?: Option) {\n const options = this.getChildren(Option);\n const select = this.getParentThis<Select>();\n // console.log('------opti',option, select);\n // // 멀티플이 아닐때에는 마지막 선택된값으로 처리\n if (!select.multiple) {\n // 내가 선택한게 있으면\n if (option && option.selected) {\n options.filter(it => it !== option).forEach(it => {\n it.selected = false;\n it.updateStatus();\n });\n } else {\n const selectedOptions = options.filter(it => it.selected && !it.disabled);\n selectedOptions.forEach((opt, idx) => {\n const isLast = idx === selectedOptions.length - 1;\n if (!isLast) {\n opt.selected = false;\n opt.updateStatus();\n }\n });\n }\n }\n // console.log('--------', options.map(it=>it.selected))\n select?.setOptions(options);\n }\n }\n\n\n // --- Main Select Component ---\n export type SelectAttribute = {\n multiple?: boolean | null; class?: string;\n changeSelected?: (value: (string | null)[]) => void;\n name?: string;\n float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n disableOtherClickClose?: boolean;\n toggle?: (open: boolean) => void;\n disabled?: boolean | null;\n };\n\n export class Select extends ComponentBase<SelectAttribute> implements OnInitRender, OnCreateRender, OnCreateRenderData, OnDestroyRender {\n @attribute({name: 'multiple', converter: v => v !== null}) public multiple = false;\n @attribute({name: 'disabled', converter: v => v !== null}) public disabled = false;\n @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;\n @attribute({name: 'name', converter: v => (v === '' ? null : v)}) public name: string | null = null;\n\n // public isOpen = false;\n public selectedValues: (string | null)[] = [];\n public selectedOptions: Option[] = [];\n public value: string | (string | null)[] | null | undefined;\n\n @DomRenderNoProxy private element?: HTMLDetailsElement;\n @DomRenderNoProxy private documentClickSubscription?: Subscription;\n @DomRenderNoProxy private windowBlurSubscription?: Subscription;\n @DomRenderNoProxy public summaryComponent?: Summary;\n @DomRenderNoProxy public selectBodyComponent?: SelectBody;\n private options?: Select.Option[];\n\n constructor(config?: DomRenderConfig) {\n super();\n // console.log('----Select constructor')\n }\n\n get optionComponents(): Option[] {\n return this.getChildren(Option);\n }\n\n onCreateRender() {\n\n }\n\n onCreateRenderData() {\n\n }\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n // console.log('select onInitRender', this.multiple)\n\n if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n const detailsElement = this.element;\n\n const window = this.rawSet.dataSet!.config!.window!;\n const document = window.document;\n this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n const isSummaryClick = this.getChildren(Summary).some(it => event.target && it.element?.contains(event.target as Node) || it.element === event.target)\n if (!isSummaryClick && this.getAttribute('disableOtherClickClose')) {\n return;\n }\n if (!isSummaryClick && !this.multiple && detailsElement) {\n detailsElement.open = false;\n return;\n }\n if (!isSummaryClick && detailsElement && !detailsElement?.contains(event?.target as Node)) {\n detailsElement.open = false;\n }\n })\n\n this.windowBlurSubscription = WindowUtils.eventObservable(window, 'blur').subscribe(() => {\n if (detailsElement?.open && window.document.activeElement?.tagName === 'IFRAME') {\n detailsElement.open = false;\n }\n });\n }\n }\n\n\n toggle(element: HTMLDetailsElement, event: Event) {\n // console.log('------>', this.disabled, event)\n // if (this.disabled) {\n // event.stopPropagation();\n // event.preventDefault();\n // return;\n // }\n const toggleAttribute = this.getAttribute('toggle');\n if (toggleAttribute) {\n toggleAttribute?.(element.open);\n }\n }\n\n setOptions(options: Option[]) {\n const summaries = this.getChildren(Summary);\n\n this.options = options;\n\n const values = this.options.filter(it => it.selected && !it.disabled).map(it => it.value)\n this.getAttribute('changeSelected')?.(values);\n summaries?.forEach(it => {\n it.setDisabled(this.disabled);\n if (!this.disabled) {\n it.setOptions(options);\n }\n })\n }\n\n onInitDetailsElement(detailsElement: HTMLDetailsElement) {\n // console.log('detailsElement oninit', detailsElement);\n this.element = detailsElement;\n }\n\n onDrThisUnBind() {\n super.onDrThisUnBind();\n this.onDestroyRender();\n }\n\n onDestroyRender() {\n super.onDestroyRender();\n this.documentClickSubscription?.unsubscribe();\n this.windowBlurSubscription?.unsubscribe();\n }\n\n test() {\n console.log('tttttttt')\n }\n }\n}\n\nconst stateComponentFactory = (name: string, type: any) => {\n return (config?: DomRenderRunConfig) =>\n RawSet.createComponentTargetElement({\n name,\n template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>\\n',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new type(), config })\n });\n};\n\nexport default {\n select: (config?: DomRenderConfig) => {\n return RawSet.createComponentTargetElement({\n name: Select.selector,\n styles:\n '.dr-select-container {\\n' +\n ' position: relative;\\n' +\n '\\n' +\n '}\\n' +\n '.dr-select-options-container {\\n' +\n ' display: none;\\n' +\n ' position: absolute;\\n' +\n ' top: 100%;\\n' +\n ' left: 0;\\n' +\n ' right: 0;\\n' +\n ' z-index: 10;\\n' +\n '}\\n' +\n '.dr-select-container.is-open .dr-select-options-container {\\n' +\n ' display: block;\\n' +\n '}\\n' +\n 'summary::-webkit-details-marker {\\n' +\n ' display: none;\\n' +\n '}\\n' +\n '/* Floating styles for dr-select-body */\\n' +\n '.dr-select-body-container {\\n' +\n ' position: absolute;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-bottom-left-container {\\n' +\n ' position: absolute;\\n' +\n ' left: 0;\\n' +\n ' top: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-bottom-right-container {\\n' +\n ' position: absolute;\\n' +\n ' right: 0;\\n' +\n ' top: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-top-left-container {\\n' +\n ' position: absolute;\\n' +\n ' left: 0;\\n' +\n ' bottom: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-body-top-right-container {\\n' +\n ' position: absolute;\\n' +\n ' right: 0;\\n' +\n ' bottom: 100%;\\n' +\n '}\\n' +\n '\\n' +\n '/* Reset default details/summary styles */\\n' +\n '.dr-select-container details {\\n' +\n ' display: block; /* Ensure it behaves like a block element */\\n' +\n '}\\n' +\n '\\n' +\n '.dr-select-container summary {\\n' +\n ' display: block; /* Ensure it behaves like a block element */\\n' +\n ' list-style: none; /* Remove default marker */\\n' +\n \" cursor: pointer; /* Indicate it's clickable */\\n\" +\n '}\\n' +\n '\\n' +\n '.dr-select-container summary::-webkit-details-marker,\\n' +\n '.dr-select-container summary::marker {\\n' +\n ' display: none; /* Hide marker for Webkit and standard */\\n' +\n '}',\n template:\n '<details dr-class=\"{\\n' +\n \" 'dr-select-container': true,\\n\" +\n \" 'is-open': @this@.isOpen,\\n\" +\n ' [@this@.classAttr]: @this@.classAttr\\n' +\n ' }\" dr-on-init=\"@this@.onInitDetailsElement($element)\" dr-option-complete=\"@this@.test()\" dr-event-toggle=\"@this@.toggle($element, $event)\">\\n' +\n '\\n' +\n ' #innerHTML#\\n' +\n '</details>\\n' +\n '<select hidden=\"hidden\" name=\"${@this@.name}$\" disabled=\"${@this@.disabled ? \\'disabled\\' : null}$\" style=\"width: 1500px; height:500px\" multiple>\\n' +\n ' <option dr-for-of=\"@this@.options\" value=\"${#it#.value}$\" selected=\"${#it#.selected ? \\'selected\\' : null}$\">#it# ${#it#.value}$</option>\\n' +\n '</select>',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })\n });\n },\n selectSummary: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-summary`,\n template:\n '<summary dr-class=\"{[@this@.classAttr]: @this@.classAttr}\"\\n' +\n ' dr-on-init=\"@this@.onInitSummaryElement($element, $event)\"\\n' +\n ' dr-event-click=\"@this@.onSummaryClick($element, $event)\"\\n' +\n '>\\n' +\n '#innerHTML#\\n' +\n '</summary>',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Summary(), config })\n });\n },\n selectSummaryPlaceholder: stateComponentFactory(`${Select.selector}-summary-placeholder`, Select.SummaryPlaceholder),\n selectSummarySelected: stateComponentFactory(`${Select.selector}-summary-selected`, Select.SummarySelected),\n selectSummaryDisabled: stateComponentFactory(`${Select.selector}-summary-disabled`, Select.SummaryDisabled),\n\n selectBody: (config?: DomRenderRunConfig) => { // New export\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-body`,\n template: '<div dr-class=\"{[@this@.classAttr]: @this@.classAttr, \\'dr-select-body-container\\': true, [\\'dr-select-body-\\'+@this@.float+\\'-container\\']: @this@.float}\">#innerHTML#</div>',\n objFactory: (e, o, r2, constructorParam) => {\n return DomRender.run({rootObject: new Select.SelectBody(), config: config});\n }\n })\n },\n\n selectOption: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Select.selector}-option`,\n template:\n '<a dr-class=\"{[@this@.classAttr]: @this@.classAttr}\" dr-event-click=\"@this@.toggleSelected($event)\">#innerHTML#</a>\\n',\n objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Option(), config })\n });\n },\n selectOptionSelected: stateComponentFactory(`${Select.selector}-option-selected`, Select.OptionSelected),\n selectOptionUnselected: stateComponentFactory(`${Select.selector}-option-unselected`, Select.OptionUnselected),\n selectOptionDisabled: stateComponentFactory(`${Select.selector}-option-disabled`, Select.OptionDisabled),\n};"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Select"]
|
|
7
7
|
}
|
|
@@ -7,31 +7,34 @@ var Timer;
|
|
|
7
7
|
class Timer2 extends ComponentBase {
|
|
8
8
|
onInitRender(param, rawSet) {
|
|
9
9
|
super.onInitRender(param, rawSet);
|
|
10
|
-
|
|
10
|
+
this.getAttribute("onCreated")?.(this);
|
|
11
11
|
}
|
|
12
12
|
isRunning() {
|
|
13
|
-
return this.
|
|
13
|
+
return this.value !== void 0;
|
|
14
14
|
}
|
|
15
15
|
start() {
|
|
16
|
-
const
|
|
17
|
-
if (
|
|
18
|
-
this.
|
|
16
|
+
const timems = this.getAttribute("value");
|
|
17
|
+
if (timems) {
|
|
18
|
+
this.value = parseInt(timems);
|
|
19
|
+
const intervalValue = this.getAttribute("interval") ?? 1e3;
|
|
20
|
+
console.log("int", this.value, intervalValue);
|
|
19
21
|
this.interval = setInterval(() => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
console.log("--------->", this.value);
|
|
23
|
+
if (this.value) {
|
|
24
|
+
this.value--;
|
|
22
25
|
} else {
|
|
23
26
|
clearInterval(this.interval);
|
|
24
|
-
this.
|
|
27
|
+
this.value = void 0;
|
|
25
28
|
this.interval = void 0;
|
|
26
29
|
}
|
|
27
|
-
},
|
|
30
|
+
}, intervalValue);
|
|
28
31
|
}
|
|
29
32
|
}
|
|
30
33
|
stop() {
|
|
31
34
|
if (this.interval) {
|
|
32
35
|
clearInterval(this.interval);
|
|
33
36
|
this.interval = void 0;
|
|
34
|
-
this.
|
|
37
|
+
this.value = void 0;
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
onChangeAttrRender(name, val, other) {
|
|
@@ -48,7 +51,7 @@ var Timer;
|
|
|
48
51
|
_Timer.Timer = Timer2;
|
|
49
52
|
})(Timer || (Timer = {}));
|
|
50
53
|
var Timer_default = {
|
|
51
|
-
|
|
54
|
+
timer: (config) => {
|
|
52
55
|
return RawSet.createComponentTargetElement({
|
|
53
56
|
name: `${Timer.selector}`,
|
|
54
57
|
template: "#innerHTML#",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/timer/Timer.ts"],
|
|
4
|
-
"sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\n\n\nexport namespace Timer {\n export const selector = 'dr-timer';\n export type Attribute = {\n
|
|
5
|
-
"mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,iBAAqC;AAC9C,SAAS,cAAc;AAKhB,IAAU;AAAA,CAAV,CAAU,WAAV;AACE,EAAM,kBAAW;AAAA,
|
|
4
|
+
"sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\n\n\nexport namespace Timer {\n export const selector = 'dr-timer';\n export type Attribute = {\n value?: string;\n interval?: number;\n onCreated?: (timer: Timer) => void;\n }\n export class Timer extends ComponentBase<Attribute> {\n private interval?: any;\n private value?: number;\n\n\n onInitRender(param: any, rawSet: RawSet) {\n super.onInitRender(param, rawSet);\n this.getAttribute('onCreated')?.(this);\n // console.log('---2', this.getElement()?.isConnected)\n // const element = this.getElement();\n // if(element){\n // (element as any).component = this;\n // }\n }\n\n isRunning() {\n return this.value !== undefined;\n }\n\n start() {\n const timems = this.getAttribute('value');\n if (timems) {\n this.value = parseInt(timems);\n const intervalValue = this.getAttribute('interval') ?? 1000;\n console.log('int', this.value, intervalValue);\n this.interval = setInterval(() => {\n console.log('--------->',this.value)\n if (this.value) {\n this.value--;\n } else {\n clearInterval(this.interval);\n this.value = undefined;\n this.interval = undefined;\n }\n }, intervalValue)\n }\n }\n\n\n stop() {\n if (this.interval) {\n clearInterval(this.interval);\n this.interval = undefined;\n this.value = undefined;\n }\n }\n\n onChangeAttrRender(name: string, val: any, other: OtherData) {\n super.onChangeAttrRender(name, val, other);\n console.log('-----', name, val, this.getElement())\n }\n\n onDestroyRender(data: OnDestroyRenderParams) {\n super.onDestroyRender(data);\n if (this.interval){\n clearInterval(this.interval);\n }\n }\n }\n}\n\n\nexport default {\n timer: (config?: DomRenderRunConfig) => {\n return RawSet.createComponentTargetElement({\n name: `${Timer.selector}`,\n template: '#innerHTML#',\n objFactory: (e,o,r2, counstructorParam) => {\n return DomRender.run({rootObject: new Timer.Timer(...counstructorParam), config: config});\n }\n })\n },\n}"],
|
|
5
|
+
"mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,iBAAqC;AAC9C,SAAS,cAAc;AAKhB,IAAU;AAAA,CAAV,CAAU,WAAV;AACE,EAAM,kBAAW;AAAA,EAMjB,MAAMA,eAAc,cAAyB;AAAA,IAKlD,aAAa,OAAY,QAAgB;AACvC,YAAM,aAAa,OAAO,MAAM;AAChC,WAAK,aAAa,WAAW,IAAI,IAAI;AAAA,IAMvC;AAAA,IAEA,YAAY;AACV,aAAO,KAAK,UAAU;AAAA,IACxB;AAAA,IAEA,QAAQ;AACN,YAAM,SAAS,KAAK,aAAa,OAAO;AACxC,UAAI,QAAQ;AACV,aAAK,QAAQ,SAAS,MAAM;AAC5B,cAAM,gBAAgB,KAAK,aAAa,UAAU,KAAK;AACvD,gBAAQ,IAAI,OAAO,KAAK,OAAO,aAAa;AAC5C,aAAK,WAAW,YAAY,MAAM;AAChC,kBAAQ,IAAI,cAAa,KAAK,KAAK;AACnC,cAAI,KAAK,OAAO;AACd,iBAAK;AAAA,UACP,OAAO;AACL,0BAAc,KAAK,QAAQ;AAC3B,iBAAK,QAAQ;AACb,iBAAK,WAAW;AAAA,UAClB;AAAA,QACF,GAAG,aAAa;AAAA,MAClB;AAAA,IACF;AAAA,IAGA,OAAO;AACL,UAAI,KAAK,UAAU;AACjB,sBAAc,KAAK,QAAQ;AAC3B,aAAK,WAAW;AAChB,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAAA,IAEA,mBAAmB,MAAc,KAAU,OAAkB;AAC3D,YAAM,mBAAmB,MAAM,KAAK,KAAK;AACzC,cAAQ,IAAI,SAAS,MAAM,KAAK,KAAK,WAAW,CAAC;AAAA,IACnD;AAAA,IAEA,gBAAgB,MAA6B;AAC3C,YAAM,gBAAgB,IAAI;AAC1B,UAAI,KAAK,UAAS;AAChB,sBAAc,KAAK,QAAQ;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AA1DO,SAAM,QAAAA;AAAA,GAPE;AAqEjB,IAAO,gBAAQ;AAAA,EACb,OAAO,CAAC,WAAgC;AACtC,WAAO,OAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG,MAAM,QAAQ;AAAA,MACvB,UAAU;AAAA,MACV,YAAY,CAAC,GAAE,GAAE,IAAI,sBAAsB;AACzC,eAAO,UAAU,IAAI,EAAC,YAAY,IAAI,MAAM,MAAM,GAAG,iBAAiB,GAAG,OAAc,CAAC;AAAA,MAC1F;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
|
|
6
6
|
"names": ["Timer"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ValidUtils } from "@dooboostore/core/valid/ValidUtils";
|
|
1
2
|
const DomRenderNoProxyKey = "DomRender:NoProxy";
|
|
2
3
|
const DomRenderNoProxy = (target, propertyKey) => {
|
|
3
4
|
if (propertyKey === void 0) {
|
|
@@ -13,7 +14,7 @@ const getDomRenderNoProxy = (target, propertyKey) => {
|
|
|
13
14
|
return Reflect.getMetadata(DomRenderNoProxyKey, target, propertyKey);
|
|
14
15
|
};
|
|
15
16
|
const isDomRenderNoProxy = (target, propertyKey) => {
|
|
16
|
-
return getDomRenderNoProxy(target, propertyKey) === true;
|
|
17
|
+
return ValidUtils.isNullOrUndefined(target) || getDomRenderNoProxy(target, propertyKey) === true;
|
|
17
18
|
};
|
|
18
19
|
export {
|
|
19
20
|
DomRenderNoProxy,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/DomRenderNoProxy.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';\n\nexport const DomRenderNoProxyKey = 'DomRender:NoProxy'\nexport const DomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {\n // \uD074\uB798\uC2A4 \uB370\uCF54\uB808\uC774\uD130\uB85C \uC0AC\uC6A9\uB41C \uACBD\uC6B0\n if (propertyKey === undefined) {\n // target\uC740 \uD074\uB798\uC2A4 \uC0DD\uC131\uC790\n Reflect.defineMetadata(DomRenderNoProxyKey, true, target);\n return;\n }\n\n // \uD504\uB85C\uD37C\uD2F0 \uB370\uCF54\uB808\uC774\uD130\uB85C \uC0AC\uC6A9\uB41C \uACBD\uC6B0\n // target\uC740 \uD504\uB85C\uD1A0\uD0C0\uC785, propertyKey\uB294 \uD504\uB85C\uD37C\uD2F0 \uC774\uB984\n Reflect.defineMetadata(DomRenderNoProxyKey, true, target, propertyKey);\n};\n\nexport const getDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {\n // if (ValidUtils.isNotNullUndefined(target)) {\n // \uD074\uB798\uC2A4 \uB370\uCF54\uB808\uC774\uD130\n if (propertyKey === undefined) {\n return Reflect.getMetadata(DomRenderNoProxyKey, target);\n }\n // \uD504\uB85C\uD37C\uD2F0 \uB370\uCF54\uB808\uC774\uD130\n return Reflect.getMetadata(DomRenderNoProxyKey, target, propertyKey);\n // } else {\n // return undefined;\n // }\n}\n\nexport const isDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {\n return ValidUtils.isNullOrUndefined(target) || getDomRenderNoProxy(target, propertyKey) === true;\n}"],
|
|
5
|
+
"mappings": "AAAA,SAAS,kBAAkB;AAEpB,MAAM,sBAAsB;AAC5B,MAAM,mBAAmB,CAAC,QAAa,gBAAkC;AAE5E,MAAI,gBAAgB,QAAW;AAE7B,YAAQ,eAAe,qBAAqB,MAAM,MAAM;AACxD;AAAA,EACF;AAIA,UAAQ,eAAe,qBAAqB,MAAM,QAAQ,WAAW;AACzE;AAEO,MAAM,sBAAsB,CAAC,QAAa,gBAAkC;AAG/E,MAAI,gBAAgB,QAAW;AAC7B,WAAO,QAAQ,YAAY,qBAAqB,MAAM;AAAA,EACxD;AAEA,SAAO,QAAQ,YAAY,qBAAqB,QAAQ,WAAW;AAIvE;AAEO,MAAM,qBAAqB,CAAC,QAAa,gBAAkC;AAChF,SAAO,WAAW,kBAAkB,MAAM,KAAK,oBAAoB,QAAQ,WAAW,MAAM;AAC9F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/lifecycle/OnRawSetRendered.ts"],
|
|
4
|
+
"sourcesContent": ["import { RawSet, RenderResult } from '../rawsets/RawSet';\n\nexport type OnRawSetRenderedOtherData = {\n path?: string\n renderResult?: RenderResult\n // rawSet?: RawSet\n}\nexport interface OnRawSetRendered {\n// TODO: \uD638\uCD9C\uB41C\uACF3\uC5D0\uC11C \uB610 \uBCC0\uC218\uB97C \uC218\uC815\uD558\uAC8C\uB418\uBA74 \uBB34\uD55C\uB8E8\uD504\uB2C8\uAE50 \uC660\uB9CC\uD558\uBA74 \uC0AC\uC6A9\uBABB\uD558\uAC8C \uD574\uC57C\uD55C\uB2E4.\n onRawSetRendered (rawSet: RawSet,otherData: OnRawSetRenderedOtherData): Promise<void>;\n}\n\nexport const isOnRawSetRendered= (obj: any): obj is OnRawSetRendered => {\n return typeof obj?.onRawSetRendered === 'function';\n}\n"],
|
|
5
|
+
"mappings": "AAYO,MAAM,qBAAoB,CAAC,QAAsC;AACpE,SAAO,OAAO,KAAK,qBAAqB;AAC5C;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -9,5 +9,6 @@ export * from "./OnCreatedThisChild.js";
|
|
|
9
9
|
export * from "./OnDestroyRender.js";
|
|
10
10
|
export * from "./OnInitRender.js";
|
|
11
11
|
export * from "./OnProxyDomRender.js";
|
|
12
|
+
export * from "./OnRawSetRendered.js";
|
|
12
13
|
export * from "./dr-this/index.js";
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lifecycle/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './OnBeforeReturnGet';\nexport * from './OnBeforeReturnSet';\nexport * from './OnChangeAttrRender';\nexport * from './OnChildRenderedByProperty';\nexport * from './OnCreateRender';\nexport * from './OnCreateRenderData';\nexport * from './OnCreateRendered';\nexport * from './OnCreatedThisChild';\nexport * from './OnDestroyRender';\nexport * from './OnInitRender';\nexport * from './OnProxyDomRender';\nexport * from './dr-this';\n"],
|
|
5
|
-
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
4
|
+
"sourcesContent": ["export * from './OnBeforeReturnGet';\nexport * from './OnBeforeReturnSet';\nexport * from './OnChangeAttrRender';\nexport * from './OnChildRenderedByProperty';\nexport * from './OnCreateRender';\nexport * from './OnCreateRenderData';\nexport * from './OnCreateRendered';\nexport * from './OnCreatedThisChild';\nexport * from './OnDestroyRender';\nexport * from './OnInitRender';\nexport * from './OnProxyDomRender';\nexport * from './OnRawSetRendered';\nexport * from './dr-this';\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,6 +50,8 @@ class DrTargetElement extends OperatorExecuter {
|
|
|
50
50
|
targetFragment = fragment;
|
|
51
51
|
}
|
|
52
52
|
const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
|
|
53
|
+
rr.forEach((it, index) => {
|
|
54
|
+
});
|
|
53
55
|
if (targetElement.noStrip) {
|
|
54
56
|
Array.from(targetFragment.childNodes || []).forEach((child) => {
|
|
55
57
|
documentFragment.firstElementChild?.appendChild(child);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/operators/DrTargetElement.ts"],
|
|
4
|
-
"sourcesContent": ["import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';\nimport { RawSet } from '../rawsets/RawSet';\nimport { CreatorMetaData } from '../rawsets/CreatorMetaData';\nimport {\n AfterCallBack,\n ElementSource,\n ExecuteState,\n OperatorExecuter,\n ReturnContainer,\n Source\n} from './OperatorExecuter';\nimport { Render } from '../rawsets/Render';\n\ndeclare global {\n interface Window {\n HTMLMetaElement: typeof HTMLMetaElement;\n }\n}\n\n// \uC5EC\uAE30\uC11C \uC0AC\uC6A9\uC790\uAC00 \uB4F1\uB85D\uD55C TargetElement\uAC00 \uB4E4\uC5B4\uAC04\uB2E4.\nexport class DrTargetElement extends OperatorExecuter<void> {\n constructor(\n rawSet: RawSet,\n render: Render,\n returnContainer: ReturnContainer,\n elementSource: ElementSource,\n source: Source,\n afterCallBack: AfterCallBack\n ) {\n source.operatorAround = undefined;\n super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n }\n\n async execute(): Promise<ExecuteState> {\n const targetElement = this.source.config?.targetElements?.find(\n it => it.name.toLowerCase() === this.elementSource.element.tagName.toLowerCase()\n );\n if (targetElement) {\n if (\n this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement &&\n this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement\n ) {\n this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);\n this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);\n }\n\n const documentFragment = await targetElement.callBack(\n this.elementSource.element,\n this.source.obj,\n this.rawSet,\n this.elementSource.attrs,\n this.source.config\n );\n if (documentFragment) {\n const detectAction = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);\n // const dictionaryKey = this.elementSource.element.getAttribute(RawSet.DR_DICTIONARY_OPTIONKEYNAME);\n // console.log('dictionaryKey', dictionaryKey);\n // const render = (documentFragment as any).render;\n this.rawSet.dataSet.fragment = documentFragment;\n // if (documentFragment) {\n // const tempDiv = this.source.config.window.document.createElement('div');\n // tempDiv.appendChild(documentFragment.cloneNode(true));\n // console.log('DocumentFragment innerHTML:', tempDiv.innerHTML);\n // }\n\n // this.rawSet.dataSet??={};\n // this.rawSet.dataSet.data = render.component;\n if (detectAction && this.rawSet.dataSet.render) {\n // TODO: \uC5C6\uC5B4\uC838\uC57C\uB420\uB4EF?\n this.rawSet.detect = {\n action: () => {\n const script = `var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; ${detectAction} `;\n ScriptUtils.evaluate(\n script,\n Object.assign(this.source.obj, {\n __render: this.rawSet.dataSet.render\n })\n );\n }\n };\n }\n // fag.append(documentFragment)\n\n // console.log('----------1', ElementUtils.toInnerHTML(documentFragment, {document: this.source.config.window.document}));\n // await Promises.sleep(1000)\n let targetFragment = documentFragment;\n if (targetElement.noStrip) {\n // documentFragment.firstElementChild.classList.add(`${this.rawSet.uuid}___DrTargetElement`)\n const fragment = this.source.config.window.document.createDocumentFragment();\n Array.from(documentFragment.firstElementChild?.childNodes || []).forEach(child => {\n // fragment.appendChild(child.cloneNode(true));\n fragment.appendChild(child);\n });\n // fragment.append(documentFragment.firstElementChild);\n targetFragment = fragment;\n }\n // console.log('----------2', ElementUtils.toInnerHTML(targetFragment, {document: this.source.config.window.document}));\n const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);\n if (targetElement.noStrip) {\n Array.from(targetFragment.childNodes || []).forEach(child => {\n documentFragment.firstElementChild?.appendChild(child);\n });\n }\n this.elementSource.element.parentNode?.replaceChild(documentFragment, this.elementSource.element);\n this.returnContainer.raws.push(...rr);\n this.afterCallBack.onElementInitCallBacks.push({\n name: targetElement.name.toLowerCase(),\n obj: this.source.obj,\n targetElement,\n creatorMetaData: targetElement.__creatorMetaData as CreatorMetaData\n });\n // console.log('sssssssssssssss', this.source.obj);\n targetElement?.complete?.(this.elementSource.element, this.source.obj, this.rawSet);\n }\n return ExecuteState.EXECUTE;\n }\n return ExecuteState.NO_EXECUTE;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;
|
|
4
|
+
"sourcesContent": ["import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';\nimport { RawSet } from '../rawsets/RawSet';\nimport { CreatorMetaData } from '../rawsets/CreatorMetaData';\nimport {\n AfterCallBack,\n ElementSource,\n ExecuteState,\n OperatorExecuter,\n ReturnContainer,\n Source\n} from './OperatorExecuter';\nimport { Render } from '../rawsets/Render';\nimport { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';\n\ndeclare global {\n interface Window {\n HTMLMetaElement: typeof HTMLMetaElement;\n }\n}\n\n// \uC5EC\uAE30\uC11C \uC0AC\uC6A9\uC790\uAC00 \uB4F1\uB85D\uD55C TargetElement\uAC00 \uB4E4\uC5B4\uAC04\uB2E4.\nexport class DrTargetElement extends OperatorExecuter<void> {\n constructor(\n rawSet: RawSet,\n render: Render,\n returnContainer: ReturnContainer,\n elementSource: ElementSource,\n source: Source,\n afterCallBack: AfterCallBack\n ) {\n source.operatorAround = undefined;\n super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n }\n\n async execute(): Promise<ExecuteState> {\n const targetElement = this.source.config?.targetElements?.find(\n it => it.name.toLowerCase() === this.elementSource.element.tagName.toLowerCase()\n );\n if (targetElement) {\n if (\n this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement &&\n this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement\n ) {\n this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);\n this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);\n }\n\n const documentFragment = await targetElement.callBack(\n this.elementSource.element,\n this.source.obj,\n this.rawSet,\n this.elementSource.attrs,\n this.source.config\n );\n if (documentFragment) {\n const detectAction = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);\n // const dictionaryKey = this.elementSource.element.getAttribute(RawSet.DR_DICTIONARY_OPTIONKEYNAME);\n // console.log('dictionaryKey', dictionaryKey);\n // const render = (documentFragment as any).render;\n this.rawSet.dataSet.fragment = documentFragment;\n // if (documentFragment) {\n // const tempDiv = this.source.config.window.document.createElement('div');\n // tempDiv.appendChild(documentFragment.cloneNode(true));\n // console.log('DocumentFragment innerHTML:', tempDiv.innerHTML);\n // }\n\n // this.rawSet.dataSet??={};\n // this.rawSet.dataSet.data = render.component;\n if (detectAction && this.rawSet.dataSet.render) {\n // TODO: \uC5C6\uC5B4\uC838\uC57C\uB420\uB4EF?\n this.rawSet.detect = {\n action: () => {\n const script = `var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; ${detectAction} `;\n ScriptUtils.evaluate(\n script,\n Object.assign(this.source.obj, {\n __render: this.rawSet.dataSet.render\n })\n );\n }\n };\n }\n // fag.append(documentFragment)\n\n // console.log('----------1', ElementUtils.toInnerHTML(documentFragment, {document: this.source.config.window.document}));\n // await Promises.sleep(1000)\n let targetFragment = documentFragment;\n if (targetElement.noStrip) {\n // documentFragment.firstElementChild.classList.add(`${this.rawSet.uuid}___DrTargetElement`)\n const fragment = this.source.config.window.document.createDocumentFragment();\n Array.from(documentFragment.firstElementChild?.childNodes || []).forEach(child => {\n // fragment.appendChild(child.cloneNode(true));\n fragment.appendChild(child);\n });\n // fragment.append(documentFragment.firstElementChild);\n targetFragment = fragment;\n }\n // console.log('----------2', ElementUtils.toInnerHTML(targetFragment, {document: this.source.config.window.document}));\n const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);\n rr.forEach((it, index) => {\n\n // const z = ElementUtils.toInnerHTML(it.dataSet.fragment, {document: this.source.config.window.document});\n // console.log('-z--z('+index+')', z, it);\n // it.point.start;\n // // \uC0C8\uB85C\uC6B4 comment element \uCD94\uAC00\n // const comment = this.source.config.window.document.createComment('\uC0C8\uB85C \uB9CC\uB4E0 comment element');\n // it.point.start.parentNode?.insertBefore(comment, it.point.start.nextSibling);\n })\n // for (let rawSet of rr) {\n // await rawSet.render(this.source.obj, this.source.config)\n // }\n // console.log('cccccccccccccccccccccc', rr, typeof Window);\n if (targetElement.noStrip) {\n Array.from(targetFragment.childNodes || []).forEach(child => {\n documentFragment.firstElementChild?.appendChild(child);\n });\n }\n this.elementSource.element.parentNode?.replaceChild(documentFragment, this.elementSource.element);\n this.returnContainer.raws.push(...rr);\n this.afterCallBack.onElementInitCallBacks.push({\n name: targetElement.name.toLowerCase(),\n obj: this.source.obj,\n targetElement,\n creatorMetaData: targetElement.__creatorMetaData as CreatorMetaData\n });\n // console.log('sssssssssssssss', this.source.obj);\n targetElement?.complete?.(this.elementSource.element, this.source.obj, this.rawSet);\n }\n return ExecuteState.EXECUTE;\n }\n return ExecuteState.NO_EXECUTE;\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;AAWA,MAAM,wBAAwB,iBAAuB;AAAA,EAC1D,YACE,QACA,QACA,iBACA,eACA,QACA,eACA;AACA,WAAO,iBAAiB;AACxB,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACpF;AAAA,EAEA,MAAM,UAAiC;AACrC,UAAM,gBAAgB,KAAK,OAAO,QAAQ,gBAAgB;AAAA,MACxD,QAAM,GAAG,KAAK,YAAY,MAAM,KAAK,cAAc,QAAQ,QAAQ,YAAY;AAAA,IACjF;AACA,QAAI,eAAe;AACjB,UACE,KAAK,OAAO,MAAM,iBAAiB,KAAK,OAAO,OAAO,OAAO,mBAC7D,KAAK,OAAO,MAAM,eAAe,KAAK,OAAO,OAAO,OAAO,iBAC3D;AACA,aAAK,OAAO,MAAM,MAAM,aAAa,aAAa,+BAA+B,KAAK,OAAO,IAAI,EAAE;AACnG,aAAK,OAAO,MAAM,IAAI,aAAa,aAAa,+BAA+B,KAAK,OAAO,IAAI,EAAE;AAAA,MACnG;AAEA,YAAM,mBAAmB,MAAM,cAAc;AAAA,QAC3C,KAAK,cAAc;AAAA,QACnB,KAAK,OAAO;AAAA,QACZ,KAAK;AAAA,QACL,KAAK,cAAc;AAAA,QACnB,KAAK,OAAO;AAAA,MACd;AACA,UAAI,kBAAkB;AACpB,cAAM,eAAe,KAAK,cAAc,QAAQ,aAAa,OAAO,cAAc;AAIlF,aAAK,OAAO,QAAQ,WAAW;AAS/B,YAAI,gBAAgB,KAAK,OAAO,QAAQ,QAAQ;AAE9C,eAAK,OAAO,SAAS;AAAA,YACnB,QAAQ,MAAM;AACZ,oBAAM,SAAS,wKAAwK,YAAY;AACnM,0BAAY;AAAA,gBACV;AAAA,gBACA,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,kBAC7B,UAAU,KAAK,OAAO,QAAQ;AAAA,gBAChC,CAAC;AAAA,cACH;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAKA,YAAI,iBAAiB;AACrB,YAAI,cAAc,SAAS;AAEzB,gBAAM,WAAW,KAAK,OAAO,OAAO,OAAO,SAAS,uBAAuB;AAC3E,gBAAM,KAAK,iBAAiB,mBAAmB,cAAc,CAAC,CAAC,EAAE,QAAQ,WAAS;AAEhF,qBAAS,YAAY,KAAK;AAAA,UAC5B,CAAC;AAED,2BAAiB;AAAA,QACnB;AAEA,cAAM,KAAK,OAAO,kBAAkB,gBAAgB,KAAK,OAAO,KAAK,KAAK,OAAO,MAAM;AACvF,WAAG,QAAQ,CAAC,IAAI,UAAU;AAAA,QAQ1B,CAAC;AAKD,YAAI,cAAc,SAAS;AACzB,gBAAM,KAAK,eAAe,cAAc,CAAC,CAAC,EAAE,QAAQ,WAAS;AAC3D,6BAAiB,mBAAmB,YAAY,KAAK;AAAA,UACvD,CAAC;AAAA,QACH;AACA,aAAK,cAAc,QAAQ,YAAY,aAAa,kBAAkB,KAAK,cAAc,OAAO;AAChG,aAAK,gBAAgB,KAAK,KAAK,GAAG,EAAE;AACpC,aAAK,cAAc,uBAAuB,KAAK;AAAA,UAC7C,MAAM,cAAc,KAAK,YAAY;AAAA,UACrC,KAAK,KAAK,OAAO;AAAA,UACjB;AAAA,UACA,iBAAiB,cAAc;AAAA,QACjC,CAAC;AAED,uBAAe,WAAW,KAAK,cAAc,SAAS,KAAK,OAAO,KAAK,KAAK,MAAM;AAAA,MACpF;AACA,aAAO,aAAa;AAAA,IACtB;AACA,WAAO,aAAa;AAAA,EACtB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|