drab 2.5.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 +71 -0
- package/dist/components/Breakpoint.svelte.d.ts +58 -0
- 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 +123 -110
- package/dist/components/Sheet.svelte.d.ts +18 -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 +3 -3
@@ -7,23 +7,23 @@ Displays tabs and the active 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`
|
18
|
+
- `selectedIndex` - index of selected tab, defaults to 0
|
19
19
|
- `tabs` - array of tabs
|
20
20
|
|
21
21
|
@slots
|
22
22
|
|
23
|
-
| name | purpose | default value
|
24
|
-
| --------- | --------------------- |
|
25
|
-
| `default` | active item's content | `activeItem.
|
26
|
-
| `
|
23
|
+
| name | purpose | default value | slot props |
|
24
|
+
| --------- | --------------------- | ------------------ | --------------- |
|
25
|
+
| `default` | active item's content | `activeItem.panel` | `activeItem` |
|
26
|
+
| `tab` | title of each tab | `item.tab` | `item`, `index` |
|
27
27
|
|
28
28
|
@example
|
29
29
|
|
@@ -34,40 +34,41 @@ Displays tabs and the active tab's content.
|
|
34
34
|
</script>
|
35
35
|
|
36
36
|
<Tabs
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
class="mb-4"
|
38
|
+
classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
39
|
+
classTab="btn btn-s rounded-sm p-1"
|
40
|
+
classTabActive="bg-white text-neutral-950"
|
41
|
+
classTabInactive="bg-neutral-200 text-neutral-500"
|
42
|
+
classTabPanel="py-2"
|
42
43
|
tabs={[
|
43
|
-
{
|
44
|
-
{
|
44
|
+
{ tab: "Tab", panel: "Content" },
|
45
|
+
{ tab: "Another Tab", panel: "Some more content" },
|
45
46
|
]}
|
46
47
|
/>
|
47
48
|
|
48
49
|
<Tabs
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
50
|
+
classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
|
51
|
+
classTab="btn btn-s rounded-sm p-1"
|
52
|
+
classTabActive="bg-white text-neutral-950"
|
53
|
+
classTabInactive="bg-neutral-200 text-neutral-500"
|
54
|
+
classTabPanel="py-2"
|
54
55
|
tabs={[
|
55
|
-
{
|
56
|
+
{ tab: "Tab", panel: "Generated indexes" },
|
56
57
|
{
|
57
|
-
|
58
|
-
|
58
|
+
tab: "Tab",
|
59
|
+
panel: "A tab with a component",
|
59
60
|
data: { component: FullscreenButton },
|
60
61
|
},
|
61
62
|
]}
|
62
|
-
let:
|
63
|
+
let:selectedTab
|
63
64
|
>
|
64
|
-
<svelte:fragment slot="
|
65
|
-
{item.
|
65
|
+
<svelte:fragment slot="tab" let:item let:index>
|
66
|
+
{item.tab}
|
66
67
|
{index + 1}
|
67
68
|
</svelte:fragment>
|
68
|
-
<div>{
|
69
|
-
{#if
|
70
|
-
<svelte:component this={
|
69
|
+
<div class="mb-2">{selectedTab.panel}</div>
|
70
|
+
{#if selectedTab.data?.component}
|
71
|
+
<svelte:component this={selectedTab.data.component} class="btn" />
|
71
72
|
{/if}
|
72
73
|
</Tabs>
|
73
74
|
```
|
@@ -80,36 +81,40 @@ import { messageNoScript } from "../util/messages";
|
|
80
81
|
let className = "";
|
81
82
|
export { className as class };
|
82
83
|
export let id = "";
|
83
|
-
export let
|
84
|
-
export let
|
85
|
-
export let
|
86
|
-
export let
|
84
|
+
export let classTabList = "";
|
85
|
+
export let classTab = "";
|
86
|
+
export let classTabActive = "";
|
87
|
+
export let classTabInactive = "";
|
87
88
|
export let classNoscript = "";
|
88
|
-
export let
|
89
|
+
export let classTabPanel = "";
|
89
90
|
export let tabs;
|
90
|
-
export let
|
91
|
+
export let selectedIndex = 0;
|
91
92
|
let clientJs = false;
|
92
93
|
$:
|
93
|
-
|
94
|
+
selectedTab = tabs[selectedIndex];
|
94
95
|
onMount(() => clientJs = true);
|
95
96
|
</script>
|
96
97
|
|
97
98
|
<div class={className} {id}>
|
98
|
-
<div class={
|
99
|
+
<div class={classTabList} role="tablist">
|
99
100
|
{#each tabs as item, index}
|
100
101
|
<button
|
102
|
+
role="tab"
|
103
|
+
tabindex={index === selectedIndex ? 0 : -1}
|
104
|
+
aria-selected={index === selectedIndex}
|
105
|
+
aria-controls="tabpanel"
|
101
106
|
disabled={!clientJs}
|
102
|
-
class="{
|
103
|
-
?
|
104
|
-
: ''} {
|
105
|
-
on:click={() => (
|
107
|
+
class="{classTab} {selectedIndex === index
|
108
|
+
? classTabActive
|
109
|
+
: ''} {selectedIndex !== index ? classTabInactive : ''}"
|
110
|
+
on:click={() => (selectedIndex = index)}
|
106
111
|
>
|
107
|
-
<slot name="
|
112
|
+
<slot name="tab" {item} {index}>{item.tab}</slot>
|
108
113
|
</button>
|
109
114
|
{/each}
|
110
115
|
</div>
|
111
|
-
<div class={
|
112
|
-
<slot {
|
116
|
+
<div class={classTabPanel} role="tabpanel" id="tabpanel">
|
117
|
+
<slot {selectedTab}>{selectedTab.panel}</slot>
|
113
118
|
</div>
|
114
119
|
<noscript>
|
115
120
|
<div class={classNoscript}>{messageNoScript}</div>
|
@@ -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;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.6.1",
|
4
4
|
"description": "An unstyled Svelte component library",
|
5
5
|
"keywords": [
|
6
6
|
"components",
|
@@ -27,7 +27,7 @@
|
|
27
27
|
"repository": "github:rossrobino/drab",
|
28
28
|
"scripts": {
|
29
29
|
"dev": "vite dev",
|
30
|
-
"build": "
|
30
|
+
"build": "vite build && npm run package",
|
31
31
|
"preview": "vite preview",
|
32
32
|
"package": "svelte-kit sync && svelte-package && publint",
|
33
33
|
"prepublishOnly": "npm run package",
|
@@ -36,7 +36,7 @@
|
|
36
36
|
"lint": "prettier --check . && eslint .",
|
37
37
|
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
38
38
|
"pub": "npm publish --access public",
|
39
|
-
"doc": "node src/scripts/
|
39
|
+
"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
|
40
40
|
},
|
41
41
|
"exports": {
|
42
42
|
".": {
|