@alegendstale/holly-components 2.0.3 → 2.0.4
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/absolute-container/absolute-container.js +79 -113
- package/dist/components/absolute-container/absolute-container.styles.js +20 -17
- package/dist/components/bottom-sheet/bottom-sheet.js +189 -319
- package/dist/components/bottom-sheet/bottom-sheet.styles.js +117 -114
- package/dist/components/canvas/canvas-base.d.ts +4 -1
- package/dist/components/canvas/canvas-base.d.ts.map +1 -1
- package/dist/components/canvas/canvas-base.js +51 -67
- package/dist/components/canvas/canvas-gradient.js +44 -69
- package/dist/components/canvas/canvas-image.js +112 -177
- package/dist/components/canvas/canvas-image.styles.js +23 -20
- package/dist/components/carousel-scroller/carousel-scroller.js +63 -87
- package/dist/components/carousel-scroller/carousel-scroller.styles.js +68 -65
- package/dist/components/color-palette/color-palette-utils.js +55 -104
- package/dist/components/color-palette/color-palette.js +250 -384
- package/dist/components/color-palette/color-palette.styles.js +92 -89
- package/dist/components/color-palette/component/color-palette-component.js +134 -188
- package/dist/components/color-palette/component/color-palette-component.styles.js +12 -9
- package/dist/components/color-palette/editor/color-palette-editor.js +413 -539
- package/dist/components/color-palette/editor/color-palette-editor.styles.js +149 -146
- package/dist/components/color-palette/editor/settings-item.js +32 -40
- package/dist/components/color-palette/editor/settings-item.styles.js +36 -33
- package/dist/components/color-palette/item/color-palette-item-edit.js +50 -84
- package/dist/components/color-palette/item/color-palette-item-edit.styles.js +53 -50
- package/dist/components/color-palette/item/color-palette-item.js +72 -107
- package/dist/components/color-palette/item/color-palette-item.styles.js +85 -82
- package/dist/components/color-palette/menu/color-palette-menu.js +162 -200
- package/dist/components/color-palette/menu/color-palette-menu.styles.js +51 -48
- package/dist/components/color-palette/menu/color-palette-reorder.js +76 -95
- package/dist/components/color-palette/menu/color-palette-reorder.styles.js +33 -30
- package/dist/components/draw-svg/draw-svg.js +35 -52
- package/dist/components/draw-svg/draw-svg.styles.js +41 -38
- package/dist/components/responsive-svg/responsive-svg.js +122 -174
- package/dist/components/responsive-svg/responsive-svg.styles.js +48 -45
- package/dist/components/tool-tip/tool-tip.d.ts +5 -1
- package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
- package/dist/components/tool-tip/tool-tip.js +64 -100
- package/dist/components/tool-tip/tool-tip.styles.js +60 -57
- package/dist/decorators/condCustomElement.js +8 -11
- package/dist/utils/EventEmitter.js +23 -23
- package/dist/utils/ResponsiveController.js +15 -18
- package/dist/utils/basicUtils.js +98 -146
- package/dist/utils/colorsea-wrapper.js +162 -166
- package/dist/utils/dragDropUtils.js +75 -119
- package/dist/utils/generateUtils.js +39 -73
- package/package.json +29 -60
- package/dist/components/absolute-container/absolute-container.stories.d.ts +0 -11
- package/dist/components/absolute-container/absolute-container.stories.d.ts.map +0 -1
- package/dist/components/absolute-container/absolute-container.stories.js +0 -64
- package/dist/components/absolute-container/index.d.ts +0 -2
- package/dist/components/absolute-container/index.d.ts.map +0 -1
- package/dist/components/absolute-container/index.js +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts +0 -17
- package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.stories.js +0 -67
- package/dist/components/bottom-sheet/index.d.ts +0 -2
- package/dist/components/bottom-sheet/index.d.ts.map +0 -1
- package/dist/components/bottom-sheet/index.js +0 -1
- package/dist/components/canvas/canvas-base.stories.d.ts +0 -7
- package/dist/components/canvas/canvas-base.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-base.stories.js +0 -24
- package/dist/components/canvas/canvas-gradient.stories.d.ts +0 -14
- package/dist/components/canvas/canvas-gradient.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-gradient.stories.js +0 -46
- package/dist/components/canvas/canvas-image.stories.d.ts +0 -13
- package/dist/components/canvas/canvas-image.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-image.stories.js +0 -49
- package/dist/components/canvas/index.d.ts +0 -3
- package/dist/components/canvas/index.d.ts.map +0 -1
- package/dist/components/canvas/index.js +0 -2
- package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts +0 -13
- package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map +0 -1
- package/dist/components/carousel-scroller/carousel-scroller.stories.js +0 -56
- package/dist/components/carousel-scroller/index.d.ts +0 -2
- package/dist/components/carousel-scroller/index.d.ts.map +0 -1
- package/dist/components/carousel-scroller/index.js +0 -1
- package/dist/components/color-palette/component/color-palette-component.stories.d.ts +0 -13
- package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map +0 -1
- package/dist/components/color-palette/component/color-palette-component.stories.js +0 -75
- package/dist/components/color-palette/component/index.d.ts +0 -2
- package/dist/components/color-palette/component/index.d.ts.map +0 -1
- package/dist/components/color-palette/component/index.js +0 -1
- package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts +0 -18
- package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map +0 -1
- package/dist/components/color-palette/editor/color-palette-editor.stories.js +0 -67
- package/dist/components/color-palette/editor/index.d.ts +0 -2
- package/dist/components/color-palette/editor/index.d.ts.map +0 -1
- package/dist/components/color-palette/editor/index.js +0 -1
- package/dist/components/color-palette/index.d.ts +0 -6
- package/dist/components/color-palette/index.d.ts.map +0 -1
- package/dist/components/color-palette/index.js +0 -5
- package/dist/components/color-palette/item/index.d.ts +0 -3
- package/dist/components/color-palette/item/index.d.ts.map +0 -1
- package/dist/components/color-palette/item/index.js +0 -2
- package/dist/components/color-palette/menu/index.d.ts +0 -3
- package/dist/components/color-palette/menu/index.d.ts.map +0 -1
- package/dist/components/color-palette/menu/index.js +0 -2
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts +0 -33
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.js +0 -62
- package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts +0 -52
- package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette-valid.stories.js +0 -268
- package/dist/components/color-palette/storybook/color-palette.stories.d.ts +0 -27
- package/dist/components/color-palette/storybook/color-palette.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette.stories.js +0 -129
- package/dist/components/draw-svg/draw-svg.stories.d.ts +0 -7
- package/dist/components/draw-svg/draw-svg.stories.d.ts.map +0 -1
- package/dist/components/draw-svg/draw-svg.stories.js +0 -61
- package/dist/components/draw-svg/index.d.ts +0 -2
- package/dist/components/draw-svg/index.d.ts.map +0 -1
- package/dist/components/draw-svg/index.js +0 -1
- package/dist/components/responsive-svg/index.d.ts +0 -2
- package/dist/components/responsive-svg/index.d.ts.map +0 -1
- package/dist/components/responsive-svg/index.js +0 -1
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts +0 -26
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +0 -1
- package/dist/components/responsive-svg/responsive-svg.stories.js +0 -194
- package/dist/components/tool-tip/index.d.ts +0 -2
- package/dist/components/tool-tip/index.d.ts.map +0 -1
- package/dist/components/tool-tip/index.js +0 -1
- package/dist/components/tool-tip/tool-tip.stories.d.ts +0 -16
- package/dist/components/tool-tip/tool-tip.stories.d.ts.map +0 -1
- package/dist/components/tool-tip/tool-tip.stories.js +0 -62
- package/dist/decorators/index.d.ts +0 -2
- package/dist/decorators/index.d.ts.map +0 -1
- package/dist/decorators/index.js +0 -1
- package/dist/index.d.ts +0 -11
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -10
- package/dist/utils/index.d.ts +0 -5
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/index.js +0 -4
- package/dist/utils/types.d.ts +0 -5
- package/dist/utils/types.d.ts.map +0 -1
- package/dist/utils/types.js +0 -1
|
@@ -1,121 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
e.preventDefault();
|
|
22
|
-
this.result.beforeElement = this.getDragBeforeElement(e.clientX);
|
|
23
|
-
this.result.insertedElement = this.getDraggingElement();
|
|
24
|
-
this.result.afterElement = this.getDragAfterElement(e.clientX);
|
|
25
|
-
const insertedIndex = this.draggables.indexOf(this.result.insertedElement);
|
|
26
|
-
// If at the end of draggables
|
|
27
|
-
if (this.result.afterElement === null) {
|
|
28
|
-
// Append element
|
|
29
|
-
dropzone.appendChild(this.result.insertedElement);
|
|
30
|
-
// Remove element from order
|
|
31
|
-
this.result.order.splice(insertedIndex, 1);
|
|
32
|
-
// Add to end of order
|
|
33
|
-
this.result.order.push(this.result.insertedElement);
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
// Place element between
|
|
37
|
-
dropzone.insertBefore(this.result.insertedElement, this.result.afterElement);
|
|
38
|
-
// Remove element from order
|
|
39
|
-
this.result.order.splice(insertedIndex, 1);
|
|
40
|
-
// Get the after index, post element removal
|
|
41
|
-
const afterIndex = this.draggables.indexOf(this.result.afterElement);
|
|
42
|
-
// Insert the element before the after index
|
|
43
|
-
this.result.order.splice(afterIndex, 0, this.result.insertedElement);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
dragEnd(draggable, e) {
|
|
47
|
-
draggable.classList.toggle('is-dragging', false);
|
|
48
|
-
this.onDrop(e, this.result);
|
|
49
|
-
this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
|
|
50
|
-
}
|
|
51
|
-
load() {
|
|
52
|
-
for (let draggable of this.draggables) {
|
|
53
|
-
// Important, so that all types of elements can be dragged, including divs & spans
|
|
54
|
-
draggable.setAttribute('draggable', "true");
|
|
55
|
-
draggable.addEventListener("dragstart", (e) => this.dragStart(draggable, e));
|
|
56
|
-
draggable.addEventListener("dragend", (e) => this.dragEnd(draggable, e));
|
|
57
|
-
}
|
|
58
|
-
for (let dropzone of this.dropzones) {
|
|
59
|
-
dropzone.addEventListener("dragover", (e) => this.dragOver(dropzone, e));
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
unload() {
|
|
63
|
-
for (let draggable of this.draggables) {
|
|
64
|
-
draggable.removeEventListener('dragstart', (e) => this.dragStart(draggable, e));
|
|
65
|
-
draggable.removeEventListener('dragend', (e) => this.dragEnd(draggable, e));
|
|
66
|
-
}
|
|
67
|
-
for (let dropzone of this.dropzones) {
|
|
68
|
-
dropzone.removeEventListener('dragover', (e) => this.dragOver(dropzone, e));
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* @returns The element which is being dragged
|
|
73
|
-
*/
|
|
74
|
-
getDraggingElement() {
|
|
75
|
-
return this.draggables.filter((draggable) => draggable.classList.contains('is-dragging'))[0];
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* @returns All draggable elements not being dragged
|
|
79
|
-
*/
|
|
80
|
-
getDraggableElements() {
|
|
81
|
-
return this.draggables.filter((draggable) => !draggable.classList.contains('is-dragging'));
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Gets the closest element before the dragged element
|
|
85
|
-
*/
|
|
86
|
-
getDragBeforeElement(x) {
|
|
87
|
-
return this.getDraggableElements().reduce((closest, child) => {
|
|
88
|
-
const rect = child.getBoundingClientRect();
|
|
89
|
-
const leftPosition = x - rect.left;
|
|
90
|
-
const halfChildWidth = rect.width / 2;
|
|
91
|
-
const offset = leftPosition - halfChildWidth;
|
|
92
|
-
// Return the closest element to the right of the cursor
|
|
93
|
-
if (offset > 0 && offset < closest.offset)
|
|
94
|
-
return { offset, element: child };
|
|
95
|
-
else
|
|
96
|
-
return closest;
|
|
97
|
-
},
|
|
98
|
-
// Initial closest value
|
|
99
|
-
{ offset: Number.POSITIVE_INFINITY, element: null })
|
|
100
|
-
.element;
|
|
101
|
-
}
|
|
102
|
-
/**
|
|
103
|
-
* Gets the closest element after the dragged element
|
|
104
|
-
*/
|
|
105
|
-
getDragAfterElement(x) {
|
|
106
|
-
return this.getDraggableElements().reduce((closest, child) => {
|
|
107
|
-
const rect = child.getBoundingClientRect();
|
|
108
|
-
const leftPosition = x - rect.left;
|
|
109
|
-
const halfChildWidth = rect.width / 2;
|
|
110
|
-
const offset = leftPosition - halfChildWidth;
|
|
111
|
-
// Return the closest element to the left of the cursor
|
|
112
|
-
if (offset < 0 && offset > closest.offset)
|
|
113
|
-
return { offset, element: child };
|
|
114
|
-
else
|
|
115
|
-
return closest;
|
|
116
|
-
},
|
|
117
|
-
// Initial closest value
|
|
118
|
-
{ offset: Number.NEGATIVE_INFINITY, element: null })
|
|
119
|
-
.element;
|
|
1
|
+
class g {
|
|
2
|
+
constructor(e, t, r) {
|
|
3
|
+
this.dropzones = e, this.draggables = t, this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables }, this.onDrop = r, this.load();
|
|
4
|
+
}
|
|
5
|
+
dragStart(e, t) {
|
|
6
|
+
e.classList.toggle("is-dragging", !0);
|
|
7
|
+
}
|
|
8
|
+
dragOver(e, t) {
|
|
9
|
+
if (t.dataTransfer && Array.from(t.dataTransfer.items).some((l) => l.kind !== "element"))
|
|
10
|
+
return;
|
|
11
|
+
t.preventDefault(), this.result.beforeElement = this.getDragBeforeElement(t.clientX), this.result.insertedElement = this.getDraggingElement(), this.result.afterElement = this.getDragAfterElement(t.clientX);
|
|
12
|
+
const r = this.draggables.indexOf(this.result.insertedElement);
|
|
13
|
+
if (this.result.afterElement === null)
|
|
14
|
+
e.appendChild(this.result.insertedElement), this.result.order.splice(r, 1), this.result.order.push(this.result.insertedElement);
|
|
15
|
+
else {
|
|
16
|
+
e.insertBefore(this.result.insertedElement, this.result.afterElement), this.result.order.splice(r, 1);
|
|
17
|
+
const s = this.draggables.indexOf(this.result.afterElement);
|
|
18
|
+
this.result.order.splice(s, 0, this.result.insertedElement);
|
|
120
19
|
}
|
|
20
|
+
}
|
|
21
|
+
dragEnd(e, t) {
|
|
22
|
+
e.classList.toggle("is-dragging", !1), this.onDrop(t, this.result), this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
|
|
23
|
+
}
|
|
24
|
+
load() {
|
|
25
|
+
for (let e of this.draggables)
|
|
26
|
+
e.setAttribute("draggable", "true"), e.addEventListener("dragstart", (t) => this.dragStart(e, t)), e.addEventListener("dragend", (t) => this.dragEnd(e, t));
|
|
27
|
+
for (let e of this.dropzones)
|
|
28
|
+
e.addEventListener("dragover", (t) => this.dragOver(e, t));
|
|
29
|
+
}
|
|
30
|
+
unload() {
|
|
31
|
+
for (let e of this.draggables)
|
|
32
|
+
e.removeEventListener("dragstart", (t) => this.dragStart(e, t)), e.removeEventListener("dragend", (t) => this.dragEnd(e, t));
|
|
33
|
+
for (let e of this.dropzones)
|
|
34
|
+
e.removeEventListener("dragover", (t) => this.dragOver(e, t));
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* @returns The element which is being dragged
|
|
38
|
+
*/
|
|
39
|
+
getDraggingElement() {
|
|
40
|
+
return this.draggables.filter((e) => e.classList.contains("is-dragging"))[0];
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* @returns All draggable elements not being dragged
|
|
44
|
+
*/
|
|
45
|
+
getDraggableElements() {
|
|
46
|
+
return this.draggables.filter((e) => !e.classList.contains("is-dragging"));
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Gets the closest element before the dragged element
|
|
50
|
+
*/
|
|
51
|
+
getDragBeforeElement(e) {
|
|
52
|
+
return this.getDraggableElements().reduce(
|
|
53
|
+
(t, r) => {
|
|
54
|
+
const s = r.getBoundingClientRect(), l = e - s.left, i = s.width / 2, n = l - i;
|
|
55
|
+
return n > 0 && n < t.offset ? { offset: n, element: r } : t;
|
|
56
|
+
},
|
|
57
|
+
// Initial closest value
|
|
58
|
+
{ offset: Number.POSITIVE_INFINITY, element: null }
|
|
59
|
+
).element;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Gets the closest element after the dragged element
|
|
63
|
+
*/
|
|
64
|
+
getDragAfterElement(e) {
|
|
65
|
+
return this.getDraggableElements().reduce(
|
|
66
|
+
(t, r) => {
|
|
67
|
+
const s = r.getBoundingClientRect(), l = e - s.left, i = s.width / 2, n = l - i;
|
|
68
|
+
return n < 0 && n > t.offset ? { offset: n, element: r } : t;
|
|
69
|
+
},
|
|
70
|
+
// Initial closest value
|
|
71
|
+
{ offset: Number.NEGATIVE_INFINITY, element: null }
|
|
72
|
+
).element;
|
|
73
|
+
}
|
|
121
74
|
}
|
|
75
|
+
export {
|
|
76
|
+
g as DragDrop
|
|
77
|
+
};
|
|
@@ -1,74 +1,40 @@
|
|
|
1
|
-
import
|
|
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
|
-
if (settings)
|
|
37
|
-
settings.aliases = ['Lightest', 'Lighter', 'Base', 'Darker', 'Darkest'];
|
|
38
|
-
break;
|
|
39
|
-
case Combination.Analogous:
|
|
40
|
-
const east = baseColor.adjustHue(-25);
|
|
41
|
-
const west = baseColor.adjustHue(25);
|
|
42
|
-
colors = [east.hex(), baseColor.hex(), west.hex()];
|
|
43
|
-
if (settings)
|
|
44
|
-
settings.aliases = ['Analogous East', 'Base', 'Analogous West'];
|
|
45
|
-
break;
|
|
46
|
-
case Combination.Triadic:
|
|
47
|
-
const hex120 = baseColor.spin(120);
|
|
48
|
-
const hex240 = baseColor.spin(240);
|
|
49
|
-
colors = [baseColor.hex(), hex120.hex(), hex240.hex()];
|
|
50
|
-
if (settings)
|
|
51
|
-
settings.aliases = ['Triadic First', 'Base', 'Triadic Third'];
|
|
52
|
-
break;
|
|
53
|
-
case Combination.Tetradic:
|
|
54
|
-
const hex90 = baseColor.spin(90);
|
|
55
|
-
const hex180 = baseColor.spin(180);
|
|
56
|
-
const hex270 = baseColor.spin(270);
|
|
57
|
-
colors = [baseColor.hex(), hex90.hex(), hex180.hex(), hex270.hex()];
|
|
58
|
-
if (settings)
|
|
59
|
-
settings.aliases = ['Base', 'Tetradic Second', 'Tetradic Third', 'Tetradic Fourth'];
|
|
60
|
-
break;
|
|
61
|
-
case Combination.Random:
|
|
62
|
-
// Clamp to a minimum value of 2
|
|
63
|
-
const randomNumber = Math.max(Math.round(Math.random() * 10), 2);
|
|
64
|
-
let randomColors = [];
|
|
65
|
-
for (let i = 0; i < randomNumber; i++) {
|
|
66
|
-
randomColors.push(colorsea.random().hex());
|
|
67
|
-
}
|
|
68
|
-
colors = randomColors;
|
|
69
|
-
if (settings)
|
|
70
|
-
settings.aliases = [];
|
|
71
|
-
break;
|
|
72
|
-
}
|
|
73
|
-
return { colors, settings };
|
|
1
|
+
import o from "./colorsea-wrapper.js";
|
|
2
|
+
var M = /* @__PURE__ */ ((s) => (s.Complimentary = "Complimentary", s.Monochromatic = "Monochromatic", s.Analogous = "Analogous", s.Triadic = "Triadic", s.Tetradic = "Tetradic", s.Random = "Random", s))(M || {});
|
|
3
|
+
function B(s, c = { baseColor: o.random() }) {
|
|
4
|
+
let { baseColor: e, settings: a } = c;
|
|
5
|
+
e || (e = o.random());
|
|
6
|
+
let r = [];
|
|
7
|
+
switch (s) {
|
|
8
|
+
case "Complimentary":
|
|
9
|
+
r = [e.hex(), e.complement().hex()], a && (a.aliases = ["Base", "Complimentary Color"]);
|
|
10
|
+
break;
|
|
11
|
+
case "Monochromatic":
|
|
12
|
+
const n = e.lighten(20), h = e.lighten(10), l = e.darken(10), d = e.darken(20);
|
|
13
|
+
r = [n.hex(), h.hex(), e.hex(), l.hex(), d.hex()], a && (a.aliases = ["Lightest", "Lighter", "Base", "Darker", "Darkest"]);
|
|
14
|
+
break;
|
|
15
|
+
case "Analogous":
|
|
16
|
+
const x = e.adjustHue(-25), m = e.adjustHue(25);
|
|
17
|
+
r = [x.hex(), e.hex(), m.hex()], a && (a.aliases = ["Analogous East", "Base", "Analogous West"]);
|
|
18
|
+
break;
|
|
19
|
+
case "Triadic":
|
|
20
|
+
const u = e.spin(120), g = e.spin(240);
|
|
21
|
+
r = [e.hex(), u.hex(), g.hex()], a && (a.aliases = ["Triadic First", "Base", "Triadic Third"]);
|
|
22
|
+
break;
|
|
23
|
+
case "Tetradic":
|
|
24
|
+
const p = e.spin(90), T = e.spin(180), k = e.spin(270);
|
|
25
|
+
r = [e.hex(), p.hex(), T.hex(), k.hex()], a && (a.aliases = ["Base", "Tetradic Second", "Tetradic Third", "Tetradic Fourth"]);
|
|
26
|
+
break;
|
|
27
|
+
case "Random":
|
|
28
|
+
const f = Math.max(Math.round(Math.random() * 10), 2);
|
|
29
|
+
let t = [];
|
|
30
|
+
for (let i = 0; i < f; i++)
|
|
31
|
+
t.push(o.random().hex());
|
|
32
|
+
r = t, a && (a.aliases = []);
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
return { colors: r, settings: a };
|
|
74
36
|
}
|
|
37
|
+
export {
|
|
38
|
+
M as Combination,
|
|
39
|
+
B as generateColors
|
|
40
|
+
};
|
package/package.json
CHANGED
|
@@ -1,79 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"private": false,
|
|
3
|
-
"version": "2.0.3",
|
|
4
3
|
"name": "@alegendstale/holly-components",
|
|
5
4
|
"description": "Reusable UI components created using lit",
|
|
5
|
+
"version": "2.0.4",
|
|
6
|
+
"author": "ALegendsTale",
|
|
7
|
+
"license": "GPL-3.0",
|
|
8
|
+
"customElements": "custom-elements.json",
|
|
6
9
|
"type": "module",
|
|
7
|
-
"main": "./dist/index.js",
|
|
8
|
-
"module": "./dist/index.js",
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
10
|
"exports": {
|
|
11
|
-
"./
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
},
|
|
15
|
-
"./utils": {
|
|
16
|
-
"import": "./dist/utils/index.js",
|
|
17
|
-
"types": "./dist/utils/index.d.ts"
|
|
18
|
-
},
|
|
19
|
-
"./absolute-container": {
|
|
20
|
-
"import": "./dist/components/absolute-container/index.js",
|
|
21
|
-
"types": "./dist/components/absolute-container/index.d.ts"
|
|
22
|
-
},
|
|
23
|
-
"./bottom-sheet": {
|
|
24
|
-
"import": "./dist/components/bottom-sheet/index.js",
|
|
25
|
-
"types": "./dist/components/bottom-sheet/index.d.ts"
|
|
26
|
-
},
|
|
27
|
-
"./canvas": {
|
|
28
|
-
"import": "./dist/components/canvas/index.js",
|
|
29
|
-
"types": "./dist/components/canvas/index.d.ts"
|
|
30
|
-
},
|
|
31
|
-
"./carousel-scroller": {
|
|
32
|
-
"import": "./dist/components/carousel-scroller/index.js",
|
|
33
|
-
"types": "./dist/components/carousel-scroller/index.d.ts"
|
|
11
|
+
"./components/*.js": {
|
|
12
|
+
"types": "./dist/components/*.d.ts",
|
|
13
|
+
"import": "./dist/components/*.js"
|
|
34
14
|
},
|
|
35
|
-
"./
|
|
36
|
-
"
|
|
37
|
-
"
|
|
15
|
+
"./decorators/*.js": {
|
|
16
|
+
"types": "./dist/decorators/*.d.ts",
|
|
17
|
+
"import": "./dist/decorators/*.js"
|
|
38
18
|
},
|
|
39
|
-
"./
|
|
40
|
-
"
|
|
41
|
-
"
|
|
19
|
+
"./utils/*.js": {
|
|
20
|
+
"types": "./dist/utils/*.d.ts",
|
|
21
|
+
"import": "./dist/utils/*.js"
|
|
42
22
|
},
|
|
43
|
-
"./
|
|
44
|
-
|
|
45
|
-
"types": "./dist/components/responsive-svg/index.d.ts"
|
|
46
|
-
},
|
|
47
|
-
"./tool-tip": {
|
|
48
|
-
"import": "./dist/components/tool-tip/index.js",
|
|
49
|
-
"types": "./dist/components/tool-tip/index.d.ts"
|
|
50
|
-
},
|
|
51
|
-
"./decorators/condCustomElement.ts": {
|
|
52
|
-
"import": "./dist/decorators/condCustomElement.ts/index.js",
|
|
53
|
-
"types": "./dist/decorators/condCustomElement.ts/index.d.ts"
|
|
54
|
-
}
|
|
23
|
+
"./package.json": "./package.json",
|
|
24
|
+
"./custom-elements.json": "./custom-elements.json"
|
|
55
25
|
},
|
|
56
26
|
"files": [
|
|
57
27
|
"dist",
|
|
58
|
-
"
|
|
28
|
+
"README.md"
|
|
59
29
|
],
|
|
60
30
|
"keywords": [
|
|
61
|
-
"web",
|
|
62
|
-
"
|
|
31
|
+
"web components",
|
|
32
|
+
"custom elements",
|
|
63
33
|
"lit"
|
|
64
34
|
],
|
|
65
|
-
"author": "ALegendsTale",
|
|
66
|
-
"license": "GPL-3.0",
|
|
67
35
|
"scripts": {
|
|
68
|
-
"
|
|
69
|
-
"build": "
|
|
70
|
-
"
|
|
71
|
-
"preview": "vite preview",
|
|
72
|
-
"storybook": "storybook dev -p 6006",
|
|
73
|
-
"build-storybook": "storybook build",
|
|
36
|
+
"prebuild": "rimraf dist",
|
|
37
|
+
"build": "vite build && npm run build:types && npm run cem",
|
|
38
|
+
"build:types": "tsc -p tsconfig.prod.json",
|
|
74
39
|
"cem": "cem analyze --litelement",
|
|
75
|
-
"
|
|
40
|
+
"storybook": "storybook dev -p 6006"
|
|
76
41
|
},
|
|
42
|
+
"sideEffects": [
|
|
43
|
+
"dist/components/**/*.js"
|
|
44
|
+
],
|
|
77
45
|
"dependencies": {
|
|
78
46
|
"colorsea": "^1.2.2",
|
|
79
47
|
"lit": "^3.3.1",
|
|
@@ -94,12 +62,13 @@
|
|
|
94
62
|
"@vitest/coverage-v8": "^4.0.15",
|
|
95
63
|
"@wc-toolkit/cem-validator": "^1.0.3",
|
|
96
64
|
"@wc-toolkit/storybook-helpers": "^10.0.0",
|
|
65
|
+
"glob": "^13.0.0",
|
|
97
66
|
"playwright": "^1.57.0",
|
|
67
|
+
"rimraf": "^6.1.2",
|
|
98
68
|
"storybook": "^10.1.6",
|
|
99
69
|
"tsx": "^4.21.0",
|
|
100
70
|
"typescript": "latest",
|
|
101
71
|
"vite": "^7.2.7",
|
|
102
72
|
"vitest": "^4.0.15"
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
type Props = {
|
|
5
|
-
open: boolean;
|
|
6
|
-
disableContextEvent: boolean;
|
|
7
|
-
};
|
|
8
|
-
type Story = StoryObj<Props>;
|
|
9
|
-
export declare const Example: Story;
|
|
10
|
-
export declare const Toggle: Story;
|
|
11
|
-
//# sourceMappingURL=absolute-container.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"absolute-container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAW/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,mBAAmB,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA0C7B,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { createRef, ref } from 'lit/directives/ref.js';
|
|
3
|
-
const argTypes = {
|
|
4
|
-
open: { control: 'boolean' },
|
|
5
|
-
disableContextEvent: { control: 'boolean' },
|
|
6
|
-
emitter: { control: false }
|
|
7
|
-
};
|
|
8
|
-
const meta = {
|
|
9
|
-
title: 'Containers/Absolute Container',
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
component: 'absolute-container',
|
|
12
|
-
argTypes
|
|
13
|
-
};
|
|
14
|
-
export default meta;
|
|
15
|
-
const template = {
|
|
16
|
-
render: ({ open, disableContextEvent }) => {
|
|
17
|
-
return html `
|
|
18
|
-
<absolute-container
|
|
19
|
-
?open=${open}
|
|
20
|
-
?disableContextEvent=${disableContextEvent}
|
|
21
|
-
>
|
|
22
|
-
Hello
|
|
23
|
-
</absolute-container>
|
|
24
|
-
`;
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
const buttonTemplate = {
|
|
28
|
-
render: ({ open, disableContextEvent }) => {
|
|
29
|
-
let absoluteRef = createRef();
|
|
30
|
-
return html `
|
|
31
|
-
<button
|
|
32
|
-
@click=${() => {
|
|
33
|
-
if (absoluteRef.value) {
|
|
34
|
-
let absolute = absoluteRef.value;
|
|
35
|
-
absolute.toggle();
|
|
36
|
-
}
|
|
37
|
-
}}
|
|
38
|
-
>
|
|
39
|
-
Open Absolute Container
|
|
40
|
-
</button>
|
|
41
|
-
<absolute-container
|
|
42
|
-
?open=${open}
|
|
43
|
-
?disableContextEvent=${disableContextEvent}
|
|
44
|
-
${ref(absoluteRef)}
|
|
45
|
-
>
|
|
46
|
-
This absolute container can be toggled with a button.
|
|
47
|
-
</absolute-container>
|
|
48
|
-
`;
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
export const Example = {
|
|
52
|
-
...template,
|
|
53
|
-
args: {
|
|
54
|
-
open: false,
|
|
55
|
-
disableContextEvent: false
|
|
56
|
-
},
|
|
57
|
-
};
|
|
58
|
-
export const Toggle = {
|
|
59
|
-
...buttonTemplate,
|
|
60
|
-
args: {
|
|
61
|
-
open: false,
|
|
62
|
-
disableContextEvent: false
|
|
63
|
-
}
|
|
64
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { AbsoluteContainer } from './absolute-container.js';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
type Props = {
|
|
5
|
-
open: boolean;
|
|
6
|
-
snapPoints: number[];
|
|
7
|
-
nonmodal: boolean;
|
|
8
|
-
dragging: boolean;
|
|
9
|
-
scrolling: boolean;
|
|
10
|
-
defaultSnap: number;
|
|
11
|
-
height: number;
|
|
12
|
-
};
|
|
13
|
-
type Story = StoryObj<Props>;
|
|
14
|
-
export declare const Modal: Story;
|
|
15
|
-
export declare const NonModal: Story;
|
|
16
|
-
export declare const Thirds: Story;
|
|
17
|
-
//# sourceMappingURL=bottom-sheet.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bottom-sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAe/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
const argTypes = {
|
|
3
|
-
open: { control: 'boolean' },
|
|
4
|
-
snapPoints: { control: 'object' },
|
|
5
|
-
nonmodal: { control: 'boolean' },
|
|
6
|
-
dragging: { control: 'boolean' },
|
|
7
|
-
scrolling: { control: 'boolean' },
|
|
8
|
-
defaultSnap: { control: 'number' },
|
|
9
|
-
height: { control: 'number' },
|
|
10
|
-
emitter: { control: false },
|
|
11
|
-
'--height': { control: false }
|
|
12
|
-
};
|
|
13
|
-
const meta = {
|
|
14
|
-
title: 'Containers/Bottom Sheet',
|
|
15
|
-
tags: ['autodocs'],
|
|
16
|
-
component: 'bottom-sheet',
|
|
17
|
-
argTypes
|
|
18
|
-
};
|
|
19
|
-
export default meta;
|
|
20
|
-
const template = {
|
|
21
|
-
render: ({ open, snapPoints, nonmodal, dragging, scrolling, defaultSnap, height }) => {
|
|
22
|
-
return html `
|
|
23
|
-
<bottom-sheet
|
|
24
|
-
?open=${open}
|
|
25
|
-
.snapPoints=${snapPoints}
|
|
26
|
-
?nonmodal=${nonmodal}
|
|
27
|
-
?dragging=${dragging}
|
|
28
|
-
?scrolling=${scrolling}
|
|
29
|
-
defaultSnap=${defaultSnap}
|
|
30
|
-
height=${height}
|
|
31
|
-
>
|
|
32
|
-
<p>
|
|
33
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dui eros. Nunc vel magna pellentesque, euismod lacus eu, euismod ligula. Nulla porttitor ultrices enim, ac fermentum ligula bibendum nec. Maecenas et volutpat nulla. Donec sit amet dapibus est, ultricies accumsan nunc. Praesent vitae nulla metus. Aenean non posuere lorem, bibendum scelerisque mauris. Praesent arcu dolor, efficitur vel malesuada nec, rhoncus eget eros. Nullam facilisis, diam eu tristique euismod, neque dolor pellentesque purus, id tristique ex quam eget lacus. Pellentesque lacinia consequat ligula. Duis egestas ornare porttitor. Morbi tempus fermentum nulla. Sed eu turpis quis nunc aliquam cursus vitae nec arcu. Nulla nec leo et tellus condimentum commodo mollis in dolor. Vivamus tortor eros, dictum in nulla ac, ultricies posuere ligula. Maecenas elit sem, efficitur et risus sed, placerat imperdiet nisl. Donec nunc ipsum, molestie et elementum a, hendrerit in diam. Vestibulum
|
|
34
|
-
ullamcorper eu dolor id maximus. Donec in nunc vel dolor vehicula mollis. Mauris elementum, massa vitae condimentum efficitur, nisi massa condimentum dolor, at ultricies nulla ante et tortor. Praesent vitae vestibulum urna. Nunc aliquam aliquam elementum. Nullam facilisis ut ligula in ultrices. Vestibulum et risus ut eros gravida malesuada varius euismod dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dui nisl, auctor quis laoreet fringilla, aliquam id risus. Pellentesque sit amet neque finibus, pharetra dolor eu, eleifend ante. Vestibulum condimentum urna urna, ut dignissim nibh posuere in. Proin nec tincidunt enim, vel vehicula nunc. In quis pellentesque urna. Curabitur egestas arcu non arcu ullamcorper, at pellentesque lacus varius. Maecenas ac molestie erat. Integer ornare dui vitae turpis porttitor, nec semper mauris ultrices. Quisque eu arcu ipsum. Morbi sed tristique urna. Pellentesque gravida, nisi elementum ultrices condimentum,
|
|
35
|
-
ipsum nisl faucibus ex, eget imperdiet dolor sem sit amet dui. Aenean dictum nibh nulla, non lacinia arcu molestie tempus. Donec a ex sodales, posuere felis eget, vestibulum odio. Sed lectus sapien, lacinia in orci eu, molestie finibus ex. Pellentesque dictum, dolor nec interdum gravida, sapien velit venenatis libero, eu finibus elit purus et ipsum. Vivamus sed eros libero. Aenean a auctor quam. Vivamus blandit enim tellus, in posuere enim fermentum varius. Donec malesuada orci ac ex dapibus, nec condimentum metus hendrerit. Nam non efficitur sem, ac ornare sapien. In varius libero et malesuada gravida. Suspendisse sollicitudin euismod ante, quis tincidunt quam rhoncus ac. Proin in pulvinar tortor. Nullam condimentum vestibulum dignissim. In hac habitasse platea dictumst. Etiam laoreet volutpat urna, et euismod urna aliquet egestas. Nulla odio tellus, vestibulum sit amet auctor vitae, tristique ut turpis. Cras sed tellus accumsan, pellentesque urna eget,
|
|
36
|
-
sollicitudin felis. In euismod ac arcu vitae suscipit. Curabitur non consequat nibh. In purus nulla, egestas in commodo in, fermentum sit amet massa. Nullam luctus velit vel arcu dictum, vel fermentum dolor convallis. Nulla interdum quam nibh, in egestas turpis vestibulum vel. Nulla placerat sapien sit amet pharetra porttitor.
|
|
37
|
-
</p>
|
|
38
|
-
</bottom-sheet>
|
|
39
|
-
`;
|
|
40
|
-
},
|
|
41
|
-
};
|
|
42
|
-
export const Modal = {
|
|
43
|
-
...template,
|
|
44
|
-
args: {
|
|
45
|
-
open: false,
|
|
46
|
-
snapPoints: [0, 50, 100],
|
|
47
|
-
nonmodal: false,
|
|
48
|
-
dragging: true,
|
|
49
|
-
scrolling: false,
|
|
50
|
-
defaultSnap: 50,
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
export const NonModal = {
|
|
54
|
-
...template,
|
|
55
|
-
args: {
|
|
56
|
-
open: false,
|
|
57
|
-
nonmodal: true,
|
|
58
|
-
snapPoints: [0, 50, 100],
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
export const Thirds = {
|
|
62
|
-
...template,
|
|
63
|
-
args: {
|
|
64
|
-
open: false,
|
|
65
|
-
snapPoints: [0, 33, 66],
|
|
66
|
-
},
|
|
67
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { BottomSheet } from './bottom-sheet.js';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
export type Props = {};
|
|
5
|
-
type Story = StoryObj<Props>;
|
|
6
|
-
export declare const Example: Story;
|
|
7
|
-
//# sourceMappingURL=canvas-base.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"canvas-base.stories.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAS/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG,EAAE,CAAC;AAEvB,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAU7B,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC"}
|