@c2n/reorder-list 0.0.4 → 0.0.6
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/LICENSE +21 -0
- package/dist/reorder-list.js +499 -462
- package/package.json +27 -80
- package/types/src/reorder-list.d.ts +4 -3
- package/types/src/reorder-list.d.ts.map +1 -1
- package/types/src/index.d.ts +0 -2
- package/types/src/index.d.ts.map +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Nguyen Thai Vinh
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/reorder-list.js
CHANGED
|
@@ -1,473 +1,510 @@
|
|
|
1
|
-
import { nothing as
|
|
2
|
-
import {
|
|
3
|
-
import { AsyncDirective as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { classMap as
|
|
7
|
-
import { styleMap as
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
1
|
+
import { nothing as e } from "lit/html.js";
|
|
2
|
+
import { PartType as t, directive as n } from "lit/directive.js";
|
|
3
|
+
import { AsyncDirective as r } from "lit/async-directive.js";
|
|
4
|
+
import { LitElement as i, html as a, unsafeCSS as o } from "lit";
|
|
5
|
+
import { customElement as s, eventOptions as c, property as l, query as u, queryAll as d, state as f } from "lit/decorators.js";
|
|
6
|
+
import { classMap as p } from "lit/directives/class-map.js";
|
|
7
|
+
import { styleMap as m } from "lit/directives/style-map.js";
|
|
8
|
+
//#region ../../../node_modules/@lit-labs/motion/animate-controller.js
|
|
9
|
+
var h = /* @__PURE__ */ new WeakMap(), g = 0, _ = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new WeakSet(), y = () => new Promise((e) => requestAnimationFrame(e)), b = (e, t) => {
|
|
10
|
+
let n = e - t;
|
|
11
|
+
return n === 0 ? void 0 : n;
|
|
12
|
+
}, x = (e, t) => {
|
|
13
|
+
let n = e / t;
|
|
14
|
+
return n === 1 ? void 0 : n;
|
|
15
|
+
}, S = {
|
|
16
|
+
left: (e, t) => {
|
|
17
|
+
let n = b(e, t);
|
|
18
|
+
return {
|
|
19
|
+
value: n,
|
|
20
|
+
transform: n == null || isNaN(n) ? void 0 : `translateX(${n}px)`
|
|
21
|
+
};
|
|
22
|
+
},
|
|
23
|
+
top: (e, t) => {
|
|
24
|
+
let n = b(e, t);
|
|
25
|
+
return {
|
|
26
|
+
value: n,
|
|
27
|
+
transform: n == null || isNaN(n) ? void 0 : `translateY(${n}px)`
|
|
28
|
+
};
|
|
29
|
+
},
|
|
30
|
+
width: (e, t) => {
|
|
31
|
+
let n;
|
|
32
|
+
t === 0 && (t = 1, n = { width: "1px" });
|
|
33
|
+
let r = x(e, t);
|
|
34
|
+
return {
|
|
35
|
+
value: r,
|
|
36
|
+
overrideFrom: n,
|
|
37
|
+
transform: r == null || isNaN(r) ? void 0 : `scaleX(${r})`
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
height: (e, t) => {
|
|
41
|
+
let n;
|
|
42
|
+
t === 0 && (t = 1, n = { height: "1px" });
|
|
43
|
+
let r = x(e, t);
|
|
44
|
+
return {
|
|
45
|
+
value: r,
|
|
46
|
+
overrideFrom: n,
|
|
47
|
+
transform: r == null || isNaN(r) ? void 0 : `scaleY(${r})`
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
}, C = {
|
|
51
|
+
duration: 333,
|
|
52
|
+
easing: "ease-in-out"
|
|
53
|
+
}, w = [
|
|
54
|
+
"left",
|
|
55
|
+
"top",
|
|
56
|
+
"width",
|
|
57
|
+
"height",
|
|
58
|
+
"opacity",
|
|
59
|
+
"color",
|
|
60
|
+
"background"
|
|
61
|
+
], T = /* @__PURE__ */ new WeakMap(), E = n(class extends r {
|
|
62
|
+
constructor(e) {
|
|
63
|
+
if (super(e), this.t = !1, this.i = null, this.o = null, this.h = !0, this.shouldLog = !1, e.type === t.CHILD) throw Error("The `animate` directive must be used in attribute position.");
|
|
64
|
+
this.createFinished();
|
|
65
|
+
}
|
|
66
|
+
createFinished() {
|
|
67
|
+
this.resolveFinished?.(), this.finished = new Promise((e) => {
|
|
68
|
+
this.l = e;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
async resolveFinished() {
|
|
72
|
+
this.l?.(), this.l = void 0;
|
|
73
|
+
}
|
|
74
|
+
render(t) {
|
|
75
|
+
return e;
|
|
76
|
+
}
|
|
77
|
+
getController() {
|
|
78
|
+
return h.get(this.u);
|
|
79
|
+
}
|
|
80
|
+
isDisabled() {
|
|
81
|
+
return this.options.disabled || this.getController()?.disabled;
|
|
82
|
+
}
|
|
83
|
+
update(e, [t]) {
|
|
84
|
+
let n = this.u === void 0;
|
|
85
|
+
return n && (this.u = e.options?.host, this.u.addController(this), this.u.updateComplete.then((e) => this.t = !0), this.element = e.element, T.set(this.element, this)), this.optionsOrCallback = t, (n || typeof t != "function") && this.m(t), this.render(t);
|
|
86
|
+
}
|
|
87
|
+
m(e) {
|
|
88
|
+
e ??= {};
|
|
89
|
+
let t = this.getController();
|
|
90
|
+
t !== void 0 && ((e = {
|
|
91
|
+
...t.defaultOptions,
|
|
92
|
+
...e
|
|
93
|
+
}).keyframeOptions = {
|
|
94
|
+
...t.defaultOptions.keyframeOptions,
|
|
95
|
+
...e.keyframeOptions
|
|
96
|
+
}), e.properties ??= w, this.options = e;
|
|
97
|
+
}
|
|
98
|
+
p() {
|
|
99
|
+
let e = {}, t = this.element.getBoundingClientRect(), n = getComputedStyle(this.element);
|
|
100
|
+
return this.options.properties.forEach((r) => {
|
|
101
|
+
let i = t[r] ?? (S[r] ? void 0 : n[r]), a = Number(i);
|
|
102
|
+
e[r] = isNaN(a) ? i + "" : a;
|
|
103
|
+
}), e;
|
|
104
|
+
}
|
|
105
|
+
v() {
|
|
106
|
+
let e, t = !0;
|
|
107
|
+
return this.options.guard && (e = this.options.guard(), t = ((e, t) => {
|
|
108
|
+
if (Array.isArray(e)) {
|
|
109
|
+
if (Array.isArray(t) && t.length === e.length && e.every((e, n) => e === t[n])) return !1;
|
|
110
|
+
} else if (t === e) return !1;
|
|
111
|
+
return !0;
|
|
112
|
+
})(e, this._)), this.h = this.t && !this.isDisabled() && !this.isAnimating() && t && this.element.isConnected, this.h && (this._ = Array.isArray(e) ? Array.from(e) : e), this.h;
|
|
113
|
+
}
|
|
114
|
+
hostUpdate() {
|
|
115
|
+
typeof this.optionsOrCallback == "function" && this.m(this.optionsOrCallback()), this.v() && (this.A = this.p(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
|
|
116
|
+
}
|
|
117
|
+
async hostUpdated() {
|
|
118
|
+
if (!this.h || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered) return;
|
|
119
|
+
let e;
|
|
120
|
+
this.prepare(), await y;
|
|
121
|
+
let t = this.P(), n = this.V(this.options.keyframeOptions, t), r = this.p();
|
|
122
|
+
if (this.A !== void 0) {
|
|
123
|
+
let { from: n, to: i } = this.O(this.A, r, t);
|
|
124
|
+
this.log("measured", [
|
|
125
|
+
this.A,
|
|
126
|
+
r,
|
|
127
|
+
n,
|
|
128
|
+
i
|
|
129
|
+
]), e = this.calculateKeyframes(n, i);
|
|
130
|
+
} else {
|
|
131
|
+
let n = _.get(this.options.inId);
|
|
132
|
+
if (n) {
|
|
133
|
+
_.delete(this.options.inId);
|
|
134
|
+
let { from: i, to: a } = this.O(n, r, t);
|
|
135
|
+
e = this.calculateKeyframes(i, a), e = this.options.in ? [
|
|
136
|
+
{
|
|
137
|
+
...this.options.in[0],
|
|
138
|
+
...e[0]
|
|
139
|
+
},
|
|
140
|
+
...this.options.in.slice(1),
|
|
141
|
+
e[1]
|
|
142
|
+
] : e, g++, e.forEach((e) => e.zIndex = g);
|
|
143
|
+
} else this.options.in && (e = [...this.options.in, {}]);
|
|
144
|
+
}
|
|
145
|
+
this.animate(e, n);
|
|
146
|
+
}
|
|
147
|
+
resetStyles() {
|
|
148
|
+
this.j !== void 0 && (this.element.setAttribute("style", this.j ?? ""), this.j = void 0);
|
|
149
|
+
}
|
|
150
|
+
commitStyles() {
|
|
151
|
+
this.j = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
|
|
152
|
+
}
|
|
153
|
+
reconnected() {}
|
|
154
|
+
async disconnected() {
|
|
155
|
+
if (!this.h || (this.options.id !== void 0 && _.set(this.options.id, this.A), this.options.out === void 0)) return;
|
|
156
|
+
if (this.prepare(), await y(), this.i?.isConnected) {
|
|
157
|
+
let e = this.o && this.o.parentNode === this.i ? this.o : null;
|
|
158
|
+
if (this.i.insertBefore(this.element, e), this.options.stabilizeOut) {
|
|
159
|
+
let e = this.p();
|
|
160
|
+
this.log("stabilizing out");
|
|
161
|
+
let t = this.A.left - e.left, n = this.A.top - e.top;
|
|
162
|
+
getComputedStyle(this.element).position !== "static" || t === 0 && n === 0 || (this.element.style.position = "relative"), t !== 0 && (this.element.style.left = t + "px"), n !== 0 && (this.element.style.top = n + "px");
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
let e = this.V(this.options.keyframeOptions);
|
|
166
|
+
await this.animate(this.options.out, e), this.element.remove();
|
|
167
|
+
}
|
|
168
|
+
prepare() {
|
|
169
|
+
this.createFinished();
|
|
170
|
+
}
|
|
171
|
+
start() {
|
|
172
|
+
this.options.onStart?.(this);
|
|
173
|
+
}
|
|
174
|
+
didFinish(e) {
|
|
175
|
+
e && this.options.onComplete?.(this), this.A = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
|
|
176
|
+
}
|
|
177
|
+
P() {
|
|
178
|
+
let e = [];
|
|
179
|
+
for (let t = this.element.parentNode; t; t = t?.parentNode) {
|
|
180
|
+
let n = T.get(t);
|
|
181
|
+
n && !n.isDisabled() && n && e.push(n);
|
|
182
|
+
}
|
|
183
|
+
return e;
|
|
184
|
+
}
|
|
185
|
+
get isHostRendered() {
|
|
186
|
+
let e = v.has(this.u);
|
|
187
|
+
return e || this.u.updateComplete.then(() => {
|
|
188
|
+
v.add(this.u);
|
|
189
|
+
}), e;
|
|
190
|
+
}
|
|
191
|
+
V(e, t = this.P()) {
|
|
192
|
+
let n = { ...C };
|
|
193
|
+
return t.forEach((e) => Object.assign(n, e.options.keyframeOptions)), Object.assign(n, e), n;
|
|
194
|
+
}
|
|
195
|
+
O(e, t, n) {
|
|
196
|
+
e = { ...e }, t = { ...t };
|
|
197
|
+
let r = n.map((e) => e.animatingProperties).filter((e) => e !== void 0), i = 1, a = 1;
|
|
198
|
+
return r.length > 0 && (r.forEach((e) => {
|
|
199
|
+
e.width && (i /= e.width), e.height && (a /= e.height);
|
|
200
|
+
}), e.left !== void 0 && t.left !== void 0 && (e.left = i * e.left, t.left = i * t.left), e.top !== void 0 && t.top !== void 0 && (e.top = a * e.top, t.top = a * t.top)), {
|
|
201
|
+
from: e,
|
|
202
|
+
to: t
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
calculateKeyframes(e, t, n = !1) {
|
|
206
|
+
let r = {}, i = {}, a = !1, o = {};
|
|
207
|
+
for (let n in t) {
|
|
208
|
+
let s = e[n], c = t[n];
|
|
209
|
+
if (n in S) {
|
|
210
|
+
let e = S[n];
|
|
211
|
+
if (s === void 0 || c === void 0) continue;
|
|
212
|
+
let t = e(s, c);
|
|
213
|
+
t.transform !== void 0 && (o[n] = t.value, a = !0, r.transform = `${r.transform ?? ""} ${t.transform}`, t.overrideFrom !== void 0 && Object.assign(r, t.overrideFrom));
|
|
214
|
+
} else s !== c && s !== void 0 && c !== void 0 && (a = !0, r[n] = s, i[n] = c);
|
|
215
|
+
}
|
|
216
|
+
return r.transformOrigin = i.transformOrigin = n ? "center center" : "top left", this.animatingProperties = o, a ? [r, i] : void 0;
|
|
217
|
+
}
|
|
218
|
+
async animate(e, t = this.options.keyframeOptions) {
|
|
219
|
+
this.start(), this.frames = e;
|
|
220
|
+
let n = !1;
|
|
221
|
+
if (!this.isAnimating() && !this.isDisabled() && (this.options.onFrames && (this.frames = e = this.options.onFrames(this), this.log("modified frames", e)), e !== void 0)) {
|
|
222
|
+
this.log("animate", [e, t]), n = !0, this.webAnimation = this.element.animate(e, t);
|
|
223
|
+
let r = this.getController();
|
|
224
|
+
r?.add(this);
|
|
225
|
+
try {
|
|
226
|
+
await this.webAnimation.finished;
|
|
227
|
+
} catch {}
|
|
228
|
+
r?.remove(this);
|
|
229
|
+
}
|
|
230
|
+
return this.didFinish(n), n;
|
|
231
|
+
}
|
|
232
|
+
isAnimating() {
|
|
233
|
+
return this.webAnimation?.playState === "running" || this.webAnimation?.pending;
|
|
234
|
+
}
|
|
235
|
+
log(e, t) {
|
|
236
|
+
this.shouldLog && !this.isDisabled() && console.log(e, this.options.id, t);
|
|
237
|
+
}
|
|
238
|
+
}), D = [
|
|
239
|
+
"top",
|
|
240
|
+
"right",
|
|
241
|
+
"bottom",
|
|
242
|
+
"left"
|
|
243
|
+
];
|
|
244
|
+
n(class extends r {
|
|
245
|
+
constructor(e) {
|
|
246
|
+
if (super(e), e.type !== t.ELEMENT) throw Error("The `position` directive must be used in attribute position.");
|
|
247
|
+
}
|
|
248
|
+
render(t, n) {
|
|
249
|
+
return e;
|
|
250
|
+
}
|
|
251
|
+
update(e, [t, n]) {
|
|
252
|
+
return this.u === void 0 && (this.u = e.options?.host, this.u.addController(this)), this.C = e.element, this.N = t, this.S = n ?? [
|
|
253
|
+
"left",
|
|
254
|
+
"top",
|
|
255
|
+
"width",
|
|
256
|
+
"height"
|
|
257
|
+
], this.render(t, n);
|
|
258
|
+
}
|
|
259
|
+
hostUpdated() {
|
|
260
|
+
this.F();
|
|
261
|
+
}
|
|
262
|
+
F() {
|
|
263
|
+
let e = typeof this.N == "function" ? this.N() : this.N?.value, t = e.offsetParent;
|
|
264
|
+
if (e === void 0 || !t) return;
|
|
265
|
+
let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
|
|
266
|
+
this.S?.forEach((e) => {
|
|
267
|
+
let t = D.includes(e) ? n[e] - r[e] : n[e];
|
|
268
|
+
this.C.style[e] = t + "px";
|
|
269
|
+
});
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
//#endregion
|
|
273
|
+
//#region src/reorder-list.scss?inline
|
|
274
|
+
var O = ":host{position:relative}.c2-reorder-list-container{gap:var(--c2-reorder-list--container-gap,0px);border-width:var(--c2-reorder-list--container-border-width,0px);border-color:var(--c2-reorder-list--container-border-color,#bcbcc6);border-radius:var(--c2-reorder-list--container-border-radius,8px);padding:var(--c2-reorder-list--container-padding,0px);margin:var(--c2-reorder-list--container-margin,0px);border-style:solid;flex-direction:column;display:flex;position:relative}.c2-reorder-list-container .list-item{background:var(--c2-reorder-list--item-background,transparent);padding:var(--c2-reorder-list--item-padding,0px);border-radius:initial;box-sizing:border-box;position:relative}.c2-reorder-list-container .list-item:not(:last-child){border-bottom:var(--c2-reorder-list--divider-height,0px) solid var(--c2-reorder-list--divider-color,#bcbcc6)}.c2-reorder-list-container .list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.c2-reorder-list-container .list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.c2-reorder-list-container .list-item--reorderable ::slotted(:not([data-fixed])){cursor:pointer;touch-action:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.c2-reorder-list-container .dragging-placeholder{background-color:var(--c2-reorder-list--placeholder-background,transparent);z-index:1}.dragging-item{box-sizing:border-box;background-color:var(--c2-reorder-list--dragging-item-background,transparent);cursor:pointer;z-index:100000;display:none;position:fixed}.dragging-item.dragging-item--active{display:flex}";
|
|
275
|
+
//#endregion
|
|
276
|
+
//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
|
|
277
|
+
function k(e, t, n, r) {
|
|
278
|
+
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
279
|
+
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
280
|
+
else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
|
|
281
|
+
return i > 3 && a && Object.defineProperty(t, n, a), a;
|
|
212
282
|
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
this.currentDraggingItem.setAttribute("slot", this.placeholderSlotIndex.toString()), this.skipAnimation = !0, this.dispatchChangeEvent();
|
|
289
|
-
}
|
|
290
|
-
this.stopDrag();
|
|
291
|
-
}, this.startScrollInterval = (i) => {
|
|
292
|
-
this.stopScrolling();
|
|
293
|
-
const t = 2;
|
|
294
|
-
this.scrollingTimer = window.requestAnimationFrame(() => {
|
|
295
|
-
var e;
|
|
296
|
-
this.skipAnimation = !0, (e = this.scrollableParent) == null || e.scrollBy(0, i === "up" ? -t : t), this.startScrollInterval(i);
|
|
297
|
-
});
|
|
298
|
-
};
|
|
299
|
-
}
|
|
300
|
-
connectedCallback() {
|
|
301
|
-
super.connectedCallback(), this.observeChildList(), this.updateSlotMapping();
|
|
302
|
-
}
|
|
303
|
-
disconnectedCallback() {
|
|
304
|
-
super.disconnectedCallback(), this.childListObserver && this.childListObserver.disconnect();
|
|
305
|
-
}
|
|
306
|
-
renderSlots() {
|
|
307
|
-
const i = { "list-item--reorderable": this.editable }, t = this.createPlaceHolder(i), e = this.getChildItems().length, s = Array.from({ length: e }).map((o, r) => {
|
|
308
|
-
const n = {
|
|
309
|
-
id: r,
|
|
310
|
-
inId: r,
|
|
311
|
-
skipInitial: !0,
|
|
312
|
-
disabled: this.skipAnimation || r === e - 1
|
|
313
|
-
};
|
|
314
|
-
return this.placeholderSlotIndex !== -1 && this.currentDraggingSlotIndex === r ? u`` : u`<div class="list-item ${f(i)}" ${Y(n)}>
|
|
283
|
+
//#endregion
|
|
284
|
+
//#region src/reorder-list.ts
|
|
285
|
+
var A = class extends i {
|
|
286
|
+
constructor(...e) {
|
|
287
|
+
super(...e), this.editable = !1, this.dragStartThreshold = 10, this.autoScrollDisabled = !1, this.placeholderSlotIndex = -1, this.placeholderSize = {
|
|
288
|
+
width: "0px",
|
|
289
|
+
height: "0px"
|
|
290
|
+
}, this.childListObserver = null, this.hostBoundingClientRect = null, this.scrollableParent = null, this.scrollableParentRect = void 0, this.pickupPosition = {
|
|
291
|
+
x: 0,
|
|
292
|
+
y: 0
|
|
293
|
+
}, this.itemPositions = [], this.currentDraggingItem = null, this.currentDraggingSlotIndex = -1, this.skipAnimation = !1, this.hasStartedDragging = !1, this.scrollingTimer = 0, this.cacheMouseEvent = null, this.handleMouseMove = async (e) => {
|
|
294
|
+
if (!this.isUpdatePending) {
|
|
295
|
+
if (this.hasStartedDragging) {
|
|
296
|
+
this.cacheMouseEvent = {
|
|
297
|
+
pageX: e.pageX,
|
|
298
|
+
pageY: e.pageY
|
|
299
|
+
}, this.applyTransform(e);
|
|
300
|
+
let t = this.getItemIndexFromPointerPosition(e);
|
|
301
|
+
t > -1 && t !== this.placeholderSlotIndex && (this.placeholderSlotIndex = t);
|
|
302
|
+
} else {
|
|
303
|
+
let t = this.getPointerPosition(e);
|
|
304
|
+
if (!(Math.abs(t.x - this.pickupPosition.x) + Math.abs(t.y - this.pickupPosition.y) >= this.dragStartThreshold)) return;
|
|
305
|
+
this.hasStartedDragging = !0, this.skipAnimation = !0;
|
|
306
|
+
let n = this.getSlottedTargetIndex(e);
|
|
307
|
+
if (n == -1) return;
|
|
308
|
+
let r = e.composedPath()[n], i = r.getAttribute("slot"), a = e.composedPath()[n + 2];
|
|
309
|
+
if (!i) {
|
|
310
|
+
this.stopDrag();
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
313
|
+
this.pickupPosition = this.getPointerPosition(e);
|
|
314
|
+
let o = a.getBoundingClientRect(), s = r.getBoundingClientRect();
|
|
315
|
+
this.currentDraggingItem = r, this.placeholderSlotIndex = parseInt(i), this.currentDraggingSlotIndex = parseInt(i), this.placeholderSize = {
|
|
316
|
+
width: `${s.width}px`,
|
|
317
|
+
height: `${s.height}px`
|
|
318
|
+
}, this.draggingElement.style.width = `${o.width}px`, this.draggingElement.style.height = `${o.height}px`, this.draggingElement.style.top = `${o.top}px`, this.draggingElement.style.left = `${o.left}px`, r.setAttribute("slot", "dragging-item"), this.applyTransform(e), this.updateItemPositions(), this.scrollableParent = this.getNearestScrollableParent(), this.scrollableParentRect = this.scrollableParent?.getBoundingClientRect(), this.scrollableParent && this.scrollableParent.addEventListener("scroll", this.handleScroll, { passive: !0 });
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}, this.handleScroll = () => {
|
|
322
|
+
if (this.cacheMouseEvent) {
|
|
323
|
+
this.updateItemPositions(), this.applyTransform(this.cacheMouseEvent);
|
|
324
|
+
let e = this.getItemIndexFromPointerPosition(this.cacheMouseEvent);
|
|
325
|
+
e > -1 && e !== this.placeholderSlotIndex && (this.placeholderSlotIndex = e);
|
|
326
|
+
}
|
|
327
|
+
}, this.handleMouseUp = () => {
|
|
328
|
+
if (this.hasStartedDragging && this.currentDraggingItem) {
|
|
329
|
+
let e = this.getSortChildrenBySlot(), t = this.placeholderSlotIndex;
|
|
330
|
+
for (let n = 0; n < e.length; n++) {
|
|
331
|
+
let r = parseInt(e[n].getAttribute("slot"));
|
|
332
|
+
t > this.currentDraggingSlotIndex && r > this.currentDraggingSlotIndex && r <= t && e[n].setAttribute("slot", (r - 1).toString()), t < this.currentDraggingSlotIndex && r >= t && r < this.currentDraggingSlotIndex && e[n].setAttribute("slot", (r + 1).toString());
|
|
333
|
+
}
|
|
334
|
+
this.currentDraggingItem.setAttribute("slot", this.placeholderSlotIndex.toString()), this.skipAnimation = !0, this.dispatchChangeEvent();
|
|
335
|
+
}
|
|
336
|
+
this.stopDrag();
|
|
337
|
+
}, this.startScrollInterval = (e) => {
|
|
338
|
+
this.stopScrolling(), this.scrollingTimer = window.requestAnimationFrame(() => {
|
|
339
|
+
this.skipAnimation = !0, this.scrollableParent?.scrollBy(0, e === "up" ? -2 : 2), this.startScrollInterval(e);
|
|
340
|
+
});
|
|
341
|
+
};
|
|
342
|
+
}
|
|
343
|
+
connectedCallback() {
|
|
344
|
+
super.connectedCallback(), this.observeChildList(), this.updateSlotMapping();
|
|
345
|
+
}
|
|
346
|
+
disconnectedCallback() {
|
|
347
|
+
super.disconnectedCallback(), this.childListObserver && this.childListObserver.disconnect();
|
|
348
|
+
}
|
|
349
|
+
renderSlots() {
|
|
350
|
+
let e = { "list-item--reorderable": this.editable }, t = this.createPlaceHolder(e), n = this.getChildItems().length, r = Array.from({ length: n }).map((t, r) => {
|
|
351
|
+
let i = {
|
|
352
|
+
id: r,
|
|
353
|
+
inId: r,
|
|
354
|
+
skipInitial: !0,
|
|
355
|
+
disabled: this.skipAnimation || r === n - 1
|
|
356
|
+
};
|
|
357
|
+
return this.placeholderSlotIndex !== -1 && this.currentDraggingSlotIndex === r ? a`` : a`<div class="list-item ${p(e)}" ${E(i)}>
|
|
315
358
|
<slot name="${r}"></slot>
|
|
316
359
|
</div>`;
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
360
|
+
});
|
|
361
|
+
return this.placeholderSlotIndex !== -1 && (this.placeholderSlotIndex === this.currentDraggingSlotIndex ? r[this.placeholderSlotIndex] = t : this.placeholderSlotIndex <= this.currentDraggingSlotIndex ? r.splice(this.placeholderSlotIndex, 0, t) : r.splice(this.placeholderSlotIndex + 1, 0, t)), r;
|
|
362
|
+
}
|
|
363
|
+
createPlaceHolder(e) {
|
|
364
|
+
return a` <div class="list-item placeholder ${p(e)}">
|
|
322
365
|
<slot name="placeholder">
|
|
323
|
-
<div class="dragging-placeholder" style=${
|
|
366
|
+
<div class="dragging-placeholder" style=${m(this.placeholderSize)}></div>
|
|
324
367
|
</slot>
|
|
325
368
|
</div>`;
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
369
|
+
}
|
|
370
|
+
render() {
|
|
371
|
+
let e = { "dragging-item--active": this.placeholderSlotIndex > -1 };
|
|
372
|
+
return a`
|
|
330
373
|
<div class="c2-reorder-list-container" @mousedown=${this.handleMouseDown}>${this.renderSlots()}</div>
|
|
331
|
-
<div class="dragging-item ${
|
|
374
|
+
<div class="dragging-item ${p(e)}">
|
|
332
375
|
<slot name="dragging-item"></slot>
|
|
333
376
|
</div>
|
|
334
377
|
`;
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
T(".list-item")
|
|
449
|
-
], a.prototype, "listItemElements", 2);
|
|
450
|
-
h([
|
|
451
|
-
y({ type: Boolean, reflect: !0 })
|
|
452
|
-
], a.prototype, "editable", 2);
|
|
453
|
-
h([
|
|
454
|
-
y({ type: Number })
|
|
455
|
-
], a.prototype, "dragStartThreshold", 2);
|
|
456
|
-
h([
|
|
457
|
-
y({ type: Boolean })
|
|
458
|
-
], a.prototype, "autoScrollDisabled", 2);
|
|
459
|
-
h([
|
|
460
|
-
O()
|
|
461
|
-
], a.prototype, "placeholderSlotIndex", 2);
|
|
462
|
-
h([
|
|
463
|
-
O()
|
|
464
|
-
], a.prototype, "placeholderSize", 2);
|
|
465
|
-
h([
|
|
466
|
-
B({ passive: !0 })
|
|
467
|
-
], a.prototype, "handleMouseDown", 1);
|
|
468
|
-
a = h([
|
|
469
|
-
L("c2-reorder-list")
|
|
470
|
-
], a);
|
|
471
|
-
export {
|
|
472
|
-
a as ReorderList
|
|
378
|
+
}
|
|
379
|
+
handleMouseDown(e) {
|
|
380
|
+
let t = this.getSlottedTargetIndex(e);
|
|
381
|
+
if (t == -1) return;
|
|
382
|
+
let n = e.composedPath()[t];
|
|
383
|
+
n.getAttribute("slot") && !this.isFixedItem(n) && (this.hostBoundingClientRect = this.getBoundingClientRect(), this.pickupPosition = this.getPointerPosition(e), document.addEventListener("mousemove", this.handleMouseMove, { passive: !0 }), document.addEventListener("mouseup", this.handleMouseUp, { passive: !0 }));
|
|
384
|
+
}
|
|
385
|
+
isFixedItem(e) {
|
|
386
|
+
return !!e && !!e.dataset.fixed;
|
|
387
|
+
}
|
|
388
|
+
getItemIndexFromPointerPosition(e) {
|
|
389
|
+
return this.itemPositions.findIndex((t) => {
|
|
390
|
+
if (t.isFixed) return !1;
|
|
391
|
+
let n = t.x + 5, r = t.y + 5, i = t.width - 5, a = t.height - 5;
|
|
392
|
+
return n < e.pageX && r < e.pageY && n + i > e.pageX && r + a > e.pageY;
|
|
393
|
+
});
|
|
394
|
+
}
|
|
395
|
+
dispatchChangeEvent() {
|
|
396
|
+
let e = this.getChildItems().map((e) => parseInt(e.getAttribute("slot")));
|
|
397
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
398
|
+
bubbles: !0,
|
|
399
|
+
cancelable: !0,
|
|
400
|
+
detail: e
|
|
401
|
+
}));
|
|
402
|
+
}
|
|
403
|
+
stopDrag() {
|
|
404
|
+
document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.scrollableParent && this.scrollableParent.removeEventListener("scroll", this.handleScroll), this.pickupPosition = {
|
|
405
|
+
x: 0,
|
|
406
|
+
y: 0
|
|
407
|
+
}, this.itemPositions = [], this.hasStartedDragging = !1, this.placeholderSlotIndex = -1, this.scrollableParent = null, this.cacheMouseEvent = null;
|
|
408
|
+
}
|
|
409
|
+
getPointerPosition(e) {
|
|
410
|
+
return {
|
|
411
|
+
x: e.pageX - (this.hostBoundingClientRect?.left || 0),
|
|
412
|
+
y: e.pageY - (this.hostBoundingClientRect?.top || 0)
|
|
413
|
+
};
|
|
414
|
+
}
|
|
415
|
+
observeChildList() {
|
|
416
|
+
this.childListObserver = new MutationObserver(() => {
|
|
417
|
+
this.updateSlotMapping();
|
|
418
|
+
}), this.childListObserver.observe(this, {
|
|
419
|
+
subtree: !1,
|
|
420
|
+
childList: !0
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
async firstUpdated() {
|
|
424
|
+
this.updateSlotMapping();
|
|
425
|
+
}
|
|
426
|
+
updated(e) {
|
|
427
|
+
e.has("placeholderSlotIndex") && (this.skipAnimation = !1, this.startScrollingIfNecessary(), this.updateItemPositions()), super.updated(e);
|
|
428
|
+
}
|
|
429
|
+
startScrollingIfNecessary() {
|
|
430
|
+
if (this.placeholderElement && this.scrollableParent) {
|
|
431
|
+
let e = this.placeholderElement.getBoundingClientRect(), t = e.top;
|
|
432
|
+
t < this.scrollableParentRect.top ? this.startScrollInterval("up") : t + e.height > this.scrollableParentRect.bottom ? this.startScrollInterval("down") : this.stopScrolling();
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
stopScrolling() {
|
|
436
|
+
window.cancelAnimationFrame(this.scrollingTimer);
|
|
437
|
+
}
|
|
438
|
+
updateSlotMapping() {
|
|
439
|
+
let e = this.getChildItems(), t = /* @__PURE__ */ new Map(), n = 0, r = !1;
|
|
440
|
+
for (let r of e) {
|
|
441
|
+
let e = r.getAttribute("slot");
|
|
442
|
+
e && (Number.isNaN(parseInt(e)) ? e === "dragging-item" && t.set(n, this.currentDraggingSlotIndex) : t.set(n, parseInt(e))), n++;
|
|
443
|
+
}
|
|
444
|
+
let i = Array.from(t.keys()).sort((e, n) => t.get(e) - t.get(n));
|
|
445
|
+
i.forEach((t, n) => {
|
|
446
|
+
e[t].setAttribute("slot", n.toString()), r = !0;
|
|
447
|
+
});
|
|
448
|
+
let a = i.length;
|
|
449
|
+
for (let t of e) t.getAttribute("slot") || (t.setAttribute("slot", a.toString()), a++, r = !0);
|
|
450
|
+
r && (this.requestUpdate(), this.dispatchChangeEvent());
|
|
451
|
+
}
|
|
452
|
+
updateItemPositions() {
|
|
453
|
+
this.itemPositions = [], this.listItemElements.forEach((e) => {
|
|
454
|
+
let t = e.querySelector("slot");
|
|
455
|
+
this.itemPositions.push({
|
|
456
|
+
...j(e),
|
|
457
|
+
isFixed: t ? this.isFixedItem(t.assignedNodes()[0]) : !1
|
|
458
|
+
});
|
|
459
|
+
}), console.log(this.itemPositions);
|
|
460
|
+
}
|
|
461
|
+
applyTransform(e) {
|
|
462
|
+
let t = this.getPointerPosition(e), n = t.x - this.pickupPosition.x, r = t.y - this.pickupPosition.y;
|
|
463
|
+
this.draggingElement.style.transform = this.getTransform(n, r);
|
|
464
|
+
}
|
|
465
|
+
getTransform(e, t) {
|
|
466
|
+
return `translate3d(${Math.round(e)}px, ${Math.round(t)}px, 0)`;
|
|
467
|
+
}
|
|
468
|
+
getSlottedTargetIndex(e) {
|
|
469
|
+
return e.composedPath().findIndex((e) => e instanceof Element && !!e.getAttribute("slot"));
|
|
470
|
+
}
|
|
471
|
+
getChildItems() {
|
|
472
|
+
let e = [];
|
|
473
|
+
for (let t of this.children) {
|
|
474
|
+
let n = t.getAttribute("slot");
|
|
475
|
+
(n === "dragging-item" || !n || !Number.isNaN(parseInt(n))) && e.push(t);
|
|
476
|
+
}
|
|
477
|
+
return e;
|
|
478
|
+
}
|
|
479
|
+
getSortChildrenBySlot() {
|
|
480
|
+
return this.getChildItems().filter((e) => e !== this.currentDraggingItem).sort((e, t) => {
|
|
481
|
+
let n = e.getAttribute("slot"), r = t.getAttribute("slot");
|
|
482
|
+
return parseInt(n || "") - parseInt(r || "");
|
|
483
|
+
});
|
|
484
|
+
}
|
|
485
|
+
getNearestScrollableParent(e = this) {
|
|
486
|
+
return e == null ? null : e.scrollHeight > e.clientHeight ? e : this.getNearestScrollableParent(e.parentNode);
|
|
487
|
+
}
|
|
488
|
+
static {
|
|
489
|
+
this.styles = o(O);
|
|
490
|
+
}
|
|
473
491
|
};
|
|
492
|
+
k([u(".dragging-item")], A.prototype, "draggingElement", void 0), k([u(".placeholder")], A.prototype, "placeholderElement", void 0), k([u(".c2-reorder-list-container")], A.prototype, "containerElement", void 0), k([d(".list-item")], A.prototype, "listItemElements", void 0), k([l({
|
|
493
|
+
type: Boolean,
|
|
494
|
+
reflect: !0
|
|
495
|
+
})], A.prototype, "editable", void 0), k([l({ type: Number })], A.prototype, "dragStartThreshold", void 0), k([l({ type: Boolean })], A.prototype, "autoScrollDisabled", void 0), k([f()], A.prototype, "placeholderSlotIndex", void 0), k([f()], A.prototype, "placeholderSize", void 0), k([c({ passive: !0 })], A.prototype, "handleMouseDown", null), A = k([s("c2-reorder-list")], A);
|
|
496
|
+
function j(e) {
|
|
497
|
+
let t = e.getBoundingClientRect();
|
|
498
|
+
return {
|
|
499
|
+
top: t.top,
|
|
500
|
+
right: t.right,
|
|
501
|
+
bottom: t.bottom,
|
|
502
|
+
left: t.left,
|
|
503
|
+
width: t.width,
|
|
504
|
+
height: t.height,
|
|
505
|
+
x: t.x,
|
|
506
|
+
y: t.y
|
|
507
|
+
};
|
|
508
|
+
}
|
|
509
|
+
//#endregion
|
|
510
|
+
export { A as ReorderList, j as getMutableClientRect };
|
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/reorder-list",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/reorder-list.js",
|
|
6
6
|
"exports": {
|
|
7
|
-
".":
|
|
7
|
+
".": {
|
|
8
|
+
"default": "./dist/reorder-list.js",
|
|
9
|
+
"types": "./types/src/reorder-list.d.ts"
|
|
10
|
+
},
|
|
11
|
+
"./custom-elements.json": "./custom-elements.json"
|
|
8
12
|
},
|
|
9
|
-
"types": "types/src/index.d.ts",
|
|
10
13
|
"files": [
|
|
11
14
|
"dist",
|
|
12
15
|
"types"
|
|
@@ -26,87 +29,31 @@
|
|
|
26
29
|
"url": "https://github.com/code2nguyen/web-components.git"
|
|
27
30
|
},
|
|
28
31
|
"scripts": {
|
|
29
|
-
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
|
30
|
-
"lint:eslint": "eslint 'src/**/*.ts'",
|
|
31
|
-
"lint:lit-analyzer": "lit-analyzer",
|
|
32
32
|
"dev": "vite",
|
|
33
|
-
"build": "
|
|
33
|
+
"build": "wireit",
|
|
34
|
+
"type-check": "wireit"
|
|
35
|
+
},
|
|
36
|
+
"wireit": {
|
|
37
|
+
"type-check": {
|
|
38
|
+
"dependencies": [
|
|
39
|
+
"../../core:build"
|
|
40
|
+
],
|
|
41
|
+
"command": "tsc -p tsconfig.lib.json --composite false"
|
|
42
|
+
},
|
|
43
|
+
"build": {
|
|
44
|
+
"dependencies": [
|
|
45
|
+
"type-check"
|
|
46
|
+
],
|
|
47
|
+
"command": "vite build"
|
|
48
|
+
}
|
|
34
49
|
},
|
|
35
50
|
"dependencies": {
|
|
36
|
-
"@c2n/
|
|
37
|
-
"@lit-labs/motion": "1.0
|
|
38
|
-
"lit": "
|
|
51
|
+
"@c2n/core": "0.0.6",
|
|
52
|
+
"@lit-labs/motion": "1.1.0",
|
|
53
|
+
"lit": "3.3.3"
|
|
39
54
|
},
|
|
40
55
|
"devDependencies": {
|
|
41
|
-
"@
|
|
42
|
-
"@typescript-eslint/parser": "5.33.1",
|
|
43
|
-
"eslint": "8.22.0",
|
|
44
|
-
"lit-analyzer": "1.2.1",
|
|
45
|
-
"prettier": "2.7.1",
|
|
46
|
-
"typescript": "4.7.4",
|
|
47
|
-
"vite": "3.0.8"
|
|
48
|
-
},
|
|
49
|
-
"prettier": {
|
|
50
|
-
"singleQuote": true,
|
|
51
|
-
"printWidth": 160,
|
|
52
|
-
"tabWidth": 2,
|
|
53
|
-
"semi": false
|
|
54
|
-
},
|
|
55
|
-
"eslintConfig": {
|
|
56
|
-
"root": true,
|
|
57
|
-
"extends": [
|
|
58
|
-
"eslint:recommended",
|
|
59
|
-
"plugin:@typescript-eslint/eslint-recommended",
|
|
60
|
-
"plugin:@typescript-eslint/recommended"
|
|
61
|
-
],
|
|
62
|
-
"parser": "@typescript-eslint/parser",
|
|
63
|
-
"parserOptions": {
|
|
64
|
-
"ecmaVersion": 2020,
|
|
65
|
-
"sourceType": "module"
|
|
66
|
-
},
|
|
67
|
-
"plugins": [
|
|
68
|
-
"@typescript-eslint"
|
|
69
|
-
],
|
|
70
|
-
"env": {
|
|
71
|
-
"browser": true
|
|
72
|
-
},
|
|
73
|
-
"rules": {
|
|
74
|
-
"no-prototype-builtins": "off",
|
|
75
|
-
"@typescript-eslint/ban-types": "off",
|
|
76
|
-
"@typescript-eslint/explicit-function-return-type": "off",
|
|
77
|
-
"@typescript-eslint/explicit-module-boundary-types": "off",
|
|
78
|
-
"@typescript-eslint/no-explicit-any": "error",
|
|
79
|
-
"@typescript-eslint/no-empty-function": "off",
|
|
80
|
-
"@typescript-eslint/no-non-null-assertion": "off",
|
|
81
|
-
"@typescript-eslint/no-unused-vars": [
|
|
82
|
-
"warn",
|
|
83
|
-
{
|
|
84
|
-
"argsIgnorePattern": "^_"
|
|
85
|
-
}
|
|
86
|
-
]
|
|
87
|
-
},
|
|
88
|
-
"overrides": [
|
|
89
|
-
{
|
|
90
|
-
"files": [
|
|
91
|
-
"rollup.config.js",
|
|
92
|
-
"web-test-runner.config.js"
|
|
93
|
-
],
|
|
94
|
-
"env": {
|
|
95
|
-
"node": true
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"files": [
|
|
100
|
-
"*_test.ts",
|
|
101
|
-
"**/custom_typings/*.ts",
|
|
102
|
-
"packages/labs/ssr/src/test/integration/tests/**",
|
|
103
|
-
"packages/labs/ssr/src/lib/util/parse5-utils.ts"
|
|
104
|
-
],
|
|
105
|
-
"rules": {
|
|
106
|
-
"@typescript-eslint/no-explicit-any": "off"
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
]
|
|
56
|
+
"@c2n/config": "*"
|
|
110
57
|
},
|
|
111
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
|
|
112
59
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, PropertyValueMap, TemplateResult } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValueMap, type TemplateResult } from 'lit';
|
|
2
2
|
export interface Point {
|
|
3
3
|
x: number;
|
|
4
4
|
y: number;
|
|
@@ -29,13 +29,13 @@ export declare class ReorderList extends LitElement {
|
|
|
29
29
|
private hasStartedDragging;
|
|
30
30
|
private scrollingTimer;
|
|
31
31
|
private cacheMouseEvent;
|
|
32
|
-
/** Cached positions of scrollable parent elements. */
|
|
33
32
|
connectedCallback(): void;
|
|
34
33
|
disconnectedCallback(): void;
|
|
35
|
-
renderSlots(): TemplateResult
|
|
34
|
+
renderSlots(): TemplateResult[];
|
|
36
35
|
private createPlaceHolder;
|
|
37
36
|
render(): TemplateResult<1>;
|
|
38
37
|
private handleMouseDown;
|
|
38
|
+
private isFixedItem;
|
|
39
39
|
handleMouseMove: (event: MouseEvent) => Promise<void>;
|
|
40
40
|
handleScroll: () => void;
|
|
41
41
|
private getItemIndexFromPointerPosition;
|
|
@@ -64,4 +64,5 @@ declare global {
|
|
|
64
64
|
'c2-reorder-list': ReorderList;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
+
export declare function getMutableClientRect(element: Element): DOMRect;
|
|
67
68
|
//# sourceMappingURL=reorder-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reorder-list.d.ts","sourceRoot":"","sources":["../../src/reorder-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAa,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"reorder-list.d.ts","sourceRoot":"","sources":["../../src/reorder-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAA;AAM7F,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,qBACa,WAAY,SAAQ,UAAU;IAChB,SAAS,CAAC,eAAe,EAAG,WAAW,CAAA;IACzC,SAAS,CAAC,kBAAkB,EAAG,WAAW,CAAA;IAC5B,SAAS,CAAC,gBAAgB,EAAG,WAAW,CAAA;IACrD,SAAS,CAAC,gBAAgB,EAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEnC,QAAQ,UAAQ;IAChC,kBAAkB,SAAK;IACtB,kBAAkB,UAAQ;IAGvD,OAAO,CAAC,oBAAoB,CAAK;IAGjC,OAAO,CAAC,eAAe,CAAkC;IAEzD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,sBAAsB,CAAuB;IACrD,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,oBAAoB,CAAiC;IAC7D,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,aAAa,CAA6C;IAElE,OAAO,CAAC,mBAAmB,CAAuB;IAClD,OAAO,CAAC,wBAAwB,CAAK;IAErC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,eAAe,CAAgC;IAE9C,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAQrC,WAAW;IAiCX,OAAO,CAAC,iBAAiB;IAQhB,MAAM;IAWf,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,WAAW;IAInB,eAAe,GAAU,OAAO,UAAU,mBA+CzC;IAED,YAAY,aAWX;IAED,OAAO,CAAC,+BAA+B;IAavC,aAAa,aAkBZ;IAED,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,gBAAgB;cAOC,YAAY;cAKlB,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IASvG,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,mBAAmB,CAQ1B;IAED,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,0BAA0B;IAWlC,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAY9D"}
|
package/types/src/index.d.ts
DELETED
package/types/src/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}
|