fluent-svelte-extra 2.0.3 → 2.0.4
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/SplitButton/SplitButton.scss +107 -0
- package/SplitButton/SplitButton.svelte +137 -0
- package/SplitButton/SplitButton.svelte.d.ts +43 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +3 -1
|
@@ -0,0 +1,107 @@
|
|
|
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
|
+
|
|
8
|
+
&-container {
|
|
9
|
+
@include flex($inline: true);
|
|
10
|
+
& :global(button) {
|
|
11
|
+
@include flex($inline: true, $align: center, $justify: center);
|
|
12
|
+
@include typography-body;
|
|
13
|
+
|
|
14
|
+
position: relative;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
transition: var(--control-faster-duration) ease background;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
border: none;
|
|
19
|
+
outline: none;
|
|
20
|
+
cursor: default;
|
|
21
|
+
|
|
22
|
+
&:focus-visible {
|
|
23
|
+
box-shadow: var(--focus-stroke);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.style- {
|
|
27
|
+
&standard {
|
|
28
|
+
border: 1px solid;
|
|
29
|
+
border-color: var(--control-border-default);
|
|
30
|
+
background-color: var(--control-fill-default);
|
|
31
|
+
color: var(--text-primary);
|
|
32
|
+
background-clip: padding-box;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
background-color: var(--control-fill-secondary);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:active {
|
|
39
|
+
border-color: var(--control-stroke-default);
|
|
40
|
+
background-color: var(--control-fill-tertiary);
|
|
41
|
+
color: var(--text-secondary);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.disabled {
|
|
45
|
+
border-color: var(--control-stroke-default);
|
|
46
|
+
background-color: var(--control-fill-disabled);
|
|
47
|
+
color: var(--text-disabled);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&accent {
|
|
52
|
+
border: 1px solid var(--control-stroke-on-accent-default);
|
|
53
|
+
border-bottom-color: var(--control-stroke-on-accent-secondary);
|
|
54
|
+
background-color: var(--accent-default);
|
|
55
|
+
color: var(--text-on-accent-primary);
|
|
56
|
+
transition: var(--control-faster-duration) ease border-color;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
background-color: var(--accent-secondary);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:active {
|
|
63
|
+
border-color: transparent;
|
|
64
|
+
background-color: var(--accent-tertiary);
|
|
65
|
+
color: var(--text-on-accent-secondary);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.disabled {
|
|
69
|
+
border-color: transparent;
|
|
70
|
+
background-color: var(--accent-disabled);
|
|
71
|
+
color: var(--text-on-accent-disabled);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&hyperlink {
|
|
76
|
+
background-color: var(--subtle-fill-transparent);
|
|
77
|
+
color: var(--accent-text-primary);
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
|
|
80
|
+
&:hover {
|
|
81
|
+
background-color: var(--subtle-fill-secondary);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:active {
|
|
85
|
+
background-color: var(--subtle-fill-tertiary);
|
|
86
|
+
color: var(--accent-text-tertiary);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&.disabled {
|
|
90
|
+
color: var(--accent-text-disabled);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.disabled {
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&-chevron {
|
|
102
|
+
padding-inline: 8px;
|
|
103
|
+
height: 100%;
|
|
104
|
+
border-radius: 0 var(--control-corner-radius) var(--control-corner-radius) 0;
|
|
105
|
+
border-left-color: var(--fds-control-solid-fill-default) !important;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<script >import { get_current_component } from "svelte/internal";
|
|
2
|
+
import MenuFlyoutWrapper from "../MenuFlyout/MenuFlyoutWrapper.svelte";
|
|
3
|
+
import { createEventForwarder } 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. */
|
|
14
|
+
export let menuDisabled = disabled;
|
|
15
|
+
/** Controls the visibility of chevron menu button */
|
|
16
|
+
export let showChevron = true;
|
|
17
|
+
/** Specifies the direction of the menu. */
|
|
18
|
+
export let direction = "down";
|
|
19
|
+
/** Alignment of the menu along the clickable target's given axis. */
|
|
20
|
+
export let alignment = "center";
|
|
21
|
+
/** Distance of the flyout from the control button in pixels. */
|
|
22
|
+
export let offset = 4;
|
|
23
|
+
/** Whether the use acrylic background styling for the flyout. */
|
|
24
|
+
export let acrylic = true;
|
|
25
|
+
/** Determines if the flyout can be closed using conventional user interaction. */
|
|
26
|
+
export let closable = true;
|
|
27
|
+
/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
|
|
28
|
+
export let closeOnSelect = true;
|
|
29
|
+
/** Specifies a custom class name for the button. */
|
|
30
|
+
let className = "";
|
|
31
|
+
export { className as class };
|
|
32
|
+
/** Obtains a bound DOM reference to the button or anchor element. */
|
|
33
|
+
export let element = null;
|
|
34
|
+
/** A bound DOM reference to container*/
|
|
35
|
+
export let containerElement = null;
|
|
36
|
+
/** Bound DOM reference to chevron too*/
|
|
37
|
+
export let chevronElement = null;
|
|
38
|
+
/** Bound DOM reference to menu*/
|
|
39
|
+
export let menuElement = null;
|
|
40
|
+
let menu;
|
|
41
|
+
const forwardEvents = createEventForwarder(get_current_component());
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<!--
|
|
45
|
+
@component
|
|
46
|
+
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)
|
|
47
|
+
- Usage:
|
|
48
|
+
```tsx
|
|
49
|
+
<SplitButton>Click me!</SplitButton>
|
|
50
|
+
```
|
|
51
|
+
-->
|
|
52
|
+
<div class="split-button-container" bind:this={containerElement}>
|
|
53
|
+
<svelte:element
|
|
54
|
+
this={href && !disabled ? "a" : "button"}
|
|
55
|
+
use:forwardEvents
|
|
56
|
+
bind:this={element}
|
|
57
|
+
role={href && !disabled ? "button" : undefined}
|
|
58
|
+
href={href && !disabled ? href : undefined}
|
|
59
|
+
class="split-button style-{variant} {className}"
|
|
60
|
+
tabindex={!disabled ? 0 : -1}
|
|
61
|
+
class:disabled
|
|
62
|
+
{disabled}
|
|
63
|
+
{...$$restProps}
|
|
64
|
+
>
|
|
65
|
+
<slot />
|
|
66
|
+
</svelte:element>
|
|
67
|
+
{#if showChevron}
|
|
68
|
+
{#if !menuDisabled}
|
|
69
|
+
<MenuFlyoutWrapper
|
|
70
|
+
bind:this={menu}
|
|
71
|
+
bind:element={menuElement}
|
|
72
|
+
placement={direction === "down" ? "bottom" : "top"}
|
|
73
|
+
open={menuDisabled ? false : open}
|
|
74
|
+
{alignment}
|
|
75
|
+
{offset}
|
|
76
|
+
{acrylic}
|
|
77
|
+
{closable}
|
|
78
|
+
{closeOnSelect}
|
|
79
|
+
>
|
|
80
|
+
<button
|
|
81
|
+
class={`split-button-chevron style-${variant}`}
|
|
82
|
+
class:disabled={menuDisabled}
|
|
83
|
+
aria-hidden="true"
|
|
84
|
+
bind:this={chevronElement}
|
|
85
|
+
disabled={menuDisabled}
|
|
86
|
+
>
|
|
87
|
+
<svg
|
|
88
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
89
|
+
width="12"
|
|
90
|
+
height="12"
|
|
91
|
+
viewBox="0 0 12 12"
|
|
92
|
+
>
|
|
93
|
+
{#if direction === "down"}
|
|
94
|
+
<path
|
|
95
|
+
fill="currentColor"
|
|
96
|
+
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"
|
|
97
|
+
/>
|
|
98
|
+
{:else}
|
|
99
|
+
<path
|
|
100
|
+
fill="currentColor"
|
|
101
|
+
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"
|
|
102
|
+
/>
|
|
103
|
+
{/if}
|
|
104
|
+
</svg>
|
|
105
|
+
</button>
|
|
106
|
+
|
|
107
|
+
<svelte:fragment slot="flyout">
|
|
108
|
+
<slot name="flyout" />
|
|
109
|
+
</svelte:fragment>
|
|
110
|
+
</MenuFlyoutWrapper>
|
|
111
|
+
{:else}
|
|
112
|
+
<button
|
|
113
|
+
class={`split-button-chevron style-${variant}`}
|
|
114
|
+
class:disabled={menuDisabled}
|
|
115
|
+
aria-hidden="true"
|
|
116
|
+
bind:this={chevronElement}
|
|
117
|
+
disabled={menuDisabled}
|
|
118
|
+
>
|
|
119
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
|
120
|
+
{#if direction === "down"}
|
|
121
|
+
<path
|
|
122
|
+
fill="currentColor"
|
|
123
|
+
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"
|
|
124
|
+
/>
|
|
125
|
+
{:else}
|
|
126
|
+
<path
|
|
127
|
+
fill="currentColor"
|
|
128
|
+
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"
|
|
129
|
+
/>
|
|
130
|
+
{/if}
|
|
131
|
+
</svg>
|
|
132
|
+
</button>
|
|
133
|
+
{/if}
|
|
134
|
+
{/if}
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<style >.split-button{border-radius:var(--fds-control-corner-radius) 0 0 var(--fds-control-corner-radius);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-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,43 @@
|
|
|
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
|
+
showChevron?: boolean;
|
|
11
|
+
direction?: "down" | "up";
|
|
12
|
+
alignment?: "start" | "center" | "end";
|
|
13
|
+
offset?: number;
|
|
14
|
+
acrylic?: boolean;
|
|
15
|
+
closable?: boolean;
|
|
16
|
+
closeOnSelect?: boolean;
|
|
17
|
+
class?: string;
|
|
18
|
+
element?: HTMLElement;
|
|
19
|
+
containerElement?: HTMLElement;
|
|
20
|
+
chevronElement?: HTMLElement;
|
|
21
|
+
menuElement?: HTMLElement;
|
|
22
|
+
};
|
|
23
|
+
events: {
|
|
24
|
+
[evt: string]: CustomEvent<any>;
|
|
25
|
+
};
|
|
26
|
+
slots: {
|
|
27
|
+
default: {};
|
|
28
|
+
flyout: {};
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export declare type SplitButtonProps = typeof __propDef.props;
|
|
32
|
+
export declare type SplitButtonEvents = typeof __propDef.events;
|
|
33
|
+
export declare type SplitButtonSlots = typeof __propDef.slots;
|
|
34
|
+
/**
|
|
35
|
+
* 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)
|
|
36
|
+
* - Usage:
|
|
37
|
+
* ```tsx
|
|
38
|
+
* <SplitButton>Click me!</SplitButton>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export default class SplitButton extends SvelteComponentTyped<SplitButtonProps, SplitButtonEvents, SplitButtonSlots> {
|
|
42
|
+
}
|
|
43
|
+
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.4",
|
|
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",
|