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.
@@ -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
- - `classTitleActive` - class of the active tab's `button`
15
- - `classTitleInactive` - class of all the inactive tabs' `button`s
16
- - `classTitle` - class of all title `button`s
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 | slot props |
24
- | --------- | --------------------- | -------------------- | --------------- |
25
- | `default` | active item's content | `activeItem.content` | `activeItem` |
26
- | `title` | title of each tab | `item.title` | `item`, `index` |
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
- classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
38
- classTitle="btn rounded-sm p-0.5"
39
- classTitleActive="bg-white text-gray-950"
40
- classTitleInactive="bg-gray-200 text-gray-500"
41
- classContent="py-2"
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
- { title: "Tab 1", content: "Content 1" },
44
- { title: "Tab 2", content: "Content 2" },
44
+ { tab: "Tab", panel: "Content" },
45
+ { tab: "Another Tab", panel: "Some more content" },
45
46
  ]}
46
47
  />
47
48
 
48
49
  <Tabs
49
- classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
50
- classTitle="btn rounded-sm p-0.5"
51
- classTitleActive="bg-white text-gray-950"
52
- classTitleInactive="bg-gray-200 text-gray-500"
53
- classContent="py-2"
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
- { title: "Tab", content: "Generated indexes" },
56
+ { tab: "Tab", panel: "Generated indexes" },
56
57
  {
57
- title: "Tab",
58
- content: "A tab with a component",
58
+ tab: "Tab",
59
+ panel: "A tab with a component",
59
60
  data: { component: FullscreenButton },
60
61
  },
61
62
  ]}
62
- let:activeTab
63
+ let:selectedTab
63
64
  >
64
- <svelte:fragment slot="title" let:item let:index>
65
- {item.title}
65
+ <svelte:fragment slot="tab" let:item let:index>
66
+ {item.tab}
66
67
  {index + 1}
67
68
  </svelte:fragment>
68
- <div>{activeTab.content}</div>
69
- {#if activeTab.data?.component}
70
- <svelte:component this={activeTab.data.component} class="btn" />
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 classHeader = "";
84
- export let classTitle = "";
85
- export let classTitleActive = "";
86
- export let classTitleInactive = "";
84
+ export let classTabList = "";
85
+ export let classTab = "";
86
+ export let classTabActive = "";
87
+ export let classTabInactive = "";
87
88
  export let classNoscript = "";
88
- export let classContent = "";
89
+ export let classTabPanel = "";
89
90
  export let tabs;
90
- export let activeIndex = 0;
91
+ export let selectedIndex = 0;
91
92
  let clientJs = false;
92
93
  $:
93
- activeTab = tabs[activeIndex];
94
+ selectedTab = tabs[selectedIndex];
94
95
  onMount(() => clientJs = true);
95
96
  </script>
96
97
 
97
98
  <div class={className} {id}>
98
- <div class={classHeader}>
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="{classTitle} {activeIndex === index
103
- ? classTitleActive
104
- : ''} {activeIndex !== index ? classTitleInactive : ''}"
105
- on:click={() => (activeIndex = index)}
107
+ class="{classTab} {selectedIndex === index
108
+ ? classTabActive
109
+ : ''} {selectedIndex !== index ? classTabInactive : ''}"
110
+ on:click={() => (selectedIndex = index)}
106
111
  >
107
- <slot name="title" {item} {index}>{item.title}</slot>
112
+ <slot name="tab" {item} {index}>{item.tab}</slot>
108
113
  </button>
109
114
  {/each}
110
115
  </div>
111
- <div class={classContent}>
112
- <slot {activeTab}>{activeTab.content}</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
- title?: string;
4
+ tab?: string;
5
5
  /** slotted content, displayed once tab is clicked */
6
- content?: string;
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 */ classHeader?: string | undefined;
15
- /** class of all title `button`s */ classTitle?: string | undefined;
16
- /** class of the active tab's `button` */ classTitleActive?: string | undefined;
17
- /** class of all the inactive tabs' `button`s */ classTitleInactive?: string | undefined;
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 */ classContent?: string | undefined;
19
+ /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
20
20
  /** array of tabs */ tabs: TabsTab[];
21
- /** index of active tab, defaults to 0 */ activeIndex?: number | undefined;
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
- title: {
27
+ tab: {
28
28
  item: TabsTab<any>;
29
29
  index: any;
30
30
  };
31
31
  default: {
32
- activeTab: TabsTab<any>;
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
- * - `classTitleActive` - class of the active tab's `button`
51
- * - `classTitleInactive` - class of all the inactive tabs' `button`s
52
- * - `classTitle` - class of all title `button`s
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 | slot props |
60
- * | --------- | --------------------- | -------------------- | --------------- |
61
- * | `default` | active item's content | `activeItem.content` | `activeItem` |
62
- * | `title` | title of each tab | `item.title` | `item`, `index` |
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
- * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
74
- * classTitle="btn rounded-sm p-0.5"
75
- * classTitleActive="bg-white text-gray-950"
76
- * classTitleInactive="bg-gray-200 text-gray-500"
77
- * classContent="py-2"
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
- * { title: "Tab 1", content: "Content 1" },
80
- * { title: "Tab 2", content: "Content 2" },
80
+ * { tab: "Tab", panel: "Content" },
81
+ * { tab: "Another Tab", panel: "Some more content" },
81
82
  * ]}
82
83
  * />
83
84
  *
84
85
  * <Tabs
85
- * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
86
- * classTitle="btn rounded-sm p-0.5"
87
- * classTitleActive="bg-white text-gray-950"
88
- * classTitleInactive="bg-gray-200 text-gray-500"
89
- * classContent="py-2"
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
- * { title: "Tab", content: "Generated indexes" },
92
+ * { tab: "Tab", panel: "Generated indexes" },
92
93
  * {
93
- * title: "Tab",
94
- * content: "A tab with a component",
94
+ * tab: "Tab",
95
+ * panel: "A tab with a component",
95
96
  * data: { component: FullscreenButton },
96
97
  * },
97
98
  * ]}
98
- * let:activeTab
99
+ * let:selectedTab
99
100
  * >
100
- * <svelte:fragment slot="title" let:item let:index>
101
- * {item.title}
101
+ * <svelte:fragment slot="tab" let:item let:index>
102
+ * {item.tab}
102
103
  * {index + 1}
103
104
  * </svelte:fragment>
104
- * <div>{activeTab.content}</div>
105
- * {#if activeTab.data?.component}
106
- * <svelte:component this={activeTab.data.component} class="btn" />
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 = 200;
1
+ export declare const duration = 150;
@@ -1 +1 @@
1
- export const duration = 200;
1
+ export const duration = 150;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.5.0",
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": "npm run doc && vite build && npm run package",
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/buildDocs.js"
39
+ "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
40
40
  },
41
41
  "exports": {
42
42
  ".": {