@studiometa/ui 1.0.0-alpha.5 → 1.0.0-alpha.6
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/atoms/Action/Action.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export declare class Action<T extends BaseProps = BaseProps> extends Base<Action
|
|
|
16
16
|
get event(): string;
|
|
17
17
|
get modifiers(): string[];
|
|
18
18
|
get effect(): Function;
|
|
19
|
-
get targets(): Record<string, Base
|
|
19
|
+
get targets(): Array<Record<string, Base>>;
|
|
20
20
|
/**
|
|
21
21
|
* Run method on targeted components
|
|
22
22
|
*/
|
package/atoms/Action/Action.js
CHANGED
|
@@ -24,12 +24,15 @@ class Action extends Base {
|
|
|
24
24
|
get effect() {
|
|
25
25
|
const { effect } = this.$options;
|
|
26
26
|
if (!effectCache.has(effect)) {
|
|
27
|
-
effectCache.set(effect, new Function("ctx", "event", "target", `return ${effect}`));
|
|
27
|
+
effectCache.set(effect, new Function("ctx", "event", "target", "action", `return ${effect}`));
|
|
28
28
|
}
|
|
29
29
|
return effectCache.get(effect);
|
|
30
30
|
}
|
|
31
31
|
get targets() {
|
|
32
32
|
const { target } = this.$options;
|
|
33
|
+
if (!target) {
|
|
34
|
+
return [{ [this.__config.name]: this }];
|
|
35
|
+
}
|
|
33
36
|
const parts = target.split(" ").map((part) => {
|
|
34
37
|
const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
|
|
35
38
|
return [name, selector];
|
|
@@ -59,10 +62,10 @@ class Action extends Base {
|
|
|
59
62
|
}
|
|
60
63
|
for (const target of targets) {
|
|
61
64
|
try {
|
|
62
|
-
const [
|
|
63
|
-
const value = effect(target, event, currentTarget);
|
|
65
|
+
const [currentTarget] = Object.values(target).flat();
|
|
66
|
+
const value = effect(target, event, currentTarget, this);
|
|
64
67
|
if (typeof value === "function") {
|
|
65
|
-
value(target, event, currentTarget);
|
|
68
|
+
value(target, event, currentTarget, this);
|
|
66
69
|
}
|
|
67
70
|
} catch (err) {
|
|
68
71
|
this.$warn(err);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Action/Action.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, getInstances } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface ActionProps extends BaseProps {\n $options: {\n on: string;\n target: string;\n selector: string;\n effect: string;\n };\n}\n\n/**\n * Extract component name and an optional additional selector from a string.\n * @type {RegExp}\n */\nconst TARGET_REGEX = /([a-zA-Z]+)(\\((.*)\\))?/;\n\nconst effectCache = new Map<string, Function>();\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n static config: BaseConfig = {\n name: 'Action',\n options: {\n on: {\n type: String,\n default: 'click',\n },\n target: String,\n selector: String,\n effect: String,\n },\n };\n\n get event() {\n const [event] = this.$options.on.split('.', 1);\n return event;\n }\n\n get modifiers() {\n return this.$options.on.split('.').slice(1);\n }\n\n get effect() {\n const { effect } = this.$options;\n if (!effectCache.has(effect)) {\n effectCache.set(effect, new Function('ctx', 'event', 'target', `return ${effect}`));\n }\n return effectCache.get(effect);\n }\n\n get targets() {\n const { target } = this.$options;\n const parts = target.split(' ').map((part) => {\n const [, name, , selector] = part.match(TARGET_REGEX) ?? [];\n return [name, selector];\n });\n\n const targets = [] as Array<Record<string, Base>>;\n\n for (const instance of getInstances()) {\n const { name } = instance.__config;\n\n for (const part of parts) {\n const shouldPush =\n part[0] === name && (!part[1] || (part[1] && instance.$el.matches(part[1])));\n if (shouldPush) {\n targets.push({ [instance.$options.name]: instance });\n }\n }\n }\n\n return targets;\n }\n\n /**\n * Run method on targeted components\n */\n handleEvent(event: Event) {\n const { targets, effect, modifiers } = this;\n\n if (modifiers.includes('prevent')) {\n event.preventDefault();\n }\n\n if (modifiers.includes('stop')) {\n event.stopPropagation();\n }\n\n for (const target of targets) {\n try {\n const [
|
|
5
|
-
"mappings": "AAAA,SAAS,MAAM,oBAAoB;AAiBnC,MAAM,eAAe;AAErB,MAAM,cAAc,oBAAI,IAAsB;AAKvC,MAAM,eAAgD,KAAsB;AAAA,EACjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,QAAQ;AACV,UAAM,CAAC,KAAK,IAAI,KAAK,SAAS,GAAG,MAAM,KAAK,CAAC;AAC7C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAAY;AACd,WAAO,KAAK,SAAS,GAAG,MAAM,GAAG,EAAE,MAAM,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,CAAC,YAAY,IAAI,MAAM,GAAG;AAC5B,kBAAY,IAAI,QAAQ,IAAI,SAAS,OAAO,SAAS,UAAU,UAAU,MAAM,EAAE,CAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["import { Base, getInstances } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface ActionProps extends BaseProps {\n $options: {\n on: string;\n target: string;\n selector: string;\n effect: string;\n };\n}\n\n/**\n * Extract component name and an optional additional selector from a string.\n * @type {RegExp}\n */\nconst TARGET_REGEX = /([a-zA-Z]+)(\\((.*)\\))?/;\n\nconst effectCache = new Map<string, Function>();\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n static config: BaseConfig = {\n name: 'Action',\n options: {\n on: {\n type: String,\n default: 'click',\n },\n target: String,\n selector: String,\n effect: String,\n },\n };\n\n get event() {\n const [event] = this.$options.on.split('.', 1);\n return event;\n }\n\n get modifiers() {\n return this.$options.on.split('.').slice(1);\n }\n\n get effect() {\n const { effect } = this.$options;\n if (!effectCache.has(effect)) {\n effectCache.set(effect, new Function('ctx', 'event', 'target', 'action', `return ${effect}`));\n }\n return effectCache.get(effect);\n }\n\n get targets(): Array<Record<string, Base>> {\n const { target } = this.$options;\n\n if (!target) {\n return [{ [this.__config.name]: this }];\n }\n\n const parts = target.split(' ').map((part) => {\n const [, name, , selector] = part.match(TARGET_REGEX) ?? [];\n return [name, selector];\n });\n\n const targets = [] as Array<Record<string, Base>>;\n\n for (const instance of getInstances()) {\n const { name } = instance.__config;\n\n for (const part of parts) {\n const shouldPush =\n part[0] === name && (!part[1] || (part[1] && instance.$el.matches(part[1])));\n if (shouldPush) {\n targets.push({ [instance.$options.name]: instance });\n }\n }\n }\n\n return targets;\n }\n\n /**\n * Run method on targeted components\n */\n handleEvent(event: Event) {\n const { targets, effect, modifiers } = this;\n\n if (modifiers.includes('prevent')) {\n event.preventDefault();\n }\n\n if (modifiers.includes('stop')) {\n event.stopPropagation();\n }\n\n for (const target of targets) {\n try {\n const [currentTarget] = Object.values(target).flat();\n const value = effect(target, event, currentTarget, this);\n if (typeof value === 'function') {\n value(target, event, currentTarget, this);\n }\n } catch (err) {\n this.$warn(err);\n }\n }\n }\n\n /**\n * Mounted\n */\n mounted() {\n const { event, modifiers } = this;\n\n this.$el.addEventListener(event, this, {\n capture: modifiers.includes('capture'),\n once: modifiers.includes('once'),\n passive: modifiers.includes('passive'),\n });\n }\n\n /**\n * Destroyed\n */\n destroyed() {\n this.$el.removeEventListener(this.$options.on, this);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@studiometa/ui",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.6",
|
|
4
4
|
"description": "A set of opiniated, unstyled and accessible components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/studiometa/ui#readme",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@studiometa/js-toolkit": "^3.0.0-alpha.
|
|
32
|
+
"@studiometa/js-toolkit": "^3.0.0-alpha.9",
|
|
33
33
|
"deepmerge": "^4.3.1"
|
|
34
34
|
}
|
|
35
35
|
}
|