fluent-svelte-extra 1.7.4 → 1.7.6
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/Expander/Expander.scss +3 -4
- package/Expander/Expander.svelte +1 -1
- package/GridView/GridViewItem.scss +7 -26
- package/GridView/GridViewItem.svelte +14 -15
- package/MenuFlyout/MenuFlyoutItem.svelte +2 -2
- package/MenuFlyout/MenuFlyoutWrapper.svelte +2 -2
- package/TextArea/TextArea.svelte +1 -1
- package/package.json +3 -3
package/Expander/Expander.scss
CHANGED
|
@@ -56,8 +56,7 @@
|
|
|
56
56
|
.expander {
|
|
57
57
|
&-content {
|
|
58
58
|
transform: none;
|
|
59
|
-
|
|
60
|
-
transform;
|
|
59
|
+
|
|
61
60
|
}
|
|
62
61
|
&-chevron svg {
|
|
63
62
|
transform: rotate(180deg);
|
|
@@ -119,8 +118,8 @@
|
|
|
119
118
|
inline-size: 12px;
|
|
120
119
|
block-size: 12px;
|
|
121
120
|
fill: currentColor;
|
|
122
|
-
transition: calc(var(--control-
|
|
123
|
-
var(--control-
|
|
121
|
+
transition: calc(var(--control-fast-duration)) var(--control-fast-out-slow-in-easing) transform
|
|
122
|
+
var(--control-fast-duration);
|
|
124
123
|
}
|
|
125
124
|
}
|
|
126
125
|
&-content {
|
package/Expander/Expander.svelte
CHANGED
|
@@ -140,4 +140,4 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
140
140
|
{/if}
|
|
141
141
|
</div>
|
|
142
142
|
|
|
143
|
-
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none
|
|
143
|
+
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
|
|
@@ -1,39 +1,20 @@
|
|
|
1
1
|
.grid-view-item {
|
|
2
|
-
outline: transparent solid;
|
|
3
|
-
outline-offset: 2px;
|
|
4
|
-
outline-width: 2px;
|
|
5
2
|
position: relative;
|
|
6
|
-
border-radius: var(--
|
|
7
|
-
|
|
8
|
-
min-width: 120px;
|
|
9
|
-
transition: outline var(--fds-control-fast-duration);
|
|
3
|
+
border-radius: var(--control-corner-radius);
|
|
4
|
+
transition: box-shadow var(--control-fast-duration);
|
|
10
5
|
width: fit-content;
|
|
6
|
+
user-select: none;
|
|
11
7
|
|
|
12
8
|
&.selected {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
outline-width: 2px;
|
|
16
|
-
.inner-grid-item {
|
|
17
|
-
outline: var(--fds-control-solid-fill-default) solid 2px;
|
|
18
|
-
}
|
|
9
|
+
box-shadow: inset 0 0 0 2px var(--control-solid-fill-default),
|
|
10
|
+
0 0 0 3px var(--accent-default);
|
|
19
11
|
}
|
|
20
12
|
|
|
21
13
|
& > .item-checkbox {
|
|
22
14
|
position: absolute;
|
|
23
|
-
top:
|
|
24
|
-
right:
|
|
15
|
+
top: 0;
|
|
16
|
+
right: 6px;
|
|
25
17
|
overflow: hidden;
|
|
26
18
|
z-index: 1;
|
|
27
19
|
}
|
|
28
|
-
|
|
29
|
-
& > .inner-grid-item {
|
|
30
|
-
overflow: hidden;
|
|
31
|
-
display: flex;
|
|
32
|
-
position: relative;
|
|
33
|
-
border-radius: var(--fds-control-corner-radius);
|
|
34
|
-
outline: transparent solid 2px;
|
|
35
|
-
transition: outline var(--fds-control-fast-duration);
|
|
36
|
-
height: 100%;
|
|
37
|
-
width: 100%;
|
|
38
|
-
}
|
|
39
20
|
}
|
|
@@ -13,26 +13,25 @@ function setSelected(value) {
|
|
|
13
13
|
}
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
|
-
<div
|
|
16
|
+
<div
|
|
17
|
+
class="grid-view-item"
|
|
18
|
+
class:selected
|
|
19
|
+
{...$$restProps}
|
|
20
|
+
on:click={() => singleSelect && setSelected(!selected)}
|
|
21
|
+
tabindex="0"
|
|
22
|
+
on:keydown={e => e.key === "Enter" && singleSelect && setSelected(!selected)}
|
|
23
|
+
>
|
|
17
24
|
{#if !singleSelect}
|
|
18
25
|
<div class="item-checkbox">
|
|
19
26
|
<Checkbox
|
|
20
27
|
bind:checked={selected}
|
|
21
|
-
on:change={() =>
|
|
22
|
-
|
|
28
|
+
on:change={() => {
|
|
29
|
+
dispatch("change", { selected: !selected });
|
|
30
|
+
}}
|
|
31
|
+
/>
|
|
23
32
|
</div>
|
|
24
33
|
{/if}
|
|
25
|
-
|
|
26
|
-
<div
|
|
27
|
-
class="inner-grid-item"
|
|
28
|
-
on:click={() => {
|
|
29
|
-
if (singleSelect) {
|
|
30
|
-
setSelected(!selected);
|
|
31
|
-
}
|
|
32
|
-
}}
|
|
33
|
-
>
|
|
34
|
-
<slot {setSelected} />
|
|
35
|
-
</div>
|
|
34
|
+
<slot {setSelected} />
|
|
36
35
|
</div>
|
|
37
36
|
|
|
38
|
-
<style >.grid-view-item{border-radius:var(--fds-control-corner-radius);
|
|
37
|
+
<style >.grid-view-item{border-radius:var(--fds-control-corner-radius);position:relative;transition:box-shadow var(--fds-control-fast-duration);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.grid-view-item.selected{box-shadow:inset 0 0 0 2px var(--fds-control-solid-fill-default),0 0 0 3px var(--fds-accent-default)}.grid-view-item>.item-checkbox{overflow:hidden;position:absolute;right:6px;top:0;z-index:1}</style>
|
|
@@ -67,7 +67,7 @@ function handleKeyDown(event) {
|
|
|
67
67
|
else if (open && key === "ArrowLeft") {
|
|
68
68
|
event.stopPropagation();
|
|
69
69
|
open = false;
|
|
70
|
-
if (closeFlyout && !cascading)
|
|
70
|
+
if (closeFlyout && !cascading && variant == "standard")
|
|
71
71
|
closeFlyout(event);
|
|
72
72
|
element.focus();
|
|
73
73
|
}
|
|
@@ -115,7 +115,7 @@ function handleMouseLeave(e) {
|
|
|
115
115
|
condition: closeFlyout,
|
|
116
116
|
event: "click",
|
|
117
117
|
callback: e => {
|
|
118
|
-
if (!cascading) closeFlyout(e);
|
|
118
|
+
if (!cascading && variant == "standard") closeFlyout(e);
|
|
119
119
|
}
|
|
120
120
|
}}
|
|
121
121
|
{...$$restProps}
|
|
@@ -6,8 +6,8 @@ import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
|
|
|
6
6
|
export let open = false;
|
|
7
7
|
/** Determines if the flyout can be closed using conventional user interaction. */
|
|
8
8
|
export let closable = true;
|
|
9
|
-
/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `
|
|
10
|
-
export let closeOnSelect =
|
|
9
|
+
/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `false`. */
|
|
10
|
+
export let closeOnSelect = false;
|
|
11
11
|
/** Direction that the flyout will be opened from. */
|
|
12
12
|
export let placement = "top";
|
|
13
13
|
/** Alignment of the menu along the clickable target's given axis. */
|
package/TextArea/TextArea.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluent-svelte-extra",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.6",
|
|
4
4
|
"description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
|
|
5
5
|
"homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
|
|
6
6
|
"license": "MIT",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"rehype-slug": "^5.0.1",
|
|
55
55
|
"remark-github": "^11.2.2",
|
|
56
56
|
"sass": "^1.50.0",
|
|
57
|
-
"svelte": "^3.
|
|
58
|
-
"svelte-check": "^
|
|
57
|
+
"svelte": "^3.58.0",
|
|
58
|
+
"svelte-check": "^3.6.9",
|
|
59
59
|
"svelte-codesandbox": "^1.0.0",
|
|
60
60
|
"svelte-preprocess": "^4.10.5",
|
|
61
61
|
"svelte2tsx": "^0.4.14",
|