@studiometa/ui 0.2.28 → 0.2.30
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/Figure/FigureTwicpics.cjs +1 -1
- package/atoms/Figure/FigureTwicpics.cjs.map +2 -2
- package/atoms/Figure/FigureTwicpics.js +6 -2
- package/atoms/Figure/FigureTwicpics.js.map +2 -2
- package/atoms/Icon/Icon.twig +1 -2
- package/atoms/Icon/IconInline.twig +26 -0
- package/atoms/Icon/IconInlineImg.twig +56 -0
- package/package.json +1 -1
|
@@ -60,7 +60,7 @@ var FigureTwicpics = class extends import_Figure.Figure {
|
|
|
60
60
|
const url = new URL(src, "https://localhost");
|
|
61
61
|
url.host = this.domain;
|
|
62
62
|
url.port = "";
|
|
63
|
-
if (this.path) {
|
|
63
|
+
if (this.path && !url.pathname.startsWith((0, import_utils.withLeadingSlash)(this.path))) {
|
|
64
64
|
url.pathname = `/${this.path}${url.pathname}`;
|
|
65
65
|
}
|
|
66
66
|
const width = normalizeSize(this, "offsetWidth");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/FigureTwicpics.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n resized() {\n this.src = this.original;\n }\n\n /**\n * Do not terminate on image load as we need to set the src on resize.\n */\n onLoad() {\n // Do not terminate on image load as we need.\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAIO;AACP,oBAAuB;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI;AAClD;AAOO,IAAM,iBAAN,cAA8D,qBAEnE;AAAA;AAAA;AAAA;AAAA,EA0BA,IAAI,OAAe;AACjB,eAAO,uCAAqB,kCAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,eAAW,+BAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,OAAO,IAAI;AAAA,IACrC;AAEA,UAAM,QAAQ,cAAc,MAAM,aAAa;AAC/C,UAAM,SAAS,cAAc,MAAM,cAAc;AAEjD,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,KAAK,SAAS,WAAW,GAAG,KAAK,SAAS,QAAQ,SAAS,QAAQ,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,IACb;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA,EAET;AACF;AAAA;AAAA;AAAA;AAjFE,cANW,gBAMJ,UAAqB;AAAA,EAC1B,GAAG,qBAAO;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,IACP,GAAG,qBAAO,OAAO;AAAA,IACjB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
withLeadingSlash,
|
|
3
|
+
withoutLeadingSlash,
|
|
4
|
+
withoutTrailingSlash
|
|
5
|
+
} from "@studiometa/js-toolkit/utils";
|
|
2
6
|
import { Figure } from "./Figure.js";
|
|
3
7
|
function normalizeSize(that, prop) {
|
|
4
8
|
const { step } = that.$options;
|
|
@@ -52,7 +56,7 @@ class FigureTwicpics extends Figure {
|
|
|
52
56
|
const url = new URL(src, "https://localhost");
|
|
53
57
|
url.host = this.domain;
|
|
54
58
|
url.port = "";
|
|
55
|
-
if (this.path) {
|
|
59
|
+
if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {
|
|
56
60
|
url.pathname = `/${this.path}${url.pathname}`;
|
|
57
61
|
}
|
|
58
62
|
const width = normalizeSize(this, "offsetWidth");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/FigureTwicpics.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {
|
|
5
|
-
"mappings": "AACA,
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n withLeadingSlash,\n withoutLeadingSlash,\n withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { Figure } from './Figure.js';\n\nexport interface FigureTwicpicsProps extends BaseProps {\n $options: {\n transform: string;\n domain: string;\n path: string;\n step: number;\n mode: string;\n };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureTwicpics, prop: string): number {\n const { step } = that.$options;\n return Math.ceil(that.$refs.img[prop] / step) * step;\n}\n\n/**\n * Figure class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<\n T & FigureTwicpicsProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Figure.config,\n name: 'FigureTwicpics',\n options: {\n ...Figure.config.options,\n transform: String,\n domain: String,\n path: String,\n step: {\n type: Number,\n default: 50,\n },\n mode: {\n type: String,\n default: 'cover',\n },\n },\n };\n\n /**\n * Get the Twicpics path.\n */\n get path(): string {\n return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n }\n\n /**\n * Get the Twicpics domain.\n */\n get domain(): string {\n const url = new URL(this.$refs.img.dataset.src);\n return url.host;\n }\n\n /**\n * Get formattted original source.\n */\n get original() {\n return this.formatSrc(super.original);\n }\n\n /**\n * Format the source for Twicpics.\n */\n formatSrc(src: string): string {\n const url = new URL(src, 'https://localhost');\n url.host = this.domain;\n url.port = '';\n\n if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n url.pathname = `/${this.path}${url.pathname}`;\n }\n\n const width = normalizeSize(this, 'offsetWidth');\n const height = normalizeSize(this, 'offsetHeight');\n\n url.searchParams.set(\n 'twic',\n ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`]\n .filter(Boolean)\n .join('/'),\n );\n\n url.search = decodeURIComponent(url.search);\n\n return url.toString();\n }\n\n /**\n * Reassign the source from the original on resize.\n */\n resized() {\n this.src = this.original;\n }\n\n /**\n * Do not terminate on image load as we need to set the src on resize.\n */\n onLoad() {\n // Do not terminate on image load as we need.\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAgBvB,SAAS,cAAc,MAAsB,MAAsB;AACjE,QAAM,EAAE,KAAK,IAAI,KAAK;AACtB,SAAO,KAAK,KAAK,KAAK,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI;AAClD;AAOO,MAAM,uBAAwD,OAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,OAAO,OAAO;AAAA,MACjB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,qBAAqB,oBAAoB,KAAK,SAAS,IAAI,CAAC;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,GAAG;AAC9C,WAAO,IAAI;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,UAAU,MAAM,QAAQ;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAqB;AAC7B,UAAM,MAAM,IAAI,IAAI,KAAK,mBAAmB;AAC5C,QAAI,OAAO,KAAK;AAChB,QAAI,OAAO;AAEX,QAAI,KAAK,QAAQ,CAAC,IAAI,SAAS,WAAW,iBAAiB,KAAK,IAAI,CAAC,GAAG;AACtE,UAAI,WAAW,IAAI,KAAK,OAAO,IAAI;AAAA,IACrC;AAEA,UAAM,QAAQ,cAAc,MAAM,aAAa;AAC/C,UAAM,SAAS,cAAc,MAAM,cAAc;AAEjD,QAAI,aAAa;AAAA,MACf;AAAA,MACA,CAAC,MAAM,KAAK,SAAS,WAAW,GAAG,KAAK,SAAS,QAAQ,SAAS,QAAQ,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,IACb;AAEA,QAAI,SAAS,mBAAmB,IAAI,MAAM;AAE1C,WAAO,IAAI,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA,EAET;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/atoms/Icon/Icon.twig
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{#
|
|
2
2
|
/**
|
|
3
3
|
* @file
|
|
4
|
-
* Icon component
|
|
4
|
+
* Icon component (Decrecated)
|
|
5
5
|
*
|
|
6
6
|
* @param string $name The file name of the icon.
|
|
7
7
|
* @param string[] $classes Additional classes.
|
|
8
8
|
*/
|
|
9
9
|
#}
|
|
10
|
-
|
|
11
10
|
<span class="icon {{ 'icon--%s'|format(name) }} {{ html_classes(classes|default('inline-block')) }}">
|
|
12
11
|
{{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
|
|
13
12
|
</span>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{#
|
|
2
|
+
/**
|
|
3
|
+
* @file
|
|
4
|
+
* Icon component
|
|
5
|
+
*
|
|
6
|
+
* @param string $name The file name of the icon.
|
|
7
|
+
* @param array $attr Custom attributes.
|
|
8
|
+
*/
|
|
9
|
+
#}
|
|
10
|
+
|
|
11
|
+
{% set attributes = merge_html_attributes(
|
|
12
|
+
attr ?? null,
|
|
13
|
+
{
|
|
14
|
+
class: 'inline-block',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
class: [
|
|
18
|
+
'icon',
|
|
19
|
+
'icon--%s'|format(name)
|
|
20
|
+
],
|
|
21
|
+
}
|
|
22
|
+
) %}
|
|
23
|
+
|
|
24
|
+
<span {{ html_attributes(attributes) }}>
|
|
25
|
+
{{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
|
|
26
|
+
</span>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{#
|
|
2
|
+
/**
|
|
3
|
+
* @file
|
|
4
|
+
* Icon Image component
|
|
5
|
+
* Use `<img>` instead of injecting the SVG file.
|
|
6
|
+
*
|
|
7
|
+
* @param string $name The file name of the icon.
|
|
8
|
+
* @param array $attr Custom attributes.
|
|
9
|
+
* @param array $css_vars Custom CSS variables to pass to the SVG.
|
|
10
|
+
* @param string $current_color Custom color for the `currentColor` CSS variable in the SVG.
|
|
11
|
+
*/
|
|
12
|
+
#}
|
|
13
|
+
{%- set svg -%}
|
|
14
|
+
{{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
|
|
15
|
+
{%- endset -%}
|
|
16
|
+
|
|
17
|
+
{% if current_color is defined or css_vars is defined %}
|
|
18
|
+
{%- set style -%}
|
|
19
|
+
<style>
|
|
20
|
+
:root {
|
|
21
|
+
{% if current_color is defined %}
|
|
22
|
+
color: {{ current_color }};
|
|
23
|
+
{% endif %}
|
|
24
|
+
{% if css_vars is defined %}
|
|
25
|
+
{% for var, value in css_vars %}
|
|
26
|
+
--{{ var }}: {{ value }};
|
|
27
|
+
{% endfor %}
|
|
28
|
+
{% endif %}
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
{%- endset -%}
|
|
32
|
+
|
|
33
|
+
{% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
|
|
34
|
+
{% endif %}
|
|
35
|
+
|
|
36
|
+
{% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
|
|
37
|
+
{% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
|
|
38
|
+
{% endif %}
|
|
39
|
+
|
|
40
|
+
{% set attributes = merge_html_attributes(
|
|
41
|
+
attr ?? null,
|
|
42
|
+
{
|
|
43
|
+
width: '',
|
|
44
|
+
height: '',
|
|
45
|
+
alt: '',
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
src: 'data:image/svg+xml,%s'|format(svg|url_encode),
|
|
49
|
+
class: [
|
|
50
|
+
'icon-img',
|
|
51
|
+
'icon-img--%s'|format(name),
|
|
52
|
+
],
|
|
53
|
+
}
|
|
54
|
+
) %}
|
|
55
|
+
|
|
56
|
+
<img {{ html_attributes(attributes) }}>
|