drab 2.6.0 → 2.7.0
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/dist/components/Accordion.svelte +34 -9
- package/dist/components/Accordion.svelte.d.ts +34 -9
- package/dist/components/Breakpoint.svelte +3 -1
- package/dist/components/Breakpoint.svelte.d.ts +3 -1
- package/dist/components/Chord.svelte +1 -1
- package/dist/components/Chord.svelte.d.ts +1 -1
- package/dist/components/ContextMenu.svelte +72 -47
- package/dist/components/ContextMenu.svelte.d.ts +9 -8
- package/dist/components/CopyButton.svelte +12 -4
- package/dist/components/CopyButton.svelte.d.ts +1 -1
- package/dist/components/DataTable.svelte +65 -21
- package/dist/components/DataTable.svelte.d.ts +68 -15
- package/dist/components/Editor.svelte +1 -0
- package/dist/components/FullscreenButton.svelte +20 -14
- package/dist/components/FullscreenButton.svelte.d.ts +6 -7
- package/dist/components/Popover.svelte +60 -93
- package/dist/components/Popover.svelte.d.ts +25 -32
- package/dist/components/ShareButton.svelte +11 -3
- package/dist/components/ShareButton.svelte.d.ts +1 -1
- package/dist/components/Sheet.svelte +43 -34
- package/dist/components/Sheet.svelte.d.ts +10 -8
- package/dist/components/Tabs.svelte +77 -53
- package/dist/components/Tabs.svelte.d.ts +53 -47
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/util/delay.d.ts +1 -0
- package/dist/util/delay.js +1 -0
- package/dist/util/transition.d.ts +1 -1
- package/dist/util/transition.js +1 -1
- package/package.json +1 -1
@@ -11,9 +11,8 @@ Creates a sheet element based on the `position` provided.
|
|
11
11
|
- `class`
|
12
12
|
- `display` - controls whether the sheet is displayed
|
13
13
|
- `id`
|
14
|
-
- `
|
14
|
+
- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
|
15
15
|
- `position` - determines the position of sheet
|
16
|
-
- `size` - size of sheet based on position - can also use css instead
|
17
16
|
- `transitionSheet` - slides the sheet, set to `false` to remove
|
18
17
|
- `transition` - fades the entire component, set to `false` to remove
|
19
18
|
|
@@ -33,17 +32,21 @@ Creates a sheet element based on the `position` provided.
|
|
33
32
|
</script>
|
34
33
|
|
35
34
|
<div>
|
36
|
-
<button class="btn" on:click={() => (display = true)}>
|
35
|
+
<button type="button" class="btn" on:click={() => (display = true)}>
|
36
|
+
Open
|
37
|
+
</button>
|
37
38
|
</div>
|
38
39
|
|
39
40
|
<Sheet
|
40
41
|
bind:display
|
41
|
-
class="bg-
|
42
|
+
class="bg-neutral-50/80 backdrop-blur"
|
42
43
|
classSheet="p-4 shadow bg-white"
|
43
44
|
>
|
44
45
|
<div class="mb-4 flex items-center justify-between">
|
45
|
-
<
|
46
|
-
<button class="btn" on:click={() => (display = false)}>
|
46
|
+
<h2 class="my-0">Sheet</h2>
|
47
|
+
<button type="button" class="btn btn-s" on:click={() => (display = false)}>
|
48
|
+
Close
|
49
|
+
</button>
|
47
50
|
</div>
|
48
51
|
<div>
|
49
52
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
@@ -70,15 +73,9 @@ export let classSheet = "";
|
|
70
73
|
export let display = false;
|
71
74
|
export let transition = { duration };
|
72
75
|
export let position = "right";
|
73
|
-
export let
|
76
|
+
export let maxSize = 488;
|
74
77
|
export let transitionSheet = { duration };
|
75
|
-
export let onClickClose = false;
|
76
78
|
let sheet;
|
77
|
-
const clickOutside = (e) => {
|
78
|
-
if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
|
79
|
-
display = false;
|
80
|
-
}
|
81
|
-
};
|
82
79
|
const onKeyDown = (e) => {
|
83
80
|
if (e.key === "Escape") {
|
84
81
|
display = false;
|
@@ -86,13 +83,13 @@ const onKeyDown = (e) => {
|
|
86
83
|
};
|
87
84
|
if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
|
88
85
|
if (position === "bottom") {
|
89
|
-
transitionSheet.y =
|
86
|
+
transitionSheet.y = maxSize;
|
90
87
|
} else if (position === "top") {
|
91
|
-
transitionSheet.y = -
|
88
|
+
transitionSheet.y = -maxSize;
|
92
89
|
} else if (position === "right") {
|
93
|
-
transitionSheet.x =
|
90
|
+
transitionSheet.x = maxSize;
|
94
91
|
} else {
|
95
|
-
transitionSheet.x = -
|
92
|
+
transitionSheet.x = -maxSize;
|
96
93
|
}
|
97
94
|
}
|
98
95
|
onMount(() => {
|
@@ -109,59 +106,71 @@ onMount(() => {
|
|
109
106
|
|
110
107
|
{#if display}
|
111
108
|
<div
|
112
|
-
role="button"
|
113
|
-
tabindex="0"
|
114
|
-
on:click={clickOutside}
|
115
|
-
on:keydown={onKeyDown}
|
116
109
|
transition:fade={transition ? transition : { duration: 0 }}
|
117
110
|
class="d-backdrop {className}"
|
111
|
+
class:d-backdrop-bottom={position === "bottom"}
|
112
|
+
class:d-backdrop-top={position === "top"}
|
113
|
+
class:d-backdrop-right={position === "right"}
|
118
114
|
{id}
|
119
115
|
>
|
120
116
|
<div
|
117
|
+
role="dialog"
|
121
118
|
bind:this={sheet}
|
122
119
|
transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
|
123
120
|
style={position === "top" || position === "bottom"
|
124
|
-
? `max-height: ${
|
125
|
-
: `max-width: ${
|
121
|
+
? `max-height: ${maxSize}px;`
|
122
|
+
: `max-width: ${maxSize}px`}
|
126
123
|
class="d-sheet {classSheet}"
|
127
|
-
class:d-bottom={position === "bottom"}
|
128
|
-
class:d-top={position === "top"}
|
129
|
-
class:d-left={position === "left"}
|
130
|
-
class:d-right={position === "right"}
|
124
|
+
class:d-sheet-bottom={position === "bottom"}
|
125
|
+
class:d-sheet-top={position === "top"}
|
126
|
+
class:d-sheet-left={position === "left"}
|
127
|
+
class:d-sheet-right={position === "right"}
|
131
128
|
>
|
132
129
|
<slot>Content</slot>
|
133
130
|
</div>
|
131
|
+
<button title="Close" on:click={() => (display = false)}></button>
|
134
132
|
</div>
|
135
133
|
{/if}
|
136
134
|
|
137
135
|
<style>
|
136
|
+
button {
|
137
|
+
flex-grow: 1;
|
138
|
+
}
|
138
139
|
.d-backdrop {
|
139
140
|
position: fixed;
|
140
|
-
display:
|
141
|
-
z-index:
|
141
|
+
display: flex;
|
142
|
+
z-index: 40;
|
142
143
|
top: 0;
|
143
144
|
bottom: 0;
|
144
145
|
left: 0;
|
145
146
|
right: 0;
|
146
147
|
overflow: hidden;
|
147
|
-
|
148
|
+
}
|
149
|
+
.d-backdrop-bottom {
|
150
|
+
flex-direction: column-reverse;
|
151
|
+
}
|
152
|
+
.d-backdrop-top {
|
153
|
+
flex-direction: column;
|
154
|
+
}
|
155
|
+
.d-backdrop-right {
|
156
|
+
flex-direction: row-reverse;
|
148
157
|
}
|
149
158
|
.d-sheet {
|
150
159
|
margin: auto;
|
151
160
|
}
|
152
|
-
.d-bottom {
|
161
|
+
.d-sheet-bottom {
|
153
162
|
margin-bottom: 0;
|
154
163
|
width: 100%;
|
155
164
|
}
|
156
|
-
.d-top {
|
165
|
+
.d-sheet-top {
|
157
166
|
margin-top: 0;
|
158
167
|
width: 100%;
|
159
168
|
}
|
160
|
-
.d-right {
|
169
|
+
.d-sheet-right {
|
161
170
|
margin-right: 0;
|
162
171
|
height: 100%;
|
163
172
|
}
|
164
|
-
.d-left {
|
173
|
+
.d-sheet-left {
|
165
174
|
margin-left: 0;
|
166
175
|
height: 100%;
|
167
176
|
}
|
@@ -8,9 +8,8 @@ declare const __propDef: {
|
|
8
8
|
/** controls whether the sheet is displayed*/ display?: boolean | undefined;
|
9
9
|
/** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
|
10
10
|
/** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
11
|
-
/**
|
11
|
+
/** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
|
12
12
|
/** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
|
13
|
-
/** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
|
14
13
|
};
|
15
14
|
events: {
|
16
15
|
[evt: string]: CustomEvent<any>;
|
@@ -33,9 +32,8 @@ export type SheetSlots = typeof __propDef.slots;
|
|
33
32
|
* - `class`
|
34
33
|
* - `display` - controls whether the sheet is displayed
|
35
34
|
* - `id`
|
36
|
-
* - `
|
35
|
+
* - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
|
37
36
|
* - `position` - determines the position of sheet
|
38
|
-
* - `size` - size of sheet based on position - can also use css instead
|
39
37
|
* - `transitionSheet` - slides the sheet, set to `false` to remove
|
40
38
|
* - `transition` - fades the entire component, set to `false` to remove
|
41
39
|
*
|
@@ -55,17 +53,21 @@ export type SheetSlots = typeof __propDef.slots;
|
|
55
53
|
* </script>
|
56
54
|
*
|
57
55
|
* <div>
|
58
|
-
* <button class="btn" on:click={() => (display = true)}>
|
56
|
+
* <button type="button" class="btn" on:click={() => (display = true)}>
|
57
|
+
* Open
|
58
|
+
* </button>
|
59
59
|
* </div>
|
60
60
|
*
|
61
61
|
* <Sheet
|
62
62
|
* bind:display
|
63
|
-
* class="bg-
|
63
|
+
* class="bg-neutral-50/80 backdrop-blur"
|
64
64
|
* classSheet="p-4 shadow bg-white"
|
65
65
|
* >
|
66
66
|
* <div class="mb-4 flex items-center justify-between">
|
67
|
-
* <
|
68
|
-
* <button class="btn" on:click={() => (display = false)}>
|
67
|
+
* <h2 class="my-0">Sheet</h2>
|
68
|
+
* <button type="button" class="btn btn-s" on:click={() => (display = false)}>
|
69
|
+
* Close
|
70
|
+
* </button>
|
69
71
|
* </div>
|
70
72
|
* <div>
|
71
73
|
* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
@@ -3,27 +3,28 @@
|
|
3
3
|
|
4
4
|
### Tabs
|
5
5
|
|
6
|
-
Displays tabs and the
|
6
|
+
Displays tabs and the selected tab's content.
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `activeIndex` - index of active tab, defaults to 0
|
11
|
-
- `classContent` - class of `div` that wraps the slotted content
|
12
|
-
- `classHeader` - class of the `div` that wraps the `button`s
|
13
10
|
- `classNoscript` - `noscript` class
|
14
|
-
- `
|
15
|
-
- `
|
16
|
-
- `
|
11
|
+
- `classTabActive` - class of the active tab's `button`
|
12
|
+
- `classTabInactive` - class of all the inactive tabs' `button`s
|
13
|
+
- `classTabList` - class of the `div` that wraps the `button`s
|
14
|
+
- `classTabPanel` - class of `div` that wraps the slotted content
|
15
|
+
- `classTab` - class of all title `button`s
|
17
16
|
- `class`
|
18
17
|
- `id`
|
19
|
-
- `
|
18
|
+
- `selectedIndex` - index of selected tab, defaults to `0`
|
19
|
+
- `tabs` - array of `TabsTab` objects
|
20
|
+
- `transition` - fades the panel content, set to `false` to remove
|
20
21
|
|
21
22
|
@slots
|
22
23
|
|
23
|
-
| name
|
24
|
-
|
|
25
|
-
| `
|
26
|
-
| `
|
24
|
+
| name | purpose | default value | slot props |
|
25
|
+
| ------- | ------------------ | ------------------- | ---------------------- |
|
26
|
+
| `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
|
27
|
+
| `tab` | title of each tab | `tab.tab` | `tab`, `index` |
|
27
28
|
|
28
29
|
@example
|
29
30
|
|
@@ -34,41 +35,43 @@ Displays tabs and the active tab's content.
|
|
34
35
|
</script>
|
35
36
|
|
36
37
|
<Tabs
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
38
|
+
class="mb-4"
|
39
|
+
classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
40
|
+
classTab="btn btn-s rounded-sm p-1"
|
41
|
+
classTabActive="bg-white text-neutral-950"
|
42
|
+
classTabInactive="bg-neutral-200 text-neutral-500"
|
43
|
+
classTabPanel="py-2"
|
42
44
|
tabs={[
|
43
|
-
{
|
44
|
-
{
|
45
|
+
{ tab: "Tab", panel: "Content" },
|
46
|
+
{ tab: "Another Tab", panel: "Some more content" },
|
45
47
|
]}
|
46
48
|
/>
|
47
49
|
|
48
50
|
<Tabs
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
51
|
+
classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
52
|
+
classTab="btn btn-s rounded-sm p-1"
|
53
|
+
classTabActive="bg-white text-neutral-950"
|
54
|
+
classTabInactive="bg-neutral-200 text-neutral-500"
|
55
|
+
classTabPanel="py-2"
|
54
56
|
tabs={[
|
55
|
-
{
|
57
|
+
{ tab: "Tab", panel: "Generated indexes" },
|
56
58
|
{
|
57
|
-
|
58
|
-
|
59
|
+
tab: "Tab",
|
60
|
+
panel: "A tab with a component",
|
59
61
|
data: { component: FullscreenButton },
|
60
62
|
},
|
61
63
|
]}
|
62
|
-
let:activeTab
|
63
64
|
>
|
64
|
-
<svelte:fragment slot="
|
65
|
-
{
|
65
|
+
<svelte:fragment slot="tab" let:tab let:index>
|
66
|
+
{tab.tab}
|
66
67
|
{index + 1}
|
67
68
|
</svelte:fragment>
|
68
|
-
<
|
69
|
-
|
70
|
-
|
71
|
-
|
69
|
+
<svelte:fragment slot="panel" let:selectedTab>
|
70
|
+
<div class="mb-2">{selectedTab.panel}</div>
|
71
|
+
{#if selectedTab.data?.component}
|
72
|
+
<svelte:component this={selectedTab.data.component} class="btn" />
|
73
|
+
{/if}
|
74
|
+
</svelte:fragment>
|
72
75
|
</Tabs>
|
73
76
|
```
|
74
77
|
-->
|
@@ -77,40 +80,61 @@ Displays tabs and the active tab's content.
|
|
77
80
|
|
78
81
|
<script>import { onMount } from "svelte";
|
79
82
|
import { messageNoScript } from "../util/messages";
|
83
|
+
import { fade } from "svelte/transition";
|
84
|
+
import { duration } from "../util/transition";
|
85
|
+
import { prefersReducedMotion } from "../util/accessibility";
|
80
86
|
let className = "";
|
81
87
|
export { className as class };
|
82
88
|
export let id = "";
|
83
|
-
export let
|
84
|
-
export let
|
85
|
-
export let
|
86
|
-
export let
|
89
|
+
export let classTabList = "";
|
90
|
+
export let classTab = "";
|
91
|
+
export let classTabActive = "";
|
92
|
+
export let classTabInactive = "";
|
87
93
|
export let classNoscript = "";
|
88
|
-
export let
|
94
|
+
export let classTabPanel = "";
|
89
95
|
export let tabs;
|
90
|
-
export let
|
96
|
+
export let selectedIndex = 0;
|
97
|
+
export let transition = { duration };
|
91
98
|
let clientJs = false;
|
92
|
-
|
93
|
-
|
94
|
-
|
99
|
+
onMount(() => {
|
100
|
+
if (prefersReducedMotion()) {
|
101
|
+
if (transition)
|
102
|
+
transition.duration = 0;
|
103
|
+
}
|
104
|
+
clientJs = true;
|
105
|
+
});
|
95
106
|
</script>
|
96
107
|
|
97
108
|
<div class={className} {id}>
|
98
|
-
<div class={
|
99
|
-
{#each tabs as
|
109
|
+
<div class={classTabList} role="tablist">
|
110
|
+
{#each tabs as tab, index}
|
100
111
|
<button
|
112
|
+
role="tab"
|
113
|
+
tabindex={index === selectedIndex ? 0 : -1}
|
114
|
+
aria-selected={index === selectedIndex}
|
115
|
+
aria-controls="tabpanel"
|
101
116
|
disabled={!clientJs}
|
102
|
-
class="{
|
103
|
-
?
|
104
|
-
: ''} {
|
105
|
-
on:click={() => (
|
117
|
+
class="{classTab} {selectedIndex === index
|
118
|
+
? classTabActive
|
119
|
+
: ''} {selectedIndex !== index ? classTabInactive : ''}"
|
120
|
+
on:click={() => (selectedIndex = index)}
|
106
121
|
>
|
107
|
-
<slot name="
|
122
|
+
<slot name="tab" {tab} {index}>{tab.tab}</slot>
|
108
123
|
</button>
|
109
124
|
{/each}
|
110
125
|
</div>
|
111
|
-
|
112
|
-
|
113
|
-
|
126
|
+
{#each tabs as tab, index}
|
127
|
+
{#if index === selectedIndex}
|
128
|
+
<div
|
129
|
+
class={classTabPanel}
|
130
|
+
role="tabpanel"
|
131
|
+
id="tabpanel"
|
132
|
+
in:fade={transition ? transition : { duration: 0 }}
|
133
|
+
>
|
134
|
+
<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
|
135
|
+
</div>
|
136
|
+
{/if}
|
137
|
+
{/each}
|
114
138
|
<noscript>
|
115
139
|
<div class={classNoscript}>{messageNoScript}</div>
|
116
140
|
</noscript>
|
@@ -1,35 +1,38 @@
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
2
2
|
export interface TabsTab<T = any> {
|
3
3
|
/** tab title, displayed in `button` element */
|
4
|
-
|
4
|
+
tab?: string;
|
5
5
|
/** slotted content, displayed once tab is clicked */
|
6
|
-
|
6
|
+
panel?: string;
|
7
7
|
/** any data to pass back to the parent */
|
8
8
|
data?: T;
|
9
9
|
}
|
10
|
+
import { type FadeParams } from "svelte/transition";
|
10
11
|
declare const __propDef: {
|
11
12
|
props: {
|
12
13
|
class?: string | undefined;
|
13
14
|
id?: string | undefined;
|
14
|
-
/** class of the `div` that wraps the `button`s */
|
15
|
-
/** class of all title `button`s */
|
16
|
-
/** class of the active tab's `button` */
|
17
|
-
/** class of all the inactive tabs' `button`s */
|
15
|
+
/** class of the `div` that wraps the `button`s */ classTabList?: string | undefined;
|
16
|
+
/** class of all title `button`s */ classTab?: string | undefined;
|
17
|
+
/** class of the active tab's `button` */ classTabActive?: string | undefined;
|
18
|
+
/** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
|
18
19
|
/** `noscript` class */ classNoscript?: string | undefined;
|
19
|
-
/** class of `div` that wraps the slotted content */
|
20
|
-
/** array of
|
21
|
-
/** index of
|
20
|
+
/** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
|
21
|
+
/** array of `TabsTab` objects */ tabs: TabsTab[];
|
22
|
+
/** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
|
23
|
+
/** fades the panel content, set to `false` to remove */ transition?: false | FadeParams | undefined;
|
22
24
|
};
|
23
25
|
events: {
|
24
26
|
[evt: string]: CustomEvent<any>;
|
25
27
|
};
|
26
28
|
slots: {
|
27
|
-
|
28
|
-
|
29
|
+
tab: {
|
30
|
+
tab: TabsTab<any>;
|
29
31
|
index: any;
|
30
32
|
};
|
31
|
-
|
32
|
-
|
33
|
+
panel: {
|
34
|
+
selectedTab: TabsTab<any>;
|
35
|
+
index: any;
|
33
36
|
};
|
34
37
|
};
|
35
38
|
};
|
@@ -39,27 +42,28 @@ export type TabsSlots = typeof __propDef.slots;
|
|
39
42
|
/**
|
40
43
|
* ### Tabs
|
41
44
|
*
|
42
|
-
* Displays tabs and the
|
45
|
+
* Displays tabs and the selected tab's content.
|
43
46
|
*
|
44
47
|
* @props
|
45
48
|
*
|
46
|
-
* - `activeIndex` - index of active tab, defaults to 0
|
47
|
-
* - `classContent` - class of `div` that wraps the slotted content
|
48
|
-
* - `classHeader` - class of the `div` that wraps the `button`s
|
49
49
|
* - `classNoscript` - `noscript` class
|
50
|
-
* - `
|
51
|
-
* - `
|
52
|
-
* - `
|
50
|
+
* - `classTabActive` - class of the active tab's `button`
|
51
|
+
* - `classTabInactive` - class of all the inactive tabs' `button`s
|
52
|
+
* - `classTabList` - class of the `div` that wraps the `button`s
|
53
|
+
* - `classTabPanel` - class of `div` that wraps the slotted content
|
54
|
+
* - `classTab` - class of all title `button`s
|
53
55
|
* - `class`
|
54
56
|
* - `id`
|
55
|
-
* - `
|
57
|
+
* - `selectedIndex` - index of selected tab, defaults to `0`
|
58
|
+
* - `tabs` - array of `TabsTab` objects
|
59
|
+
* - `transition` - fades the panel content, set to `false` to remove
|
56
60
|
*
|
57
61
|
* @slots
|
58
62
|
*
|
59
|
-
* | name
|
60
|
-
* |
|
61
|
-
* | `
|
62
|
-
* | `
|
63
|
+
* | name | purpose | default value | slot props |
|
64
|
+
* | ------- | ------------------ | ------------------- | ---------------------- |
|
65
|
+
* | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
|
66
|
+
* | `tab` | title of each tab | `tab.tab` | `tab`, `index` |
|
63
67
|
*
|
64
68
|
* @example
|
65
69
|
*
|
@@ -70,41 +74,43 @@ export type TabsSlots = typeof __propDef.slots;
|
|
70
74
|
* </script>
|
71
75
|
*
|
72
76
|
* <Tabs
|
73
|
-
*
|
74
|
-
*
|
75
|
-
*
|
76
|
-
*
|
77
|
-
*
|
77
|
+
* class="mb-4"
|
78
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
79
|
+
* classTab="btn btn-s rounded-sm p-1"
|
80
|
+
* classTabActive="bg-white text-neutral-950"
|
81
|
+
* classTabInactive="bg-neutral-200 text-neutral-500"
|
82
|
+
* classTabPanel="py-2"
|
78
83
|
* tabs={[
|
79
|
-
* {
|
80
|
-
* {
|
84
|
+
* { tab: "Tab", panel: "Content" },
|
85
|
+
* { tab: "Another Tab", panel: "Some more content" },
|
81
86
|
* ]}
|
82
87
|
* />
|
83
88
|
*
|
84
89
|
* <Tabs
|
85
|
-
*
|
86
|
-
*
|
87
|
-
*
|
88
|
-
*
|
89
|
-
*
|
90
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
91
|
+
* classTab="btn btn-s rounded-sm p-1"
|
92
|
+
* classTabActive="bg-white text-neutral-950"
|
93
|
+
* classTabInactive="bg-neutral-200 text-neutral-500"
|
94
|
+
* classTabPanel="py-2"
|
90
95
|
* tabs={[
|
91
|
-
* {
|
96
|
+
* { tab: "Tab", panel: "Generated indexes" },
|
92
97
|
* {
|
93
|
-
*
|
94
|
-
*
|
98
|
+
* tab: "Tab",
|
99
|
+
* panel: "A tab with a component",
|
95
100
|
* data: { component: FullscreenButton },
|
96
101
|
* },
|
97
102
|
* ]}
|
98
|
-
* let:activeTab
|
99
103
|
* >
|
100
|
-
* <svelte:fragment slot="
|
101
|
-
* {
|
104
|
+
* <svelte:fragment slot="tab" let:tab let:index>
|
105
|
+
* {tab.tab}
|
102
106
|
* {index + 1}
|
103
107
|
* </svelte:fragment>
|
104
|
-
* <
|
105
|
-
* {
|
106
|
-
*
|
107
|
-
* {
|
108
|
+
* <svelte:fragment slot="panel" let:selectedTab>
|
109
|
+
* <div class="mb-2">{selectedTab.panel}</div>
|
110
|
+
* {#if selectedTab.data?.component}
|
111
|
+
* <svelte:component this={selectedTab.data.component} class="btn" />
|
112
|
+
* {/if}
|
113
|
+
* </svelte:fragment>
|
108
114
|
* </Tabs>
|
109
115
|
* ```
|
110
116
|
*/
|
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import Accordion from "./components/Accordion.svelte";
|
2
2
|
import type { AccordionItem } from "./components/Accordion.svelte";
|
3
|
+
import Breakpoint from "./components/Breakpoint.svelte";
|
3
4
|
import Chord from "./components/Chord.svelte";
|
4
5
|
import type { ChordNote } from "./components/Chord.svelte";
|
5
6
|
import ContextMenu from "./components/ContextMenu.svelte";
|
@@ -15,4 +16,4 @@ import Sheet from "./components/Sheet.svelte";
|
|
15
16
|
import Tabs from "./components/Tabs.svelte";
|
16
17
|
import type { TabsTab } from "./components/Tabs.svelte";
|
17
18
|
import YouTube from "./components/YouTube.svelte";
|
18
|
-
export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };
|
19
|
+
export { Accordion, type AccordionItem, Breakpoint, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };
|
package/dist/index.js
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import Accordion from "./components/Accordion.svelte";
|
2
|
+
import Breakpoint from "./components/Breakpoint.svelte";
|
2
3
|
import Chord from "./components/Chord.svelte";
|
3
4
|
import ContextMenu from "./components/ContextMenu.svelte";
|
4
5
|
import CopyButton from "./components/CopyButton.svelte";
|
@@ -10,4 +11,4 @@ import ShareButton from "./components/ShareButton.svelte";
|
|
10
11
|
import Sheet from "./components/Sheet.svelte";
|
11
12
|
import Tabs from "./components/Tabs.svelte";
|
12
13
|
import YouTube from "./components/YouTube.svelte";
|
13
|
-
export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
|
14
|
+
export { Accordion, Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const delay = 800;
|
@@ -0,0 +1 @@
|
|
1
|
+
export const delay = 800;
|
@@ -1 +1 @@
|
|
1
|
-
export declare const duration =
|
1
|
+
export declare const duration = 150;
|
package/dist/util/transition.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const duration =
|
1
|
+
export const duration = 150;
|