drab 3.0.6 → 4.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.
package/README.md
CHANGED
|
@@ -34,6 +34,7 @@ These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/
|
|
|
34
34
|
**drab** is a collection of useful components, not a complete UI kit. If **drab** isn't what you are looking for, here are some other libraries to check out.
|
|
35
35
|
|
|
36
36
|
- [Skeleton](https://skeleton.dev)
|
|
37
|
+
- [Carbon Components](https://carbon-components-svelte.onrender.com/)
|
|
37
38
|
- [Melt UI](https://www.melt-ui.com/)
|
|
38
39
|
- [shadcn-svelte](https://www.shadcn-svelte.com/)
|
|
39
40
|
- [Svelte-HeadlessUI](https://captaincodeman.github.io/svelte-headlessui/)
|
|
@@ -30,12 +30,8 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
|
|
|
30
30
|
let value = "";
|
|
31
31
|
</script>
|
|
32
32
|
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
type="text"
|
|
36
|
-
placeholder="Enter text to copy"
|
|
37
|
-
bind:value
|
|
38
|
-
/>
|
|
33
|
+
<label for="copyInput" class="label">Text to Copy</label>
|
|
34
|
+
<input id="copyInput" class="input mb-4" type="text" bind:value />
|
|
39
35
|
|
|
40
36
|
<CopyButton class="button button-primary" blobParts={[value]} />
|
|
41
37
|
```
|
|
@@ -49,12 +49,8 @@ export type CopyButtonSlots = typeof __propDef.slots;
|
|
|
49
49
|
* let value = "";
|
|
50
50
|
* </script>
|
|
51
51
|
*
|
|
52
|
-
* <
|
|
53
|
-
* class="input mb-4"
|
|
54
|
-
* type="text"
|
|
55
|
-
* placeholder="Enter text to copy"
|
|
56
|
-
* bind:value
|
|
57
|
-
* />
|
|
52
|
+
* <label for="copyInput" class="label">Text to Copy</label>
|
|
53
|
+
* <input id="copyInput" class="input mb-4" type="text" bind:value />
|
|
58
54
|
*
|
|
59
55
|
* <CopyButton class="button button-primary" blobParts={[value]} />
|
|
60
56
|
* ```
|
|
@@ -13,8 +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
|
-
- `
|
|
17
|
-
- `transition` - blurs the entire component, set to `false` to remove
|
|
16
|
+
- `transition` - flies the sheet, set to `false` to remove
|
|
18
17
|
|
|
19
18
|
@slots
|
|
20
19
|
|
|
@@ -73,11 +72,8 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
|
|
|
73
72
|
```
|
|
74
73
|
-->
|
|
75
74
|
|
|
76
|
-
<script>import { createEventDispatcher, onMount } from "svelte";
|
|
77
|
-
import {
|
|
78
|
-
blur,
|
|
79
|
-
fly
|
|
80
|
-
} from "svelte/transition";
|
|
75
|
+
<script>import { createEventDispatcher, onMount, tick } from "svelte";
|
|
76
|
+
import { fly } from "svelte/transition";
|
|
81
77
|
import { prefersReducedMotion } from "../util/accessibility";
|
|
82
78
|
import { duration } from "../util/transition";
|
|
83
79
|
let className = "";
|
|
@@ -85,11 +81,12 @@ export { className as class };
|
|
|
85
81
|
export let id = "";
|
|
86
82
|
export let classSheet = "";
|
|
87
83
|
export let display = false;
|
|
88
|
-
export let transition = { duration };
|
|
89
84
|
export let position = "l";
|
|
90
85
|
export let maxSize = 488;
|
|
91
|
-
export let
|
|
86
|
+
export let transition = { duration, opacity: 1 };
|
|
92
87
|
let sheet;
|
|
88
|
+
let backdropNone = false;
|
|
89
|
+
let displaySheet = false;
|
|
93
90
|
const dispatch = createEventDispatcher();
|
|
94
91
|
const close = () => display = false;
|
|
95
92
|
const onKeyDown = (e) => {
|
|
@@ -102,45 +99,55 @@ const lifecycle = (node) => {
|
|
|
102
99
|
node.focus();
|
|
103
100
|
return { destroy: () => dispatch("destroy") };
|
|
104
101
|
};
|
|
105
|
-
|
|
102
|
+
const displayController = async (display2) => {
|
|
103
|
+
if (display2) {
|
|
104
|
+
backdropNone = false;
|
|
105
|
+
displaySheet = true;
|
|
106
|
+
} else {
|
|
107
|
+
backdropNone = true;
|
|
108
|
+
await tick();
|
|
109
|
+
displaySheet = false;
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
if (transition && !transition.x && !transition.y) {
|
|
106
113
|
if (position === "b") {
|
|
107
|
-
|
|
114
|
+
transition.y = maxSize;
|
|
108
115
|
} else if (position === "t") {
|
|
109
|
-
|
|
116
|
+
transition.y = -maxSize;
|
|
110
117
|
} else if (position === "r") {
|
|
111
|
-
|
|
118
|
+
transition.x = maxSize;
|
|
112
119
|
} else {
|
|
113
|
-
|
|
120
|
+
transition.x = -maxSize;
|
|
114
121
|
}
|
|
115
122
|
}
|
|
116
123
|
onMount(() => {
|
|
117
|
-
if (prefersReducedMotion())
|
|
124
|
+
if (prefersReducedMotion())
|
|
118
125
|
transition = false;
|
|
119
|
-
transitionSheet = false;
|
|
120
|
-
}
|
|
121
126
|
});
|
|
127
|
+
$:
|
|
128
|
+
displayController(display);
|
|
122
129
|
</script>
|
|
123
130
|
|
|
124
131
|
<svelte:body on:keydown={onKeyDown} />
|
|
125
132
|
|
|
126
|
-
{#if
|
|
133
|
+
{#if displaySheet}
|
|
127
134
|
<div
|
|
128
|
-
|
|
129
|
-
class="
|
|
130
|
-
class:
|
|
131
|
-
class:
|
|
132
|
-
class:
|
|
135
|
+
class="backdrop {className}"
|
|
136
|
+
class:backdrop-bottom={position === "b"}
|
|
137
|
+
class:backdrop-top={position === "t"}
|
|
138
|
+
class:backdrop-right={position === "r"}
|
|
139
|
+
class:backdrop-none={backdropNone}
|
|
133
140
|
{id}
|
|
134
141
|
>
|
|
135
142
|
<div
|
|
136
143
|
bind:this={sheet}
|
|
137
|
-
transition:fly={
|
|
144
|
+
transition:fly={transition ? transition : { duration: 0 }}
|
|
138
145
|
use:lifecycle
|
|
139
146
|
role="dialog"
|
|
140
147
|
tabindex="-1"
|
|
141
|
-
style={position ===
|
|
148
|
+
style="outline: none; {position === 't' || position === 'b'
|
|
142
149
|
? `max-height: ${maxSize}px;`
|
|
143
|
-
: `max-width: ${maxSize}px`}
|
|
150
|
+
: `max-width: ${maxSize}px`}"
|
|
144
151
|
class={classSheet}
|
|
145
152
|
>
|
|
146
153
|
<slot>Content</slot>
|
|
@@ -153,7 +160,7 @@ onMount(() => {
|
|
|
153
160
|
button {
|
|
154
161
|
flex-grow: 1;
|
|
155
162
|
}
|
|
156
|
-
.
|
|
163
|
+
.backdrop {
|
|
157
164
|
display: flex;
|
|
158
165
|
position: fixed;
|
|
159
166
|
top: 0;
|
|
@@ -162,13 +169,17 @@ onMount(() => {
|
|
|
162
169
|
left: 0;
|
|
163
170
|
overflow: hidden;
|
|
164
171
|
}
|
|
165
|
-
.
|
|
172
|
+
.backdrop-bottom {
|
|
166
173
|
flex-direction: column-reverse;
|
|
167
174
|
}
|
|
168
|
-
.
|
|
175
|
+
.backdrop-top {
|
|
169
176
|
flex-direction: column;
|
|
170
177
|
}
|
|
171
|
-
.
|
|
178
|
+
.backdrop-right {
|
|
172
179
|
flex-direction: row-reverse;
|
|
173
180
|
}
|
|
181
|
+
.backdrop-none {
|
|
182
|
+
backdrop-filter: none;
|
|
183
|
+
background: none;
|
|
184
|
+
}
|
|
174
185
|
</style>
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { type
|
|
2
|
+
import { type FlyParams } from "svelte/transition";
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
class?: string | undefined;
|
|
6
6
|
id?: string | undefined;
|
|
7
7
|
/** sheet class - not the backdrop */ classSheet?: string | undefined;
|
|
8
8
|
/** controls whether the sheet is displayed*/ display?: boolean | undefined;
|
|
9
|
-
/** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
|
|
10
9
|
/** determines the position of sheet */ position?: "t" | "r" | "b" | "l" | undefined;
|
|
11
10
|
/** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
|
|
12
|
-
/** flies the sheet, set to `false` to remove */
|
|
11
|
+
/** flies the sheet, set to `false` to remove */ transition?: false | FlyParams | undefined;
|
|
13
12
|
};
|
|
14
13
|
events: {
|
|
15
14
|
mount: CustomEvent<any>;
|
|
@@ -37,8 +36,7 @@ export type SheetSlots = typeof __propDef.slots;
|
|
|
37
36
|
* - `id`
|
|
38
37
|
* - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
|
|
39
38
|
* - `position` - determines the position of sheet
|
|
40
|
-
* - `
|
|
41
|
-
* - `transition` - blurs the entire component, set to `false` to remove
|
|
39
|
+
* - `transition` - flies the sheet, set to `false` to remove
|
|
42
40
|
*
|
|
43
41
|
* @slots
|
|
44
42
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "An Unstyled Svelte Component Library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"repository": "github:rossrobino/drab",
|
|
29
29
|
"scripts": {
|
|
30
|
-
"dev": "vite dev
|
|
30
|
+
"dev": "vite dev",
|
|
31
|
+
"host": "vite dev --host",
|
|
31
32
|
"build": "npm run doc && vite build && npm run package",
|
|
32
33
|
"preview": "vite preview",
|
|
33
34
|
"package": "svelte-kit sync && svelte-package && publint",
|
|
@@ -36,8 +37,8 @@
|
|
|
36
37
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
37
38
|
"lint": "prettier --check . && eslint .",
|
|
38
39
|
"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"
|
|
40
|
+
"pub": "npm i && npm run doc && npm publish --access public",
|
|
41
|
+
"doc": "npm run format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
|
|
41
42
|
},
|
|
42
43
|
"exports": {
|
|
43
44
|
".": {
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
"files": [
|
|
49
50
|
"dist"
|
|
50
51
|
],
|
|
52
|
+
"sideEffects": false,
|
|
51
53
|
"dependencies": {
|
|
52
54
|
"svelte": "^4.2.0"
|
|
53
55
|
},
|
|
@@ -55,15 +57,18 @@
|
|
|
55
57
|
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
56
58
|
"@sveltejs/kit": "^1.24.1",
|
|
57
59
|
"@sveltejs/package": "^2.2.2",
|
|
58
|
-
"@tailwindcss/typography": "^0.5.
|
|
59
|
-
"@types/node": "^20.
|
|
60
|
+
"@tailwindcss/typography": "^0.5.10",
|
|
61
|
+
"@types/node": "^20.6.0",
|
|
60
62
|
"@typescript-eslint/eslint-plugin": "^6.6.0",
|
|
61
63
|
"@typescript-eslint/parser": "^6.6.0",
|
|
62
64
|
"autoprefixer": "^10.4.15",
|
|
63
|
-
"eslint": "^8.
|
|
65
|
+
"eslint": "^8.49.0",
|
|
64
66
|
"eslint-config-prettier": "^9.0.0",
|
|
65
|
-
"eslint-plugin-svelte": "^2.33.
|
|
66
|
-
"
|
|
67
|
+
"eslint-plugin-svelte": "^2.33.1",
|
|
68
|
+
"highlight.js": "^11.8.0",
|
|
69
|
+
"marked": "^9.0.0",
|
|
70
|
+
"marked-highlight": "^2.0.6",
|
|
71
|
+
"marked-smartypants": "^1.1.3",
|
|
67
72
|
"postcss": "^8.4.29",
|
|
68
73
|
"prettier": "^3.0.3",
|
|
69
74
|
"prettier-plugin-svelte": "^3.0.3",
|
|
@@ -73,7 +78,7 @@
|
|
|
73
78
|
"tailwindcss": "^3.3.3",
|
|
74
79
|
"tslib": "^2.6.2",
|
|
75
80
|
"typescript": "^5.2.2",
|
|
76
|
-
"uico": "^0.1.
|
|
81
|
+
"uico": "^0.1.3",
|
|
77
82
|
"vite": "^4.4.9"
|
|
78
83
|
},
|
|
79
84
|
"svelte": "./dist/index.js",
|