wj-elements 0.0.27 → 0.0.29
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/wj-element.js +13 -5
- package/dist/wj-menu-item.js +59 -28
- package/dist/wj-menu.js +9 -1
- package/dist/wj-popup.js +1 -1
- package/dist/wj-split-view.js +2 -2
- package/package.json +1 -1
package/dist/wj-element.js
CHANGED
|
@@ -392,11 +392,11 @@ class WJElement extends HTMLElement {
|
|
|
392
392
|
get store() {
|
|
393
393
|
return store;
|
|
394
394
|
}
|
|
395
|
-
//
|
|
396
|
-
//
|
|
397
|
-
//
|
|
398
|
-
//
|
|
399
|
-
//
|
|
395
|
+
// addAction,
|
|
396
|
+
// deleteAction,
|
|
397
|
+
// loadAction,
|
|
398
|
+
// updateAction,
|
|
399
|
+
// addManyAction
|
|
400
400
|
/**
|
|
401
401
|
* @typedef {Object} ArrayActions
|
|
402
402
|
* @property {function} addAction - Indicates whether the Courage component is present.
|
|
@@ -460,6 +460,7 @@ class WJElement extends HTMLElement {
|
|
|
460
460
|
disconnectedCallback() {
|
|
461
461
|
var _a, _b;
|
|
462
462
|
(_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
|
|
463
|
+
console.log(this.isAttached);
|
|
463
464
|
if (this.isAttached)
|
|
464
465
|
this.context.innerHTML = "";
|
|
465
466
|
this.isAttached = false;
|
|
@@ -585,6 +586,13 @@ class WJElement extends HTMLElement {
|
|
|
585
586
|
);
|
|
586
587
|
});
|
|
587
588
|
}
|
|
589
|
+
static define(name, elementConstructor = this, options = {}) {
|
|
590
|
+
const definedElement = customElements.get(name);
|
|
591
|
+
if (!definedElement) {
|
|
592
|
+
customElements.define(name, elementConstructor, options);
|
|
593
|
+
return;
|
|
594
|
+
}
|
|
595
|
+
}
|
|
588
596
|
}
|
|
589
597
|
__publicField(WJElement, "processTemplates", (pTemplate, template2) => {
|
|
590
598
|
const newTemplate = document.createElement("template");
|
package/dist/wj-menu-item.js
CHANGED
|
@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
|
|
|
6
6
|
};
|
|
7
7
|
import WJElement, { WjElementUtils, event } from "./wj-element.js";
|
|
8
8
|
import { b as bindRouterLinks } from "./router-links-F7MJWhZi.js";
|
|
9
|
-
const styles = '/*\n[ WJ Menu Item ]\n*/\n:host {\n --wj-menu-item-color: var(--wj-color);\n --wj-menu-item-background: transparent;\n --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n --wj-menu-item-background-hover: var(--wj-border-color);\n --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n --wj-menu-item-background-focus: var(--wj-border-color);\n --wj-menu-item-color-active: var(--wj-color-contrast-8);\n --wj-menu-item-background-active: var(--wj-border-color);\n --wj-menu-item-padding-top: .5rem;\n --wj-menu-item-padding-bottom: .5rem;\n --wj-menu-item-line-height: 1.8rem;\n --wj-menu-item-safe-triangle-cursor-x: 0;\n --wj-menu-item-safe-triangle-cursor-y: 0;\n --wj-menu-item-safe-triangle-submenu-start-x: 0;\n --wj-menu-item-safe-triangle-submenu-start-y: 0;\n --wj-menu-item-safe-triangle-submenu-end-x: 0;\n --wj-menu-item-safe-triangle-submenu-end-y: 0;\n --wj-menu-submenu-offset: 0;\n --wj-menu-item-icon-visibility: hidden;\n display: block;\n}\n:host .native-menu-item {\n background: var(--wj-menu-item-background);\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n color: var(--wj-menu-item-color);\n padding-top: var(--wj-menu-item-padding-top);\n padding-bottom: var(--wj-menu-item-padding-bottom);\n transition: var(--wj-transition-fast) fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n width: 100%;\n
|
|
9
|
+
const styles = '/*\n[ WJ Menu Item ]\n*/\n:host {\n --wj-menu-item-color: var(--wj-color);\n --wj-menu-item-background: transparent;\n --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n --wj-menu-item-background-hover: var(--wj-border-color);\n --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n --wj-menu-item-background-focus: var(--wj-border-color);\n --wj-menu-item-color-active: var(--wj-color-contrast-8);\n --wj-menu-item-background-active: var(--wj-border-color);\n --wj-menu-item-padding-top: .5rem;\n --wj-menu-item-padding-bottom: .5rem;\n --wj-menu-item-line-height: 1.8rem;\n --wj-menu-item-safe-triangle-cursor-x: 0;\n --wj-menu-item-safe-triangle-cursor-y: 0;\n --wj-menu-item-safe-triangle-submenu-start-x: 0;\n --wj-menu-item-safe-triangle-submenu-start-y: 0;\n --wj-menu-item-safe-triangle-submenu-end-x: 0;\n --wj-menu-item-safe-triangle-submenu-end-y: 0;\n --wj-menu-submenu-offset: 0;\n --wj-menu-item-icon-visibility: hidden;\n display: block;\n}\n:host .native-menu-item {\n background: var(--wj-menu-item-background);\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n color: var(--wj-menu-item-color);\n padding-top: var(--wj-menu-item-padding-top);\n padding-bottom: var(--wj-menu-item-padding-bottom);\n transition: var(--wj-transition-fast) fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n width: 100%;\n}\n:host .native-menu-item:hover {\n color: var(--wj-menu-item-color-hover);\n background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:focus {\n color: var(--wj-menu-item-color-focus);\n background: var(--wj-menu-item-background-focus);\n}\n:host .native-menu-item:active {\n color: var(--wj-menu-item-color-active);\n background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n flex: 1 1 auto;\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n line-height: normal;\n}\n:host .native-menu-item .check-icon {\n flex: 0 0 auto;\n display: var(--wj-menu-item-check-icon-display, flex);\n align-items: center;\n justify-content: center;\n width: var(--wj-menu-check-icon-width, 1.5rem);\n visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n color: var(--wj-menu-item-color-active);\n background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n color: var(--wj-menu-item-color-hover);\n background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n content: "";\n position: fixed;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n clip-path: polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y), var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y), var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y));\n}\n\n:host(.collapse) ::slotted([slot=start]) {\n margin: 0;\n width: auto;\n display: contents;\n}\n:host(.collapse) ::slotted([slot=end]) {\n display: none;\n}\n:host(.collapse) .label,\n:host(.collapse) .check-icon,\n:host(.collapse) .submenu-icon {\n display: none;\n}\n\n.submenu-icon {\n --wj-icon-size: 14px !important;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n visibility: var(--wj-menu-item-icon-visibility);\n}\n\n.has-submenu .submenu-icon {\n --wj-menu-item-icon-visibility: visible;\n}\n\n.submenu-icon.collapse {\n flex: none;\n right: 10px;\n position: relative;\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n\n::slotted([slot=start]) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n margin-inline-end: 0.5rem;\n}\n\n::slotted([slot=end]) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n margin-inline-start: 0.5rem;\n}\n\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n --wj-menu-border-width: 0 !important;\n --wj-menu-margin-inline: 2rem 0 !important;\n}\n\n:host ::slotted([slot=start]) {\n width: 1.5rem;\n}\n\n:host(.wj-menu-variant-context) {\n display: block;\n}\n\n:host(.active) {\n color: var(--wj-menu-item-color-active);\n background: var(--wj-menu-item-background-active);\n}\n\n:host(.open) {\n color: var(--wj-menu-item-color-active);\n background: var(--wj-menu-item-background-active);\n}';
|
|
10
10
|
class MenuItem extends WJElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super();
|
|
@@ -51,8 +51,9 @@ class MenuItem extends WJElement {
|
|
|
51
51
|
return "CONTEXT";
|
|
52
52
|
}
|
|
53
53
|
get collapse() {
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
if (this.closest("[collapse]"))
|
|
55
|
+
return true;
|
|
56
|
+
return false;
|
|
56
57
|
}
|
|
57
58
|
static get cssStyleSheet() {
|
|
58
59
|
return styles;
|
|
@@ -65,12 +66,27 @@ class MenuItem extends WJElement {
|
|
|
65
66
|
this.isShadowRoot = "open";
|
|
66
67
|
this.setAttribute("active-class", "open");
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
+
beforeDraw(context, store, params) {
|
|
69
70
|
var _a;
|
|
71
|
+
(_a = this.querySelector("wj-menu")) == null ? void 0 : _a.removeAttribute("active");
|
|
72
|
+
}
|
|
73
|
+
draw(context, store, params) {
|
|
74
|
+
var _a, _b, _c;
|
|
70
75
|
let fragment = document.createDocumentFragment();
|
|
71
76
|
this.setAttribute("tabindex", "0");
|
|
77
|
+
console.log("DRAW", this.variant, this.collapse);
|
|
78
|
+
this.classList.forEach((className) => {
|
|
79
|
+
if (className.startsWith("wj-menu-variant-")) {
|
|
80
|
+
this.classList.remove(className);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
this.classList.remove("collapse");
|
|
72
84
|
this.classList.add("wj-menu-variant-" + this.variant.toLowerCase());
|
|
73
|
-
(
|
|
85
|
+
if (!this.collapse) {
|
|
86
|
+
(_a = this.querySelector("wj-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
|
|
87
|
+
} else if ((_b = this.parentElement) == null ? void 0 : _b.hasAttribute("collapse")) {
|
|
88
|
+
this.classList.add("collapse");
|
|
89
|
+
}
|
|
74
90
|
let native = document.createElement("div");
|
|
75
91
|
native.setAttribute("part", "native");
|
|
76
92
|
native.setAttribute("id", "anchor");
|
|
@@ -114,7 +130,7 @@ class MenuItem extends WJElement {
|
|
|
114
130
|
fragment.appendChild(popup);
|
|
115
131
|
isAppend = true;
|
|
116
132
|
}
|
|
117
|
-
if (this.collapse && !this.hasSubmenu) {
|
|
133
|
+
if (((_c = this.parentElement) == null ? void 0 : _c.hasAttribute("collapse")) && !this.hasSubmenu) {
|
|
118
134
|
fragment.appendChild(this.collapseItem(native));
|
|
119
135
|
} else if (!isAppend) {
|
|
120
136
|
fragment.appendChild(native);
|
|
@@ -130,33 +146,32 @@ class MenuItem extends WJElement {
|
|
|
130
146
|
this.addEventListener("mousemove", this.dispatchMove);
|
|
131
147
|
this.addEventListener("wj-popup:reposition", this.dispatchReposition);
|
|
132
148
|
event.addListener(this, "mouseover", null, (e) => {
|
|
133
|
-
if (this.
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
149
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
150
|
+
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
151
|
+
return;
|
|
152
|
+
this.submenuActivated(e);
|
|
153
|
+
e.stopPropagation();
|
|
154
|
+
this.showSubmenu();
|
|
155
|
+
this.focus();
|
|
156
|
+
}
|
|
138
157
|
});
|
|
139
158
|
event.addListener(this, "focusout", null, (e) => {
|
|
140
|
-
if (
|
|
141
|
-
|
|
159
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
160
|
+
console.log("SOM TU:");
|
|
161
|
+
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
this.submenuActivated(e);
|
|
165
|
+
this.hideSubmenu();
|
|
142
166
|
}
|
|
143
|
-
this.hideSubmenu();
|
|
144
167
|
});
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
submenuElements.setAttribute("active", "");
|
|
150
|
-
} else {
|
|
151
|
-
if (this === e.target)
|
|
152
|
-
submenuElements.removeAttribute("active");
|
|
153
|
-
}
|
|
168
|
+
event.addListener(this, "click", null, (e) => {
|
|
169
|
+
if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
|
|
170
|
+
this.submenuActivated(e);
|
|
171
|
+
this.hideSubmenu();
|
|
154
172
|
e.stopPropagation();
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
event.addListener(this, "click", null, (e) => {
|
|
158
|
-
});
|
|
159
|
-
}
|
|
173
|
+
}
|
|
174
|
+
});
|
|
160
175
|
}
|
|
161
176
|
collapseItem(native) {
|
|
162
177
|
let tooltip = document.createElement("wj-tooltip");
|
|
@@ -167,6 +182,7 @@ class MenuItem extends WJElement {
|
|
|
167
182
|
return tooltip;
|
|
168
183
|
}
|
|
169
184
|
showSubmenu() {
|
|
185
|
+
console.log("SHOW SUBMENU", this.hasSubmenu);
|
|
170
186
|
this.tabIndex = -1;
|
|
171
187
|
if (this.hasSubmenu) {
|
|
172
188
|
this.popup.setAttribute("active", "");
|
|
@@ -175,6 +191,7 @@ class MenuItem extends WJElement {
|
|
|
175
191
|
}
|
|
176
192
|
}
|
|
177
193
|
hideSubmenu() {
|
|
194
|
+
console.log("HIDE SUBMENU", this);
|
|
178
195
|
this.tabIndex = 0;
|
|
179
196
|
if (this.hasSubmenu) {
|
|
180
197
|
this.popup.removeAttribute("active");
|
|
@@ -182,6 +199,20 @@ class MenuItem extends WJElement {
|
|
|
182
199
|
this.native.classList.remove("expanded-submenu");
|
|
183
200
|
}
|
|
184
201
|
}
|
|
202
|
+
submenuActivated(e) {
|
|
203
|
+
if (this.hasSubmenu) {
|
|
204
|
+
let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
|
|
205
|
+
if (!submenuElements.hasAttribute("active")) {
|
|
206
|
+
submenuElements.setAttribute("active", "");
|
|
207
|
+
} else {
|
|
208
|
+
if (this === e.target)
|
|
209
|
+
submenuElements.removeAttribute("active");
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
beforeDisconnect() {
|
|
214
|
+
this.context.innerHTML = "";
|
|
215
|
+
}
|
|
185
216
|
}
|
|
186
217
|
customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", MenuItem);
|
|
187
218
|
export {
|
package/dist/wj-menu.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import WJElement from "./wj-element.js";
|
|
8
|
-
const styles = "/*\n[ Wj Menu ]\n*/\n:host {\n --wj-menu-background: var(--wj-background);\n --wj-menu-border-width: 1px;\n --wj-menu-border-style: solid;\n --wj-menu-border-color: var(--wj-border-color);\n --wj-menu-border-radius:
|
|
8
|
+
const styles = "/*\n[ Wj Menu ]\n*/\n:host {\n --wj-menu-background: var(--wj-background);\n --wj-menu-border-width: 1px;\n --wj-menu-border-style: solid;\n --wj-menu-border-color: var(--wj-border-color);\n --wj-menu-border-radius: var(--wj-border-radius-small);\n --wj-menu-padding-top: .5rem;\n --wj-menu-padding-bottom: .5rem;\n --wj-menu-padding-inline: 0;\n --wj-menu-margin-top: ;\n --wj-menu-margin-bottom: 0;\n --wj-menu-margin-inline: 0;\n --wj-menu-collapse-width: 65px;\n display: none;\n background: var(--wj-menu-background);\n position: relative;\n border-width: var(--wj-menu-border-width);\n border-style: var(--wj-menu-border-style);\n border-color: var(--wj-menu-border-color);\n z-index: var(--wj-menu-z-index, 8);\n border-radius: var(--wj-menu-border-radius);\n padding-top: var(--wj-menu-padding-top);\n padding-bottom: var(--wj-menu-padding-bottom);\n padding-inline: var(--wj-menu-padding-inline);\n margin-top: var(--wj-menu-margin-top);\n margin-bottom: var(--wj-menu-margin-bottom);\n margin-inline: var(--wj-menu-margin-inline);\n overflow: auto;\n overscroll-behavior: none;\n}\n:host .native-menu {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n margin: 0;\n}\n\n:host(.wj-menu-collapse) {\n width: var(--wj-menu-collapse-width);\n}\n\n:host([variant=context]) {\n display: block !important;\n margin-left: var(--wj-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n flex-direction: row;\n align-items: end;\n flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n display: none;\n}\n\n:host([active]) {\n display: flex !important;\n}";
|
|
9
9
|
class Menu extends WJElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
@@ -32,6 +32,14 @@ class Menu extends WJElement {
|
|
|
32
32
|
fragment.appendChild(native);
|
|
33
33
|
return fragment;
|
|
34
34
|
}
|
|
35
|
+
afterDraw() {
|
|
36
|
+
Array.from(this.children).forEach((child) => {
|
|
37
|
+
child.refresh();
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
beforeDisconnect() {
|
|
41
|
+
this.context.innerHTML = "";
|
|
42
|
+
}
|
|
35
43
|
}
|
|
36
44
|
customElements.get("wj-menu") || window.customElements.define("wj-menu", Menu);
|
|
37
45
|
export {
|
package/dist/wj-popup.js
CHANGED
package/dist/wj-split-view.js
CHANGED
|
@@ -40,7 +40,7 @@ class SplitView extends WJElement {
|
|
|
40
40
|
return false;
|
|
41
41
|
drag(this, {
|
|
42
42
|
onMove: (x, y) => {
|
|
43
|
-
let newPositionInPixels = this.hasAttribute("
|
|
43
|
+
let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
|
|
44
44
|
let sizeA = this.pixelsToPercentage(newPositionInPixels);
|
|
45
45
|
let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
|
|
46
46
|
this.style.setProperty("--wj-split-view-calc-a", sizeA + "%");
|
|
@@ -94,7 +94,7 @@ class SplitView extends WJElement {
|
|
|
94
94
|
}
|
|
95
95
|
detectSize() {
|
|
96
96
|
const { width, height } = this.getBoundingClientRect();
|
|
97
|
-
this.size = this.hasAttribute("
|
|
97
|
+
this.size = this.hasAttribute("vertical") ? height : width;
|
|
98
98
|
}
|
|
99
99
|
percentageToPixels(value) {
|
|
100
100
|
return this.size * (value / 100);
|