drab 2.6.0 → 2.6.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.
- package/dist/components/Accordion.svelte +1 -2
- package/dist/components/Accordion.svelte.d.ts +1 -2
- package/dist/components/Breakpoint.svelte +13 -1
- package/dist/components/Breakpoint.svelte.d.ts +13 -1
- package/dist/components/Chord.svelte +1 -1
- package/dist/components/Chord.svelte.d.ts +1 -1
- package/dist/components/ContextMenu.svelte +74 -45
- package/dist/components/ContextMenu.svelte.d.ts +9 -6
- package/dist/components/CopyButton.svelte +11 -3
- package/dist/components/DataTable.svelte +1 -1
- package/dist/components/DataTable.svelte.d.ts +1 -1
- package/dist/components/Editor.svelte +1 -0
- package/dist/components/FullscreenButton.svelte +18 -11
- package/dist/components/FullscreenButton.svelte.d.ts +4 -4
- package/dist/components/Popover.svelte +59 -92
- package/dist/components/Popover.svelte.d.ts +24 -31
- package/dist/components/ShareButton.svelte +10 -2
- package/dist/components/Sheet.svelte +17 -6
- package/dist/components/Sheet.svelte.d.ts +16 -6
- package/dist/components/Tabs.svelte +51 -46
- package/dist/components/Tabs.svelte.d.ts +42 -41
- 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
@@ -1,9 +1,9 @@
|
|
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
|
}
|
@@ -11,25 +11,25 @@ declare const __propDef: {
|
|
11
11
|
props: {
|
12
12
|
class?: string | undefined;
|
13
13
|
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 */
|
14
|
+
/** class of the `div` that wraps the `button`s */ classTabList?: string | undefined;
|
15
|
+
/** class of all title `button`s */ classTab?: string | undefined;
|
16
|
+
/** class of the active tab's `button` */ classTabActive?: string | undefined;
|
17
|
+
/** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
|
18
18
|
/** `noscript` class */ classNoscript?: string | undefined;
|
19
|
-
/** class of `div` that wraps the slotted content */
|
19
|
+
/** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
|
20
20
|
/** array of tabs */ tabs: TabsTab[];
|
21
|
-
/** index of
|
21
|
+
/** index of selected tab, defaults to 0 */ selectedIndex?: number | undefined;
|
22
22
|
};
|
23
23
|
events: {
|
24
24
|
[evt: string]: CustomEvent<any>;
|
25
25
|
};
|
26
26
|
slots: {
|
27
|
-
|
27
|
+
tab: {
|
28
28
|
item: TabsTab<any>;
|
29
29
|
index: any;
|
30
30
|
};
|
31
31
|
default: {
|
32
|
-
|
32
|
+
selectedTab: TabsTab<any>;
|
33
33
|
};
|
34
34
|
};
|
35
35
|
};
|
@@ -43,23 +43,23 @@ export type TabsSlots = typeof __propDef.slots;
|
|
43
43
|
*
|
44
44
|
* @props
|
45
45
|
*
|
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
46
|
* - `classNoscript` - `noscript` class
|
50
|
-
* - `
|
51
|
-
* - `
|
52
|
-
* - `
|
47
|
+
* - `classTabActive` - class of the active tab's `button`
|
48
|
+
* - `classTabInactive` - class of all the inactive tabs' `button`s
|
49
|
+
* - `classTabList` - class of the `div` that wraps the `button`s
|
50
|
+
* - `classTabPanel` - class of `div` that wraps the slotted content
|
51
|
+
* - `classTab` - class of all title `button`s
|
53
52
|
* - `class`
|
54
53
|
* - `id`
|
54
|
+
* - `selectedIndex` - index of selected tab, defaults to 0
|
55
55
|
* - `tabs` - array of tabs
|
56
56
|
*
|
57
57
|
* @slots
|
58
58
|
*
|
59
|
-
* | name | purpose | default value
|
60
|
-
* | --------- | --------------------- |
|
61
|
-
* | `default` | active item's content | `activeItem.
|
62
|
-
* | `
|
59
|
+
* | name | purpose | default value | slot props |
|
60
|
+
* | --------- | --------------------- | ------------------ | --------------- |
|
61
|
+
* | `default` | active item's content | `activeItem.panel` | `activeItem` |
|
62
|
+
* | `tab` | title of each tab | `item.tab` | `item`, `index` |
|
63
63
|
*
|
64
64
|
* @example
|
65
65
|
*
|
@@ -70,40 +70,41 @@ export type TabsSlots = typeof __propDef.slots;
|
|
70
70
|
* </script>
|
71
71
|
*
|
72
72
|
* <Tabs
|
73
|
-
*
|
74
|
-
*
|
75
|
-
*
|
76
|
-
*
|
77
|
-
*
|
73
|
+
* class="mb-4"
|
74
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
75
|
+
* classTab="btn btn-s rounded-sm p-1"
|
76
|
+
* classTabActive="bg-white text-neutral-950"
|
77
|
+
* classTabInactive="bg-neutral-200 text-neutral-500"
|
78
|
+
* classTabPanel="py-2"
|
78
79
|
* tabs={[
|
79
|
-
* {
|
80
|
-
* {
|
80
|
+
* { tab: "Tab", panel: "Content" },
|
81
|
+
* { tab: "Another Tab", panel: "Some more content" },
|
81
82
|
* ]}
|
82
83
|
* />
|
83
84
|
*
|
84
85
|
* <Tabs
|
85
|
-
*
|
86
|
-
*
|
87
|
-
*
|
88
|
-
*
|
89
|
-
*
|
86
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
87
|
+
* classTab="btn btn-s rounded-sm p-1"
|
88
|
+
* classTabActive="bg-white text-neutral-950"
|
89
|
+
* classTabInactive="bg-neutral-200 text-neutral-500"
|
90
|
+
* classTabPanel="py-2"
|
90
91
|
* tabs={[
|
91
|
-
* {
|
92
|
+
* { tab: "Tab", panel: "Generated indexes" },
|
92
93
|
* {
|
93
|
-
*
|
94
|
-
*
|
94
|
+
* tab: "Tab",
|
95
|
+
* panel: "A tab with a component",
|
95
96
|
* data: { component: FullscreenButton },
|
96
97
|
* },
|
97
98
|
* ]}
|
98
|
-
* let:
|
99
|
+
* let:selectedTab
|
99
100
|
* >
|
100
|
-
* <svelte:fragment slot="
|
101
|
-
* {item.
|
101
|
+
* <svelte:fragment slot="tab" let:item let:index>
|
102
|
+
* {item.tab}
|
102
103
|
* {index + 1}
|
103
104
|
* </svelte:fragment>
|
104
|
-
* <div>{
|
105
|
-
* {#if
|
106
|
-
* <svelte:component this={
|
105
|
+
* <div class="mb-2">{selectedTab.panel}</div>
|
106
|
+
* {#if selectedTab.data?.component}
|
107
|
+
* <svelte:component this={selectedTab.data.component} class="btn" />
|
107
108
|
* {/if}
|
108
109
|
* </Tabs>
|
109
110
|
* ```
|
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;
|