@dooboostore/simple-web-component 1.0.15 → 1.0.17
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 +275 -91
- package/dist/cjs/decorators/addEventListener.js +2 -3
- package/dist/cjs/decorators/addEventListener.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +161 -34
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/emitCustomEvent.js +2 -14
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/query.js +47 -36
- package/dist/cjs/decorators/query.js.map +2 -2
- package/dist/cjs/decorators/queryAll.js +42 -36
- package/dist/cjs/decorators/queryAll.js.map +2 -2
- package/dist/cjs/elements/SwcAppEngine.js +2 -1
- package/dist/cjs/elements/SwcAppEngine.js.map +2 -2
- package/dist/cjs/elements/SwcAsync.js +188 -0
- package/dist/cjs/elements/SwcAsync.js.map +7 -0
- package/dist/cjs/elements/SwcChoose.js +155 -0
- package/dist/cjs/elements/SwcChoose.js.map +7 -0
- package/dist/cjs/elements/SwcIf.js +167 -0
- package/dist/cjs/elements/SwcIf.js.map +7 -0
- package/dist/cjs/elements/SwcLoop.js +246 -0
- package/dist/cjs/elements/SwcLoop.js.map +7 -0
- package/dist/cjs/elements/SwcSubTemplates.js +65 -0
- package/dist/cjs/elements/SwcSubTemplates.js.map +7 -0
- package/dist/cjs/elements/index.js +7 -0
- package/dist/cjs/elements/index.js.map +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +1 -0
- package/dist/cjs/types.js.map +2 -2
- package/dist/cjs/utils/Utils.js +92 -162
- package/dist/cjs/utils/Utils.js.map +3 -3
- package/dist/esm/decorators/addEventListener.js +2 -3
- package/dist/esm/decorators/addEventListener.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +161 -34
- package/dist/esm/decorators/elementDefine.js.map +3 -3
- package/dist/esm/decorators/emitCustomEvent.js +2 -14
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/query.js +47 -36
- package/dist/esm/decorators/query.js.map +2 -2
- package/dist/esm/decorators/queryAll.js +42 -36
- package/dist/esm/decorators/queryAll.js.map +2 -2
- package/dist/esm/elements/SwcAppEngine.js +2 -1
- package/dist/esm/elements/SwcAppEngine.js.map +2 -2
- package/dist/esm/elements/SwcAsync.js +169 -0
- package/dist/esm/elements/SwcAsync.js.map +7 -0
- package/dist/esm/elements/SwcChoose.js +136 -0
- package/dist/esm/elements/SwcChoose.js.map +7 -0
- package/dist/esm/elements/SwcIf.js +148 -0
- package/dist/esm/elements/SwcIf.js.map +7 -0
- package/dist/esm/elements/SwcLoop.js +227 -0
- package/dist/esm/elements/SwcLoop.js.map +7 -0
- package/dist/esm/elements/SwcSubTemplates.js +46 -0
- package/dist/esm/elements/SwcSubTemplates.js.map +7 -0
- package/dist/esm/elements/index.js +7 -0
- package/dist/esm/elements/index.js.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +2 -2
- package/dist/esm/utils/Utils.js +92 -162
- package/dist/esm/utils/Utils.js.map +3 -3
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +1150 -326
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/decorators/addEventListener.d.ts +10 -4
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +4 -5
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/queryAll.d.ts +4 -5
- package/dist/types/decorators/queryAll.d.ts.map +1 -1
- package/dist/types/elements/SwcAppEngine.d.ts.map +1 -1
- package/dist/types/elements/SwcAsync.d.ts +16 -0
- package/dist/types/elements/SwcAsync.d.ts.map +1 -0
- package/dist/types/elements/SwcChoose.d.ts +13 -0
- package/dist/types/elements/SwcChoose.d.ts.map +1 -0
- package/dist/types/elements/SwcIf.d.ts +15 -0
- package/dist/types/elements/SwcIf.d.ts.map +1 -0
- package/dist/types/elements/SwcLoop.d.ts +20 -0
- package/dist/types/elements/SwcLoop.d.ts.map +1 -0
- package/dist/types/elements/SwcSubTemplates.d.ts +13 -0
- package/dist/types/elements/SwcSubTemplates.d.ts.map +1 -0
- package/dist/types/elements/index.d.ts +7 -0
- package/dist/types/elements/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/types.d.ts +11 -1
- package/dist/types/types.d.ts.map +1 -1
- package/dist/types/utils/Utils.d.ts +19 -21
- package/dist/types/utils/Utils.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +1150 -326
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +10 -3
- package/src/decorators/addEventListener.ts +11 -7
- package/src/decorators/elementDefine.ts +165 -39
- package/src/decorators/emitCustomEvent.ts +5 -21
- package/src/decorators/query.ts +46 -41
- package/src/decorators/queryAll.ts +45 -41
- package/src/elements/SwcAppEngine.ts +2 -1
- package/src/elements/SwcAsync.ts +163 -0
- package/src/elements/SwcChoose.ts +127 -0
- package/src/elements/SwcIf.ts +134 -0
- package/src/elements/SwcLoop.ts +215 -0
- package/src/elements/SwcSubTemplates.ts +19 -0
- package/src/elements/index.ts +8 -3
- package/src/index.ts +1 -1
- package/src/types.ts +15 -5
- package/src/utils/Utils.ts +111 -197
|
@@ -1,47 +1,53 @@
|
|
|
1
1
|
import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
|
|
2
|
+
import { getElementConfig } from "./elementDefine.js";
|
|
3
|
+
import { SwcUtils } from "../utils/Utils.js";
|
|
2
4
|
const QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
|
|
3
|
-
function queryAll(
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
function queryAll(selector, options = {}) {
|
|
6
|
+
return (target, propertyKey, descriptor) => {
|
|
7
|
+
if (descriptor !== void 0) {
|
|
8
|
+
throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
|
|
9
|
+
}
|
|
6
10
|
const constructor = target.constructor;
|
|
7
11
|
let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
|
|
8
12
|
if (!queries) {
|
|
9
13
|
queries = [];
|
|
10
14
|
ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
|
|
11
15
|
}
|
|
12
|
-
queries.push({ selector, options, propertyKey
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
16
|
+
queries.push({ selector, options, propertyKey });
|
|
17
|
+
Object.defineProperty(target, propertyKey, {
|
|
18
|
+
get() {
|
|
19
|
+
const hostSet = SwcUtils.getHostSet(this);
|
|
20
|
+
if (selector === ":hosts")
|
|
21
|
+
return hostSet.$hosts;
|
|
22
|
+
if (selector === ":appHosts")
|
|
23
|
+
return hostSet.$appHosts;
|
|
24
|
+
const config = getElementConfig(this);
|
|
25
|
+
const win = config?.window || window;
|
|
26
|
+
const doc = win.document;
|
|
27
|
+
if (selector === ":window")
|
|
28
|
+
return [win];
|
|
29
|
+
if (selector === ":document")
|
|
30
|
+
return [doc];
|
|
31
|
+
if (!selector || selector === ":host")
|
|
32
|
+
return [this];
|
|
33
|
+
const r = options.root || "auto";
|
|
34
|
+
if (r === "shadow") {
|
|
35
|
+
return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
|
|
36
|
+
}
|
|
37
|
+
if (r === "light") {
|
|
38
|
+
return this.querySelectorAll(selector);
|
|
39
|
+
}
|
|
40
|
+
if (r === "all") {
|
|
41
|
+
const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
42
|
+
const lNodes = Array.from(this.querySelectorAll(selector));
|
|
43
|
+
return [...sNodes, ...lNodes];
|
|
44
|
+
}
|
|
45
|
+
const root = this.shadowRoot || this;
|
|
46
|
+
return root.querySelectorAll(selector);
|
|
47
|
+
},
|
|
48
|
+
enumerable: true,
|
|
49
|
+
configurable: true
|
|
50
|
+
});
|
|
45
51
|
};
|
|
46
52
|
}
|
|
47
53
|
const getQueryAllMetadata = (target) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/queryAll.ts"],
|
|
4
|
-
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface QueryAllOptions {\n
|
|
5
|
-
"mappings": "AAAA,SAAS,oBAAoB;
|
|
4
|
+
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { getElementConfig } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\n\nexport interface QueryAllOptions {\n root?: 'light' | 'shadow' | 'all' | 'auto';\n}\n\nexport interface QueryAllMetadata {\n selector: string;\n options: QueryAllOptions;\n propertyKey: string | symbol;\n}\n\nexport const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');\n\n/**\n * @queryAll decorator to inject a list of elements into a class property.\n */\nexport function queryAll(selector: string, options: QueryAllOptions = {}): PropertyDecorator {\n return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {\n if (descriptor !== undefined) {\n throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);\n }\n\n const constructor = target.constructor;\n let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);\n if (!queries) {\n queries = [];\n ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);\n }\n queries.push({ selector, options, propertyKey });\n\n Object.defineProperty(target, propertyKey, {\n get(this: HTMLElement) {\n // --- Special Selectors: HostSet ---\n const hostSet = SwcUtils.getHostSet(this);\n if (selector === ':hosts') return hostSet.$hosts;\n if (selector === ':appHosts') return hostSet.$appHosts;\n\n // --- Special Selectors: Env ---\n const config = getElementConfig(this);\n const win = config?.window || window;\n const doc = win.document;\n\n if (selector === ':window') return [win];\n if (selector === ':document') return [doc];\n if (!selector || selector === ':host') return [this];\n\n // --- Standard Selectors ---\n const r = options.root || 'auto';\n\n if (r === 'shadow') {\n return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];\n }\n if (r === 'light') {\n return this.querySelectorAll(selector);\n }\n if (r === 'all') {\n const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];\n const lNodes = Array.from(this.querySelectorAll(selector));\n return [...sNodes, ...lNodes];\n }\n // auto\n const root = this.shadowRoot || this;\n return root.querySelectorAll(selector);\n },\n enumerable: true,\n configurable: true\n });\n };\n}\n\nexport const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {\n const constructor = target instanceof Function ? target : target.constructor;\n return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAYlB,MAAM,yBAAyB,OAAO,gCAAgC;AAKvE,SAAU,SAAS,UAAkB,UAA2B,CAAA,GAAE;AACtE,SAAO,CAAC,QAAgB,aAA8B,eAA4B;AAChF,QAAI,eAAe,QAAW;AAC5B,YAAM,IAAI,MAAM,2DAA2D,OAAO,WAAW,CAAC,GAAG;IACnG;AAEA,UAAM,cAAc,OAAO;AAC3B,QAAI,UAAU,aAAa,YAAgC,wBAAwB,WAAW;AAC9F,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAA;AACV,mBAAa,eAAe,wBAAwB,SAAS,WAAW;IAC1E;AACA,YAAQ,KAAK,EAAE,UAAU,SAAS,YAAW,CAAE;AAE/C,WAAO,eAAe,QAAQ,aAAa;MACzC,MAAG;AAED,cAAM,UAAU,SAAS,WAAW,IAAI;AACxC,YAAI,aAAa;AAAU,iBAAO,QAAQ;AAC1C,YAAI,aAAa;AAAa,iBAAO,QAAQ;AAG7C,cAAM,SAAS,iBAAiB,IAAI;AACpC,cAAM,MAAM,QAAQ,UAAU;AAC9B,cAAM,MAAM,IAAI;AAEhB,YAAI,aAAa;AAAW,iBAAO,CAAC,GAAG;AACvC,YAAI,aAAa;AAAa,iBAAO,CAAC,GAAG;AACzC,YAAI,CAAC,YAAY,aAAa;AAAS,iBAAO,CAAC,IAAI;AAGnD,cAAM,IAAI,QAAQ,QAAQ;AAE1B,YAAI,MAAM,UAAU;AAClB,iBAAO,KAAK,aAAa,KAAK,WAAW,iBAAiB,QAAQ,IAAI,CAAA;QACxE;AACA,YAAI,MAAM,SAAS;AACjB,iBAAO,KAAK,iBAAiB,QAAQ;QACvC;AACA,YAAI,MAAM,OAAO;AACf,gBAAM,SAAS,KAAK,aAAa,MAAM,KAAK,KAAK,WAAW,iBAAiB,QAAQ,CAAC,IAAI,CAAA;AAC1F,gBAAM,SAAS,MAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC;AACzD,iBAAO,CAAC,GAAG,QAAQ,GAAG,MAAM;QAC9B;AAEA,cAAM,OAAO,KAAK,cAAc;AAChC,eAAO,KAAK,iBAAiB,QAAQ;MACvC;MACA,YAAY;MACZ,cAAc;KACf;EACH;AACF;AAEO,MAAM,sBAAsB,CAAC,WAA+C;AACjF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,wBAAwB,WAAW;AACrE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,7 @@ import { HashRouter } from "@dooboostore/core-web/routers/HashRouter";
|
|
|
4
4
|
import { ElementRouter } from "../router/ElementRouter.js";
|
|
5
5
|
import { SimOption } from "@dooboostore/simple-boot/SimOption";
|
|
6
6
|
import { Router } from "@dooboostore/core-web/routers/Router";
|
|
7
|
+
import { FunctionUtils } from "@dooboostore/core/function/FunctionUtils";
|
|
7
8
|
class SwcAppEngine {
|
|
8
9
|
constructor(host) {
|
|
9
10
|
this.host = host;
|
|
@@ -16,7 +17,7 @@ class SwcAppEngine {
|
|
|
16
17
|
const configStr = this.host.getAttribute("swc-get-application-config");
|
|
17
18
|
if (!configStr) return;
|
|
18
19
|
try {
|
|
19
|
-
const userConfig =
|
|
20
|
+
const userConfig = FunctionUtils.executeReturn({ script: configStr, context: this.host });
|
|
20
21
|
if (userConfig && userConfig.rootRouter) {
|
|
21
22
|
const _config = {
|
|
22
23
|
routeType: "element",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/elements/SwcAppEngine.ts"],
|
|
4
|
-
"sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';\nimport { PathRouter } from '@dooboostore/core-web/routers/PathRouter';\nimport { HashRouter } from '@dooboostore/core-web/routers/HashRouter';\nimport { ElementRouter } from '../router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot/SimOption';\nimport { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';\nimport { Subscription } from '@dooboostore/core/message/Subscription';\nimport { ConstructorType, Optional } from '@dooboostore/core/types';\n\nexport type SwcConfigType = {\n rootRouter: ConstructorType<any>;\n routeType: 'path' | 'hash' | 'element';\n path?: string;\n window: Window;\n};\n\nexport type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n public simpleApplication?: SimpleApplication;\n public router?: Router;\n private routerSubscription?: Subscription;\n private _isInitialized = false;\n\n constructor(private host: HTMLElement) {}\n\n async connect() {\n if (this._isInitialized) return;\n this._isInitialized = true;\n\n // Wait for event loop to ensure attributes and global scripts are ready\n await new Promise(resolve => setTimeout(resolve, 0));\n\n const configStr = this.host.getAttribute('swc-get-application-config');\n if (!configStr) return;\n\n try {\n const userConfig: SwcAttributeConfigType =
|
|
5
|
-
"mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,cAA+B;
|
|
4
|
+
"sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';\nimport { PathRouter } from '@dooboostore/core-web/routers/PathRouter';\nimport { HashRouter } from '@dooboostore/core-web/routers/HashRouter';\nimport { ElementRouter } from '../router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot/SimOption';\nimport { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';\nimport { Subscription } from '@dooboostore/core/message/Subscription';\nimport { ConstructorType, Optional } from '@dooboostore/core/types';\nimport { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';\n\nexport type SwcConfigType = {\n rootRouter: ConstructorType<any>;\n routeType: 'path' | 'hash' | 'element';\n path?: string;\n window: Window;\n};\n\nexport type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n public simpleApplication?: SimpleApplication;\n public router?: Router;\n private routerSubscription?: Subscription;\n private _isInitialized = false;\n\n constructor(private host: HTMLElement) {}\n\n async connect() {\n if (this._isInitialized) return;\n this._isInitialized = true;\n\n // Wait for event loop to ensure attributes and global scripts are ready\n await new Promise(resolve => setTimeout(resolve, 0));\n\n const configStr = this.host.getAttribute('swc-get-application-config');\n if (!configStr) return;\n\n try {\n const userConfig: SwcAttributeConfigType = FunctionUtils.executeReturn({ script: configStr, context: this.host });\n if (userConfig && userConfig.rootRouter) {\n const _config: SwcConfigType = {\n routeType: 'element',\n window: window,\n ...userConfig\n } as SwcConfigType;\n\n // Router Selection\n if (_config.routeType === 'path') {\n this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });\n } else if (_config.routeType === 'hash') {\n this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });\n } else if (_config.routeType === 'element') {\n this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });\n }\n\n // Routing sync\n if (this.router) {\n this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {\n if (route.triggerPoint === 'end') {\n this.simpleApplication?.routing(route.path);\n }\n });\n }\n\n // App start\n this.simpleApplication = new SimpleApplication(new SimOption({ excludeProxys: [Node], rootRouter: _config.rootRouter }));\n\n const otherInstanceSim = new Map<any, any>();\n if (this.router) otherInstanceSim.set(Router, this.router);\n this.simpleApplication.run(otherInstanceSim);\n\n // Rendering\n const data = this.simpleApplication.sim(_config.rootRouter);\n if (data instanceof Node) {\n if (this.host.shadowRoot) this.host.shadowRoot.replaceChildren(data);\n else this.host.replaceChildren(data);\n }\n\n if (_config.path) await this.router?.go(_config.path);\n }\n } catch (e) {\n console.error('[SWC-APP-ENGINE] Init failed:', e);\n }\n }\n\n disconnect() {\n this.routerSubscription?.unsubscribe();\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,cAA+B;AAGxC,SAAS,qBAAqB;AAWvB,MAAM,aAAa;AAAA,EAMxB,YAAoB,MAAmB;AAAnB;AAFpB,SAAQ,iBAAiB;AAAA,EAEe;AAAA,EAExC,MAAM,UAAU;AACd,QAAI,KAAK,eAAgB;AACzB,SAAK,iBAAiB;AAGtB,UAAM,IAAI,QAAQ,aAAW,WAAW,SAAS,CAAC,CAAC;AAEnD,UAAM,YAAY,KAAK,KAAK,aAAa,4BAA4B;AACrE,QAAI,CAAC,UAAW;AAEhB,QAAI;AACF,YAAM,aAAqC,cAAc,cAAc,EAAE,QAAQ,WAAW,SAAS,KAAK,KAAK,CAAC;AAChH,UAAI,cAAc,WAAW,YAAY;AACvC,cAAM,UAAyB;AAAA,UAC7B,WAAW;AAAA,UACX;AAAA,UACA,GAAG;AAAA,QACL;AAGA,YAAI,QAAQ,cAAc,QAAQ;AAChC,eAAK,SAAS,IAAI,WAAW,EAAE,QAAQ,QAAQ,QAAQ,UAAU,QAAQ,KAAK,CAAC;AAAA,QACjF,WAAW,QAAQ,cAAc,QAAQ;AACvC,eAAK,SAAS,IAAI,WAAW,EAAE,QAAQ,QAAQ,QAAQ,UAAU,QAAQ,KAAK,CAAC;AAAA,QACjF,WAAW,QAAQ,cAAc,WAAW;AAC1C,eAAK,SAAS,IAAI,cAAc,EAAE,QAAQ,QAAQ,QAAQ,UAAU,QAAQ,KAAK,CAAC;AAAA,QACpF;AAGA,YAAI,KAAK,QAAQ;AACf,eAAK,qBAAqB,KAAK,OAAO,WAAW,UAAU,CAAC,UAA2B;AACrF,gBAAI,MAAM,iBAAiB,OAAO;AAChC,mBAAK,mBAAmB,QAAQ,MAAM,IAAI;AAAA,YAC5C;AAAA,UACF,CAAC;AAAA,QACH;AAGA,aAAK,oBAAoB,IAAI,kBAAkB,IAAI,UAAU,EAAE,eAAe,CAAC,IAAI,GAAG,YAAY,QAAQ,WAAW,CAAC,CAAC;AAEvH,cAAM,mBAAmB,oBAAI,IAAc;AAC3C,YAAI,KAAK,OAAQ,kBAAiB,IAAI,QAAQ,KAAK,MAAM;AACzD,aAAK,kBAAkB,IAAI,gBAAgB;AAG3C,cAAM,OAAO,KAAK,kBAAkB,IAAI,QAAQ,UAAU;AAC1D,YAAI,gBAAgB,MAAM;AACxB,cAAI,KAAK,KAAK,WAAY,MAAK,KAAK,WAAW,gBAAgB,IAAI;AAAA,cAC9D,MAAK,KAAK,gBAAgB,IAAI;AAAA,QACrC;AAEA,YAAI,QAAQ,KAAM,OAAM,KAAK,QAAQ,GAAG,QAAQ,IAAI;AAAA,MACtD;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,iCAAiC,CAAC;AAAA,IAClD;AAAA,EACF;AAAA,EAEA,aAAa;AACX,SAAK,oBAAoB,YAAY;AAAA,EACvC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
var __decorate = function(decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __metadata = function(k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
10
|
+
import { elementDefine } from "../decorators/elementDefine.js";
|
|
11
|
+
import { changedAttribute } from "../decorators/changedAttribute.js";
|
|
12
|
+
import { SwcUtils } from "../utils/Utils.js";
|
|
13
|
+
import { FunctionUtils } from "@dooboostore/core/function/FunctionUtils";
|
|
14
|
+
let SwcAsync = class SwcAsync2 extends HTMLTemplateElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this._nodes = [];
|
|
18
|
+
this._currentPromise = null;
|
|
19
|
+
this._value = null;
|
|
20
|
+
}
|
|
21
|
+
get value() {
|
|
22
|
+
return this._value;
|
|
23
|
+
}
|
|
24
|
+
set value(nv) {
|
|
25
|
+
if (nv instanceof Promise) {
|
|
26
|
+
this.handlePromise(nv);
|
|
27
|
+
} else {
|
|
28
|
+
this._value = nv;
|
|
29
|
+
this.render(nv === null ? "default" : "success", nv);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
refresh(newValue) {
|
|
33
|
+
const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
|
|
34
|
+
if (!script) {
|
|
35
|
+
this.value = null;
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
if (!this.parentElement)
|
|
39
|
+
return;
|
|
40
|
+
const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
|
|
41
|
+
try {
|
|
42
|
+
const result = FunctionUtils.executeReturn({
|
|
43
|
+
script,
|
|
44
|
+
context: this,
|
|
45
|
+
args: helperHostSet
|
|
46
|
+
});
|
|
47
|
+
if (result instanceof Promise) {
|
|
48
|
+
this.handlePromise(result);
|
|
49
|
+
} else {
|
|
50
|
+
this.value = result;
|
|
51
|
+
}
|
|
52
|
+
} catch (e) {
|
|
53
|
+
this.render("error", e);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
async handlePromise(promise) {
|
|
57
|
+
this._currentPromise = promise;
|
|
58
|
+
this.render("loading");
|
|
59
|
+
try {
|
|
60
|
+
const result = await promise;
|
|
61
|
+
if (this._currentPromise !== promise)
|
|
62
|
+
return;
|
|
63
|
+
this._value = result;
|
|
64
|
+
this.render("success", result);
|
|
65
|
+
} catch (e) {
|
|
66
|
+
if (this._currentPromise !== promise)
|
|
67
|
+
return;
|
|
68
|
+
this.render("error", e);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
render(state, data) {
|
|
72
|
+
this.cleanup();
|
|
73
|
+
if (!this.parentElement)
|
|
74
|
+
return;
|
|
75
|
+
let fragment;
|
|
76
|
+
const ctx = {
|
|
77
|
+
$nodes: [],
|
|
78
|
+
$elements: [],
|
|
79
|
+
$state: state,
|
|
80
|
+
$value: null,
|
|
81
|
+
$error: null
|
|
82
|
+
};
|
|
83
|
+
if (state === "default") {
|
|
84
|
+
const t = this.content.querySelector('template[is="swc-default"]');
|
|
85
|
+
fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
|
|
86
|
+
} else if (state === "loading") {
|
|
87
|
+
const t = this.content.querySelector('template[is="swc-loading"]');
|
|
88
|
+
fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
|
|
89
|
+
} else if (state === "error") {
|
|
90
|
+
const t = this.content.querySelector('template[is="swc-error"]');
|
|
91
|
+
ctx.$error = data;
|
|
92
|
+
fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
|
|
93
|
+
} else {
|
|
94
|
+
const t = this.content.querySelector('template[is="swc-success"]');
|
|
95
|
+
ctx.$value = data;
|
|
96
|
+
if (t) {
|
|
97
|
+
fragment = t.content.cloneNode(true);
|
|
98
|
+
} else {
|
|
99
|
+
const clone = this.content.cloneNode(true);
|
|
100
|
+
Array.from(clone.querySelectorAll('template[is="swc-loading"], template[is="swc-error"], template[is="swc-success"], template[is="swc-default"]')).forEach((tmp) => tmp.remove());
|
|
101
|
+
fragment = clone;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
this.mount(fragment, ctx);
|
|
105
|
+
}
|
|
106
|
+
mount(fragment, ctx) {
|
|
107
|
+
const nodes = Array.from(fragment.childNodes);
|
|
108
|
+
const elements = nodes.filter((n) => n.nodeType === 1);
|
|
109
|
+
Object.assign(ctx, {
|
|
110
|
+
$nodes: nodes,
|
|
111
|
+
$elements: elements,
|
|
112
|
+
$firstNode: nodes[0],
|
|
113
|
+
$lastNode: nodes[nodes.length - 1],
|
|
114
|
+
$firstElement: elements[0],
|
|
115
|
+
$lastElement: elements[elements.length - 1]
|
|
116
|
+
});
|
|
117
|
+
this._executeCallback("on-clone-nodes", ctx);
|
|
118
|
+
nodes.forEach((node, nodeIndex) => {
|
|
119
|
+
if (node instanceof HTMLElement) {
|
|
120
|
+
node.__swc_host = this;
|
|
121
|
+
}
|
|
122
|
+
this._executeCallback("on-clone-node", {
|
|
123
|
+
...ctx,
|
|
124
|
+
$node: node,
|
|
125
|
+
$nodeIndex: nodeIndex,
|
|
126
|
+
$isElement: node.nodeType === 1
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
this._nodes = nodes;
|
|
130
|
+
this.parentElement?.insertBefore(fragment, this.nextSibling);
|
|
131
|
+
}
|
|
132
|
+
_executeCallback(attrName, extraArgs) {
|
|
133
|
+
const script = this.getAttribute(attrName);
|
|
134
|
+
if (!script)
|
|
135
|
+
return;
|
|
136
|
+
const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
|
|
137
|
+
try {
|
|
138
|
+
FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
|
|
139
|
+
} catch (e) {
|
|
140
|
+
console.error(`[SwcAsync] Error in ${attrName}:`, e);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
cleanup() {
|
|
144
|
+
this._nodes.forEach((n) => {
|
|
145
|
+
if (n.parentElement)
|
|
146
|
+
n.parentElement.removeChild(n);
|
|
147
|
+
});
|
|
148
|
+
this._nodes = [];
|
|
149
|
+
}
|
|
150
|
+
connectedCallback() {
|
|
151
|
+
this.refresh();
|
|
152
|
+
}
|
|
153
|
+
disconnectedCallback() {
|
|
154
|
+
this.cleanup();
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
__decorate([
|
|
158
|
+
changedAttribute("on-get-value"),
|
|
159
|
+
__metadata("design:type", Function),
|
|
160
|
+
__metadata("design:paramtypes", [String]),
|
|
161
|
+
__metadata("design:returntype", void 0)
|
|
162
|
+
], SwcAsync.prototype, "refresh", null);
|
|
163
|
+
SwcAsync = __decorate([
|
|
164
|
+
elementDefine({ name: "swc-async", extends: "template" })
|
|
165
|
+
], SwcAsync);
|
|
166
|
+
export {
|
|
167
|
+
SwcAsync
|
|
168
|
+
};
|
|
169
|
+
//# sourceMappingURL=SwcAsync.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/elements/SwcAsync.ts"],
|
|
4
|
+
"sourcesContent": ["import { elementDefine } from '../decorators/elementDefine';\nimport { changedAttribute } from '../decorators/changedAttribute';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';\nimport { SwcLoading, SwcError, SwcSuccess, SwcDefault } from './SwcSubTemplates';\n\n@elementDefine({ name: 'swc-async', extends: 'template' })\nexport class SwcAsync extends HTMLTemplateElement {\n private _nodes: Node[] = [];\n private _currentPromise: Promise<any> | null = null;\n private _value: any = null;\n\n get value(): any {\n return this._value;\n }\n\n set value(nv: any) {\n if (nv instanceof Promise) {\n this.handlePromise(nv);\n } else {\n this._value = nv;\n this.render(nv === null ? 'default' : 'success', nv);\n }\n }\n\n @changedAttribute('on-get-value')\n private refresh(newValue?: string | null) {\n const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');\n if (!script) {\n this.value = null; // Triggers default render\n return;\n }\n if (!this.parentElement) return;\n\n const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);\n try {\n const result = FunctionUtils.executeReturn({\n script,\n context: this,\n args: helperHostSet\n });\n\n if (result instanceof Promise) {\n this.handlePromise(result);\n } else {\n this.value = result;\n }\n } catch (e) {\n this.render('error', e);\n }\n }\n\n private async handlePromise(promise: Promise<any>) {\n this._currentPromise = promise;\n this.render('loading');\n\n try {\n const result = await promise;\n if (this._currentPromise !== promise) return;\n this._value = result;\n this.render('success', result);\n } catch (e) {\n if (this._currentPromise !== promise) return;\n this.render('error', e);\n }\n }\n\n private render(state: 'loading' | 'error' | 'success' | 'default', data?: any) {\n this.cleanup();\n if (!this.parentElement) return;\n\n let fragment: DocumentFragment;\n const ctx: any = {\n $nodes: [],\n $elements: [],\n $state: state,\n $value: null,\n $error: null\n };\n\n if (state === 'default') {\n const t = this.content.querySelector('template[is=\"swc-default\"]') as HTMLTemplateElement;\n fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();\n } else if (state === 'loading') {\n const t = this.content.querySelector('template[is=\"swc-loading\"]') as HTMLTemplateElement;\n fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();\n } else if (state === 'error') {\n const t = this.content.querySelector('template[is=\"swc-error\"]') as HTMLTemplateElement;\n ctx.$error = data;\n fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();\n } else {\n // Success\n const t = this.content.querySelector('template[is=\"swc-success\"]') as HTMLTemplateElement;\n ctx.$value = data;\n if (t) {\n fragment = t.content.cloneNode(true) as DocumentFragment;\n } else {\n const clone = this.content.cloneNode(true) as DocumentFragment;\n Array.from(clone.querySelectorAll('template[is=\"swc-loading\"], template[is=\"swc-error\"], template[is=\"swc-success\"], template[is=\"swc-default\"]')).forEach(tmp => tmp.remove());\n fragment = clone;\n }\n }\n\n this.mount(fragment, ctx);\n }\n\n private mount(fragment: DocumentFragment, ctx: any) {\n const nodes = Array.from(fragment.childNodes);\n const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n\n Object.assign(ctx, {\n $nodes: nodes,\n $elements: elements,\n $firstNode: nodes[0],\n $lastNode: nodes[nodes.length - 1],\n $firstElement: elements[0],\n $lastElement: elements[elements.length - 1]\n });\n\n // Execution Callbacks\n this._executeCallback('on-clone-nodes', ctx);\n nodes.forEach((node, nodeIndex) => {\n if (node instanceof HTMLElement) {\n (node as any).__swc_host = this;\n }\n this._executeCallback('on-clone-node', {\n ...ctx,\n $node: node,\n $nodeIndex: nodeIndex,\n $isElement: node.nodeType === 1\n });\n });\n\n this._nodes = nodes;\n this.parentElement?.insertBefore(fragment, this.nextSibling);\n }\n\n private _executeCallback(attrName: string, extraArgs: Record<string, any>) {\n const script = this.getAttribute(attrName);\n if (!script) return;\n const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);\n try {\n FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });\n } catch (e) {\n console.error(`[SwcAsync] Error in ${attrName}:`, e);\n }\n }\n\n private cleanup() {\n this._nodes.forEach(n => {\n if (n.parentElement) n.parentElement.removeChild(n);\n });\n this._nodes = [];\n }\n\n connectedCallback() {\n this.refresh();\n }\n\n disconnectedCallback() {\n this.cleanup();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["SwcAsync"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
var __decorate = function(decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __metadata = function(k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
10
|
+
import { elementDefine } from "../decorators/elementDefine.js";
|
|
11
|
+
import { changedAttribute } from "../decorators/changedAttribute.js";
|
|
12
|
+
import { SwcUtils } from "../utils/Utils.js";
|
|
13
|
+
import { FunctionUtils } from "@dooboostore/core/function/FunctionUtils";
|
|
14
|
+
let SwcChoose = class SwcChoose2 extends HTMLTemplateElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this._nodes = [];
|
|
18
|
+
this._value = null;
|
|
19
|
+
}
|
|
20
|
+
get value() {
|
|
21
|
+
return this._value;
|
|
22
|
+
}
|
|
23
|
+
set value(nv) {
|
|
24
|
+
this._value = nv;
|
|
25
|
+
this.render();
|
|
26
|
+
}
|
|
27
|
+
_executeCallback(attrName, extraArgs) {
|
|
28
|
+
const script = this.getAttribute(attrName);
|
|
29
|
+
if (!script)
|
|
30
|
+
return;
|
|
31
|
+
const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
|
|
32
|
+
try {
|
|
33
|
+
FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
|
|
34
|
+
} catch (e) {
|
|
35
|
+
console.error(`[SwcChoose] Error in ${attrName}:`, e);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
refresh(newValue) {
|
|
39
|
+
const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
|
|
40
|
+
if (!script) {
|
|
41
|
+
this.value = null;
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
if (!this.parentElement)
|
|
45
|
+
return;
|
|
46
|
+
const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
|
|
47
|
+
try {
|
|
48
|
+
const result = FunctionUtils.executeReturn({
|
|
49
|
+
script,
|
|
50
|
+
context: this,
|
|
51
|
+
args: helperHostSet
|
|
52
|
+
});
|
|
53
|
+
this.value = result;
|
|
54
|
+
} catch (e) {
|
|
55
|
+
console.error("[SwcChoose] Error in on-get-value:", e);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
this.cleanup();
|
|
60
|
+
if (!this.parentElement)
|
|
61
|
+
return;
|
|
62
|
+
const templates = Array.from(this.content.querySelectorAll("template"));
|
|
63
|
+
let selected = null;
|
|
64
|
+
let otherwise = null;
|
|
65
|
+
let defaultTmp = null;
|
|
66
|
+
for (const t of templates) {
|
|
67
|
+
const is = t.getAttribute("is");
|
|
68
|
+
if (is === "swc-when") {
|
|
69
|
+
const whenVal = t.getAttribute("value");
|
|
70
|
+
if (String(whenVal) === String(this._value)) {
|
|
71
|
+
selected = t;
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
} else if (is === "swc-otherwise") {
|
|
75
|
+
otherwise = t;
|
|
76
|
+
} else if (is === "swc-default") {
|
|
77
|
+
defaultTmp = t;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
const targetTemplate = (this._value == null ? defaultTmp : selected) || otherwise || defaultTmp;
|
|
81
|
+
if (targetTemplate) {
|
|
82
|
+
const clone = targetTemplate.content.cloneNode(true);
|
|
83
|
+
const nodes = Array.from(clone.childNodes);
|
|
84
|
+
const elements = nodes.filter((n) => n.nodeType === 1);
|
|
85
|
+
const ctx = {
|
|
86
|
+
$value: this._value,
|
|
87
|
+
$nodes: nodes,
|
|
88
|
+
$elements: elements,
|
|
89
|
+
$firstNode: nodes[0],
|
|
90
|
+
$lastNode: nodes[nodes.length - 1],
|
|
91
|
+
$firstElement: elements[0],
|
|
92
|
+
$lastElement: elements[elements.length - 1]
|
|
93
|
+
};
|
|
94
|
+
this._executeCallback("on-clone-nodes", ctx);
|
|
95
|
+
nodes.forEach((node, nodeIndex) => {
|
|
96
|
+
if (node instanceof HTMLElement) {
|
|
97
|
+
node.__swc_host = this;
|
|
98
|
+
}
|
|
99
|
+
this._executeCallback("on-clone-node", {
|
|
100
|
+
...ctx,
|
|
101
|
+
$node: node,
|
|
102
|
+
$nodeIndex: nodeIndex,
|
|
103
|
+
$isElement: node.nodeType === 1
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
this._nodes = nodes;
|
|
107
|
+
this.parentElement.insertBefore(clone, this.nextSibling);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
cleanup() {
|
|
111
|
+
this._nodes.forEach((n) => {
|
|
112
|
+
if (n.parentElement)
|
|
113
|
+
n.parentElement.removeChild(n);
|
|
114
|
+
});
|
|
115
|
+
this._nodes = [];
|
|
116
|
+
}
|
|
117
|
+
connectedCallback() {
|
|
118
|
+
this.refresh();
|
|
119
|
+
}
|
|
120
|
+
disconnectedCallback() {
|
|
121
|
+
this.cleanup();
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
__decorate([
|
|
125
|
+
changedAttribute("on-get-value"),
|
|
126
|
+
__metadata("design:type", Function),
|
|
127
|
+
__metadata("design:paramtypes", [String]),
|
|
128
|
+
__metadata("design:returntype", void 0)
|
|
129
|
+
], SwcChoose.prototype, "refresh", null);
|
|
130
|
+
SwcChoose = __decorate([
|
|
131
|
+
elementDefine({ name: "swc-choose", extends: "template" })
|
|
132
|
+
], SwcChoose);
|
|
133
|
+
export {
|
|
134
|
+
SwcChoose
|
|
135
|
+
};
|
|
136
|
+
//# sourceMappingURL=SwcChoose.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/elements/SwcChoose.ts"],
|
|
4
|
+
"sourcesContent": ["import { elementDefine } from '../decorators/elementDefine';\nimport { changedAttribute } from '../decorators/changedAttribute';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';\nimport { SwcWhen, SwcOtherwise } from './SwcSubTemplates';\n\n@elementDefine({ name: 'swc-choose', extends: 'template' })\nexport class SwcChoose extends HTMLTemplateElement {\n private _nodes: Node[] = [];\n private _value: any = null;\n\n get value(): any {\n return this._value;\n }\n\n set value(nv: any) {\n this._value = nv;\n this.render();\n }\n\n private _executeCallback(attrName: string, extraArgs: Record<string, any>) {\n const script = this.getAttribute(attrName);\n if (!script) return;\n const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);\n try {\n FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });\n } catch (e) {\n console.error(`[SwcChoose] Error in ${attrName}:`, e);\n }\n }\n\n @changedAttribute('on-get-value')\n private refresh(newValue?: string | null) {\n const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');\n if (!script) {\n this.value = null;\n return;\n }\n if (!this.parentElement) return;\n\n const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);\n try {\n const result = FunctionUtils.executeReturn({\n script,\n context: this,\n args: helperHostSet\n });\n this.value = result;\n } catch (e) {\n console.error('[SwcChoose] Error in on-get-value:', e);\n }\n }\n\n private render() {\n this.cleanup();\n if (!this.parentElement) return;\n\n const templates = Array.from(this.content.querySelectorAll('template'));\n let selected: HTMLTemplateElement | null = null;\n let otherwise: HTMLTemplateElement | null = null;\n let defaultTmp: HTMLTemplateElement | null = null;\n\n for (const t of templates) {\n const is = t.getAttribute('is');\n if (is === 'swc-when') {\n const whenVal = t.getAttribute('value');\n if (String(whenVal) === String(this._value)) {\n selected = t;\n break;\n }\n } else if (is === 'swc-otherwise') {\n otherwise = t;\n } else if (is === 'swc-default') {\n defaultTmp = t;\n }\n }\n\n const targetTemplate = (this._value == null ? defaultTmp : selected) || otherwise || defaultTmp;\n if (targetTemplate) {\n const clone = targetTemplate.content.cloneNode(true) as DocumentFragment;\n const nodes = Array.from(clone.childNodes);\n const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n\n const ctx = {\n $value: this._value,\n $nodes: nodes,\n $elements: elements,\n $firstNode: nodes[0],\n $lastNode: nodes[nodes.length - 1],\n $firstElement: elements[0],\n $lastElement: elements[elements.length - 1]\n };\n\n // Execution Callbacks\n this._executeCallback('on-clone-nodes', ctx);\n nodes.forEach((node, nodeIndex) => {\n if (node instanceof HTMLElement) {\n (node as any).__swc_host = this;\n }\n this._executeCallback('on-clone-node', {\n ...ctx,\n $node: node,\n $nodeIndex: nodeIndex,\n $isElement: node.nodeType === 1\n });\n });\n\n this._nodes = nodes;\n this.parentElement.insertBefore(clone, this.nextSibling);\n }\n }\n\n private cleanup() {\n this._nodes.forEach(n => {\n if (n.parentElement) n.parentElement.removeChild(n);\n });\n this._nodes = [];\n }\n\n connectedCallback() {\n this.refresh();\n }\n\n disconnectedCallback() {\n this.cleanup();\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAIvB,IAAM,YAAN,MAAMA,mBAAkB,oBAAmB;EAA3C,cAAA;;AACG,SAAA,SAAiB,CAAA;AACjB,SAAA,SAAc;EAqHxB;EAnHE,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,IAAI,MAAM,IAAO;AACf,SAAK,SAAS;AACd,SAAK,OAAM;EACb;EAEQ,iBAAiB,UAAkB,WAA8B;AACvE,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,QAAI,CAAC;AAAQ;AACb,UAAM,gBAAgB,SAAS,oBAAoB,QAAQ,IAAI;AAC/D,QAAI;AACF,oBAAc,QAAQ,EAAE,QAAQ,SAAS,MAAM,MAAM,EAAE,GAAG,eAAe,GAAG,UAAS,EAAE,CAAE;IAC3F,SAAS,GAAG;AACV,cAAQ,MAAM,wBAAwB,QAAQ,KAAK,CAAC;IACtD;EACF;EAGQ,QAAQ,UAAwB;AACtC,UAAM,SAAS,aAAa,SAAY,WAAW,KAAK,aAAa,cAAc;AACnF,QAAI,CAAC,QAAQ;AACX,WAAK,QAAQ;AACb;IACF;AACA,QAAI,CAAC,KAAK;AAAe;AAEzB,UAAM,gBAAgB,SAAS,oBAAoB,QAAQ,IAAI;AAC/D,QAAI;AACF,YAAM,SAAS,cAAc,cAAc;QACzC;QACA,SAAS;QACT,MAAM;OACP;AACD,WAAK,QAAQ;IACf,SAAS,GAAG;AACV,cAAQ,MAAM,sCAAsC,CAAC;IACvD;EACF;EAEQ,SAAM;AACZ,SAAK,QAAO;AACZ,QAAI,CAAC,KAAK;AAAe;AAEzB,UAAM,YAAY,MAAM,KAAK,KAAK,QAAQ,iBAAiB,UAAU,CAAC;AACtE,QAAI,WAAuC;AAC3C,QAAI,YAAwC;AAC5C,QAAI,aAAyC;AAE7C,eAAW,KAAK,WAAW;AACzB,YAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,UAAI,OAAO,YAAY;AACrB,cAAM,UAAU,EAAE,aAAa,OAAO;AACtC,YAAI,OAAO,OAAO,MAAM,OAAO,KAAK,MAAM,GAAG;AAC3C,qBAAW;AACX;QACF;MACF,WAAW,OAAO,iBAAiB;AACjC,oBAAY;MACd,WAAW,OAAO,eAAe;AAC/B,qBAAa;MACf;IACF;AAEA,UAAM,kBAAkB,KAAK,UAAU,OAAO,aAAa,aAAa,aAAa;AACrF,QAAI,gBAAgB;AAClB,YAAM,QAAQ,eAAe,QAAQ,UAAU,IAAI;AACnD,YAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAM,WAAW,MAAM,OAAO,OAAK,EAAE,aAAa,CAAC;AAEnD,YAAM,MAAM;QACV,QAAQ,KAAK;QACb,QAAQ;QACR,WAAW;QACX,YAAY,MAAM,CAAC;QACnB,WAAW,MAAM,MAAM,SAAS,CAAC;QACjC,eAAe,SAAS,CAAC;QACzB,cAAc,SAAS,SAAS,SAAS,CAAC;;AAI5C,WAAK,iBAAiB,kBAAkB,GAAG;AAC3C,YAAM,QAAQ,CAAC,MAAM,cAAa;AAChC,YAAI,gBAAgB,aAAa;AAC9B,eAAa,aAAa;QAC7B;AACA,aAAK,iBAAiB,iBAAiB;UACrC,GAAG;UACH,OAAO;UACP,YAAY;UACZ,YAAY,KAAK,aAAa;SAC/B;MACH,CAAC;AAED,WAAK,SAAS;AACd,WAAK,cAAc,aAAa,OAAO,KAAK,WAAW;IACzD;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAI;AACtB,UAAI,EAAE;AAAe,UAAE,cAAc,YAAY,CAAC;IACpD,CAAC;AACD,SAAK,SAAS,CAAA;EAChB;EAEA,oBAAiB;AACf,SAAK,QAAO;EACd;EAEA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA7FQ,WAAA;EADP,iBAAiB,cAAc;;;;;AAxBrB,YAAS,WAAA;EADrB,cAAc,EAAE,MAAM,cAAc,SAAS,WAAU,CAAE;GAC7C,SAAS;",
|
|
6
|
+
"names": ["SwcChoose"]
|
|
7
|
+
}
|