sveltacular 0.0.73 → 0.0.75
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/README.md +31 -31
- package/dist/forms/bool-box/bool-box.svelte +3 -3
- package/dist/forms/button/button.svelte +14 -7
- package/dist/forms/button/button.svelte.d.ts +1 -0
- package/dist/forms/check-box/check-box-group.svelte +14 -14
- package/dist/forms/check-box/check-box.svelte +23 -23
- package/dist/forms/combo/new-or-existing-combo.svelte +56 -56
- package/dist/forms/date-box/date-box.svelte +26 -26
- package/dist/forms/file-area/file-area.svelte +31 -31
- package/dist/forms/file-box/file-box.svelte +23 -23
- package/dist/forms/form-field.svelte +7 -7
- package/dist/forms/form-footer.svelte +15 -15
- package/dist/forms/form-header.svelte +9 -9
- package/dist/forms/form-label.svelte +5 -5
- package/dist/forms/form-section.svelte +14 -14
- package/dist/forms/form.svelte +7 -7
- package/dist/forms/info-box/info-box.svelte +19 -19
- package/dist/forms/list-box/list-box.svelte +44 -44
- package/dist/forms/money-box/money-box.svelte +54 -54
- package/dist/forms/number-box/number-box.svelte +31 -31
- package/dist/forms/phone-box/phone-box.svelte +50 -50
- package/dist/forms/radio-group/radio-box.svelte +15 -15
- package/dist/forms/radio-group/radio-group.svelte +12 -12
- package/dist/forms/switch-box/switch-box.svelte +16 -16
- package/dist/forms/text-area/text-area.svelte +10 -10
- package/dist/forms/text-box/text-box.svelte +34 -34
- package/dist/forms/url-box/url-box.svelte +14 -14
- package/dist/generic/address/address.svelte +16 -16
- package/dist/generic/card/card-container.svelte +7 -7
- package/dist/generic/card/card.svelte +10 -10
- package/dist/generic/date/date-time.svelte +3 -3
- package/dist/generic/divider/divider.svelte +3 -3
- package/dist/generic/dot/dot.svelte +5 -5
- package/dist/generic/dropdown-item/dropdown-item.svelte +35 -0
- package/dist/generic/dropdown-item/dropdown-item.svelte.d.ts +22 -0
- package/dist/generic/email/email.svelte +12 -12
- package/dist/generic/empty/empty.svelte +14 -14
- package/dist/generic/header/header.svelte +17 -17
- package/dist/generic/link/link.svelte +13 -13
- package/dist/generic/list/list-item.svelte +19 -19
- package/dist/generic/list/list.svelte +12 -12
- package/dist/generic/menu/menu.svelte +38 -38
- package/dist/generic/notice/notice.svelte +25 -25
- package/dist/generic/overlay.svelte +8 -8
- package/dist/generic/panel/panel.svelte +10 -10
- package/dist/generic/phone/phone.svelte +16 -16
- package/dist/generic/phone/phone.svelte.d.ts +1 -1
- package/dist/generic/pill/pill.svelte +7 -7
- package/dist/generic/scorecard/scorecard.svelte +10 -10
- package/dist/generic/section/section.svelte +10 -10
- package/dist/generic/toaster/toaster.svelte +6 -6
- package/dist/icons/angle-right-icon.svelte +11 -11
- package/dist/icons/angle-up-icon.svelte +9 -9
- package/dist/icons/check-icon.svelte +17 -17
- package/dist/icons/envelope-icon.svelte +8 -8
- package/dist/icons/folder-open-icon.svelte +12 -12
- package/dist/icons/hamburger-icon.svelte +15 -15
- package/dist/icons/home-icon.svelte +7 -7
- package/dist/icons/link-icon.svelte +15 -15
- package/dist/icons/mobile-phone-icon.svelte +5 -5
- package/dist/icons/phone-icon.svelte +9 -9
- package/dist/icons/svg-icon.svelte +5 -5
- package/dist/icons/upload-icon.svelte +9 -9
- package/dist/images/icon.svelte +5 -5
- package/dist/images/image.svelte +28 -28
- package/dist/index.d.ts +13 -0
- package/dist/index.js +14 -0
- package/dist/layout/flex-col.svelte +10 -10
- package/dist/layout/flex-item.svelte +5 -5
- package/dist/layout/flex-row.svelte +13 -13
- package/dist/layout/grid.svelte +17 -17
- package/dist/modals/alert.svelte +24 -24
- package/dist/modals/confirm.svelte +27 -27
- package/dist/modals/dialog-body.svelte +5 -5
- package/dist/modals/dialog-close-button.svelte +7 -7
- package/dist/modals/dialog-footer.svelte +9 -9
- package/dist/modals/dialog-header.svelte +5 -5
- package/dist/modals/dialog-window.svelte +9 -9
- package/dist/modals/modal.svelte +12 -12
- package/dist/modals/prompt.svelte +29 -29
- package/dist/navigation/accordian/accordian.svelte +17 -17
- package/dist/navigation/app-bar/app-bar.svelte +7 -7
- package/dist/navigation/app-bar/app-branding.svelte +18 -18
- package/dist/navigation/app-bar/app-logo.svelte +11 -11
- package/dist/navigation/app-bar/app-nav-item.svelte +14 -14
- package/dist/navigation/app-bar/app-nav.svelte +12 -12
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte +25 -25
- package/dist/navigation/dropdown-button/dropdown-button.svelte +97 -0
- package/dist/navigation/dropdown-button/dropdown-button.svelte.d.ts +21 -0
- package/dist/navigation/pagination/pagination.svelte +27 -27
- package/dist/navigation/side-bar/side-bar.svelte +10 -10
- package/dist/navigation/tabs/tab-group.svelte +20 -20
- package/dist/navigation/tabs/tab.svelte +13 -13
- package/dist/navigation/wizard/wizard-step.svelte +12 -12
- package/dist/navigation/wizard/wizard.svelte +27 -27
- package/dist/placeholders/loading.svelte +9 -9
- package/dist/placeholders/progress.svelte +9 -9
- package/dist/placeholders/skeleton-input.svelte +43 -43
- package/dist/placeholders/skeleton-text.svelte +5 -5
- package/dist/tables/data-grid.svelte +83 -83
- package/dist/tables/table-body.svelte +3 -3
- package/dist/tables/table-caption.svelte +7 -7
- package/dist/tables/table-cell.svelte +7 -7
- package/dist/tables/table-footer-cell.svelte +21 -21
- package/dist/tables/table-footer-row.svelte +3 -3
- package/dist/tables/table-footer.svelte +13 -13
- package/dist/tables/table-header-cell.svelte +7 -7
- package/dist/tables/table-header-row.svelte +4 -4
- package/dist/tables/table-header.svelte +14 -14
- package/dist/tables/table-row.svelte +16 -16
- package/dist/tables/table.svelte +11 -11
- package/dist/timeline/timeline-item.svelte +26 -26
- package/dist/timeline/timeline.svelte +5 -5
- package/dist/typography/code-block.svelte +7 -7
- package/dist/typography/headline.svelte +19 -19
- package/dist/typography/paragraph.svelte +13 -13
- package/dist/typography/subtitle.svelte +7 -7
- package/dist/typography/text.svelte +11 -11
- package/package.json +101 -101
|
@@ -33,30 +33,30 @@ $:
|
|
|
33
33
|
setTimeout(goodbye, dismissMilliseconds);
|
|
34
34
|
}
|
|
35
35
|
hello();
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
|
-
<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {going ? 'going' : ''} {coming ? 'coming' : ''}">
|
|
39
|
-
{#if $$slots.icon}
|
|
40
|
-
<div class="icon">
|
|
41
|
-
<slot name="icon" />
|
|
42
|
-
</div>
|
|
43
|
-
{/if}
|
|
44
|
-
<div class="content">
|
|
45
|
-
{#if title}
|
|
46
|
-
<strong>{title}</strong>
|
|
47
|
-
{/if}
|
|
48
|
-
<div class="message">
|
|
49
|
-
<slot />
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
{#if dismissable}
|
|
54
|
-
<div class="dismiss">
|
|
55
|
-
<button type="button" on:click={onClick}>X</button>
|
|
56
|
-
</div>
|
|
57
|
-
{/if}
|
|
58
|
-
</div>
|
|
59
|
-
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {going ? 'going' : ''} {coming ? 'coming' : ''}">
|
|
39
|
+
{#if $$slots.icon}
|
|
40
|
+
<div class="icon">
|
|
41
|
+
<slot name="icon" />
|
|
42
|
+
</div>
|
|
43
|
+
{/if}
|
|
44
|
+
<div class="content">
|
|
45
|
+
{#if title}
|
|
46
|
+
<strong>{title}</strong>
|
|
47
|
+
{/if}
|
|
48
|
+
<div class="message">
|
|
49
|
+
<slot />
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
{#if dismissable}
|
|
54
|
+
<div class="dismiss">
|
|
55
|
+
<button type="button" on:click={onClick}>X</button>
|
|
56
|
+
</div>
|
|
57
|
+
{/if}
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
60
|
<style>.notice {
|
|
61
61
|
display: flex;
|
|
62
62
|
flex-direction: row;
|
|
@@ -172,4 +172,4 @@ button {
|
|
|
172
172
|
}
|
|
173
173
|
button:hover {
|
|
174
174
|
font-weight: bold;
|
|
175
|
-
}</style>
|
|
175
|
+
}</style>
|
|
@@ -9,13 +9,13 @@ const onKeyPress = (event) => {
|
|
|
9
9
|
onClick();
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
15
|
-
<div class:show on:click={onClick} on:keypress={onKeyPress}>
|
|
16
|
-
<slot />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
15
|
+
<div class:show on:click={onClick} on:keypress={onKeyPress}>
|
|
16
|
+
<slot />
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
19
|
<style>div {
|
|
20
20
|
display: none;
|
|
21
21
|
position: fixed;
|
|
@@ -30,4 +30,4 @@ div.show {
|
|
|
30
30
|
display: flex;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: center;
|
|
33
|
-
}</style>
|
|
33
|
+
}</style>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script>export let title = void 0;
|
|
2
2
|
export let border = true;
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<fieldset class={border ? 'border' : 'no-border'}>
|
|
6
|
-
{#if title}
|
|
7
|
-
<legend>{title}</legend>
|
|
8
|
-
{/if}
|
|
9
|
-
<slot />
|
|
10
|
-
</fieldset>
|
|
11
|
-
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<fieldset class={border ? 'border' : 'no-border'}>
|
|
6
|
+
{#if title}
|
|
7
|
+
<legend>{title}</legend>
|
|
8
|
+
{/if}
|
|
9
|
+
<slot />
|
|
10
|
+
</fieldset>
|
|
11
|
+
|
|
12
12
|
<style>fieldset {
|
|
13
13
|
position: relative;
|
|
14
14
|
margin-bottom: 1rem;
|
|
@@ -28,4 +28,4 @@ fieldset legend {
|
|
|
28
28
|
letter-spacing: 0.1rem;
|
|
29
29
|
color: var(--base-fg, #ccc);
|
|
30
30
|
font-family: var(--base-headline-font-family, sans-serif);
|
|
31
|
-
}</style>
|
|
31
|
+
}</style>
|
|
@@ -22,21 +22,21 @@ $:
|
|
|
22
22
|
protocol = type === "sms" ? "sms:" : "tel:";
|
|
23
23
|
$:
|
|
24
24
|
isCellPhone = type == "mobile" || type == "sms";
|
|
25
|
-
</script>
|
|
26
|
-
|
|
27
|
-
<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
|
|
28
|
-
<span class="icon">
|
|
29
|
-
{#if isCellPhone}
|
|
30
|
-
<MobilePhoneIcon />
|
|
31
|
-
{:else}
|
|
32
|
-
<PhoneIcon />
|
|
33
|
-
{/if}
|
|
34
|
-
</span>
|
|
35
|
-
<span class="number">
|
|
36
|
-
{formattedPhoneNumber}
|
|
37
|
-
</span>
|
|
38
|
-
</a>
|
|
39
|
-
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
|
|
28
|
+
<span class="icon">
|
|
29
|
+
{#if isCellPhone}
|
|
30
|
+
<MobilePhoneIcon />
|
|
31
|
+
{:else}
|
|
32
|
+
<PhoneIcon />
|
|
33
|
+
{/if}
|
|
34
|
+
</span>
|
|
35
|
+
<span class="number">
|
|
36
|
+
{formattedPhoneNumber}
|
|
37
|
+
</span>
|
|
38
|
+
</a>
|
|
39
|
+
|
|
40
40
|
<style>a {
|
|
41
41
|
color: inherit;
|
|
42
42
|
text-decoration: none;
|
|
@@ -53,4 +53,4 @@ a .icon {
|
|
|
53
53
|
}
|
|
54
54
|
a:hover .number {
|
|
55
55
|
text-decoration: underline;
|
|
56
|
-
}</style>
|
|
56
|
+
}</style>
|
|
@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
value: string;
|
|
5
|
-
type?: "
|
|
5
|
+
type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
|
|
6
6
|
};
|
|
7
7
|
events: {
|
|
8
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -3,12 +3,12 @@ export let style = "standard";
|
|
|
3
3
|
export let shape = "rounded";
|
|
4
4
|
export let fill = "solid";
|
|
5
5
|
export let compact = false;
|
|
6
|
-
</script>
|
|
7
|
-
|
|
8
|
-
<div class="pill {size} {style} {shape} {fill}" class:compact>
|
|
9
|
-
<span><slot /></span>
|
|
10
|
-
</div>
|
|
11
|
-
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<div class="pill {size} {style} {shape} {fill}" class:compact>
|
|
9
|
+
<span><slot /></span>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
12
|
<style>.pill {
|
|
13
13
|
display: inline-block;
|
|
14
14
|
padding: 0.25rem 0.5rem;
|
|
@@ -90,4 +90,4 @@ export let compact = false;
|
|
|
90
90
|
background-color: transparent;
|
|
91
91
|
border: 1px solid #570000;
|
|
92
92
|
color: #570000;
|
|
93
|
-
}</style>
|
|
93
|
+
}</style>
|
|
@@ -17,15 +17,15 @@ $:
|
|
|
17
17
|
formattedValue = typeof value === "number" ? value.toLocaleString() : value;
|
|
18
18
|
$:
|
|
19
19
|
isLink = !!href;
|
|
20
|
-
</script>
|
|
21
|
-
|
|
22
|
-
<button on:click={onClick} class:isLink {id}>
|
|
23
|
-
<figure class={caption}>
|
|
24
|
-
<span class="value">{formattedValue}</span>
|
|
25
|
-
<figcaption><slot /></figcaption>
|
|
26
|
-
</figure>
|
|
27
|
-
</button>
|
|
28
|
-
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<button on:click={onClick} class:isLink {id}>
|
|
23
|
+
<figure class={caption}>
|
|
24
|
+
<span class="value">{formattedValue}</span>
|
|
25
|
+
<figcaption><slot /></figcaption>
|
|
26
|
+
</figure>
|
|
27
|
+
</button>
|
|
28
|
+
|
|
29
29
|
<style>button {
|
|
30
30
|
display: inline-block;
|
|
31
31
|
margin-right: 1rem;
|
|
@@ -95,4 +95,4 @@ button figure.right {
|
|
|
95
95
|
justify-content: center;
|
|
96
96
|
text-align: right;
|
|
97
97
|
gap: 0.5rem;
|
|
98
|
-
}</style>
|
|
98
|
+
}</style>
|
|
@@ -6,15 +6,15 @@ export let size = "full";
|
|
|
6
6
|
export let hidden = false;
|
|
7
7
|
export let align = "left";
|
|
8
8
|
setContext("section", { level, title });
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<section class="level-{level} {size} {align}" class:hidden>
|
|
12
|
-
{#if title}
|
|
13
|
-
<Header {level} />
|
|
14
|
-
{/if}
|
|
15
|
-
<slot />
|
|
16
|
-
</section>
|
|
17
|
-
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<section class="level-{level} {size} {align}" class:hidden>
|
|
12
|
+
{#if title}
|
|
13
|
+
<Header {level} />
|
|
14
|
+
{/if}
|
|
15
|
+
<slot />
|
|
16
|
+
</section>
|
|
17
|
+
|
|
18
18
|
<style>section {
|
|
19
19
|
padding: 0;
|
|
20
20
|
margin-top: 1rem;
|
|
@@ -44,4 +44,4 @@ section.xl {
|
|
|
44
44
|
}
|
|
45
45
|
section.full {
|
|
46
46
|
width: 100%;
|
|
47
|
-
}</style>
|
|
47
|
+
}</style>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<script>import SvgIcon from "./svg-icon.svelte";
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<SvgIcon>
|
|
5
|
-
<path
|
|
6
|
-
stroke="currentColor"
|
|
7
|
-
stroke-linecap="round"
|
|
8
|
-
stroke-linejoin="round"
|
|
9
|
-
stroke-width="2"
|
|
10
|
-
d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"
|
|
11
|
-
/>
|
|
12
|
-
</SvgIcon>
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<SvgIcon>
|
|
5
|
+
<path
|
|
6
|
+
stroke="currentColor"
|
|
7
|
+
stroke-linecap="round"
|
|
8
|
+
stroke-linejoin="round"
|
|
9
|
+
stroke-width="2"
|
|
10
|
+
d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"
|
|
11
|
+
/>
|
|
12
|
+
</SvgIcon>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
|
|
2
|
-
<path
|
|
3
|
-
stroke="currentColor"
|
|
4
|
-
stroke-linecap="round"
|
|
5
|
-
stroke-linejoin="round"
|
|
6
|
-
stroke-width="2"
|
|
7
|
-
d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"
|
|
8
|
-
/>
|
|
9
|
-
</svg>
|
|
1
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
|
|
2
|
+
<path
|
|
3
|
+
stroke="currentColor"
|
|
4
|
+
stroke-linecap="round"
|
|
5
|
+
stroke-linejoin="round"
|
|
6
|
+
stroke-width="2"
|
|
7
|
+
d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"
|
|
8
|
+
/>
|
|
9
|
+
</svg>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<svg
|
|
4
|
-
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
5
|
-
aria-hidden="true"
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
fill="none"
|
|
8
|
-
viewBox="0 0 16 12"
|
|
9
|
-
>
|
|
10
|
-
<path
|
|
11
|
-
stroke="currentColor"
|
|
12
|
-
stroke-linecap="round"
|
|
13
|
-
stroke-linejoin="round"
|
|
14
|
-
stroke-width="2"
|
|
15
|
-
d="M1 5.917 5.724 10.5 15 1.5"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<svg
|
|
4
|
+
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
5
|
+
aria-hidden="true"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
fill="none"
|
|
8
|
+
viewBox="0 0 16 12"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
stroke-linecap="round"
|
|
13
|
+
stroke-linejoin="round"
|
|
14
|
+
stroke-width="2"
|
|
15
|
+
d="M1 5.917 5.724 10.5 15 1.5"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
2
|
-
<path
|
|
3
|
-
d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
|
|
4
|
-
/>
|
|
5
|
-
<path
|
|
6
|
-
d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
|
|
7
|
-
/>
|
|
8
|
-
</svg>
|
|
1
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
2
|
+
<path
|
|
3
|
+
d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
|
|
4
|
+
/>
|
|
5
|
+
<path
|
|
6
|
+
d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
|
|
7
|
+
/>
|
|
8
|
+
</svg>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
-
aria-hidden="true"
|
|
4
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
viewBox="0 0 20 18"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
d="M4.09 7.586A1 1 0 0 1 5 7h13V6a2 2 0 0 0-2-2h-4.557L9.043.8a2.009 2.009 0 0 0-1.6-.8H2a2 2 0 0 0-2 2v14c.001.154.02.308.058.457L4.09 7.586Z"
|
|
10
|
-
/>
|
|
11
|
-
<path d="M6.05 9 2 17.952c.14.031.281.047.424.048h12.95a.992.992 0 0 0 .909-.594L20 9H6.05Z" />
|
|
12
|
-
</svg>
|
|
1
|
+
<svg
|
|
2
|
+
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill="currentColor"
|
|
6
|
+
viewBox="0 0 20 18"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
d="M4.09 7.586A1 1 0 0 1 5 7h13V6a2 2 0 0 0-2-2h-4.557L9.043.8a2.009 2.009 0 0 0-1.6-.8H2a2 2 0 0 0-2 2v14c.001.154.02.308.058.457L4.09 7.586Z"
|
|
10
|
+
/>
|
|
11
|
+
<path d="M6.05 9 2 17.952c.14.031.281.047.424.048h12.95a.992.992 0 0 0 .909-.594L20 9H6.05Z" />
|
|
12
|
+
</svg>
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
-
aria-hidden="true"
|
|
4
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
-
fill="none"
|
|
6
|
-
viewBox="0 0 17 14"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
stroke="currentColor"
|
|
10
|
-
stroke-linecap="round"
|
|
11
|
-
stroke-linejoin="round"
|
|
12
|
-
stroke-width="2"
|
|
13
|
-
d="M1 1h15M1 7h15M1 13h15"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
1
|
+
<svg
|
|
2
|
+
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill="none"
|
|
6
|
+
viewBox="0 0 17 14"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
stroke-linecap="round"
|
|
11
|
+
stroke-linejoin="round"
|
|
12
|
+
stroke-width="2"
|
|
13
|
+
d="M1 1h15M1 7h15M1 13h15"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script>import SvgIcon from "./svg-icon.svelte";
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<SvgIcon width={20} height={20} fill="currentColor">
|
|
5
|
-
<path
|
|
6
|
-
d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
|
|
7
|
-
/>
|
|
8
|
-
</SvgIcon>
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<SvgIcon width={20} height={20} fill="currentColor">
|
|
5
|
+
<path
|
|
6
|
+
d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
|
|
7
|
+
/>
|
|
8
|
+
</SvgIcon>
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
-
aria-hidden="true"
|
|
4
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
-
fill="none"
|
|
6
|
-
viewBox="0 0 19 19"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
stroke="currentColor"
|
|
10
|
-
stroke-linecap="round"
|
|
11
|
-
stroke-linejoin="round"
|
|
12
|
-
stroke-width="2"
|
|
13
|
-
d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
1
|
+
<svg
|
|
2
|
+
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill="none"
|
|
6
|
+
viewBox="0 0 19 19"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
stroke-linecap="round"
|
|
11
|
+
stroke-linejoin="round"
|
|
12
|
+
stroke-width="2"
|
|
13
|
+
d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
2
|
-
<path
|
|
3
|
-
d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z"
|
|
4
|
-
/>
|
|
5
|
-
</svg>
|
|
1
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
2
|
+
<path
|
|
3
|
+
d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z"
|
|
4
|
+
/>
|
|
5
|
+
</svg>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
|
2
|
-
<path
|
|
3
|
-
stroke="currentColor"
|
|
4
|
-
stroke-linecap="round"
|
|
5
|
-
stroke-linejoin="round"
|
|
6
|
-
stroke-width="2"
|
|
7
|
-
d="m16.344 12.168-1.4-1.4a1.98 1.98 0 0 0-2.8 0l-.7.7a1.98 1.98 0 0 1-2.8 0l-2.1-2.1a1.98 1.98 0 0 1 0-2.8l.7-.7a1.981 1.981 0 0 0 0-2.8l-1.4-1.4a1.828 1.828 0 0 0-2.8 0C-.638 5.323 1.1 9.542 4.78 13.22c3.68 3.678 7.9 5.418 11.564 1.752a1.828 1.828 0 0 0 0-2.804Z"
|
|
8
|
-
/>
|
|
9
|
-
</svg>
|
|
1
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
|
2
|
+
<path
|
|
3
|
+
stroke="currentColor"
|
|
4
|
+
stroke-linecap="round"
|
|
5
|
+
stroke-linejoin="round"
|
|
6
|
+
stroke-width="2"
|
|
7
|
+
d="m16.344 12.168-1.4-1.4a1.98 1.98 0 0 0-2.8 0l-.7.7a1.98 1.98 0 0 1-2.8 0l-2.1-2.1a1.98 1.98 0 0 1 0-2.8l.7-.7a1.981 1.981 0 0 0 0-2.8l-1.4-1.4a1.828 1.828 0 0 0-2.8 0C-.638 5.323 1.1 9.542 4.78 13.22c3.68 3.678 7.9 5.418 11.564 1.752a1.828 1.828 0 0 0 0-2.804Z"
|
|
8
|
+
/>
|
|
9
|
+
</svg>
|
|
@@ -9,8 +9,8 @@ $:
|
|
|
9
9
|
viewBox = `${x} ${y} ${width} ${height}`;
|
|
10
10
|
$:
|
|
11
11
|
preserveAspectRatio = `${aspectRatioAlign} ${aspectRatioBehavior}`;
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" {fill} {viewBox} {preserveAspectRatio}>
|
|
15
|
-
<slot />
|
|
16
|
-
</svg>
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" {fill} {viewBox} {preserveAspectRatio}>
|
|
15
|
+
<slot />
|
|
16
|
+
</svg>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 19">
|
|
2
|
-
<path
|
|
3
|
-
stroke="currentColor"
|
|
4
|
-
stroke-linecap="round"
|
|
5
|
-
stroke-linejoin="round"
|
|
6
|
-
stroke-width="2"
|
|
7
|
-
d="M15 15h.01M4 12H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3m-5.5 0V1.07M5.5 5l4-4 4 4"
|
|
8
|
-
/>
|
|
9
|
-
</svg>
|
|
1
|
+
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 19">
|
|
2
|
+
<path
|
|
3
|
+
stroke="currentColor"
|
|
4
|
+
stroke-linecap="round"
|
|
5
|
+
stroke-linejoin="round"
|
|
6
|
+
stroke-width="2"
|
|
7
|
+
d="M15 15h.01M4 12H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3m-5.5 0V1.07M5.5 5l4-4 4 4"
|
|
8
|
+
/>
|
|
9
|
+
</svg>
|
package/dist/images/icon.svelte
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script>export let href;
|
|
2
2
|
export let color = "rgb(0, 0, 0)";
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<span style={`--icon-path: url("${href}"); --icon-color: ${color};`} />
|
|
6
|
-
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<span style={`--icon-path: url("${href}"); --icon-color: ${color};`} />
|
|
6
|
+
|
|
7
7
|
<style>span {
|
|
8
8
|
display: block;
|
|
9
9
|
background-color: var(--icon-color, rgb(0, 0, 0));
|
|
@@ -25,4 +25,4 @@ export let color = "rgb(0, 0, 0)";
|
|
|
25
25
|
mask-image: var(--icon-path);
|
|
26
26
|
mask-repeat: no-repeat;
|
|
27
27
|
mask-position: center;
|
|
28
|
-
}</style>
|
|
28
|
+
}</style>
|
package/dist/images/image.svelte
CHANGED
|
@@ -6,33 +6,33 @@ $:
|
|
|
6
6
|
sources = Array.isArray(src) ? src : typeof src === "string" ? [{ url: src }] : [src];
|
|
7
7
|
$:
|
|
8
8
|
finalSource = sources[sources.length - 1];
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<div class="image {align}">
|
|
12
|
-
{#if href}
|
|
13
|
-
<a {href}>
|
|
14
|
-
<picture>
|
|
15
|
-
{#each sources as source}
|
|
16
|
-
<source srcset={source.url} media={source.media} />
|
|
17
|
-
{/each}
|
|
18
|
-
<img src={finalSource.url} {alt} />
|
|
19
|
-
</picture>
|
|
20
|
-
</a>
|
|
21
|
-
{:else}
|
|
22
|
-
<picture>
|
|
23
|
-
{#each sources as source}
|
|
24
|
-
<source srcset={source.url} media={source.media} />
|
|
25
|
-
{/each}
|
|
26
|
-
<img src={finalSource.url} {alt} />
|
|
27
|
-
</picture>
|
|
28
|
-
{/if}
|
|
29
|
-
{#if $$slots.default}
|
|
30
|
-
<div class="caption">
|
|
31
|
-
<slot />
|
|
32
|
-
</div>
|
|
33
|
-
{/if}
|
|
34
|
-
</div>
|
|
35
|
-
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<div class="image {align}">
|
|
12
|
+
{#if href}
|
|
13
|
+
<a {href}>
|
|
14
|
+
<picture>
|
|
15
|
+
{#each sources as source}
|
|
16
|
+
<source srcset={source.url} media={source.media} />
|
|
17
|
+
{/each}
|
|
18
|
+
<img src={finalSource.url} {alt} />
|
|
19
|
+
</picture>
|
|
20
|
+
</a>
|
|
21
|
+
{:else}
|
|
22
|
+
<picture>
|
|
23
|
+
{#each sources as source}
|
|
24
|
+
<source srcset={source.url} media={source.media} />
|
|
25
|
+
{/each}
|
|
26
|
+
<img src={finalSource.url} {alt} />
|
|
27
|
+
</picture>
|
|
28
|
+
{/if}
|
|
29
|
+
{#if $$slots.default}
|
|
30
|
+
<div class="caption">
|
|
31
|
+
<slot />
|
|
32
|
+
</div>
|
|
33
|
+
{/if}
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
36
|
<style>.image {
|
|
37
37
|
position: relative;
|
|
38
38
|
width: 100%;
|
|
@@ -73,4 +73,4 @@ $:
|
|
|
73
73
|
.image.right picture,
|
|
74
74
|
.image.right img {
|
|
75
75
|
object-position: right;
|
|
76
|
-
}</style>
|
|
76
|
+
}</style>
|