drab 2.6.1 → 2.8.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 +37 -11
- package/dist/components/Accordion.svelte.d.ts +35 -9
- package/dist/components/Breakpoint.svelte +1 -11
- package/dist/components/Breakpoint.svelte.d.ts +1 -11
- package/dist/components/ContextMenu.svelte +0 -4
- package/dist/components/ContextMenu.svelte.d.ts +0 -2
- package/dist/components/CopyButton.svelte +1 -1
- package/dist/components/CopyButton.svelte.d.ts +1 -1
- package/dist/components/DataTable.svelte +89 -30
- package/dist/components/DataTable.svelte.d.ts +70 -14
- package/dist/components/FullscreenButton.svelte +2 -3
- package/dist/components/FullscreenButton.svelte.d.ts +2 -3
- package/dist/components/Popover.svelte +3 -3
- package/dist/components/Popover.svelte.d.ts +1 -1
- package/dist/components/ShareButton.svelte +72 -22
- package/dist/components/ShareButton.svelte.d.ts +44 -13
- package/dist/components/Sheet.svelte +29 -54
- package/dist/components/Sheet.svelte.d.ts +7 -15
- package/dist/components/Tabs.svelte +48 -31
- package/dist/components/Tabs.svelte.d.ts +31 -26
- package/package.json +1 -1
@@ -7,6 +7,7 @@ export interface TabsTab<T = any> {
|
|
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;
|
@@ -17,19 +18,21 @@ declare const __propDef: {
|
|
17
18
|
/** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
|
18
19
|
/** `noscript` class */ classNoscript?: string | undefined;
|
19
20
|
/** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
|
20
|
-
/** array of
|
21
|
-
/** index of selected tab, defaults to 0 */ selectedIndex?: number | 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
29
|
tab: {
|
28
|
-
|
30
|
+
tab: TabsTab<any>;
|
29
31
|
index: any;
|
30
32
|
};
|
31
|
-
|
33
|
+
panel: {
|
32
34
|
selectedTab: TabsTab<any>;
|
35
|
+
index: any;
|
33
36
|
};
|
34
37
|
};
|
35
38
|
};
|
@@ -39,7 +42,7 @@ 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
|
*
|
@@ -51,15 +54,16 @@ export type TabsSlots = typeof __propDef.slots;
|
|
51
54
|
* - `classTab` - class of all title `button`s
|
52
55
|
* - `class`
|
53
56
|
* - `id`
|
54
|
-
* - `selectedIndex` - index of selected tab, defaults to 0
|
55
|
-
* - `tabs` - array of
|
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
|
-
* | `tab`
|
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
|
*
|
@@ -71,10 +75,10 @@ export type TabsSlots = typeof __propDef.slots;
|
|
71
75
|
*
|
72
76
|
* <Tabs
|
73
77
|
* 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
|
76
|
-
* classTabActive="bg-white text-neutral-950"
|
77
|
-
* classTabInactive="bg-neutral-200 text-neutral-
|
78
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
|
79
|
+
* classTab="btn btn-s p-2"
|
80
|
+
* classTabActive="bg-white text-neutral-950 shadow"
|
81
|
+
* classTabInactive="bg-neutral-200 text-neutral-600"
|
78
82
|
* classTabPanel="py-2"
|
79
83
|
* tabs={[
|
80
84
|
* { tab: "Tab", panel: "Content" },
|
@@ -83,10 +87,10 @@ export type TabsSlots = typeof __propDef.slots;
|
|
83
87
|
* />
|
84
88
|
*
|
85
89
|
* <Tabs
|
86
|
-
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
87
|
-
* classTab="btn btn-s
|
88
|
-
* classTabActive="bg-white text-neutral-950"
|
89
|
-
* classTabInactive="bg-neutral-200 text-neutral-
|
90
|
+
* classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
|
91
|
+
* classTab="btn btn-s p-2"
|
92
|
+
* classTabActive="bg-white text-neutral-950 shadow"
|
93
|
+
* classTabInactive="bg-neutral-200 text-neutral-600"
|
90
94
|
* classTabPanel="py-2"
|
91
95
|
* tabs={[
|
92
96
|
* { tab: "Tab", panel: "Generated indexes" },
|
@@ -96,16 +100,17 @@ export type TabsSlots = typeof __propDef.slots;
|
|
96
100
|
* data: { component: FullscreenButton },
|
97
101
|
* },
|
98
102
|
* ]}
|
99
|
-
* let:selectedTab
|
100
103
|
* >
|
101
|
-
* <svelte:fragment slot="tab" let:
|
102
|
-
* {
|
104
|
+
* <svelte:fragment slot="tab" let:tab let:index>
|
105
|
+
* {tab.tab}
|
103
106
|
* {index + 1}
|
104
107
|
* </svelte:fragment>
|
105
|
-
* <
|
106
|
-
* {
|
107
|
-
*
|
108
|
-
* {
|
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>
|
109
114
|
* </Tabs>
|
110
115
|
* ```
|
111
116
|
*/
|