drab 2.8.6 → 3.0.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.
Files changed (26) hide show
  1. package/README.md +69 -67
  2. package/dist/components/Breakpoint.svelte +7 -7
  3. package/dist/components/Breakpoint.svelte.d.ts +1 -1
  4. package/dist/components/ContextMenu.svelte +74 -75
  5. package/dist/components/ContextMenu.svelte.d.ts +1 -1
  6. package/dist/components/CopyButton.svelte +35 -13
  7. package/dist/components/CopyButton.svelte.d.ts +8 -4
  8. package/dist/components/DataTable.svelte +124 -118
  9. package/dist/components/DataTable.svelte.d.ts +15 -9
  10. package/dist/components/Details.svelte +76 -76
  11. package/dist/components/Details.svelte.d.ts +3 -3
  12. package/dist/components/Editor.svelte +39 -39
  13. package/dist/components/Editor.svelte.d.ts +6 -6
  14. package/dist/components/{Chord.svelte → FrettedChord.svelte} +36 -34
  15. package/dist/components/{Chord.svelte.d.ts → FrettedChord.svelte.d.ts} +13 -11
  16. package/dist/components/FullscreenButton.svelte +22 -17
  17. package/dist/components/FullscreenButton.svelte.d.ts +1 -1
  18. package/dist/components/Popover.svelte +70 -67
  19. package/dist/components/Popover.svelte.d.ts +5 -2
  20. package/dist/components/ShareButton.svelte +38 -38
  21. package/dist/components/Sheet.svelte +104 -104
  22. package/dist/components/Sheet.svelte.d.ts +2 -2
  23. package/dist/components/YouTube.svelte +9 -9
  24. package/dist/index.d.ts +2 -2
  25. package/dist/index.js +2 -2
  26. package/package.json +81 -81
package/dist/components/Sheet.svelte CHANGED
@@ -1,11 +1,11 @@
1
- <!--
2
- @component
3
-
4
- ### Sheet
5
-
6
- Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
7
-
8
- @props
1
+ <!--
2
+ @component
3
+
4
+ ### Sheet
5
+
6
+ Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
7
+
8
+ @props
9
9
 
10
10
  - `classSheet` - sheet class - not the backdrop
11
11
  - `class`
@@ -16,48 +16,48 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
16
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
- @slots
20
-
21
- | name | purpose | default value |
22
- | ---------- | ------------------------------- | ------------- |
23
- | `default` | content | `Content` |
24
-
25
- @example
19
+ @slots
20
+
21
+ | name | purpose | default value |
22
+ | ---------- | ------------------------------- | ------------- |
23
+ | `default` | content | `Content` |
24
+
25
+ @example
26
26
 
27
27
  ```svelte
28
- <script lang="ts">
29
- import { Sheet } from "drab";
30
-
31
- let display = false;
32
- </script>
33
-
34
- <button type="button" class="btn" on:click={() => (display = true)}>
35
- Open
36
- </button>
37
-
38
- <Sheet
39
- bind:display
40
- class="backdrop-blur"
41
- classSheet="p-4 shadow bg-white"
42
- position="right"
43
- >
44
- <div class="mb-4 flex items-center justify-between">
45
- <h2 class="my-0">Sheet</h2>
46
- <button type="button" class="btn btn-s" on:click={() => (display = false)}>
47
- Close
48
- </button>
49
- </div>
50
- <div>
51
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
52
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
53
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
54
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
55
- cillum dolore eu fugiat nulla pariatur.
56
- </div>
57
- </Sheet>
28
+ <script lang="ts">
29
+ import { Sheet } from "drab";
30
+
31
+ let display = false;
32
+ </script>
33
+
34
+ <button type="button" class="btn" on:click={() => (display = true)}>
35
+ Open
36
+ </button>
37
+
38
+ <Sheet
39
+ bind:display
40
+ class="backdrop-blur"
41
+ classSheet="p-4 shadow bg-white"
42
+ position="r"
43
+ >
44
+ <div class="mb-4 flex items-center justify-between">
45
+ <h2 class="my-0">Sheet</h2>
46
+ <button type="button" class="btn btn-s" on:click={() => (display = false)}>
47
+ Close
48
+ </button>
49
+ </div>
50
+ <div>
51
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
52
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
53
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
54
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
55
+ cillum dolore eu fugiat nulla pariatur.
56
+ </div>
57
+ </Sheet>
58
58
  ```
59
- -->
60
-
59
+ -->
60
+
61
61
  <script>import { onMount } from "svelte";
62
62
  import {
63
63
  blur,
@@ -71,7 +71,7 @@ export let id = "";
71
71
  export let classSheet = "";
72
72
  export let display = false;
73
73
  export let transition = { duration };
74
- export let position = "left";
74
+ export let position = "l";
75
75
  export let maxSize = 488;
76
76
  export let transitionSheet = { duration };
77
77
  let sheet;
@@ -85,11 +85,11 @@ const focusElement = (node) => {
85
85
  node.focus();
86
86
  };
87
87
  if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
88
- if (position === "bottom") {
88
+ if (position === "b") {
89
89
  transitionSheet.y = maxSize;
90
- } else if (position === "top") {
90
+ } else if (position === "t") {
91
91
  transitionSheet.y = -maxSize;
92
- } else if (position === "right") {
92
+ } else if (position === "r") {
93
93
  transitionSheet.x = maxSize;
94
94
  } else {
95
95
  transitionSheet.x = -maxSize;
@@ -101,56 +101,56 @@ onMount(() => {
101
101
  transitionSheet = false;
102
102
  }
103
103
  });
104
- </script>
105
-
106
- <svelte:body on:keydown={onKeyDown} />
107
-
108
- {#if display}
109
- <div
110
- transition:blur={transition ? transition : { duration: 0 }}
111
- use:focusElement
112
- class="d-backdrop {className}"
113
- class:d-backdrop-bottom={position === "bottom"}
114
- class:d-backdrop-top={position === "top"}
115
- class:d-backdrop-right={position === "right"}
116
- {id}
117
- tabindex="-1"
118
- >
119
- <div
120
- role="dialog"
121
- bind:this={sheet}
122
- transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
123
- style={position === "top" || position === "bottom"
124
- ? `max-height: ${maxSize}px;`
125
- : `max-width: ${maxSize}px`}
126
- class={classSheet}
127
- >
128
- <slot>Content</slot>
129
- </div>
130
- <button title="Close" on:click={() => (display = false)}></button>
131
- </div>
132
- {/if}
133
-
134
- <style>
135
- button {
136
- flex-grow: 1;
137
- }
138
- .d-backdrop {
139
- position: fixed;
140
- display: flex;
141
- top: 0;
142
- bottom: 0;
143
- left: 0;
144
- right: 0;
145
- overflow: hidden;
146
- }
147
- .d-backdrop-bottom {
148
- flex-direction: column-reverse;
149
- }
150
- .d-backdrop-top {
151
- flex-direction: column;
152
- }
153
- .d-backdrop-right {
154
- flex-direction: row-reverse;
155
- }
156
- </style>
104
+ </script>
105
+
106
+ <svelte:body on:keydown={onKeyDown} />
107
+
108
+ {#if display}
109
+ <div
110
+ transition:blur={transition ? transition : { duration: 0 }}
111
+ use:focusElement
112
+ class="d-backdrop {className}"
113
+ class:d-backdrop-bottom={position === "b"}
114
+ class:d-backdrop-top={position === "t"}
115
+ class:d-backdrop-right={position === "r"}
116
+ {id}
117
+ tabindex="-1"
118
+ >
119
+ <div
120
+ role="dialog"
121
+ bind:this={sheet}
122
+ transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
123
+ style={position === "t" || position === "b"
124
+ ? `max-height: ${maxSize}px;`
125
+ : `max-width: ${maxSize}px`}
126
+ class={classSheet}
127
+ >
128
+ <slot>Content</slot>
129
+ </div>
130
+ <button title="Close" on:click={() => (display = false)}></button>
131
+ </div>
132
+ {/if}
133
+
134
+ <style>
135
+ button {
136
+ flex-grow: 1;
137
+ }
138
+ .d-backdrop {
139
+ position: fixed;
140
+ display: flex;
141
+ top: 0;
142
+ bottom: 0;
143
+ left: 0;
144
+ right: 0;
145
+ overflow: hidden;
146
+ }
147
+ .d-backdrop-bottom {
148
+ flex-direction: column-reverse;
149
+ }
150
+ .d-backdrop-top {
151
+ flex-direction: column;
152
+ }
153
+ .d-backdrop-right {
154
+ flex-direction: row-reverse;
155
+ }
156
+ </style>
package/dist/components/Sheet.svelte.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const __propDef: {
7
7
  /** sheet class - not the backdrop */ classSheet?: string | undefined;
8
8
  /** controls whether the sheet is displayed*/ display?: boolean | undefined;
9
9
  /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
10
- /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
10
+ /** determines the position of sheet */ position?: "t" | "b" | "l" | "r" | undefined;
11
11
  /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
12
12
  /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
13
13
  };
@@ -60,7 +60,7 @@ export type SheetSlots = typeof __propDef.slots;
60
60
  * bind:display
61
61
  * class="backdrop-blur"
62
62
  * classSheet="p-4 shadow bg-white"
63
- * position="right"
63
+ * position="r"
64
64
  * >
65
65
  * <div class="mb-4 flex items-center justify-between">
66
66
  * <h2 class="my-0">Sheet</h2>
package/dist/components/YouTube.svelte CHANGED
@@ -17,15 +17,15 @@ Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.
17
17
  @example
18
18
 
19
19
  ```svelte
20
- <script lang="ts">
21
- import { YouTube } from "drab";
22
- </script>
23
-
24
- <YouTube
25
- class="aspect-video w-full rounded"
26
- title="Renegade - Kevin Olusola"
27
- uid="gouiY85kD2o"
28
- />
20
+ <script lang="ts">
21
+ import { YouTube } from "drab";
22
+ </script>
23
+
24
+ <YouTube
25
+ class="aspect-video w-full rounded"
26
+ title="Renegade - Kevin Olusola"
27
+ uid="gouiY85kD2o"
28
+ />
29
29
  ```
30
30
  -->
31
31
 
package/dist/index.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import Breakpoint from "./components/Breakpoint.svelte";
2
- import Chord from "./components/Chord.svelte";
3
2
  import ContextMenu from "./components/ContextMenu.svelte";
4
3
  import CopyButton from "./components/CopyButton.svelte";
5
4
  import DataTable from "./components/DataTable.svelte";
6
5
  import Details from "./components/Details.svelte";
7
6
  import Editor from "./components/Editor.svelte";
7
+ import FrettedChord from "./components/FrettedChord.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
12
  import YouTube from "./components/YouTube.svelte";
13
- export { Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Details, Editor, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
13
+ export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import Breakpoint from "./components/Breakpoint.svelte";
2
- import Chord from "./components/Chord.svelte";
3
2
  import ContextMenu from "./components/ContextMenu.svelte";
4
3
  import CopyButton from "./components/CopyButton.svelte";
5
4
  import DataTable from "./components/DataTable.svelte";
6
5
  import Details from "./components/Details.svelte";
7
6
  import Editor from "./components/Editor.svelte";
7
+ import FrettedChord from "./components/FrettedChord.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
12
  import YouTube from "./components/YouTube.svelte";
13
- export { Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Details, Editor, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
13
+ export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
package/package.json CHANGED
@@ -1,81 +1,81 @@
1
- {
2
- "name": "drab",
3
- "version": "2.8.6",
4
- "description": "An unstyled Svelte component library",
5
- "keywords": [
6
- "components",
7
- "Svelte",
8
- "SvelteKit",
9
- "Breakpoint",
10
- "Chord",
11
- "ContextMenu",
12
- "Copy",
13
- "DataTable",
14
- "Details",
15
- "Editor",
16
- "Fullscreen",
17
- "Popover",
18
- "Share",
19
- "Sheet",
20
- "YouTube"
21
- ],
22
- "homepage": "https://drab.robino.dev",
23
- "license": "MIT",
24
- "author": {
25
- "name": "Ross Robino",
26
- "url": "https://robino.dev"
27
- },
28
- "repository": "github:rossrobino/drab",
29
- "scripts": {
30
- "dev": "vite dev",
31
- "build": "vite build && npm run package",
32
- "preview": "vite preview",
33
- "package": "svelte-kit sync && svelte-package && publint",
34
- "prepublishOnly": "npm run package",
35
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
36
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
37
- "lint": "prettier --check . && eslint .",
38
- "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
39
- "pub": "npm publish --access public",
40
- "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
41
- },
42
- "exports": {
43
- ".": {
44
- "types": "./dist/index.d.ts",
45
- "svelte": "./dist/index.js"
46
- }
47
- },
48
- "files": [
49
- "dist"
50
- ],
51
- "dependencies": {
52
- "svelte": "^4.2.0"
53
- },
54
- "devDependencies": {
55
- "@sveltejs/adapter-vercel": "^3.0.3",
56
- "@sveltejs/kit": "^1.22.6",
57
- "@sveltejs/package": "^2.2.1",
58
- "@tailwindcss/typography": "^0.5.9",
59
- "@types/node": "^20.5.1",
60
- "@typescript-eslint/eslint-plugin": "^6.4.0",
61
- "@typescript-eslint/parser": "^6.4.0",
62
- "autoprefixer": "^10.4.15",
63
- "eslint": "^8.47.0",
64
- "eslint-config-prettier": "^9.0.0",
65
- "eslint-plugin-svelte": "^2.32.4",
66
- "marked": "^7.0.4",
67
- "postcss": "^8.4.28",
68
- "prettier": "^3.0.2",
69
- "prettier-plugin-svelte": "^3.0.3",
70
- "prettier-plugin-tailwindcss": "^0.5.3",
71
- "publint": "^0.2.1",
72
- "svelte-check": "^3.5.0",
73
- "tailwindcss": "^3.3.3",
74
- "tslib": "^2.6.2",
75
- "typescript": "^5.1.6",
76
- "vite": "^4.4.9"
77
- },
78
- "svelte": "./dist/index.js",
79
- "types": "./dist/index.d.ts",
80
- "type": "module"
81
- }
1
+ {
2
+ "name": "drab",
3
+ "version": "3.0.0",
4
+ "description": "An Unstyled Svelte Component Library",
5
+ "keywords": [
6
+ "components",
7
+ "Svelte",
8
+ "SvelteKit",
9
+ "Breakpoint",
10
+ "ContextMenu",
11
+ "Copy",
12
+ "DataTable",
13
+ "Details",
14
+ "Editor",
15
+ "FrettedChord",
16
+ "Fullscreen",
17
+ "Popover",
18
+ "Share",
19
+ "Sheet",
20
+ "YouTube"
21
+ ],
22
+ "homepage": "https://drab.robino.dev",
23
+ "license": "MIT",
24
+ "author": {
25
+ "name": "Ross Robino",
26
+ "url": "https://robino.dev"
27
+ },
28
+ "repository": "github:rossrobino/drab",
29
+ "scripts": {
30
+ "dev": "vite dev",
31
+ "build": "vite build && npm run package",
32
+ "preview": "vite preview",
33
+ "package": "svelte-kit sync && svelte-package && publint",
34
+ "prepublishOnly": "npm run package",
35
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
36
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
37
+ "lint": "prettier --check . && eslint .",
38
+ "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
39
+ "pub": "npm publish --access public",
40
+ "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
41
+ },
42
+ "exports": {
43
+ ".": {
44
+ "types": "./dist/index.d.ts",
45
+ "svelte": "./dist/index.js"
46
+ }
47
+ },
48
+ "files": [
49
+ "dist"
50
+ ],
51
+ "dependencies": {
52
+ "svelte": "^4.2.0"
53
+ },
54
+ "devDependencies": {
55
+ "@sveltejs/adapter-vercel": "^3.0.3",
56
+ "@sveltejs/kit": "^1.22.6",
57
+ "@sveltejs/package": "^2.2.1",
58
+ "@tailwindcss/typography": "^0.5.9",
59
+ "@types/node": "^20.5.3",
60
+ "@typescript-eslint/eslint-plugin": "^6.4.1",
61
+ "@typescript-eslint/parser": "^6.4.1",
62
+ "autoprefixer": "^10.4.15",
63
+ "eslint": "^8.47.0",
64
+ "eslint-config-prettier": "^9.0.0",
65
+ "eslint-plugin-svelte": "^2.33.0",
66
+ "marked": "^7.0.4",
67
+ "postcss": "^8.4.28",
68
+ "prettier": "^3.0.2",
69
+ "prettier-plugin-svelte": "^3.0.3",
70
+ "prettier-plugin-tailwindcss": "^0.5.3",
71
+ "publint": "^0.2.2",
72
+ "svelte-check": "^3.5.0",
73
+ "tailwindcss": "^3.3.3",
74
+ "tslib": "^2.6.2",
75
+ "typescript": "^5.1.6",
76
+ "vite": "^4.4.9"
77
+ },
78
+ "svelte": "./dist/index.js",
79
+ "types": "./dist/index.d.ts",
80
+ "type": "module"
81
+ }