@djcali570/component-lib 0.0.4 → 0.0.6
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 +18 -49
- package/dist/Accordion5.svelte +141 -0
- package/dist/Accordion5.svelte.d.ts +10 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.js +2 -1
- package/dist/types.d.ts +5 -0
- package/dist/types.js +1 -0
- package/package.json +66 -68
package/README.md
CHANGED
|
@@ -1,58 +1,27 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DJCali570 Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Components:
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Accordion
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
If you're seeing this, you've probably already done this step. Congrats!
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
# create a new project in the current directory
|
|
13
|
-
npx sv create
|
|
14
|
-
|
|
15
|
-
# create a new project in my-app
|
|
16
|
-
npx sv create my-app
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Developing
|
|
20
|
-
|
|
21
|
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
7
|
+
Customize the accordion color scheme
|
|
22
8
|
|
|
23
9
|
```bash
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
import { Accordion5 } from '@djcali570/component-lib';
|
|
11
|
+
import type { Accordion5ColorScheme } from '@djcali570/component-lib';
|
|
12
|
+
|
|
13
|
+
let acs: Accordion5ColorScheme = {
|
|
14
|
+
bgColor: '#121212',
|
|
15
|
+
textColor: '#D6D6D6',
|
|
16
|
+
triggerColor: '#D6D6D6'
|
|
17
|
+
}
|
|
28
18
|
```
|
|
29
19
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
## Building
|
|
33
|
-
|
|
34
|
-
To build your library:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
npm run package
|
|
20
|
+
Use of the Accordion component
|
|
38
21
|
```
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
You can preview the production build with `npm run preview`.
|
|
47
|
-
|
|
48
|
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
|
49
|
-
|
|
50
|
-
## Publishing
|
|
51
|
-
|
|
52
|
-
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
53
|
-
|
|
54
|
-
To publish your library to [npm](https://www.npmjs.com):
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
npm publish
|
|
22
|
+
<Accordion5 colorScheme={acs} title='My Title'>
|
|
23
|
+
{#snippet panel()}
|
|
24
|
+
<p>Accordion Contents</p>
|
|
25
|
+
{/Snippet}
|
|
26
|
+
</Accordion5>
|
|
58
27
|
```
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { Accordion5ColorScheme } from './types.js';
|
|
4
|
+
|
|
5
|
+
// Props with typed colorScheme
|
|
6
|
+
let {
|
|
7
|
+
colorScheme: partialColorScheme = {},
|
|
8
|
+
title = 'Title',
|
|
9
|
+
panel
|
|
10
|
+
}: {
|
|
11
|
+
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
12
|
+
title?: string;
|
|
13
|
+
panel: Snippet;
|
|
14
|
+
} = $props();
|
|
15
|
+
|
|
16
|
+
// Default colorScheme
|
|
17
|
+
const defaultColorScheme: Accordion5ColorScheme = {
|
|
18
|
+
bgColor: '#121212',
|
|
19
|
+
textColor: '#D6D6D6',
|
|
20
|
+
triggerColor: '#D6D6D6'
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// Merge partial colorScheme with defaults
|
|
24
|
+
const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
|
|
25
|
+
|
|
26
|
+
let status = $state(false);
|
|
27
|
+
let panelHeight = $state('0px'); // Store dynamic height
|
|
28
|
+
let panelRef: HTMLDivElement | undefined = $state(); // Reference to inner panel
|
|
29
|
+
|
|
30
|
+
// Toggle panel and update height
|
|
31
|
+
function showPanel() {
|
|
32
|
+
status = !status;
|
|
33
|
+
if (status && panelRef) {
|
|
34
|
+
// Set max-height to content height when opening
|
|
35
|
+
panelHeight = `${panelRef.scrollHeight}px`;
|
|
36
|
+
} else {
|
|
37
|
+
// Reset to 0 when closing
|
|
38
|
+
panelHeight = '0px';
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Update height on content change (if panel content is dynamic)
|
|
43
|
+
$effect(() => {
|
|
44
|
+
if (status && panelRef) {
|
|
45
|
+
panelHeight = `${panelRef.scrollHeight}px`;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<div
|
|
51
|
+
class="accordion5"
|
|
52
|
+
style="
|
|
53
|
+
--acc5-bgColor: {colorScheme.bgColor};
|
|
54
|
+
--acc5-textColor: {colorScheme.textColor};
|
|
55
|
+
--acc5-triggerColor: {colorScheme.triggerColor};
|
|
56
|
+
"
|
|
57
|
+
>
|
|
58
|
+
<button onclick={showPanel}>
|
|
59
|
+
<div class="panel-head">
|
|
60
|
+
<div class="panel-title">
|
|
61
|
+
<div>{title}</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="panel-head-icon-container">
|
|
64
|
+
<div class="panel-head-icon" class:open={status}>
|
|
65
|
+
<svg viewBox="0 0 200 200">
|
|
66
|
+
<path
|
|
67
|
+
fill="currentColor"
|
|
68
|
+
d="M96.5,63.4c1.9-1.9,5.1-1.9,7.1,0l65.8,65.8c1,1,1.5,2.2,1.5,3.5s-0.5,2.6-1.5,3.5c-1.9,1.9-5.1,1.9-7.1,0L100,74.1L37.5,136.6c-1.9,1.9-5.1,1.9-7.1,0c-0.9-1.1-1.4-2.3-1.4-3.6c0-1.3,0.5-2.6,1.5-3.5L96.5,63.4z"
|
|
69
|
+
/>
|
|
70
|
+
</svg>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</button>
|
|
75
|
+
<div class="accPanel" class:open={status} style="max-height: {panelHeight}">
|
|
76
|
+
<div class="accPanel-inner" bind:this={panelRef}>
|
|
77
|
+
{@render panel()}
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<style>
|
|
83
|
+
.accordion5 {
|
|
84
|
+
width: 100%;
|
|
85
|
+
max-width: 600px;
|
|
86
|
+
margin: 0 auto;
|
|
87
|
+
border-radius: 0.5rem;
|
|
88
|
+
background-color: var(--acc5-bgColor);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
button {
|
|
92
|
+
width: 100%;
|
|
93
|
+
padding: 0.5rem;
|
|
94
|
+
font-size: 1rem;
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
border: none;
|
|
97
|
+
text-align: left;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.panel-head {
|
|
101
|
+
width: 100%;
|
|
102
|
+
display: grid;
|
|
103
|
+
grid-template-columns: 1fr min-content;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.panel-title {
|
|
107
|
+
display: flex;
|
|
108
|
+
justify-content: flex-start;
|
|
109
|
+
align-items: center;
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 100%;
|
|
112
|
+
color: var(--acc5-textColor);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.panel-head-icon-container {
|
|
116
|
+
display: flex;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
align-items: center;
|
|
119
|
+
width: 1.5rem;
|
|
120
|
+
height: 1.5rem;
|
|
121
|
+
}
|
|
122
|
+
.panel-head-icon {
|
|
123
|
+
width: 1.2rem;
|
|
124
|
+
height: 1.2rem;
|
|
125
|
+
color: var(--acc5-triggerColor);
|
|
126
|
+
transition: transform 400ms ease-in-out;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.accPanel {
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
max-height: 0;
|
|
132
|
+
transition: max-height 400ms ease-in-out;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.accPanel-inner {
|
|
136
|
+
padding: 1rem;
|
|
137
|
+
}
|
|
138
|
+
.panel-head-icon.open {
|
|
139
|
+
transform: rotate(180deg);
|
|
140
|
+
}
|
|
141
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { Accordion5ColorScheme } from './types.js';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
5
|
+
title?: string;
|
|
6
|
+
panel: Snippet;
|
|
7
|
+
};
|
|
8
|
+
declare const Accordion5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type Accordion5 = ReturnType<typeof Accordion5>;
|
|
10
|
+
export default Accordion5;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,4 +2,7 @@ import DatePicker5 from "./DatePicker5.svelte";
|
|
|
2
2
|
import DropDown5 from "./DropDown5.svelte";
|
|
3
3
|
import Input5 from "./Input5.svelte";
|
|
4
4
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
5
|
-
|
|
5
|
+
import Accordion5 from "./Accordion5.svelte";
|
|
6
|
+
import type { Accordion5ColorScheme } from "./types.js";
|
|
7
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5 };
|
|
8
|
+
export type { Accordion5ColorScheme };
|
package/dist/index.js
CHANGED
|
@@ -3,4 +3,5 @@ import DatePicker5 from "./DatePicker5.svelte";
|
|
|
3
3
|
import DropDown5 from "./DropDown5.svelte";
|
|
4
4
|
import Input5 from "./Input5.svelte";
|
|
5
5
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
6
|
-
|
|
6
|
+
import Accordion5 from "./Accordion5.svelte";
|
|
7
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5 };
|
package/dist/types.d.ts
ADDED
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,69 +1,67 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
}
|
|
2
|
+
"name": "@djcali570/component-lib",
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"files": [
|
|
5
|
+
"dist",
|
|
6
|
+
"!dist/**/*.test.*",
|
|
7
|
+
"!dist/**/*.spec.*"
|
|
8
|
+
],
|
|
9
|
+
"sideEffects": [
|
|
10
|
+
"**/*.css"
|
|
11
|
+
],
|
|
12
|
+
"svelte": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"type": "module",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"svelte": "./dist/index.js"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"svelte": "^5.0.0",
|
|
23
|
+
"@sveltejs/kit": "^2.16.0",
|
|
24
|
+
"tailwindcss": "^4.0.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@eslint/compat": "^1.2.5",
|
|
28
|
+
"@eslint/js": "^9.18.0",
|
|
29
|
+
"@sveltejs/adapter-auto": "^6.0.0",
|
|
30
|
+
"@sveltejs/kit": "^2.16.0",
|
|
31
|
+
"@sveltejs/package": "^2.0.0",
|
|
32
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
33
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
34
|
+
"eslint": "^9.18.0",
|
|
35
|
+
"eslint-config-prettier": "^10.0.1",
|
|
36
|
+
"eslint-plugin-svelte": "^3.0.0",
|
|
37
|
+
"globals": "^16.0.0",
|
|
38
|
+
"prettier": "^3.4.2",
|
|
39
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
40
|
+
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
41
|
+
"publint": "^0.3.2",
|
|
42
|
+
"svelte": "^5.0.0",
|
|
43
|
+
"svelte-check": "^4.0.0",
|
|
44
|
+
"tailwindcss": "^4.0.0",
|
|
45
|
+
"typescript": "^5.0.0",
|
|
46
|
+
"typescript-eslint": "^8.20.0",
|
|
47
|
+
"vite": "^6.2.6"
|
|
48
|
+
},
|
|
49
|
+
"keywords": [
|
|
50
|
+
"svelte",
|
|
51
|
+
"SvelteKit",
|
|
52
|
+
"components"
|
|
53
|
+
],
|
|
54
|
+
"author": {
|
|
55
|
+
"name": "Jay Cali"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"dev": "vite dev",
|
|
59
|
+
"build": "vite build && npm run prepack",
|
|
60
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
61
|
+
"preview": "vite preview",
|
|
62
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
63
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
64
|
+
"format": "prettier --write .",
|
|
65
|
+
"lint": "prettier --check . && eslint ."
|
|
66
|
+
}
|
|
67
|
+
}
|