fluent-svelte-extra 2.0.3 → 2.0.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.svelte +100 -98
- package/Expander/Expander.svelte.d.ts +1 -0
- package/SplitButton/SplitButton.scss +111 -0
- package/SplitButton/SplitButton.svelte +151 -0
- package/SplitButton/SplitButton.svelte.d.ts +53 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +3 -1
package/Expander/Expander.svelte
CHANGED
|
@@ -8,6 +8,8 @@ import { expoOut } from "svelte/easing";
|
|
|
8
8
|
export let expanded = false;
|
|
9
9
|
/** Determines whether the expander is expandable or not. */
|
|
10
10
|
export let expandable = true;
|
|
11
|
+
/** Determines to use slide animation for the component. */
|
|
12
|
+
export let animate = true;
|
|
11
13
|
/** Determines the direction that the expander will extend to. */
|
|
12
14
|
export let direction = "down";
|
|
13
15
|
// svelte-ignore unused-export-let
|
|
@@ -43,104 +45,104 @@ function fadeSlide(node, options) {
|
|
|
43
45
|
return {
|
|
44
46
|
duration: options.duration,
|
|
45
47
|
easing: options.easing,
|
|
46
|
-
css: t => `
|
|
47
|
-
${slideTrans.css(t, options.duration)}
|
|
48
|
-
opacity: ${t};
|
|
48
|
+
css: t => `
|
|
49
|
+
${slideTrans.css(t, options.duration)}
|
|
50
|
+
opacity: ${t};
|
|
49
51
|
`
|
|
50
52
|
};
|
|
51
53
|
}
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<!--
|
|
55
|
-
@component
|
|
56
|
-
Expanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header. [Docs](https://fluent-svelte.vercel.app/docs/components/expander)
|
|
57
|
-
- Usage:
|
|
58
|
-
```tsx
|
|
59
|
-
<Expander>
|
|
60
|
-
Header
|
|
61
|
-
<svelte:fragment slot="content">
|
|
62
|
-
Content
|
|
63
|
-
</svelte:fragment>
|
|
64
|
-
</Expander>
|
|
65
|
-
```
|
|
66
|
-
-->
|
|
67
|
-
<div
|
|
68
|
-
use:forwardEvents
|
|
69
|
-
class="expander direction-{direction} {className}"
|
|
70
|
-
role="region"
|
|
71
|
-
bind:this={containerElement}
|
|
72
|
-
class:expanded
|
|
73
|
-
class:expandable
|
|
74
|
-
{...$$restProps}
|
|
75
|
-
>
|
|
76
|
-
<svelte:element this="h">
|
|
77
|
-
<div
|
|
78
|
-
role="button"
|
|
79
|
-
id={headerId}
|
|
80
|
-
aria-controls={contentId}
|
|
81
|
-
class="expander-header"
|
|
82
|
-
aria-expanded={expanded}
|
|
83
|
-
tabindex={expandable ? 0 : -1}
|
|
84
|
-
bind:this={headerElement}
|
|
85
|
-
on:keydown={handleKeydown}
|
|
86
|
-
on:click={() => {
|
|
87
|
-
if (expandable) {
|
|
88
|
-
expanded = !expanded;
|
|
89
|
-
}
|
|
90
|
-
}}
|
|
91
|
-
>
|
|
92
|
-
{#if $$slots.icon}
|
|
93
|
-
<div class="expander-icon">
|
|
94
|
-
<slot name="icon" />
|
|
95
|
-
</div>
|
|
96
|
-
{/if}
|
|
97
|
-
<span class="expander-header-title">
|
|
98
|
-
<slot />
|
|
99
|
-
</span>
|
|
100
|
-
|
|
101
|
-
{#if expandable}
|
|
102
|
-
<button
|
|
103
|
-
class="expander-chevron"
|
|
104
|
-
type="button"
|
|
105
|
-
tabindex="-1"
|
|
106
|
-
id={contentId}
|
|
107
|
-
aria-labelledby={headerId}
|
|
108
|
-
>
|
|
109
|
-
<svg
|
|
110
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
111
|
-
width="12"
|
|
112
|
-
height="12"
|
|
113
|
-
viewBox="0 0 12 12"
|
|
114
|
-
>
|
|
115
|
-
{#if direction === "down"}
|
|
116
|
-
<path
|
|
117
|
-
fill="currentColor"
|
|
118
|
-
d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
|
|
119
|
-
/>
|
|
120
|
-
{:else}
|
|
121
|
-
<path
|
|
122
|
-
fill="currentColor"
|
|
123
|
-
d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
|
|
124
|
-
/>
|
|
125
|
-
{/if}
|
|
126
|
-
</svg>
|
|
127
|
-
</button>
|
|
128
|
-
{/if}
|
|
129
|
-
</div>
|
|
130
|
-
</svelte:element>
|
|
131
|
-
{#if expanded}
|
|
132
|
-
<div
|
|
133
|
-
class="expander-content-anchor"
|
|
134
|
-
transition:fadeSlide={{
|
|
135
|
-
duration: getCSSDuration("--fds-control-normal-duration") * 2,
|
|
136
|
-
easing: expoOut
|
|
137
|
-
}}
|
|
138
|
-
>
|
|
139
|
-
<div class="expander-content" bind:this={contentElement}>
|
|
140
|
-
<slot name="content" />
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
{/if}
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<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>
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<!--
|
|
57
|
+
@component
|
|
58
|
+
Expanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header. [Docs](https://fluent-svelte.vercel.app/docs/components/expander)
|
|
59
|
+
- Usage:
|
|
60
|
+
```tsx
|
|
61
|
+
<Expander>
|
|
62
|
+
Header
|
|
63
|
+
<svelte:fragment slot="content">
|
|
64
|
+
Content
|
|
65
|
+
</svelte:fragment>
|
|
66
|
+
</Expander>
|
|
67
|
+
```
|
|
68
|
+
-->
|
|
69
|
+
<div
|
|
70
|
+
use:forwardEvents
|
|
71
|
+
class="expander direction-{direction} {className}"
|
|
72
|
+
role="region"
|
|
73
|
+
bind:this={containerElement}
|
|
74
|
+
class:expanded
|
|
75
|
+
class:expandable
|
|
76
|
+
{...$$restProps}
|
|
77
|
+
>
|
|
78
|
+
<svelte:element this="h">
|
|
79
|
+
<div
|
|
80
|
+
role="button"
|
|
81
|
+
id={headerId}
|
|
82
|
+
aria-controls={contentId}
|
|
83
|
+
class="expander-header"
|
|
84
|
+
aria-expanded={expanded}
|
|
85
|
+
tabindex={expandable ? 0 : -1}
|
|
86
|
+
bind:this={headerElement}
|
|
87
|
+
on:keydown={handleKeydown}
|
|
88
|
+
on:click={() => {
|
|
89
|
+
if (expandable) {
|
|
90
|
+
expanded = !expanded;
|
|
91
|
+
}
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
{#if $$slots.icon}
|
|
95
|
+
<div class="expander-icon">
|
|
96
|
+
<slot name="icon" />
|
|
97
|
+
</div>
|
|
98
|
+
{/if}
|
|
99
|
+
<span class="expander-header-title">
|
|
100
|
+
<slot />
|
|
101
|
+
</span>
|
|
102
|
+
|
|
103
|
+
{#if expandable}
|
|
104
|
+
<button
|
|
105
|
+
class="expander-chevron"
|
|
106
|
+
type="button"
|
|
107
|
+
tabindex="-1"
|
|
108
|
+
id={contentId}
|
|
109
|
+
aria-labelledby={headerId}
|
|
110
|
+
>
|
|
111
|
+
<svg
|
|
112
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
113
|
+
width="12"
|
|
114
|
+
height="12"
|
|
115
|
+
viewBox="0 0 12 12"
|
|
116
|
+
>
|
|
117
|
+
{#if direction === "down"}
|
|
118
|
+
<path
|
|
119
|
+
fill="currentColor"
|
|
120
|
+
d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
|
|
121
|
+
/>
|
|
122
|
+
{:else}
|
|
123
|
+
<path
|
|
124
|
+
fill="currentColor"
|
|
125
|
+
d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
|
|
126
|
+
/>
|
|
127
|
+
{/if}
|
|
128
|
+
</svg>
|
|
129
|
+
</button>
|
|
130
|
+
{/if}
|
|
131
|
+
</div>
|
|
132
|
+
</svelte:element>
|
|
133
|
+
{#if expanded}
|
|
134
|
+
<div
|
|
135
|
+
class="expander-content-anchor"
|
|
136
|
+
transition:fadeSlide={{
|
|
137
|
+
duration: animate ? getCSSDuration("--fds-control-normal-duration") * 2 : 0,
|
|
138
|
+
easing: expoOut
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
<div class="expander-content" bind:this={contentElement}>
|
|
142
|
+
<slot name="content" />
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
{/if}
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<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>
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
@use "../mixins" as *;
|
|
2
|
+
|
|
3
|
+
.split-button {
|
|
4
|
+
padding-block: 4px 6px;
|
|
5
|
+
padding-inline: 11px;
|
|
6
|
+
border-radius: var(--control-corner-radius) 0 0 var(--control-corner-radius);
|
|
7
|
+
flex: 1;
|
|
8
|
+
|
|
9
|
+
&-container {
|
|
10
|
+
@include flex($inline: true);
|
|
11
|
+
& :global(button) {
|
|
12
|
+
@include flex($inline: true, $align: center, $justify: center);
|
|
13
|
+
@include typography-body;
|
|
14
|
+
|
|
15
|
+
position: relative;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
transition: var(--control-faster-duration) ease background;
|
|
18
|
+
text-decoration: none;
|
|
19
|
+
border: none;
|
|
20
|
+
outline: none;
|
|
21
|
+
cursor: default;
|
|
22
|
+
|
|
23
|
+
&:focus-visible {
|
|
24
|
+
box-shadow: var(--focus-stroke);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.style- {
|
|
28
|
+
&standard {
|
|
29
|
+
border: 1px solid;
|
|
30
|
+
border-color: var(--control-border-default);
|
|
31
|
+
background-color: var(--control-fill-default);
|
|
32
|
+
color: var(--text-primary);
|
|
33
|
+
background-clip: padding-box;
|
|
34
|
+
|
|
35
|
+
&:hover {
|
|
36
|
+
background-color: var(--control-fill-secondary);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:active {
|
|
40
|
+
border-color: var(--control-stroke-default);
|
|
41
|
+
background-color: var(--control-fill-tertiary);
|
|
42
|
+
color: var(--text-secondary);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&.disabled {
|
|
46
|
+
border-color: var(--control-stroke-default);
|
|
47
|
+
background-color: var(--control-fill-disabled);
|
|
48
|
+
color: var(--text-disabled);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&accent {
|
|
53
|
+
border: 1px solid var(--control-stroke-on-accent-default);
|
|
54
|
+
border-bottom-color: var(--control-stroke-on-accent-secondary);
|
|
55
|
+
background-color: var(--accent-default);
|
|
56
|
+
color: var(--text-on-accent-primary);
|
|
57
|
+
transition: var(--control-faster-duration) ease border-color;
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
background-color: var(--accent-secondary);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:active {
|
|
64
|
+
border-color: transparent;
|
|
65
|
+
background-color: var(--accent-tertiary);
|
|
66
|
+
color: var(--text-on-accent-secondary);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.disabled {
|
|
70
|
+
border-color: transparent;
|
|
71
|
+
background-color: var(--accent-disabled);
|
|
72
|
+
color: var(--text-on-accent-disabled);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&hyperlink {
|
|
77
|
+
background-color: var(--subtle-fill-transparent);
|
|
78
|
+
color: var(--accent-text-primary);
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
|
|
81
|
+
&:hover {
|
|
82
|
+
background-color: var(--subtle-fill-secondary);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:active {
|
|
86
|
+
background-color: var(--subtle-fill-tertiary);
|
|
87
|
+
color: var(--accent-text-tertiary);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.disabled {
|
|
91
|
+
color: var(--accent-text-disabled);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.disabled {
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
&.hide-chevron {
|
|
100
|
+
border-radius: var(--control-corner-radius);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&-chevron {
|
|
106
|
+
padding-inline: 8px;
|
|
107
|
+
height: 100%;
|
|
108
|
+
border-radius: 0 var(--control-corner-radius) var(--control-corner-radius) 0;
|
|
109
|
+
border-left-color: var(--fds-control-solid-fill-default) !important;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<script >import { get_current_component } from "svelte/internal";
|
|
2
|
+
import MenuFlyoutWrapper from "../MenuFlyout/MenuFlyoutWrapper.svelte";
|
|
3
|
+
import { createEventForwarder, focusTrap } from "../internal";
|
|
4
|
+
/** @restProps {button | a} */
|
|
5
|
+
/** Specifies the visual styling of the button. */
|
|
6
|
+
export let variant = "standard";
|
|
7
|
+
/** Sets an href value and converts the button element into an anchor/ */
|
|
8
|
+
export let href = "";
|
|
9
|
+
/** The current visibility state of the context menu. */
|
|
10
|
+
export let open = false;
|
|
11
|
+
/** Controls whether the button is intended for user interaction, and styles it accordingly. */
|
|
12
|
+
export let disabled = false;
|
|
13
|
+
/** Controls the menu's disability state. The default value is value of `disabled`. */
|
|
14
|
+
export let menuDisabled = disabled;
|
|
15
|
+
/** Whether to trap focus for flyout*/
|
|
16
|
+
export let trapFocus = true;
|
|
17
|
+
/** Controls the visibility of chevron menu button */
|
|
18
|
+
export let hideChevron = false;
|
|
19
|
+
/** Specifies the direction of the menu. */
|
|
20
|
+
export let direction = "down";
|
|
21
|
+
/** Alignment of the menu along the clickable target's given axis. */
|
|
22
|
+
export let alignment = "center";
|
|
23
|
+
/** Distance of the flyout from the control button in pixels. */
|
|
24
|
+
export let offset = 4;
|
|
25
|
+
/** Whether the use acrylic background styling for the flyout. */
|
|
26
|
+
export let acrylic = true;
|
|
27
|
+
/** Determines if the flyout can be closed using conventional user interaction. */
|
|
28
|
+
export let closable = true;
|
|
29
|
+
/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
|
|
30
|
+
export let closeOnSelect = true;
|
|
31
|
+
/** Specifies a custom class name for the button. */
|
|
32
|
+
let className = "";
|
|
33
|
+
export { className as class };
|
|
34
|
+
/** Obtains a bound DOM reference to the button or anchor element. */
|
|
35
|
+
export let element = null;
|
|
36
|
+
/** A bound DOM reference to container*/
|
|
37
|
+
export let containerElement = null;
|
|
38
|
+
/** Bound DOM reference to chevron too*/
|
|
39
|
+
export let chevronElement = null;
|
|
40
|
+
/** Bound DOM reference to menu*/
|
|
41
|
+
export let menuElement = null;
|
|
42
|
+
let menu;
|
|
43
|
+
$: _focusTrap = trapFocus ? focusTrap : () => { };
|
|
44
|
+
const forwardEvents = createEventForwarder(get_current_component());
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<!--
|
|
48
|
+
<!--
|
|
49
|
+
@component
|
|
50
|
+
A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
|
|
51
|
+
- Usage:
|
|
52
|
+
```tsx
|
|
53
|
+
<SplitButton>
|
|
54
|
+
Click me!
|
|
55
|
+
<svelte:fragment slot="flyout">
|
|
56
|
+
<MenuFlyoutItem>Item 1</MenuFlyoutItem>
|
|
57
|
+
<MenuFlyoutItem>Item 2</MenuFlyoutItem>
|
|
58
|
+
<MenuFlyoutItem>Item 3</MenuFlyoutItem>
|
|
59
|
+
</svelte:fragment>
|
|
60
|
+
</SplitButton>
|
|
61
|
+
```
|
|
62
|
+
-->
|
|
63
|
+
<div class="split-button-container" bind:this={containerElement}>
|
|
64
|
+
<svelte:element
|
|
65
|
+
this={href && !disabled ? "a" : "button"}
|
|
66
|
+
use:forwardEvents
|
|
67
|
+
bind:this={element}
|
|
68
|
+
role={href && !disabled ? "button" : undefined}
|
|
69
|
+
href={href && !disabled ? href : undefined}
|
|
70
|
+
class="split-button style-{variant} {className}"
|
|
71
|
+
tabindex={!disabled ? 0 : -1}
|
|
72
|
+
class:disabled
|
|
73
|
+
class:hide-chevron={hideChevron}
|
|
74
|
+
{disabled}
|
|
75
|
+
{...$$restProps}
|
|
76
|
+
>
|
|
77
|
+
<slot />
|
|
78
|
+
</svelte:element>
|
|
79
|
+
{#if !hideChevron}
|
|
80
|
+
{#if !menuDisabled}
|
|
81
|
+
<MenuFlyoutWrapper
|
|
82
|
+
bind:this={menu}
|
|
83
|
+
bind:element={menuElement}
|
|
84
|
+
placement={direction === "down" ? "bottom" : "top"}
|
|
85
|
+
open={menuDisabled ? false : open}
|
|
86
|
+
{alignment}
|
|
87
|
+
{offset}
|
|
88
|
+
{acrylic}
|
|
89
|
+
{closable}
|
|
90
|
+
{closeOnSelect}
|
|
91
|
+
>
|
|
92
|
+
<button
|
|
93
|
+
class={`split-button-chevron style-${variant}`}
|
|
94
|
+
class:disabled={menuDisabled}
|
|
95
|
+
bind:this={chevronElement}
|
|
96
|
+
disabled={menuDisabled}
|
|
97
|
+
aria-label="Open menu"
|
|
98
|
+
aria-haspopup="menu"
|
|
99
|
+
aria-expanded={open}
|
|
100
|
+
>
|
|
101
|
+
<svg
|
|
102
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
103
|
+
width="12"
|
|
104
|
+
height="12"
|
|
105
|
+
viewBox="0 0 12 12"
|
|
106
|
+
>
|
|
107
|
+
{#if direction === "down"}
|
|
108
|
+
<path
|
|
109
|
+
fill="currentColor"
|
|
110
|
+
d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
|
|
111
|
+
/>
|
|
112
|
+
{:else}
|
|
113
|
+
<path
|
|
114
|
+
fill="currentColor"
|
|
115
|
+
d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
|
|
116
|
+
/>
|
|
117
|
+
{/if}
|
|
118
|
+
</svg>
|
|
119
|
+
</button>
|
|
120
|
+
|
|
121
|
+
<svelte:fragment slot="flyout">
|
|
122
|
+
<slot name="flyout" />
|
|
123
|
+
</svelte:fragment>
|
|
124
|
+
</MenuFlyoutWrapper>
|
|
125
|
+
{:else}
|
|
126
|
+
<button
|
|
127
|
+
class={`split-button-chevron style-${variant}`}
|
|
128
|
+
class:disabled={menuDisabled}
|
|
129
|
+
aria-hidden="true"
|
|
130
|
+
bind:this={chevronElement}
|
|
131
|
+
disabled={menuDisabled}
|
|
132
|
+
>
|
|
133
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
|
134
|
+
{#if direction === "down"}
|
|
135
|
+
<path
|
|
136
|
+
fill="currentColor"
|
|
137
|
+
d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
|
|
138
|
+
/>
|
|
139
|
+
{:else}
|
|
140
|
+
<path
|
|
141
|
+
fill="currentColor"
|
|
142
|
+
d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
|
|
143
|
+
/>
|
|
144
|
+
{/if}
|
|
145
|
+
</svg>
|
|
146
|
+
</button>
|
|
147
|
+
{/if}
|
|
148
|
+
{/if}
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<style >.split-button{border-radius:var(--fds-control-corner-radius) 0 0 var(--fds-control-corner-radius);flex:1;padding-block:4px 6px;padding-inline:11px}.split-button-container{display:inline-flex}.split-button-container :global(button){align-items:center;border:none;box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.split-button-container :global(button):focus-visible{box-shadow:var(--fds-focus-stroke)}.split-button-container :global(button).style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.split-button-container :global(button).style-standard:hover{background-color:var(--fds-control-fill-secondary)}.split-button-container :global(button).style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.split-button-container :global(button).style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.split-button-container :global(button).style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.split-button-container :global(button).style-accent:hover{background-color:var(--fds-accent-secondary)}.split-button-container :global(button).style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.split-button-container :global(button).style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.split-button-container :global(button).style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.split-button-container :global(button).style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.split-button-container :global(button).style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.split-button-container :global(button).style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.split-button-container :global(button).disabled{pointer-events:none}.split-button-container :global(button).hide-chevron{border-radius:var(--fds-control-corner-radius)}.split-button-chevron{border-left-color:var(--fds-control-solid-fill-default)!important;border-radius:0 var(--fds-control-corner-radius) var(--fds-control-corner-radius) 0;height:100%;padding-inline:8px}</style>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
variant?: "standard" | "accent" | "hyperlink";
|
|
6
|
+
href?: string;
|
|
7
|
+
open?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
menuDisabled?: boolean;
|
|
10
|
+
trapFocus?: boolean;
|
|
11
|
+
hideChevron?: boolean;
|
|
12
|
+
direction?: "down" | "up";
|
|
13
|
+
alignment?: "start" | "center" | "end";
|
|
14
|
+
offset?: number;
|
|
15
|
+
acrylic?: boolean;
|
|
16
|
+
closable?: boolean;
|
|
17
|
+
closeOnSelect?: boolean;
|
|
18
|
+
class?: string;
|
|
19
|
+
element?: HTMLElement;
|
|
20
|
+
containerElement?: HTMLElement;
|
|
21
|
+
chevronElement?: HTMLElement;
|
|
22
|
+
menuElement?: HTMLElement;
|
|
23
|
+
};
|
|
24
|
+
events: {
|
|
25
|
+
[evt: string]: CustomEvent<any>;
|
|
26
|
+
};
|
|
27
|
+
slots: {
|
|
28
|
+
default: {};
|
|
29
|
+
flyout: {};
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export declare type SplitButtonProps = typeof __propDef.props;
|
|
33
|
+
export declare type SplitButtonEvents = typeof __propDef.events;
|
|
34
|
+
export declare type SplitButtonSlots = typeof __propDef.slots;
|
|
35
|
+
/**
|
|
36
|
+
* <!--
|
|
37
|
+
*
|
|
38
|
+
* A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
|
|
39
|
+
* - Usage:
|
|
40
|
+
* ```tsx
|
|
41
|
+
* <SplitButton>
|
|
42
|
+
* Click me!
|
|
43
|
+
* <svelte:fragment slot="flyout">
|
|
44
|
+
* <MenuFlyoutItem>Item 1</MenuFlyoutItem>
|
|
45
|
+
* <MenuFlyoutItem>Item 2</MenuFlyoutItem>
|
|
46
|
+
* <MenuFlyoutItem>Item 3</MenuFlyoutItem>
|
|
47
|
+
* </svelte:fragment>
|
|
48
|
+
* </SplitButton>
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
export default class SplitButton extends SvelteComponentTyped<SplitButtonProps, SplitButtonEvents, SplitButtonSlots> {
|
|
52
|
+
}
|
|
53
|
+
export {};
|
package/index.d.ts
CHANGED
|
@@ -38,3 +38,4 @@ export { default as GridViewItem } from "./GridView/GridViewItem.svelte";
|
|
|
38
38
|
export { default as AcrylicSurface } from "./Acrylic/AcrylicSurface.svelte";
|
|
39
39
|
export { default as SegmentedControl } from "./SegmentedControl/SegmentedControl.svelte";
|
|
40
40
|
export { default as SegmentedControlButton } from "./SegmentedControl/SegmentedControlButton.svelte";
|
|
41
|
+
export { default as SplitButton } from "./SplitButton/SplitButton.svelte";
|
package/index.js
CHANGED
|
@@ -38,3 +38,4 @@ export { default as GridViewItem } from "./GridView/GridViewItem.svelte";
|
|
|
38
38
|
export { default as AcrylicSurface } from "./Acrylic/AcrylicSurface.svelte";
|
|
39
39
|
export { default as SegmentedControl } from "./SegmentedControl/SegmentedControl.svelte";
|
|
40
40
|
export { default as SegmentedControlButton } from "./SegmentedControl/SegmentedControlButton.svelte";
|
|
41
|
+
export { default as SplitButton } from "./SplitButton/SplitButton.svelte";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluent-svelte-extra",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.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",
|
|
@@ -149,6 +149,8 @@
|
|
|
149
149
|
"./SegmentedControl/SegmentedControlButton.svelte": "./SegmentedControl/SegmentedControlButton.svelte",
|
|
150
150
|
"./Slider/Slider.scss": "./Slider/Slider.scss",
|
|
151
151
|
"./Slider/Slider.svelte": "./Slider/Slider.svelte",
|
|
152
|
+
"./SplitButton/SplitButton.scss": "./SplitButton/SplitButton.scss",
|
|
153
|
+
"./SplitButton/SplitButton.svelte": "./SplitButton/SplitButton.svelte",
|
|
152
154
|
"./switchable.css": "./switchable.css",
|
|
153
155
|
"./TeachingTip/TeachingTipSurface.scss": "./TeachingTip/TeachingTipSurface.scss",
|
|
154
156
|
"./TeachingTip/TeachingTipSurface.svelte": "./TeachingTip/TeachingTipSurface.svelte",
|