wj-elements 0.1.33 → 0.1.35
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-button.js +25 -25
- package/dist/wje-reorder-handle.js +49 -38
- package/package.json +1 -1
package/dist/wje-button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var c = (
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
class d extends
|
|
1
|
+
var j = Object.defineProperty;
|
|
2
|
+
var g = (e, a, o) => a in e ? j(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o;
|
|
3
|
+
var c = (e, a, o) => (g(e, typeof a != "symbol" ? a + "" : a, o), o);
|
|
4
|
+
import h, { WjElementUtils as p, event as s } from "./wje-element.js";
|
|
5
|
+
import v from "./wje-icon.js";
|
|
6
|
+
const b = (e) => e === "false" || e === "null" || e === "NaN" || e === "undefined" || e === "0" ? !1 : !!e, m = '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{border-color:var(--wje-color-primary-6);color:var(--wje-color-primary-6)}.wje-button-solid.wje-color-complete{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete{border-color:var(--wje-color-complete-6);color:var(--wje-color-complete-6)}.wje-button-solid.wje-color-success{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success{border-color:var(--wje-color-success-6);color:var(--wje-color-success-6)}.wje-button-solid.wje-color-warning{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning{border-color:var(--wje-color-warning-6);color:var(--wje-color-warning-6)}.wje-button-solid.wje-color-danger{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger{border-color:var(--wje-color-danger-6);color:var(--wje-color-danger-6)}.wje-button-solid.wje-color-neutral{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral{border-color:var(--wje-color-contrast-6);color:var(--wje-color-contrast-6)}.wje-button-solid.wje-color-default{background-color:transparent;border-color:var(--wje-color-contrast-4);color:var(--wje-color-contrast-11)}.wje-button-outline.wje-color-default{border-color:var(--wje-color-contrast-4);color:var(--wje-color-contrast-11)}:host{--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.native-button{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);outline:var(--wje-button-outline);background-color:transparent;line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}@media (any-hover: hover){.wje-button-solid.wje-color-primary:hover{background-color:var(--wje-color-primary-10);border-color:var(--wje-color-primary-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-11);color:var(--wje-color-primary-11)}.wje-button-solid.wje-color-complete:hover{background-color:var(--wje-color-complete-10);border-color:var(--wje-color-complete-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-11);color:var(--wje-color-complete-11)}.wje-button-solid.wje-color-success:hover{background-color:var(--wje-color-success-10);border-color:var(--wje-color-success-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-11);color:var(--wje-color-success-11)}.wje-button-solid.wje-color-warning:hover{background-color:var(--wje-color-warning-10);border-color:var(--wje-color-warning-10);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11)}.wje-button-solid.wje-color-danger:hover{background-color:var(--wje-color-danger-10);border-color:var(--wje-color-danger-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-11);color:var(--wje-color-danger-11)}.wje-button-solid.wje-color-neutral:hover{background-color:var(--wje-color-contrast-10);border-color:var(--wje-color-contrast-10);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-neutral:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-11)}.wje-button-solid.wje-color-default:hover,.wje-button-outline.wje-color-default:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-2);color:var(--wje-color-contrast-9)}.wje-button-link:hover{background-color:var(--wje-color-contrast-1);border-color:transparent;color:var(--wje-color-contrast-9)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}.wje-button-link{border-width:1px;border-color:transparent;background-color:transparent}.wje-button-disabled{cursor:default;opacity:.5;pointer-events:none}:host([round]) .native-button{border-radius:var(--wje-border-radius-pill)}:host([circle]) .native-button{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1;width:1.813rem;display:flex;align-items:center;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=small]) .native-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}:host([size=large]) .native-button{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host([size=small][circle]) .native-button{width:1.5rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size=large][circle]) .native-button{width:2.188rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .native-button{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
|
|
7
|
+
class d extends h {
|
|
8
8
|
/**
|
|
9
9
|
* Button constructor
|
|
10
10
|
* @constructor
|
|
@@ -16,7 +16,7 @@ class d extends g {
|
|
|
16
16
|
* @type {Object}
|
|
17
17
|
*/
|
|
18
18
|
c(this, "dependencies", {
|
|
19
|
-
"wje-icon":
|
|
19
|
+
"wje-icon": v
|
|
20
20
|
});
|
|
21
21
|
/**
|
|
22
22
|
* Class name
|
|
@@ -28,7 +28,7 @@ class d extends g {
|
|
|
28
28
|
* @param {Event} e - The event
|
|
29
29
|
*/
|
|
30
30
|
c(this, "eventDialogOpen", (o) => {
|
|
31
|
-
|
|
31
|
+
s.dispatchCustomEvent(this, this.dialog, {
|
|
32
32
|
bubbles: !0
|
|
33
33
|
});
|
|
34
34
|
});
|
|
@@ -36,8 +36,8 @@ class d extends g {
|
|
|
36
36
|
* Toggle states method
|
|
37
37
|
*/
|
|
38
38
|
c(this, "toggleStates", () => {
|
|
39
|
-
this.slotToggle.assignedNodes().filter((
|
|
40
|
-
|
|
39
|
+
this.slotToggle.assignedNodes().filter((n) => n.nodeType === Node.ELEMENT_NODE).forEach((n, u) => {
|
|
40
|
+
n.classList.contains("show") ? n.classList.remove("show") : (n.classList.add("show"), this.setAttribute("value", u === 0 ? "on" : "off"));
|
|
41
41
|
});
|
|
42
42
|
});
|
|
43
43
|
this.internals_ = this.attachInternals();
|
|
@@ -103,14 +103,14 @@ class d extends g {
|
|
|
103
103
|
* @param {boolean} value - The value to set
|
|
104
104
|
*/
|
|
105
105
|
set stopPropagation(o) {
|
|
106
|
-
this.setAttribute("stop-propagation",
|
|
106
|
+
this.setAttribute("stop-propagation", b(o));
|
|
107
107
|
}
|
|
108
108
|
/**
|
|
109
109
|
* Get stop propagation
|
|
110
110
|
* @returns {boolean} stopPropagation - The stop propagation
|
|
111
111
|
*/
|
|
112
112
|
get stopPropagation() {
|
|
113
|
-
return
|
|
113
|
+
return b(this.getAttribute("stop-propagation"));
|
|
114
114
|
}
|
|
115
115
|
/**
|
|
116
116
|
* Get CSS stylesheet
|
|
@@ -118,7 +118,7 @@ class d extends g {
|
|
|
118
118
|
* @returns {Object} styles - The CSS styles
|
|
119
119
|
*/
|
|
120
120
|
static get cssStyleSheet() {
|
|
121
|
-
return
|
|
121
|
+
return m;
|
|
122
122
|
}
|
|
123
123
|
/**
|
|
124
124
|
* Get observed attributes
|
|
@@ -157,29 +157,29 @@ class d extends g {
|
|
|
157
157
|
* @param {Object} params - The parameters
|
|
158
158
|
* @returns {Object} fragment - The document fragment
|
|
159
159
|
*/
|
|
160
|
-
draw(o,
|
|
161
|
-
let
|
|
162
|
-
if (this.hasAttribute("href") ?
|
|
163
|
-
let
|
|
164
|
-
|
|
160
|
+
draw(o, n, u) {
|
|
161
|
+
let w = document.createDocumentFragment(), t = document.createElement(this.hasAttribute("href") ? "a" : "button");
|
|
162
|
+
if (this.hasAttribute("href") ? t.setAttribute("href", this.getAttribute("href")) : this.type === "submit" && t.setAttribute("type", "submit"), t.classList.add("native-button"), t.setAttribute("part", "native"), this.classList.remove("wje-button-disabled"), this.disabled && t.classList.add("wje-button-disabled"), this.variant && t.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && t.classList.add("wje-button-round"), this.hasAttribute("circle") && t.classList.add("wje-button-circle"), this.outline && t.classList.add("wje-outline"), this.fill && t.classList.add("wje-button-" + this.fill), this.size && t.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? t.classList.add("wje-color-" + this.color, "wje-color") : t.classList.add("wje-color-default", "wje-color"), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
|
|
163
|
+
let i = document.createElement("wje-icon");
|
|
164
|
+
i.style.setProperty("--wje-icon-size", "14px"), i.setAttribute("slot", "caret"), i.setAttribute("name", "chevron-down"), this.appendChild(i);
|
|
165
165
|
}
|
|
166
166
|
if (this.active) {
|
|
167
167
|
this.classList.add("wje-active");
|
|
168
|
-
let
|
|
169
|
-
|
|
168
|
+
let i = document.createElement("wje-icon");
|
|
169
|
+
i.setAttribute("name", "check"), this.appendChild(i);
|
|
170
170
|
}
|
|
171
171
|
let l = document.createElement("span");
|
|
172
172
|
l.classList.add("button-inner");
|
|
173
173
|
let r = document.createElement("slot");
|
|
174
|
-
return r.setAttribute("name", "icon-only"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), l.appendChild(r), r = document.createElement("slot"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), l.appendChild(r), this.hasToggle =
|
|
174
|
+
return r.setAttribute("name", "icon-only"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), l.appendChild(r), r = document.createElement("slot"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), l.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), l.appendChild(r), this.hasToggle = p.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), l.appendChild(this.slotToggle)), t.appendChild(l), w.appendChild(t), w;
|
|
175
175
|
}
|
|
176
176
|
/**
|
|
177
177
|
* After draw method
|
|
178
178
|
*/
|
|
179
179
|
afterDraw() {
|
|
180
|
-
this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), this.hasAttribute("dialog") ?
|
|
181
|
-
|
|
182
|
-
}), this.type === "reset" &&
|
|
180
|
+
this.hasToggle && (this.toggle === "off" ? (this.slotToggle.assignedNodes()[1].classList.add("show"), this.setAttribute("value", "off")) : (this.slotToggle.assignedNodes()[0].classList.add("show"), this.setAttribute("value", "on"))), this.hasAttribute("dialog") ? s.addListener(this, "click", null, this.eventDialogOpen) : s.addListener(this, "click", "wje-button:click", null), this.hasToggle && s.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation }), this.type === "submit" && s.addListener(this, "click", "wje-button:submit", () => {
|
|
181
|
+
s.dispatchCustomEvent(this.internals_.form, "submit", {});
|
|
182
|
+
}), this.type === "reset" && s.addListener(this, "click", "wje-button:reset", () => {
|
|
183
183
|
this.internals_.form.reset();
|
|
184
184
|
});
|
|
185
185
|
}
|
|
@@ -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.35",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|