hamzus-ui 0.0.191 → 0.0.193
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/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +1 -1
- package/src/components/hamzus-ui/Button/Button_link.svelte +1 -1
- package/src/components/hamzus-ui/Object/Object.svelte +107 -0
- package/src/components/hamzus-ui/Object/dataTypes/Line.svelte +21 -0
- package/src/components/hamzus-ui/Object/dataTypes/Object.svelte +108 -0
- package/src/components/hamzus-ui/Object/object.js +18 -0
- package/src/utils/const.js +4 -0
package/index.d.ts
CHANGED
|
@@ -44,6 +44,7 @@ export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Carou
|
|
|
44
44
|
export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
|
|
45
45
|
export * as Table from "./src/components/hamzus-ui/Table"
|
|
46
46
|
export * as DataList from "./src/components/hamzus-ui/DataList"
|
|
47
|
+
export { default as Object } from "./src/components/hamzus-ui/Object/Object.svelte"
|
|
47
48
|
export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
|
|
48
49
|
export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
|
|
49
50
|
export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
|
package/index.js
CHANGED
|
@@ -41,6 +41,7 @@ export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Carou
|
|
|
41
41
|
export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
|
|
42
42
|
export * as Table from "./src/components/hamzus-ui/Table"
|
|
43
43
|
export * as DataList from "./src/components/hamzus-ui/DataList"
|
|
44
|
+
export { default as Object } from "./src/components/hamzus-ui/Object/Object.svelte"
|
|
44
45
|
export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
|
|
45
46
|
export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
|
|
46
47
|
export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
|
package/package.json
CHANGED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import IconButton from '../IconButton/IconButton.svelte';
|
|
3
|
+
import { dataTypes, nextColor } from './object';
|
|
4
|
+
import { onMount } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let value = null;
|
|
7
|
+
|
|
8
|
+
$: if (value !== null && value.isOpen === undefined) value.isOpen = true;
|
|
9
|
+
|
|
10
|
+
function getColor() {
|
|
11
|
+
if (!value.color) return 'var(--blue)';
|
|
12
|
+
|
|
13
|
+
return nextColor[value.color];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function getNextColor(color, index) {
|
|
17
|
+
for (let i = 0; i < index; i++) {
|
|
18
|
+
color = nextColor[color];
|
|
19
|
+
}
|
|
20
|
+
return color;
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
{#if value !== null}
|
|
25
|
+
{@const color = getColor()}
|
|
26
|
+
<div class="object" style="border:1px solid {color}">
|
|
27
|
+
<span class="color-bar" style="background-color:{color}"></span>
|
|
28
|
+
<div class="top-bar">
|
|
29
|
+
<h4>{value.label ?? ''} <span style="color:var(--green)">Object</span></h4>
|
|
30
|
+
<IconButton
|
|
31
|
+
onClick={() => {
|
|
32
|
+
value.isOpen = !value.isOpen;
|
|
33
|
+
}}
|
|
34
|
+
variant="secondary"
|
|
35
|
+
>
|
|
36
|
+
{#if value.isOpen}
|
|
37
|
+
<svg
|
|
38
|
+
width="24"
|
|
39
|
+
height="24"
|
|
40
|
+
viewBox="0 0 24 24"
|
|
41
|
+
fill="none"
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
>
|
|
44
|
+
<path
|
|
45
|
+
d="M19.9195 15.8001C19.7295 15.8001 19.5395 15.7301 19.3895 15.5801L12.8695 9.06008C12.3895 8.58008 11.6095 8.58008 11.1295 9.06008L4.60953 15.5801C4.31953 15.8701 3.83953 15.8701 3.54953 15.5801C3.25953 15.2901 3.25953 14.8101 3.54953 14.5201L10.0695 8.00008C11.1295 6.94008 12.8595 6.94008 13.9295 8.00008L20.4495 14.5201C20.7395 14.8101 20.7395 15.2901 20.4495 15.5801C20.2995 15.7201 20.1095 15.8001 19.9195 15.8001Z"
|
|
46
|
+
fill="#292D32"
|
|
47
|
+
/>
|
|
48
|
+
</svg>
|
|
49
|
+
{:else}
|
|
50
|
+
<svg
|
|
51
|
+
width="24"
|
|
52
|
+
height="24"
|
|
53
|
+
viewBox="0 0 24 24"
|
|
54
|
+
fill="none"
|
|
55
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
+
>
|
|
57
|
+
<path
|
|
58
|
+
d="M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"
|
|
59
|
+
fill="#292D32"
|
|
60
|
+
/>
|
|
61
|
+
</svg>
|
|
62
|
+
{/if}
|
|
63
|
+
</IconButton>
|
|
64
|
+
</div>
|
|
65
|
+
{#if value.isOpen}
|
|
66
|
+
{#each Object.entries(value.childs) as [label, data], index}
|
|
67
|
+
{@const nextColord = getNextColor(color, index)}
|
|
68
|
+
{#if dataTypes.hasOwnProperty(data.type)}
|
|
69
|
+
<svelte:component
|
|
70
|
+
this={dataTypes[data.type]}
|
|
71
|
+
value={{ ...data, color: nextColord }}
|
|
72
|
+
{label}
|
|
73
|
+
defaultValue={data.default}
|
|
74
|
+
type={data.allowedTypes}
|
|
75
|
+
></svelte:component>
|
|
76
|
+
{/if}
|
|
77
|
+
{/each}
|
|
78
|
+
{/if}
|
|
79
|
+
</div>
|
|
80
|
+
{/if}
|
|
81
|
+
|
|
82
|
+
<style>
|
|
83
|
+
.object {
|
|
84
|
+
position: relative;
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
padding: var(--pad-m) var(--pad-m) var(--pad-m) var(--pad-xl);
|
|
88
|
+
row-gap: var(--pad-m);
|
|
89
|
+
border: 1px solid var(--stroke);
|
|
90
|
+
border-radius: var(--radius-m);
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.color-bar {
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 0px;
|
|
97
|
+
left: 0px;
|
|
98
|
+
height: 100%;
|
|
99
|
+
width: 5px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.top-bar {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: space-between;
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let label = '';
|
|
3
|
+
export let defaultValue = '';
|
|
4
|
+
export let type = '';
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div class="line">
|
|
8
|
+
<h4>{label} <span style="color:var(--blue)">{type}</span></h4>
|
|
9
|
+
<h4>{defaultValue}</h4>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
.line {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
padding: var(--pad-s) var(--pad-m);
|
|
18
|
+
background-color: var(--bg-2);
|
|
19
|
+
border-radius: var(--radius-s);
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import IconButton from '../../IconButton/IconButton.svelte';
|
|
3
|
+
import { dataTypes, nextColor } from '../object';
|
|
4
|
+
import { onMount } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let value = null;
|
|
7
|
+
|
|
8
|
+
$: if (value !== null && value.isOpen === undefined) value.isOpen = true;
|
|
9
|
+
|
|
10
|
+
function getColor() {
|
|
11
|
+
if (!value.color) return 'var(--blue)';
|
|
12
|
+
|
|
13
|
+
return nextColor[value.color];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function getNextColor(color, index) {
|
|
17
|
+
for (let i = 0; i < index; i++) {
|
|
18
|
+
color = nextColor[color];
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return color;
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#if value !== null}
|
|
26
|
+
{@const color = getColor()}
|
|
27
|
+
<div class="object" style="border:1px solid {color}">
|
|
28
|
+
<span class="color-bar" style="background-color:{color}"></span>
|
|
29
|
+
<div class="top-bar">
|
|
30
|
+
<h4>{value.label ?? ''} <span style="color:var(--green)">Object</span></h4>
|
|
31
|
+
<IconButton
|
|
32
|
+
onClick={() => {
|
|
33
|
+
value.isOpen = !value.isOpen;
|
|
34
|
+
}}
|
|
35
|
+
variant="secondary"
|
|
36
|
+
>
|
|
37
|
+
{#if value.isOpen}
|
|
38
|
+
<svg
|
|
39
|
+
width="24"
|
|
40
|
+
height="24"
|
|
41
|
+
viewBox="0 0 24 24"
|
|
42
|
+
fill="none"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
d="M19.9195 15.8001C19.7295 15.8001 19.5395 15.7301 19.3895 15.5801L12.8695 9.06008C12.3895 8.58008 11.6095 8.58008 11.1295 9.06008L4.60953 15.5801C4.31953 15.8701 3.83953 15.8701 3.54953 15.5801C3.25953 15.2901 3.25953 14.8101 3.54953 14.5201L10.0695 8.00008C11.1295 6.94008 12.8595 6.94008 13.9295 8.00008L20.4495 14.5201C20.7395 14.8101 20.7395 15.2901 20.4495 15.5801C20.2995 15.7201 20.1095 15.8001 19.9195 15.8001Z"
|
|
47
|
+
fill="#292D32"
|
|
48
|
+
/>
|
|
49
|
+
</svg>
|
|
50
|
+
{:else}
|
|
51
|
+
<svg
|
|
52
|
+
width="24"
|
|
53
|
+
height="24"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
fill="none"
|
|
56
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
+
>
|
|
58
|
+
<path
|
|
59
|
+
d="M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"
|
|
60
|
+
fill="#292D32"
|
|
61
|
+
/>
|
|
62
|
+
</svg>
|
|
63
|
+
{/if}
|
|
64
|
+
</IconButton>
|
|
65
|
+
</div>
|
|
66
|
+
{#if value.isOpen}
|
|
67
|
+
{#each Object.entries(value.childs) as [label, data], index}
|
|
68
|
+
{@const nextColord = getNextColor(color, index)}
|
|
69
|
+
{#if dataTypes.hasOwnProperty(data.type)}
|
|
70
|
+
<svelte:component
|
|
71
|
+
this={dataTypes[data.type]}
|
|
72
|
+
value={{ ...data, color: nextColord }}
|
|
73
|
+
{label}
|
|
74
|
+
defaultValue={data.default}
|
|
75
|
+
type={data.allowedTypes}
|
|
76
|
+
></svelte:component>
|
|
77
|
+
{/if}
|
|
78
|
+
{/each}
|
|
79
|
+
{/if}
|
|
80
|
+
</div>
|
|
81
|
+
{/if}
|
|
82
|
+
|
|
83
|
+
<style>
|
|
84
|
+
.object {
|
|
85
|
+
position: relative;
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
padding: var(--pad-m) var(--pad-m) var(--pad-m) var(--pad-xl);
|
|
89
|
+
row-gap: var(--pad-m);
|
|
90
|
+
border: 1px solid var(--stroke);
|
|
91
|
+
border-radius: var(--radius-m);
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.color-bar {
|
|
96
|
+
position: absolute;
|
|
97
|
+
top: 0px;
|
|
98
|
+
left: 0px;
|
|
99
|
+
height: 100%;
|
|
100
|
+
width: 5px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.top-bar {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: space-between;
|
|
107
|
+
}
|
|
108
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import Object from "./dataTypes/Object.svelte"
|
|
2
|
+
import Line from "./dataTypes/Line.svelte"
|
|
3
|
+
|
|
4
|
+
export const dataTypes = {
|
|
5
|
+
"object":Object,
|
|
6
|
+
"line":Line
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// cycle de couleur
|
|
10
|
+
export const nextColor = {
|
|
11
|
+
"var(--blue)":"var(--mauve)",
|
|
12
|
+
"var(--mauve)":"var(--violet)",
|
|
13
|
+
"var(--violet)":"var(--red)",
|
|
14
|
+
"var(--red)":"var(--orange)",
|
|
15
|
+
"var(--orange)":"var(--yellow)",
|
|
16
|
+
"var(--yellow)":"var(--green)",
|
|
17
|
+
"var(--green)":"var(--blue)",// --> revenir a la premiere couleur
|
|
18
|
+
}
|