drab 4.0.1 → 4.1.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 +10 -5
- package/dist/components/Tablature.svelte +173 -0
- package/dist/components/Tablature.svelte.d.ts +93 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -7,7 +7,12 @@
|
|
|
7
7
|
|
|
8
8
|
## About
|
|
9
9
|
|
|
10
|
-
**drab** focuses on providing JavaScript functionality where it's most useful. Many of the components are helpful wrappers around browser APIs.
|
|
10
|
+
**drab** focuses on providing JavaScript functionality where it's most useful. Many of the components are helpful wrappers around browser APIs. Here are some of the features of the library.
|
|
11
|
+
|
|
12
|
+
- Components are minimal in size, currently **drab** has one dependency--Svelte
|
|
13
|
+
- Whenever possible, components are [progressively enhanced](https://drab.robino.dev/docs/ShareButton) or provide a fallback [noscript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) message
|
|
14
|
+
- Transitions are disabled for users who prefer reduced motion
|
|
15
|
+
- All components support server side rendering--they will not break your application depending on your rendering preferences
|
|
11
16
|
|
|
12
17
|
This library takes a more opinionated approach compared to some headless UI libraries by providing the basic HTML structure for every component, as well as default positioning for elements like the [sheet](https://drab.robino.dev/docs/Sheet). However, these components can still be further customized using styles, [slots](https://svelte.dev/tutorial/slots), and [slot props](https://svelte.dev/tutorial/slot-props).
|
|
13
18
|
|
|
@@ -20,19 +25,19 @@ If you haven't used Svelte before, start with the [tutorial](https://svelte.dev/
|
|
|
20
25
|
- [Vite](https://vitejs.dev/guide/)
|
|
21
26
|
|
|
22
27
|
```bash
|
|
23
|
-
npm
|
|
28
|
+
npm i -D drab
|
|
24
29
|
```
|
|
25
30
|
|
|
26
31
|
## Documentation
|
|
27
32
|
|
|
28
|
-
The library provides inline documentation for each component, allowing you to conveniently access the documentation by hovering over the component in your text editor after importing it. Additionally, every prop is documented using JSDoc and TypeScript. By hovering over a prop, you can retrieve its type and description.
|
|
29
|
-
|
|
30
|
-
These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/).
|
|
33
|
+
The library provides inline documentation for each component using JSDoc, allowing you to conveniently access the documentation by hovering over the component in your text editor after importing it. Additionally, every prop is documented using JSDoc and TypeScript. By hovering over a prop, you can retrieve its type and description.
|
|
31
34
|
|
|
32
35
|
## Other UI Libraries
|
|
33
36
|
|
|
34
37
|
**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
38
|
|
|
39
|
+
- [uico](https://uico.robino.dev) - a Tailwind plugin for CSS components designed to be complementary to **drab** (used to create this site)
|
|
40
|
+
- [daisyUI](https://daisyui.com/)
|
|
36
41
|
- [Skeleton](https://skeleton.dev)
|
|
37
42
|
- [Carbon Components](https://carbon-components-svelte.onrender.com/)
|
|
38
43
|
- [Melt UI](https://www.melt-ui.com/)
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
@component
|
|
3
|
+
|
|
4
|
+
### Tablature
|
|
5
|
+
|
|
6
|
+
A complementary component to the `FrettedChord` for displaying a measure of tablature for a fretted instrument like guitar or ukulele. Created with HTML elements so it is customizable and responsive to the size of the container.
|
|
7
|
+
|
|
8
|
+
@props
|
|
9
|
+
|
|
10
|
+
- `beats` - number of beats in the measure, defaults to `4`
|
|
11
|
+
- `class`
|
|
12
|
+
- `id`
|
|
13
|
+
- `notes` - an array of notes
|
|
14
|
+
- `repeatEnd` - puts a repeat at the end of the measure
|
|
15
|
+
- `repeatStart` - puts a repeat at the start of the measure
|
|
16
|
+
- `strings` - number of strings on the instrument, defaults to `6`
|
|
17
|
+
|
|
18
|
+
@example
|
|
19
|
+
|
|
20
|
+
```svelte
|
|
21
|
+
<script lang="ts">
|
|
22
|
+
import { Tablature } from "drab";
|
|
23
|
+
import type { ComponentProps } from "svelte";
|
|
24
|
+
|
|
25
|
+
const notes: ComponentProps<Tablature>["notes"] = [
|
|
26
|
+
{
|
|
27
|
+
fret: 0,
|
|
28
|
+
beat: 1,
|
|
29
|
+
string: 1,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
fret: 1,
|
|
33
|
+
beat: 2,
|
|
34
|
+
string: 2,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
fret: "X",
|
|
38
|
+
beat: 2,
|
|
39
|
+
string: 3,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
fret: 2,
|
|
43
|
+
beat: 3,
|
|
44
|
+
string: 4,
|
|
45
|
+
mod: "/3p2",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
fret: 7,
|
|
49
|
+
beat: 4,
|
|
50
|
+
string: 3,
|
|
51
|
+
},
|
|
52
|
+
];
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<div class="font-mono font-semibold">
|
|
56
|
+
<div class="mb-8 h-24">
|
|
57
|
+
<Tablature {notes} repeatStart />
|
|
58
|
+
</div>
|
|
59
|
+
<div class="h-16 text-sm">
|
|
60
|
+
<Tablature {notes} strings={4} repeatEnd />
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
```
|
|
64
|
+
-->
|
|
65
|
+
|
|
66
|
+
<script>let className = "";
|
|
67
|
+
export { className as class };
|
|
68
|
+
export let id = "";
|
|
69
|
+
export let strings = 6;
|
|
70
|
+
export let beats = 4;
|
|
71
|
+
export let repeatStart = false;
|
|
72
|
+
export let repeatEnd = false;
|
|
73
|
+
export let notes = [];
|
|
74
|
+
const dotSize = 5;
|
|
75
|
+
const dotXOffset = 9;
|
|
76
|
+
const yOffset = (stringNumber) => {
|
|
77
|
+
return 100 / strings * stringNumber + 100 / strings / 2;
|
|
78
|
+
};
|
|
79
|
+
const xOffset = (beat) => {
|
|
80
|
+
return 100 / beats * beat - 100 / beats / 2;
|
|
81
|
+
};
|
|
82
|
+
const dotYOffset = () => {
|
|
83
|
+
const stringPosition = strings < 5 ? 0.5 : 1.5;
|
|
84
|
+
return yOffset(stringPosition) - dotSize / 2;
|
|
85
|
+
};
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<div
|
|
89
|
+
class="measure {className}"
|
|
90
|
+
{id}
|
|
91
|
+
style:--top-offset="{yOffset(0)}%"
|
|
92
|
+
style:--dot-size="{dotSize}%"
|
|
93
|
+
>
|
|
94
|
+
{#each Array.from({ length: strings }, (v, k) => k) as string}
|
|
95
|
+
<div class="string" style:top="{yOffset(string)}%"></div>
|
|
96
|
+
{/each}
|
|
97
|
+
{#each notes as note}
|
|
98
|
+
<div
|
|
99
|
+
class="note"
|
|
100
|
+
style:top="{yOffset(note.string - 1)}%"
|
|
101
|
+
style:left="{xOffset(note.beat)}%"
|
|
102
|
+
>
|
|
103
|
+
<div style:display="flex">
|
|
104
|
+
<span>{note.fret}</span>
|
|
105
|
+
{#if note.mod}
|
|
106
|
+
<span>{note.mod}</span>
|
|
107
|
+
{/if}
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
{/each}
|
|
111
|
+
<div class="bar" style:left="0" style:width={repeatStart ? "3px" : ""}></div>
|
|
112
|
+
<div class="bar" style:right="0" style:width={repeatEnd ? "3px" : ""}></div>
|
|
113
|
+
{#if repeatStart}
|
|
114
|
+
<div class="bar" style:left="5px"></div>
|
|
115
|
+
<div
|
|
116
|
+
class="dot"
|
|
117
|
+
style:top="{dotYOffset()}%"
|
|
118
|
+
style:left="{dotXOffset}px"
|
|
119
|
+
></div>
|
|
120
|
+
<div
|
|
121
|
+
class="dot"
|
|
122
|
+
style:bottom="{dotYOffset()}%"
|
|
123
|
+
style:left="{dotXOffset}px"
|
|
124
|
+
></div>
|
|
125
|
+
{/if}
|
|
126
|
+
{#if repeatEnd}
|
|
127
|
+
<div class="bar" style:right="5px"></div>
|
|
128
|
+
<div
|
|
129
|
+
class="dot"
|
|
130
|
+
style:top="{dotYOffset()}%"
|
|
131
|
+
style:right="{dotXOffset}px"
|
|
132
|
+
></div>
|
|
133
|
+
<div
|
|
134
|
+
class="dot"
|
|
135
|
+
style:bottom="{dotYOffset()}%"
|
|
136
|
+
style:right="{dotXOffset}px"
|
|
137
|
+
></div>
|
|
138
|
+
{/if}
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<style>
|
|
142
|
+
.measure {
|
|
143
|
+
position: relative;
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 100%;
|
|
146
|
+
}
|
|
147
|
+
.note {
|
|
148
|
+
position: absolute;
|
|
149
|
+
line-height: 0;
|
|
150
|
+
margin-left: -0.5ch;
|
|
151
|
+
letter-spacing: 0.1em;
|
|
152
|
+
}
|
|
153
|
+
.string {
|
|
154
|
+
position: absolute;
|
|
155
|
+
opacity: 35%;
|
|
156
|
+
width: 100%;
|
|
157
|
+
border-top: 1px solid currentColor;
|
|
158
|
+
}
|
|
159
|
+
.bar {
|
|
160
|
+
position: absolute;
|
|
161
|
+
background-color: currentColor;
|
|
162
|
+
width: 1.2px;
|
|
163
|
+
top: var(--top-offset);
|
|
164
|
+
bottom: calc(var(--top-offset) - 0.8px);
|
|
165
|
+
}
|
|
166
|
+
.dot {
|
|
167
|
+
position: absolute;
|
|
168
|
+
height: var(--dot-size);
|
|
169
|
+
aspect-ratio: 1;
|
|
170
|
+
background-color: currentColor;
|
|
171
|
+
border-radius: 999px;
|
|
172
|
+
}
|
|
173
|
+
</style>
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
class?: string | undefined;
|
|
5
|
+
id?: string | undefined;
|
|
6
|
+
/** number of strings on the instrument, defaults to `6` */ strings?: number | undefined;
|
|
7
|
+
/** number of beats in the measure, defaults to `4` */ beats?: number | undefined;
|
|
8
|
+
/** puts a repeat at the start of the measure */ repeatStart?: boolean | undefined;
|
|
9
|
+
/** puts a repeat at the end of the measure */ repeatEnd?: boolean | undefined;
|
|
10
|
+
/** an array of notes */ notes?: {
|
|
11
|
+
/** string number */
|
|
12
|
+
string: number;
|
|
13
|
+
/** fret number */
|
|
14
|
+
fret: number | string;
|
|
15
|
+
/** beat number */
|
|
16
|
+
beat: number;
|
|
17
|
+
/** custom modifier - ex: "/3p2" signifies a slide to 3 and pull off to 2 */
|
|
18
|
+
mod?: string | undefined;
|
|
19
|
+
}[] | undefined;
|
|
20
|
+
};
|
|
21
|
+
events: {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
};
|
|
24
|
+
slots: {};
|
|
25
|
+
};
|
|
26
|
+
export type TablatureProps = typeof __propDef.props;
|
|
27
|
+
export type TablatureEvents = typeof __propDef.events;
|
|
28
|
+
export type TablatureSlots = typeof __propDef.slots;
|
|
29
|
+
/**
|
|
30
|
+
* ### Tablature
|
|
31
|
+
*
|
|
32
|
+
* A complementary component to the `FrettedChord` for displaying a measure of tablature for a fretted instrument like guitar or ukulele. Created with HTML elements so it is customizable and responsive to the size of the container.
|
|
33
|
+
*
|
|
34
|
+
* @props
|
|
35
|
+
*
|
|
36
|
+
* - `beats` - number of beats in the measure, defaults to `4`
|
|
37
|
+
* - `class`
|
|
38
|
+
* - `id`
|
|
39
|
+
* - `notes` - an array of notes
|
|
40
|
+
* - `repeatEnd` - puts a repeat at the end of the measure
|
|
41
|
+
* - `repeatStart` - puts a repeat at the start of the measure
|
|
42
|
+
* - `strings` - number of strings on the instrument, defaults to `6`
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
*
|
|
46
|
+
* ```svelte
|
|
47
|
+
* <script lang="ts">
|
|
48
|
+
* import { Tablature } from "drab";
|
|
49
|
+
* import type { ComponentProps } from "svelte";
|
|
50
|
+
*
|
|
51
|
+
* const notes: ComponentProps<Tablature>["notes"] = [
|
|
52
|
+
* {
|
|
53
|
+
* fret: 0,
|
|
54
|
+
* beat: 1,
|
|
55
|
+
* string: 1,
|
|
56
|
+
* },
|
|
57
|
+
* {
|
|
58
|
+
* fret: 1,
|
|
59
|
+
* beat: 2,
|
|
60
|
+
* string: 2,
|
|
61
|
+
* },
|
|
62
|
+
* {
|
|
63
|
+
* fret: "X",
|
|
64
|
+
* beat: 2,
|
|
65
|
+
* string: 3,
|
|
66
|
+
* },
|
|
67
|
+
* {
|
|
68
|
+
* fret: 2,
|
|
69
|
+
* beat: 3,
|
|
70
|
+
* string: 4,
|
|
71
|
+
* mod: "/3p2",
|
|
72
|
+
* },
|
|
73
|
+
* {
|
|
74
|
+
* fret: 7,
|
|
75
|
+
* beat: 4,
|
|
76
|
+
* string: 3,
|
|
77
|
+
* },
|
|
78
|
+
* ];
|
|
79
|
+
* </script>
|
|
80
|
+
*
|
|
81
|
+
* <div class="font-mono font-semibold">
|
|
82
|
+
* <div class="mb-8 h-24">
|
|
83
|
+
* <Tablature {notes} repeatStart />
|
|
84
|
+
* </div>
|
|
85
|
+
* <div class="h-16 text-sm">
|
|
86
|
+
* <Tablature {notes} strings={4} repeatEnd />
|
|
87
|
+
* </div>
|
|
88
|
+
* </div>
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
export default class Tablature extends SvelteComponent<TablatureProps, TablatureEvents, TablatureSlots> {
|
|
92
|
+
}
|
|
93
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -9,5 +9,6 @@ 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 Tablature from "./components/Tablature.svelte";
|
|
12
13
|
import YouTube from "./components/YouTube.svelte";
|
|
13
|
-
export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
|
|
14
|
+
export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, Tablature, YouTube, };
|
package/dist/index.js
CHANGED
|
@@ -9,5 +9,6 @@ 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 Tablature from "./components/Tablature.svelte";
|
|
12
13
|
import YouTube from "./components/YouTube.svelte";
|
|
13
|
-
export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
|
|
14
|
+
export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, Tablature, YouTube, };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"description": "An Unstyled Svelte Component Library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"Popover",
|
|
18
18
|
"Share",
|
|
19
19
|
"Sheet",
|
|
20
|
+
"Tablature",
|
|
20
21
|
"YouTube"
|
|
21
22
|
],
|
|
22
23
|
"homepage": "https://drab.robino.dev",
|
|
@@ -55,12 +56,12 @@
|
|
|
55
56
|
},
|
|
56
57
|
"devDependencies": {
|
|
57
58
|
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
58
|
-
"@sveltejs/kit": "^1.
|
|
59
|
+
"@sveltejs/kit": "^1.25.0",
|
|
59
60
|
"@sveltejs/package": "^2.2.2",
|
|
60
61
|
"@tailwindcss/typography": "^0.5.10",
|
|
61
62
|
"@types/node": "^20.6.0",
|
|
62
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
63
|
-
"@typescript-eslint/parser": "^6.
|
|
63
|
+
"@typescript-eslint/eslint-plugin": "^6.7.0",
|
|
64
|
+
"@typescript-eslint/parser": "^6.7.0",
|
|
64
65
|
"autoprefixer": "^10.4.15",
|
|
65
66
|
"eslint": "^8.49.0",
|
|
66
67
|
"eslint-config-prettier": "^9.0.0",
|