drab 2.8.2 → 2.8.3

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.
Files changed (17) hide show
  1. package/README.md +64 -4
  2. package/dist/components/Accordion.svelte +36 -42
  3. package/dist/components/Accordion.svelte.d.ts +37 -40
  4. package/dist/components/ContextMenu.svelte +2 -4
  5. package/dist/components/DataTable.svelte +114 -148
  6. package/dist/components/DataTable.svelte.d.ts +37 -63
  7. package/dist/components/Popover.svelte +10 -14
  8. package/dist/components/Popover.svelte.d.ts +8 -10
  9. package/dist/components/Sheet.svelte +9 -6
  10. package/dist/components/Sheet.svelte.d.ts +2 -2
  11. package/dist/components/Tabs.svelte +36 -49
  12. package/dist/components/Tabs.svelte.d.ts +33 -37
  13. package/dist/index.d.ts +6 -11
  14. package/dist/index.js +5 -5
  15. package/dist/util/transition.d.ts +1 -1
  16. package/dist/util/transition.js +1 -1
  17. package/package.json +16 -16
package/dist/components/Sheet.svelte CHANGED
@@ -13,7 +13,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
13
13
  - `id`
14
14
  - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
15
15
  - `position` - determines the position of sheet
16
- - `transitionSheet` - flys the sheet, set to `false` to remove
16
+ - `transitionSheet` - flies the sheet, set to `false` to remove
17
17
  - `transition` - blurs the entire component, set to `false` to remove
18
18
 
19
19
  @slots
@@ -80,6 +80,10 @@ const onKeyDown = (e) => {
80
80
  display = false;
81
81
  }
82
82
  };
83
+ const focusElement = (node) => {
84
+ if (node instanceof HTMLElement)
85
+ node.focus();
86
+ };
83
87
  if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
84
88
  if (position === "bottom") {
85
89
  transitionSheet.y = maxSize;
@@ -93,10 +97,8 @@ if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
93
97
  }
94
98
  onMount(() => {
95
99
  if (prefersReducedMotion()) {
96
- if (transition)
97
- transition.duration = 0;
98
- if (transitionSheet)
99
- transitionSheet.duration = 0;
100
+ transition = false;
101
+ transitionSheet = false;
100
102
  }
101
103
  });
102
104
  </script>
@@ -106,11 +108,13 @@ onMount(() => {
106
108
  {#if display}
107
109
  <div
108
110
  transition:blur={transition ? transition : { duration: 0 }}
111
+ use:focusElement
109
112
  class="d-backdrop {className}"
110
113
  class:d-backdrop-bottom={position === "bottom"}
111
114
  class:d-backdrop-top={position === "top"}
112
115
  class:d-backdrop-right={position === "right"}
113
116
  {id}
117
+ tabindex="-1"
114
118
  >
115
119
  <div
116
120
  role="dialog"
@@ -134,7 +138,6 @@ onMount(() => {
134
138
  .d-backdrop {
135
139
  position: fixed;
136
140
  display: flex;
137
- z-index: 40;
138
141
  top: 0;
139
142
  bottom: 0;
140
143
  left: 0;
package/dist/components/Sheet.svelte.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const __propDef: {
9
9
  /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
10
10
  /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
11
11
  /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
12
- /** flys the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
12
+ /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
13
13
  };
14
14
  events: {
15
15
  [evt: string]: CustomEvent<any>;
@@ -34,7 +34,7 @@ export type SheetSlots = typeof __propDef.slots;
34
34
  * - `id`
35
35
  * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
36
36
  * - `position` - determines the position of sheet
37
- * - `transitionSheet` - flys the sheet, set to `false` to remove
37
+ * - `transitionSheet` - flies the sheet, set to `false` to remove
38
38
  * - `transition` - blurs the entire component, set to `false` to remove
39
39
  *
40
40
  * @slots
package/dist/components/Tabs.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  ### Tabs
5
5
 
6
- Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
6
+ Displays tabs and the selected tab's content.
7
7
 
8
8
  @props
9
9
 
@@ -14,62 +14,59 @@ Displays tabs and the selected tab's content. Use `TabsTab.data` to send additio
14
14
  - `classTabPanel` - class of `div` that wraps the slotted content
15
15
  - `classTab` - class of all title `button`s
16
16
  - `class`
17
+ - `data` - provides the content for each tab
17
18
  - `id`
18
19
  - `selectedIndex` - index of selected tab, defaults to `0`
19
- - `tabs` - array of `TabsTab` objects
20
- - `transition` - fades the panel content, set to `false` to remove
21
20
 
22
21
  @slots
23
22
 
24
- | name | purpose | default value | slot props |
25
- | ------- | ------------------ | ------------------- | ---------------------- |
26
- | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
27
- | `tab` | title of each tab | `tab.tab` | `tab`, `index` |
23
+ | name | purpose | default value | slot props |
24
+ | ---------- | -------------------- | --------------- | ---------------------- |
25
+ | `tab` | title of each tab | `item.tab` | `item`, `index`, `tab` |
26
+ | `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index` |
28
27
 
29
28
  @example
30
29
 
31
30
  ```svelte
32
31
  <script lang="ts">
33
- import { Tabs } from "drab";
34
- import { FullscreenButton } from "drab";
32
+ import { Tabs, type TabsItem, FullscreenButton } from "drab";
33
+
34
+ const data: TabsItem[] = [
35
+ { tab: "Tab", tabPanel: "Content" },
36
+ {
37
+ tab: "Another Tab",
38
+ tabPanel: "Some more content",
39
+ component: FullscreenButton,
40
+ },
41
+ ];
35
42
  </script>
36
43
 
37
44
  <Tabs
45
+ {data}
38
46
  class="mb-4"
39
47
  classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
40
48
  classTab="btn btn-s p-2"
41
49
  classTabActive="bg-white text-neutral-950 shadow"
42
50
  classTabInactive="bg-neutral-200 text-neutral-600"
43
51
  classTabPanel="py-2"
44
- tabs={[
45
- { tab: "Tab", panel: "Content" },
46
- { tab: "Another Tab", panel: "Some more content" },
47
- ]}
48
52
  />
49
53
 
50
54
  <Tabs
55
+ {data}
51
56
  classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
52
57
  classTab="btn btn-s p-2"
53
58
  classTabActive="bg-white text-neutral-950 shadow"
54
59
  classTabInactive="bg-neutral-200 text-neutral-600"
55
60
  classTabPanel="py-2"
56
- tabs={[
57
- { tab: "Tab", panel: "Generated indexes" },
58
- {
59
- tab: "Tab",
60
- panel: "A tab with a component",
61
- data: { component: FullscreenButton },
62
- },
63
- ]}
64
61
  >
65
- <svelte:fragment slot="tab" let:tab let:index>
66
- {tab.tab}
67
- {index + 1}
62
+ <svelte:fragment slot="tab" let:item let:index>
63
+ {index + 1}.
64
+ {item.tab}
68
65
  </svelte:fragment>
69
- <svelte:fragment slot="panel" let:selectedTab>
70
- <div class="mb-2">{selectedTab.panel}</div>
71
- {#if selectedTab.data?.component}
72
- <svelte:component this={selectedTab.data.component} class="btn" />
66
+ <svelte:fragment slot="tabPanel" let:item>
67
+ <div>{item.tabPanel}</div>
68
+ {#if item.component}
69
+ <svelte:component this={item.component} class="btn mt-2" />
73
70
  {/if}
74
71
  </svelte:fragment>
75
72
  </Tabs>
@@ -80,9 +77,6 @@ Displays tabs and the selected tab's content. Use `TabsTab.data` to send additio
80
77
 
81
78
  <script>import { onMount } from "svelte";
82
79
  import { messageNoScript } from "../util/messages";
83
- import { fade } from "svelte/transition";
84
- import { duration } from "../util/transition";
85
- import { prefersReducedMotion } from "../util/accessibility";
86
80
  let className = "";
87
81
  export { className as class };
88
82
  export let id = "";
@@ -92,44 +86,37 @@ export let classTabActive = "";
92
86
  export let classTabInactive = "";
93
87
  export let classNoscript = "";
94
88
  export let classTabPanel = "";
95
- export let tabs;
89
+ export let data;
96
90
  export let selectedIndex = 0;
97
- export let transition = { duration };
98
91
  let clientJs = false;
99
- onMount(() => {
100
- if (prefersReducedMotion()) {
101
- if (transition)
102
- transition.duration = 0;
103
- }
104
- clientJs = true;
105
- });
106
- const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
92
+ const idPanel = "tabPanel-" + Math.random().toString().substring(2, 8);
93
+ onMount(() => clientJs = true);
107
94
  </script>
108
95
 
109
96
  <div class={className} {id}>
110
97
  <div class={classTabList} role="tablist">
111
- {#each tabs as tab, index}
98
+ {#each data as item, index}
112
99
  <button
113
100
  role="tab"
114
101
  tabindex={index === selectedIndex ? 0 : -1}
115
102
  aria-selected={index === selectedIndex}
116
- aria-controls={panelId}
103
+ aria-controls={idPanel}
117
104
  disabled={!clientJs}
118
105
  class="{classTab} {selectedIndex === index
119
106
  ? classTabActive
120
107
  : ''} {selectedIndex !== index ? classTabInactive : ''}"
121
108
  on:click={() => (selectedIndex = index)}
122
109
  >
123
- <slot name="tab" {tab} {index}>{tab.tab}</slot>
110
+ <slot name="tab" {item} {index} tab={item.tab}>{item.tab}</slot>
124
111
  </button>
125
112
  {/each}
126
113
  </div>
127
- {#each tabs as tab, index}
114
+ {#each data as item, index}
128
115
  {#if index === selectedIndex}
129
- <div class={classTabPanel} role="tabpanel" id={panelId}>
130
- <div in:fade={transition ? transition : { duration: 0 }}>
131
- <slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
132
- </div>
116
+ <div class={classTabPanel} role="tabpanel" id={idPanel}>
117
+ <slot name="tabPanel" {item} {index}>
118
+ {item.tabPanel}
119
+ </slot>
133
120
  </div>
134
121
  {/if}
135
122
  {/each}
package/dist/components/Tabs.svelte.d.ts CHANGED
@@ -1,13 +1,12 @@
1
1
  import { SvelteComponent } from "svelte";
2
- export interface TabsTab<T = any> {
2
+ export interface TabsItem {
3
3
  /** tab title, displayed in `button` element */
4
4
  tab?: string;
5
5
  /** slotted content, displayed once tab is clicked */
6
- panel?: string;
6
+ tabPanel?: string;
7
7
  /** any data to pass back to the parent */
8
- data?: T;
8
+ [key: string | number]: any;
9
9
  }
10
- import { type FadeParams } from "svelte/transition";
11
10
  declare const __propDef: {
12
11
  props: {
13
12
  class?: string | undefined;
@@ -18,20 +17,20 @@ declare const __propDef: {
18
17
  /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
19
18
  /** `noscript` class */ classNoscript?: string | undefined;
20
19
  /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
21
- /** array of `TabsTab` objects */ tabs: TabsTab[];
20
+ /** provides the content for each tab */ data: TabsItem[];
22
21
  /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
23
- /** fades the panel content, set to `false` to remove */ transition?: false | FadeParams | undefined;
24
22
  };
25
23
  events: {
26
24
  [evt: string]: CustomEvent<any>;
27
25
  };
28
26
  slots: {
29
27
  tab: {
30
- tab: TabsTab<any>;
28
+ item: TabsItem;
31
29
  index: any;
30
+ tab: string | undefined;
32
31
  };
33
- panel: {
34
- selectedTab: TabsTab<any>;
32
+ tabPanel: {
33
+ item: TabsItem;
35
34
  index: any;
36
35
  };
37
36
  };
@@ -42,7 +41,7 @@ export type TabsSlots = typeof __propDef.slots;
42
41
  /**
43
42
  * ### Tabs
44
43
  *
45
- * Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
44
+ * Displays tabs and the selected tab's content.
46
45
  *
47
46
  * @props
48
47
  *
@@ -53,62 +52,59 @@ export type TabsSlots = typeof __propDef.slots;
53
52
  * - `classTabPanel` - class of `div` that wraps the slotted content
54
53
  * - `classTab` - class of all title `button`s
55
54
  * - `class`
55
+ * - `data` - provides the content for each tab
56
56
  * - `id`
57
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
60
58
  *
61
59
  * @slots
62
60
  *
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` |
61
+ * | name | purpose | default value | slot props |
62
+ * | ---------- | -------------------- | --------------- | ---------------------- |
63
+ * | `tab` | title of each tab | `item.tab` | `item`, `index`, `tab` |
64
+ * | `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index` |
67
65
  *
68
66
  * @example
69
67
  *
70
68
  * ```svelte
71
69
  * <script lang="ts">
72
- * import { Tabs } from "drab";
73
- * import { FullscreenButton } from "drab";
70
+ * import { Tabs, type TabsItem, FullscreenButton } from "drab";
71
+ *
72
+ * const data: TabsItem[] = [
73
+ * { tab: "Tab", tabPanel: "Content" },
74
+ * {
75
+ * tab: "Another Tab",
76
+ * tabPanel: "Some more content",
77
+ * component: FullscreenButton,
78
+ * },
79
+ * ];
74
80
  * </script>
75
81
  *
76
82
  * <Tabs
83
+ * {data}
77
84
  * class="mb-4"
78
85
  * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
79
86
  * classTab="btn btn-s p-2"
80
87
  * classTabActive="bg-white text-neutral-950 shadow"
81
88
  * classTabInactive="bg-neutral-200 text-neutral-600"
82
89
  * classTabPanel="py-2"
83
- * tabs={[
84
- * { tab: "Tab", panel: "Content" },
85
- * { tab: "Another Tab", panel: "Some more content" },
86
- * ]}
87
90
  * />
88
91
  *
89
92
  * <Tabs
93
+ * {data}
90
94
  * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
91
95
  * classTab="btn btn-s p-2"
92
96
  * classTabActive="bg-white text-neutral-950 shadow"
93
97
  * classTabInactive="bg-neutral-200 text-neutral-600"
94
98
  * classTabPanel="py-2"
95
- * tabs={[
96
- * { tab: "Tab", panel: "Generated indexes" },
97
- * {
98
- * tab: "Tab",
99
- * panel: "A tab with a component",
100
- * data: { component: FullscreenButton },
101
- * },
102
- * ]}
103
99
  * >
104
- * <svelte:fragment slot="tab" let:tab let:index>
105
- * {tab.tab}
106
- * {index + 1}
100
+ * <svelte:fragment slot="tab" let:item let:index>
101
+ * {index + 1}.
102
+ * {item.tab}
107
103
  * </svelte:fragment>
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" />
104
+ * <svelte:fragment slot="tabPanel" let:item>
105
+ * <div>{item.tabPanel}</div>
106
+ * {#if item.component}
107
+ * <svelte:component this={item.component} class="btn mt-2" />
112
108
  * {/if}
113
109
  * </svelte:fragment>
114
110
  * </Tabs>
package/dist/index.d.ts CHANGED
@@ -1,19 +1,14 @@
1
- import Accordion from "./components/Accordion.svelte";
2
- import type { AccordionItem } from "./components/Accordion.svelte";
1
+ import Accordion, { type AccordionItem } from "./components/Accordion.svelte";
3
2
  import Breakpoint from "./components/Breakpoint.svelte";
4
- import Chord from "./components/Chord.svelte";
5
- import type { ChordNote } from "./components/Chord.svelte";
3
+ import Chord, { type ChordNote } from "./components/Chord.svelte";
6
4
  import ContextMenu from "./components/ContextMenu.svelte";
7
5
  import CopyButton from "./components/CopyButton.svelte";
8
- import DataTable from "./components/DataTable.svelte";
9
- import type { DataTableRow } from "./components/DataTable.svelte";
10
- import Editor from "./components/Editor.svelte";
11
- import type { EditorContentElement } from "./components/Editor.svelte";
6
+ import DataTable, { type DataTableItem } from "./components/DataTable.svelte";
7
+ import Editor, { type EditorContentElement } from "./components/Editor.svelte";
12
8
  import FullscreenButton from "./components/FullscreenButton.svelte";
13
9
  import Popover from "./components/Popover.svelte";
14
10
  import ShareButton from "./components/ShareButton.svelte";
15
11
  import Sheet from "./components/Sheet.svelte";
16
- import Tabs from "./components/Tabs.svelte";
17
- import type { TabsTab } from "./components/Tabs.svelte";
12
+ import Tabs, { type TabsItem } from "./components/Tabs.svelte";
18
13
  import YouTube from "./components/YouTube.svelte";
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, };
14
+ export { Accordion, type AccordionItem, Breakpoint, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableItem, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsItem, YouTube, };
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import Accordion from "./components/Accordion.svelte";
1
+ import Accordion, {} from "./components/Accordion.svelte";
2
2
  import Breakpoint from "./components/Breakpoint.svelte";
3
- import Chord from "./components/Chord.svelte";
3
+ import Chord, {} from "./components/Chord.svelte";
4
4
  import ContextMenu from "./components/ContextMenu.svelte";
5
5
  import CopyButton from "./components/CopyButton.svelte";
6
- import DataTable from "./components/DataTable.svelte";
7
- import Editor from "./components/Editor.svelte";
6
+ import DataTable, {} from "./components/DataTable.svelte";
7
+ import Editor, {} from "./components/Editor.svelte";
8
8
  import FullscreenButton from "./components/FullscreenButton.svelte";
9
9
  import Popover from "./components/Popover.svelte";
10
10
  import ShareButton from "./components/ShareButton.svelte";
11
11
  import Sheet from "./components/Sheet.svelte";
12
- import Tabs from "./components/Tabs.svelte";
12
+ import Tabs, {} from "./components/Tabs.svelte";
13
13
  import YouTube from "./components/YouTube.svelte";
14
14
  export { Accordion, Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
package/dist/util/transition.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const duration = 150;
1
+ export declare const duration = 200;
2
2
  export declare const start = 0.95;
package/dist/util/transition.js CHANGED
@@ -1,2 +1,2 @@
1
- export const duration = 150;
1
+ export const duration = 200;
2
2
  export const start = 0.95;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.8.2",
3
+ "version": "2.8.3",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",
@@ -38,7 +38,7 @@
38
38
  "lint": "prettier --check . && eslint .",
39
39
  "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
40
40
  "pub": "npm publish --access public",
41
- "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
41
+ "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
42
42
  },
43
43
  "exports": {
44
44
  ".": {
@@ -50,29 +50,29 @@
50
50
  "dist"
51
51
  ],
52
52
  "dependencies": {
53
- "svelte": "^4.1.2"
53
+ "svelte": "^4.2.0"
54
54
  },
55
55
  "devDependencies": {
56
56
  "@sveltejs/adapter-vercel": "^3.0.3",
57
- "@sveltejs/kit": "^1.22.5",
57
+ "@sveltejs/kit": "^1.22.6",
58
58
  "@sveltejs/package": "^2.2.1",
59
59
  "@tailwindcss/typography": "^0.5.9",
60
- "@types/node": "^20.4.9",
61
- "@typescript-eslint/eslint-plugin": "^6.3.0",
62
- "@typescript-eslint/parser": "^6.3.0",
63
- "autoprefixer": "^10.4.14",
64
- "eslint": "^8.46.0",
60
+ "@types/node": "^20.5.1",
61
+ "@typescript-eslint/eslint-plugin": "^6.4.0",
62
+ "@typescript-eslint/parser": "^6.4.0",
63
+ "autoprefixer": "^10.4.15",
64
+ "eslint": "^8.47.0",
65
65
  "eslint-config-prettier": "^9.0.0",
66
66
  "eslint-plugin-svelte": "^2.32.4",
67
- "marked": "^7.0.2",
68
- "postcss": "^8.4.27",
69
- "prettier": "^3.0.1",
67
+ "marked": "^7.0.4",
68
+ "postcss": "^8.4.28",
69
+ "prettier": "^3.0.2",
70
70
  "prettier-plugin-svelte": "^3.0.3",
71
- "prettier-plugin-tailwindcss": "^0.5.1",
72
- "publint": "^0.2.0",
73
- "svelte-check": "^3.4.6",
71
+ "prettier-plugin-tailwindcss": "^0.5.3",
72
+ "publint": "^0.2.1",
73
+ "svelte-check": "^3.5.0",
74
74
  "tailwindcss": "^3.3.3",
75
- "tslib": "^2.6.1",
75
+ "tslib": "^2.6.2",
76
76
  "typescript": "^5.1.6",
77
77
  "vite": "^4.4.9"
78
78
  },