@descope-ui/descope-image 0.0.1 → 0.0.2
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/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-image-0.0.1...@descope-ui/descope-image-0.0.2) (2025-06-03)
|
|
6
|
+
|
|
5
7
|
## 0.0.1 (2025-05-28)
|
|
6
8
|
|
|
7
9
|
### Dependency Updates
|
package/package.json
CHANGED
|
@@ -71,6 +71,10 @@ class RawImage extends createBaseClass({
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
get altText() {
|
|
75
|
+
return this.getAttribute('alt') || '';
|
|
76
|
+
}
|
|
77
|
+
|
|
74
78
|
get legacySrc() {
|
|
75
79
|
return this.getAttribute('src');
|
|
76
80
|
}
|
|
@@ -101,7 +105,7 @@ class RawImage extends createBaseClass({
|
|
|
101
105
|
renderImage() {
|
|
102
106
|
this.toggleVisibility(this.src);
|
|
103
107
|
|
|
104
|
-
createImage(this.src).then((res) => {
|
|
108
|
+
createImage(this.src, this.altText).then((res) => {
|
|
105
109
|
this.innerHTML = '';
|
|
106
110
|
if (res) {
|
|
107
111
|
this.updateFillColor(res);
|
package/src/component/helpers.js
CHANGED
|
@@ -9,9 +9,10 @@ const base64Prefix = 'data:image/svg+xml;base64,';
|
|
|
9
9
|
|
|
10
10
|
const isBase64Svg = (src) => src.startsWith(base64Prefix);
|
|
11
11
|
|
|
12
|
-
const createImgEle = (src) => {
|
|
12
|
+
const createImgEle = (src, altText) => {
|
|
13
13
|
const ele = document.createElement('img');
|
|
14
14
|
ele.setAttribute('src', src);
|
|
15
|
+
ele.setAttribute('alt', altText);
|
|
15
16
|
return ele;
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -28,7 +29,7 @@ const createSvgEle = (text) => {
|
|
|
28
29
|
return ele;
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
export const createImage = async (src) => {
|
|
32
|
+
export const createImage = async (src, altText) => {
|
|
32
33
|
try {
|
|
33
34
|
let ele;
|
|
34
35
|
if (isBase64Svg(src)) {
|
|
@@ -42,7 +43,7 @@ export const createImage = async (src) => {
|
|
|
42
43
|
ele = createSvgEle(text);
|
|
43
44
|
} else {
|
|
44
45
|
// handle binary
|
|
45
|
-
ele = createImgEle(src);
|
|
46
|
+
ele = createImgEle(src, altText);
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
ele.style.setProperty('max-width', '100%');
|
|
@@ -21,6 +21,7 @@ const Template = ({
|
|
|
21
21
|
src,
|
|
22
22
|
srcDark,
|
|
23
23
|
fill,
|
|
24
|
+
altText,
|
|
24
25
|
'st-width': customWidth,
|
|
25
26
|
'st-height': customHeight,
|
|
26
27
|
}) => {
|
|
@@ -30,7 +31,8 @@ const Template = ({
|
|
|
30
31
|
src-dark="${images[srcDark]}"
|
|
31
32
|
${fill ? `st-fill="${fill}"` : ''}
|
|
32
33
|
st-height="${customHeight || ''}"
|
|
33
|
-
st-width="${customWidth || ''}"
|
|
34
|
+
st-width="${customWidth || ''}"
|
|
35
|
+
alt="${altText}"
|
|
34
36
|
></descope-image>
|
|
35
37
|
`;
|
|
36
38
|
};
|
|
@@ -60,4 +62,5 @@ Default.args = {
|
|
|
60
62
|
srcDark: 'demoImageDark',
|
|
61
63
|
'st-width': '',
|
|
62
64
|
'st-height': '',
|
|
65
|
+
altText: 'Image alt text'
|
|
63
66
|
};
|