drab 3.0.7 → 4.0.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.
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 backdropStyles = true;
|
|
89
|
+
let displaySheet = false;
|
|
93
90
|
const dispatch = createEventDispatcher();
|
|
94
91
|
const close = () => display = false;
|
|
95
92
|
const onKeyDown = (e) => {
|
|
@@ -102,45 +99,54 @@ 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
|
+
backdropStyles = true;
|
|
105
|
+
displaySheet = true;
|
|
106
|
+
} else {
|
|
107
|
+
backdropStyles = false;
|
|
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:d-backdrop-right={position === "r"}
|
|
135
|
+
class="backdrop {backdropStyles ? className : ''}"
|
|
136
|
+
class:backdrop-bottom={position === "b"}
|
|
137
|
+
class:backdrop-top={position === "t"}
|
|
138
|
+
class:backdrop-right={position === "r"}
|
|
133
139
|
{id}
|
|
134
140
|
>
|
|
135
141
|
<div
|
|
136
142
|
bind:this={sheet}
|
|
137
|
-
transition:fly={
|
|
143
|
+
transition:fly={transition ? transition : { duration: 0 }}
|
|
138
144
|
use:lifecycle
|
|
139
145
|
role="dialog"
|
|
140
146
|
tabindex="-1"
|
|
141
|
-
style={position ===
|
|
147
|
+
style="outline: none; {position === 't' || position === 'b'
|
|
142
148
|
? `max-height: ${maxSize}px;`
|
|
143
|
-
: `max-width: ${maxSize}px`}
|
|
149
|
+
: `max-width: ${maxSize}px`}"
|
|
144
150
|
class={classSheet}
|
|
145
151
|
>
|
|
146
152
|
<slot>Content</slot>
|
|
@@ -153,7 +159,7 @@ onMount(() => {
|
|
|
153
159
|
button {
|
|
154
160
|
flex-grow: 1;
|
|
155
161
|
}
|
|
156
|
-
.
|
|
162
|
+
.backdrop {
|
|
157
163
|
display: flex;
|
|
158
164
|
position: fixed;
|
|
159
165
|
top: 0;
|
|
@@ -162,13 +168,13 @@ onMount(() => {
|
|
|
162
168
|
left: 0;
|
|
163
169
|
overflow: hidden;
|
|
164
170
|
}
|
|
165
|
-
.
|
|
171
|
+
.backdrop-bottom {
|
|
166
172
|
flex-direction: column-reverse;
|
|
167
173
|
}
|
|
168
|
-
.
|
|
174
|
+
.backdrop-top {
|
|
169
175
|
flex-direction: column;
|
|
170
176
|
}
|
|
171
|
-
.
|
|
177
|
+
.backdrop-right {
|
|
172
178
|
flex-direction: row-reverse;
|
|
173
179
|
}
|
|
174
180
|
</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.1",
|
|
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
|
".": {
|
|
@@ -56,15 +57,18 @@
|
|
|
56
57
|
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
57
58
|
"@sveltejs/kit": "^1.24.1",
|
|
58
59
|
"@sveltejs/package": "^2.2.2",
|
|
59
|
-
"@tailwindcss/typography": "^0.5.
|
|
60
|
-
"@types/node": "^20.
|
|
60
|
+
"@tailwindcss/typography": "^0.5.10",
|
|
61
|
+
"@types/node": "^20.6.0",
|
|
61
62
|
"@typescript-eslint/eslint-plugin": "^6.6.0",
|
|
62
63
|
"@typescript-eslint/parser": "^6.6.0",
|
|
63
64
|
"autoprefixer": "^10.4.15",
|
|
64
|
-
"eslint": "^8.
|
|
65
|
+
"eslint": "^8.49.0",
|
|
65
66
|
"eslint-config-prettier": "^9.0.0",
|
|
66
|
-
"eslint-plugin-svelte": "^2.33.
|
|
67
|
-
"
|
|
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",
|
|
68
72
|
"postcss": "^8.4.29",
|
|
69
73
|
"prettier": "^3.0.3",
|
|
70
74
|
"prettier-plugin-svelte": "^3.0.3",
|
|
@@ -74,7 +78,7 @@
|
|
|
74
78
|
"tailwindcss": "^3.3.3",
|
|
75
79
|
"tslib": "^2.6.2",
|
|
76
80
|
"typescript": "^5.2.2",
|
|
77
|
-
"uico": "^0.1.
|
|
81
|
+
"uico": "^0.1.3",
|
|
78
82
|
"vite": "^4.4.9"
|
|
79
83
|
},
|
|
80
84
|
"svelte": "./dist/index.js",
|