drab 2.8.6 → 2.8.7

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.
@@ -1,11 +1,11 @@
1
- <!--
2
- @component
3
-
4
- ### Popover
5
-
6
- Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
7
-
8
- @props
1
+ <!--
2
+ @component
3
+
4
+ ### Popover
5
+
6
+ Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
7
+
8
+ @props
9
9
 
10
10
  - `class`
11
11
  - `display` - shows / hides the popover
@@ -14,41 +14,41 @@ Displays a popover relatively positioned to the target. Does not require the tar
14
14
  - `target` - target element to position the popover in relation to
15
15
  - `transition` - scales the popover, set to `false` to disable
16
16
 
17
- @slots
18
-
19
- | name | purpose | default value |
20
- | ---------- | ------------------------------- | ------------- |
21
- | `default` | default | Popover |
22
-
23
- @example
17
+ @slots
18
+
19
+ | name | purpose | default value |
20
+ | ---------- | ------------------------------- | ------------- |
21
+ | `default` | default | Popover |
22
+
23
+ @example
24
24
 
25
25
  ```svelte
26
- <script lang="ts">
27
- import { Popover } from "drab";
28
-
29
- let target: HTMLButtonElement;
30
-
31
- let display = false;
32
-
33
- const open = () => (display = true);
34
- const close = () => (display = false);
35
- </script>
36
-
37
- <button class="btn" type="button" bind:this={target} on:click={open}>
38
- Open
39
- </button>
40
-
41
- <Popover {target} bind:display class="p-2">
42
- <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
43
- <div class="font-bold">Bottom</div>
44
- <button class="btn" on:click={close}>Close</button>
45
- <button class="btn" on:click={close}>Close</button>
46
- <button class="btn" on:click={close}>Close</button>
47
- </div>
48
- </Popover>
26
+ <script lang="ts">
27
+ import { Popover } from "drab";
28
+
29
+ let target: HTMLButtonElement;
30
+
31
+ let display = false;
32
+
33
+ const open = () => (display = true);
34
+ const close = () => (display = false);
35
+ </script>
36
+
37
+ <button class="btn" type="button" bind:this={target} on:click={open}>
38
+ Open
39
+ </button>
40
+
41
+ <Popover {target} bind:display class="p-2">
42
+ <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
43
+ <div class="font-bold">Bottom</div>
44
+ <button class="btn" on:click={close}>Close</button>
45
+ <button class="btn" on:click={close}>Close</button>
46
+ <button class="btn" on:click={close}>Close</button>
47
+ </div>
48
+ </Popover>
49
49
  ```
50
- -->
51
-
50
+ -->
51
+
52
52
  <script>import { prefersReducedMotion } from "../util/accessibility";
53
53
  import { duration, start } from "../util/transition";
54
54
  import { onMount, tick } from "svelte";
@@ -106,26 +106,26 @@ onMount(() => {
106
106
  if (prefersReducedMotion())
107
107
  transition = false;
108
108
  });
109
- </script>
110
-
111
- <svelte:body on:keydown={onKeyDown} />
112
-
113
- {#if display}
114
- <div
115
- role="dialog"
116
- bind:this={popover}
117
- class={className}
118
- {id}
119
- style:top="{coordinates.y}px"
120
- style:left="{coordinates.x}px"
121
- transition:scale={transition ? transition : { duration: 0 }}
122
- >
123
- <slot>Popover</slot>
124
- </div>
125
- {/if}
126
-
127
- <style>
128
- div {
129
- position: absolute;
130
- }
131
- </style>
109
+ </script>
110
+
111
+ <svelte:body on:keydown={onKeyDown} />
112
+
113
+ {#if display}
114
+ <div
115
+ role="dialog"
116
+ bind:this={popover}
117
+ class={className}
118
+ {id}
119
+ style:top="{coordinates.y}px"
120
+ style:left="{coordinates.x}px"
121
+ transition:scale={transition ? transition : { duration: 0 }}
122
+ >
123
+ <slot>Popover</slot>
124
+ </div>
125
+ {/if}
126
+
127
+ <style>
128
+ div {
129
+ position: absolute;
130
+ }
131
+ </style>
@@ -30,44 +30,44 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
30
30
  @example
31
31
 
32
32
  ```svelte
33
- <script lang="ts">
34
- import { ShareButton } from "drab";
35
-
36
- let fileInput: HTMLInputElement;
37
-
38
- let fileShareData: ShareData;
39
-
40
- const onInput = () => {
41
- if (fileInput.files) {
42
- fileShareData.files = [fileInput.files[0]];
43
- }
44
- };
45
- </script>
46
-
47
- <ShareButton
48
- class="btn mb-8"
49
- shareData={{
50
- text: "Check out this page: ",
51
- title: "drab",
52
- url: "https://drab.robino.dev",
53
- }}
54
- >
55
- Share URL
56
- </ShareButton>
57
-
58
- <div>
59
- <label class="label" for="fileInput">Upload File</label>
60
- <input
61
- type="file"
62
- id="fileInput"
63
- class="input mb-4"
64
- bind:this={fileInput}
65
- on:input={onInput}
66
- />
67
- <ShareButton class="btn" bind:shareData={fileShareData}>
68
- Share File
69
- </ShareButton>
70
- </div>
33
+ <script lang="ts">
34
+ import { ShareButton } from "drab";
35
+
36
+ let fileInput: HTMLInputElement;
37
+
38
+ let fileShareData: ShareData;
39
+
40
+ const onInput = () => {
41
+ if (fileInput.files) {
42
+ fileShareData.files = [fileInput.files[0]];
43
+ }
44
+ };
45
+ </script>
46
+
47
+ <ShareButton
48
+ class="btn mb-8"
49
+ shareData={{
50
+ text: "Check out this page: ",
51
+ title: "drab",
52
+ url: "https://drab.robino.dev",
53
+ }}
54
+ >
55
+ Share URL
56
+ </ShareButton>
57
+
58
+ <div>
59
+ <label class="label" for="fileInput">Upload File</label>
60
+ <input
61
+ type="file"
62
+ id="fileInput"
63
+ class="input mb-4"
64
+ bind:this={fileInput}
65
+ on:input={onInput}
66
+ />
67
+ <ShareButton class="btn" bind:shareData={fileShareData}>
68
+ Share File
69
+ </ShareButton>
70
+ </div>
71
71
  ```
72
72
  -->
73
73
 
@@ -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="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>
58
58
  ```
59
- -->
60
-
59
+ -->
60
+
61
61
  <script>import { onMount } from "svelte";
62
62
  import {
63
63
  blur,
@@ -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 === "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>
@@ -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/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": "2.8.7",
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.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
+ }