fluent-svelte-extra 1.7.9 → 1.8.1
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.
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
@use "../mixins" as *;
|
|
2
2
|
|
|
3
3
|
.content-dialog {
|
|
4
|
-
position: fixed;
|
|
5
4
|
box-sizing: border-box;
|
|
6
5
|
animation: dialog-inner var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
|
|
7
6
|
max-inline-size: calc(100% - 24px);
|
|
@@ -23,6 +22,37 @@
|
|
|
23
22
|
}
|
|
24
23
|
}
|
|
25
24
|
|
|
25
|
+
&-container {
|
|
26
|
+
@include flex($direction: row, $align: start);
|
|
27
|
+
#close-button {
|
|
28
|
+
@include flex($direction: column, $align: center, $justify: center);
|
|
29
|
+
color: var(--text-primary);
|
|
30
|
+
top: 0;
|
|
31
|
+
margin-inline-start: 8px;
|
|
32
|
+
block-size: 48px;
|
|
33
|
+
inline-size: 48px;
|
|
34
|
+
padding: 0;
|
|
35
|
+
border-radius: var(--overlay-corner-radius);
|
|
36
|
+
border: 1px solid var(--surface-stroke-default);
|
|
37
|
+
background-clip: padding-box;
|
|
38
|
+
background-color: var(--control-on-image-fill-default);
|
|
39
|
+
transition: background-color var(--control-fast-duration)
|
|
40
|
+
var(--control-fast-out-slow-in-easing),
|
|
41
|
+
color var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
|
|
42
|
+
&:hover {
|
|
43
|
+
background-color: var(--control-on-image-fill-secondary);
|
|
44
|
+
}
|
|
45
|
+
&:active {
|
|
46
|
+
background-color: var(--control-on-image-fill-tertiary);
|
|
47
|
+
}
|
|
48
|
+
&.disabled {
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
color: var(--text-disabled);
|
|
51
|
+
background-color: var(--control-on-image-fill-default) !important;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
26
56
|
&-smoke {
|
|
27
57
|
@include flex($direction: column, $align: center, $justify: center);
|
|
28
58
|
position: fixed;
|
|
@@ -12,6 +12,8 @@ export let title = "";
|
|
|
12
12
|
export let size = "standard";
|
|
13
13
|
/** Determines whether the dialog can be conventially closed using the escape key. */
|
|
14
14
|
export let closable = true;
|
|
15
|
+
/** Determines whether the dialog should display a close button. */
|
|
16
|
+
export let closeButton = false;
|
|
15
17
|
/** Determines the node the dialog should be appended to. */
|
|
16
18
|
export let append = undefined;
|
|
17
19
|
/** Determines if the dialog should darken the contents behind it. */
|
|
@@ -32,6 +34,7 @@ export let footerElement = null;
|
|
|
32
34
|
const forwardEvents = createEventForwarder(get_current_component(), [
|
|
33
35
|
"open",
|
|
34
36
|
"close",
|
|
37
|
+
"closeByButton",
|
|
35
38
|
"backdropclick",
|
|
36
39
|
"backdropmousedown"
|
|
37
40
|
]);
|
|
@@ -50,6 +53,12 @@ function mountDialog(node) {
|
|
|
50
53
|
function close() {
|
|
51
54
|
open = false;
|
|
52
55
|
}
|
|
56
|
+
function closeByButton() {
|
|
57
|
+
if (closable) {
|
|
58
|
+
close();
|
|
59
|
+
dispatch("closeByButton");
|
|
60
|
+
}
|
|
61
|
+
}
|
|
53
62
|
function handleEscapeKey({ key }) {
|
|
54
63
|
if (key === "Escape" && open && closable)
|
|
55
64
|
close();
|
|
@@ -70,36 +79,62 @@ function handleEscapeKey({ key }) {
|
|
|
70
79
|
bind:this={backdropElement}
|
|
71
80
|
>
|
|
72
81
|
<div
|
|
73
|
-
|
|
74
|
-
class="content-dialog size-{size} {className}"
|
|
75
|
-
role="dialog"
|
|
76
|
-
aria-modal="true"
|
|
77
|
-
aria-labelledby={title && titleId}
|
|
78
|
-
aria-describedby={bodyId}
|
|
79
|
-
bind:this={element}
|
|
82
|
+
class="content-dialog-container"
|
|
80
83
|
transition:scale|local={{
|
|
81
84
|
duration: getCSSDuration("--fds-control-fast-duration"),
|
|
82
85
|
start: 1.05,
|
|
83
86
|
easing: circOut
|
|
84
87
|
}}
|
|
85
|
-
{...$$restProps}
|
|
86
88
|
>
|
|
87
|
-
<div
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
<div
|
|
90
|
+
use:forwardEvents
|
|
91
|
+
class="content-dialog size-{size} {className}"
|
|
92
|
+
role="dialog"
|
|
93
|
+
aria-modal="true"
|
|
94
|
+
aria-labelledby={title && titleId}
|
|
95
|
+
aria-describedby={bodyId}
|
|
96
|
+
bind:this={element}
|
|
97
|
+
{...$$restProps}
|
|
98
|
+
>
|
|
99
|
+
<div class="content-dialog-body" id={bodyId} bind:this={bodyElement}>
|
|
100
|
+
{#if title}
|
|
101
|
+
<TextBlock variant="subtitle" class="content-dialog-title" id={titleId}>
|
|
102
|
+
{title}
|
|
103
|
+
</TextBlock>
|
|
104
|
+
{/if}
|
|
105
|
+
<slot />
|
|
106
|
+
</div>
|
|
107
|
+
{#if $$slots.footer}
|
|
108
|
+
<footer class="content-dialog-footer" bind:this={footerElement}>
|
|
109
|
+
<slot name="footer" />
|
|
110
|
+
</footer>
|
|
92
111
|
{/if}
|
|
93
|
-
<slot />
|
|
94
112
|
</div>
|
|
95
|
-
{#if
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
113
|
+
{#if closeButton}
|
|
114
|
+
<button
|
|
115
|
+
id="close-button"
|
|
116
|
+
aria-label="Close dialog"
|
|
117
|
+
tabindex="0"
|
|
118
|
+
class:disabled={!closable}
|
|
119
|
+
on:click={closeByButton}
|
|
120
|
+
>
|
|
121
|
+
<svg
|
|
122
|
+
aria-hidden="true"
|
|
123
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
124
|
+
width="12"
|
|
125
|
+
height="12"
|
|
126
|
+
viewBox="0 0 1024 1024"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
fill="currentColor"
|
|
130
|
+
d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
|
|
131
|
+
/>
|
|
132
|
+
</svg>
|
|
133
|
+
</button>
|
|
99
134
|
{/if}
|
|
100
135
|
</div>
|
|
101
136
|
<slot name="outer" />
|
|
102
137
|
</div>
|
|
103
138
|
{/if}
|
|
104
139
|
|
|
105
|
-
<style >.content-dialog{-webkit-animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);background-clip:padding-box;background-color:var(--fds-solid-background-base);border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-dialog-shadow);box-sizing:border-box;max-inline-size:calc(100% - 24px);overflow:hidden
|
|
140
|
+
<style >.content-dialog{-webkit-animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);background-clip:padding-box;background-color:var(--fds-solid-background-base);border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-dialog-shadow);box-sizing:border-box;max-inline-size:calc(100% - 24px);overflow:hidden}.content-dialog.size-min{inline-size:320px}.content-dialog.size-standard{inline-size:448px}.content-dialog.size-max{inline-size:540px}.content-dialog-container{align-items:flex-start;display:flex;flex-direction:row}.content-dialog-container #close-button{-webkit-margin-start:8px;align-items:center;background-clip:padding-box;background-color:var(--fds-control-on-image-fill-default);block-size:48px;border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:48px;justify-content:center;margin-inline-start:8px;padding:0;top:0;transition:background-color var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing),color var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.content-dialog-container #close-button:hover{background-color:var(--fds-control-on-image-fill-secondary)}.content-dialog-container #close-button:active{background-color:var(--fds-control-on-image-fill-tertiary)}.content-dialog-container #close-button.disabled{background-color:var(--fds-control-on-image-fill-default)!important;color:var(--fds-text-disabled);pointer-events:none}.content-dialog-smoke{align-items:center;block-size:100%;display:flex;flex-direction:column;inline-size:100%;inset-block-start:0;inset-inline-start:0;justify-content:center;position:fixed;z-index:101}.content-dialog-smoke.darken{background-color:var(--fds-smoke-background-default)}.content-dialog :global(.content-dialog-title){color:var(--fds-text-primary);display:block;margin-bottom:12px}.content-dialog-body,.content-dialog-footer{padding:24px}.content-dialog-body{background-color:var(--fds-layer-background-default);color:var(--fds-text-primary);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.content-dialog-footer{grid-gap:8px;-webkit-border-before:1px solid var(--fds-card-stroke-default);border-block-start:1px solid var(--fds-card-stroke-default);display:grid;grid-auto-flow:column;grid-auto-rows:1fr;white-space:nowrap}.content-dialog-footer>:global(.button:only-child){inline-size:50%;justify-self:end}</style>
|
|
@@ -6,6 +6,7 @@ declare const __propDef: {
|
|
|
6
6
|
title?: string;
|
|
7
7
|
size?: "standard" | "max" | "min";
|
|
8
8
|
closable?: boolean;
|
|
9
|
+
closeButton?: boolean;
|
|
9
10
|
append?: HTMLElement;
|
|
10
11
|
darken?: boolean;
|
|
11
12
|
trapFocus?: boolean;
|
|
@@ -20,6 +21,7 @@ declare const __propDef: {
|
|
|
20
21
|
backdropmousedown: CustomEvent<any>;
|
|
21
22
|
close: CustomEvent<any>;
|
|
22
23
|
open: CustomEvent<any>;
|
|
24
|
+
closeByButton: CustomEvent<any>;
|
|
23
25
|
} & {
|
|
24
26
|
[evt: string]: CustomEvent<any>;
|
|
25
27
|
};
|
package/TextArea/TextArea.svelte
CHANGED
package/package.json
CHANGED