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.
@@ -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 tabs */ tabs: TabsTab[];
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
- item: TabsTab<any>;
30
+ tab: TabsTab<any>;
29
31
  index: any;
30
32
  };
31
- default: {
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 active tab's content.
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 tabs
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 | 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
+ * | 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 rounded-sm p-1"
76
- * classTabActive="bg-white text-neutral-950"
77
- * classTabInactive="bg-neutral-200 text-neutral-500"
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 rounded-sm p-1"
88
- * classTabActive="bg-white text-neutral-950"
89
- * classTabInactive="bg-neutral-200 text-neutral-500"
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:item let:index>
102
- * {item.tab}
104
+ * <svelte:fragment slot="tab" let:tab let:index>
105
+ * {tab.tab}
103
106
  * {index + 1}
104
107
  * </svelte:fragment>
105
- * <div class="mb-2">{selectedTab.panel}</div>
106
- * {#if selectedTab.data?.component}
107
- * <svelte:component this={selectedTab.data.component} class="btn" />
108
- * {/if}
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
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.6.1",
3
+ "version": "2.8.0",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",