@djcali570/component-lib 0.0.14 → 0.1.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 +9 -1
- package/dist/Accordion5.svelte +18 -8
- package/dist/Accordion5.svelte.d.ts +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,10 +46,17 @@ let acs: Accordion5ColorScheme = {
|
|
|
46
46
|
}
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
#### Features
|
|
50
|
+
- Use of snippets to customize all text
|
|
51
|
+
- Change size of chevron icon
|
|
52
|
+
|
|
49
53
|
### Use of the Accordion component
|
|
50
54
|
|
|
51
55
|
```
|
|
52
|
-
<Accordion5 colorScheme={acs}
|
|
56
|
+
<Accordion5 colorScheme={acs}>
|
|
57
|
+
{#snippet title()}
|
|
58
|
+
<h1>My Title</h1>
|
|
59
|
+
{/snippet}
|
|
53
60
|
{#snippet panel()}
|
|
54
61
|
<p>Accordion Contents</p>
|
|
55
62
|
{/snippet}
|
|
@@ -130,6 +137,7 @@ let apcs: AdminPanel5ColorScheme = {
|
|
|
130
137
|
```
|
|
131
138
|
|
|
132
139
|
# Updates
|
|
140
|
+
#### 0.1.00 - Updated Accordion component to use snippets for title.
|
|
133
141
|
#### 0.0.14 - Fixed Input5 textarea height was not being applied. Removed Tailwind dependencies.
|
|
134
142
|
#### 0.0.13 - Added Admin Panel 5 Component.
|
|
135
143
|
#### 0.0.12 - Made all components colorScheme properties optional.
|
package/dist/Accordion5.svelte
CHANGED
|
@@ -5,12 +5,16 @@
|
|
|
5
5
|
// Props with typed colorScheme
|
|
6
6
|
let {
|
|
7
7
|
colorScheme: partialColorScheme = {},
|
|
8
|
-
title
|
|
9
|
-
panel
|
|
8
|
+
title,
|
|
9
|
+
panel,
|
|
10
|
+
iconWidth = '1.2rem',
|
|
11
|
+
iconHeight = '1.2rem'
|
|
10
12
|
}: {
|
|
11
13
|
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
12
|
-
title?:
|
|
14
|
+
title?: Snippet;
|
|
13
15
|
panel: Snippet;
|
|
16
|
+
iconWidth?: string;
|
|
17
|
+
iconHeight?: string;
|
|
14
18
|
} = $props();
|
|
15
19
|
|
|
16
20
|
// Default colorScheme
|
|
@@ -55,12 +59,18 @@
|
|
|
55
59
|
--acc5-textColor: {colorScheme.textColor};
|
|
56
60
|
--acc5-triggerColor: {colorScheme.triggerColor};
|
|
57
61
|
--acc5-panelBgColor: {colorScheme.panelBgColor};
|
|
62
|
+
--acc5-IconWidth: {iconWidth};
|
|
63
|
+
--acc5-IconHeight: {iconHeight};
|
|
58
64
|
"
|
|
59
65
|
>
|
|
60
66
|
<button onclick={showPanel}>
|
|
61
67
|
<div class="panel-head">
|
|
62
68
|
<div class="panel-title">
|
|
63
|
-
|
|
69
|
+
{#if title}
|
|
70
|
+
{@render title()}
|
|
71
|
+
{:else}
|
|
72
|
+
Use Title Snippet
|
|
73
|
+
{/if}
|
|
64
74
|
</div>
|
|
65
75
|
<div class="panel-head-icon-container">
|
|
66
76
|
<div class="panel-head-icon" class:open={status}>
|
|
@@ -120,12 +130,12 @@
|
|
|
120
130
|
display: flex;
|
|
121
131
|
justify-content: flex-end;
|
|
122
132
|
align-items: center;
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 100%;
|
|
125
135
|
}
|
|
126
136
|
.panel-head-icon {
|
|
127
|
-
width:
|
|
128
|
-
height:
|
|
137
|
+
width: var(--acc5-IconWidth);
|
|
138
|
+
height: var(--acc5-IconHeight);
|
|
129
139
|
color: var(--acc5-triggerColor);
|
|
130
140
|
transition: transform 400ms ease-in-out;
|
|
131
141
|
}
|
|
@@ -2,8 +2,10 @@ import type { Snippet } from 'svelte';
|
|
|
2
2
|
import type { Accordion5ColorScheme } from './types.js';
|
|
3
3
|
type $$ComponentProps = {
|
|
4
4
|
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
5
|
-
title?:
|
|
5
|
+
title?: Snippet;
|
|
6
6
|
panel: Snippet;
|
|
7
|
+
iconWidth?: string;
|
|
8
|
+
iconHeight?: string;
|
|
7
9
|
};
|
|
8
10
|
declare const Accordion5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
11
|
type Accordion5 = ReturnType<typeof Accordion5>;
|