@dosgato/dialog 1.1.7 → 1.1.8
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/dist/Icon.svelte +24 -2
- package/package.json +1 -1
package/dist/Icon.svelte
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
implementation of icons that adds a hidden label that can be read by screen readers. Useful for situations where aria-label
|
|
4
4
|
isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
|
|
5
5
|
-->
|
|
6
|
-
<script>import
|
|
6
|
+
<script>import { randomid } from 'txstate-utils';
|
|
7
|
+
import Tooltip from './Tooltip.svelte';
|
|
7
8
|
export let icon;
|
|
8
9
|
/** Label used in a `<ScreenReaderOnly>`. */
|
|
9
10
|
export let hiddenLabel = undefined;
|
|
@@ -11,6 +12,27 @@ export let inline = false;
|
|
|
11
12
|
export let width = undefined;
|
|
12
13
|
export let height = undefined;
|
|
13
14
|
export let tooltip = undefined;
|
|
15
|
+
function replaceIDs(body) {
|
|
16
|
+
const matches = body.matchAll(/\sid="(\S+)"/g);
|
|
17
|
+
const ids = Array.from(matches).map(m => m[1]);
|
|
18
|
+
if (!ids.length)
|
|
19
|
+
return body;
|
|
20
|
+
// Replace with unique ids
|
|
21
|
+
ids.forEach((id) => {
|
|
22
|
+
const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
23
|
+
body = body.replace(
|
|
24
|
+
// Allowed characters before id: [#;"]
|
|
25
|
+
// Allowed characters after id: [)"], .[a-z]
|
|
26
|
+
new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', 'g'), '$1' + randomid() + '$3');
|
|
27
|
+
});
|
|
28
|
+
return body;
|
|
29
|
+
}
|
|
30
|
+
const fixedSVG = new Map();
|
|
31
|
+
function svgBody(icon) {
|
|
32
|
+
if (!fixedSVG.has(icon))
|
|
33
|
+
fixedSVG.set(icon, replaceIDs(icon.body));
|
|
34
|
+
return fixedSVG.get(icon);
|
|
35
|
+
}
|
|
14
36
|
// If neither is defined, set both to 1em
|
|
15
37
|
if (!width && !height)
|
|
16
38
|
width = height = '1em';
|
|
@@ -20,7 +42,7 @@ height ??= width;
|
|
|
20
42
|
{#if icon}
|
|
21
43
|
<Tooltip tip={tooltip} top>
|
|
22
44
|
<svg role="img" viewBox="{icon.left ?? 0} {icon.top ?? 0} {icon.width ?? 256} {icon.height ?? 256}" class:vFlip={icon.vFlip} class:hFlip={icon.hFlip} class:inline {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel} xmlns="http://www.w3.org/2000/svg">
|
|
23
|
-
{@html icon
|
|
45
|
+
{@html svgBody(icon)}
|
|
24
46
|
</svg>
|
|
25
47
|
</Tooltip>
|
|
26
48
|
{/if}
|
package/package.json
CHANGED