wj-elements 0.1.42 → 0.1.44
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/dark.css +1 -1
- package/dist/light.css +1 -1
- package/dist/wje-avatar.js +1 -1
- package/dist/wje-badge.js +8 -8
- package/dist/wje-button.js +9 -9
- package/dist/wje-chip.js +15 -15
- package/dist/wje-dialog.js +20 -20
- package/dist/wje-infinite-scroll.js +63 -55
- package/dist/wje-inline-edit.js +57 -32
- package/dist/wje-input.js +5 -5
- package/dist/wje-item.js +1 -1
- package/dist/wje-master.js +300 -253
- package/dist/wje-menu-item.js +52 -36
- package/package.json +1 -1
package/dist/wje-menu-item.js
CHANGED
|
@@ -1,34 +1,41 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
import { b as
|
|
6
|
-
const
|
|
7
|
-
class j extends
|
|
1
|
+
var y = Object.defineProperty;
|
|
2
|
+
var A = (o, r, e) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e;
|
|
3
|
+
var c = (o, r, e) => (A(o, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
|
+
import E, { WjElementUtils as k, event as l } from "./wje-element.js";
|
|
5
|
+
import { b as S } from "./router-links-FtZbFUto.js";
|
|
6
|
+
const L = ':host{--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-item-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
|
|
7
|
+
class j extends E {
|
|
8
8
|
/**
|
|
9
9
|
* Constructor for MenuItem class.
|
|
10
10
|
* @constructor
|
|
11
11
|
*/
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
|
-
|
|
14
|
+
c(this, "className", "MenuItem");
|
|
15
|
+
c(this, "shouldHideSubmenu", (e) => {
|
|
16
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
17
|
+
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
18
|
+
return;
|
|
19
|
+
this.deactivateSubmenu(), this.hideSubmenu();
|
|
20
|
+
}
|
|
21
|
+
});
|
|
15
22
|
/**
|
|
16
23
|
* Dispatches a mousemove event.
|
|
17
24
|
*/
|
|
18
|
-
|
|
25
|
+
c(this, "dispatchMove", (e) => {
|
|
19
26
|
this.style.setProperty("--wje-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wje-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
|
|
20
27
|
});
|
|
21
28
|
/**
|
|
22
29
|
* Dispatches a reposition event.
|
|
23
30
|
*/
|
|
24
|
-
|
|
31
|
+
c(this, "dispatchReposition", (e) => {
|
|
25
32
|
if (this.submenu.assignedNodes().length === 0)
|
|
26
33
|
return;
|
|
27
34
|
let s = this.submenu.assignedNodes()[0];
|
|
28
|
-
const { left: n, top: t, width: i, height:
|
|
29
|
-
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t +
|
|
35
|
+
const { left: n, top: t, width: i, height: u } = s.getBoundingClientRect();
|
|
36
|
+
this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t + u}px`);
|
|
30
37
|
});
|
|
31
|
-
|
|
38
|
+
S(this, { selector: !1 }), this._collapsible = !1;
|
|
32
39
|
}
|
|
33
40
|
/**
|
|
34
41
|
* Getter for placement attribute.
|
|
@@ -66,7 +73,7 @@ class j extends k {
|
|
|
66
73
|
* @returns {string} The styles imported from styles.css.
|
|
67
74
|
*/
|
|
68
75
|
static get cssStyleSheet() {
|
|
69
|
-
return
|
|
76
|
+
return L;
|
|
70
77
|
}
|
|
71
78
|
/**
|
|
72
79
|
* Getter for observedAttributes.
|
|
@@ -98,15 +105,15 @@ class j extends k {
|
|
|
98
105
|
*/
|
|
99
106
|
draw(e, s, n) {
|
|
100
107
|
var f, w, g;
|
|
101
|
-
this.hasSubmenu =
|
|
108
|
+
this.hasSubmenu = k.hasSlot(this, "submenu");
|
|
102
109
|
let t = document.createDocumentFragment();
|
|
103
110
|
this.setAttribute("tabindex", "0"), this.classList.forEach((a) => {
|
|
104
111
|
a.startsWith("wje-menu-variant-") && this.classList.remove(a);
|
|
105
112
|
}), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (w = this.parentElement) != null && w.hasAttribute("collapse") && this.classList.add("collapse") : (f = this.querySelector("wje-menu")) == null || f.setAttribute("variant", this.variant.toLowerCase());
|
|
106
113
|
let i = document.createElement("div");
|
|
107
114
|
i.setAttribute("part", "native"), i.setAttribute("id", "anchor"), i.classList.add("native-menu-item");
|
|
108
|
-
let
|
|
109
|
-
|
|
115
|
+
let u = document.createElement("span");
|
|
116
|
+
u.setAttribute("part", "check"), u.classList.add("check-icon"), u.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? u.classList.add("checked") : u.classList.remove("checked");
|
|
110
117
|
let p = document.createElement("slot");
|
|
111
118
|
p.name = "start";
|
|
112
119
|
let b = document.createElement("slot");
|
|
@@ -115,8 +122,8 @@ class j extends k {
|
|
|
115
122
|
d.setAttribute("part", "end"), d.name = "end";
|
|
116
123
|
let m = document.createElement("slot");
|
|
117
124
|
m.setAttribute("part", "submenu"), m.name = "submenu";
|
|
118
|
-
let x = this.collapse ? "collapse" : "expand",
|
|
119
|
-
|
|
125
|
+
let x = this.collapse ? "collapse" : "expand", h = document.createElement("span");
|
|
126
|
+
h.setAttribute("part", "submenu-icon"), h.classList.add("submenu-icon", x), h.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? i.classList.add("has-submenu") : i.classList.remove("has-submenu"), i.appendChild(u), i.appendChild(p), i.appendChild(b), i.appendChild(d), i.appendChild(h);
|
|
120
127
|
let v = !1;
|
|
121
128
|
if (
|
|
122
129
|
/*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
|
|
@@ -136,22 +143,10 @@ class j extends k {
|
|
|
136
143
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
137
144
|
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
138
145
|
return;
|
|
139
|
-
this.
|
|
140
|
-
}
|
|
141
|
-
}), l.addListener(this, "mouseleave", null, (e) => {
|
|
142
|
-
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
143
|
-
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
144
|
-
return;
|
|
145
|
-
this.submenuActivated(e), this.hideSubmenu();
|
|
146
|
+
this.activateSubmenu(e), e.stopPropagation(), this.showSubmenu();
|
|
146
147
|
}
|
|
147
|
-
}), l.addListener(this, "focusout", null, (e) => {
|
|
148
|
-
|
|
149
|
-
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
150
|
-
return;
|
|
151
|
-
this.submenuActivated(e), this.hideSubmenu();
|
|
152
|
-
}
|
|
153
|
-
}), l.addListener(this, "click", null, (e) => {
|
|
154
|
-
!this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
|
|
148
|
+
}), l.addListener(this, "mouseleave", null, this.shouldHideSubmenu), l.addListener(this, "focusout", null, this.shouldHideSubmenu), l.addListener(this, "click", null, (e) => {
|
|
149
|
+
!this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuToggle(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
|
|
155
150
|
bubbles: !0
|
|
156
151
|
}));
|
|
157
152
|
});
|
|
@@ -182,14 +177,35 @@ class j extends k {
|
|
|
182
177
|
this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
|
|
183
178
|
}
|
|
184
179
|
/**
|
|
185
|
-
*
|
|
180
|
+
* Toggles the active state of the submenu element.
|
|
181
|
+
* If the submenu is not active, it sets the "active" attribute.
|
|
182
|
+
* If the submenu is already active, it removes the "active" attribute.
|
|
183
|
+
* @param {Event} e - The event object.
|
|
186
184
|
*/
|
|
187
|
-
|
|
185
|
+
submenuToggle(e) {
|
|
188
186
|
if (this.hasSubmenu) {
|
|
189
187
|
let s = this.submenu.assignedElements({ flatten: !0 })[0];
|
|
190
188
|
s.hasAttribute("active") ? this === e.target && s.removeAttribute("active") : s.setAttribute("active", "");
|
|
191
189
|
}
|
|
192
190
|
}
|
|
191
|
+
/**
|
|
192
|
+
* Deactivates the submenu by removing the "active" attribute.
|
|
193
|
+
*/
|
|
194
|
+
deactivateSubmenu() {
|
|
195
|
+
if (this.hasSubmenu) {
|
|
196
|
+
let e = this.submenu.assignedElements({ flatten: !0 })[0];
|
|
197
|
+
e.hasAttribute("active") && e.removeAttribute("active");
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Activates the submenu of the menu item.
|
|
202
|
+
*/
|
|
203
|
+
activateSubmenu() {
|
|
204
|
+
if (this.hasSubmenu) {
|
|
205
|
+
let e = this.submenu.assignedElements({ flatten: !0 })[0];
|
|
206
|
+
e.hasAttribute("active") || e.setAttribute("active", "");
|
|
207
|
+
}
|
|
208
|
+
}
|
|
193
209
|
/**
|
|
194
210
|
* Clears the innerHTML of the context before disconnecting the MenuItem.
|
|
195
211
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.44",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|