drab 2.1.1 → 2.2.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/dist/components/Accordion.svelte +170 -0
- package/dist/components/Accordion.svelte.d.ts +86 -0
- package/dist/components/ContextMenu.svelte +9 -8
- package/dist/components/ContextMenu.svelte.d.ts +9 -9
- package/dist/components/CopyButton.svelte +1 -1
- package/dist/components/CopyButton.svelte.d.ts +2 -2
- package/dist/components/DataTable.svelte +13 -13
- package/dist/components/DataTable.svelte.d.ts +26 -26
- package/dist/components/Editor.svelte +2 -2
- package/dist/components/Editor.svelte.d.ts +7 -7
- package/dist/components/FullscreenButton.svelte +1 -1
- package/dist/components/FullscreenButton.svelte.d.ts +2 -2
- package/dist/components/Popover.svelte +3 -2
- package/dist/components/Popover.svelte.d.ts +4 -4
- package/dist/components/ShareButton.svelte +2 -2
- package/dist/components/ShareButton.svelte.d.ts +4 -4
- package/dist/components/Tabs.svelte +102 -0
- package/dist/components/Tabs.svelte.d.ts +72 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -1
- package/dist/util/accessibility.d.ts +6 -0
- package/dist/util/accessibility.js +11 -0
- package/package.json +3 -2
- package/dist/util/buildDocs.d.ts +0 -1
- package/dist/util/buildDocs.js +0 -3
- package/dist/util/documentProps.d.ts +0 -2
- package/dist/util/documentProps.js +0 -86
@@ -0,0 +1,170 @@
|
|
1
|
+
<!--
|
2
|
+
@component
|
3
|
+
|
4
|
+
### Accordion
|
5
|
+
|
6
|
+
Displays a list of `details` elements.
|
7
|
+
|
8
|
+
@props
|
9
|
+
|
10
|
+
- `autoClose` - if `true`, other items close when a new one is opened
|
11
|
+
- `classDetails` - class of the `div` around each `details` element
|
12
|
+
- `classIcon` - class of the `div` around the icon
|
13
|
+
- `classSlot` - class of all the `slot` elements
|
14
|
+
- `classSummary` - class of all the `summary` elements
|
15
|
+
- `class`
|
16
|
+
- `content` - array of `AccordionContent` elements
|
17
|
+
- `icon`
|
18
|
+
- `id`
|
19
|
+
- `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
|
20
|
+
|
21
|
+
@slots
|
22
|
+
|
23
|
+
Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
|
24
|
+
|
25
|
+
@example
|
26
|
+
|
27
|
+
```svelte
|
28
|
+
<script>
|
29
|
+
import { Accordion } from "drab";
|
30
|
+
</script>
|
31
|
+
|
32
|
+
<Accordion
|
33
|
+
content={[
|
34
|
+
{ summary: "Is it accessible?", slot: "Yes." },
|
35
|
+
{
|
36
|
+
summary: "Is it styled?",
|
37
|
+
slot: "Nope, style with global styles.",
|
38
|
+
},
|
39
|
+
{
|
40
|
+
summary: "Is it animated?",
|
41
|
+
slot: "Yes, with the transition prop.",
|
42
|
+
},
|
43
|
+
{ summary: "Does it work without Javascript?", slot: "Yes." },
|
44
|
+
]}
|
45
|
+
/>
|
46
|
+
```
|
47
|
+
-->
|
48
|
+
|
49
|
+
<script context="module"></script>
|
50
|
+
|
51
|
+
<script>import { onMount } from "svelte";
|
52
|
+
import { slide } from "svelte/transition";
|
53
|
+
import { prefersReducedMotion } from "../util/accessibility";
|
54
|
+
let className = "";
|
55
|
+
export { className as class };
|
56
|
+
export let id = "";
|
57
|
+
export let content;
|
58
|
+
export let icon = "";
|
59
|
+
export let classDetails = "";
|
60
|
+
export let classSummary = "";
|
61
|
+
export let classSlot = "";
|
62
|
+
export let classIcon = "";
|
63
|
+
export let transition = {};
|
64
|
+
export let autoClose = true;
|
65
|
+
let clientJs = false;
|
66
|
+
for (const item of content) {
|
67
|
+
if (!item.classContentDetails)
|
68
|
+
item.classContentDetails = "";
|
69
|
+
if (!item.classContentSlot)
|
70
|
+
item.classContentSlot = "";
|
71
|
+
if (!item.classContentSummary)
|
72
|
+
item.classContentSummary = "";
|
73
|
+
}
|
74
|
+
const toggleOpen = (i) => {
|
75
|
+
content[i].open = !content[i].open;
|
76
|
+
if (autoClose) {
|
77
|
+
for (let j = 0; j < content.length; j++) {
|
78
|
+
const item = content[j];
|
79
|
+
if (j !== i)
|
80
|
+
item.open = false;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
};
|
84
|
+
onMount(() => {
|
85
|
+
clientJs = true;
|
86
|
+
if (prefersReducedMotion())
|
87
|
+
transition = false;
|
88
|
+
});
|
89
|
+
</script>
|
90
|
+
|
91
|
+
<div class="transition"></div>
|
92
|
+
|
93
|
+
<div class={className} {id}>
|
94
|
+
{#each content as { classContentDetails, summary, classContentSummary, slot, classContentSlot, open }, i}
|
95
|
+
<div class="{classDetails} {classContentDetails}">
|
96
|
+
<details bind:open>
|
97
|
+
<!-- svelte-ignore a11y-no-redundant-roles -->
|
98
|
+
<summary
|
99
|
+
role="button"
|
100
|
+
tabindex="0"
|
101
|
+
class={classSummary}
|
102
|
+
on:click={(e) => {
|
103
|
+
e.preventDefault();
|
104
|
+
toggleOpen(i);
|
105
|
+
}}
|
106
|
+
on:keydown={(e) => {
|
107
|
+
if (e.key === "Enter") {
|
108
|
+
e.preventDefault();
|
109
|
+
toggleOpen(i);
|
110
|
+
}
|
111
|
+
}}
|
112
|
+
>
|
113
|
+
{#if typeof summary !== "string"}
|
114
|
+
<svelte:component this={summary} class={classContentSummary} />
|
115
|
+
{:else}
|
116
|
+
<span class={classContentSummary}>{summary}</span>
|
117
|
+
{/if}
|
118
|
+
{#if icon}
|
119
|
+
<div
|
120
|
+
class={classIcon}
|
121
|
+
class:db-rotate-180={open}
|
122
|
+
class:db-transition={transition}
|
123
|
+
>
|
124
|
+
{#if typeof icon !== "string"}
|
125
|
+
<svelte:component this={icon} />
|
126
|
+
{:else}
|
127
|
+
<span>{icon}</span>
|
128
|
+
{/if}
|
129
|
+
</div>
|
130
|
+
{/if}
|
131
|
+
</summary>
|
132
|
+
{#if !clientJs || !transition}
|
133
|
+
<div class={classSlot}>
|
134
|
+
{#if typeof slot !== "string"}
|
135
|
+
<svelte:component this={slot} class={classContentSlot} />
|
136
|
+
{:else}
|
137
|
+
<div class={classContentSlot}>{slot}</div>
|
138
|
+
{/if}
|
139
|
+
</div>
|
140
|
+
{/if}
|
141
|
+
</details>
|
142
|
+
{#if clientJs && open && transition}
|
143
|
+
<div transition:slide={transition} class={classSlot}>
|
144
|
+
{#if typeof slot !== "string"}
|
145
|
+
<svelte:component this={slot} class={classContentSlot} />
|
146
|
+
{:else}
|
147
|
+
<div class={classContentSlot}>{slot}</div>
|
148
|
+
{/if}
|
149
|
+
</div>
|
150
|
+
{/if}
|
151
|
+
</div>
|
152
|
+
{/each}
|
153
|
+
</div>
|
154
|
+
|
155
|
+
<style>
|
156
|
+
summary {
|
157
|
+
list-style: none;
|
158
|
+
}
|
159
|
+
summary::-webkit-details-marker {
|
160
|
+
display: none;
|
161
|
+
}
|
162
|
+
.db-rotate-180 {
|
163
|
+
transform: rotate(180deg);
|
164
|
+
}
|
165
|
+
.db-transition {
|
166
|
+
transition-property: transform;
|
167
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
168
|
+
transition-duration: 150ms;
|
169
|
+
}
|
170
|
+
</style>
|
@@ -0,0 +1,86 @@
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
2
|
+
import type { ComponentType } from "svelte";
|
3
|
+
export interface AccordionContent {
|
4
|
+
/** `details` element class */
|
5
|
+
classContentDetails?: string;
|
6
|
+
/** content of the `summary` element */
|
7
|
+
summary: string | ComponentType;
|
8
|
+
/** `summary` element class */
|
9
|
+
classContentSummary?: string;
|
10
|
+
/** content of the `slot` */
|
11
|
+
slot: string | ComponentType;
|
12
|
+
/** `slot` element class */
|
13
|
+
classContentSlot?: string;
|
14
|
+
/** controls whether the slotted content is displayed */
|
15
|
+
open?: boolean;
|
16
|
+
}
|
17
|
+
import { type SlideParams } from "svelte/transition";
|
18
|
+
declare const __propDef: {
|
19
|
+
props: {
|
20
|
+
class?: string | undefined;
|
21
|
+
id?: string | undefined;
|
22
|
+
/** array of `AccordionContent` elements */ content: AccordionContent[];
|
23
|
+
icon?: string | ComponentType | undefined;
|
24
|
+
/** class of the `div` around each `details` element */ classDetails?: string | undefined;
|
25
|
+
/** class of all the `summary` elements */ classSummary?: string | undefined;
|
26
|
+
/** class of all the `slot` elements */ classSlot?: string | undefined;
|
27
|
+
/** class of the `div` around the icon */ classIcon?: string | undefined;
|
28
|
+
/** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
|
29
|
+
/** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
|
30
|
+
};
|
31
|
+
events: {
|
32
|
+
[evt: string]: CustomEvent<any>;
|
33
|
+
};
|
34
|
+
slots: {};
|
35
|
+
};
|
36
|
+
export type AccordionProps = typeof __propDef.props;
|
37
|
+
export type AccordionEvents = typeof __propDef.events;
|
38
|
+
export type AccordionSlots = typeof __propDef.slots;
|
39
|
+
/**
|
40
|
+
* ### Accordion
|
41
|
+
*
|
42
|
+
* Displays a list of `details` elements.
|
43
|
+
*
|
44
|
+
* @props
|
45
|
+
*
|
46
|
+
* - `autoClose` - if `true`, other items close when a new one is opened
|
47
|
+
* - `classDetails` - class of the `div` around each `details` element
|
48
|
+
* - `classIcon` - class of the `div` around the icon
|
49
|
+
* - `classSlot` - class of all the `slot` elements
|
50
|
+
* - `classSummary` - class of all the `summary` elements
|
51
|
+
* - `class`
|
52
|
+
* - `content` - array of `AccordionContent` elements
|
53
|
+
* - `icon`
|
54
|
+
* - `id`
|
55
|
+
* - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
|
56
|
+
*
|
57
|
+
* @slots
|
58
|
+
*
|
59
|
+
* Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
|
60
|
+
*
|
61
|
+
* @example
|
62
|
+
*
|
63
|
+
* ```svelte
|
64
|
+
* <script>
|
65
|
+
* import { Accordion } from "drab";
|
66
|
+
* </script>
|
67
|
+
*
|
68
|
+
* <Accordion
|
69
|
+
* content={[
|
70
|
+
* { summary: "Is it accessible?", slot: "Yes." },
|
71
|
+
* {
|
72
|
+
* summary: "Is it styled?",
|
73
|
+
* slot: "Nope, style with global styles.",
|
74
|
+
* },
|
75
|
+
* {
|
76
|
+
* summary: "Is it animated?",
|
77
|
+
* slot: "Yes, with the transition prop.",
|
78
|
+
* },
|
79
|
+
* { summary: "Does it work without Javascript?", slot: "Yes." },
|
80
|
+
* ]}
|
81
|
+
* />
|
82
|
+
* ```
|
83
|
+
*/
|
84
|
+
export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
|
85
|
+
}
|
86
|
+
export {};
|
@@ -7,7 +7,7 @@ Displays when the parent element is right clicked.
|
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `classNoscript` - noscript class
|
10
|
+
- `classNoscript` - `noscript` class
|
11
11
|
- `class`
|
12
12
|
- `display` - controls `display` css property
|
13
13
|
- `id`
|
@@ -25,14 +25,14 @@ Displays when the parent element is right clicked.
|
|
25
25
|
import { ContextMenu } from "drab";
|
26
26
|
</script>
|
27
27
|
|
28
|
-
<div
|
28
|
+
<div>
|
29
29
|
<div>Right click here</div>
|
30
|
-
<ContextMenu
|
31
|
-
<div
|
32
|
-
<div
|
33
|
-
<button
|
34
|
-
<button
|
35
|
-
<button
|
30
|
+
<ContextMenu>
|
31
|
+
<div>
|
32
|
+
<div>Context Menu</div>
|
33
|
+
<button>Button</button>
|
34
|
+
<button>Button</button>
|
35
|
+
<button>Button</button>
|
36
36
|
</div>
|
37
37
|
</ContextMenu>
|
38
38
|
</div>
|
@@ -91,6 +91,7 @@ onMount(() => {
|
|
91
91
|
style:opacity={display ? "100%" : "0%"}
|
92
92
|
style:top="{coordinates.y}px"
|
93
93
|
style:left="{coordinates.x}px"
|
94
|
+
inert={display ? false : true}
|
94
95
|
>
|
95
96
|
<slot>Context Menu</slot>
|
96
97
|
</div>
|
@@ -4,7 +4,7 @@ declare const __propDef: {
|
|
4
4
|
class?: string | undefined;
|
5
5
|
id?: string | undefined;
|
6
6
|
/** controls `display` css property */ display?: boolean | undefined;
|
7
|
-
/** noscript class */ classNoscript?: string | undefined;
|
7
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
8
8
|
};
|
9
9
|
events: {
|
10
10
|
[evt: string]: CustomEvent<any>;
|
@@ -23,7 +23,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
|
|
23
23
|
*
|
24
24
|
* @props
|
25
25
|
*
|
26
|
-
* - `classNoscript` - noscript class
|
26
|
+
* - `classNoscript` - `noscript` class
|
27
27
|
* - `class`
|
28
28
|
* - `display` - controls `display` css property
|
29
29
|
* - `id`
|
@@ -41,14 +41,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
|
|
41
41
|
* import { ContextMenu } from "drab";
|
42
42
|
* </script>
|
43
43
|
*
|
44
|
-
* <div
|
44
|
+
* <div>
|
45
45
|
* <div>Right click here</div>
|
46
|
-
* <ContextMenu
|
47
|
-
* <div
|
48
|
-
* <div
|
49
|
-
* <button
|
50
|
-
* <button
|
51
|
-
* <button
|
46
|
+
* <ContextMenu>
|
47
|
+
* <div>
|
48
|
+
* <div>Context Menu</div>
|
49
|
+
* <button>Button</button>
|
50
|
+
* <button>Button</button>
|
51
|
+
* <button>Button</button>
|
52
52
|
* </div>
|
53
53
|
* </ContextMenu>
|
54
54
|
* </div>
|
@@ -5,7 +5,7 @@ declare const __propDef: {
|
|
5
5
|
id?: string | undefined;
|
6
6
|
title?: string | undefined;
|
7
7
|
/** text to copy */ text: string;
|
8
|
-
/** noscript class */ classNoscript?: string | undefined;
|
8
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
9
9
|
};
|
10
10
|
events: {
|
11
11
|
[evt: string]: CustomEvent<any>;
|
@@ -25,7 +25,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
|
|
25
25
|
*
|
26
26
|
* @props
|
27
27
|
*
|
28
|
-
* - `classNoscript` - noscript class
|
28
|
+
* - `classNoscript` - `noscript` class
|
29
29
|
* - `class`
|
30
30
|
* - `id`
|
31
31
|
* - `text` - text to copy
|
@@ -8,24 +8,24 @@ Data table to display an array of JS objects. Click a column header to sort.
|
|
8
8
|
@props
|
9
9
|
|
10
10
|
- `ascending` - default sort order
|
11
|
-
- `classButton` - button class
|
12
|
-
- `classFooter` - footer class
|
13
|
-
- `classNoscript` - noscript class
|
11
|
+
- `classButton` - `button` class
|
12
|
+
- `classFooter` - `footer` class
|
13
|
+
- `classNoscript` - `noscript` class
|
14
14
|
- `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
|
15
15
|
- `classPageNumber` - class of `div` wrapping page numbers
|
16
|
-
- `classTable` - table class
|
17
|
-
- `classTbodyTr` - tbody tr class
|
18
|
-
- `classTbody` - tbody class
|
19
|
-
- `classTdSorted` - currently sorted td
|
20
|
-
- `classTd` - td class
|
21
|
-
- `classThSorted` - currently sorted th
|
22
|
-
- `classTh` - th class
|
23
|
-
- `classTheadTr` - thead tr class
|
24
|
-
- `classThead` - thead class
|
16
|
+
- `classTable` - `table` class
|
17
|
+
- `classTbodyTr` - `tbody tr` class
|
18
|
+
- `classTbody` - `tbody` class
|
19
|
+
- `classTdSorted` - currently sorted `td`
|
20
|
+
- `classTd` - `td` class
|
21
|
+
- `classThSorted` - currently sorted `th`
|
22
|
+
- `classTh` - `th` class
|
23
|
+
- `classTheadTr` - `thead tr` class
|
24
|
+
- `classThead` - `thead` class
|
25
25
|
- `columns` - table columns, in order
|
26
26
|
- `currentPage` - current page, defaults to `1`
|
27
27
|
- `data` - a list of objects to render in the table
|
28
|
-
- `idTable` - table id
|
28
|
+
- `idTable` - `table` id
|
29
29
|
- `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
30
30
|
- `sortBy` - column to sort by--defaults to first column
|
31
31
|
|
@@ -8,23 +8,23 @@ declare const __propDef: {
|
|
8
8
|
/** table columns, in order */ columns?: string[] | undefined;
|
9
9
|
/** column to sort by--defaults to first column */ sortBy?: string | undefined;
|
10
10
|
/** default sort order */ ascending?: boolean | undefined;
|
11
|
-
/** table class */ classTable?: string | undefined;
|
12
|
-
/** table id */ idTable?: string | undefined;
|
13
|
-
/** thead class */ classThead?: string | undefined;
|
14
|
-
/** tbody class */ classTbody?: string | undefined;
|
15
|
-
/** thead tr class */ classTheadTr?: string | undefined;
|
16
|
-
/** tbody tr class */ classTbodyTr?: string | undefined;
|
17
|
-
/** th class */ classTh?: string | undefined;
|
18
|
-
/** td class */ classTd?: string | undefined;
|
19
|
-
/** currently sorted th */ classThSorted?: string | undefined;
|
20
|
-
/** currently sorted td */ classTdSorted?: string | undefined;
|
21
|
-
/** button class */ classButton?: string | undefined;
|
22
|
-
/** footer class */ classFooter?: string | undefined;
|
11
|
+
/** `table` class */ classTable?: string | undefined;
|
12
|
+
/** `table` id */ idTable?: string | undefined;
|
13
|
+
/** `thead` class */ classThead?: string | undefined;
|
14
|
+
/** `tbody` class */ classTbody?: string | undefined;
|
15
|
+
/** `thead tr` class */ classTheadTr?: string | undefined;
|
16
|
+
/** `tbody tr` class */ classTbodyTr?: string | undefined;
|
17
|
+
/** `th` class */ classTh?: string | undefined;
|
18
|
+
/** `td` class */ classTd?: string | undefined;
|
19
|
+
/** currently sorted `th` */ classThSorted?: string | undefined;
|
20
|
+
/** currently sorted `td` */ classTdSorted?: string | undefined;
|
21
|
+
/** `button` class */ classButton?: string | undefined;
|
22
|
+
/** `footer` class */ classFooter?: string | undefined;
|
23
23
|
/** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
|
24
24
|
/** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
|
25
25
|
/** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
|
26
26
|
/** current page, defaults to `1` */ currentPage?: number | undefined;
|
27
|
-
/** noscript class */ classNoscript?: string | undefined;
|
27
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
28
28
|
};
|
29
29
|
events: {
|
30
30
|
[evt: string]: CustomEvent<any>;
|
@@ -45,24 +45,24 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
45
45
|
* @props
|
46
46
|
*
|
47
47
|
* - `ascending` - default sort order
|
48
|
-
* - `classButton` - button class
|
49
|
-
* - `classFooter` - footer class
|
50
|
-
* - `classNoscript` - noscript class
|
48
|
+
* - `classButton` - `button` class
|
49
|
+
* - `classFooter` - `footer` class
|
50
|
+
* - `classNoscript` - `noscript` class
|
51
51
|
* - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
|
52
52
|
* - `classPageNumber` - class of `div` wrapping page numbers
|
53
|
-
* - `classTable` - table class
|
54
|
-
* - `classTbodyTr` - tbody tr class
|
55
|
-
* - `classTbody` - tbody class
|
56
|
-
* - `classTdSorted` - currently sorted td
|
57
|
-
* - `classTd` - td class
|
58
|
-
* - `classThSorted` - currently sorted th
|
59
|
-
* - `classTh` - th class
|
60
|
-
* - `classTheadTr` - thead tr class
|
61
|
-
* - `classThead` - thead class
|
53
|
+
* - `classTable` - `table` class
|
54
|
+
* - `classTbodyTr` - `tbody tr` class
|
55
|
+
* - `classTbody` - `tbody` class
|
56
|
+
* - `classTdSorted` - currently sorted `td`
|
57
|
+
* - `classTd` - `td` class
|
58
|
+
* - `classThSorted` - currently sorted `th`
|
59
|
+
* - `classTh` - `th` class
|
60
|
+
* - `classTheadTr` - `thead tr` class
|
61
|
+
* - `classThead` - `thead` class
|
62
62
|
* - `columns` - table columns, in order
|
63
63
|
* - `currentPage` - current page, defaults to `1`
|
64
64
|
* - `data` - a list of objects to render in the table
|
65
|
-
* - `idTable` - table id
|
65
|
+
* - `idTable` - `table` id
|
66
66
|
* - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
|
67
67
|
* - `sortBy` - column to sort by--defaults to first column
|
68
68
|
*
|
@@ -9,9 +9,9 @@ Text editor with controls to add elements and keyboard shortcuts.
|
|
9
9
|
|
10
10
|
- `classButton` - `class` of all the `button` elements
|
11
11
|
- `classControls` - `class` of the `div` that wraps the controls
|
12
|
-
- `classNoscript` - noscript class
|
12
|
+
- `classNoscript` - `noscript` class
|
13
13
|
- `classTextarea` - `class` of the `textarea` element
|
14
|
-
- `contentElements` - an array of
|
14
|
+
- `contentElements` - an array of `EditorContentElement`s for the controls
|
15
15
|
- `idControls` - `id` of the `div` that wraps the controls
|
16
16
|
- `idTextarea` - `id` of the `textarea` element
|
17
17
|
- `keyPairs` - keys that will auto-close if typed, value is their closing character
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
2
|
+
import type { ComponentType } from "svelte";
|
2
3
|
/**
|
3
4
|
* - `EditorContentElement` to pass into the `contentElements` array prop
|
4
5
|
* - `contentElements` prop creates a list of button controls to insert
|
@@ -11,17 +12,16 @@ export interface EditorContentElement {
|
|
11
12
|
text: string;
|
12
13
|
/** controls how the text is added */
|
13
14
|
display: "inline" | "block" | "wrap";
|
14
|
-
/** contents of the button */
|
15
|
+
/** contents of the `button` */
|
15
16
|
icon: string | ComponentType;
|
16
17
|
/** keyboard shortcut */
|
17
18
|
key?: string;
|
18
|
-
/** class to apply to the specific button */
|
19
|
+
/** class to apply to the specific `button` */
|
19
20
|
class?: string;
|
20
21
|
}
|
21
|
-
import { type ComponentType } from "svelte";
|
22
22
|
declare const __propDef: {
|
23
23
|
props: {
|
24
|
-
/** an array of
|
24
|
+
/** an array of `EditorContentElement`s for the controls */ contentElements?: EditorContentElement[] | undefined;
|
25
25
|
/** `value` of the `textarea` element */ valueTextarea?: string | undefined;
|
26
26
|
/** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
|
27
27
|
/** `class` of the `textarea` element */ classTextarea?: string | undefined;
|
@@ -34,7 +34,7 @@ declare const __propDef: {
|
|
34
34
|
/** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
|
35
35
|
[key: string]: string;
|
36
36
|
} | undefined;
|
37
|
-
/** noscript class */ classNoscript?: string | undefined;
|
37
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
38
38
|
};
|
39
39
|
events: {
|
40
40
|
input: Event;
|
@@ -55,9 +55,9 @@ export type EditorSlots = typeof __propDef.slots;
|
|
55
55
|
*
|
56
56
|
* - `classButton` - `class` of all the `button` elements
|
57
57
|
* - `classControls` - `class` of the `div` that wraps the controls
|
58
|
-
* - `classNoscript` - noscript class
|
58
|
+
* - `classNoscript` - `noscript` class
|
59
59
|
* - `classTextarea` - `class` of the `textarea` element
|
60
|
-
* - `contentElements` - an array of
|
60
|
+
* - `contentElements` - an array of `EditorContentElement`s for the controls
|
61
61
|
* - `idControls` - `id` of the `div` that wraps the controls
|
62
62
|
* - `idTextarea` - `id` of the `textarea` element
|
63
63
|
* - `keyPairs` - keys that will auto-close if typed, value is their closing character
|
@@ -7,7 +7,7 @@ Make the document or a specific element fullscreen.
|
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `classNoscript` - noscript class
|
10
|
+
- `classNoscript` - `noscript` class
|
11
11
|
- `class`
|
12
12
|
- `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
|
13
13
|
- `id`
|
@@ -6,7 +6,7 @@ declare const __propDef: {
|
|
6
6
|
title?: string | undefined;
|
7
7
|
/** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: HTMLElement | null | undefined;
|
8
8
|
/** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
|
9
|
-
/** noscript class */ classNoscript?: string | undefined;
|
9
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
10
10
|
};
|
11
11
|
events: {
|
12
12
|
[evt: string]: CustomEvent<any>;
|
@@ -26,7 +26,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
|
|
26
26
|
*
|
27
27
|
* @props
|
28
28
|
*
|
29
|
-
* - `classNoscript` - noscript class
|
29
|
+
* - `classNoscript` - `noscript` class
|
30
30
|
* - `class`
|
31
31
|
* - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
|
32
32
|
* - `id`
|
@@ -7,12 +7,12 @@ Displays a popover relatively positioned to the button.
|
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `classButton` - button class
|
10
|
+
- `classButton` - `button` class
|
11
11
|
- `classPopover` - popover class
|
12
12
|
- `class`
|
13
13
|
- `display` - if `eventType="click"`, controls the display
|
14
14
|
- `eventType` - controls if hovering or clicking the button displays the popover
|
15
|
-
- `idButton` - button id
|
15
|
+
- `idButton` - `button` id
|
16
16
|
- `idPopover` - popover id
|
17
17
|
- `id`
|
18
18
|
- `position` - where the popover is displayed in relation to the button
|
@@ -130,6 +130,7 @@ onMount(() => {
|
|
130
130
|
class:db-type-hover={clientEventType === "hover"}
|
131
131
|
style:top="{coordinates.y}px"
|
132
132
|
style:left="{coordinates.x}px"
|
133
|
+
inert={clientEventType === "hover" || display ? false : true}
|
133
134
|
>
|
134
135
|
<slot>Popover</slot>
|
135
136
|
</div>
|
@@ -3,9 +3,9 @@ declare const __propDef: {
|
|
3
3
|
props: {
|
4
4
|
class?: string | undefined;
|
5
5
|
id?: string | undefined;
|
6
|
-
/** button class */ classButton?: string | undefined;
|
6
|
+
/** `button` class */ classButton?: string | undefined;
|
7
7
|
/** popover class */ classPopover?: string | undefined;
|
8
|
-
/** button id */ idButton?: string | undefined;
|
8
|
+
/** `button` id */ idButton?: string | undefined;
|
9
9
|
/** popover id */ idPopover?: string | undefined;
|
10
10
|
/** if `eventType="click"`, controls the display */ display?: boolean | undefined;
|
11
11
|
/** where the popover is displayed in relation to the button */ position?: "top" | "bottom" | "left" | "right" | undefined;
|
@@ -29,12 +29,12 @@ export type PopoverSlots = typeof __propDef.slots;
|
|
29
29
|
*
|
30
30
|
* @props
|
31
31
|
*
|
32
|
-
* - `classButton` - button class
|
32
|
+
* - `classButton` - `button` class
|
33
33
|
* - `classPopover` - popover class
|
34
34
|
* - `class`
|
35
35
|
* - `display` - if `eventType="click"`, controls the display
|
36
36
|
* - `eventType` - controls if hovering or clicking the button displays the popover
|
37
|
-
* - `idButton` - button id
|
37
|
+
* - `idButton` - `button` id
|
38
38
|
* - `idPopover` - popover id
|
39
39
|
* - `id`
|
40
40
|
* - `position` - where the popover is displayed in relation to the button
|
@@ -7,11 +7,11 @@ Uses the navigator api to share or copy a url link depending on browser support.
|
|
7
7
|
|
8
8
|
@props
|
9
9
|
|
10
|
-
- `classNoscript` - noscript class
|
10
|
+
- `classNoscript` - `noscript` class
|
11
11
|
- `class`
|
12
12
|
- `id`
|
13
13
|
- `text` - prefixed text in share message
|
14
|
-
- `title` - title of share message and button attribute, defaults to end of url
|
14
|
+
- `title` - title of share message and `button` attribute, defaults to end of url
|
15
15
|
- `url` - url to be shared
|
16
16
|
|
17
17
|
@slots
|
@@ -5,8 +5,8 @@ declare const __propDef: {
|
|
5
5
|
id?: string | undefined;
|
6
6
|
/** prefixed text in share message */ text?: string | undefined;
|
7
7
|
/** url to be shared */ url: string;
|
8
|
-
/** title of share message and button attribute, defaults to end of url */ title?: string | undefined;
|
9
|
-
/** noscript class */ classNoscript?: string | undefined;
|
8
|
+
/** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
|
9
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
10
10
|
};
|
11
11
|
events: {
|
12
12
|
[evt: string]: CustomEvent<any>;
|
@@ -26,11 +26,11 @@ export type ShareButtonSlots = typeof __propDef.slots;
|
|
26
26
|
*
|
27
27
|
* @props
|
28
28
|
*
|
29
|
-
* - `classNoscript` - noscript class
|
29
|
+
* - `classNoscript` - `noscript` class
|
30
30
|
* - `class`
|
31
31
|
* - `id`
|
32
32
|
* - `text` - prefixed text in share message
|
33
|
-
* - `title` - title of share message and button attribute, defaults to end of url
|
33
|
+
* - `title` - title of share message and `button` attribute, defaults to end of url
|
34
34
|
* - `url` - url to be shared
|
35
35
|
*
|
36
36
|
* @slots
|
@@ -0,0 +1,102 @@
|
|
1
|
+
<!--
|
2
|
+
@component
|
3
|
+
|
4
|
+
### Tabs
|
5
|
+
|
6
|
+
Displays tabs and slotted content.
|
7
|
+
|
8
|
+
@props
|
9
|
+
|
10
|
+
- `classButtonActive` - class of the active tab's `button`
|
11
|
+
- `classButtonInactive` - class of all the inactive tabs' `button`s
|
12
|
+
- `classButton` - `button` class
|
13
|
+
- `classHeader` - class of the `div` that wraps the `button`s
|
14
|
+
- `classNoscript` - `noscript` class
|
15
|
+
- `classSlot` - class of `div` that wraps the slotted content
|
16
|
+
- `class`
|
17
|
+
- `content` - array of `TabContent` elements
|
18
|
+
- `id`
|
19
|
+
- `transition` - fades the content in, defaults to empty object, set to false to remove
|
20
|
+
|
21
|
+
@slots
|
22
|
+
|
23
|
+
Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
|
24
|
+
|
25
|
+
@example
|
26
|
+
|
27
|
+
```svelte
|
28
|
+
<script>
|
29
|
+
import { Tabs } from "drab";
|
30
|
+
import { FullscreenButton } from "drab";
|
31
|
+
</script>
|
32
|
+
|
33
|
+
<Tabs content={[
|
34
|
+
{ name: "String", slot: "Slot" },
|
35
|
+
{ name: "Component", slot: FullscreenButton },
|
36
|
+
]}
|
37
|
+
/>
|
38
|
+
```
|
39
|
+
-->
|
40
|
+
|
41
|
+
<script context="module"></script>
|
42
|
+
|
43
|
+
<script>import { onMount } from "svelte";
|
44
|
+
import { fade } from "svelte/transition";
|
45
|
+
import { messageNoScript } from "../util/messages";
|
46
|
+
let className = "";
|
47
|
+
export { className as class };
|
48
|
+
export let id = "";
|
49
|
+
export let classHeader = "";
|
50
|
+
export let classButton = "";
|
51
|
+
export let classButtonActive = "";
|
52
|
+
export let classButtonInactive = "";
|
53
|
+
export let classNoscript = "";
|
54
|
+
export let classSlot = "";
|
55
|
+
export let content;
|
56
|
+
export let transition = {};
|
57
|
+
const fadeTransition = transition ? transition : { duration: 0 };
|
58
|
+
let clientJs = false;
|
59
|
+
let activeIndex = 0;
|
60
|
+
for (const item of content) {
|
61
|
+
if (!item.classContentSlot)
|
62
|
+
item.classContentSlot = "";
|
63
|
+
}
|
64
|
+
$:
|
65
|
+
activeTab = content[activeIndex];
|
66
|
+
onMount(() => clientJs = true);
|
67
|
+
</script>
|
68
|
+
|
69
|
+
<div class={className} {id}>
|
70
|
+
<div class={classHeader}>
|
71
|
+
{#each content as { name }, i}
|
72
|
+
<button
|
73
|
+
disabled={!clientJs}
|
74
|
+
class="{classButton} {activeIndex === i
|
75
|
+
? classButtonActive
|
76
|
+
: ''} {activeIndex !== i ? classButtonInactive : ''}"
|
77
|
+
on:click={() => (activeIndex = i)}
|
78
|
+
>
|
79
|
+
{name}
|
80
|
+
</button>
|
81
|
+
{/each}
|
82
|
+
</div>
|
83
|
+
<div class={classSlot}>
|
84
|
+
{#if typeof activeTab.slot !== "string"}
|
85
|
+
<div in:fade={fadeTransition}>
|
86
|
+
<svelte:component
|
87
|
+
this={activeTab.slot}
|
88
|
+
class={activeTab.classContentSlot}
|
89
|
+
/>
|
90
|
+
</div>
|
91
|
+
{:else}
|
92
|
+
<div in:fade={fadeTransition} class={activeTab.classContentSlot}>
|
93
|
+
{activeTab.slot}
|
94
|
+
</div>
|
95
|
+
{/if}
|
96
|
+
</div>
|
97
|
+
<noscript>
|
98
|
+
<div class={classNoscript}>
|
99
|
+
{messageNoScript}
|
100
|
+
</div>
|
101
|
+
</noscript>
|
102
|
+
</div>
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
2
|
+
import type { ComponentType } from "svelte";
|
3
|
+
export interface TabsContent {
|
4
|
+
/** tab name, displayed in `button` element */
|
5
|
+
name: string;
|
6
|
+
/** slotted content, displayed once tab is clicked */
|
7
|
+
slot: string | ComponentType;
|
8
|
+
/** class of the slotted content */
|
9
|
+
classContentSlot?: string;
|
10
|
+
}
|
11
|
+
import { type FadeParams } from "svelte/transition";
|
12
|
+
declare const __propDef: {
|
13
|
+
props: {
|
14
|
+
class?: string | undefined;
|
15
|
+
id?: string | undefined;
|
16
|
+
/** class of the `div` that wraps the `button`s */ classHeader?: string | undefined;
|
17
|
+
/** `button` class */ classButton?: string | undefined;
|
18
|
+
/** class of the active tab's `button` */ classButtonActive?: string | undefined;
|
19
|
+
/** class of all the inactive tabs' `button`s */ classButtonInactive?: string | undefined;
|
20
|
+
/** `noscript` class */ classNoscript?: string | undefined;
|
21
|
+
/** class of `div` that wraps the slotted content */ classSlot?: string | undefined;
|
22
|
+
/** array of `TabContent` elements */ content: TabsContent[];
|
23
|
+
/** fades the content in, defaults to empty object, set to false to remove */ transition?: false | FadeParams | undefined;
|
24
|
+
};
|
25
|
+
events: {
|
26
|
+
[evt: string]: CustomEvent<any>;
|
27
|
+
};
|
28
|
+
slots: {};
|
29
|
+
};
|
30
|
+
export type TabsProps = typeof __propDef.props;
|
31
|
+
export type TabsEvents = typeof __propDef.events;
|
32
|
+
export type TabsSlots = typeof __propDef.slots;
|
33
|
+
/**
|
34
|
+
* ### Tabs
|
35
|
+
*
|
36
|
+
* Displays tabs and slotted content.
|
37
|
+
*
|
38
|
+
* @props
|
39
|
+
*
|
40
|
+
* - `classButtonActive` - class of the active tab's `button`
|
41
|
+
* - `classButtonInactive` - class of all the inactive tabs' `button`s
|
42
|
+
* - `classButton` - `button` class
|
43
|
+
* - `classHeader` - class of the `div` that wraps the `button`s
|
44
|
+
* - `classNoscript` - `noscript` class
|
45
|
+
* - `classSlot` - class of `div` that wraps the slotted content
|
46
|
+
* - `class`
|
47
|
+
* - `content` - array of `TabContent` elements
|
48
|
+
* - `id`
|
49
|
+
* - `transition` - fades the content in, defaults to empty object, set to false to remove
|
50
|
+
*
|
51
|
+
* @slots
|
52
|
+
*
|
53
|
+
* Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
|
54
|
+
*
|
55
|
+
* @example
|
56
|
+
*
|
57
|
+
* ```svelte
|
58
|
+
* <script>
|
59
|
+
* import { Tabs } from "drab";
|
60
|
+
* import { FullscreenButton } from "drab";
|
61
|
+
* </script>
|
62
|
+
*
|
63
|
+
* <Tabs content={[
|
64
|
+
* { name: "String", slot: "Slot" },
|
65
|
+
* { name: "Component", slot: FullscreenButton },
|
66
|
+
* ]}
|
67
|
+
* />
|
68
|
+
* ```
|
69
|
+
*/
|
70
|
+
export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
|
71
|
+
}
|
72
|
+
export {};
|
package/dist/index.d.ts
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
import Accordion from "./components/Accordion.svelte";
|
2
|
+
import type { AccordionContent } from "./components/Accordion.svelte";
|
1
3
|
import Chord from "./components/Chord.svelte";
|
2
4
|
import type { ChordNote } from "./components/Chord.svelte";
|
3
5
|
import ContextMenu from "./components/ContextMenu.svelte";
|
@@ -10,4 +12,4 @@ import FullscreenButton from "./components/FullscreenButton.svelte";
|
|
10
12
|
import Popover from "./components/Popover.svelte";
|
11
13
|
import ShareButton from "./components/ShareButton.svelte";
|
12
14
|
import YouTube from "./components/YouTube.svelte";
|
13
|
-
export { Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };
|
15
|
+
export { Accordion, type AccordionContent, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };
|
package/dist/index.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
import Accordion from "./components/Accordion.svelte";
|
1
2
|
import Chord from "./components/Chord.svelte";
|
2
3
|
import ContextMenu from "./components/ContextMenu.svelte";
|
3
4
|
import CopyButton from "./components/CopyButton.svelte";
|
@@ -7,4 +8,4 @@ import FullscreenButton from "./components/FullscreenButton.svelte";
|
|
7
8
|
import Popover from "./components/Popover.svelte";
|
8
9
|
import ShareButton from "./components/ShareButton.svelte";
|
9
10
|
import YouTube from "./components/YouTube.svelte";
|
10
|
-
export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };
|
11
|
+
export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/**
|
2
|
+
* Checks to see if the user prefers reduced motion
|
3
|
+
*
|
4
|
+
* @returns `true` if the user prefers reduced motion
|
5
|
+
*/
|
6
|
+
export const prefersReducedMotion = () => {
|
7
|
+
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
8
|
+
if (mediaQuery.matches)
|
9
|
+
return true;
|
10
|
+
return false;
|
11
|
+
};
|
package/package.json
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.2.1",
|
4
4
|
"description": "An unstyled Svelte component library",
|
5
5
|
"keywords": [
|
6
6
|
"components",
|
7
7
|
"Svelte",
|
8
8
|
"SvelteKit",
|
9
|
+
"Accordion",
|
9
10
|
"Chord",
|
10
11
|
"ContextMenu",
|
11
12
|
"Copy",
|
@@ -34,7 +35,7 @@
|
|
34
35
|
"lint": "prettier --check . && eslint .",
|
35
36
|
"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
|
36
37
|
"pub": "npm publish --access public",
|
37
|
-
"doc": "node
|
38
|
+
"doc": "node scripts/buildDocs.js"
|
38
39
|
},
|
39
40
|
"exports": {
|
40
41
|
".": {
|
package/dist/util/buildDocs.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
package/dist/util/buildDocs.js
DELETED
@@ -1,86 +0,0 @@
|
|
1
|
-
import fs from "fs/promises";
|
2
|
-
import path from "path";
|
3
|
-
|
4
|
-
/**
|
5
|
-
* Runs `documentProps` over a given directory
|
6
|
-
*
|
7
|
-
* @param {string} dir path to directory
|
8
|
-
*/
|
9
|
-
export const documentPropsDir = async (dir) => {
|
10
|
-
const files = await fs.readdir(dir);
|
11
|
-
for (const file of files) {
|
12
|
-
if (path.extname(file) === ".svelte") {
|
13
|
-
documentProps(path.join(dir, file));
|
14
|
-
}
|
15
|
-
}
|
16
|
-
};
|
17
|
-
|
18
|
-
/**
|
19
|
-
* - Finds "@props" in a component
|
20
|
-
* - If found, overwrites the docs with the generated docs
|
21
|
-
*
|
22
|
-
* @param {string} path path to component
|
23
|
-
*/
|
24
|
-
export const documentProps = async (path) => {
|
25
|
-
const code = await fs.readFile(path, "utf-8");
|
26
|
-
const lines = code.split("\n");
|
27
|
-
const docs = getPropDocs(lines);
|
28
|
-
for (let i = 0; i < lines.length; i++) {
|
29
|
-
const line = lines[i].trim();
|
30
|
-
if (line.startsWith("@props")) {
|
31
|
-
for (let j = i + 1; j < lines.length; j++) {
|
32
|
-
// for the following lines...
|
33
|
-
const checkLine = lines[j].trim();
|
34
|
-
if (
|
35
|
-
checkLine.startsWith("@") ||
|
36
|
-
checkLine.startsWith("-->") ||
|
37
|
-
checkLine.startsWith("#") ||
|
38
|
-
checkLine.startsWith("|")
|
39
|
-
) {
|
40
|
-
// delete current / add new
|
41
|
-
lines.splice(i + 1, j - i - 1, docs);
|
42
|
-
// join back together
|
43
|
-
const documented = lines.join("\n");
|
44
|
-
await fs.writeFile(path, documented);
|
45
|
-
console.log("Documented " + path);
|
46
|
-
break;
|
47
|
-
}
|
48
|
-
}
|
49
|
-
break;
|
50
|
-
}
|
51
|
-
if (i === lines.length - 1) {
|
52
|
-
// last line
|
53
|
-
console.log("No `@props` found for " + path);
|
54
|
-
}
|
55
|
-
}
|
56
|
-
};
|
57
|
-
|
58
|
-
/**
|
59
|
-
* - Finds the props and JSDoc comments
|
60
|
-
*
|
61
|
-
* @param {string[]} lines lines of code
|
62
|
-
*/
|
63
|
-
const getPropDocs = (lines) => {
|
64
|
-
const docs = ["\n"];
|
65
|
-
for (let i = 0; i < lines.length; i++) {
|
66
|
-
const line = lines[i].trim();
|
67
|
-
const isClass = line === "export { className as class };";
|
68
|
-
if (line.startsWith("export let ") || isClass) {
|
69
|
-
let propName = line.split(" ")[2];
|
70
|
-
if (isClass) {
|
71
|
-
propName = "class";
|
72
|
-
}
|
73
|
-
if (propName.endsWith(":")) propName = propName.slice(0, -1);
|
74
|
-
const previousLine = lines[i - 1].trim();
|
75
|
-
let jsDoc = "";
|
76
|
-
if (previousLine.endsWith("*/")) {
|
77
|
-
if (previousLine.startsWith("/**")) {
|
78
|
-
jsDoc = "- " + previousLine.slice(3, -2).trim();
|
79
|
-
}
|
80
|
-
}
|
81
|
-
docs.push(`- \`${propName}\` ${jsDoc}\n`);
|
82
|
-
}
|
83
|
-
}
|
84
|
-
docs.sort();
|
85
|
-
return docs.join("");
|
86
|
-
};
|