@djcali570/component-lib 0.0.12 → 0.0.13
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 +46 -1
- package/dist/AdminPanel5.svelte +266 -0
- package/dist/AdminPanel5.svelte.d.ts +12 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.js +2 -1
- package/dist/types.d.ts +7 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,5 +85,50 @@ let values: number[] = [35, 20];
|
|
|
85
85
|
</Chart5>
|
|
86
86
|
```
|
|
87
87
|
|
|
88
|
+
## Admin Panel
|
|
89
|
+
|
|
90
|
+
Use the default or customize the color scheme
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
import { AdminPanel5 } from '@djcali570/component-lib';
|
|
94
|
+
import type { AdminPanel5ColorScheme } from '@djcali570/component-lib';
|
|
95
|
+
|
|
96
|
+
let apcs: AdminPanel5ColorScheme = {
|
|
97
|
+
panelMenuBgColor: '#181818',
|
|
98
|
+
panelBgColor: '#151515',
|
|
99
|
+
drawerBgColor: '#121212',
|
|
100
|
+
drawerTitleBgColor: '#151515',
|
|
101
|
+
iconColor: '#D6D6D6'
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Use of the Admin Panel component
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
<AdminPanel5>
|
|
109
|
+
{#snippet navigation()}
|
|
110
|
+
<div>This is Navigation</div>
|
|
111
|
+
{/snippet}
|
|
112
|
+
{#snippet title()}
|
|
113
|
+
<div style="display: flex; align-items:center; height:100%; width:100%;">
|
|
114
|
+
<p style="color: #fff;">Title</p>
|
|
115
|
+
</div>
|
|
116
|
+
{/snippet}
|
|
117
|
+
{#snippet panel()}
|
|
118
|
+
<div style="display: flex; align-items:center; width:100%; padding:1em;">
|
|
119
|
+
<p style="color: #fff;">This is the content</p>
|
|
120
|
+
</div>
|
|
121
|
+
{/snippet}
|
|
122
|
+
{#snippet drawerTitle()}
|
|
123
|
+
<div
|
|
124
|
+
style="display:flex; justify-content:flex-start; align-items:center; width: 100%; height:100%;"
|
|
125
|
+
>
|
|
126
|
+
<div style="color: white;">This is a drawer title</div>
|
|
127
|
+
</div>
|
|
128
|
+
{/snippet}
|
|
129
|
+
</AdminPanel5>
|
|
130
|
+
```
|
|
131
|
+
|
|
88
132
|
# Updates
|
|
89
|
-
0.0.
|
|
133
|
+
#### 0.0.13 - Added Admin Panel 5 Component.
|
|
134
|
+
#### 0.0.12 - Made all components colorScheme properties optional.
|
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import { fly } from 'svelte/transition';
|
|
4
|
+
import type { AdminPanel5ColorScheme } from './types.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
navigation,
|
|
8
|
+
title,
|
|
9
|
+
panel,
|
|
10
|
+
drawerTitle,
|
|
11
|
+
colorScheme: partialColorScheme = {}
|
|
12
|
+
}: {
|
|
13
|
+
navigation?: Snippet;
|
|
14
|
+
title?: Snippet;
|
|
15
|
+
panel?: Snippet;
|
|
16
|
+
drawerTitle?: Snippet;
|
|
17
|
+
colorScheme?: Partial<AdminPanel5ColorScheme>;
|
|
18
|
+
} = $props();
|
|
19
|
+
const defaultColorScheme: AdminPanel5ColorScheme = {
|
|
20
|
+
panelMenuBgColor: '#181818',
|
|
21
|
+
panelBgColor: '#151515',
|
|
22
|
+
drawerBgColor: '#121212',
|
|
23
|
+
drawerTitleBgColor: '#151515',
|
|
24
|
+
iconColor: '#D6D6D6'
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// Merge partial colorScheme with defaults
|
|
28
|
+
const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
|
|
29
|
+
|
|
30
|
+
let drawerVisible = $state(false);
|
|
31
|
+
|
|
32
|
+
function toggleDrawer() {
|
|
33
|
+
drawerVisible = !drawerVisible;
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<main
|
|
38
|
+
class="air-admin-panel-main-container"
|
|
39
|
+
style="
|
|
40
|
+
--ap-drawerBgColor: {colorScheme.drawerBgColor};
|
|
41
|
+
--ap-drawerTitleBgColor: {colorScheme.drawerTitleBgColor};
|
|
42
|
+
--ap-panelMenuBgColor: {colorScheme.panelMenuBgColor};
|
|
43
|
+
--ap-iconColor: {colorScheme.iconColor};
|
|
44
|
+
--ap-panelBgColor: {colorScheme.panelBgColor};
|
|
45
|
+
"
|
|
46
|
+
>
|
|
47
|
+
<div class="air-admin-panel-grid-layout">
|
|
48
|
+
<div class="air-admin-panel-navigation-slot">
|
|
49
|
+
{#if navigation}
|
|
50
|
+
{@render navigation()}
|
|
51
|
+
{/if}
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="air-admin-panel-content-section-container">
|
|
55
|
+
<div class="air-admin-panel-content-section">
|
|
56
|
+
<div class="air-admin-panel-title-section-container">
|
|
57
|
+
<div class="air-admin-panel-menu-button-container">
|
|
58
|
+
<button class="air-menu-button" onclick={toggleDrawer} aria-label="toggle drawer">
|
|
59
|
+
<svg
|
|
60
|
+
version="1.1"
|
|
61
|
+
id="Layer_1"
|
|
62
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
63
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
64
|
+
x="0px"
|
|
65
|
+
y="0px"
|
|
66
|
+
viewBox="0 0 200 200"
|
|
67
|
+
style="enable-background:new 0 0 200 200;"
|
|
68
|
+
xml:space="preserve"
|
|
69
|
+
>
|
|
70
|
+
<path
|
|
71
|
+
fill="currentColor"
|
|
72
|
+
d="M166.1,105H33.9c-2.7,0-4.9-2.2-4.9-5s2.2-5,4.9-5h132.1c2.7,0,4.9,2.2,4.9,5S168.8,105,166.1,105z M171,145
|
|
73
|
+
c0-2.8-2.2-5-4.9-5H33.9c-2.7,0-4.9,2.2-4.9,5s2.2,5,4.9,5h132.1C168.8,150,171,147.8,171,145z M171,55c0-2.8-2.2-5-4.9-5H33.9
|
|
74
|
+
c-2.7,0-4.9,2.2-4.9,5s2.2,5,4.9,5h132.1C168.8,60,171,57.8,171,55z"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
</button>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="air-title-container">
|
|
80
|
+
{#if title}
|
|
81
|
+
{@render title()}
|
|
82
|
+
{/if}
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="air-drawer-panel">
|
|
86
|
+
{#if panel}
|
|
87
|
+
{@render panel()}
|
|
88
|
+
{/if}
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
{#if drawerVisible}
|
|
94
|
+
<div
|
|
95
|
+
class="air-drawer"
|
|
96
|
+
transition:fly={{
|
|
97
|
+
x: '-15rem'
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
<div class="air-drawer-button-container">
|
|
101
|
+
<div class="air-drawer-title-container">
|
|
102
|
+
{#if drawerTitle}
|
|
103
|
+
{@render drawerTitle()}
|
|
104
|
+
{:else}
|
|
105
|
+
|
|
106
|
+
{/if}
|
|
107
|
+
</div>
|
|
108
|
+
<button class="air-drawer-close-button" onclick={toggleDrawer} aria-label="close button">
|
|
109
|
+
<svg version="1.1" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve">
|
|
110
|
+
<path
|
|
111
|
+
fill="currentColor"
|
|
112
|
+
d="M150.2,49.8c-27.7-27.7-72.7-27.7-100.4,0s-27.7,72.7,0,100.4s72.7,27.7,100.4,0S177.9,77.5,150.2,49.8z M56.4,143.6
|
|
113
|
+
c-24-24-24-63.2,0-87.3s63.2-24,87.3,0s24,63.2,0,87.3S80.4,167.7,56.4,143.6z M125.5,125.5c-2,2-5.1,2-7.1,0L100,107.1l-18.4,18.4
|
|
114
|
+
c-2,2-5.1,2-7.1,0c-1.9-2-1.9-5.1,0-7.1L92.9,100L74.5,81.6c-1.9-2-1.9-5.1,0-7.1c1-1,2.3-1.5,3.5-1.5c1.3,0,2.6,0.5,3.5,1.5
|
|
115
|
+
L100,92.9l18.4-18.4c2-1.9,5.1-1.9,7.1,0c1,1,1.5,2.3,1.5,3.5c0,1.3-0.5,2.6-1.5,3.5L107.1,100l18.4,18.4
|
|
116
|
+
C127.4,120.3,127.4,123.5,125.5,125.5z"
|
|
117
|
+
/>
|
|
118
|
+
</svg>
|
|
119
|
+
</button>
|
|
120
|
+
</div>
|
|
121
|
+
{#if navigation}
|
|
122
|
+
{@render navigation()}
|
|
123
|
+
{/if}
|
|
124
|
+
</div>
|
|
125
|
+
{/if}
|
|
126
|
+
</main>
|
|
127
|
+
|
|
128
|
+
<style>
|
|
129
|
+
.air-admin-panel-main-container,
|
|
130
|
+
.air-admin-panel-main-container * {
|
|
131
|
+
box-sizing: border-box !important;
|
|
132
|
+
}
|
|
133
|
+
button {
|
|
134
|
+
background-color: transparent;
|
|
135
|
+
border: none;
|
|
136
|
+
}
|
|
137
|
+
.air-admin-panel-main-container {
|
|
138
|
+
position: relative;
|
|
139
|
+
width: 100%;
|
|
140
|
+
height: 100%;
|
|
141
|
+
box-sizing: border-box;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.air-admin-panel-grid-layout {
|
|
145
|
+
position: relative;
|
|
146
|
+
display: grid;
|
|
147
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
148
|
+
grid-template-rows: 100vh;
|
|
149
|
+
|
|
150
|
+
@media (min-width: 640px) {
|
|
151
|
+
grid-template-columns: 15rem /* 240px */ 1fr;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.air-admin-panel-menu-button-container {
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
|
|
160
|
+
@media (min-width: 640px) {
|
|
161
|
+
display: none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.air-menu-button {
|
|
166
|
+
width: 100%;
|
|
167
|
+
height: 100%;
|
|
168
|
+
color: var(--ap-iconColor);
|
|
169
|
+
}
|
|
170
|
+
.air-menu-button svg {
|
|
171
|
+
width: 2rem;
|
|
172
|
+
height: 2rem;
|
|
173
|
+
}
|
|
174
|
+
.air-menu-button:hover {
|
|
175
|
+
filter: brightness(1.2);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.air-drawer {
|
|
179
|
+
position: absolute;
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-rows: 3rem 1fr;
|
|
182
|
+
top: 0;
|
|
183
|
+
width: 15rem;
|
|
184
|
+
height: 100%;
|
|
185
|
+
background-color: var(--ap-drawerBgColor);
|
|
186
|
+
border-top-right-radius: 0.75rem;
|
|
187
|
+
border-bottom-right-radius: 0.75rem;
|
|
188
|
+
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
|
|
189
|
+
overflow: hidden;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.air-drawer-title-container {
|
|
193
|
+
width: 100%;
|
|
194
|
+
height: 100%;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.air-drawer-button-container {
|
|
198
|
+
display: grid;
|
|
199
|
+
grid-template-columns: 1fr min-content;
|
|
200
|
+
padding: 0.5rem;
|
|
201
|
+
background-color: var(--ap-drawerTitleBgColor);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.air-drawer-close-button {
|
|
205
|
+
display: flex;
|
|
206
|
+
justify-content: center;
|
|
207
|
+
align-items: center;
|
|
208
|
+
width: 100%;
|
|
209
|
+
height: 100%;
|
|
210
|
+
color: var(--ap-iconColor);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.air-drawer-close-button svg {
|
|
214
|
+
width: 2rem;
|
|
215
|
+
height: 2rem;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.air-drawer-panel {
|
|
219
|
+
background-color: var(--ap-panelBgColor);
|
|
220
|
+
overflow-y: scroll;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.air-admin-panel-content-section-container {
|
|
224
|
+
position: relative;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.air-admin-panel-content-section {
|
|
228
|
+
position: relative;
|
|
229
|
+
display: grid;
|
|
230
|
+
width: 100%;
|
|
231
|
+
height: 100%;
|
|
232
|
+
grid-template-rows: 5rem minmax(0, 1fr);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.air-admin-panel-title-section-container {
|
|
236
|
+
position: relative;
|
|
237
|
+
display: grid;
|
|
238
|
+
grid-template-columns: 3rem 1fr;
|
|
239
|
+
width: 100%;
|
|
240
|
+
background-color: var(--ap-panelMenuBgColor);
|
|
241
|
+
|
|
242
|
+
@media (min-width: 640px) {
|
|
243
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.air-title-container {
|
|
248
|
+
position: sticky;
|
|
249
|
+
top: 0;
|
|
250
|
+
border: none;
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.air-admin-panel-navigation-slot {
|
|
255
|
+
position: sticky;
|
|
256
|
+
top: 0;
|
|
257
|
+
left: 0;
|
|
258
|
+
display: none;
|
|
259
|
+
width: 100%;
|
|
260
|
+
background-color: var(--ap-drawerBgColor);
|
|
261
|
+
|
|
262
|
+
@media (min-width: 640px) {
|
|
263
|
+
display: block;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { AdminPanel5ColorScheme } from './types.js';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
navigation?: Snippet;
|
|
5
|
+
title?: Snippet;
|
|
6
|
+
panel?: Snippet;
|
|
7
|
+
drawerTitle?: Snippet;
|
|
8
|
+
colorScheme?: Partial<AdminPanel5ColorScheme>;
|
|
9
|
+
};
|
|
10
|
+
declare const AdminPanel5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
11
|
+
type AdminPanel5 = ReturnType<typeof AdminPanel5>;
|
|
12
|
+
export default AdminPanel5;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import Input5 from "./Input5.svelte";
|
|
|
4
4
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
5
5
|
import Accordion5 from "./Accordion5.svelte";
|
|
6
6
|
import Chart5 from "./Chart5.svelte";
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
export
|
|
7
|
+
import AdminPanel5 from "./AdminPanel5.svelte";
|
|
8
|
+
import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme, AdminPanel5ColorScheme } from "./types.js";
|
|
9
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5 };
|
|
10
|
+
export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme, AdminPanel5ColorScheme };
|
package/dist/index.js
CHANGED
|
@@ -5,4 +5,5 @@ import Input5 from "./Input5.svelte";
|
|
|
5
5
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
6
6
|
import Accordion5 from "./Accordion5.svelte";
|
|
7
7
|
import Chart5 from "./Chart5.svelte";
|
|
8
|
-
|
|
8
|
+
import AdminPanel5 from "./AdminPanel5.svelte";
|
|
9
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5 };
|
package/dist/types.d.ts
CHANGED
|
@@ -70,3 +70,10 @@ export interface Chart5ColorScheme {
|
|
|
70
70
|
yAxisTextColor?: string;
|
|
71
71
|
xAxisTextColor?: string;
|
|
72
72
|
}
|
|
73
|
+
export interface AdminPanel5ColorScheme {
|
|
74
|
+
panelMenuBgColor?: string;
|
|
75
|
+
panelBgColor?: string;
|
|
76
|
+
drawerBgColor?: string;
|
|
77
|
+
drawerTitleBgColor?: string;
|
|
78
|
+
iconColor?: string;
|
|
79
|
+
}
|