wj-elements 0.1.34 → 0.1.36
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/wje-menu-item.js +20 -14
- package/dist/wje-reorder-handle.js +49 -38
- package/package.json +1 -1
package/dist/wje-menu-item.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var h = (u, r, e) => (
|
|
4
|
-
import k, { WjElementUtils as E, event as
|
|
1
|
+
var A = Object.defineProperty;
|
|
2
|
+
var y = (u, r, e) => r in u ? A(u, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[r] = e;
|
|
3
|
+
var h = (u, r, e) => (y(u, typeof r != "symbol" ? r + "" : r, e), e);
|
|
4
|
+
import k, { WjElementUtils as E, event as l } from "./wje-element.js";
|
|
5
5
|
import { b as L } from "./router-links-FtZbFUto.js";
|
|
6
|
-
const
|
|
6
|
+
const S = ':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
7
|
class j extends k {
|
|
8
8
|
/**
|
|
9
9
|
* Constructor for MenuItem class.
|
|
@@ -66,7 +66,7 @@ class j extends k {
|
|
|
66
66
|
* @returns {string} The styles imported from styles.css.
|
|
67
67
|
*/
|
|
68
68
|
static get cssStyleSheet() {
|
|
69
|
-
return
|
|
69
|
+
return S;
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
72
|
* Getter for observedAttributes.
|
|
@@ -113,8 +113,8 @@ class j extends k {
|
|
|
113
113
|
b.classList.add("label");
|
|
114
114
|
let d = document.createElement("slot");
|
|
115
115
|
d.setAttribute("part", "end"), d.name = "end";
|
|
116
|
-
let
|
|
117
|
-
|
|
116
|
+
let m = document.createElement("slot");
|
|
117
|
+
m.setAttribute("part", "submenu"), m.name = "submenu";
|
|
118
118
|
let x = this.collapse ? "collapse" : "expand", c = document.createElement("span");
|
|
119
119
|
c.setAttribute("part", "submenu-icon"), c.classList.add("submenu-icon", x), c.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(o), i.appendChild(p), i.appendChild(b), i.appendChild(d), i.appendChild(c);
|
|
120
120
|
let v = !1;
|
|
@@ -124,28 +124,34 @@ class j extends k {
|
|
|
124
124
|
) {
|
|
125
125
|
i.setAttribute("slot", "anchor");
|
|
126
126
|
let a = document.createElement("wje-popup");
|
|
127
|
-
a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(
|
|
127
|
+
a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(m), this.popup = a, t.appendChild(a), v = !0;
|
|
128
128
|
}
|
|
129
|
-
return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ? t.appendChild(this.collapseItem(i)) : v || t.appendChild(i), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && t.appendChild(
|
|
129
|
+
return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ? t.appendChild(this.collapseItem(i)) : v || t.appendChild(i), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && t.appendChild(m), this.native = i, this.submenu = m, t;
|
|
130
130
|
}
|
|
131
131
|
/**
|
|
132
132
|
* Adds event listeners after drawing the MenuItem.
|
|
133
133
|
*/
|
|
134
134
|
afterDraw() {
|
|
135
|
-
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition),
|
|
135
|
+
this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseenter", null, (e) => {
|
|
136
136
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
137
137
|
if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
|
|
138
138
|
return;
|
|
139
139
|
this.submenuActivated(e), e.stopPropagation(), this.showSubmenu(), this.focus();
|
|
140
140
|
}
|
|
141
|
-
}),
|
|
141
|
+
}), l.addListener(this, "mouseleave", null, (e) => {
|
|
142
142
|
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
143
143
|
if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
|
|
144
144
|
return;
|
|
145
145
|
this.submenuActivated(e), this.hideSubmenu();
|
|
146
146
|
}
|
|
147
|
-
}),
|
|
148
|
-
|
|
147
|
+
}), l.addListener(this, "focusout", null, (e) => {
|
|
148
|
+
if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
|
|
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, {
|
|
149
155
|
bubbles: !0
|
|
150
156
|
}));
|
|
151
157
|
});
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
var x = Object.defineProperty;
|
|
2
|
-
var z = (
|
|
3
|
-
var
|
|
2
|
+
var z = (c, l, e) => l in c ? x(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e;
|
|
3
|
+
var A = (c, l, e) => (z(c, typeof l != "symbol" ? l + "" : l, e), e);
|
|
4
4
|
import D from "./wje-element.js";
|
|
5
|
-
const
|
|
6
|
-
class
|
|
5
|
+
const w = ".disabled{opacity:.3}";
|
|
6
|
+
class E extends D {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
|
-
|
|
9
|
+
A(this, "className", "ReorderHandle");
|
|
10
10
|
this.addEventListener("mousedown", this.startDrag.bind(this)), this.addEventListener("touchstart", this.startTouchDrag.bind(this));
|
|
11
11
|
}
|
|
12
12
|
static get cssStyleSheet() {
|
|
13
|
-
return
|
|
13
|
+
return w;
|
|
14
14
|
}
|
|
15
15
|
static get observedAttributes() {
|
|
16
16
|
return ["dropzone", "parent"];
|
|
@@ -43,35 +43,35 @@ class b extends D {
|
|
|
43
43
|
t = this.closest(n);
|
|
44
44
|
} else
|
|
45
45
|
t = this.parentElement;
|
|
46
|
-
const
|
|
47
|
-
this.getAttribute("dropzone") || this.setAttribute("dropzone",
|
|
48
|
-
const
|
|
49
|
-
let
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
t.style.left = `${n -
|
|
46
|
+
const o = this.getDropzone(t);
|
|
47
|
+
this.getAttribute("dropzone") || this.setAttribute("dropzone", o.localName);
|
|
48
|
+
const r = t.getBoundingClientRect(), h = e - r.left, u = s - r.top;
|
|
49
|
+
let i = document.createElement("div");
|
|
50
|
+
i.classList.add("sortable-item"), i.style.visibility = "hidden", i.style.height = `${r.height}px`, t.classList.add("dragging"), t.style.position = "fixed", t.style.zIndex = "1000", t.style.width = `${r.width}px`;
|
|
51
|
+
const p = (n, d) => {
|
|
52
|
+
t.style.left = `${n - h - document.documentElement.scrollLeft}px`, t.style.top = `${d - u - document.documentElement.scrollTop}px`;
|
|
53
53
|
};
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
const
|
|
59
|
-
if (!
|
|
54
|
+
p(e, s);
|
|
55
|
+
const f = (n) => {
|
|
56
|
+
var b;
|
|
57
|
+
p(n.pageX, n.pageY);
|
|
58
|
+
const d = this.getClosestDropzone(n.clientX, n.clientY);
|
|
59
|
+
if (!d)
|
|
60
60
|
return;
|
|
61
|
-
const
|
|
62
|
-
for (const
|
|
63
|
-
const
|
|
64
|
-
if (!((
|
|
65
|
-
n.clientY <
|
|
61
|
+
const y = Array.from(d.children).filter((a) => a !== t && a !== i);
|
|
62
|
+
for (const a of y) {
|
|
63
|
+
const m = a.getBoundingClientRect();
|
|
64
|
+
if (!((b = a.children[0]) != null && b.hasAttribute("locked")) && n.clientY > m.top && n.clientY < m.bottom) {
|
|
65
|
+
n.clientY < m.top + m.height / 2 ? d.insertBefore(i, a) : d.insertBefore(i, a.nextSibling);
|
|
66
66
|
break;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
},
|
|
70
|
-
document.removeEventListener("mousemove",
|
|
71
|
-
const n =
|
|
72
|
-
n.insertBefore(t,
|
|
69
|
+
}, g = () => {
|
|
70
|
+
document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", g), t.classList.remove("dragging"), t.style.position = "", t.style.zIndex = "", t.style.left = "", t.style.top = "", t.style.width = "";
|
|
71
|
+
const n = i.parentElement;
|
|
72
|
+
n.insertBefore(t, i), n.removeChild(i), this.reIndexItems(n);
|
|
73
73
|
};
|
|
74
|
-
document.addEventListener("mousemove",
|
|
74
|
+
document.addEventListener("mousemove", f), document.addEventListener("mouseup", g), o.insertBefore(i, t);
|
|
75
75
|
}
|
|
76
76
|
getDropzone(e) {
|
|
77
77
|
const s = this.getAttribute("dropzone");
|
|
@@ -83,22 +83,33 @@ class b extends D {
|
|
|
83
83
|
return e.parentElement;
|
|
84
84
|
}
|
|
85
85
|
getClosestDropzone(e, s) {
|
|
86
|
-
const t =
|
|
87
|
-
for (const
|
|
88
|
-
if (
|
|
89
|
-
return
|
|
86
|
+
const t = this.getElementsFromPointAll(e, s);
|
|
87
|
+
for (const o of t)
|
|
88
|
+
if (o.matches(this.getAttribute("dropzone")))
|
|
89
|
+
return o;
|
|
90
90
|
return null;
|
|
91
91
|
}
|
|
92
|
+
// Rekurzívne prechádza všetky shadow roots bez opakovania elementov
|
|
93
|
+
getElementsFromPointAll(e, s, t = document, o = /* @__PURE__ */ new Set()) {
|
|
94
|
+
if (o.has(t))
|
|
95
|
+
return [];
|
|
96
|
+
o.add(t);
|
|
97
|
+
const r = t.elementsFromPoint(e, s);
|
|
98
|
+
let h = [...r];
|
|
99
|
+
for (const u of r)
|
|
100
|
+
u.shadowRoot && !o.has(u.shadowRoot) && (h = h.concat(this.getElementsFromPointAll(e, s, u.shadowRoot, o)));
|
|
101
|
+
return h;
|
|
102
|
+
}
|
|
92
103
|
reIndexItems(e) {
|
|
93
104
|
const s = Array.from(e.children);
|
|
94
105
|
let t = 0;
|
|
95
|
-
s.forEach((
|
|
96
|
-
var
|
|
97
|
-
(
|
|
106
|
+
s.forEach((o) => {
|
|
107
|
+
var r;
|
|
108
|
+
(r = o.children[0]) != null && r.hasAttribute("locked"), o.dataset.index = t, t++;
|
|
98
109
|
});
|
|
99
110
|
}
|
|
100
111
|
}
|
|
101
|
-
|
|
112
|
+
E.define("wje-reorder-handle", E);
|
|
102
113
|
export {
|
|
103
|
-
|
|
114
|
+
E as default
|
|
104
115
|
};
|
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.36",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|