@studiometa/ui 1.0.0-rc.4 → 1.0.0-rc.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/Icon/Icon.twig +1 -1
- package/ImageGrid/ImageGrid.twig +9 -4
- package/LargeText/LargeText.twig +1 -1
- package/LazyInclude/LazyInclude.js +1 -1
- package/LazyInclude/LazyInclude.js.map +2 -2
- package/Menu/Menu.js +1 -2
- package/Menu/Menu.js.map +2 -2
- package/Prefetch/AbstractPrefetch.d.ts +9 -4
- package/Prefetch/AbstractPrefetch.js +17 -10
- package/Prefetch/AbstractPrefetch.js.map +2 -2
- package/Prefetch/PrefetchWhenOver.d.ts +1 -0
- package/Prefetch/PrefetchWhenOver.js +1 -1
- package/Prefetch/PrefetchWhenOver.js.map +2 -2
- package/Prefetch/PrefetchWhenVisible.d.ts +1 -0
- package/Prefetch/PrefetchWhenVisible.js +1 -1
- package/Prefetch/PrefetchWhenVisible.js.map +2 -2
- package/package.json +1 -1
package/Icon/Icon.twig
CHANGED
package/ImageGrid/ImageGrid.twig
CHANGED
|
@@ -11,12 +11,15 @@
|
|
|
11
11
|
* Custom attributes for the inner element.
|
|
12
12
|
* @param array $image_attr
|
|
13
13
|
* Custom attributes for the images' elements.
|
|
14
|
+
*
|
|
15
|
+
* @block $image
|
|
16
|
+
* A block to customize the image output. Defaults to using the `Figure` component.
|
|
14
17
|
*/
|
|
15
18
|
#}
|
|
16
19
|
|
|
17
20
|
{% set attributes = merge_html_attributes(attr ?? null, { class: 'image-grid' }) %}
|
|
18
21
|
{% set inner_attributes =
|
|
19
|
-
merge_html_attributes(inner_attr ?? null, { class: 'image-grid__inner s:grid
|
|
22
|
+
merge_html_attributes(inner_attr ?? null, { class: 'image-grid__inner grid s:grid-cols-12 gap-10' })
|
|
20
23
|
%}
|
|
21
24
|
|
|
22
25
|
<div {{ html_attributes(attributes) }}>
|
|
@@ -28,14 +31,16 @@
|
|
|
28
31
|
}, {
|
|
29
32
|
class: {
|
|
30
33
|
's:col-span-7': modulo == 1 or modulo == 4,
|
|
31
|
-
's:col-span-5 mt-10': modulo == 2,
|
|
32
|
-
's:col-span-5 mt-10 clear-m-left': modulo == 3 and not loop.last,
|
|
34
|
+
's:col-span-5 s:mt-10': modulo == 2,
|
|
35
|
+
's:col-span-5 s:mt-10 clear-m-left': modulo == 3 and not loop.last,
|
|
33
36
|
's:col-start-2 s:col-end-11': modulo == 0 or (modulo in [0,3] and loop.last),
|
|
34
37
|
's:col-start-2 s:col-end-13': loop.first and loop.last
|
|
35
38
|
}
|
|
36
39
|
}) %}
|
|
37
40
|
<div {{ html_attributes(image_attributes) }}>
|
|
38
|
-
{%
|
|
41
|
+
{% block image %}
|
|
42
|
+
{% include '@ui/Figure/Figure.twig' with image only %}
|
|
43
|
+
{% endblock %}
|
|
39
44
|
</div>
|
|
40
45
|
{% endfor %}
|
|
41
46
|
</div>
|
package/LargeText/LargeText.twig
CHANGED
|
@@ -17,7 +17,7 @@ class LazyInclude extends Base {
|
|
|
17
17
|
*/
|
|
18
18
|
mounted() {
|
|
19
19
|
if (!this.$options.src) {
|
|
20
|
-
this.$
|
|
20
|
+
this.$warn("The `src` option is missing. Define it with the `data-option-src` attribute");
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
fetch(this.$options.src).then((response) => response.text()).then((content) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/LazyInclude/LazyInclude.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n $refs: {\n loading: HTMLElement;\n error: HTMLElement;\n };\n $options: {\n src: string;\n terminateOnLoad: boolean;\n };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n extends Base<T & LazyIncludeProps>\n implements BaseInterface\n{\n /**\n * Config.\n */\n static config = {\n name: 'LazyInclude',\n refs: ['loading', 'error'],\n emits: ['content', 'error', 'always'],\n options: {\n src: String,\n terminateOnLoad: Boolean,\n },\n };\n\n /**\n * Load the lazy content on mount.\n */\n mounted() {\n if (!this.$options.src) {\n this.$
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n $refs: {\n loading: HTMLElement;\n error: HTMLElement;\n };\n $options: {\n src: string;\n terminateOnLoad: boolean;\n };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n extends Base<T & LazyIncludeProps>\n implements BaseInterface\n{\n /**\n * Config.\n */\n static config = {\n name: 'LazyInclude',\n refs: ['loading', 'error'],\n emits: ['content', 'error', 'always'],\n options: {\n src: String,\n terminateOnLoad: Boolean,\n },\n };\n\n /**\n * Load the lazy content on mount.\n */\n mounted() {\n if (!this.$options.src) {\n this.$warn('The `src` option is missing. Define it with the `data-option-src` attribute');\n return;\n }\n\n fetch(this.$options.src)\n .then((response) => response.text())\n .then((content) => {\n this.$emit('content', content);\n })\n .catch((error) => {\n this.$emit('error', error);\n })\n .finally(() => {\n this.$emit('always');\n });\n }\n\n /**\n * Set content.\n */\n onContent({ args: [content] }: { args: [string] }) {\n this.$refs.loading.style.display = 'none';\n this.$el.innerHTML = content;\n }\n\n /**\n * Set error.\n */\n onError() {\n this.$refs.error.style.display = 'block';\n }\n\n /**\n * Always.\n */\n onAlways() {\n if (this.$options.terminateOnLoad) {\n this.$terminate();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,MAAM,6EAA6E;AACxF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,GAAuB;AACjD,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Menu/Menu.js
CHANGED
package/Menu/Menu.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Menu/Menu.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n $children: {\n // eslint-disable-next-line no-use-before-define\n Menu: Menu[];\n MenuBtn: MenuBtn[];\n MenuList: MenuList[];\n };\n $options: {\n mode: 'click' | 'hover';\n };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Menu',\n components: {\n MenuBtn,\n MenuList,\n
|
|
5
|
-
"mappings": "AAAA,SAAS,MAAM,wBAAwB;AAEvC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAiBlB,MAAM,aAA8C,KAAoB;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n $children: {\n // eslint-disable-next-line no-use-before-define\n Menu: Menu[];\n MenuBtn: MenuBtn[];\n MenuList: MenuList[];\n };\n $options: {\n mode: 'click' | 'hover';\n };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Menu',\n components: {\n MenuBtn,\n MenuList,\n },\n options: {\n mode: {\n type: String,\n default: 'click', // or 'hover'\n },\n },\n };\n\n /**\n * Get the first `MenuList` instance.\n */\n get menuList(): MenuList {\n for (const menuList of this.$children.MenuList) {\n if (getClosestParent(menuList, this.constructor) === this) {\n return menuList;\n }\n }\n }\n\n /**\n * Get the first `MenuBtn` instance.\n */\n get menuBtn(): MenuBtn {\n for (const menuBtn of this.$children.MenuBtn) {\n if (getClosestParent(menuBtn, this.constructor) === this) {\n return menuBtn;\n }\n }\n }\n\n /**\n * Test which mode to use.\n */\n get shouldReactOnClick(): boolean {\n return this.$options.mode === 'click';\n }\n\n /**\n * Wether the button or the items are hovered.\n */\n get isHover(): boolean {\n return this.menuBtn.isHover || this.menuList.isHover;\n }\n\n /**\n * Set attributes on mounted, destroy the component if it is missing required\n * child components.\n */\n mounted() {\n if (!this.menuBtn || !this.menuList) {\n return this.$destroy();\n }\n\n this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n this.menuList.$el.setAttribute('id', this.$id);\n this.menuList.close();\n }\n\n /**\n * Keyboard management.\n */\n keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n if (!isUp) {\n return;\n }\n\n if (ESC) {\n this.close();\n return;\n }\n\n if (!this.shouldReactOnClick) {\n const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n if (ENTER && hasFocusElementWithin) {\n this.toggle();\n }\n }\n }\n\n /**\n * Close menu list on click outside.\n */\n onDocumentClick({ event }: { event: MouseEvent }) {\n if (this.shouldReactOnClick && !this.$el.contains(event.target as Node)) {\n this.close();\n }\n }\n\n /**\n * Toggle menu items on button click.\n */\n onMenuBtnClick({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n if (!this.shouldReactOnClick) return;\n\n if (getClosestParent(target, this.constructor) === this) {\n event.preventDefault();\n this.toggle();\n }\n }\n\n /**\n * Open menu items on button mouse enter.\n */\n onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n if (target === this.menuBtn && !this.shouldReactOnClick) {\n this.open();\n }\n }\n\n /**\n * Close menu items on button mouse leave.\n */\n onMenuBtnMouseleave() {\n if (this.shouldReactOnClick) {\n return;\n }\n\n nextTick(() => {\n if (!this.isHover) {\n this.close();\n }\n });\n }\n\n /**\n * Close menu items on button mouse leave.\n */\n onMenuListMouseleave() {\n if (this.shouldReactOnClick) {\n return;\n }\n\n nextTick(() => {\n if (!this.isHover) {\n this.close();\n }\n });\n }\n\n /**\n * Close other non-parent menu items on menu items open.\n */\n onMenuListItemsOpen({ target }: { target: MenuList }) {\n for (const menuList of this.$children.MenuList) {\n if (!menuList.$el.contains(target.$el)) {\n menuList.close();\n }\n }\n }\n\n /**\n * Close the menu.\n */\n close() {\n this.menuList.close();\n }\n\n /**\n * Open the menu.\n */\n open() {\n this.menuList.open();\n }\n\n /**\n * Toggle the menu.\n */\n toggle() {\n this.menuList.toggle();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ export interface AbstractPrefetchProps extends BaseProps {
|
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* AbstractPrefetch class.
|
|
11
|
+
* @see https://ui.studiometa.dev/-/components/Prefetch/
|
|
11
12
|
*/
|
|
12
13
|
export declare class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<T & AbstractPrefetchProps> {
|
|
13
14
|
/**
|
|
@@ -19,11 +20,15 @@ export declare class AbstractPrefetch<T extends BaseProps = BaseProps> extends B
|
|
|
19
20
|
*/
|
|
20
21
|
static prefetchedUrls: Set<string>;
|
|
21
22
|
/**
|
|
22
|
-
*
|
|
23
|
+
* Get the URL to prefetch.
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
+
get url(): URL | null;
|
|
25
26
|
/**
|
|
26
|
-
*
|
|
27
|
+
* Is the URL prefetchable?
|
|
27
28
|
*/
|
|
28
|
-
|
|
29
|
+
get isPrefetchable(): boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Prefetch the URL.
|
|
32
|
+
*/
|
|
33
|
+
prefetch(): void;
|
|
29
34
|
}
|
|
@@ -5,6 +5,7 @@ class AbstractPrefetch extends Base {
|
|
|
5
5
|
*/
|
|
6
6
|
static config = {
|
|
7
7
|
name: "AbstractPrefetch",
|
|
8
|
+
emits: ["prefetched"],
|
|
8
9
|
options: {
|
|
9
10
|
prefetch: {
|
|
10
11
|
type: Boolean,
|
|
@@ -17,9 +18,17 @@ class AbstractPrefetch extends Base {
|
|
|
17
18
|
*/
|
|
18
19
|
static prefetchedUrls = /* @__PURE__ */ new Set();
|
|
19
20
|
/**
|
|
20
|
-
*
|
|
21
|
+
* Get the URL to prefetch.
|
|
21
22
|
*/
|
|
22
|
-
|
|
23
|
+
get url() {
|
|
24
|
+
const { href } = this.$el;
|
|
25
|
+
return href ? new URL(href) : null;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Is the URL prefetchable?
|
|
29
|
+
*/
|
|
30
|
+
get isPrefetchable() {
|
|
31
|
+
const { url } = this;
|
|
23
32
|
if (!url || !url.href) {
|
|
24
33
|
return false;
|
|
25
34
|
}
|
|
@@ -29,10 +38,7 @@ class AbstractPrefetch extends Base {
|
|
|
29
38
|
if (url.origin !== window.location.origin) {
|
|
30
39
|
return false;
|
|
31
40
|
}
|
|
32
|
-
if (
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
if (url.protocol === "http:" && window.location.protocol === "https:") {
|
|
41
|
+
if (url.href === window.location.href) {
|
|
36
42
|
return false;
|
|
37
43
|
}
|
|
38
44
|
if (url.hash && url.pathname + url.search === window.location.pathname + window.location.search) {
|
|
@@ -41,21 +47,22 @@ class AbstractPrefetch extends Base {
|
|
|
41
47
|
return true;
|
|
42
48
|
}
|
|
43
49
|
/**
|
|
44
|
-
* Prefetch the
|
|
50
|
+
* Prefetch the URL.
|
|
45
51
|
*/
|
|
46
|
-
prefetch(
|
|
52
|
+
prefetch() {
|
|
53
|
+
const { url } = this;
|
|
47
54
|
if (AbstractPrefetch.prefetchedUrls.has(url.href)) {
|
|
48
55
|
return;
|
|
49
56
|
}
|
|
50
|
-
if (!this.isPrefetchable
|
|
57
|
+
if (!this.isPrefetchable) {
|
|
51
58
|
return;
|
|
52
59
|
}
|
|
53
60
|
const prefetcher = document.createElement("link");
|
|
54
61
|
prefetcher.rel = "prefetch";
|
|
55
62
|
prefetcher.href = url.href;
|
|
63
|
+
prefetcher.addEventListener("load", () => this.$emit("prefetched", url));
|
|
56
64
|
document.head.append(prefetcher);
|
|
57
65
|
AbstractPrefetch.prefetchedUrls.add(url.href);
|
|
58
|
-
this.$terminate();
|
|
59
66
|
}
|
|
60
67
|
}
|
|
61
68
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Prefetch/AbstractPrefetch.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface AbstractPrefetchProps extends BaseProps {\n $el: HTMLAnchorElement;\n $options: {\n prefetch: boolean;\n };\n}\n\n/**\n * AbstractPrefetch class.\n */\nexport class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<\n T & AbstractPrefetchProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractPrefetch',\n options: {\n prefetch: {\n type: Boolean,\n default: true,\n },\n },\n };\n\n /**\n * Store prefetched URL.\n */\n static prefetchedUrls: Set<string> = new Set();\n\n /**\n *
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface AbstractPrefetchProps extends BaseProps {\n $el: HTMLAnchorElement;\n $options: {\n prefetch: boolean;\n };\n}\n\n/**\n * AbstractPrefetch class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<\n T & AbstractPrefetchProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractPrefetch',\n emits: ['prefetched'],\n options: {\n prefetch: {\n type: Boolean,\n default: true,\n },\n },\n };\n\n /**\n * Store prefetched URL.\n */\n static prefetchedUrls: Set<string> = new Set();\n\n /**\n * Get the URL to prefetch.\n */\n get url(): URL | null {\n const { href } = this.$el;\n return href ? new URL(href) : null;\n }\n\n /**\n * Is the URL prefetchable?\n */\n get isPrefetchable(): boolean {\n const { url } = this;\n\n if (!url || !url.href) {\n return false;\n }\n\n if (!this.$options.prefetch) {\n return false;\n }\n\n if (url.origin !== window.location.origin) {\n return false;\n }\n\n if (url.href === window.location.href) {\n return false;\n }\n\n if (\n url.hash &&\n url.pathname + url.search === window.location.pathname + window.location.search\n ) {\n return false;\n }\n\n return true;\n }\n\n /**\n * Prefetch the URL.\n */\n prefetch() {\n const { url } = this;\n\n if (AbstractPrefetch.prefetchedUrls.has(url.href)) {\n return;\n }\n\n if (!this.isPrefetchable) {\n return;\n }\n\n const prefetcher = document.createElement('link');\n prefetcher.rel = 'prefetch';\n prefetcher.href = url.href;\n prefetcher.addEventListener('load', () => this.$emit('prefetched', url));\n document.head.append(prefetcher);\n\n AbstractPrefetch.prefetchedUrls.add(url.href);\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAcd,MAAM,yBAA0D,KAErE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,YAAY;AAAA,IACpB,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAA8B,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7C,IAAI,MAAkB;AACpB,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,WAAO,OAAO,IAAI,IAAI,IAAI,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,iBAA0B;AAC5B,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,OAAO,CAAC,IAAI,MAAM;AACrB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,KAAK,SAAS,UAAU;AAC3B,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,WAAW,OAAO,SAAS,QAAQ;AACzC,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,SAAS,OAAO,SAAS,MAAM;AACrC,aAAO;AAAA,IACT;AAEA,QACE,IAAI,QACJ,IAAI,WAAW,IAAI,WAAW,OAAO,SAAS,WAAW,OAAO,SAAS,QACzE;AACA,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,iBAAiB,eAAe,IAAI,IAAI,IAAI,GAAG;AACjD;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,gBAAgB;AACxB;AAAA,IACF;AAEA,UAAM,aAAa,SAAS,cAAc,MAAM;AAChD,eAAW,MAAM;AACjB,eAAW,OAAO,IAAI;AACtB,eAAW,iBAAiB,QAAQ,MAAM,KAAK,MAAM,cAAc,GAAG,CAAC;AACvE,aAAS,KAAK,OAAO,UAAU;AAE/B,qBAAiB,eAAe,IAAI,IAAI,IAAI;AAAA,EAC9C;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,7 @@ import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
|
|
|
2
2
|
import { AbstractPrefetch } from './AbstractPrefetch.js';
|
|
3
3
|
/**
|
|
4
4
|
* PrefetchWhenOver class.
|
|
5
|
+
* @see https://ui.studiometa.dev/-/components/Prefetch/
|
|
5
6
|
*/
|
|
6
7
|
export declare class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {
|
|
7
8
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Prefetch/PrefetchWhenOver.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenOver class.\n */\nexport class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractPrefetch.config,\n name: 'PrefetchWhenOver',\n };\n\n /**\n * Prefetch on mouseenter.\n */\n onMouseenter() {\n this.prefetch(
|
|
5
|
-
"mappings": "AACA,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenOver class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractPrefetch.config,\n name: 'PrefetchWhenOver',\n };\n\n /**\n * Prefetch on mouseenter.\n */\n onMouseenter() {\n this.prefetch();\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,wBAAwB;AAM1B,MAAM,yBAA0D,iBAAoB;AAAA;AAAA;AAAA;AAAA,EAIzF,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,SAAS;AAAA,EAChB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import { AbstractPrefetch } from './AbstractPrefetch.js';
|
|
|
3
3
|
declare const PrefetchWhenVisible_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, AbstractPrefetch<import("@studiometa/js-toolkit").BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
|
|
4
4
|
/**
|
|
5
5
|
* PrefetchWhenVisible class.
|
|
6
|
+
* @see https://ui.studiometa.dev/-/components/Prefetch/
|
|
6
7
|
*/
|
|
7
8
|
export declare class PrefetchWhenVisible extends PrefetchWhenVisible_base {
|
|
8
9
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Prefetch/PrefetchWhenVisible.ts"],
|
|
4
|
-
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenVisible class.\n */\nexport class PrefetchWhenVisible extends withMountWhenInView<AbstractPrefetch>(AbstractPrefetch) {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractPrefetch.config,\n name: 'PrefetchWhenVisible',\n };\n\n /**\n * Prefetch on mount.\n */\n mounted() {\n this.prefetch(
|
|
5
|
-
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenVisible class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenVisible extends withMountWhenInView<AbstractPrefetch>(AbstractPrefetch) {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractPrefetch.config,\n name: 'PrefetchWhenVisible',\n };\n\n /**\n * Prefetch on mount.\n */\n mounted() {\n this.prefetch();\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AAM1B,MAAM,4BAA4B,oBAAsC,gBAAgB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI/F,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS;AAAA,EAChB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|