@studiometa/ui 0.2.52 → 1.0.0-alpha.0
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.cjs +58 -28
- package/atoms/Action/Action.cjs.map +2 -2
- package/atoms/Action/Action.d.ts +6 -2
- package/atoms/Action/Action.js +59 -29
- package/atoms/Action/Action.js.map +2 -2
- package/atoms/Action/Target.cjs +35 -0
- package/atoms/Action/Target.cjs.map +7 -0
- package/atoms/Action/Target.d.ts +13 -0
- package/atoms/Action/Target.js +13 -0
- package/atoms/Action/Target.js.map +7 -0
- package/atoms/Action/index.cjs +1 -0
- package/atoms/Action/index.cjs.map +2 -2
- package/atoms/Action/index.d.ts +1 -0
- package/atoms/Action/index.js +1 -0
- package/atoms/Action/index.js.map +2 -2
- package/atoms/Button/Button.twig +1 -1
- package/atoms/Data/DataBind.cjs +124 -0
- package/atoms/Data/DataBind.cjs.map +7 -0
- package/atoms/Data/DataBind.d.ts +23 -0
- package/atoms/Data/DataBind.js +102 -0
- package/atoms/Data/DataBind.js.map +7 -0
- package/atoms/Data/DataComputed.cjs +49 -0
- package/atoms/Data/DataComputed.cjs.map +7 -0
- package/atoms/Data/DataComputed.d.ts +13 -0
- package/atoms/Data/DataComputed.js +28 -0
- package/atoms/Data/DataComputed.js.map +7 -0
- package/atoms/Data/DataEffect.cjs +47 -0
- package/atoms/Data/DataEffect.cjs.map +7 -0
- package/atoms/Data/DataEffect.d.ts +13 -0
- package/atoms/Data/DataEffect.js +25 -0
- package/atoms/Data/DataEffect.js.map +7 -0
- package/atoms/Data/DataModel.cjs +38 -0
- package/atoms/Data/DataModel.cjs.map +7 -0
- package/atoms/Data/DataModel.d.ts +9 -0
- package/atoms/Data/DataModel.js +16 -0
- package/atoms/Data/DataModel.js.map +7 -0
- package/atoms/Data/index.cjs +24 -0
- package/atoms/Data/index.cjs.map +7 -0
- package/atoms/Data/index.d.ts +4 -0
- package/atoms/Data/index.js +5 -0
- package/atoms/Data/index.js.map +7 -0
- package/atoms/Data/utils.cjs +46 -0
- package/atoms/Data/utils.cjs.map +7 -0
- package/atoms/Data/utils.d.ts +4 -0
- package/atoms/Data/utils.js +24 -0
- package/atoms/Data/utils.js.map +7 -0
- package/atoms/Icon/IconInline.twig +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +2 -2
- package/atoms/index.cjs +1 -0
- package/atoms/index.cjs.map +2 -2
- package/atoms/index.d.ts +1 -0
- package/atoms/index.js +1 -0
- package/atoms/index.js.map +2 -2
- package/molecules/AnchorNav/AnchorNavLink.d.ts +1 -1
- package/molecules/Menu/MenuList.d.ts +1 -1
- package/molecules/Modal/Modal.cjs +3 -4
- package/molecules/Modal/Modal.cjs.map +3 -3
- package/molecules/Modal/Modal.d.ts +1 -1
- package/molecules/Modal/Modal.js +6 -2
- package/molecules/Modal/Modal.js.map +2 -2
- 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/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './Action/index.js';
|
|
|
2
2
|
export * from './AnchorScrollTo/index.js';
|
|
3
3
|
export * from './CircularMarquee/index.js';
|
|
4
4
|
export * from './Cursor/index.js';
|
|
5
|
+
export * from './Data/index.js';
|
|
5
6
|
export * from './Figure/index.js';
|
|
6
7
|
export * from './FigureVideo/index.js';
|
|
7
8
|
export * from './LargeText/index.js';
|
package/atoms/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export * from "./Action/index.js";
|
|
|
2
2
|
export * from "./AnchorScrollTo/index.js";
|
|
3
3
|
export * from "./CircularMarquee/index.js";
|
|
4
4
|
export * from "./Cursor/index.js";
|
|
5
|
+
export * from "./Data/index.js";
|
|
5
6
|
export * from "./Figure/index.js";
|
|
6
7
|
export * from "./FigureVideo/index.js";
|
|
7
8
|
export * from "./LargeText/index.js";
|
package/atoms/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/atoms/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
|
|
5
|
-
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
4
|
+
"sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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("
|
|
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>;
|
|
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
|
|
27
|
+
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private").TransitionProps)["$options"];
|
|
28
28
|
/**
|
|
29
29
|
* Update tab indexes on mount.
|
|
30
30
|
*/
|
|
@@ -24,7 +24,6 @@ __export(Modal_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(Modal_exports);
|
|
25
25
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
26
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
27
|
-
var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
|
|
28
27
|
var Modal = class extends import_js_toolkit.Base {
|
|
29
28
|
/**
|
|
30
29
|
* Config.
|
|
@@ -143,7 +142,7 @@ var Modal = class extends import_js_toolkit.Base {
|
|
|
143
142
|
return;
|
|
144
143
|
}
|
|
145
144
|
if (isDown) {
|
|
146
|
-
|
|
145
|
+
(0, import_utils.trapFocus)(this.$refs.modal, event);
|
|
147
146
|
}
|
|
148
147
|
if (ESC && isUp) {
|
|
149
148
|
this.close();
|
|
@@ -177,7 +176,7 @@ var Modal = class extends import_js_toolkit.Base {
|
|
|
177
176
|
)
|
|
178
177
|
).then(() => {
|
|
179
178
|
if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
|
|
180
|
-
saveActiveElement();
|
|
179
|
+
(0, import_utils.saveActiveElement)();
|
|
181
180
|
const autofocusElement = this.$refs.modal.querySelector(
|
|
182
181
|
this.$options.autofocus
|
|
183
182
|
);
|
|
@@ -198,7 +197,7 @@ var Modal = class extends import_js_toolkit.Base {
|
|
|
198
197
|
document.documentElement.style.overflow = "";
|
|
199
198
|
}
|
|
200
199
|
this.isOpen = false;
|
|
201
|
-
|
|
200
|
+
(0, import_utils.untrapFocus)();
|
|
202
201
|
this.$emit("close");
|
|
203
202
|
const refs = this.$refs;
|
|
204
203
|
return Promise.all(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAsC;AAEtC,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n transition,\n trapFocus as trap,\n untrapFocus as untrap,\n saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n $refs: {\n close: HTMLElement[];\n container: HTMLElement;\n content: HTMLElement;\n modal: HTMLElement;\n open: HTMLElement[];\n overlay: HTMLElement;\n };\n $options: {\n /**\n * A selector where to move the modal to.\n */\n move: string;\n /**\n * A selector for the element to set the focus to when the modal opens.\n */\n autofocus: string;\n /**\n * Lock or allow scroll in the documentElement.\n */\n scrollLock: boolean;\n /**\n * The styles for the different state of the modal.\n */\n styles: ModalStylesOption;\n };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Modal',\n refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n emits: ['open', 'close'],\n options: {\n move: String,\n autofocus: { type: String, default: '[autofocus]' },\n styles: {\n type: Object,\n default: (): ModalStylesOption => ({\n modal: {\n closed: {\n opacity: '0',\n pointerEvents: 'none',\n visibility: 'hidden',\n },\n },\n }),\n },\n scrollLock: {\n type: Boolean,\n default: true,\n },\n },\n };\n\n /**\n * Wether the modal is open or not.\n */\n isOpen = false;\n\n /**\n * @private\n */\n __refsBackup: (T & ModalProps)['$refs'];\n\n /**\n * @private\n */\n __refModalPlaceholder: Comment;\n\n /**\n * @private\n */\n __refModalParentBackup: HTMLElement;\n\n /**\n * @private\n */\n __refModalUnbindGetRefFilter: () => void;\n\n /**\n * Open the modal on click on the `open` ref.\n */\n get onOpenClick() {\n return this.open;\n }\n\n /**\n * Close the modal on click on the `close` ref.\n */\n get onCloseClick() {\n return this.close;\n }\n\n /**\n * Close the modal on click on the `overlay` ref.\n * @returns {Function} The component's `close` method.\n */\n get onOverlayClick() {\n return this.close;\n }\n\n /**\n * Initialize the component's behaviours.\n */\n mounted() {\n this.isOpen = false;\n this.close();\n\n if (this.$options.move) {\n const target = document.querySelector(this.$options.move) || document.body;\n\n this.__refsBackup = this.$refs;\n this.__refModalPlaceholder = document.createComment('');\n this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n target.append(this.$refs.modal);\n }\n }\n\n /**\n * Add the moved refs to `this.$refs` when using the `move` options.\n */\n get $refs() {\n const $refs = super.$refs;\n\n if (this.$options.move && this.__refsBackup) {\n Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n if (!$refs[key]) {\n // @ts-ignore\n $refs[key] = ref;\n }\n });\n }\n\n return $refs;\n }\n\n /**\n * Unbind all events on destroy.\n */\n destroyed() {\n this.close();\n\n if (this.$options.move && this.__refModalParentBackup) {\n this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n this.__refModalPlaceholder.remove();\n delete this.__refModalPlaceholder;\n delete this.__refModalParentBackup;\n }\n\n return this;\n }\n\n /**\n * Close the modal on `ESC` and trap the tabulation.\n */\n keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n if (!this.isOpen) {\n return;\n }\n\n if (isDown) {\n trap(this.$refs.modal, event);\n }\n\n if (ESC && isUp) {\n this.close();\n }\n }\n\n /**\n * Open the modal.\n */\n async open() {\n if (this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = 'hidden';\n }\n\n this.isOpen = true;\n this.$emit('open');\n\n /** @type {ModalRefs} */\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: closed,\n active,\n to: open,\n },\n 'keep',\n ),\n ),\n ).then(() => {\n if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n saveActiveElement();\n const autofocusElement = this.$refs.modal.querySelector(\n this.$options.autofocus,\n ) as HTMLElement;\n autofocusElement.focus();\n }\n return Promise.resolve();\n });\n }\n\n /**\n * Close the modal.\n */\n async close() {\n if (!this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = '';\n }\n\n this.isOpen = false;\n untrap();\n this.$emit('close');\n\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: open,\n active,\n to: closed,\n },\n 'keep',\n ),\n ),\n ).then(() => Promise.resolve());\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAsC;AAEtC,mBAKO;AAwCA,IAAM,QAAN,cAAqD,uBAAqB;AAAA;AAAA;AAAA;AAAA,EAI/E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,aAAa,WAAW,SAAS,UAAU,SAAS;AAAA,IACtE,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,MAClD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,OAA0B;AAAA,UACjC,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,cACf,YAAY;AAAA,YACd;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAAc;AAChB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS;AACd,SAAK,MAAM;AAEX,QAAI,KAAK,SAAS,MAAM;AACtB,YAAM,SAAS,SAAS,cAAc,KAAK,SAAS,IAAI,KAAK,SAAS;AAEtE,WAAK,eAAe,KAAK;AACzB,WAAK,wBAAwB,SAAS,cAAc,EAAE;AACtD,WAAK,yBAAyB,KAAK,MAAM,MAAM,iBAAiB,KAAK;AACrE,WAAK,uBAAuB,aAAa,KAAK,uBAAuB,KAAK,MAAM,KAAK;AAErF,aAAO,OAAO,KAAK,MAAM,KAAK;AAAA,IAChC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,QAAQ;AACV,UAAM,QAAQ,MAAM;AAEpB,QAAI,KAAK,SAAS,QAAQ,KAAK,cAAc;AAC3C,aAAO,QAAQ,KAAK,YAAY,EAAE,QAAQ,CAAC,CAAC,KAAK,GAAG,MAAM;AACxD,YAAI,CAAC,MAAM,GAAG,GAAG;AAEf,gBAAM,GAAG,IAAI;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,MAAM;AAEX,QAAI,KAAK,SAAS,QAAQ,KAAK,wBAAwB;AACrD,WAAK,uBAAuB,aAAa,KAAK,MAAM,OAAO,KAAK,qBAAqB;AACrF,WAAK,sBAAsB,OAAO;AAClC,aAAO,KAAK;AACZ,aAAO,KAAK;AAAA,IACd;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,OAAO,MAAM,QAAQ,IAAI,GAAoB;AACnD,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,uBAAAA,WAAK,KAAK,MAAM,OAAO,KAAK;AAAA,IAC9B;AAEA,QAAI,OAAO,MAAM;AACf,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,aAAa,eAAe,OAAO;AAEpD,QAAI,KAAK,SAAS,YAAY;AAC5B,eAAS,gBAAgB,MAAM,WAAW;AAAA,IAC5C;AAEA,SAAK,SAAS;AACd,SAAK,MAAM,MAAM;AAGjB,UAAM,OAAO,KAAK;AAElB,WAAO,QAAQ;AAAA,MACb,OAAO,QAAQ,KAAK,SAAS,MAAM,EAAE;AAAA,QACnC,CAAC,CAAC,SAAS,EAAE,MAAM,QAAQ,OAAO,IAAI,EAAE,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAG,CAAC,UACxE;AAAA,UACE,KAAK,OAAO;AAAA,UACZ;AAAA,YACE,MAAM;AAAA,YACN;AAAA,YACA,IAAI;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MACJ;AAAA,IACF,EAAE,KAAK,MAAM;AACX,UAAI,KAAK,SAAS,aAAa,KAAK,MAAM,MAAM,cAAc,KAAK,SAAS,SAAS,GAAG;AACtF,4CAAkB;AAClB,cAAM,mBAAmB,KAAK,MAAM,MAAM;AAAA,UACxC,KAAK,SAAS;AAAA,QAChB;AACA,yBAAiB,MAAM;AAAA,MACzB;AACA,aAAO,QAAQ,QAAQ;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,QAAQ;AAChB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,aAAa,eAAe,MAAM;AAEnD,QAAI,KAAK,SAAS,YAAY;AAC5B,eAAS,gBAAgB,MAAM,WAAW;AAAA,IAC5C;AAEA,SAAK,SAAS;AACd,qBAAAC,aAAO;AACP,SAAK,MAAM,OAAO;AAElB,UAAM,OAAO,KAAK;AAElB,WAAO,QAAQ;AAAA,MACb,OAAO,QAAQ,KAAK,SAAS,MAAM,EAAE;AAAA,QACnC,CAAC,CAAC,SAAS,EAAE,MAAM,QAAQ,OAAO,IAAI,EAAE,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAG,CAAC,UACxE;AAAA,UACE,KAAK,OAAO;AAAA,UACZ;AAAA,YACE,MAAM;AAAA,YACN;AAAA,YACA,IAAI;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MACJ;AAAA,IACF,EAAE,KAAK,MAAM,QAAQ,QAAQ,CAAC;AAAA,EAChC;AACF;",
|
|
6
|
+
"names": ["trap", "untrap"]
|
|
7
7
|
}
|
|
@@ -78,7 +78,7 @@ export declare class Modal<T extends BaseProps = BaseProps> extends Base<T & Mod
|
|
|
78
78
|
/**
|
|
79
79
|
* Add the moved refs to `this.$refs` when using the `move` options.
|
|
80
80
|
*/
|
|
81
|
-
get $refs(): import("@studiometa/js-toolkit/Base/managers").RefsManager & (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit
|
|
81
|
+
get $refs(): import("@studiometa/js-toolkit/Base/managers").RefsManager & (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit").BaseRefs;
|
|
82
82
|
/**
|
|
83
83
|
* Unbind all events on destroy.
|
|
84
84
|
*/
|
package/molecules/Modal/Modal.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { Base } from "@studiometa/js-toolkit";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
transition,
|
|
4
|
+
trapFocus as trap,
|
|
5
|
+
untrapFocus as untrap,
|
|
6
|
+
saveActiveElement
|
|
7
|
+
} from "@studiometa/js-toolkit/utils";
|
|
4
8
|
class Modal extends Base {
|
|
5
9
|
/**
|
|
6
10
|
* Config.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {
|
|
5
|
-
"mappings": "AAAA,SAAS,YAA6B;AAEtC,
|
|
4
|
+
"sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n transition,\n trapFocus as trap,\n untrapFocus as untrap,\n saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n $refs: {\n close: HTMLElement[];\n container: HTMLElement;\n content: HTMLElement;\n modal: HTMLElement;\n open: HTMLElement[];\n overlay: HTMLElement;\n };\n $options: {\n /**\n * A selector where to move the modal to.\n */\n move: string;\n /**\n * A selector for the element to set the focus to when the modal opens.\n */\n autofocus: string;\n /**\n * Lock or allow scroll in the documentElement.\n */\n scrollLock: boolean;\n /**\n * The styles for the different state of the modal.\n */\n styles: ModalStylesOption;\n };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Modal',\n refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n emits: ['open', 'close'],\n options: {\n move: String,\n autofocus: { type: String, default: '[autofocus]' },\n styles: {\n type: Object,\n default: (): ModalStylesOption => ({\n modal: {\n closed: {\n opacity: '0',\n pointerEvents: 'none',\n visibility: 'hidden',\n },\n },\n }),\n },\n scrollLock: {\n type: Boolean,\n default: true,\n },\n },\n };\n\n /**\n * Wether the modal is open or not.\n */\n isOpen = false;\n\n /**\n * @private\n */\n __refsBackup: (T & ModalProps)['$refs'];\n\n /**\n * @private\n */\n __refModalPlaceholder: Comment;\n\n /**\n * @private\n */\n __refModalParentBackup: HTMLElement;\n\n /**\n * @private\n */\n __refModalUnbindGetRefFilter: () => void;\n\n /**\n * Open the modal on click on the `open` ref.\n */\n get onOpenClick() {\n return this.open;\n }\n\n /**\n * Close the modal on click on the `close` ref.\n */\n get onCloseClick() {\n return this.close;\n }\n\n /**\n * Close the modal on click on the `overlay` ref.\n * @returns {Function} The component's `close` method.\n */\n get onOverlayClick() {\n return this.close;\n }\n\n /**\n * Initialize the component's behaviours.\n */\n mounted() {\n this.isOpen = false;\n this.close();\n\n if (this.$options.move) {\n const target = document.querySelector(this.$options.move) || document.body;\n\n this.__refsBackup = this.$refs;\n this.__refModalPlaceholder = document.createComment('');\n this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n target.append(this.$refs.modal);\n }\n }\n\n /**\n * Add the moved refs to `this.$refs` when using the `move` options.\n */\n get $refs() {\n const $refs = super.$refs;\n\n if (this.$options.move && this.__refsBackup) {\n Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n if (!$refs[key]) {\n // @ts-ignore\n $refs[key] = ref;\n }\n });\n }\n\n return $refs;\n }\n\n /**\n * Unbind all events on destroy.\n */\n destroyed() {\n this.close();\n\n if (this.$options.move && this.__refModalParentBackup) {\n this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n this.__refModalPlaceholder.remove();\n delete this.__refModalPlaceholder;\n delete this.__refModalParentBackup;\n }\n\n return this;\n }\n\n /**\n * Close the modal on `ESC` and trap the tabulation.\n */\n keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n if (!this.isOpen) {\n return;\n }\n\n if (isDown) {\n trap(this.$refs.modal, event);\n }\n\n if (ESC && isUp) {\n this.close();\n }\n }\n\n /**\n * Open the modal.\n */\n async open() {\n if (this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = 'hidden';\n }\n\n this.isOpen = true;\n this.$emit('open');\n\n /** @type {ModalRefs} */\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: closed,\n active,\n to: open,\n },\n 'keep',\n ),\n ),\n ).then(() => {\n if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n saveActiveElement();\n const autofocusElement = this.$refs.modal.querySelector(\n this.$options.autofocus,\n ) as HTMLElement;\n autofocusElement.focus();\n }\n return Promise.resolve();\n });\n }\n\n /**\n * Close the modal.\n */\n async close() {\n if (!this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = '';\n }\n\n this.isOpen = false;\n untrap();\n this.$emit('close');\n\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: open,\n active,\n to: closed,\n },\n 'keep',\n ),\n ),\n ).then(() => Promise.resolve());\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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("
|
|
8
|
+
declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private").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
|
|
28
|
+
get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private").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": "0.
|
|
3
|
+
"version": "1.0.0-alpha.0",
|
|
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": "^
|
|
32
|
+
"@studiometa/js-toolkit": "^3.0.0-alpha.5",
|
|
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("
|
|
3
|
+
declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, Base<BaseProps>, import("#private").TransitionProps>;
|
|
4
4
|
/**
|
|
5
5
|
* Transition class.
|
|
6
6
|
*/
|