@studiometa/js-toolkit 3.0.0-alpha.5 → 3.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/Base/Base.d.ts +5 -5
- package/Base/Base.js +41 -27
- package/Base/Base.js.map +2 -2
- package/Base/features.d.ts +5 -0
- package/Base/features.js +8 -0
- package/Base/features.js.map +2 -2
- package/Base/managers/ChildrenManager.d.ts +5 -5
- package/Base/managers/ChildrenManager.js +24 -17
- package/Base/managers/ChildrenManager.js.map +2 -2
- package/Base/managers/EventsManager.d.ts +6 -0
- package/Base/managers/EventsManager.js +24 -10
- package/Base/managers/EventsManager.js.map +2 -2
- package/Base/managers/OptionsManager.js +15 -11
- package/Base/managers/OptionsManager.js.map +2 -2
- package/Base/managers/RefsManager.js +9 -17
- package/Base/managers/RefsManager.js.map +2 -2
- package/Base/managers/ResponsiveOptionsManager.js +5 -2
- package/Base/managers/ResponsiveOptionsManager.js.map +2 -2
- package/Base/utils.d.ts +1 -1
- package/Base/utils.js +10 -8
- package/Base/utils.js.map +2 -2
- package/decorators/withBreakpointManager.js +6 -4
- package/decorators/withBreakpointManager.js.map +2 -2
- package/decorators/withBreakpointObserver.d.ts +0 -1
- package/decorators/withBreakpointObserver.js +4 -2
- package/decorators/withBreakpointObserver.js.map +2 -2
- package/decorators/withMountOnMediaQuery.js +2 -2
- package/decorators/withMountOnMediaQuery.js.map +2 -2
- package/decorators/withMountWhenInView.js +2 -2
- package/decorators/withMountWhenInView.js.map +2 -2
- package/helpers/createApp.js +9 -4
- package/helpers/createApp.js.map +2 -2
- package/package.json +1 -1
- package/Base/managers/ActionManager.d.ts +0 -4
- package/Base/managers/ActionManager.js +0 -10
- package/Base/managers/ActionManager.js.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/js-toolkit/Base/managers/EventsManager.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Base } from '../index.js';\nimport getAllProperties from '../../utils/object/getAllProperties.js';\nimport { isArray } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\n\nconst names = new Map();\nconst normalizeRegex1 = /[A-Z]([A-Z].*)/g;\nconst normalizeRegex2 = /[^a-zA-Z\\d\\s:]/g;\nconst normalizeRegex3 = /(^\\w|\\s+\\w)/g;\n\n/**\n * Normalize the given name to PascalCase, such as:\n *\n * ```\n * sentence case => SentenceCase\n * lowercase => Lowercase\n * UPPERCASE => Uppercase\n * kebab-case => KebabCase\n * snake_case => SnakeCase\n * camelCase => CamelCase\n * PascalCase => PascalCase\n * .class-selector => ClassSelector\n * .bem__selector => BemSelector\n * __id-selector => IdSelector\n * .complex[class^ =\"__\"] => ComplexClass\n * ```\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeName(name: string): string {\n if (!names.has(name)) {\n names.set(\n name,\n name\n .replaceAll(normalizeRegex1, (c) => c.toLowerCase())\n .replaceAll(normalizeRegex2, ' ')\n .replaceAll(normalizeRegex3, (c) => c.trim().toUpperCase())\n .trim(),\n );\n }\n\n return names.get(name);\n}\n\nconst eventNames = new Map();\n\nconst normalizeEventRegex1 = /[A-Z]/g;\nconst normalizeEventRegex2 = /^-/;\n/**\n * Normalize the event names from PascalCase to kebab-case.\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeEventName(name: string): string {\n if (!eventNames.has(name)) {\n eventNames.set(\n name,\n name\n .replaceAll(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`)\n .replace(normalizeEventRegex2, ''),\n );\n }\n\n return eventNames.get(name);\n}\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n if (!regexes.has(regex)) {\n regexes.set(regex, new RegExp(regex));\n }\n\n return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);\n const [, event] = method.match(regex);\n return normalizeEventName(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);\n const key = regex.toString();\n\n let methods = that.__methodsCache.get(key);\n\n if (!methods) {\n methods = Array.from(\n getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n (set, [method]) => set.add(method),\n new Set(),\n ),\n ) as string[];\n that.__methodsCache.set(key, methods);\n }\n\n return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n // eslint-disable-next-line no-use-before-define\n that: EventsManager,\n name: string,\n elements: HTMLElement[],\n mode: 'add' | 'remove' = 'add',\n) {\n const action = `${mode}EventListener`;\n const methods = getEventMethodsByName(that, name);\n for (const method of methods) {\n const event = getEventNameByMethod(method, name);\n for (const element of elements) {\n if (element instanceof EventTarget) {\n element[action](event, that.__refsHandler);\n }\n }\n }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n // eslint-disable-next-line no-use-before-define\n that: EventsManager,\n name: string,\n instance: Base,\n mode: 'add' | 'remove' = 'add',\n) {\n const action = mode === 'add' ? '$on' : '$off';\n const methods = getEventMethodsByName(that, name);\n for (const method of methods) {\n const event = getEventNameByMethod(method, name);\n instance[action](event, that.__childrenHandler);\n }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n const modeMethod = `${mode}EventListener`;\n const methods = getEventMethodsByName(that);\n\n const { __base: base, __config: config } = that;\n\n for (const method of methods) {\n let event = getEventNameByMethod(method);\n\n if (eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)) {\n const target = getEventTarget(base, event, config);\n target[modeMethod](event, that.__rootElementHandler);\n } else if (methodIsGlobal(method)) {\n event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n const target = getGlobalEventTarget(method);\n target[modeMethod](\n event,\n methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n );\n }\n }\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n __methodsCache: Map<string, string[]> = new Map();\n\n /**\n * Event listener object for the root element.\n */\n __rootElementHandler: EventListenerObject = {\n handleEvent: (event: Event | CustomEvent) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedEventName}`;\n\n if (event instanceof CustomEvent && isArray(event.detail) && event.detail.length) {\n this.__base[method](...event.detail, event);\n } else {\n this.__base[method](event);\n }\n },\n };\n\n /**\n * Event listener object for the root element.\n *\n * @type {EventListenerObject}\n */\n __documentHandler = {\n /**\n * @param {Event|CustomEvent} event\n * @returns {void}\n */\n handleEvent: (event) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `onDocument${normalizedEventName}`;\n\n this.__base[method](event);\n },\n };\n\n /**\n * Event listener object for the root element.\n *\n * @type {EventListenerObject}\n */\n __windowHandler = {\n /**\n * @param {Event|CustomEvent} event\n * @returns {void}\n */\n handleEvent: (event) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `onWindow${normalizedEventName}`;\n\n this.__base[method](event);\n },\n };\n\n /**\n * Event listener object for the refs.\n */\n __refsHandler: EventListenerObject = {\n handleEvent: (event) => {\n const ref = event.currentTarget as HTMLElement;\n const refName = normalizeRefName(ref.dataset.ref);\n\n const normalizedRefName = normalizeName(refName);\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedRefName}${normalizedEventName}`;\n\n let index = 0;\n if (isArray(this.__base.$refs[refName])) {\n index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n }\n\n this.__base[method](event, index);\n },\n };\n\n /**\n * Event listener object for the children.\n */\n __childrenHandler: EventListenerObject = {\n handleEvent: (event: CustomEvent) => {\n const childrenManager = this.__base.$children;\n\n // @todo handle async child components\n const { name, child: resolvedChild } = childrenManager.registeredNames\n .map((childName) => ({\n name: childName,\n child: [...childrenManager[childName]].find(\n // @ts-ignore\n (instance) => instance === event.currentTarget || instance.$el === event.currentTarget,\n ),\n }))\n .find(({ child }) => child);\n\n const normalizedChildName = normalizeName(name);\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedChildName}${normalizedEventName}`;\n\n const index = [...childrenManager[name]].indexOf(resolvedChild);\n\n const args = isArray(event.detail) ? event.detail : [];\n this.__base[method](...args, index, event);\n },\n };\n\n /**\n * Class constructor.\n */\n constructor(base: Base) {\n super(base);\n\n this.__hideProperties([\n '__methodsCache',\n '__rootElementHandler',\n '__refsHandler',\n '__childrenHandler',\n '__documentHandler',\n '__windowHandler',\n ]);\n }\n\n /**\n * Bind event methods to the given ref elements.\n *\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @returns {void}\n */\n bindRef(name: string, elements: HTMLElement[]) {\n manageRef(this, name, elements);\n }\n\n /**\n * Bind event methods to the given ref elements.\n *\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @returns {void}\n */\n unbindRef(name: string, elements: HTMLElement[]) {\n manageRef(this, name, elements, 'remove');\n }\n\n /**\n * Bind event methods to the given child instance.\n *\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @returns {void}\n */\n bindChild(name: string, instance: Base) {\n manageChild(this, name, instance);\n }\n\n /**\n * Unbind event methods to the given child instance.\n *\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @returns {void}\n */\n unbindChild(name: string, instance: Base) {\n manageChild(this, name, instance, 'remove');\n }\n\n /**\n * Bind event methods on the root element.\n *\n * @returns {void}\n */\n bindRootElement() {\n manageRootElement(this);\n }\n\n /**\n * Unbind event method from the root element.\n *\n * @returns {void}\n */\n unbindRootElement() {\n manageRootElement(this, 'remove');\n }\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAO,sBAAsB;AAC7B,SAAS,eAAe;AACxB,SAAS,gBAAgB,eAAe,8BAA8B;AACtE,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import type { Base } from '../index.js';\nimport getAllProperties from '../../utils/object/getAllProperties.js';\nimport { isArray } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\nimport { features } from '../features.js';\n\nconst names = new Map();\nconst normalizeRegex1 = /[A-Z]([A-Z].*)/g;\nconst normalizeRegex2 = /[^a-zA-Z\\d\\s:]/g;\nconst normalizeRegex3 = /(^\\w|\\s+\\w)/g;\n\n/**\n * Normalize the given name to PascalCase, such as:\n *\n * ```\n * sentence case => SentenceCase\n * lowercase => Lowercase\n * UPPERCASE => Uppercase\n * kebab-case => KebabCase\n * snake_case => SnakeCase\n * camelCase => CamelCase\n * PascalCase => PascalCase\n * .class-selector => ClassSelector\n * .bem__selector => BemSelector\n * __id-selector => IdSelector\n * .complex[class^ =\"__\"] => ComplexClass\n * ```\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeName(name: string): string {\n if (!names.has(name)) {\n names.set(\n name,\n name\n .replaceAll(normalizeRegex1, (c) => c.toLowerCase())\n .replaceAll(normalizeRegex2, ' ')\n .replaceAll(normalizeRegex3, (c) => c.trim().toUpperCase())\n .trim(),\n );\n }\n\n return names.get(name);\n}\n\nconst eventNames = new Map();\n\nconst normalizeEventRegex1 = /[A-Z]/g;\nconst normalizeEventRegex2 = /^-/;\n/**\n * Normalize the event names from PascalCase to kebab-case.\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeEventName(name: string): string {\n if (!eventNames.has(name)) {\n eventNames.set(\n name,\n name\n .replaceAll(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`)\n .replace(normalizeEventRegex2, ''),\n );\n }\n\n return eventNames.get(name);\n}\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n if (!regexes.has(regex)) {\n regexes.set(regex, new RegExp(regex));\n }\n\n return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);\n const [, event] = method.match(regex);\n return normalizeEventName(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);\n const key = regex.toString();\n\n let methods = that.__methodsCache.get(key);\n\n if (!methods) {\n methods = Array.from(\n getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n (set, [method]) => set.add(method),\n new Set(),\n ),\n ) as string[];\n that.__methodsCache.set(key, methods);\n }\n\n return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n // eslint-disable-next-line no-use-before-define\n that: EventsManager,\n name: string,\n elements: HTMLElement[],\n mode: 'add' | 'remove' = 'add',\n) {\n const action = `${mode}EventListener`;\n const methods = getEventMethodsByName(that, name);\n for (const method of methods) {\n const event = getEventNameByMethod(method, name);\n for (const element of elements) {\n if (element instanceof EventTarget) {\n element[action](event, that.__refsHandler);\n }\n }\n }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n // eslint-disable-next-line no-use-before-define\n that: EventsManager,\n name: string,\n instance: Base,\n mode: 'add' | 'remove' = 'add',\n) {\n const action = mode === 'add' ? '$on' : '$off';\n const methods = getEventMethodsByName(that, name);\n for (const method of methods) {\n const event = getEventNameByMethod(method, name);\n instance[action](event, that.__childrenHandler);\n }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n * The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n const modeMethod = `${mode}EventListener`;\n const methods = getEventMethodsByName(that);\n\n const { __base: base, __config: config } = that;\n\n for (const method of methods) {\n let event = getEventNameByMethod(method);\n\n if (eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)) {\n const target = getEventTarget(base, event, config);\n target[modeMethod](event, that.__rootElementHandler);\n } else if (methodIsGlobal(method)) {\n event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n const target = getGlobalEventTarget(method);\n target[modeMethod](\n event,\n methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n );\n }\n }\n}\n\nexport type EventManagerCallbackParams = {\n event: Event | null;\n args: Array<any>;\n index: number;\n target: Element | Base | Promise<Base> | typeof window | typeof document | null;\n};\n\n/**\n * Normalize `on...` method params.\n */\nfunction normalizeParams(\n params: Partial<EventManagerCallbackParams> = {},\n): EventManagerCallbackParams {\n return {\n event: null,\n args: [],\n index: 0,\n target: null,\n ...params,\n };\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n __methodsCache: Map<string, string[]> = new Map();\n\n /**\n * Event listener object for the root element.\n */\n __rootElementHandler: EventListenerObject = {\n handleEvent: (event: Event | CustomEvent) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedEventName}`;\n const isCustomEvent = event instanceof CustomEvent;\n\n this.__base[method](\n normalizeParams({\n event,\n args: isCustomEvent ? event.detail ?? [] : [],\n target: isCustomEvent ? this.__base : this.__element,\n }),\n );\n },\n };\n\n /**\n * Event listener object for the root element.\n *\n * @type {EventListenerObject}\n */\n __documentHandler = {\n /**\n * @param {Event|CustomEvent} event\n * @returns {void}\n */\n handleEvent: (event) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `onDocument${normalizedEventName}`;\n\n this.__base[method](normalizeParams({ event, target: document }));\n },\n };\n\n /**\n * Event listener object for the root element.\n *\n * @type {EventListenerObject}\n */\n __windowHandler = {\n /**\n * @param {Event|CustomEvent} event\n * @returns {void}\n */\n handleEvent: (event) => {\n const normalizedEventName = normalizeName(event.type);\n const method = `onWindow${normalizedEventName}`;\n\n this.__base[method](normalizeParams({ event, target: window }));\n },\n };\n\n /**\n * Event listener object for the refs.\n */\n __refsHandler: EventListenerObject = {\n handleEvent: (event) => {\n const ref = event.currentTarget as HTMLElement;\n const attributes = features.get('attributes');\n const refName = normalizeRefName(ref.getAttribute(attributes.ref));\n\n const normalizedRefName = normalizeName(refName);\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedRefName}${normalizedEventName}`;\n\n let index = 0;\n if (isArray(this.__base.$refs[refName])) {\n index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n }\n\n this.__base[method](normalizeParams({ event, index, target: ref }));\n },\n };\n\n /**\n * Event listener object for the children.\n */\n __childrenHandler: EventListenerObject = {\n handleEvent: (event: CustomEvent) => {\n const childrenManager = this.__base.$children;\n\n // @todo handle async child components\n const { name, child: resolvedChild } = childrenManager.registeredNames\n .map((childName) => ({\n name: childName,\n child: [...childrenManager[childName]].find(\n // @ts-ignore\n (instance) => instance === event.currentTarget || instance.$el === event.currentTarget,\n ),\n }))\n .find(({ child }) => child);\n\n const normalizedChildName = normalizeName(name);\n const normalizedEventName = normalizeName(event.type);\n const method = `on${normalizedChildName}${normalizedEventName}`;\n\n const index = [...childrenManager[name]].indexOf(resolvedChild);\n\n const args = isArray(event.detail) ? event.detail : [];\n this.__base[method](normalizeParams({ event, index, args, target: resolvedChild }));\n },\n };\n\n /**\n * Class constructor.\n */\n constructor(base: Base) {\n super(base);\n\n this.__hideProperties([\n '__methodsCache',\n '__rootElementHandler',\n '__refsHandler',\n '__childrenHandler',\n '__documentHandler',\n '__windowHandler',\n ]);\n }\n\n /**\n * Bind event methods to the given ref elements.\n *\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @returns {void}\n */\n bindRef(name: string, elements: HTMLElement[]) {\n manageRef(this, name, elements);\n }\n\n /**\n * Bind event methods to the given ref elements.\n *\n * @param {string} name\n * The name of the ref.\n * @param {HTMLElement[]} elements\n * The elements of the ref.\n * @returns {void}\n */\n unbindRef(name: string, elements: HTMLElement[]) {\n manageRef(this, name, elements, 'remove');\n }\n\n /**\n * Bind event methods to the given child instance.\n *\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @returns {void}\n */\n bindChild(name: string, instance: Base) {\n manageChild(this, name, instance);\n }\n\n /**\n * Unbind event methods to the given child instance.\n *\n * @param {string} name\n * The name of the ref.\n * @param {Base} instance\n * A base instance.\n * @returns {void}\n */\n unbindChild(name: string, instance: Base) {\n manageChild(this, name, instance, 'remove');\n }\n\n /**\n * Bind event methods on the root element.\n *\n * @returns {void}\n */\n bindRootElement() {\n manageRootElement(this);\n }\n\n /**\n * Unbind event method from the root element.\n *\n * @returns {void}\n */\n unbindRootElement() {\n manageRootElement(this, 'remove');\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import deepmerge from "deepmerge";
|
|
2
2
|
import { AbstractManager } from "./AbstractManager.js";
|
|
3
3
|
import { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from "../../utils/index.js";
|
|
4
|
+
import { features } from "../features.js";
|
|
4
5
|
const types = /* @__PURE__ */ new Set([String, Number, Boolean, Array, Object]);
|
|
5
6
|
const __defaultValues = {
|
|
6
7
|
String: "",
|
|
@@ -10,12 +11,15 @@ const __defaultValues = {
|
|
|
10
11
|
Object: () => ({})
|
|
11
12
|
};
|
|
12
13
|
const __propertyNameCache = /* @__PURE__ */ new Map();
|
|
14
|
+
const matchUppercaseRegexp = /([A-Z])/g;
|
|
13
15
|
function __getPropertyName(name, prefix = "") {
|
|
14
16
|
const key = name + prefix;
|
|
15
17
|
if (__propertyNameCache.has(key)) {
|
|
16
18
|
return __propertyNameCache.get(key);
|
|
17
19
|
}
|
|
18
|
-
const
|
|
20
|
+
const attributes = features.get("attributes");
|
|
21
|
+
const normalizedName = name.replace(matchUppercaseRegexp, "-$1");
|
|
22
|
+
const propertyName = `${attributes.option}${prefix ? `-${prefix}` : ""}-${normalizedName}`;
|
|
19
23
|
__propertyNameCache.set(key, propertyName);
|
|
20
24
|
return propertyName;
|
|
21
25
|
}
|
|
@@ -95,16 +99,16 @@ class OptionsManager extends AbstractManager {
|
|
|
95
99
|
const { type } = config;
|
|
96
100
|
const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;
|
|
97
101
|
const propertyName = __getPropertyName(name);
|
|
98
|
-
const hasProperty =
|
|
102
|
+
const hasProperty = this.__element.hasAttribute(propertyName);
|
|
99
103
|
if (type === Boolean) {
|
|
100
104
|
if (defaultValue) {
|
|
101
|
-
const negatedPropertyName = __getPropertyName(name, "
|
|
102
|
-
const hasNegatedProperty =
|
|
105
|
+
const negatedPropertyName = __getPropertyName(name, "no");
|
|
106
|
+
const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);
|
|
103
107
|
return !hasNegatedProperty;
|
|
104
108
|
}
|
|
105
109
|
return hasProperty || defaultValue;
|
|
106
110
|
}
|
|
107
|
-
const value = this.__element.
|
|
111
|
+
const value = this.__element.getAttribute(propertyName);
|
|
108
112
|
if (type === Number) {
|
|
109
113
|
return hasProperty ? Number(value) : defaultValue;
|
|
110
114
|
}
|
|
@@ -139,16 +143,16 @@ class OptionsManager extends AbstractManager {
|
|
|
139
143
|
switch (type) {
|
|
140
144
|
case Boolean:
|
|
141
145
|
if (defaultValue) {
|
|
142
|
-
const negatedPropertyName = __getPropertyName(name, "
|
|
146
|
+
const negatedPropertyName = __getPropertyName(name, "no");
|
|
143
147
|
if (value) {
|
|
144
|
-
|
|
148
|
+
this.__element.removeAttribute(negatedPropertyName);
|
|
145
149
|
} else {
|
|
146
|
-
this.__element.
|
|
150
|
+
this.__element.setAttribute(negatedPropertyName, "");
|
|
147
151
|
}
|
|
148
152
|
} else if (value) {
|
|
149
|
-
this.__element.
|
|
153
|
+
this.__element.setAttribute(propertyName, "");
|
|
150
154
|
} else {
|
|
151
|
-
|
|
155
|
+
this.__element.removeAttribute(propertyName);
|
|
152
156
|
}
|
|
153
157
|
break;
|
|
154
158
|
case Array:
|
|
@@ -156,7 +160,7 @@ class OptionsManager extends AbstractManager {
|
|
|
156
160
|
this.__values[name] = value;
|
|
157
161
|
break;
|
|
158
162
|
default:
|
|
159
|
-
this.__element.
|
|
163
|
+
this.__element.setAttribute(propertyName, value);
|
|
160
164
|
}
|
|
161
165
|
}
|
|
162
166
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/js-toolkit/Base/managers/OptionsManager.ts"],
|
|
4
|
-
"sourcesContent": ["import deepmerge from 'deepmerge';\nimport type { Options as DeepmergeOptions } from 'deepmerge';\nimport { AbstractManager } from './AbstractManager.js';\nimport { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from '../../utils/index.js';\nimport type { Base } from '../index.js';\n\ntype OptionType =\n | StringConstructor\n | NumberConstructor\n | BooleanConstructor\n | ArrayConstructor\n | ObjectConstructor;\n\ntype ArrayOption = {\n type: ArrayConstructor;\n default?: (instance: Base) => unknown[];\n merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n type: ObjectConstructor;\n default?: (instance: Base) => unknown;\n merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n type: StringConstructor;\n default?: string | ((instance: Base) => string);\n};\n\ntype NumberOption = {\n type: NumberConstructor;\n default?: number | ((instance: Base) => number);\n};\n\ntype BooleanOption = {\n type: BooleanConstructor;\n default?: boolean | ((instance: Base) => boolean);\n};\n\nexport type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;\nexport type OptionsSchema = { [name: string]: OptionType | OptionObject };\nexport type OptionsInterface = { [optionName: string]: unknown };\n\n/**\n * List of allowed types.\n */\nconst types: Set<OptionType> = new Set([String, Number, Boolean, Array, Object]);\n\n/**\n * The default values to return for each available type.\n */\nconst __defaultValues = {\n String: '',\n Number: 0,\n Boolean: false,\n Array: () => [],\n Object: () => ({}),\n};\n\n/**\n * Property name cache.\n */\nconst __propertyNameCache: Map<string, string> = new Map();\n\n/**\n * Get a property name.\n */\nexport function __getPropertyName(name: string, prefix = '') {\n const key = name + prefix;\n\n if (__propertyNameCache.has(key)) {\n return __propertyNameCache.get(key);\n }\n\n const
|
|
5
|
-
"mappings": "AAAA,OAAO,eAAe;AAEtB,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY,WAAW,WAAW,SAAS,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import deepmerge from 'deepmerge';\nimport type { Options as DeepmergeOptions } from 'deepmerge';\nimport { AbstractManager } from './AbstractManager.js';\nimport { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from '../../utils/index.js';\nimport type { Base } from '../index.js';\nimport { features } from '../features.js';\n\ntype OptionType =\n | StringConstructor\n | NumberConstructor\n | BooleanConstructor\n | ArrayConstructor\n | ObjectConstructor;\n\ntype ArrayOption = {\n type: ArrayConstructor;\n default?: (instance: Base) => unknown[];\n merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n type: ObjectConstructor;\n default?: (instance: Base) => unknown;\n merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n type: StringConstructor;\n default?: string | ((instance: Base) => string);\n};\n\ntype NumberOption = {\n type: NumberConstructor;\n default?: number | ((instance: Base) => number);\n};\n\ntype BooleanOption = {\n type: BooleanConstructor;\n default?: boolean | ((instance: Base) => boolean);\n};\n\nexport type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;\nexport type OptionsSchema = { [name: string]: OptionType | OptionObject };\nexport type OptionsInterface = { [optionName: string]: unknown };\n\n/**\n * List of allowed types.\n */\nconst types: Set<OptionType> = new Set([String, Number, Boolean, Array, Object]);\n\n/**\n * The default values to return for each available type.\n */\nconst __defaultValues = {\n String: '',\n Number: 0,\n Boolean: false,\n Array: () => [],\n Object: () => ({}),\n};\n\n/**\n * Property name cache.\n */\nconst __propertyNameCache: Map<string, string> = new Map();\nconst matchUppercaseRegexp = /([A-Z])/g;\n\n/**\n * Get a property name.\n */\nexport function __getPropertyName(name: string, prefix = '') {\n const key = name + prefix;\n\n if (__propertyNameCache.has(key)) {\n return __propertyNameCache.get(key);\n }\n\n const attributes = features.get('attributes');\n const normalizedName = name.replace(matchUppercaseRegexp, '-$1');\n const propertyName = `${attributes.option}${prefix ? `-${prefix}` : ''}-${normalizedName}`;\n __propertyNameCache.set(key, propertyName);\n return propertyName;\n}\n\n/**\n * Register an option.\n *\n * @param {OptionsManager} that\n * @param {string} name\n * @param {OptionObject} config\n * @returns {void}\n * @private\n */\nfunction __register(that: OptionsManager, name: string, config: OptionObject) {\n if (!types.has(config.type)) {\n if (isDev) {\n throw new Error(\n `The \"${name}\" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`,\n );\n }\n return;\n }\n\n config.default = config.default ?? __defaultValues[config.type.name];\n\n if ((config.type === Array || config.type === Object) && !isFunction(config.default)) {\n if (isDev) {\n throw new Error(\n `The default value for options of type \"${config.type.name}\" must be returned by a function.`,\n );\n }\n return;\n }\n\n Object.defineProperty(that, name, {\n get: () => that.get(name, config),\n set: (value) => {\n that.set(name, value, config);\n },\n enumerable: true,\n });\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n *\n * @todo Use `MutationObserver` to update values? Might be more performant.\n */\nexport class OptionsManager extends AbstractManager {\n /**\n * An object to store Array and Object values for reference.\n *\n * @private\n */\n __values = {};\n\n /**\n * Default value for the name property.\n */\n name = 'Base';\n\n /**\n * Default value for the debug property.\n */\n debug = false;\n\n /**\n * Default value for the log property.\n */\n log = false;\n\n /**\n * Class constructor.\n */\n constructor(base: Base) {\n super(base);\n\n this.__hideProperties(['__values', '__defaultValues']);\n const schema: OptionsSchema = this.__config.options || {};\n this.name = this.__config.name;\n\n schema.debug = {\n type: Boolean,\n default: this.__config.debug ?? false,\n };\n\n schema.log = {\n type: Boolean,\n default: this.__config.log ?? false,\n };\n\n for (const [name, config] of Object.entries(schema)) {\n __register(\n this,\n name,\n types.has(config as OptionType)\n ? ({ type: config as OptionType } as OptionObject)\n : (config as OptionObject),\n );\n }\n }\n\n /**\n * Get an option value.\n */\n get(name: string, config: OptionObject) {\n const { type } = config;\n const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;\n const propertyName = __getPropertyName(name);\n const hasProperty = this.__element.hasAttribute(propertyName);\n\n if (type === Boolean) {\n if (defaultValue) {\n const negatedPropertyName = __getPropertyName(name, 'no');\n const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);\n\n return !hasNegatedProperty;\n }\n\n return hasProperty || defaultValue;\n }\n\n const value = this.__element.getAttribute(propertyName);\n\n if (type === Number) {\n return hasProperty ? Number(value) : defaultValue;\n }\n\n if (type === Array || type === Object) {\n // eslint-disable-next-line no-param-reassign\n config = type === Array ? (config as ArrayOption) : (config as ObjectOption);\n\n if (!this.__values[name]) {\n let val = hasProperty ? JSON.parse(value) : defaultValue;\n\n if (isDefined(config.merge)) {\n val = isBoolean(config.merge)\n ? deepmerge(defaultValue, val)\n : deepmerge(defaultValue, val, config.merge);\n }\n\n this.__values[name] = val;\n }\n\n return this.__values[name];\n }\n\n return hasProperty ? value : defaultValue;\n }\n\n /**\n * Set an option value.\n */\n set(name: string, value: unknown, config: OptionObject) {\n const { type, default: defaultValue } = config;\n const propertyName = __getPropertyName(name);\n\n if (value.constructor.name !== type.name) {\n if (isDev) {\n const val = isArray(value) || isObject(value) ? JSON.stringify(value) : value;\n throw new TypeError(\n `The \"${val}\" value for the \"${name}\" option must be of type \"${type.name}\"`,\n );\n }\n return;\n }\n\n switch (type) {\n case Boolean:\n if (defaultValue) {\n const negatedPropertyName = __getPropertyName(name, 'no');\n\n if (value) {\n this.__element.removeAttribute(negatedPropertyName);\n } else {\n this.__element.setAttribute(negatedPropertyName, '');\n }\n } else if (value) {\n this.__element.setAttribute(propertyName, '');\n } else {\n this.__element.removeAttribute(propertyName);\n }\n break;\n case Array:\n case Object:\n this.__values[name] = value;\n break;\n default:\n this.__element.setAttribute(propertyName, value as string);\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,11 +2,11 @@ import { AbstractManager } from "./AbstractManager.js";
|
|
|
2
2
|
import {
|
|
3
3
|
isDev,
|
|
4
4
|
isArray,
|
|
5
|
-
isDefined,
|
|
6
5
|
getAncestorWhereUntil,
|
|
7
6
|
endsWith,
|
|
8
7
|
startsWith
|
|
9
8
|
} from "../../utils/index.js";
|
|
9
|
+
import { features } from "../features.js";
|
|
10
10
|
const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
|
|
11
11
|
const NAMESPACED_REF_REGEX = /^(.*\.)/;
|
|
12
12
|
const normalizedRefNamesCache = /* @__PURE__ */ new Map();
|
|
@@ -25,10 +25,11 @@ function normalizeRefName(name) {
|
|
|
25
25
|
return normalizedName;
|
|
26
26
|
}
|
|
27
27
|
function refBelongToInstance(ref, rootElement, name) {
|
|
28
|
-
const
|
|
28
|
+
const attributes = features.get("attributes");
|
|
29
|
+
const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);
|
|
29
30
|
const firstComponentAncestor = getAncestorWhereUntil(
|
|
30
31
|
ref,
|
|
31
|
-
(el) => el && (isPrefixed ? el.
|
|
32
|
+
(el) => el && (isPrefixed ? el.getAttribute(attributes.component) === name && el : el.getAttribute(attributes.component)) && el !== rootElement,
|
|
32
33
|
(el) => el === rootElement
|
|
33
34
|
);
|
|
34
35
|
return firstComponentAncestor === rootElement;
|
|
@@ -37,31 +38,22 @@ function __register(that, refName) {
|
|
|
37
38
|
const isMultiple = endsWith(refName, "[]");
|
|
38
39
|
const propName = normalizeRefName(refName);
|
|
39
40
|
const { name } = that.__base.$options;
|
|
41
|
+
const attributes = features.get("attributes");
|
|
40
42
|
const refs = Array.from(
|
|
41
43
|
that.__element.querySelectorAll(
|
|
42
|
-
`[
|
|
44
|
+
`[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`
|
|
43
45
|
)
|
|
44
46
|
).filter((ref) => refBelongToInstance(ref, that.__element, name));
|
|
45
47
|
if (isDev && !isMultiple && refs.length > 1) {
|
|
46
48
|
console.warn(
|
|
47
|
-
|
|
48
|
-
`[${that.__base.$options.name}]`,
|
|
49
|
+
`[${that.__base.$id}]`,
|
|
49
50
|
`The "${refName}" ref has been found multiple times.`,
|
|
50
51
|
"Did you forgot to add the `[]` suffix to its name?"
|
|
51
52
|
);
|
|
52
53
|
}
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
console.warn(
|
|
56
|
-
// @ts-ignore
|
|
57
|
-
`[${that.__base.$options.name}]`,
|
|
58
|
-
`The "${refName}" ref is missing.`,
|
|
59
|
-
`Is there an \`[data-ref="${refName}"]\` element in the component's scope?`
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
return;
|
|
54
|
+
if (refs.length) {
|
|
55
|
+
that.__eventsManager.bindRef(refName, refs);
|
|
63
56
|
}
|
|
64
|
-
that.__eventsManager.bindRef(refName, refs);
|
|
65
57
|
Object.defineProperty(that, propName, {
|
|
66
58
|
// @todo remove usage of non-multiple refs as array
|
|
67
59
|
value: isMultiple || refs.length > 1 ? refs : refs[0],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/js-toolkit/Base/managers/RefsManager.ts"],
|
|
4
|
-
"sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n isDev,\n isArray,\n isDefined,\n getAncestorWhereUntil,\n endsWith,\n startsWith,\n} from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\nconst normalizedRefNamesCache = new Map();\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n if (normalizedRefNamesCache.has(name)) {\n return normalizedRefNamesCache.get(name);\n }\n\n let normalizedName = name;\n\n if (endsWith(name, '[]')) {\n normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n }\n\n if (normalizedName.includes('.')) {\n return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n }\n\n normalizedRefNamesCache.set(name, normalizedName);\n return normalizedName;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n const isPrefixed = startsWith(ref.
|
|
5
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n isDev,\n isArray,\n isDefined,\n getAncestorWhereUntil,\n endsWith,\n startsWith,\n} from '../../utils/index.js';\nimport { features } from '../features.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\nconst normalizedRefNamesCache = new Map();\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n if (normalizedRefNamesCache.has(name)) {\n return normalizedRefNamesCache.get(name);\n }\n\n let normalizedName = name;\n\n if (endsWith(name, '[]')) {\n normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n }\n\n if (normalizedName.includes('.')) {\n return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n }\n\n normalizedRefNamesCache.set(name, normalizedName);\n return normalizedName;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n const attributes = features.get('attributes');\n const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);\n const firstComponentAncestor = getAncestorWhereUntil(\n ref,\n (el) =>\n el &&\n (isPrefixed\n ? el.getAttribute(attributes.component) === name && el\n : el.getAttribute(attributes.component)) &&\n el !== rootElement,\n (el) => el === rootElement,\n );\n\n return firstComponentAncestor === rootElement;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n const isMultiple = endsWith(refName, '[]');\n const propName = normalizeRefName(refName);\n const { name } = that.__base.$options;\n const attributes = features.get('attributes');\n\n const refs = Array.from(\n that.__element.querySelectorAll<HTMLElement>(\n `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`,\n ),\n ).filter((ref) => refBelongToInstance(ref, that.__element, name));\n\n /* v8 ignore next 7 */\n if (isDev && !isMultiple && refs.length > 1) {\n console.warn(\n `[${that.__base.$id}]`,\n `The \"${refName}\" ref has been found multiple times.`,\n 'Did you forgot to add the `[]` suffix to its name?',\n );\n }\n\n if (refs.length) {\n that.__eventsManager.bindRef(refName, refs);\n }\n\n Object.defineProperty(that, propName, {\n // @todo remove usage of non-multiple refs as array\n value: isMultiple || refs.length > 1 ? refs : refs[0],\n enumerable: true,\n configurable: true,\n });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n const propName = normalizeRefName(refName);\n const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n /**\n * Get refs configuration.\n */\n get __refs() {\n return this.__config.refs ?? [];\n }\n\n /**\n * Register all refs.\n */\n registerAll() {\n for (const refName of this.__refs) __register(this, refName);\n }\n\n /**\n * Unregister all refs.\n */\n unregisterAll() {\n for (const refName of this.__refs) __unregister(this, refName);\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAEzB,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B,oBAAI,IAAI;AAKjC,SAAS,iBAAiB,MAAc;AAC7C,MAAI,wBAAwB,IAAI,IAAI,GAAG;AACrC,WAAO,wBAAwB,IAAI,IAAI;AAAA,EACzC;AAEA,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,0BAAwB,IAAI,MAAM,cAAc;AAChD,SAAO;AACT;AAKA,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,aAAa,WAAW,IAAI,aAAa,WAAW,GAAG,GAAG,IAAI;AACpE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aACG,GAAG,aAAa,WAAW,SAAS,MAAM,QAAQ,KAClD,GAAG,aAAa,WAAW,SAAS,MACxC,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,SAAS,SAAS,IAAI;AACzC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAC7B,QAAM,aAAa,SAAS,IAAI,YAAY;AAE5C,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAAA,IACzE;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAGhE,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MACN,IAAI,KAAK,OAAO,GAAG;AAAA,MACnB,QAAQ,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,MAAI,KAAK,QAAQ;AACf,SAAK,gBAAgB,QAAQ,SAAS,IAAI;AAAA,EAC5C;AAEA,SAAO,eAAe,MAAM,UAAU;AAAA;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,IACpD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,QAAQ,CAAC;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK,OAAQ,YAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,OAAQ,cAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { OptionsManager, __getPropertyName } from "./OptionsManager.js";
|
|
2
2
|
import { useResize } from "../../services/index.js";
|
|
3
3
|
import { isDev } from "../../utils/index.js";
|
|
4
|
+
import { features } from "../features.js";
|
|
4
5
|
function __getResponsiveName(that, name) {
|
|
5
6
|
const { breakpoint } = useResize().props();
|
|
6
7
|
if (!breakpoint) {
|
|
@@ -9,12 +10,14 @@ function __getResponsiveName(that, name) {
|
|
|
9
10
|
let responsiveName = name;
|
|
10
11
|
const propertyName = __getPropertyName(name);
|
|
11
12
|
const regex = new RegExp(`${propertyName}:(.+)$`);
|
|
12
|
-
|
|
13
|
+
const attributes = features.get("attributes");
|
|
14
|
+
const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
|
|
15
|
+
for (const optionName of that.__element.getAttributeNames()) {
|
|
13
16
|
if (regex.test(optionName)) {
|
|
14
17
|
const [, breakpoints] = optionName.match(regex);
|
|
15
18
|
const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
|
|
16
19
|
if (isInBreakpoint) {
|
|
17
|
-
responsiveName = optionName.replace(
|
|
20
|
+
responsiveName = optionName.replace(dataOptionRegExp, "");
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/js-toolkit/Base/managers/ResponsiveOptionsManager.ts"],
|
|
4
|
-
"sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Get the currently active responsive name of an option.\n *\n * @param {ResponsiveOptionsManager} that\n * @param {string} name The default name of the option.\n * @returns {string} The responsive name if one matches the current breakpoint, the default name otherwise.\n */\nfunction __getResponsiveName(that: ResponsiveOptionsManager, name: string) {\n const { breakpoint } = useResize().props();\n\n if (!breakpoint) {\n return name;\n }\n\n let responsiveName = name;\n const propertyName = __getPropertyName(name);\n const regex = new RegExp(`${propertyName}:(.+)$`);\n\n for (const optionName of
|
|
5
|
-
"mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;
|
|
4
|
+
"sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\nimport { features } from '../features.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Get the currently active responsive name of an option.\n *\n * @param {ResponsiveOptionsManager} that\n * @param {string} name The default name of the option.\n * @returns {string} The responsive name if one matches the current breakpoint, the default name otherwise.\n */\nfunction __getResponsiveName(that: ResponsiveOptionsManager, name: string) {\n const { breakpoint } = useResize().props();\n\n if (!breakpoint) {\n return name;\n }\n\n let responsiveName = name;\n const propertyName = __getPropertyName(name);\n const regex = new RegExp(`${propertyName}:(.+)$`);\n const attributes = features.get('attributes');\n const dataOptionRegExp = new RegExp(`^${attributes.option}-`);\n\n for (const optionName of that.__element.getAttributeNames()) {\n if (regex.test(optionName)) {\n const [, breakpoints] = optionName.match(regex);\n const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n if (isInBreakpoint) {\n responsiveName = optionName.replace(dataOptionRegExp, '');\n }\n }\n }\n\n return responsiveName;\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n */\nexport class ResponsiveOptionsManager extends OptionsManager {\n /**\n * Get an option value.\n *\n * @param {string} name The option name.\n * @param {ResponsiveOptionObject} config The option configuration.\n * @returns {any}\n */\n get(name: string, config: ResponsiveOptionObject) {\n if (!config.responsive) {\n return super.get(name, config);\n }\n\n return super.get(__getResponsiveName(this, name), config);\n }\n\n /**\n * Set an option value.\n *\n * @param {string} name The option name.\n * @param {any} value The new value.\n * @param {ResponsiveOptionObject} config The option configuration.\n */\n set(name: string, value: unknown, config: ResponsiveOptionObject) {\n if (!config.responsive) {\n super.set(name, value, config);\n return;\n }\n\n if (isDev) {\n console.warn(`[${this.__config.name}]`, 'Responsive options are read-only.');\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAWzB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,eAAe,kBAAkB,IAAI;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,QAAQ;AAChD,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,mBAAmB,IAAI,OAAO,IAAI,WAAW,MAAM,GAAG;AAE5D,aAAW,cAAc,KAAK,UAAU,kBAAkB,GAAG;AAC3D,QAAI,MAAM,KAAK,UAAU,GAAG;AAC1B,YAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,YAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,UAAI,gBAAgB;AAClB,yBAAiB,WAAW,QAAQ,kBAAkB,EAAE;AAAA,MAC1D;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,iCAAiC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3D,IAAI,MAAc,QAAgC;AAChD,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO,MAAM,IAAI,MAAM,MAAM;AAAA,IAC/B;AAEA,WAAO,MAAM,IAAI,oBAAoB,MAAM,IAAI,GAAG,MAAM;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,IAAI,KAAK,mCAAmC;AAAA,IAC7E;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Base/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { Base, BaseConfig, BaseConstructor } from './index.js';
|
|
|
2
2
|
/**
|
|
3
3
|
* Add a task to the main queue.
|
|
4
4
|
*/
|
|
5
|
-
export declare function addToQueue(fn: () => unknown):
|
|
5
|
+
export declare function addToQueue(fn: () => unknown): Promise<unknown>;
|
|
6
6
|
/**
|
|
7
7
|
* Get a list of elements based on the name of a component.
|
|
8
8
|
*
|
package/Base/utils.js
CHANGED
|
@@ -9,25 +9,27 @@ function addToQueue(fn) {
|
|
|
9
9
|
if (!queue) {
|
|
10
10
|
queue = new SmartQueue();
|
|
11
11
|
}
|
|
12
|
-
queue.add(fn);
|
|
12
|
+
return queue.add(fn);
|
|
13
13
|
}
|
|
14
14
|
const selectors = /* @__PURE__ */ new Map();
|
|
15
15
|
const separator = " ";
|
|
16
16
|
function getSelector(nameOrSelector) {
|
|
17
|
-
|
|
17
|
+
const { component } = features.get("attributes");
|
|
18
|
+
const key = component + nameOrSelector;
|
|
19
|
+
if (!selectors.has(key)) {
|
|
18
20
|
const parts = [
|
|
19
21
|
// Single selector
|
|
20
|
-
`[
|
|
22
|
+
`[${component}="${nameOrSelector}"]`,
|
|
21
23
|
// Selector in the middle of a list of selectors
|
|
22
|
-
`[
|
|
24
|
+
`[${component}*="${separator}${nameOrSelector}${separator}"]`,
|
|
23
25
|
// Selector at the end of a list of selectors
|
|
24
|
-
`[
|
|
26
|
+
`[${component}$="${separator}${nameOrSelector}"]`,
|
|
25
27
|
// Selector at the beginning of a list of selectors
|
|
26
|
-
`[
|
|
28
|
+
`[${component}^="${nameOrSelector}${separator}"]`
|
|
27
29
|
];
|
|
28
|
-
selectors.set(
|
|
30
|
+
selectors.set(key, parts.join(","));
|
|
29
31
|
}
|
|
30
|
-
return selectors.get(
|
|
32
|
+
return selectors.get(key);
|
|
31
33
|
}
|
|
32
34
|
function getComponentElements(nameOrSelector, element = document) {
|
|
33
35
|
const selector = getSelector(nameOrSelector);
|
package/Base/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/Base/utils.ts"],
|
|
4
|
-
"sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown)
|
|
5
|
-
"mappings": "AAAA,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,
|
|
4
|
+
"sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown) {\n if (features.get('blocking')) {\n fn();\n return;\n }\n\n if (!queue) {\n queue = new SmartQueue();\n }\n\n return queue.add(fn);\n}\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n const { component } = features.get('attributes');\n const key = component + nameOrSelector;\n\n if (!selectors.has(key)) {\n const parts = [\n // Single selector\n `[${component}=\"${nameOrSelector}\"]`,\n // Selector in the middle of a list of selectors\n `[${component}*=\"${separator}${nameOrSelector}${separator}\"]`,\n // Selector at the end of a list of selectors\n `[${component}$=\"${separator}${nameOrSelector}\"]`,\n // Selector at the beginning of a list of selectors\n `[${component}^=\"${nameOrSelector}${separator}\"]`,\n ];\n selectors.set(key, parts.join(','));\n }\n\n return selectors.get(key);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n * The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n * The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n * A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n nameOrSelector: string,\n element: HTMLElement | Document = document,\n): HTMLElement[] {\n const selector = getSelector(nameOrSelector);\n let elements = [];\n\n try {\n elements = Array.from(element.querySelectorAll(selector));\n // eslint-disable-next-line no-empty\n } catch {}\n\n // If no child component found with the default selector, and if the selector does not\n // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\n elements = Array.from(element.querySelectorAll(nameOrSelector));\n }\n\n return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n *\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n instance: Base,\n event: string,\n config: BaseConfig,\n): Base | Base['$el'] {\n if (eventIsDefinedInConfig(event, config)) {\n return instance;\n }\n\n if (eventIsNative(event, instance.$el)) {\n return instance.$el;\n }\n\n if (isDev) {\n console.warn(\n `[${config.name}]`,\n `The \"${event}\" event is missing from the configuration and is not a native`,\n `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n );\n }\n\n // @todo v3 return false or null\n return instance;\n}\n\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n ctor: T,\n): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n ctor?: T,\n): Set<InstanceType<T>> | Set<Base> {\n if (isDefined(ctor)) {\n const filteredInstances = new Set<InstanceType<T>>();\n for (const instance of instances) {\n if (instance instanceof ctor) {\n filteredInstances.add(instance as InstanceType<T>);\n }\n }\n return filteredInstances;\n } else {\n return new Set(instances);\n }\n}\n\nexport function addInstance(instance: Base) {\n instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n instances.delete(instance);\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAmB;AAC5C,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,SAAO,MAAM,IAAI,EAAE;AACrB;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,MAAM,YAAY;AAExB,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,IAAI,SAAS,KAAK,cAAc;AAAA;AAAA,MAEhC,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAEzD,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc;AAAA;AAAA,MAE7C,IAAI,SAAS,MAAM,cAAc,GAAG,SAAS;AAAA,IAC/C;AACA,cAAU,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EACpC;AAEA,SAAO,UAAU,IAAI,GAAG;AAC1B;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,KAAK,EAAE,CAAC;AACxC;AAOO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO,IAAI;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,wCAAwC,SAAS,IAAI,YAAY,IAAI;AAAA,IACvE;AAAA,EACF;AAGA,SAAO;AACT;AAEA,MAAM,YAAY,oBAAI,IAAU;AASzB,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,20 +55,22 @@ function withBreakpointManager(BaseClass, breakpoints) {
|
|
|
55
55
|
* Override the default $mount method to prevent component's from being
|
|
56
56
|
* mounted when they should not.
|
|
57
57
|
*/
|
|
58
|
-
$mount() {
|
|
59
|
-
super.$mount();
|
|
58
|
+
async $mount() {
|
|
59
|
+
await super.$mount();
|
|
60
60
|
testBreakpoints(instances.get(this));
|
|
61
61
|
return this;
|
|
62
62
|
}
|
|
63
63
|
/**
|
|
64
64
|
* Destroy all instances when the main one is destroyed.
|
|
65
65
|
*/
|
|
66
|
-
$destroy() {
|
|
66
|
+
async $destroy() {
|
|
67
|
+
const promises = [];
|
|
67
68
|
if (isArray(instances.get(this))) {
|
|
68
69
|
for (const [, instance] of instances.get(this)) {
|
|
69
|
-
instance.$destroy();
|
|
70
|
+
promises.push(instance.$destroy());
|
|
70
71
|
}
|
|
71
72
|
}
|
|
73
|
+
await Promise.all(promises);
|
|
72
74
|
return super.$destroy();
|
|
73
75
|
}
|
|
74
76
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/decorators/withBreakpointManager.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n const { breakpoint } = useResize().props();\n for (const [breakpointKeys, instance] of breakpoints) {\n if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n setTimeout(() => instance.$mount(), 0);\n } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n instance.$destroy();\n }\n }\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n instance: Base,\n breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n return breakpoints.map(([bk, ComponentClass]) => {\n const child = new ComponentClass(instance.$el);\n Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n return [bk.split(' '), child];\n });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n BaseClass: typeof Base,\n breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n if (!isArray(breakpoints)) {\n if (isDev) {\n throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n if (breakpoints.length < 2) {\n if (isDev) {\n throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n const { add, props } = useResize();\n\n // Do nothing if no breakpoint has been defined.\n // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n if (!props().breakpoint) {\n if (isDev) {\n throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n /**\n * Class.\n */\n class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n /**\n * Watch for the document resize to test the breakpoints.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n if (!instances.has(this)) {\n instances.set(this, mountComponents(this, breakpoints));\n }\n\n add(`BreakpointManager-${this.$id}`, () => {\n testBreakpoints(instances.get(this));\n });\n }\n\n /**\n * Override the default $mount method to prevent component's from being\n * mounted when they should not.\n */\n $mount()
|
|
5
|
-
"mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACF;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,
|
|
4
|
+
"sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n const { breakpoint } = useResize().props();\n for (const [breakpointKeys, instance] of breakpoints) {\n if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n setTimeout(() => instance.$mount(), 0);\n } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n instance.$destroy();\n }\n }\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n instance: Base,\n breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n return breakpoints.map(([bk, ComponentClass]) => {\n const child = new ComponentClass(instance.$el);\n Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n return [bk.split(' '), child];\n });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n BaseClass: typeof Base,\n breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n if (!isArray(breakpoints)) {\n if (isDev) {\n throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n if (breakpoints.length < 2) {\n if (isDev) {\n throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n const { add, props } = useResize();\n\n // Do nothing if no breakpoint has been defined.\n // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n if (!props().breakpoint) {\n if (isDev) {\n throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n }\n\n // @ts-ignore\n return BaseClass;\n }\n\n /**\n * Class.\n */\n class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n /**\n * Watch for the document resize to test the breakpoints.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n if (!instances.has(this)) {\n instances.set(this, mountComponents(this, breakpoints));\n }\n\n add(`BreakpointManager-${this.$id}`, () => {\n testBreakpoints(instances.get(this));\n });\n }\n\n /**\n * Override the default $mount method to prevent component's from being\n * mounted when they should not.\n */\n async $mount() {\n await super.$mount();\n\n testBreakpoints(instances.get(this));\n\n return this;\n }\n\n /**\n * Destroy all instances when the main one is destroyed.\n */\n async $destroy() {\n const promises = [];\n if (isArray(instances.get(this))) {\n for (const [, instance] of instances.get(this)) {\n promises.push(instance.$destroy());\n }\n }\n\n await Promise.all(promises);\n\n return super.$destroy();\n }\n }\n\n // @ts-ignore\n return WithBreakpointManager;\n}\n"],
|
|
5
|
+
"mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACF;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM,SAAS;AACb,YAAM,MAAM,OAAO;AAEnB,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,WAAW;AACf,YAAM,WAAW,CAAC;AAClB,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,mBAAW,CAAC,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,GAAG;AAC9C,mBAAS,KAAK,SAAS,SAAS,CAAC;AAAA,QACnC;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAE1B,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useResize } from "../services/index.js";
|
|
2
2
|
import { isDev, startsWith } from "../utils/index.js";
|
|
3
|
+
import { features } from "../Base/features.js";
|
|
3
4
|
function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
|
|
4
5
|
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
5
6
|
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
@@ -67,8 +68,9 @@ function withBreakpointObserver(BaseClass) {
|
|
|
67
68
|
return;
|
|
68
69
|
}
|
|
69
70
|
const key = `BreakpointObserver-${this.$id}`;
|
|
71
|
+
const attributes = features.get("attributes");
|
|
70
72
|
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
71
|
-
if (mutation.type === "attributes" &&
|
|
73
|
+
if (mutation.type === "attributes" && startsWith(mutation.attributeName, `${attributes.option}-`)) {
|
|
72
74
|
if (!hasBreakpointConfiguration(this)) {
|
|
73
75
|
this.$mount();
|
|
74
76
|
remove(key);
|
|
@@ -87,7 +89,7 @@ function withBreakpointObserver(BaseClass) {
|
|
|
87
89
|
* Override the default $mount method to prevent component's from being
|
|
88
90
|
* mounted when they should not.
|
|
89
91
|
*/
|
|
90
|
-
$mount() {
|
|
92
|
+
async $mount() {
|
|
91
93
|
if (!hasBreakpointConfiguration(this)) {
|
|
92
94
|
return super.$mount();
|
|
93
95
|
}
|