@studiometa/ui 1.0.0-alpha.6 → 1.0.0-alpha.8
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 +4 -6
- package/atoms/Action/Action.js +25 -63
- package/atoms/Action/Action.js.map +2 -2
- package/atoms/Action/ActionEvent.d.ts +55 -0
- package/atoms/Action/ActionEvent.js +130 -0
- package/atoms/Action/ActionEvent.js.map +7 -0
- package/atoms/Data/DataBind.d.ts +1 -1
- package/atoms/Data/DataBind.js +10 -7
- package/atoms/Data/DataBind.js.map +2 -2
- package/atoms/Data/DataComputed.js +2 -2
- package/atoms/Data/DataComputed.js.map +2 -2
- package/atoms/Data/DataEffect.js +2 -2
- package/atoms/Data/DataEffect.js.map +2 -2
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +1 -1
- package/molecules/AnchorNav/AnchorNavLink.d.ts +1 -1
- package/molecules/Menu/MenuList.d.ts +1 -1
- package/molecules/Slider/SliderDots.d.ts +1 -1
- package/organisms/Frame/FrameTarget.d.ts +1 -1
- package/package.json +2 -2
- package/primitives/Transition/Transition.d.ts +1 -1
package/atoms/Action/Action.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Base } from '@studiometa/js-toolkit';
|
|
2
2
|
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
|
|
3
|
+
import { ActionEvent } from './ActionEvent.js';
|
|
3
4
|
export interface ActionProps extends BaseProps {
|
|
4
5
|
$options: {
|
|
5
6
|
on: string;
|
|
@@ -13,14 +14,11 @@ export interface ActionProps extends BaseProps {
|
|
|
13
14
|
*/
|
|
14
15
|
export declare class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {
|
|
15
16
|
static config: BaseConfig;
|
|
16
|
-
get event(): string;
|
|
17
|
-
get modifiers(): string[];
|
|
18
|
-
get effect(): Function;
|
|
19
|
-
get targets(): Array<Record<string, Base>>;
|
|
20
17
|
/**
|
|
21
|
-
*
|
|
18
|
+
* @private
|
|
22
19
|
*/
|
|
23
|
-
|
|
20
|
+
__actionEvents: Set<ActionEvent<Action>>;
|
|
21
|
+
get actionEvents(): Set<ActionEvent<Action<BaseProps>>>;
|
|
24
22
|
/**
|
|
25
23
|
* Mounted
|
|
26
24
|
*/
|
package/atoms/Action/Action.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { Base
|
|
2
|
-
|
|
3
|
-
const effectCache = /* @__PURE__ */ new Map();
|
|
1
|
+
import { Base } from "@studiometa/js-toolkit";
|
|
2
|
+
import { ActionEvent } from "./ActionEvent.js";
|
|
4
3
|
class Action extends Base {
|
|
5
4
|
static config = {
|
|
6
5
|
name: "Action",
|
|
@@ -10,84 +9,47 @@ class Action extends Base {
|
|
|
10
9
|
default: "click"
|
|
11
10
|
},
|
|
12
11
|
target: String,
|
|
13
|
-
selector: String,
|
|
14
12
|
effect: String
|
|
15
13
|
}
|
|
16
14
|
};
|
|
17
|
-
get event() {
|
|
18
|
-
const [event] = this.$options.on.split(".", 1);
|
|
19
|
-
return event;
|
|
20
|
-
}
|
|
21
|
-
get modifiers() {
|
|
22
|
-
return this.$options.on.split(".").slice(1);
|
|
23
|
-
}
|
|
24
|
-
get effect() {
|
|
25
|
-
const { effect } = this.$options;
|
|
26
|
-
if (!effectCache.has(effect)) {
|
|
27
|
-
effectCache.set(effect, new Function("ctx", "event", "target", "action", `return ${effect}`));
|
|
28
|
-
}
|
|
29
|
-
return effectCache.get(effect);
|
|
30
|
-
}
|
|
31
|
-
get targets() {
|
|
32
|
-
const { target } = this.$options;
|
|
33
|
-
if (!target) {
|
|
34
|
-
return [{ [this.__config.name]: this }];
|
|
35
|
-
}
|
|
36
|
-
const parts = target.split(" ").map((part) => {
|
|
37
|
-
const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
|
|
38
|
-
return [name, selector];
|
|
39
|
-
});
|
|
40
|
-
const targets = [];
|
|
41
|
-
for (const instance of getInstances()) {
|
|
42
|
-
const { name } = instance.__config;
|
|
43
|
-
for (const part of parts) {
|
|
44
|
-
const shouldPush = part[0] === name && (!part[1] || part[1] && instance.$el.matches(part[1]));
|
|
45
|
-
if (shouldPush) {
|
|
46
|
-
targets.push({ [instance.$options.name]: instance });
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return targets;
|
|
51
|
-
}
|
|
52
15
|
/**
|
|
53
|
-
*
|
|
16
|
+
* @private
|
|
54
17
|
*/
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
if (modifiers.includes("stop")) {
|
|
61
|
-
event.stopPropagation();
|
|
18
|
+
__actionEvents;
|
|
19
|
+
get actionEvents() {
|
|
20
|
+
if (this.__actionEvents) {
|
|
21
|
+
return this.__actionEvents;
|
|
62
22
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
} catch (err) {
|
|
71
|
-
this.$warn(err);
|
|
23
|
+
const { on } = this.$options;
|
|
24
|
+
this.__actionEvents = /* @__PURE__ */ new Set();
|
|
25
|
+
for (const attribute of this.$el.attributes) {
|
|
26
|
+
if (attribute.name.includes("on:")) {
|
|
27
|
+
const name = attribute.name.split("on:").pop();
|
|
28
|
+
this.__actionEvents.add(new ActionEvent(this, name, attribute.value));
|
|
72
29
|
}
|
|
73
30
|
}
|
|
31
|
+
if (on) {
|
|
32
|
+
const { target, effect } = this.$options;
|
|
33
|
+
const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;
|
|
34
|
+
this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));
|
|
35
|
+
}
|
|
36
|
+
return this.__actionEvents;
|
|
74
37
|
}
|
|
75
38
|
/**
|
|
76
39
|
* Mounted
|
|
77
40
|
*/
|
|
78
41
|
mounted() {
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
once: modifiers.includes("once"),
|
|
83
|
-
passive: modifiers.includes("passive")
|
|
84
|
-
});
|
|
42
|
+
for (const actionEvent of this.actionEvents) {
|
|
43
|
+
actionEvent.attachEvent();
|
|
44
|
+
}
|
|
85
45
|
}
|
|
86
46
|
/**
|
|
87
47
|
* Destroyed
|
|
88
48
|
*/
|
|
89
49
|
destroyed() {
|
|
90
|
-
|
|
50
|
+
for (const actionEvent of this.actionEvents) {
|
|
51
|
+
actionEvent.detachEvent();
|
|
52
|
+
}
|
|
91
53
|
}
|
|
92
54
|
}
|
|
93
55
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Action/Action.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base
|
|
5
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { ActionEvent } from './ActionEvent.js';\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 * 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 effect: String,\n },\n };\n\n /**\n * @private\n */\n __actionEvents: Set<ActionEvent<Action>>;\n\n get actionEvents() {\n if (this.__actionEvents) {\n return this.__actionEvents;\n }\n\n const { on } = this.$options;\n this.__actionEvents = new Set();\n\n // @ts-ignore\n for (const attribute of this.$el.attributes) {\n if (attribute.name.includes('on:')) {\n const name = attribute.name.split('on:').pop();\n this.__actionEvents.add(new ActionEvent(this, name, attribute.value));\n }\n }\n\n if (on) {\n const { target, effect } = this.$options;\n const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;\n this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));\n }\n\n return this.__actionEvents;\n }\n\n /**\n * Mounted\n */\n mounted() {\n for (const actionEvent of this.actionEvents) {\n actionEvent.attachEvent();\n }\n }\n\n /**\n * Destroyed\n */\n destroyed() {\n for (const actionEvent of this.actionEvents) {\n actionEvent.detachEvent();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,mBAAmB;AAcrB,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,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA,EAEA,IAAI,eAAe;AACjB,QAAI,KAAK,gBAAgB;AACvB,aAAO,KAAK;AAAA,IACd;AAEA,UAAM,EAAE,GAAG,IAAI,KAAK;AACpB,SAAK,iBAAiB,oBAAI,IAAI;AAG9B,eAAW,aAAa,KAAK,IAAI,YAAY;AAC3C,UAAI,UAAU,KAAK,SAAS,KAAK,GAAG;AAClC,cAAM,OAAO,UAAU,KAAK,MAAM,KAAK,EAAE,IAAI;AAC7C,aAAK,eAAe,IAAI,IAAI,YAAY,MAAM,MAAM,UAAU,KAAK,CAAC;AAAA,MACtE;AAAA,IACF;AAEA,QAAI,IAAI;AACN,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,mBAAmB,SAAS,GAAG,MAAM,GAAG,YAAY,eAAe,GAAG,MAAM,KAAK;AACvF,WAAK,eAAe,IAAI,IAAI,YAAY,MAAM,IAAI,gBAAgB,CAAC;AAAA,IACrE;AAEA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { Base } from '@studiometa/js-toolkit';
|
|
2
|
+
export type Modifiers = 'prevent' | 'stop' | 'once' | 'passive' | 'capture';
|
|
3
|
+
export declare class ActionEvent<T extends Base> {
|
|
4
|
+
static modifierSeparator: string;
|
|
5
|
+
static targetSeparator: string;
|
|
6
|
+
static effectSeparator: string;
|
|
7
|
+
/**
|
|
8
|
+
* The Action instance.
|
|
9
|
+
*/
|
|
10
|
+
action: T;
|
|
11
|
+
/**
|
|
12
|
+
* The event to listen to.
|
|
13
|
+
*/
|
|
14
|
+
event: string;
|
|
15
|
+
/**
|
|
16
|
+
* The modifiers to apply to the event.
|
|
17
|
+
*/
|
|
18
|
+
modifiers: Modifiers[];
|
|
19
|
+
/**
|
|
20
|
+
* Target definition.
|
|
21
|
+
* Ex: `Target Target(.selector)`.
|
|
22
|
+
*/
|
|
23
|
+
targetDefinition: string;
|
|
24
|
+
/**
|
|
25
|
+
* The content of the effect callback function.
|
|
26
|
+
*/
|
|
27
|
+
effectDefinition: string;
|
|
28
|
+
/**
|
|
29
|
+
* Class constructor.
|
|
30
|
+
* @param {T} action The parent Action instance.
|
|
31
|
+
* @param {string} eventDefinition The event with its modifiers: `click.prevent.stop`
|
|
32
|
+
* @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`
|
|
33
|
+
*/
|
|
34
|
+
constructor(action: T, eventDefinition: string, effectDefinition: string);
|
|
35
|
+
/**
|
|
36
|
+
* Get the generated function for the defined effect.
|
|
37
|
+
*/
|
|
38
|
+
get effect(): Function;
|
|
39
|
+
/**
|
|
40
|
+
* Get the targets object for the defined targets string.
|
|
41
|
+
*/
|
|
42
|
+
get targets(): Record<string, Base<import("@studiometa/js-toolkit").BaseProps>>[];
|
|
43
|
+
/**
|
|
44
|
+
* Handle the defined event and trigger the effect for each defined target.
|
|
45
|
+
*/
|
|
46
|
+
handleEvent(event: Event): void;
|
|
47
|
+
/**
|
|
48
|
+
* Bind the defined event to the given Action instance root element.
|
|
49
|
+
*/
|
|
50
|
+
attachEvent(): void;
|
|
51
|
+
/**
|
|
52
|
+
* Unbind the event from the given Action instance root element.
|
|
53
|
+
*/
|
|
54
|
+
detachEvent(): void;
|
|
55
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { getInstances } from "@studiometa/js-toolkit";
|
|
2
|
+
import { isFunction } from "@studiometa/js-toolkit/utils";
|
|
3
|
+
const TARGET_REGEX = /([a-zA-Z]+)(\((.*)\))?/;
|
|
4
|
+
const effectCache = /* @__PURE__ */ new Map();
|
|
5
|
+
class ActionEvent {
|
|
6
|
+
static modifierSeparator = ".";
|
|
7
|
+
static targetSeparator = " ";
|
|
8
|
+
static effectSeparator = "->";
|
|
9
|
+
/**
|
|
10
|
+
* The Action instance.
|
|
11
|
+
*/
|
|
12
|
+
action;
|
|
13
|
+
/**
|
|
14
|
+
* The event to listen to.
|
|
15
|
+
*/
|
|
16
|
+
event;
|
|
17
|
+
/**
|
|
18
|
+
* The modifiers to apply to the event.
|
|
19
|
+
*/
|
|
20
|
+
modifiers;
|
|
21
|
+
/**
|
|
22
|
+
* Target definition.
|
|
23
|
+
* Ex: `Target Target(.selector)`.
|
|
24
|
+
*/
|
|
25
|
+
targetDefinition;
|
|
26
|
+
/**
|
|
27
|
+
* The content of the effect callback function.
|
|
28
|
+
*/
|
|
29
|
+
effectDefinition;
|
|
30
|
+
/**
|
|
31
|
+
* Class constructor.
|
|
32
|
+
* @param {T} action The parent Action instance.
|
|
33
|
+
* @param {string} eventDefinition The event with its modifiers: `click.prevent.stop`
|
|
34
|
+
* @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`
|
|
35
|
+
*/
|
|
36
|
+
constructor(action, eventDefinition, effectDefinition) {
|
|
37
|
+
this.action = action;
|
|
38
|
+
const [event, ...modifiers] = eventDefinition.split(ActionEvent.modifierSeparator);
|
|
39
|
+
this.event = event;
|
|
40
|
+
this.modifiers = modifiers;
|
|
41
|
+
let effect = effectDefinition;
|
|
42
|
+
let targetDefinition = "";
|
|
43
|
+
if (effect.includes(ActionEvent.effectSeparator)) {
|
|
44
|
+
[targetDefinition, effect] = effect.split(ActionEvent.effectSeparator);
|
|
45
|
+
}
|
|
46
|
+
this.targetDefinition = targetDefinition.trim();
|
|
47
|
+
this.effectDefinition = effect.trim();
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Get the generated function for the defined effect.
|
|
51
|
+
*/
|
|
52
|
+
get effect() {
|
|
53
|
+
const { effectDefinition } = this;
|
|
54
|
+
if (!effectCache.has(effectDefinition)) {
|
|
55
|
+
effectCache.set(
|
|
56
|
+
effectDefinition,
|
|
57
|
+
new Function("ctx", "event", "target", "action", "self", `return ${effectDefinition}`)
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
return effectCache.get(effectDefinition);
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Get the targets object for the defined targets string.
|
|
64
|
+
*/
|
|
65
|
+
get targets() {
|
|
66
|
+
const { targetDefinition } = this;
|
|
67
|
+
if (!targetDefinition) {
|
|
68
|
+
return [{ Action: this.action }];
|
|
69
|
+
}
|
|
70
|
+
const parts = targetDefinition.split(ActionEvent.targetSeparator).map((part) => {
|
|
71
|
+
const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
|
|
72
|
+
return [name, selector];
|
|
73
|
+
});
|
|
74
|
+
const targets = [];
|
|
75
|
+
for (const instance of getInstances()) {
|
|
76
|
+
const { name } = instance.__config;
|
|
77
|
+
for (const part of parts) {
|
|
78
|
+
const shouldPush = part[0] === name && (!part[1] || part[1] && instance.$el.matches(part[1]));
|
|
79
|
+
if (shouldPush) {
|
|
80
|
+
targets.push({ [instance.__config.name]: instance });
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
return targets;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Handle the defined event and trigger the effect for each defined target.
|
|
88
|
+
*/
|
|
89
|
+
handleEvent(event) {
|
|
90
|
+
const { targets, effect, modifiers } = this;
|
|
91
|
+
if (modifiers.includes("prevent")) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
}
|
|
94
|
+
if (modifiers.includes("stop")) {
|
|
95
|
+
event.stopPropagation();
|
|
96
|
+
}
|
|
97
|
+
for (const target of targets) {
|
|
98
|
+
try {
|
|
99
|
+
const [currentTarget] = Object.values(target).flat();
|
|
100
|
+
const value = effect(target, event, currentTarget, this.action, this.action);
|
|
101
|
+
if (isFunction(value)) {
|
|
102
|
+
value(target, event, currentTarget, this.action, this.action);
|
|
103
|
+
}
|
|
104
|
+
} catch (err) {
|
|
105
|
+
this.action.$warn(err);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Bind the defined event to the given Action instance root element.
|
|
111
|
+
*/
|
|
112
|
+
attachEvent() {
|
|
113
|
+
const { event, modifiers } = this;
|
|
114
|
+
this.action.$el.addEventListener(event, this, {
|
|
115
|
+
capture: modifiers.includes("capture"),
|
|
116
|
+
once: modifiers.includes("once"),
|
|
117
|
+
passive: modifiers.includes("passive")
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Unbind the event from the given Action instance root element.
|
|
122
|
+
*/
|
|
123
|
+
detachEvent() {
|
|
124
|
+
this.action.$el.removeEventListener(this.event, this);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
export {
|
|
128
|
+
ActionEvent
|
|
129
|
+
};
|
|
130
|
+
//# sourceMappingURL=ActionEvent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/atoms/Action/ActionEvent.ts"],
|
|
4
|
+
"sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport type { Base } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\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\nexport type Modifiers = 'prevent' | 'stop' | 'once' | 'passive' | 'capture';\n\nexport class ActionEvent<T extends Base> {\n static modifierSeparator = '.';\n static targetSeparator = ' ';\n static effectSeparator = '->';\n\n /**\n * The Action instance.\n */\n action: T;\n\n /**\n * The event to listen to.\n */\n event: string;\n\n /**\n * The modifiers to apply to the event.\n */\n modifiers: Modifiers[];\n\n /**\n * Target definition.\n * Ex: `Target Target(.selector)`.\n */\n targetDefinition: string;\n\n /**\n * The content of the effect callback function.\n */\n effectDefinition: string;\n\n /**\n * Class constructor.\n * @param {T} action The parent Action instance.\n * @param {string} eventDefinition The event with its modifiers: `click.prevent.stop`\n * @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`\n */\n constructor(action: T, eventDefinition: string, effectDefinition: string) {\n this.action = action;\n const [event, ...modifiers] = eventDefinition.split(ActionEvent.modifierSeparator);\n this.event = event;\n this.modifiers = modifiers as Modifiers[];\n\n let effect = effectDefinition;\n let targetDefinition = '';\n\n if (effect.includes(ActionEvent.effectSeparator)) {\n [targetDefinition, effect] = effect.split(ActionEvent.effectSeparator);\n }\n\n this.targetDefinition = targetDefinition.trim();\n this.effectDefinition = effect.trim();\n }\n\n /**\n * Get the generated function for the defined effect.\n */\n get effect() {\n const { effectDefinition } = this;\n\n if (!effectCache.has(effectDefinition)) {\n effectCache.set(\n effectDefinition,\n new Function('ctx', 'event', 'target', 'action', 'self', `return ${effectDefinition}`),\n );\n }\n\n return effectCache.get(effectDefinition) as Function;\n }\n\n /**\n * Get the targets object for the defined targets string.\n */\n get targets() {\n const { targetDefinition } = this;\n\n if (!targetDefinition) {\n return [{ Action: this.action }];\n }\n\n // Extract component's names and selectors.\n const parts = targetDefinition.split(ActionEvent.targetSeparator).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.__config.name]: instance });\n }\n }\n }\n\n return targets;\n }\n\n /**\n * Handle the defined event and trigger the effect for each defined target.\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.action, this.action);\n if (isFunction(value)) {\n value(target, event, currentTarget, this.action, this.action);\n }\n } catch (err) {\n this.action.$warn(err);\n }\n }\n }\n\n /**\n * Bind the defined event to the given Action instance root element.\n */\n attachEvent() {\n const { event, modifiers } = this;\n this.action.$el.addEventListener(event, this, {\n capture: modifiers.includes('capture'),\n once: modifiers.includes('once'),\n passive: modifiers.includes('passive'),\n });\n }\n\n /**\n * Unbind the event from the given Action instance root element.\n */\n detachEvent() {\n this.action.$el.removeEventListener(this.event, this);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/atoms/Data/DataBind.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
|
|
|
3
3
|
export interface DataBindProps extends BaseProps {
|
|
4
4
|
$options: {
|
|
5
5
|
prop: string;
|
|
6
|
-
|
|
6
|
+
group: string;
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
9
|
export declare class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {
|
package/atoms/Data/DataBind.js
CHANGED
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
import { Base } from "@studiometa/js-toolkit";
|
|
2
2
|
import { isArray } from "@studiometa/js-toolkit/utils";
|
|
3
3
|
import { isInput, isCheckbox, isSelect } from "./utils.js";
|
|
4
|
-
const
|
|
4
|
+
const groups = /* @__PURE__ */ new Map();
|
|
5
5
|
class DataBind extends Base {
|
|
6
6
|
static config = {
|
|
7
7
|
name: "DataBind",
|
|
8
8
|
options: {
|
|
9
9
|
prop: String,
|
|
10
|
-
|
|
10
|
+
group: String
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
get relatedInstances() {
|
|
14
|
-
const {
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
const { group } = this.$options;
|
|
15
|
+
const instances = groups.get(group) ?? groups.set(group, /* @__PURE__ */ new Set()).get(group);
|
|
16
|
+
for (const instance of instances) {
|
|
17
|
+
if (!instance.$el.isConnected) {
|
|
18
|
+
instances.delete(instance);
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
|
-
return instances
|
|
21
|
+
return instances;
|
|
19
22
|
}
|
|
20
23
|
get multiple() {
|
|
21
|
-
return this.$options.
|
|
24
|
+
return this.$options.group.endsWith("[]");
|
|
22
25
|
}
|
|
23
26
|
get target() {
|
|
24
27
|
return this.$el;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Data/DataBind.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,eAAe;AACxB,SAAS,SAAS,YAAY,gBAAgB;AAE9C,MAAM,
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst groups = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n $options: {\n prop: string;\n group: string;\n };\n}\n\nexport class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {\n static config: BaseConfig = {\n name: 'DataBind',\n options: {\n prop: String,\n group: String,\n },\n };\n\n get relatedInstances() {\n const { group } = this.$options;\n\n const instances = groups.get(group) ?? groups.set(group, new Set()).get(group);\n\n for (const instance of instances) {\n if (!instance.$el.isConnected) {\n instances.delete(instance);\n }\n }\n\n return instances;\n }\n\n get multiple() {\n return this.$options.group.endsWith('[]');\n }\n\n get target() {\n return this.$el;\n }\n\n get prop() {\n if (this.$options.prop) {\n return this.$options.prop;\n }\n\n const { target } = this;\n if (target instanceof HTMLInputElement) {\n return 'value';\n }\n\n return 'textContent';\n }\n\n get value() {\n return this.get();\n }\n\n set value(value) {\n this.set(value);\n }\n\n get() {\n const { target, multiple } = this;\n\n if (isSelect(target)) {\n if (multiple) {\n const values = [];\n // @ts-ignore\n for (const option of target.options) {\n if (option.selected) {\n values.push(option.value);\n }\n }\n\n return values;\n }\n\n const option = target.options.item(target.selectedIndex);\n return option.value;\n }\n\n if (isCheckbox(target)) {\n if (multiple) {\n const values = new Set();\n for (const instance of this.relatedInstances) {\n if (isCheckbox(instance.target) && instance.target.checked) {\n values.add(instance.target.value);\n }\n }\n return Array.from(values);\n } else {\n return target.checked;\n }\n }\n\n return target[this.prop];\n }\n\n set(value: boolean | string | string[], dispatch = true) {\n const { target, multiple, relatedInstances } = this;\n\n if (dispatch) {\n for (const instance of relatedInstances) {\n if (instance !== this && instance.value !== value) {\n instance.set(value, false);\n }\n }\n }\n\n if (isSelect(target)) {\n // @ts-ignore\n for (const option of target.options) {\n option.selected =\n multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n }\n return;\n }\n\n if (isInput(target)) {\n switch (target.type) {\n case 'radio':\n target.checked = target.value === value;\n return;\n case 'checkbox':\n target.checked =\n multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n return;\n }\n }\n\n target[this.prop] = value;\n }\n\n mounted() {\n this.relatedInstances.add(this);\n }\n\n destroyed() {\n this.relatedInstances.delete(this);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["option"]
|
|
7
7
|
}
|
|
@@ -9,8 +9,8 @@ class DataComputed extends DataBind {
|
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
11
|
get compute() {
|
|
12
|
-
const {
|
|
13
|
-
return getCallback(
|
|
12
|
+
const { group, compute } = this.$options;
|
|
13
|
+
return getCallback(group, `return ${compute};`);
|
|
14
14
|
}
|
|
15
15
|
set(value) {
|
|
16
16
|
let newValue = value;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Data/DataComputed.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n $options: {\n compute: string;\n } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n static config: BaseConfig = {\n name: 'DataComputed',\n options: {\n compute: String,\n },\n };\n\n get compute() {\n const {
|
|
5
|
-
"mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n $options: {\n compute: string;\n } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n static config: BaseConfig = {\n name: 'DataComputed',\n options: {\n compute: String,\n },\n };\n\n get compute() {\n const { group, compute } = this.$options;\n return getCallback(group, `return ${compute};`);\n }\n\n set(value: boolean | string | string[]) {\n let newValue = value;\n\n try {\n newValue = this.compute(value, this.target);\n } catch (error) {\n // @todo better handling of errors?\n console.error('Failed', error);\n }\n\n super.set(newValue, false);\n }\n}\n"],
|
|
5
|
+
"mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,OAAO,QAAQ,IAAI,KAAK;AAChC,WAAO,YAAY,OAAO,UAAU,OAAO,GAAG;AAAA,EAChD;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI,WAAW;AAEf,QAAI;AACF,iBAAW,KAAK,QAAQ,OAAO,KAAK,MAAM;AAAA,IAC5C,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAEA,UAAM,IAAI,UAAU,KAAK;AAAA,EAC3B;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/atoms/Data/DataEffect.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Data/DataEffect.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataEffectProps extends DataBindProps {\n $options: {\n effect: string;\n } & DataBindProps['$options'];\n}\n\nexport class DataEffect<T extends BaseProps = BaseProps> extends DataBind<DataEffectProps & T> {\n static config: BaseConfig = {\n name: 'DataEffect',\n options: {\n effect: String,\n },\n };\n\n get effect() {\n const {
|
|
5
|
-
"mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQrB,MAAM,mBAAoD,SAA8B;AAAA,EAC7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataEffectProps extends DataBindProps {\n $options: {\n effect: string;\n } & DataBindProps['$options'];\n}\n\nexport class DataEffect<T extends BaseProps = BaseProps> extends DataBind<DataEffectProps & T> {\n static config: BaseConfig = {\n name: 'DataEffect',\n options: {\n effect: String,\n },\n };\n\n get effect() {\n const { group, effect } = this.$options;\n return getCallback(group, effect);\n }\n\n set(value: boolean | string | string[]) {\n try {\n this.effect(value, this.target);\n } catch (error) {\n // @todo better handling of errors?\n console.error('Failed', error);\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQrB,MAAM,mBAAoD,SAA8B;AAAA,EAC7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,OAAO,OAAO,IAAI,KAAK;AAC/B,WAAO,YAAY,OAAO,MAAM;AAAA,EAClC;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI;AACF,WAAK,OAAO,OAAO,KAAK,MAAM;AAAA,IAChC,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BaseConfig } from '@studiometa/js-toolkit';
|
|
2
|
-
declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
2
|
+
declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
3
3
|
/**
|
|
4
4
|
* ScrollAnimationChild class.
|
|
5
5
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
1
|
+
declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
2
2
|
/**
|
|
3
3
|
* ScrollAnimation class.
|
|
4
4
|
*/
|
|
@@ -5,7 +5,7 @@ export interface AnchorNavLinkProps extends AnchorScrollToProps {
|
|
|
5
5
|
id: string;
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("#private").TransitionProps>;
|
|
8
|
+
declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
|
|
9
9
|
/**
|
|
10
10
|
* Manage a slider item and its state transition.
|
|
11
11
|
*/
|
|
@@ -24,7 +24,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
|
|
|
24
24
|
/**
|
|
25
25
|
* Override `Transition` options.
|
|
26
26
|
*/
|
|
27
|
-
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private").TransitionProps)["$options"];
|
|
27
|
+
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private/index.js").TransitionProps)["$options"];
|
|
28
28
|
/**
|
|
29
29
|
* Update tab indexes on mount.
|
|
30
30
|
*/
|
|
@@ -5,7 +5,7 @@ export interface SliderDotsProps extends BaseProps {
|
|
|
5
5
|
dots: HTMLButtonElement[];
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private").TransitionProps>;
|
|
8
|
+
declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
|
|
9
9
|
/**
|
|
10
10
|
* SliderDots class.
|
|
11
11
|
*/
|
|
@@ -25,7 +25,7 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
|
|
|
25
25
|
/**
|
|
26
26
|
* Override options.
|
|
27
27
|
*/
|
|
28
|
-
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private").TransitionProps)["$options"];
|
|
28
|
+
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private/index.js").TransitionProps)["$options"];
|
|
29
29
|
/**
|
|
30
30
|
* Get uniq ID.
|
|
31
31
|
*/
|
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.8",
|
|
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.10",
|
|
33
33
|
"deepmerge": "^4.3.1"
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Base, BaseProps } from '@studiometa/js-toolkit';
|
|
2
2
|
import type { BaseConfig } from '@studiometa/js-toolkit';
|
|
3
|
-
declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, Base<BaseProps>, import("#private").TransitionProps>;
|
|
3
|
+
declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, Base<BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
|
|
4
4
|
/**
|
|
5
5
|
* Transition class.
|
|
6
6
|
*/
|