@studiometa/ui 1.0.0-alpha.5 → 1.0.0-alpha.7

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.
@@ -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<BaseProps>>[];
19
+ get targets(): Array<Record<string, Base>>;
20
20
  /**
21
21
  * Run method on targeted components
22
22
  */
@@ -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 [name, currentTarget] = Object.entries(target).flat();
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 [name, currentTarget] = Object.entries(target).flat();\n const value = effect(target, event, currentTarget);\n if (typeof value === 'function') {\n value(target, event, currentTarget);\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": "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,IACpF;AACA,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,IAAI,CAAC,SAAS;AAC5C,YAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,KAAK,MAAM,YAAY,KAAK,CAAC;AAC1D,aAAO,CAAC,MAAM,QAAQ;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,CAAC;AAEjB,eAAW,YAAY,aAAa,GAAG;AACrC,YAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,iBAAW,QAAQ,OAAO;AACxB,cAAM,aACJ,KAAK,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,KAAM,KAAK,CAAC,KAAK,SAAS,IAAI,QAAQ,KAAK,CAAC,CAAC;AAC3E,YAAI,YAAY;AACd,kBAAQ,KAAK,EAAE,CAAC,SAAS,SAAS,IAAI,GAAG,SAAS,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAc;AACxB,UAAM,EAAE,SAAS,QAAQ,UAAU,IAAI;AAEvC,QAAI,UAAU,SAAS,SAAS,GAAG;AACjC,YAAM,eAAe;AAAA,IACvB;AAEA,QAAI,UAAU,SAAS,MAAM,GAAG;AAC9B,YAAM,gBAAgB;AAAA,IACxB;AAEA,eAAW,UAAU,SAAS;AAC5B,UAAI;AACF,cAAM,CAAC,MAAM,aAAa,IAAI,OAAO,QAAQ,MAAM,EAAE,KAAK;AAC1D,cAAM,QAAQ,OAAO,QAAQ,OAAO,aAAa;AACjD,YAAI,OAAO,UAAU,YAAY;AAC/B,gBAAM,QAAQ,OAAO,aAAa;AAAA,QACpC;AAAA,MACF,SAAS,KAAK;AACZ,aAAK,MAAM,GAAG;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SAAK,IAAI,iBAAiB,OAAO,MAAM;AAAA,MACrC,SAAS,UAAU,SAAS,SAAS;AAAA,MACrC,MAAM,UAAU,SAAS,MAAM;AAAA,MAC/B,SAAS,UAAU,SAAS,SAAS;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
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
  }
@@ -1,7 +1,7 @@
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 instances = /* @__PURE__ */ new Map();
4
+ const groups = /* @__PURE__ */ new Map();
5
5
  class DataBind extends Base {
6
6
  static config = {
7
7
  name: "DataBind",
@@ -12,10 +12,13 @@ class DataBind extends Base {
12
12
  };
13
13
  get relatedInstances() {
14
14
  const { name } = this.$options;
15
- if (!instances.has(name)) {
16
- instances.set(name, /* @__PURE__ */ new Set());
15
+ const instances = groups.get(name) ?? groups.set(name, /* @__PURE__ */ new Set()).get(name);
16
+ for (const instance of instances) {
17
+ if (!instance.$el.isConnected) {
18
+ instances.delete(instance);
19
+ }
17
20
  }
18
- return instances.get(name);
21
+ return instances;
19
22
  }
20
23
  get multiple() {
21
24
  return this.$options.name.endsWith("[]");
@@ -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 instances = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n $options: {\n prop: string;\n name: 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 name: String,\n },\n };\n\n get relatedInstances() {\n const { name } = this.$options;\n\n if (!instances.has(name)) {\n instances.set(name, new Set());\n }\n\n return instances.get(name);\n }\n\n get multiple() {\n return this.$options.name.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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",
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 name: 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 name: String,\n },\n };\n\n get relatedInstances() {\n const { name } = this.$options;\n\n const instances = groups.get(name) ?? groups.set(name, new Set()).get(name);\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.name.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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiometa/ui",
3
- "version": "1.0.0-alpha.5",
3
+ "version": "1.0.0-alpha.7",
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.6",
32
+ "@studiometa/js-toolkit": "^3.0.0-alpha.10",
33
33
  "deepmerge": "^4.3.1"
34
34
  }
35
35
  }