directix 1.0.0 → 1.2.0
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/README.md +294 -25
- package/dist/index.cjs +4077 -214
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1627 -54
- package/dist/index.iife.js +4076 -340
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +2 -2
- package/dist/index.mjs +4078 -215
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -11
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* directix v1.
|
|
2
|
+
* directix v1.2.0
|
|
3
3
|
* A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
|
|
4
4
|
* (c) 2021-present saqqdy <https://github.com/saqqdy>
|
|
5
5
|
* Released under the MIT License.
|
|
@@ -11,6 +11,7 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
|
11
11
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
12
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
13
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
+
var __pow = Math.pow;
|
|
14
15
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
16
|
var __spreadValues = (a, b) => {
|
|
16
17
|
for (var prop in b || (b = {}))
|
|
@@ -57,70 +58,12 @@ var __async = (__this, __arguments, generator) => {
|
|
|
57
58
|
});
|
|
58
59
|
};
|
|
59
60
|
/*!
|
|
60
|
-
* directix v1.
|
|
61
|
+
* directix v1.2.0
|
|
61
62
|
* A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
|
|
62
63
|
* (c) 2021-present saqqdy <https://github.com/saqqdy>
|
|
63
64
|
* Released under the MIT License.
|
|
64
65
|
*/
|
|
65
66
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
66
|
-
let _vueVersion = null;
|
|
67
|
-
function getVueVersion() {
|
|
68
|
-
var _a, _b;
|
|
69
|
-
if (_vueVersion !== null) return _vueVersion;
|
|
70
|
-
try {
|
|
71
|
-
const vue = require("vue");
|
|
72
|
-
if ((_a = vue == null ? void 0 : vue.version) == null ? void 0 : _a.startsWith("2")) {
|
|
73
|
-
_vueVersion = 2;
|
|
74
|
-
} else if ((_b = vue == null ? void 0 : vue.version) == null ? void 0 : _b.startsWith("3")) {
|
|
75
|
-
_vueVersion = 3;
|
|
76
|
-
}
|
|
77
|
-
} catch (e) {
|
|
78
|
-
}
|
|
79
|
-
if (_vueVersion === null) {
|
|
80
|
-
if (typeof window !== "undefined") {
|
|
81
|
-
console.warn(
|
|
82
|
-
"[Directix] Unable to detect Vue version, defaulting to Vue 3. Please ensure Vue is installed correctly."
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
_vueVersion = 3;
|
|
86
|
-
}
|
|
87
|
-
return _vueVersion;
|
|
88
|
-
}
|
|
89
|
-
const isVue2 = () => getVueVersion() === 2;
|
|
90
|
-
const isVue3 = () => getVueVersion() === 3;
|
|
91
|
-
const isBrowser = () => {
|
|
92
|
-
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
93
|
-
};
|
|
94
|
-
const isSSR = () => !isBrowser();
|
|
95
|
-
const supportsPassive = () => {
|
|
96
|
-
if (!isBrowser()) return false;
|
|
97
|
-
let supports = false;
|
|
98
|
-
try {
|
|
99
|
-
const options = {
|
|
100
|
-
get passive() {
|
|
101
|
-
supports = true;
|
|
102
|
-
return false;
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
window.addEventListener("test", null, options);
|
|
106
|
-
window.removeEventListener("test", null, options);
|
|
107
|
-
} catch (e) {
|
|
108
|
-
supports = false;
|
|
109
|
-
}
|
|
110
|
-
return supports;
|
|
111
|
-
};
|
|
112
|
-
const supportsIntersectionObserver = () => {
|
|
113
|
-
return isBrowser() && "IntersectionObserver" in window;
|
|
114
|
-
};
|
|
115
|
-
const supportsResizeObserver = () => {
|
|
116
|
-
return isBrowser() && "ResizeObserver" in window;
|
|
117
|
-
};
|
|
118
|
-
const supportsClipboard = () => {
|
|
119
|
-
return isBrowser() && "clipboard" in navigator;
|
|
120
|
-
};
|
|
121
|
-
const supportsMutationObserver = () => {
|
|
122
|
-
return isBrowser() && "MutationObserver" in window;
|
|
123
|
-
};
|
|
124
67
|
function createVue2Directive(hooks) {
|
|
125
68
|
const directive = {
|
|
126
69
|
bind(el, binding, vnode) {
|
|
@@ -249,6 +192,145 @@ function addCleanup(el, fn) {
|
|
|
249
192
|
state.cleanup.push(fn);
|
|
250
193
|
}
|
|
251
194
|
}
|
|
195
|
+
let _vueVersion = null, _isVue2 = null, _isVue27 = null, _isVue3 = null;
|
|
196
|
+
function parseVersion(version) {
|
|
197
|
+
if (version.startsWith("2.7")) return 2.7;
|
|
198
|
+
if (version.startsWith("2")) return 2;
|
|
199
|
+
if (version.startsWith("3")) return 3;
|
|
200
|
+
return null;
|
|
201
|
+
}
|
|
202
|
+
function getVueVersion() {
|
|
203
|
+
var _a, _b;
|
|
204
|
+
if (_vueVersion !== null) return _vueVersion;
|
|
205
|
+
if (typeof process !== "undefined") {
|
|
206
|
+
const envVersion = process.env.DIRECTIX_VUE_VERSION;
|
|
207
|
+
if (envVersion === "2.7") {
|
|
208
|
+
_vueVersion = 2.7;
|
|
209
|
+
return _vueVersion;
|
|
210
|
+
}
|
|
211
|
+
if (envVersion === "2") {
|
|
212
|
+
_vueVersion = 2;
|
|
213
|
+
return _vueVersion;
|
|
214
|
+
}
|
|
215
|
+
if (envVersion === "3") {
|
|
216
|
+
_vueVersion = 3;
|
|
217
|
+
return _vueVersion;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
try {
|
|
221
|
+
const vue = require("vue");
|
|
222
|
+
const version = parseVersion(vue == null ? void 0 : vue.version);
|
|
223
|
+
if (version !== null) {
|
|
224
|
+
_vueVersion = version;
|
|
225
|
+
return _vueVersion;
|
|
226
|
+
}
|
|
227
|
+
} catch (e) {
|
|
228
|
+
}
|
|
229
|
+
if (typeof window !== "undefined") {
|
|
230
|
+
const win = window;
|
|
231
|
+
const vue = win.Vue;
|
|
232
|
+
if (vue == null ? void 0 : vue.version) {
|
|
233
|
+
const version = parseVersion(vue.version);
|
|
234
|
+
if (version !== null) {
|
|
235
|
+
_vueVersion = version;
|
|
236
|
+
return _vueVersion;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
if (typeof (vue == null ? void 0 : vue.observable) === "function") {
|
|
240
|
+
_vueVersion = 2;
|
|
241
|
+
return _vueVersion;
|
|
242
|
+
}
|
|
243
|
+
if (typeof (vue == null ? void 0 : vue.createApp) === "function" && typeof (vue == null ? void 0 : vue.observable) !== "function") {
|
|
244
|
+
_vueVersion = 3;
|
|
245
|
+
return _vueVersion;
|
|
246
|
+
}
|
|
247
|
+
const devtools = win.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
|
248
|
+
if ((_a = devtools == null ? void 0 : devtools.Vue) == null ? void 0 : _a.version) {
|
|
249
|
+
const version = parseVersion(devtools.Vue.version);
|
|
250
|
+
if (version !== null) {
|
|
251
|
+
_vueVersion = version;
|
|
252
|
+
return _vueVersion;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
if ((_b = devtools == null ? void 0 : devtools.apps) == null ? void 0 : _b.length) {
|
|
256
|
+
_vueVersion = 3;
|
|
257
|
+
return _vueVersion;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
if (_vueVersion === null) {
|
|
261
|
+
if (typeof window !== "undefined") {
|
|
262
|
+
console.warn(
|
|
263
|
+
"[Directix] Unable to detect Vue version, defaulting to Vue 3. Set DIRECTIX_VUE_VERSION=2 or call setVueVersion(2) if using Vue 2."
|
|
264
|
+
);
|
|
265
|
+
}
|
|
266
|
+
_vueVersion = 3;
|
|
267
|
+
}
|
|
268
|
+
return _vueVersion;
|
|
269
|
+
}
|
|
270
|
+
function setVueVersion(version) {
|
|
271
|
+
_vueVersion = version;
|
|
272
|
+
_isVue2 = version === 2 || version === 2.7;
|
|
273
|
+
_isVue27 = version === 2.7;
|
|
274
|
+
_isVue3 = version === 3;
|
|
275
|
+
}
|
|
276
|
+
function resetVueVersion() {
|
|
277
|
+
_vueVersion = null;
|
|
278
|
+
_isVue2 = null;
|
|
279
|
+
_isVue27 = null;
|
|
280
|
+
_isVue3 = null;
|
|
281
|
+
}
|
|
282
|
+
function isVue2() {
|
|
283
|
+
if (_isVue2 === null) {
|
|
284
|
+
const version = getVueVersion();
|
|
285
|
+
_isVue2 = version === 2 || version === 2.7;
|
|
286
|
+
}
|
|
287
|
+
return _isVue2;
|
|
288
|
+
}
|
|
289
|
+
function isVue27() {
|
|
290
|
+
if (_isVue27 === null) {
|
|
291
|
+
_isVue27 = getVueVersion() === 2.7;
|
|
292
|
+
}
|
|
293
|
+
return _isVue27;
|
|
294
|
+
}
|
|
295
|
+
function isVue3() {
|
|
296
|
+
if (_isVue3 === null) {
|
|
297
|
+
_isVue3 = getVueVersion() === 3;
|
|
298
|
+
}
|
|
299
|
+
return _isVue3;
|
|
300
|
+
}
|
|
301
|
+
const isBrowser = () => {
|
|
302
|
+
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
303
|
+
};
|
|
304
|
+
const isSSR = () => !isBrowser();
|
|
305
|
+
const supportsPassive = () => {
|
|
306
|
+
if (!isBrowser()) return false;
|
|
307
|
+
let supports = false;
|
|
308
|
+
try {
|
|
309
|
+
const options = {
|
|
310
|
+
get passive() {
|
|
311
|
+
supports = true;
|
|
312
|
+
return false;
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
window.addEventListener("test", null, options);
|
|
316
|
+
window.removeEventListener("test", null, options);
|
|
317
|
+
} catch (e) {
|
|
318
|
+
supports = false;
|
|
319
|
+
}
|
|
320
|
+
return supports;
|
|
321
|
+
};
|
|
322
|
+
const supportsIntersectionObserver = () => {
|
|
323
|
+
return isBrowser() && "IntersectionObserver" in window;
|
|
324
|
+
};
|
|
325
|
+
const supportsResizeObserver = () => {
|
|
326
|
+
return isBrowser() && "ResizeObserver" in window;
|
|
327
|
+
};
|
|
328
|
+
const supportsClipboard = () => {
|
|
329
|
+
return isBrowser() && "clipboard" in navigator;
|
|
330
|
+
};
|
|
331
|
+
const supportsMutationObserver = () => {
|
|
332
|
+
return isBrowser() && "MutationObserver" in window;
|
|
333
|
+
};
|
|
252
334
|
function defineDirective(definition) {
|
|
253
335
|
var _b;
|
|
254
336
|
const _a = definition, { name, version, ssr, defaults } = _a, hooks = __objRest(_a, ["name", "version", "ssr", "defaults"]);
|
|
@@ -262,19 +344,45 @@ function defineDirective(definition) {
|
|
|
262
344
|
}
|
|
263
345
|
const wrappedHooks = {
|
|
264
346
|
mounted: hooks.mounted ? (el, binding, vnode) => {
|
|
265
|
-
|
|
266
|
-
hooks.mounted(el, mergedBinding, vnode);
|
|
347
|
+
hooks.mounted(el, applyDefaults(binding, defaults), vnode);
|
|
267
348
|
} : void 0,
|
|
268
349
|
updated: hooks.updated ? (el, binding, vnode, prevBinding, prevVnode) => {
|
|
269
|
-
|
|
270
|
-
hooks.updated(el, mergedBinding, vnode, prevBinding, prevVnode);
|
|
350
|
+
hooks.updated(el, applyDefaults(binding, defaults), vnode, prevBinding, prevVnode);
|
|
271
351
|
} : void 0,
|
|
272
352
|
unmounted: hooks.unmounted
|
|
273
353
|
};
|
|
274
|
-
|
|
275
|
-
|
|
354
|
+
return createLazyDirective(wrappedHooks);
|
|
355
|
+
}
|
|
356
|
+
function createLazyDirective(hooks) {
|
|
357
|
+
let cachedDirective = null;
|
|
358
|
+
function getDirective() {
|
|
359
|
+
if (!cachedDirective) {
|
|
360
|
+
cachedDirective = getVueVersion() === 2 ? createVue2Directive(hooks) : createVue3Directive(hooks);
|
|
361
|
+
}
|
|
362
|
+
return cachedDirective;
|
|
363
|
+
}
|
|
364
|
+
function createHook(hookName) {
|
|
365
|
+
return function(el, binding, vnode, prevVnode) {
|
|
366
|
+
var _a, _b;
|
|
367
|
+
(_b = (_a = getDirective())[hookName]) == null ? void 0 : _b.call(_a, el, binding, vnode, prevVnode);
|
|
368
|
+
};
|
|
276
369
|
}
|
|
277
|
-
return
|
|
370
|
+
return {
|
|
371
|
+
// Vue 2 hooks
|
|
372
|
+
bind: createHook("bind"),
|
|
373
|
+
inserted: createHook("inserted"),
|
|
374
|
+
update: createHook("update"),
|
|
375
|
+
componentUpdated: createHook("componentUpdated"),
|
|
376
|
+
unbind: createHook("unbind"),
|
|
377
|
+
// Vue 3 hooks
|
|
378
|
+
created: createHook("created"),
|
|
379
|
+
beforeMount: createHook("beforeMount"),
|
|
380
|
+
mounted: createHook("mounted"),
|
|
381
|
+
beforeUpdate: createHook("beforeUpdate"),
|
|
382
|
+
updated: createHook("updated"),
|
|
383
|
+
beforeUnmount: createHook("beforeUnmount"),
|
|
384
|
+
unmounted: createHook("unmounted")
|
|
385
|
+
};
|
|
278
386
|
}
|
|
279
387
|
function applyDefaults(binding, defaults) {
|
|
280
388
|
if (!defaults) return binding;
|
|
@@ -303,6 +411,120 @@ function defineDirectiveGroup(name, directives) {
|
|
|
303
411
|
}
|
|
304
412
|
};
|
|
305
413
|
}
|
|
414
|
+
function setupTextTransformInput(el, options, transformFn) {
|
|
415
|
+
if (!options.onInput) {
|
|
416
|
+
return () => {
|
|
417
|
+
};
|
|
418
|
+
}
|
|
419
|
+
const handler = () => {
|
|
420
|
+
const start = el.selectionStart;
|
|
421
|
+
const end = el.selectionEnd;
|
|
422
|
+
const originalValue = el.value;
|
|
423
|
+
const transformed = transformFn(originalValue);
|
|
424
|
+
if (originalValue !== transformed) {
|
|
425
|
+
el.value = transformed;
|
|
426
|
+
if (start !== null && end !== null) {
|
|
427
|
+
el.setSelectionRange(start, end);
|
|
428
|
+
}
|
|
429
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
430
|
+
}
|
|
431
|
+
};
|
|
432
|
+
el.addEventListener("input", handler);
|
|
433
|
+
el.value = transformFn(el.value);
|
|
434
|
+
return () => {
|
|
435
|
+
el.removeEventListener("input", handler);
|
|
436
|
+
};
|
|
437
|
+
}
|
|
438
|
+
function transformTextContent(el, transformFn) {
|
|
439
|
+
const text = el.textContent || "";
|
|
440
|
+
el.textContent = transformFn(text);
|
|
441
|
+
}
|
|
442
|
+
function isInputElement(el) {
|
|
443
|
+
return el.tagName === "INPUT" || el.tagName === "TEXTAREA";
|
|
444
|
+
}
|
|
445
|
+
const DEFAULT_KEEP_LOWER = [
|
|
446
|
+
"a",
|
|
447
|
+
"an",
|
|
448
|
+
"the",
|
|
449
|
+
"and",
|
|
450
|
+
"but",
|
|
451
|
+
"or",
|
|
452
|
+
"for",
|
|
453
|
+
"nor",
|
|
454
|
+
"on",
|
|
455
|
+
"at",
|
|
456
|
+
"to",
|
|
457
|
+
"from",
|
|
458
|
+
"by",
|
|
459
|
+
"in",
|
|
460
|
+
"of",
|
|
461
|
+
"with",
|
|
462
|
+
"as"
|
|
463
|
+
];
|
|
464
|
+
function capitalizeText(text, options) {
|
|
465
|
+
if (!text) return text;
|
|
466
|
+
const { every = true, keepLower = DEFAULT_KEEP_LOWER } = options;
|
|
467
|
+
if (every) {
|
|
468
|
+
const words = text.toLowerCase().split(/\s+/);
|
|
469
|
+
return words.map((word, index) => {
|
|
470
|
+
if (index === 0) {
|
|
471
|
+
return capitalizeWord(word);
|
|
472
|
+
}
|
|
473
|
+
if (keepLower.includes(word.toLowerCase())) {
|
|
474
|
+
return word.toLowerCase();
|
|
475
|
+
}
|
|
476
|
+
return capitalizeWord(word);
|
|
477
|
+
}).join(" ");
|
|
478
|
+
} else {
|
|
479
|
+
return capitalizeWord(text);
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
function capitalizeWord(word) {
|
|
483
|
+
if (!word) return word;
|
|
484
|
+
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
|
|
485
|
+
}
|
|
486
|
+
function normalizeOptions$t(binding) {
|
|
487
|
+
var _a, _b, _c;
|
|
488
|
+
if (binding === void 0 || binding === true) {
|
|
489
|
+
return { every: true, onInput: true };
|
|
490
|
+
}
|
|
491
|
+
if (binding === false) {
|
|
492
|
+
return { every: false, onInput: false };
|
|
493
|
+
}
|
|
494
|
+
return {
|
|
495
|
+
every: (_a = binding.every) != null ? _a : true,
|
|
496
|
+
keepLower: (_b = binding.keepLower) != null ? _b : DEFAULT_KEEP_LOWER,
|
|
497
|
+
onInput: (_c = binding.onInput) != null ? _c : true
|
|
498
|
+
};
|
|
499
|
+
}
|
|
500
|
+
const vCapitalcase = defineDirective({
|
|
501
|
+
name: "capitalcase",
|
|
502
|
+
ssr: true,
|
|
503
|
+
mounted(el, binding) {
|
|
504
|
+
const options = normalizeOptions$t(binding.value);
|
|
505
|
+
if (isInputElement(el)) {
|
|
506
|
+
const cleanup2 = setupTextTransformInput(el, options, (text) => capitalizeText(text, options));
|
|
507
|
+
el.__capitalcaseCleanup = cleanup2;
|
|
508
|
+
} else {
|
|
509
|
+
transformTextContent(el, (text) => capitalizeText(text, options));
|
|
510
|
+
}
|
|
511
|
+
},
|
|
512
|
+
updated(el, binding) {
|
|
513
|
+
const options = normalizeOptions$t(binding.value);
|
|
514
|
+
if (isInputElement(el)) {
|
|
515
|
+
if (options.onInput) {
|
|
516
|
+
el.value = capitalizeText(el.value, options);
|
|
517
|
+
}
|
|
518
|
+
} else {
|
|
519
|
+
transformTextContent(el, (text) => capitalizeText(text, options));
|
|
520
|
+
}
|
|
521
|
+
},
|
|
522
|
+
unmounted(el) {
|
|
523
|
+
const cleanup2 = el.__capitalcaseCleanup;
|
|
524
|
+
cleanup2 == null ? void 0 : cleanup2();
|
|
525
|
+
delete el.__capitalcaseCleanup;
|
|
526
|
+
}
|
|
527
|
+
});
|
|
306
528
|
function isElement(value) {
|
|
307
529
|
return value instanceof Element;
|
|
308
530
|
}
|
|
@@ -314,17 +536,29 @@ function getElement(target) {
|
|
|
314
536
|
}
|
|
315
537
|
return isElement(target) ? target : null;
|
|
316
538
|
}
|
|
539
|
+
function getScrollParent(el) {
|
|
540
|
+
if (!isBrowser()) return window;
|
|
541
|
+
let parent = el.parentElement;
|
|
542
|
+
while (parent) {
|
|
543
|
+
const { overflow, overflowX, overflowY } = getComputedStyle(parent);
|
|
544
|
+
if (/(auto|scroll)/.test(overflow + overflowX + overflowY)) {
|
|
545
|
+
return parent;
|
|
546
|
+
}
|
|
547
|
+
parent = parent.parentElement;
|
|
548
|
+
}
|
|
549
|
+
return window;
|
|
550
|
+
}
|
|
317
551
|
function on(target, event, handler, options = false) {
|
|
318
552
|
if (!isBrowser()) return;
|
|
319
|
-
const opts = normalizeOptions$
|
|
553
|
+
const opts = normalizeOptions$s(options);
|
|
320
554
|
target.addEventListener(event, handler, opts);
|
|
321
555
|
}
|
|
322
556
|
function off(target, event, handler, options = false) {
|
|
323
557
|
if (!isBrowser()) return;
|
|
324
|
-
const opts = normalizeOptions$
|
|
558
|
+
const opts = normalizeOptions$s(options);
|
|
325
559
|
target.removeEventListener(event, handler, opts);
|
|
326
560
|
}
|
|
327
|
-
function normalizeOptions$
|
|
561
|
+
function normalizeOptions$s(options) {
|
|
328
562
|
if (typeof options === "boolean") {
|
|
329
563
|
return options;
|
|
330
564
|
}
|
|
@@ -334,11 +568,27 @@ function normalizeOptions$5(options) {
|
|
|
334
568
|
}
|
|
335
569
|
return capture;
|
|
336
570
|
}
|
|
571
|
+
function getEventPosition(e) {
|
|
572
|
+
let clientX = 0, clientY = 0;
|
|
573
|
+
if ("touches" in e && e.touches.length > 0) {
|
|
574
|
+
clientX = e.touches[0].clientX;
|
|
575
|
+
clientY = e.touches[0].clientY;
|
|
576
|
+
} else if ("clientX" in e) {
|
|
577
|
+
clientX = e.clientX;
|
|
578
|
+
clientY = e.clientY;
|
|
579
|
+
}
|
|
580
|
+
return {
|
|
581
|
+
x: clientX,
|
|
582
|
+
y: clientY,
|
|
583
|
+
clientX,
|
|
584
|
+
clientY
|
|
585
|
+
};
|
|
586
|
+
}
|
|
337
587
|
function isString(value) {
|
|
338
588
|
return typeof value === "string";
|
|
339
589
|
}
|
|
340
590
|
function isNumber(value) {
|
|
341
|
-
return typeof value === "number" && !
|
|
591
|
+
return typeof value === "number" && !isNaN(value);
|
|
342
592
|
}
|
|
343
593
|
function isBoolean(value) {
|
|
344
594
|
return typeof value === "boolean";
|
|
@@ -509,13 +759,13 @@ function throttle(func, wait = 300, options = {}) {
|
|
|
509
759
|
function parseTime(arg) {
|
|
510
760
|
if (!arg) return null;
|
|
511
761
|
if (arg.endsWith("ms")) {
|
|
512
|
-
return
|
|
762
|
+
return parseInt(arg, 10);
|
|
513
763
|
}
|
|
514
764
|
if (arg.endsWith("s")) {
|
|
515
|
-
return
|
|
765
|
+
return parseFloat(arg) * 1e3;
|
|
516
766
|
}
|
|
517
|
-
const num =
|
|
518
|
-
return
|
|
767
|
+
const num = parseInt(arg, 10);
|
|
768
|
+
return isNaN(num) ? null : num;
|
|
519
769
|
}
|
|
520
770
|
function generateId(prefix = "") {
|
|
521
771
|
return `${prefix}${Date.now().toString(36)}${Math.random().toString(36).slice(2, 9)}`;
|
|
@@ -531,7 +781,7 @@ const vClickOutside = defineDirective({
|
|
|
531
781
|
prevent: false
|
|
532
782
|
},
|
|
533
783
|
mounted(el, binding) {
|
|
534
|
-
const options = normalizeOptions$
|
|
784
|
+
const options = normalizeOptions$r(binding.value);
|
|
535
785
|
if (options.disabled) return;
|
|
536
786
|
const state = {
|
|
537
787
|
options,
|
|
@@ -566,7 +816,7 @@ const vClickOutside = defineDirective({
|
|
|
566
816
|
const state = el.__clickOutside;
|
|
567
817
|
if (!state) return;
|
|
568
818
|
const oldOptions = state.options;
|
|
569
|
-
const newOptions = normalizeOptions$
|
|
819
|
+
const newOptions = normalizeOptions$r(binding.value);
|
|
570
820
|
if (oldOptions.disabled !== newOptions.disabled) {
|
|
571
821
|
if (newOptions.disabled) {
|
|
572
822
|
state.handlers.forEach((handler, eventType) => {
|
|
@@ -603,7 +853,7 @@ const vClickOutside = defineDirective({
|
|
|
603
853
|
delete el.__clickOutside;
|
|
604
854
|
}
|
|
605
855
|
});
|
|
606
|
-
function normalizeOptions$
|
|
856
|
+
function normalizeOptions$r(binding) {
|
|
607
857
|
var _a, _b, _c, _d, _e;
|
|
608
858
|
if (typeof binding === "function") {
|
|
609
859
|
return {
|
|
@@ -680,7 +930,7 @@ const vCopy = defineDirective({
|
|
|
680
930
|
name: "copy",
|
|
681
931
|
ssr: false,
|
|
682
932
|
mounted(el, binding) {
|
|
683
|
-
const options = normalizeOptions$
|
|
933
|
+
const options = normalizeOptions$q(binding.value);
|
|
684
934
|
if (options.disabled) return;
|
|
685
935
|
if (options.title) {
|
|
686
936
|
el.setAttribute("title", options.title);
|
|
@@ -716,7 +966,7 @@ const vCopy = defineDirective({
|
|
|
716
966
|
updated(el, binding) {
|
|
717
967
|
const state = el.__copy;
|
|
718
968
|
if (!state) return;
|
|
719
|
-
state.options = normalizeOptions$
|
|
969
|
+
state.options = normalizeOptions$q(binding.value);
|
|
720
970
|
if (state.options.title) {
|
|
721
971
|
el.setAttribute("title", state.options.title);
|
|
722
972
|
}
|
|
@@ -728,23 +978,66 @@ const vCopy = defineDirective({
|
|
|
728
978
|
delete el.__copy;
|
|
729
979
|
}
|
|
730
980
|
});
|
|
731
|
-
function normalizeOptions$
|
|
981
|
+
function normalizeOptions$q(binding) {
|
|
732
982
|
if (typeof binding === "string") {
|
|
733
983
|
return { value: binding };
|
|
734
984
|
}
|
|
735
985
|
return binding;
|
|
736
986
|
}
|
|
987
|
+
const EVENT_MODIFIERS = [
|
|
988
|
+
"click",
|
|
989
|
+
"input",
|
|
990
|
+
"change",
|
|
991
|
+
"submit",
|
|
992
|
+
"scroll",
|
|
993
|
+
"resize",
|
|
994
|
+
"mouseenter",
|
|
995
|
+
"mouseleave",
|
|
996
|
+
"mousemove",
|
|
997
|
+
"mousedown",
|
|
998
|
+
"mouseup",
|
|
999
|
+
"keydown",
|
|
1000
|
+
"keyup",
|
|
1001
|
+
"focus",
|
|
1002
|
+
"blur",
|
|
1003
|
+
"touchstart",
|
|
1004
|
+
"touchmove",
|
|
1005
|
+
"touchend"
|
|
1006
|
+
];
|
|
1007
|
+
function getEventTypeFromModifiers(modifiers) {
|
|
1008
|
+
for (const modifier of EVENT_MODIFIERS) {
|
|
1009
|
+
if (modifiers[modifier]) {
|
|
1010
|
+
return modifier;
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
return null;
|
|
1014
|
+
}
|
|
1015
|
+
function getDefaultEventType(el) {
|
|
1016
|
+
const tagName = el.tagName.toLowerCase();
|
|
1017
|
+
if (tagName === "input" || tagName === "textarea") {
|
|
1018
|
+
return "input";
|
|
1019
|
+
}
|
|
1020
|
+
return "click";
|
|
1021
|
+
}
|
|
1022
|
+
function normalizeOptions$p(binding, directiveBinding) {
|
|
1023
|
+
const wait = parseTime(directiveBinding.arg) || 300;
|
|
1024
|
+
if (typeof binding === "function") {
|
|
1025
|
+
return { handler: binding, wait };
|
|
1026
|
+
}
|
|
1027
|
+
return __spreadProps(__spreadValues({}, binding), { wait: binding.wait || wait });
|
|
1028
|
+
}
|
|
737
1029
|
const vDebounce = defineDirective({
|
|
738
1030
|
name: "debounce",
|
|
739
|
-
ssr:
|
|
1031
|
+
ssr: true,
|
|
1032
|
+
// SSR safe - event binding is skipped on server
|
|
740
1033
|
defaults: {
|
|
741
1034
|
wait: 300,
|
|
742
1035
|
leading: false,
|
|
743
1036
|
trailing: true
|
|
744
1037
|
},
|
|
745
1038
|
mounted(el, binding) {
|
|
746
|
-
const options = normalizeOptions$
|
|
747
|
-
const eventType = getEventTypeFromModifiers
|
|
1039
|
+
const options = normalizeOptions$p(binding.value, binding);
|
|
1040
|
+
const eventType = getEventTypeFromModifiers(binding.modifiers) || getDefaultEventType(el);
|
|
748
1041
|
const debouncedFn = debounce(options.handler, options.wait, {
|
|
749
1042
|
leading: options.leading,
|
|
750
1043
|
trailing: options.trailing
|
|
@@ -759,7 +1052,7 @@ const vDebounce = defineDirective({
|
|
|
759
1052
|
updated(el, binding) {
|
|
760
1053
|
const state = el.__debounce;
|
|
761
1054
|
if (!state) return;
|
|
762
|
-
const newOptions = normalizeOptions$
|
|
1055
|
+
const newOptions = normalizeOptions$p(binding.value, binding);
|
|
763
1056
|
if (newOptions.wait !== state.options.wait || newOptions.leading !== state.options.leading || newOptions.trailing !== state.options.trailing) {
|
|
764
1057
|
state.debouncedFn.cancel();
|
|
765
1058
|
const debouncedFn = debounce(newOptions.handler, newOptions.wait, {
|
|
@@ -785,141 +1078,183 @@ const vDebounce = defineDirective({
|
|
|
785
1078
|
delete el.__debounce;
|
|
786
1079
|
}
|
|
787
1080
|
});
|
|
788
|
-
function
|
|
789
|
-
|
|
790
|
-
if (
|
|
791
|
-
|
|
1081
|
+
function getBoundary(_el, boundary) {
|
|
1082
|
+
var _a, _b;
|
|
1083
|
+
if (!boundary) return null;
|
|
1084
|
+
if (typeof boundary === "function") {
|
|
1085
|
+
const boundaryEl = boundary();
|
|
1086
|
+
return (_a = boundaryEl == null ? void 0 : boundaryEl.getBoundingClientRect()) != null ? _a : null;
|
|
792
1087
|
}
|
|
793
|
-
|
|
1088
|
+
if (typeof boundary === "string") {
|
|
1089
|
+
const boundaryEl = document.querySelector(boundary);
|
|
1090
|
+
return (_b = boundaryEl == null ? void 0 : boundaryEl.getBoundingClientRect()) != null ? _b : null;
|
|
1091
|
+
}
|
|
1092
|
+
return boundary.getBoundingClientRect();
|
|
794
1093
|
}
|
|
795
|
-
function
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
return
|
|
1094
|
+
function getClientCoords(e) {
|
|
1095
|
+
if (e.type.startsWith("touch")) {
|
|
1096
|
+
const touch = e.touches[0];
|
|
1097
|
+
return { clientX: touch.clientX, clientY: touch.clientY };
|
|
799
1098
|
}
|
|
800
|
-
|
|
1099
|
+
const mouseEvent = e;
|
|
1100
|
+
return { clientX: mouseEvent.clientX, clientY: mouseEvent.clientY };
|
|
801
1101
|
}
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
"submit",
|
|
807
|
-
"scroll",
|
|
808
|
-
"resize",
|
|
809
|
-
"mouseenter",
|
|
810
|
-
"mouseleave",
|
|
811
|
-
"mousemove",
|
|
812
|
-
"mousedown",
|
|
813
|
-
"mouseup",
|
|
814
|
-
"keydown",
|
|
815
|
-
"keyup",
|
|
816
|
-
"focus",
|
|
817
|
-
"blur",
|
|
818
|
-
"touchstart",
|
|
819
|
-
"touchmove",
|
|
820
|
-
"touchend"
|
|
821
|
-
];
|
|
822
|
-
function getEventTypeFromModifiers$1(modifiers) {
|
|
823
|
-
for (const modifier of EVENT_MODIFIERS$1) {
|
|
824
|
-
if (modifiers[modifier]) {
|
|
825
|
-
return modifier;
|
|
826
|
-
}
|
|
1102
|
+
function parseTranslate(transform) {
|
|
1103
|
+
const match = transform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);
|
|
1104
|
+
if (match) {
|
|
1105
|
+
return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
|
|
827
1106
|
}
|
|
828
|
-
return
|
|
1107
|
+
return { x: 0, y: 0 };
|
|
829
1108
|
}
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
}
|
|
1109
|
+
function normalizeOptions$o(binding) {
|
|
1110
|
+
var _a, _b, _c;
|
|
1111
|
+
if (binding === void 0 || binding === true) {
|
|
1112
|
+
return { axis: "both", constrain: false, disabled: false };
|
|
1113
|
+
}
|
|
1114
|
+
if (binding === false) {
|
|
1115
|
+
return { axis: "both", constrain: false, disabled: true };
|
|
1116
|
+
}
|
|
1117
|
+
return {
|
|
1118
|
+
axis: (_a = binding.axis) != null ? _a : "both",
|
|
1119
|
+
constrain: (_b = binding.constrain) != null ? _b : false,
|
|
1120
|
+
boundary: binding.boundary,
|
|
1121
|
+
handle: binding.handle,
|
|
1122
|
+
disabled: (_c = binding.disabled) != null ? _c : false,
|
|
1123
|
+
grid: binding.grid,
|
|
1124
|
+
onStart: binding.onStart,
|
|
1125
|
+
onDrag: binding.onDrag,
|
|
1126
|
+
onEnd: binding.onEnd
|
|
1127
|
+
};
|
|
1128
|
+
}
|
|
1129
|
+
const vDraggable = defineDirective({
|
|
1130
|
+
name: "draggable",
|
|
1131
|
+
ssr: false,
|
|
838
1132
|
mounted(el, binding) {
|
|
839
|
-
const options = normalizeOptions$
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
1133
|
+
const options = normalizeOptions$o(binding.value);
|
|
1134
|
+
if (options.disabled) return;
|
|
1135
|
+
if (getComputedStyle(el).position === "static") {
|
|
1136
|
+
el.style.position = "absolute";
|
|
1137
|
+
}
|
|
1138
|
+
const state = {
|
|
1139
|
+
options,
|
|
1140
|
+
isDragging: false,
|
|
1141
|
+
startX: 0,
|
|
1142
|
+
startY: 0,
|
|
1143
|
+
offsetX: 0,
|
|
1144
|
+
offsetY: 0,
|
|
1145
|
+
initialLeft: 0,
|
|
1146
|
+
initialTop: 0,
|
|
1147
|
+
boundaryWidth: 0,
|
|
1148
|
+
boundaryHeight: 0,
|
|
1149
|
+
elWidth: 0,
|
|
1150
|
+
elHeight: 0,
|
|
1151
|
+
handleEl: options.handle ? el.querySelector(options.handle) : null,
|
|
1152
|
+
moveHandler: null,
|
|
1153
|
+
endHandler: null
|
|
850
1154
|
};
|
|
1155
|
+
el.__draggable = state;
|
|
1156
|
+
const targetEl = state.handleEl || el;
|
|
1157
|
+
targetEl.addEventListener("mousedown", startDrag);
|
|
1158
|
+
targetEl.addEventListener("touchstart", startDrag, { passive: false });
|
|
1159
|
+
function startDrag(e) {
|
|
1160
|
+
var _a, _b, _c;
|
|
1161
|
+
if (state.options.disabled) return;
|
|
1162
|
+
if (e.type === "touchstart") {
|
|
1163
|
+
e.preventDefault();
|
|
1164
|
+
}
|
|
1165
|
+
const { clientX, clientY } = getClientCoords(e);
|
|
1166
|
+
state.isDragging = true;
|
|
1167
|
+
state.startX = clientX;
|
|
1168
|
+
state.startY = clientY;
|
|
1169
|
+
const { x, y } = parseTranslate(el.style.transform);
|
|
1170
|
+
state.offsetX = x;
|
|
1171
|
+
state.offsetY = y;
|
|
1172
|
+
if (state.options.constrain || state.options.boundary) {
|
|
1173
|
+
const boundary = state.options.boundary ? getBoundary(el, state.options.boundary) : (_a = el.parentElement) == null ? void 0 : _a.getBoundingClientRect();
|
|
1174
|
+
if (boundary) {
|
|
1175
|
+
const elRect = el.getBoundingClientRect();
|
|
1176
|
+
state.initialLeft = elRect.left - boundary.left;
|
|
1177
|
+
state.initialTop = elRect.top - boundary.top;
|
|
1178
|
+
state.boundaryWidth = boundary.width;
|
|
1179
|
+
state.boundaryHeight = boundary.height;
|
|
1180
|
+
state.elWidth = elRect.width;
|
|
1181
|
+
state.elHeight = elRect.height;
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
el.classList.add("v-draggable--dragging");
|
|
1185
|
+
state.moveHandler = (moveEvent) => {
|
|
1186
|
+
var _a2, _b2;
|
|
1187
|
+
if (!state.isDragging) return;
|
|
1188
|
+
const { clientX: moveX, clientY: moveY } = getClientCoords(moveEvent);
|
|
1189
|
+
let deltaX = moveX - state.startX, deltaY = moveY - state.startY;
|
|
1190
|
+
if (state.options.axis === "x") {
|
|
1191
|
+
deltaY = 0;
|
|
1192
|
+
} else if (state.options.axis === "y") {
|
|
1193
|
+
deltaX = 0;
|
|
1194
|
+
}
|
|
1195
|
+
if (state.options.grid) {
|
|
1196
|
+
deltaX = Math.round(deltaX / state.options.grid[0]) * state.options.grid[0];
|
|
1197
|
+
deltaY = Math.round(deltaY / state.options.grid[1]) * state.options.grid[1];
|
|
1198
|
+
}
|
|
1199
|
+
let newX = state.offsetX + deltaX, newY = state.offsetY + deltaY;
|
|
1200
|
+
if (state.options.constrain || state.options.boundary) {
|
|
1201
|
+
const newLeft = state.initialLeft + deltaX;
|
|
1202
|
+
const newTop = state.initialTop + deltaY;
|
|
1203
|
+
const maxLeft = state.boundaryWidth - state.elWidth;
|
|
1204
|
+
const maxTop = state.boundaryHeight - state.elHeight;
|
|
1205
|
+
const constrainedLeft = Math.max(0, Math.min(newLeft, maxLeft));
|
|
1206
|
+
const constrainedTop = Math.max(0, Math.min(newTop, maxTop));
|
|
1207
|
+
newX = state.offsetX + (constrainedLeft - state.initialLeft);
|
|
1208
|
+
newY = state.offsetY + (constrainedTop - state.initialTop);
|
|
1209
|
+
}
|
|
1210
|
+
el.style.transform = `translate(${newX}px, ${newY}px)`;
|
|
1211
|
+
(_b2 = (_a2 = state.options).onDrag) == null ? void 0 : _b2.call(_a2, { x: newX, y: newY }, moveEvent);
|
|
1212
|
+
};
|
|
1213
|
+
state.endHandler = () => {
|
|
1214
|
+
var _a2, _b2;
|
|
1215
|
+
if (!state.isDragging) return;
|
|
1216
|
+
state.isDragging = false;
|
|
1217
|
+
el.classList.remove("v-draggable--dragging");
|
|
1218
|
+
if (state.moveHandler) {
|
|
1219
|
+
document.removeEventListener("mousemove", state.moveHandler);
|
|
1220
|
+
document.removeEventListener("touchmove", state.moveHandler);
|
|
1221
|
+
}
|
|
1222
|
+
if (state.endHandler) {
|
|
1223
|
+
document.removeEventListener("mouseup", state.endHandler);
|
|
1224
|
+
document.removeEventListener("touchend", state.endHandler);
|
|
1225
|
+
}
|
|
1226
|
+
const { x: finalX, y: finalY } = parseTranslate(el.style.transform);
|
|
1227
|
+
(_b2 = (_a2 = state.options).onEnd) == null ? void 0 : _b2.call(_a2, { x: finalX, y: finalY }, new MouseEvent("mouseup"));
|
|
1228
|
+
};
|
|
1229
|
+
document.addEventListener("mousemove", state.moveHandler);
|
|
1230
|
+
document.addEventListener("touchmove", state.moveHandler, { passive: false });
|
|
1231
|
+
document.addEventListener("mouseup", state.endHandler);
|
|
1232
|
+
document.addEventListener("touchend", state.endHandler);
|
|
1233
|
+
(_c = (_b = state.options).onStart) == null ? void 0 : _c.call(_b, { x: state.offsetX, y: state.offsetY }, e);
|
|
1234
|
+
}
|
|
851
1235
|
},
|
|
852
1236
|
updated(el, binding) {
|
|
853
|
-
const state = el.
|
|
1237
|
+
const state = el.__draggable;
|
|
854
1238
|
if (!state) return;
|
|
855
|
-
|
|
856
|
-
if (
|
|
857
|
-
state.
|
|
858
|
-
const throttledFn = throttle(newOptions.handler, newOptions.wait, {
|
|
859
|
-
leading: newOptions.leading,
|
|
860
|
-
trailing: newOptions.trailing
|
|
861
|
-
});
|
|
862
|
-
el.removeEventListener(state.eventType, state.throttledFn);
|
|
863
|
-
el.addEventListener(state.eventType, throttledFn);
|
|
864
|
-
el.__throttle = {
|
|
865
|
-
throttledFn,
|
|
866
|
-
eventType: state.eventType,
|
|
867
|
-
options: newOptions
|
|
868
|
-
};
|
|
869
|
-
} else if (newOptions.handler !== state.options.handler) {
|
|
870
|
-
state.options.handler = newOptions.handler;
|
|
1239
|
+
state.options = normalizeOptions$o(binding.value);
|
|
1240
|
+
if (state.options.handle) {
|
|
1241
|
+
state.handleEl = el.querySelector(state.options.handle);
|
|
871
1242
|
}
|
|
872
1243
|
},
|
|
873
1244
|
unmounted(el) {
|
|
874
|
-
const state = el.
|
|
1245
|
+
const state = el.__draggable;
|
|
875
1246
|
if (!state) return;
|
|
876
|
-
state.
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
}
|
|
880
|
-
});
|
|
881
|
-
function normalizeOptions$1(binding, directiveBinding) {
|
|
882
|
-
const wait = parseTime(directiveBinding.arg) || 300;
|
|
883
|
-
if (typeof binding === "function") {
|
|
884
|
-
return { handler: binding, wait };
|
|
885
|
-
}
|
|
886
|
-
return __spreadProps(__spreadValues({}, binding), { wait: binding.wait || wait });
|
|
887
|
-
}
|
|
888
|
-
function getEventType(el) {
|
|
889
|
-
const tagName = el.tagName.toLowerCase();
|
|
890
|
-
if (tagName === "input" || tagName === "textarea") {
|
|
891
|
-
return "input";
|
|
892
|
-
}
|
|
893
|
-
return "click";
|
|
894
|
-
}
|
|
895
|
-
const EVENT_MODIFIERS = [
|
|
896
|
-
"click",
|
|
897
|
-
"input",
|
|
898
|
-
"change",
|
|
899
|
-
"submit",
|
|
900
|
-
"scroll",
|
|
901
|
-
"resize",
|
|
902
|
-
"mouseenter",
|
|
903
|
-
"mouseleave",
|
|
904
|
-
"mousemove",
|
|
905
|
-
"mousedown",
|
|
906
|
-
"mouseup",
|
|
907
|
-
"keydown",
|
|
908
|
-
"keyup",
|
|
909
|
-
"focus",
|
|
910
|
-
"blur",
|
|
911
|
-
"touchstart",
|
|
912
|
-
"touchmove",
|
|
913
|
-
"touchend"
|
|
914
|
-
];
|
|
915
|
-
function getEventTypeFromModifiers(modifiers) {
|
|
916
|
-
for (const modifier of EVENT_MODIFIERS) {
|
|
917
|
-
if (modifiers[modifier]) {
|
|
918
|
-
return modifier;
|
|
1247
|
+
if (state.moveHandler) {
|
|
1248
|
+
document.removeEventListener("mousemove", state.moveHandler);
|
|
1249
|
+
document.removeEventListener("touchmove", state.moveHandler);
|
|
919
1250
|
}
|
|
1251
|
+
if (state.endHandler) {
|
|
1252
|
+
document.removeEventListener("mouseup", state.endHandler);
|
|
1253
|
+
document.removeEventListener("touchend", state.endHandler);
|
|
1254
|
+
}
|
|
1255
|
+
delete el.__draggable;
|
|
920
1256
|
}
|
|
921
|
-
|
|
922
|
-
}
|
|
1257
|
+
});
|
|
923
1258
|
const FOCUSABLE_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "button"]);
|
|
924
1259
|
function isEqual(a, b) {
|
|
925
1260
|
if (a === b) return true;
|
|
@@ -933,13 +1268,15 @@ function isEqual(a, b) {
|
|
|
933
1268
|
}
|
|
934
1269
|
const vFocus = defineDirective({
|
|
935
1270
|
name: "focus",
|
|
936
|
-
ssr:
|
|
1271
|
+
ssr: true,
|
|
1272
|
+
// SSR safe - will skip focus on server
|
|
937
1273
|
defaults: {
|
|
938
1274
|
focus: true,
|
|
939
1275
|
refocus: false
|
|
940
1276
|
},
|
|
941
1277
|
mounted(el, binding) {
|
|
942
|
-
|
|
1278
|
+
if (!isBrowser()) return;
|
|
1279
|
+
const options = normalizeOptions$n(binding.value);
|
|
943
1280
|
if (!options.focus || !isFocusable(el)) {
|
|
944
1281
|
if (options.focus) {
|
|
945
1282
|
console.warn("[Directix] v-focus: Element is not focusable");
|
|
@@ -967,7 +1304,7 @@ const vFocus = defineDirective({
|
|
|
967
1304
|
updated(el, binding) {
|
|
968
1305
|
const state = el.__focus;
|
|
969
1306
|
if (!state) return;
|
|
970
|
-
const newOptions = normalizeOptions(binding.value);
|
|
1307
|
+
const newOptions = normalizeOptions$n(binding.value);
|
|
971
1308
|
if (newOptions.onFocus !== state.options.onFocus) {
|
|
972
1309
|
el.removeEventListener("focus", state.handleFocus);
|
|
973
1310
|
state.handleFocus = () => {
|
|
@@ -999,7 +1336,7 @@ const vFocus = defineDirective({
|
|
|
999
1336
|
delete el.__focus;
|
|
1000
1337
|
}
|
|
1001
1338
|
});
|
|
1002
|
-
function normalizeOptions(binding) {
|
|
1339
|
+
function normalizeOptions$n(binding) {
|
|
1003
1340
|
if (typeof binding === "boolean") {
|
|
1004
1341
|
return { focus: binding, refocus: false };
|
|
1005
1342
|
}
|
|
@@ -1022,14 +1359,3483 @@ function isFocusable(el) {
|
|
|
1022
1359
|
}
|
|
1023
1360
|
return false;
|
|
1024
1361
|
}
|
|
1025
|
-
|
|
1026
|
-
"
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1362
|
+
function normalizeOptions$m(binding) {
|
|
1363
|
+
if (typeof binding === "function") {
|
|
1364
|
+
return { handler: binding, class: "v-hover" };
|
|
1365
|
+
}
|
|
1366
|
+
return __spreadValues({
|
|
1367
|
+
class: "v-hover",
|
|
1368
|
+
disabled: false,
|
|
1369
|
+
enterDelay: 0,
|
|
1370
|
+
leaveDelay: 0
|
|
1371
|
+
}, binding);
|
|
1372
|
+
}
|
|
1373
|
+
const vHover = defineDirective({
|
|
1374
|
+
name: "hover",
|
|
1375
|
+
ssr: false,
|
|
1376
|
+
defaults: {
|
|
1377
|
+
class: "v-hover",
|
|
1378
|
+
disabled: false,
|
|
1379
|
+
enterDelay: 0,
|
|
1380
|
+
leaveDelay: 0
|
|
1381
|
+
},
|
|
1382
|
+
mounted(el, binding) {
|
|
1383
|
+
const options = normalizeOptions$m(binding.value);
|
|
1384
|
+
if (options.disabled || !isBrowser()) return;
|
|
1385
|
+
const state = {
|
|
1386
|
+
options,
|
|
1387
|
+
isHovering: false,
|
|
1388
|
+
enterTimerId: null,
|
|
1389
|
+
leaveTimerId: null,
|
|
1390
|
+
enterHandler: () => {
|
|
1391
|
+
},
|
|
1392
|
+
leaveHandler: () => {
|
|
1393
|
+
}
|
|
1394
|
+
};
|
|
1395
|
+
state.enterHandler = (e) => {
|
|
1396
|
+
const event = e;
|
|
1397
|
+
if (state.leaveTimerId) {
|
|
1398
|
+
clearTimeout(state.leaveTimerId);
|
|
1399
|
+
state.leaveTimerId = null;
|
|
1400
|
+
}
|
|
1401
|
+
if (state.isHovering) return;
|
|
1402
|
+
if (options.enterDelay && options.enterDelay > 0) {
|
|
1403
|
+
state.enterTimerId = setTimeout(() => {
|
|
1404
|
+
state.isHovering = true;
|
|
1405
|
+
applyHoverState(el, state, event);
|
|
1406
|
+
}, options.enterDelay);
|
|
1407
|
+
} else {
|
|
1408
|
+
state.isHovering = true;
|
|
1409
|
+
applyHoverState(el, state, event);
|
|
1410
|
+
}
|
|
1411
|
+
};
|
|
1412
|
+
state.leaveHandler = (e) => {
|
|
1413
|
+
const event = e;
|
|
1414
|
+
if (state.enterTimerId) {
|
|
1415
|
+
clearTimeout(state.enterTimerId);
|
|
1416
|
+
state.enterTimerId = null;
|
|
1417
|
+
}
|
|
1418
|
+
if (!state.isHovering) return;
|
|
1419
|
+
if (options.leaveDelay && options.leaveDelay > 0) {
|
|
1420
|
+
state.leaveTimerId = setTimeout(() => {
|
|
1421
|
+
state.isHovering = false;
|
|
1422
|
+
applyLeaveState(el, state, event);
|
|
1423
|
+
}, options.leaveDelay);
|
|
1424
|
+
} else {
|
|
1425
|
+
state.isHovering = false;
|
|
1426
|
+
applyLeaveState(el, state, event);
|
|
1427
|
+
}
|
|
1428
|
+
};
|
|
1429
|
+
el.__hover = state;
|
|
1430
|
+
on(el, "mouseenter", state.enterHandler);
|
|
1431
|
+
on(el, "mouseleave", state.leaveHandler);
|
|
1432
|
+
},
|
|
1433
|
+
updated(el, binding) {
|
|
1434
|
+
const state = el.__hover;
|
|
1435
|
+
if (!state) return;
|
|
1436
|
+
const newOptions = normalizeOptions$m(binding.value);
|
|
1437
|
+
if (newOptions.disabled && !state.options.disabled) {
|
|
1438
|
+
el.classList.remove(state.options.class || "v-hover");
|
|
1439
|
+
} else if (!newOptions.disabled && state.options.disabled) ;
|
|
1440
|
+
state.options = newOptions;
|
|
1441
|
+
},
|
|
1442
|
+
unmounted(el) {
|
|
1443
|
+
const state = el.__hover;
|
|
1444
|
+
if (!state) return;
|
|
1445
|
+
if (state.enterTimerId) {
|
|
1446
|
+
clearTimeout(state.enterTimerId);
|
|
1447
|
+
}
|
|
1448
|
+
if (state.leaveTimerId) {
|
|
1449
|
+
clearTimeout(state.leaveTimerId);
|
|
1450
|
+
}
|
|
1451
|
+
off(el, "mouseenter", state.enterHandler);
|
|
1452
|
+
off(el, "mouseleave", state.leaveHandler);
|
|
1453
|
+
el.classList.remove(state.options.class || "v-hover");
|
|
1454
|
+
delete el.__hover;
|
|
1455
|
+
}
|
|
1456
|
+
});
|
|
1457
|
+
function applyHoverState(el, state, e) {
|
|
1458
|
+
var _a, _b;
|
|
1459
|
+
const { options } = state;
|
|
1460
|
+
if (options.class) {
|
|
1461
|
+
el.classList.add(options.class);
|
|
1462
|
+
}
|
|
1463
|
+
el.dispatchEvent(new CustomEvent("hover:enter", { detail: { event: e } }));
|
|
1464
|
+
(_a = options.onEnter) == null ? void 0 : _a.call(options, e);
|
|
1465
|
+
(_b = options.handler) == null ? void 0 : _b.call(options, true, e);
|
|
1466
|
+
}
|
|
1467
|
+
function applyLeaveState(el, state, e) {
|
|
1468
|
+
var _a, _b;
|
|
1469
|
+
const { options } = state;
|
|
1470
|
+
if (options.class) {
|
|
1471
|
+
el.classList.remove(options.class);
|
|
1472
|
+
}
|
|
1473
|
+
el.dispatchEvent(new CustomEvent("hover:leave", { detail: { event: e } }));
|
|
1474
|
+
(_a = options.onLeave) == null ? void 0 : _a.call(options, e);
|
|
1475
|
+
(_b = options.handler) == null ? void 0 : _b.call(options, false, e);
|
|
1476
|
+
}
|
|
1477
|
+
const DEFAULTS = {
|
|
1478
|
+
minScale: 0.5,
|
|
1479
|
+
maxScale: 5,
|
|
1480
|
+
doubleTapZoom: 2.5,
|
|
1481
|
+
tapTimeout: 300,
|
|
1482
|
+
animationDuration: 300,
|
|
1483
|
+
hintDuration: 3e3,
|
|
1484
|
+
zoomIndicatorDuration: 1500
|
|
1031
1485
|
};
|
|
1032
|
-
|
|
1486
|
+
let globalZIndex = 9999;
|
|
1487
|
+
function getDistance$2(x1, y1, x2, y2) {
|
|
1488
|
+
return Math.sqrt(__pow(x2 - x1, 2) + __pow(y2 - y1, 2));
|
|
1489
|
+
}
|
|
1490
|
+
function clamp(value, min, max) {
|
|
1491
|
+
return Math.max(min, Math.min(max, value));
|
|
1492
|
+
}
|
|
1493
|
+
function createOverlay(options) {
|
|
1494
|
+
var _a;
|
|
1495
|
+
const zIndex = (_a = options.zIndex) != null ? _a : ++globalZIndex;
|
|
1496
|
+
const overlay = document.createElement("div");
|
|
1497
|
+
overlay.className = "v-image-preview-overlay";
|
|
1498
|
+
if (options.class) overlay.classList.add(options.class);
|
|
1499
|
+
Object.assign(overlay.style, {
|
|
1500
|
+
position: "fixed",
|
|
1501
|
+
inset: "0",
|
|
1502
|
+
background: "rgba(0, 0, 0, 0.95)",
|
|
1503
|
+
display: "flex",
|
|
1504
|
+
alignItems: "center",
|
|
1505
|
+
justifyContent: "center",
|
|
1506
|
+
zIndex: String(zIndex),
|
|
1507
|
+
cursor: "zoom-out",
|
|
1508
|
+
opacity: "0",
|
|
1509
|
+
transition: "opacity 0.3s",
|
|
1510
|
+
touchAction: "none",
|
|
1511
|
+
overflow: "hidden"
|
|
1512
|
+
});
|
|
1513
|
+
const imageContainer = document.createElement("div");
|
|
1514
|
+
Object.assign(imageContainer.style, {
|
|
1515
|
+
position: "relative",
|
|
1516
|
+
transformOrigin: "center center",
|
|
1517
|
+
transition: "transform 0.1s ease-out",
|
|
1518
|
+
willChange: "transform"
|
|
1519
|
+
});
|
|
1520
|
+
const image = document.createElement("img");
|
|
1521
|
+
image.src = options.previewSrc || options.src || "";
|
|
1522
|
+
image.alt = options.alt || "";
|
|
1523
|
+
Object.assign(image.style, {
|
|
1524
|
+
maxWidth: "95vw",
|
|
1525
|
+
maxHeight: "90vh",
|
|
1526
|
+
objectFit: "contain",
|
|
1527
|
+
cursor: "grab",
|
|
1528
|
+
userSelect: "none",
|
|
1529
|
+
WebkitUserDrag: "none"
|
|
1530
|
+
});
|
|
1531
|
+
image.addEventListener("dragstart", (e) => e.preventDefault());
|
|
1532
|
+
imageContainer.appendChild(image);
|
|
1533
|
+
if (options.showCloseButton !== false) {
|
|
1534
|
+
const closeBtn = document.createElement("button");
|
|
1535
|
+
closeBtn.className = "v-image-preview-close";
|
|
1536
|
+
closeBtn.innerHTML = "×";
|
|
1537
|
+
closeBtn.setAttribute("aria-label", "Close preview");
|
|
1538
|
+
Object.assign(closeBtn.style, {
|
|
1539
|
+
position: "fixed",
|
|
1540
|
+
top: "16px",
|
|
1541
|
+
right: "16px",
|
|
1542
|
+
width: "44px",
|
|
1543
|
+
height: "44px",
|
|
1544
|
+
border: "none",
|
|
1545
|
+
background: "rgba(255, 255, 255, 0.15)",
|
|
1546
|
+
color: "white",
|
|
1547
|
+
fontSize: "28px",
|
|
1548
|
+
cursor: "pointer",
|
|
1549
|
+
borderRadius: "50%",
|
|
1550
|
+
transition: "background 0.2s, transform 0.2s",
|
|
1551
|
+
zIndex: String(zIndex + 1),
|
|
1552
|
+
display: "flex",
|
|
1553
|
+
alignItems: "center",
|
|
1554
|
+
justifyContent: "center",
|
|
1555
|
+
backdropFilter: "blur(10px)",
|
|
1556
|
+
WebkitBackdropFilter: "blur(10px)"
|
|
1557
|
+
});
|
|
1558
|
+
const setBtnStyle = (bg, scale) => {
|
|
1559
|
+
closeBtn.style.background = bg;
|
|
1560
|
+
closeBtn.style.transform = scale;
|
|
1561
|
+
};
|
|
1562
|
+
closeBtn.addEventListener("mouseenter", () => setBtnStyle("rgba(255, 255, 255, 0.25)", "scale(1.1)"));
|
|
1563
|
+
closeBtn.addEventListener("mouseleave", () => setBtnStyle("rgba(255, 255, 255, 0.15)", "scale(1)"));
|
|
1564
|
+
closeBtn.addEventListener("touchstart", () => setBtnStyle("rgba(255, 255, 255, 0.35)", "scale(1.15)"), { passive: true });
|
|
1565
|
+
closeBtn.addEventListener("touchend", () => setBtnStyle("rgba(255, 255, 255, 0.15)", "scale(1)"), { passive: true });
|
|
1566
|
+
overlay.appendChild(closeBtn);
|
|
1567
|
+
}
|
|
1568
|
+
if (options.showZoomIndicator !== false) {
|
|
1569
|
+
const zoomIndicator = document.createElement("div");
|
|
1570
|
+
zoomIndicator.className = "v-image-preview-zoom";
|
|
1571
|
+
zoomIndicator.textContent = "100%";
|
|
1572
|
+
Object.assign(zoomIndicator.style, {
|
|
1573
|
+
position: "fixed",
|
|
1574
|
+
bottom: "24px",
|
|
1575
|
+
left: "50%",
|
|
1576
|
+
transform: "translateX(-50%)",
|
|
1577
|
+
background: "rgba(0, 0, 0, 0.6)",
|
|
1578
|
+
color: "white",
|
|
1579
|
+
padding: "8px 16px",
|
|
1580
|
+
borderRadius: "20px",
|
|
1581
|
+
fontSize: "14px",
|
|
1582
|
+
fontWeight: "500",
|
|
1583
|
+
opacity: "0",
|
|
1584
|
+
transition: "opacity 0.3s",
|
|
1585
|
+
zIndex: String(zIndex + 1),
|
|
1586
|
+
backdropFilter: "blur(10px)",
|
|
1587
|
+
WebkitBackdropFilter: "blur(10px)"
|
|
1588
|
+
});
|
|
1589
|
+
overlay.appendChild(zoomIndicator);
|
|
1590
|
+
}
|
|
1591
|
+
const hint = document.createElement("div");
|
|
1592
|
+
hint.className = "v-image-preview-hint";
|
|
1593
|
+
hint.textContent = "Pinch to zoom • Double tap • Swipe up to close";
|
|
1594
|
+
Object.assign(hint.style, {
|
|
1595
|
+
position: "fixed",
|
|
1596
|
+
bottom: "60px",
|
|
1597
|
+
left: "50%",
|
|
1598
|
+
transform: "translateX(-50%)",
|
|
1599
|
+
color: "rgba(255, 255, 255, 0.6)",
|
|
1600
|
+
fontSize: "12px",
|
|
1601
|
+
opacity: "1",
|
|
1602
|
+
transition: "opacity 0.5s",
|
|
1603
|
+
zIndex: String(zIndex + 1),
|
|
1604
|
+
pointerEvents: "none"
|
|
1605
|
+
});
|
|
1606
|
+
overlay.appendChild(hint);
|
|
1607
|
+
setTimeout(() => hint.style.opacity = "0", DEFAULTS.hintDuration);
|
|
1608
|
+
overlay.appendChild(imageContainer);
|
|
1609
|
+
return { overlay, imageContainer, image };
|
|
1610
|
+
}
|
|
1611
|
+
function createTransformManager(state) {
|
|
1612
|
+
const updateTransform = (animate = false) => {
|
|
1613
|
+
var _a;
|
|
1614
|
+
if (!state.imageContainer) return;
|
|
1615
|
+
const { scale, translateX, translateY } = state.transform;
|
|
1616
|
+
state.imageContainer.style.transition = animate ? "transform 0.2s ease-out" : "none";
|
|
1617
|
+
state.imageContainer.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
|
|
1618
|
+
const zoomIndicator = (_a = state.overlay) == null ? void 0 : _a.querySelector(".v-image-preview-zoom");
|
|
1619
|
+
if (zoomIndicator) {
|
|
1620
|
+
zoomIndicator.textContent = `${Math.round(scale * 100)}%`;
|
|
1621
|
+
zoomIndicator.style.opacity = "1";
|
|
1622
|
+
clearTimeout(zoomIndicator._hideTimer);
|
|
1623
|
+
zoomIndicator._hideTimer = setTimeout(() => {
|
|
1624
|
+
zoomIndicator.style.opacity = "0";
|
|
1625
|
+
}, DEFAULTS.zoomIndicatorDuration);
|
|
1626
|
+
}
|
|
1627
|
+
};
|
|
1628
|
+
const resetTransform = () => {
|
|
1629
|
+
state.transform = { scale: 1, translateX: 0, translateY: 0 };
|
|
1630
|
+
updateTransform(true);
|
|
1631
|
+
};
|
|
1632
|
+
const constrainScale = (newScale) => {
|
|
1633
|
+
const { minScale = DEFAULTS.minScale, maxScale = DEFAULTS.maxScale } = state.options;
|
|
1634
|
+
return clamp(newScale, minScale, maxScale);
|
|
1635
|
+
};
|
|
1636
|
+
const constrainTranslate = (x, y) => {
|
|
1637
|
+
const { scale } = state.transform;
|
|
1638
|
+
if (!state.image || scale <= 1) return { x: 0, y: 0 };
|
|
1639
|
+
const rect = state.image.getBoundingClientRect();
|
|
1640
|
+
const maxX = rect.width * (scale - 1) / 2;
|
|
1641
|
+
const maxY = rect.height * (scale - 1) / 2;
|
|
1642
|
+
return {
|
|
1643
|
+
x: clamp(x, -maxX, maxX),
|
|
1644
|
+
y: clamp(y, -maxY, maxY)
|
|
1645
|
+
};
|
|
1646
|
+
};
|
|
1647
|
+
return { updateTransform, resetTransform, constrainScale, constrainTranslate };
|
|
1648
|
+
}
|
|
1649
|
+
function createGestureHandlers(state, transformManager, closePreview) {
|
|
1650
|
+
const { updateTransform, resetTransform, constrainScale, constrainTranslate } = transformManager;
|
|
1651
|
+
const handleTouchStart = (e) => {
|
|
1652
|
+
if (!state.imageContainer) return;
|
|
1653
|
+
const now = Date.now();
|
|
1654
|
+
const { gesture, transform, options } = state;
|
|
1655
|
+
if (e.touches.length === 1) {
|
|
1656
|
+
if (options.enableDoubleTap !== false && now - gesture.lastTapTime < DEFAULTS.tapTimeout) {
|
|
1657
|
+
e.preventDefault();
|
|
1658
|
+
transform.scale = transform.scale > 1 ? 1 : constrainScale(DEFAULTS.doubleTapZoom);
|
|
1659
|
+
gesture.lastTapTime = 0;
|
|
1660
|
+
updateTransform(true);
|
|
1661
|
+
return;
|
|
1662
|
+
}
|
|
1663
|
+
gesture.lastTapTime = now;
|
|
1664
|
+
gesture.isDragging = true;
|
|
1665
|
+
gesture.startX = e.touches[0].clientX - transform.translateX;
|
|
1666
|
+
gesture.startY = e.touches[0].clientY - transform.translateY;
|
|
1667
|
+
gesture.swipeStartY = e.touches[0].clientY;
|
|
1668
|
+
} else if (e.touches.length === 2 && options.enablePinchZoom !== false) {
|
|
1669
|
+
gesture.isDragging = false;
|
|
1670
|
+
gesture.startDistance = getDistance$2(
|
|
1671
|
+
e.touches[0].clientX,
|
|
1672
|
+
e.touches[0].clientY,
|
|
1673
|
+
e.touches[1].clientX,
|
|
1674
|
+
e.touches[1].clientY
|
|
1675
|
+
);
|
|
1676
|
+
gesture.startScale = transform.scale;
|
|
1677
|
+
}
|
|
1678
|
+
};
|
|
1679
|
+
const handleTouchMove = (e) => {
|
|
1680
|
+
if (!state.imageContainer) return;
|
|
1681
|
+
e.preventDefault();
|
|
1682
|
+
const { gesture, transform, options } = state;
|
|
1683
|
+
if (e.touches.length === 1 && gesture.isDragging) {
|
|
1684
|
+
const newX = e.touches[0].clientX - gesture.startX;
|
|
1685
|
+
const newY = e.touches[0].clientY - gesture.startY;
|
|
1686
|
+
const constrained = constrainTranslate(newX, newY);
|
|
1687
|
+
transform.translateX = constrained.x;
|
|
1688
|
+
transform.translateY = constrained.y;
|
|
1689
|
+
updateTransform(false);
|
|
1690
|
+
} else if (e.touches.length === 2 && options.enablePinchZoom !== false) {
|
|
1691
|
+
const currentDistance = getDistance$2(
|
|
1692
|
+
e.touches[0].clientX,
|
|
1693
|
+
e.touches[0].clientY,
|
|
1694
|
+
e.touches[1].clientX,
|
|
1695
|
+
e.touches[1].clientY
|
|
1696
|
+
);
|
|
1697
|
+
transform.scale = constrainScale(gesture.startScale * (currentDistance / gesture.startDistance));
|
|
1698
|
+
updateTransform(false);
|
|
1699
|
+
}
|
|
1700
|
+
};
|
|
1701
|
+
const handleTouchEnd = (e) => {
|
|
1702
|
+
const { gesture, transform, options } = state;
|
|
1703
|
+
gesture.isDragging = false;
|
|
1704
|
+
if (options.enableSwipeClose !== false && e.changedTouches.length === 1 && transform.scale <= 1) {
|
|
1705
|
+
const deltaY = e.changedTouches[0].clientY - gesture.swipeStartY;
|
|
1706
|
+
if (deltaY < -100) {
|
|
1707
|
+
closePreview();
|
|
1708
|
+
return;
|
|
1709
|
+
}
|
|
1710
|
+
}
|
|
1711
|
+
if (transform.scale < 1) {
|
|
1712
|
+
resetTransform();
|
|
1713
|
+
}
|
|
1714
|
+
};
|
|
1715
|
+
const handleMouseDown = (e) => {
|
|
1716
|
+
if (!state.imageContainer) return;
|
|
1717
|
+
state.gesture.isDragging = true;
|
|
1718
|
+
state.gesture.startX = e.clientX - state.transform.translateX;
|
|
1719
|
+
state.gesture.startY = e.clientY - state.transform.translateY;
|
|
1720
|
+
state.imageContainer.style.cursor = "grabbing";
|
|
1721
|
+
};
|
|
1722
|
+
const handleMouseMove = (e) => {
|
|
1723
|
+
if (!state.gesture.isDragging || !state.imageContainer) return;
|
|
1724
|
+
const newX = e.clientX - state.gesture.startX;
|
|
1725
|
+
const newY = e.clientY - state.gesture.startY;
|
|
1726
|
+
const constrained = constrainTranslate(newX, newY);
|
|
1727
|
+
state.transform.translateX = constrained.x;
|
|
1728
|
+
state.transform.translateY = constrained.y;
|
|
1729
|
+
updateTransform(false);
|
|
1730
|
+
};
|
|
1731
|
+
const handleMouseUp = () => {
|
|
1732
|
+
state.gesture.isDragging = false;
|
|
1733
|
+
if (state.imageContainer) {
|
|
1734
|
+
state.imageContainer.style.cursor = "grab";
|
|
1735
|
+
}
|
|
1736
|
+
};
|
|
1737
|
+
const handleWheel = (e) => {
|
|
1738
|
+
if (!state.imageContainer || state.options.enablePinchZoom === false) return;
|
|
1739
|
+
e.preventDefault();
|
|
1740
|
+
const delta = e.deltaY > 0 ? 0.9 : 1.1;
|
|
1741
|
+
state.transform.scale = constrainScale(state.transform.scale * delta);
|
|
1742
|
+
updateTransform(false);
|
|
1743
|
+
if (state.transform.scale < 0.8) {
|
|
1744
|
+
setTimeout(resetTransform, 100);
|
|
1745
|
+
}
|
|
1746
|
+
};
|
|
1747
|
+
return { handleTouchStart, handleTouchMove, handleTouchEnd, handleMouseDown, handleMouseMove, handleMouseUp, handleWheel };
|
|
1748
|
+
}
|
|
1749
|
+
function normalizeOptions$l(binding, el) {
|
|
1750
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
1751
|
+
const elSrc = el.tagName === "IMG" ? el.src : void 0;
|
|
1752
|
+
const elPreviewSrc = el.getAttribute("data-preview") || void 0;
|
|
1753
|
+
const elAlt = el.tagName === "IMG" ? el.alt : el.getAttribute("alt") || void 0;
|
|
1754
|
+
if (typeof binding === "string") {
|
|
1755
|
+
return {
|
|
1756
|
+
src: binding,
|
|
1757
|
+
previewSrc: elPreviewSrc,
|
|
1758
|
+
alt: elAlt,
|
|
1759
|
+
enablePinchZoom: true,
|
|
1760
|
+
enableDoubleTap: true,
|
|
1761
|
+
enableSwipeClose: true,
|
|
1762
|
+
showZoomIndicator: true,
|
|
1763
|
+
showCloseButton: true,
|
|
1764
|
+
closeOnClickOutside: true,
|
|
1765
|
+
closeOnEsc: true,
|
|
1766
|
+
minScale: DEFAULTS.minScale,
|
|
1767
|
+
maxScale: DEFAULTS.maxScale
|
|
1768
|
+
};
|
|
1769
|
+
}
|
|
1770
|
+
return {
|
|
1771
|
+
src: (binding == null ? void 0 : binding.src) || elSrc,
|
|
1772
|
+
previewSrc: (binding == null ? void 0 : binding.previewSrc) || elPreviewSrc,
|
|
1773
|
+
alt: (binding == null ? void 0 : binding.alt) || elAlt,
|
|
1774
|
+
disabled: (_a = binding == null ? void 0 : binding.disabled) != null ? _a : false,
|
|
1775
|
+
closeOnClickOutside: (_b = binding == null ? void 0 : binding.closeOnClickOutside) != null ? _b : true,
|
|
1776
|
+
closeOnEsc: (_c = binding == null ? void 0 : binding.closeOnEsc) != null ? _c : true,
|
|
1777
|
+
showCloseButton: (_d = binding == null ? void 0 : binding.showCloseButton) != null ? _d : true,
|
|
1778
|
+
zIndex: binding == null ? void 0 : binding.zIndex,
|
|
1779
|
+
class: binding == null ? void 0 : binding.class,
|
|
1780
|
+
enablePinchZoom: (_e = binding == null ? void 0 : binding.enablePinchZoom) != null ? _e : true,
|
|
1781
|
+
enableDoubleTap: (_f = binding == null ? void 0 : binding.enableDoubleTap) != null ? _f : true,
|
|
1782
|
+
enableSwipeClose: (_g = binding == null ? void 0 : binding.enableSwipeClose) != null ? _g : true,
|
|
1783
|
+
showZoomIndicator: (_h = binding == null ? void 0 : binding.showZoomIndicator) != null ? _h : true,
|
|
1784
|
+
minScale: (_i = binding == null ? void 0 : binding.minScale) != null ? _i : DEFAULTS.minScale,
|
|
1785
|
+
maxScale: (_j = binding == null ? void 0 : binding.maxScale) != null ? _j : DEFAULTS.maxScale,
|
|
1786
|
+
onOpen: binding == null ? void 0 : binding.onOpen,
|
|
1787
|
+
onClose: binding == null ? void 0 : binding.onClose
|
|
1788
|
+
};
|
|
1789
|
+
}
|
|
1790
|
+
const vImagePreview = defineDirective({
|
|
1791
|
+
name: "image-preview",
|
|
1792
|
+
ssr: false,
|
|
1793
|
+
mounted(el, binding) {
|
|
1794
|
+
const options = normalizeOptions$l(binding.value, el);
|
|
1795
|
+
const state = {
|
|
1796
|
+
options,
|
|
1797
|
+
overlay: null,
|
|
1798
|
+
imageContainer: null,
|
|
1799
|
+
image: null,
|
|
1800
|
+
isOpen: false,
|
|
1801
|
+
transform: { scale: 1, translateX: 0, translateY: 0 },
|
|
1802
|
+
gesture: {
|
|
1803
|
+
isDragging: false,
|
|
1804
|
+
startX: 0,
|
|
1805
|
+
startY: 0,
|
|
1806
|
+
startDistance: 0,
|
|
1807
|
+
startScale: 1,
|
|
1808
|
+
lastTapTime: 0,
|
|
1809
|
+
swipeStartY: 0
|
|
1810
|
+
},
|
|
1811
|
+
handlers: {
|
|
1812
|
+
click: () => {
|
|
1813
|
+
},
|
|
1814
|
+
esc: null,
|
|
1815
|
+
touchStart: null,
|
|
1816
|
+
touchMove: null,
|
|
1817
|
+
touchEnd: null,
|
|
1818
|
+
mouseDown: null,
|
|
1819
|
+
mouseMove: null,
|
|
1820
|
+
mouseUp: null,
|
|
1821
|
+
wheel: null
|
|
1822
|
+
}
|
|
1823
|
+
};
|
|
1824
|
+
el.__imagePreview = state;
|
|
1825
|
+
if (options.disabled) return;
|
|
1826
|
+
el.style.cursor = "zoom-in";
|
|
1827
|
+
const transformManager = createTransformManager(state);
|
|
1828
|
+
const closePreview = () => {
|
|
1829
|
+
if (!state.isOpen || !state.overlay) return;
|
|
1830
|
+
state.overlay.style.opacity = "0";
|
|
1831
|
+
setTimeout(() => {
|
|
1832
|
+
var _a, _b;
|
|
1833
|
+
if (!state.overlay) return;
|
|
1834
|
+
state.overlay.remove();
|
|
1835
|
+
state.overlay = null;
|
|
1836
|
+
state.imageContainer = null;
|
|
1837
|
+
state.image = null;
|
|
1838
|
+
state.isOpen = false;
|
|
1839
|
+
state.transform = { scale: 1, translateX: 0, translateY: 0 };
|
|
1840
|
+
document.body.style.overflow = "";
|
|
1841
|
+
const { handlers } = state;
|
|
1842
|
+
if (handlers.esc) document.removeEventListener("keydown", handlers.esc);
|
|
1843
|
+
if (handlers.touchStart) document.removeEventListener("touchstart", handlers.touchStart);
|
|
1844
|
+
if (handlers.touchMove) document.removeEventListener("touchmove", handlers.touchMove);
|
|
1845
|
+
if (handlers.touchEnd) document.removeEventListener("touchend", handlers.touchEnd);
|
|
1846
|
+
if (handlers.mouseDown) document.removeEventListener("mousedown", handlers.mouseDown);
|
|
1847
|
+
if (handlers.mouseMove) document.removeEventListener("mousemove", handlers.mouseMove);
|
|
1848
|
+
if (handlers.mouseUp) document.removeEventListener("mouseup", handlers.mouseUp);
|
|
1849
|
+
if (handlers.wheel) document.removeEventListener("wheel", handlers.wheel);
|
|
1850
|
+
(_b = (_a = state.options).onClose) == null ? void 0 : _b.call(_a);
|
|
1851
|
+
}, DEFAULTS.animationDuration);
|
|
1852
|
+
};
|
|
1853
|
+
const gestureHandlers = createGestureHandlers(state, transformManager, closePreview);
|
|
1854
|
+
const openPreview = () => {
|
|
1855
|
+
var _a, _b, _c;
|
|
1856
|
+
if (state.isOpen || state.options.disabled) return;
|
|
1857
|
+
const { overlay, imageContainer, image } = createOverlay(state.options);
|
|
1858
|
+
state.overlay = overlay;
|
|
1859
|
+
state.imageContainer = imageContainer;
|
|
1860
|
+
state.image = image;
|
|
1861
|
+
state.isOpen = true;
|
|
1862
|
+
document.body.appendChild(overlay);
|
|
1863
|
+
document.body.style.overflow = "hidden";
|
|
1864
|
+
requestAnimationFrame(() => overlay.style.opacity = "1");
|
|
1865
|
+
state.handlers.touchStart = gestureHandlers.handleTouchStart;
|
|
1866
|
+
state.handlers.touchMove = gestureHandlers.handleTouchMove;
|
|
1867
|
+
state.handlers.touchEnd = gestureHandlers.handleTouchEnd;
|
|
1868
|
+
state.handlers.mouseDown = gestureHandlers.handleMouseDown;
|
|
1869
|
+
state.handlers.mouseMove = gestureHandlers.handleMouseMove;
|
|
1870
|
+
state.handlers.mouseUp = gestureHandlers.handleMouseUp;
|
|
1871
|
+
state.handlers.wheel = gestureHandlers.handleWheel;
|
|
1872
|
+
overlay.addEventListener("touchstart", gestureHandlers.handleTouchStart, { passive: false });
|
|
1873
|
+
overlay.addEventListener("touchmove", gestureHandlers.handleTouchMove, { passive: false });
|
|
1874
|
+
overlay.addEventListener("touchend", gestureHandlers.handleTouchEnd, { passive: true });
|
|
1875
|
+
image.addEventListener("mousedown", gestureHandlers.handleMouseDown);
|
|
1876
|
+
document.addEventListener("mousemove", gestureHandlers.handleMouseMove);
|
|
1877
|
+
document.addEventListener("mouseup", gestureHandlers.handleMouseUp);
|
|
1878
|
+
overlay.addEventListener("wheel", gestureHandlers.handleWheel, { passive: false });
|
|
1879
|
+
(_a = overlay.querySelector(".v-image-preview-close")) == null ? void 0 : _a.addEventListener("click", (e) => {
|
|
1880
|
+
e.stopPropagation();
|
|
1881
|
+
closePreview();
|
|
1882
|
+
});
|
|
1883
|
+
if (state.options.closeOnClickOutside !== false) {
|
|
1884
|
+
overlay.addEventListener("click", () => {
|
|
1885
|
+
if (state.transform.scale <= 1) {
|
|
1886
|
+
closePreview();
|
|
1887
|
+
} else {
|
|
1888
|
+
transformManager.resetTransform();
|
|
1889
|
+
}
|
|
1890
|
+
});
|
|
1891
|
+
}
|
|
1892
|
+
if (state.options.closeOnEsc !== false) {
|
|
1893
|
+
state.handlers.esc = (e) => {
|
|
1894
|
+
if (e.key === "Escape") {
|
|
1895
|
+
state.transform.scale > 1 ? transformManager.resetTransform() : closePreview();
|
|
1896
|
+
}
|
|
1897
|
+
};
|
|
1898
|
+
document.addEventListener("keydown", state.handlers.esc);
|
|
1899
|
+
}
|
|
1900
|
+
(_c = (_b = state.options).onOpen) == null ? void 0 : _c.call(_b);
|
|
1901
|
+
};
|
|
1902
|
+
state.handlers.click = openPreview;
|
|
1903
|
+
el.addEventListener("click", openPreview);
|
|
1904
|
+
},
|
|
1905
|
+
updated(el, binding) {
|
|
1906
|
+
const state = el.__imagePreview;
|
|
1907
|
+
if (!state) return;
|
|
1908
|
+
state.options = normalizeOptions$l(binding.value, el);
|
|
1909
|
+
el.style.cursor = state.options.disabled ? "" : "zoom-in";
|
|
1910
|
+
},
|
|
1911
|
+
unmounted(el) {
|
|
1912
|
+
const state = el.__imagePreview;
|
|
1913
|
+
if (!state) return;
|
|
1914
|
+
el.removeEventListener("click", state.handlers.click);
|
|
1915
|
+
if (state.isOpen && state.overlay) {
|
|
1916
|
+
state.overlay.remove();
|
|
1917
|
+
document.body.style.overflow = "";
|
|
1918
|
+
}
|
|
1919
|
+
if (state.handlers.esc) document.removeEventListener("keydown", state.handlers.esc);
|
|
1920
|
+
if (state.handlers.touchStart) document.removeEventListener("touchstart", state.handlers.touchStart);
|
|
1921
|
+
if (state.handlers.touchMove) document.removeEventListener("touchmove", state.handlers.touchMove);
|
|
1922
|
+
if (state.handlers.touchEnd) document.removeEventListener("touchend", state.handlers.touchEnd);
|
|
1923
|
+
if (state.handlers.mouseDown) document.removeEventListener("mousedown", state.handlers.mouseDown);
|
|
1924
|
+
if (state.handlers.mouseMove) document.removeEventListener("mousemove", state.handlers.mouseMove);
|
|
1925
|
+
if (state.handlers.mouseUp) document.removeEventListener("mouseup", state.handlers.mouseUp);
|
|
1926
|
+
if (state.handlers.wheel) document.removeEventListener("wheel", state.handlers.wheel);
|
|
1927
|
+
delete el.__imagePreview;
|
|
1928
|
+
}
|
|
1929
|
+
});
|
|
1930
|
+
function normalizeOptions$k(binding) {
|
|
1931
|
+
if (typeof binding === "function") {
|
|
1932
|
+
return { handler: binding, distance: 0, throttle: 200, useIntersection: true };
|
|
1933
|
+
}
|
|
1934
|
+
if (!binding) {
|
|
1935
|
+
throw new Error("[Directix] v-infinite-scroll: handler is required");
|
|
1936
|
+
}
|
|
1937
|
+
return __spreadValues({
|
|
1938
|
+
distance: 0,
|
|
1939
|
+
disabled: false,
|
|
1940
|
+
loading: false,
|
|
1941
|
+
useIntersection: true,
|
|
1942
|
+
throttle: 200
|
|
1943
|
+
}, binding);
|
|
1944
|
+
}
|
|
1945
|
+
const vInfiniteScroll = defineDirective({
|
|
1946
|
+
name: "infinite-scroll",
|
|
1947
|
+
ssr: false,
|
|
1948
|
+
defaults: {
|
|
1949
|
+
distance: 0,
|
|
1950
|
+
disabled: false,
|
|
1951
|
+
loading: false,
|
|
1952
|
+
useIntersection: true,
|
|
1953
|
+
throttle: 200
|
|
1954
|
+
},
|
|
1955
|
+
mounted(el, binding) {
|
|
1956
|
+
const options = normalizeOptions$k(binding.value);
|
|
1957
|
+
if (options.disabled || !isBrowser()) return;
|
|
1958
|
+
let container;
|
|
1959
|
+
if (options.container) {
|
|
1960
|
+
if (typeof options.container === "string") {
|
|
1961
|
+
const found = document.querySelector(options.container);
|
|
1962
|
+
container = found || getScrollParent(el);
|
|
1963
|
+
} else {
|
|
1964
|
+
container = options.container;
|
|
1965
|
+
}
|
|
1966
|
+
} else {
|
|
1967
|
+
container = getScrollParent(el);
|
|
1968
|
+
}
|
|
1969
|
+
const state = {
|
|
1970
|
+
options,
|
|
1971
|
+
container,
|
|
1972
|
+
sentinel: null,
|
|
1973
|
+
observer: null,
|
|
1974
|
+
throttleTimer: null,
|
|
1975
|
+
isLoading: false,
|
|
1976
|
+
scrollHandler: (_e) => __async(null, null, function* () {
|
|
1977
|
+
if (state.isLoading || state.options.disabled || state.options.loading) {
|
|
1978
|
+
return;
|
|
1979
|
+
}
|
|
1980
|
+
if (state.throttleTimer) {
|
|
1981
|
+
return;
|
|
1982
|
+
}
|
|
1983
|
+
state.throttleTimer = setTimeout(() => {
|
|
1984
|
+
state.throttleTimer = null;
|
|
1985
|
+
}, options.throttle);
|
|
1986
|
+
const shouldLoad = checkShouldLoad(container, el, options.distance || 0);
|
|
1987
|
+
if (shouldLoad) {
|
|
1988
|
+
yield triggerLoad(state, el);
|
|
1989
|
+
}
|
|
1990
|
+
})
|
|
1991
|
+
};
|
|
1992
|
+
el.__infiniteScroll = state;
|
|
1993
|
+
if (options.useIntersection && supportsIntersectionObserver()) {
|
|
1994
|
+
setupIntersectionObserver(el, state);
|
|
1995
|
+
} else {
|
|
1996
|
+
on(container, "scroll", state.scrollHandler, { passive: true });
|
|
1997
|
+
}
|
|
1998
|
+
},
|
|
1999
|
+
updated(el, binding) {
|
|
2000
|
+
const state = el.__infiniteScroll;
|
|
2001
|
+
if (!state) return;
|
|
2002
|
+
state.options = normalizeOptions$k(binding.value);
|
|
2003
|
+
},
|
|
2004
|
+
unmounted(el) {
|
|
2005
|
+
const state = el.__infiniteScroll;
|
|
2006
|
+
if (!state) return;
|
|
2007
|
+
if (state.throttleTimer) {
|
|
2008
|
+
clearTimeout(state.throttleTimer);
|
|
2009
|
+
}
|
|
2010
|
+
if (state.observer) {
|
|
2011
|
+
state.observer.disconnect();
|
|
2012
|
+
}
|
|
2013
|
+
if (state.sentinel && state.sentinel.parentNode) {
|
|
2014
|
+
state.sentinel.parentNode.removeChild(state.sentinel);
|
|
2015
|
+
}
|
|
2016
|
+
off(state.container, "scroll", state.scrollHandler);
|
|
2017
|
+
delete el.__infiniteScroll;
|
|
2018
|
+
}
|
|
2019
|
+
});
|
|
2020
|
+
function checkShouldLoad(container, _el, distance) {
|
|
2021
|
+
if (container === window) {
|
|
2022
|
+
const scrollTop2 = window.scrollY || document.documentElement.scrollTop;
|
|
2023
|
+
const scrollHeight2 = document.documentElement.scrollHeight;
|
|
2024
|
+
const clientHeight2 = window.innerHeight;
|
|
2025
|
+
return scrollTop2 + clientHeight2 >= scrollHeight2 - distance;
|
|
2026
|
+
}
|
|
2027
|
+
const el = container;
|
|
2028
|
+
const scrollTop = el.scrollTop;
|
|
2029
|
+
const scrollHeight = el.scrollHeight;
|
|
2030
|
+
const clientHeight = el.clientHeight;
|
|
2031
|
+
return scrollTop + clientHeight >= scrollHeight - distance;
|
|
2032
|
+
}
|
|
2033
|
+
function triggerLoad(state, el) {
|
|
2034
|
+
return __async(this, null, function* () {
|
|
2035
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2036
|
+
state.isLoading = true;
|
|
2037
|
+
(_b = (_a = state.options).onLoadStart) == null ? void 0 : _b.call(_a);
|
|
2038
|
+
el.classList.add("v-infinite-scroll--loading");
|
|
2039
|
+
try {
|
|
2040
|
+
yield state.options.handler();
|
|
2041
|
+
} catch (err) {
|
|
2042
|
+
(_d = (_c = state.options).onError) == null ? void 0 : _d.call(_c, err);
|
|
2043
|
+
} finally {
|
|
2044
|
+
state.isLoading = false;
|
|
2045
|
+
(_f = (_e = state.options).onLoadEnd) == null ? void 0 : _f.call(_e);
|
|
2046
|
+
el.classList.remove("v-infinite-scroll--loading");
|
|
2047
|
+
}
|
|
2048
|
+
});
|
|
2049
|
+
}
|
|
2050
|
+
function setupIntersectionObserver(el, state) {
|
|
2051
|
+
const sentinel = document.createElement("div");
|
|
2052
|
+
sentinel.className = "v-infinite-scroll__sentinel";
|
|
2053
|
+
sentinel.style.cssText = `
|
|
2054
|
+
height: 1px;
|
|
2055
|
+
width: 100%;
|
|
2056
|
+
clear: both;
|
|
2057
|
+
`;
|
|
2058
|
+
el.appendChild(sentinel);
|
|
2059
|
+
state.sentinel = sentinel;
|
|
2060
|
+
state.observer = new IntersectionObserver(
|
|
2061
|
+
(entries) => __async(null, null, function* () {
|
|
2062
|
+
for (const entry of entries) {
|
|
2063
|
+
if (entry.isIntersecting) {
|
|
2064
|
+
if (!state.isLoading && !state.options.disabled && !state.options.loading) {
|
|
2065
|
+
yield triggerLoad(state, el);
|
|
2066
|
+
}
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
}),
|
|
2070
|
+
{
|
|
2071
|
+
root: state.container === window ? null : state.container,
|
|
2072
|
+
rootMargin: `${state.options.distance || 0}px`,
|
|
2073
|
+
threshold: 0
|
|
2074
|
+
}
|
|
2075
|
+
);
|
|
2076
|
+
state.observer.observe(sentinel);
|
|
2077
|
+
}
|
|
2078
|
+
const STATE_KEY$3 = "__intersect";
|
|
2079
|
+
function normalizeOptions$j(binding) {
|
|
2080
|
+
const options = typeof binding === "function" ? { handler: binding } : __spreadValues({}, binding);
|
|
2081
|
+
if (options.root !== null && typeof options.root === "object" && "value" in options.root) {
|
|
2082
|
+
options.root = options.root.value;
|
|
2083
|
+
}
|
|
2084
|
+
return options;
|
|
2085
|
+
}
|
|
2086
|
+
function createObserverCallback(el, state, options) {
|
|
2087
|
+
return (entries) => {
|
|
2088
|
+
var _a, _b, _c, _d;
|
|
2089
|
+
for (const entry of entries) {
|
|
2090
|
+
if (options.once && state.hasTriggeredOnce) continue;
|
|
2091
|
+
const { isIntersecting } = entry;
|
|
2092
|
+
(_a = options.handler) == null ? void 0 : _a.call(options, entry, state.observer);
|
|
2093
|
+
(_b = options.onChange) == null ? void 0 : _b.call(options, isIntersecting, entry);
|
|
2094
|
+
if (isIntersecting) {
|
|
2095
|
+
(_c = options.onEnter) == null ? void 0 : _c.call(options, entry, state.observer);
|
|
2096
|
+
if (options.once) state.hasTriggeredOnce = true;
|
|
2097
|
+
} else {
|
|
2098
|
+
(_d = options.onLeave) == null ? void 0 : _d.call(options, entry, state.observer);
|
|
2099
|
+
}
|
|
2100
|
+
el.dispatchEvent(new CustomEvent("intersect", { detail: { isIntersecting, entry } }));
|
|
2101
|
+
}
|
|
2102
|
+
};
|
|
2103
|
+
}
|
|
2104
|
+
function createObserver(el, state, options) {
|
|
2105
|
+
return new IntersectionObserver(createObserverCallback(el, state, options), {
|
|
2106
|
+
root: options.root,
|
|
2107
|
+
rootMargin: options.rootMargin,
|
|
2108
|
+
threshold: options.threshold
|
|
2109
|
+
});
|
|
2110
|
+
}
|
|
2111
|
+
const vIntersect = defineDirective({
|
|
2112
|
+
name: "intersect",
|
|
2113
|
+
ssr: false,
|
|
2114
|
+
defaults: {
|
|
2115
|
+
disabled: false,
|
|
2116
|
+
once: false,
|
|
2117
|
+
rootMargin: "0px",
|
|
2118
|
+
threshold: 0
|
|
2119
|
+
},
|
|
2120
|
+
mounted(el, binding) {
|
|
2121
|
+
const options = normalizeOptions$j(binding.value);
|
|
2122
|
+
if (options.disabled || !isBrowser() || !supportsIntersectionObserver()) {
|
|
2123
|
+
if (!supportsIntersectionObserver()) {
|
|
2124
|
+
console.warn("[Directix] v-intersect: IntersectionObserver not supported");
|
|
2125
|
+
}
|
|
2126
|
+
return;
|
|
2127
|
+
}
|
|
2128
|
+
const state = {
|
|
2129
|
+
options,
|
|
2130
|
+
observer: null,
|
|
2131
|
+
hasTriggeredOnce: false
|
|
2132
|
+
};
|
|
2133
|
+
state.observer = createObserver(el, state, options);
|
|
2134
|
+
el[STATE_KEY$3] = state;
|
|
2135
|
+
state.observer.observe(el);
|
|
2136
|
+
},
|
|
2137
|
+
updated(el, binding) {
|
|
2138
|
+
var _a, _b, _c;
|
|
2139
|
+
const state = el[STATE_KEY$3];
|
|
2140
|
+
if (!state) return;
|
|
2141
|
+
const newOptions = normalizeOptions$j(binding.value);
|
|
2142
|
+
const observerOptionsChanged = newOptions.root !== state.options.root || newOptions.rootMargin !== state.options.rootMargin || newOptions.threshold !== state.options.threshold;
|
|
2143
|
+
if (newOptions.disabled !== state.options.disabled) {
|
|
2144
|
+
if (newOptions.disabled) {
|
|
2145
|
+
(_a = state.observer) == null ? void 0 : _a.disconnect();
|
|
2146
|
+
} else {
|
|
2147
|
+
(_b = state.observer) == null ? void 0 : _b.observe(el);
|
|
2148
|
+
}
|
|
2149
|
+
}
|
|
2150
|
+
if (observerOptionsChanged) {
|
|
2151
|
+
(_c = state.observer) == null ? void 0 : _c.disconnect();
|
|
2152
|
+
state.observer = createObserver(el, state, newOptions);
|
|
2153
|
+
state.observer.observe(el);
|
|
2154
|
+
}
|
|
2155
|
+
state.options = newOptions;
|
|
2156
|
+
},
|
|
2157
|
+
unmounted(el) {
|
|
2158
|
+
var _a;
|
|
2159
|
+
const state = el[STATE_KEY$3];
|
|
2160
|
+
if (!state) return;
|
|
2161
|
+
(_a = state.observer) == null ? void 0 : _a.disconnect();
|
|
2162
|
+
delete el[STATE_KEY$3];
|
|
2163
|
+
}
|
|
2164
|
+
});
|
|
2165
|
+
let globalObserver = null;
|
|
2166
|
+
function getGlobalObserver(preload) {
|
|
2167
|
+
if (globalObserver) return globalObserver;
|
|
2168
|
+
globalObserver = new IntersectionObserver(
|
|
2169
|
+
(entries) => {
|
|
2170
|
+
entries.forEach((entry) => {
|
|
2171
|
+
if (entry.isIntersecting) {
|
|
2172
|
+
load(entry.target);
|
|
2173
|
+
globalObserver == null ? void 0 : globalObserver.unobserve(entry.target);
|
|
2174
|
+
}
|
|
2175
|
+
});
|
|
2176
|
+
},
|
|
2177
|
+
{
|
|
2178
|
+
rootMargin: `${preload}px`
|
|
2179
|
+
}
|
|
2180
|
+
);
|
|
2181
|
+
return globalObserver;
|
|
2182
|
+
}
|
|
2183
|
+
function setSrc(el, src) {
|
|
2184
|
+
if (el.tagName === "IMG") {
|
|
2185
|
+
el.src = src;
|
|
2186
|
+
} else {
|
|
2187
|
+
el.style.backgroundImage = `url("${src}")`;
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
function setLazyState(el, state) {
|
|
2191
|
+
el.dataset.lazyState = state;
|
|
2192
|
+
}
|
|
2193
|
+
function getLazyState(el) {
|
|
2194
|
+
return el.dataset.lazyState || "pending";
|
|
2195
|
+
}
|
|
2196
|
+
function load(el) {
|
|
2197
|
+
const state = el.__lazy;
|
|
2198
|
+
if (!state || !state.options.src) return;
|
|
2199
|
+
if (state.options.filter && !state.options.filter(state.options.src)) {
|
|
2200
|
+
return;
|
|
2201
|
+
}
|
|
2202
|
+
setLazyState(el, "loading");
|
|
2203
|
+
state.attempt++;
|
|
2204
|
+
el.classList.add("v-lazy--loading");
|
|
2205
|
+
const img = new Image();
|
|
2206
|
+
img.onload = () => {
|
|
2207
|
+
var _a, _b;
|
|
2208
|
+
setSrc(el, state.options.src);
|
|
2209
|
+
setLazyState(el, "loaded");
|
|
2210
|
+
el.classList.remove("v-lazy--loading");
|
|
2211
|
+
el.classList.add("v-lazy--loaded");
|
|
2212
|
+
(_b = (_a = state.options).onLoad) == null ? void 0 : _b.call(_a, el);
|
|
2213
|
+
};
|
|
2214
|
+
img.onerror = () => {
|
|
2215
|
+
var _a, _b;
|
|
2216
|
+
el.classList.remove("v-lazy--loading");
|
|
2217
|
+
if (state.attempt < (state.options.attempt || 1)) {
|
|
2218
|
+
setTimeout(() => load(el), 1e3 * state.attempt);
|
|
2219
|
+
return;
|
|
2220
|
+
}
|
|
2221
|
+
if (state.options.error) {
|
|
2222
|
+
setSrc(el, state.options.error);
|
|
2223
|
+
}
|
|
2224
|
+
setLazyState(el, "error");
|
|
2225
|
+
el.classList.add("v-lazy--error");
|
|
2226
|
+
(_b = (_a = state.options).onError) == null ? void 0 : _b.call(_a, el, new Error("Failed to load image"));
|
|
2227
|
+
};
|
|
2228
|
+
img.src = state.options.src;
|
|
2229
|
+
}
|
|
2230
|
+
function observe(el) {
|
|
2231
|
+
const state = el.__lazy;
|
|
2232
|
+
if (!state) return;
|
|
2233
|
+
if (!supportsIntersectionObserver()) {
|
|
2234
|
+
load(el);
|
|
2235
|
+
return;
|
|
2236
|
+
}
|
|
2237
|
+
if (state.options.observer) {
|
|
2238
|
+
state.observer = state.options.observer;
|
|
2239
|
+
state.observer.observe(el);
|
|
2240
|
+
} else {
|
|
2241
|
+
const observer = getGlobalObserver(state.options.preload || 0);
|
|
2242
|
+
state.observer = observer;
|
|
2243
|
+
observer.observe(el);
|
|
2244
|
+
}
|
|
2245
|
+
}
|
|
2246
|
+
function unobserve(el) {
|
|
2247
|
+
const state = el.__lazy;
|
|
2248
|
+
if (!state) return;
|
|
2249
|
+
if (state.observer) {
|
|
2250
|
+
state.observer.unobserve(el);
|
|
2251
|
+
} else if (globalObserver) {
|
|
2252
|
+
globalObserver.unobserve(el);
|
|
2253
|
+
}
|
|
2254
|
+
}
|
|
2255
|
+
function normalizeOptions$i(binding) {
|
|
2256
|
+
if (typeof binding === "string") {
|
|
2257
|
+
return { src: binding };
|
|
2258
|
+
}
|
|
2259
|
+
return binding || {};
|
|
2260
|
+
}
|
|
2261
|
+
const vLazy = defineDirective({
|
|
2262
|
+
name: "lazy",
|
|
2263
|
+
ssr: false,
|
|
2264
|
+
defaults: {
|
|
2265
|
+
preload: 0,
|
|
2266
|
+
attempt: 1,
|
|
2267
|
+
disabled: false
|
|
2268
|
+
},
|
|
2269
|
+
mounted(el, binding) {
|
|
2270
|
+
const options = normalizeOptions$i(binding.value);
|
|
2271
|
+
if (options.disabled) return;
|
|
2272
|
+
if (!options.src) {
|
|
2273
|
+
console.warn("[Directix] v-lazy: No source provided");
|
|
2274
|
+
return;
|
|
2275
|
+
}
|
|
2276
|
+
setLazyState(el, "pending");
|
|
2277
|
+
if (options.placeholder) {
|
|
2278
|
+
setSrc(el, options.placeholder);
|
|
2279
|
+
}
|
|
2280
|
+
el.classList.add("v-lazy");
|
|
2281
|
+
const state = {
|
|
2282
|
+
options,
|
|
2283
|
+
attempt: 0
|
|
2284
|
+
};
|
|
2285
|
+
el.__lazy = state;
|
|
2286
|
+
observe(el);
|
|
2287
|
+
},
|
|
2288
|
+
updated(el, binding) {
|
|
2289
|
+
const state = el.__lazy;
|
|
2290
|
+
if (!state) return;
|
|
2291
|
+
const newOptions = normalizeOptions$i(binding.value);
|
|
2292
|
+
if (newOptions.disabled) {
|
|
2293
|
+
unobserve(el);
|
|
2294
|
+
return;
|
|
2295
|
+
}
|
|
2296
|
+
if (newOptions.src !== state.options.src) {
|
|
2297
|
+
state.options = newOptions;
|
|
2298
|
+
state.attempt = 0;
|
|
2299
|
+
if (getLazyState(el) !== "pending") {
|
|
2300
|
+
setLazyState(el, "pending");
|
|
2301
|
+
el.classList.remove("v-lazy--loaded", "v-lazy--error");
|
|
2302
|
+
if (newOptions.placeholder) {
|
|
2303
|
+
setSrc(el, newOptions.placeholder);
|
|
2304
|
+
}
|
|
2305
|
+
observe(el);
|
|
2306
|
+
}
|
|
2307
|
+
}
|
|
2308
|
+
},
|
|
2309
|
+
unmounted(el) {
|
|
2310
|
+
unobserve(el);
|
|
2311
|
+
delete el.__lazy;
|
|
2312
|
+
}
|
|
2313
|
+
});
|
|
2314
|
+
function normalizeOptions$h(binding) {
|
|
2315
|
+
if (typeof binding === "boolean") {
|
|
2316
|
+
return { value: binding };
|
|
2317
|
+
}
|
|
2318
|
+
return __spreadValues({
|
|
2319
|
+
value: true,
|
|
2320
|
+
loadingClass: "v-loading",
|
|
2321
|
+
spinnerClass: "v-loading__spinner",
|
|
2322
|
+
textClass: "v-loading__text",
|
|
2323
|
+
background: "rgba(255, 255, 255, 0.9)",
|
|
2324
|
+
lock: false,
|
|
2325
|
+
disabled: false
|
|
2326
|
+
}, binding);
|
|
2327
|
+
}
|
|
2328
|
+
const DEFAULT_SPINNER = `
|
|
2329
|
+
<svg class="v-loading__circular" viewBox="25 25 50 50">
|
|
2330
|
+
<circle class="v-loading__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
|
|
2331
|
+
</svg>
|
|
2332
|
+
`;
|
|
2333
|
+
function createLoadingOverlay(options) {
|
|
2334
|
+
const overlay = document.createElement("div");
|
|
2335
|
+
overlay.className = options.loadingClass || "v-loading";
|
|
2336
|
+
overlay.style.cssText = `
|
|
2337
|
+
position: absolute;
|
|
2338
|
+
top: 0;
|
|
2339
|
+
left: 0;
|
|
2340
|
+
right: 0;
|
|
2341
|
+
bottom: 0;
|
|
2342
|
+
z-index: 1000;
|
|
2343
|
+
background: ${options.background || "rgba(255, 255, 255, 0.9)"};
|
|
2344
|
+
display: flex;
|
|
2345
|
+
flex-direction: column;
|
|
2346
|
+
align-items: center;
|
|
2347
|
+
justify-content: center;
|
|
2348
|
+
`;
|
|
2349
|
+
const spinnerHtml = options.spinner || DEFAULT_SPINNER;
|
|
2350
|
+
const spinnerContainer = document.createElement("div");
|
|
2351
|
+
spinnerContainer.className = options.spinnerClass || "v-loading__spinner";
|
|
2352
|
+
spinnerContainer.innerHTML = spinnerHtml;
|
|
2353
|
+
overlay.appendChild(spinnerContainer);
|
|
2354
|
+
if (options.text) {
|
|
2355
|
+
const textEl = document.createElement("div");
|
|
2356
|
+
textEl.className = options.textClass || "v-loading__text";
|
|
2357
|
+
textEl.textContent = options.text;
|
|
2358
|
+
overlay.appendChild(textEl);
|
|
2359
|
+
}
|
|
2360
|
+
return overlay;
|
|
2361
|
+
}
|
|
2362
|
+
const vLoading = defineDirective({
|
|
2363
|
+
name: "loading",
|
|
2364
|
+
ssr: true,
|
|
2365
|
+
// SSR safe - will skip DOM manipulation on server
|
|
2366
|
+
defaults: {
|
|
2367
|
+
value: true,
|
|
2368
|
+
loadingClass: "v-loading",
|
|
2369
|
+
spinnerClass: "v-loading__spinner",
|
|
2370
|
+
textClass: "v-loading__text",
|
|
2371
|
+
background: "rgba(255, 255, 255, 0.9)",
|
|
2372
|
+
lock: false,
|
|
2373
|
+
disabled: false
|
|
2374
|
+
},
|
|
2375
|
+
mounted(el, binding) {
|
|
2376
|
+
if (!isBrowser()) return;
|
|
2377
|
+
const options = normalizeOptions$h(binding.value);
|
|
2378
|
+
if (options.disabled) return;
|
|
2379
|
+
const computedStyle = getComputedStyle(el);
|
|
2380
|
+
const originalPosition = el.style.position;
|
|
2381
|
+
const originalOverflow = el.style.overflow;
|
|
2382
|
+
const state = {
|
|
2383
|
+
options,
|
|
2384
|
+
loadingOverlay: null,
|
|
2385
|
+
originalPosition,
|
|
2386
|
+
originalOverflow
|
|
2387
|
+
};
|
|
2388
|
+
el.__loading = state;
|
|
2389
|
+
if (computedStyle.position === "static") {
|
|
2390
|
+
el.style.position = "relative";
|
|
2391
|
+
}
|
|
2392
|
+
if (options.value) {
|
|
2393
|
+
showLoading(el, state);
|
|
2394
|
+
}
|
|
2395
|
+
},
|
|
2396
|
+
updated(el, binding) {
|
|
2397
|
+
const state = el.__loading;
|
|
2398
|
+
if (!state) return;
|
|
2399
|
+
const newOptions = normalizeOptions$h(binding.value);
|
|
2400
|
+
if (newOptions.disabled) {
|
|
2401
|
+
hideLoading(el, state);
|
|
2402
|
+
return;
|
|
2403
|
+
}
|
|
2404
|
+
if (newOptions.value && !state.options.value) {
|
|
2405
|
+
showLoading(el, state);
|
|
2406
|
+
} else if (!newOptions.value && state.options.value) {
|
|
2407
|
+
hideLoading(el, state);
|
|
2408
|
+
}
|
|
2409
|
+
if (state.loadingOverlay && newOptions.text !== state.options.text) {
|
|
2410
|
+
const textEl = state.loadingOverlay.querySelector(`.${state.options.textClass}`);
|
|
2411
|
+
if (textEl) {
|
|
2412
|
+
textEl.textContent = newOptions.text || "";
|
|
2413
|
+
}
|
|
2414
|
+
}
|
|
2415
|
+
state.options = newOptions;
|
|
2416
|
+
},
|
|
2417
|
+
unmounted(el) {
|
|
2418
|
+
const state = el.__loading;
|
|
2419
|
+
if (!state) return;
|
|
2420
|
+
hideLoading(el, state);
|
|
2421
|
+
el.style.position = state.originalPosition;
|
|
2422
|
+
el.style.overflow = state.originalOverflow;
|
|
2423
|
+
delete el.__loading;
|
|
2424
|
+
}
|
|
2425
|
+
});
|
|
2426
|
+
function showLoading(el, state) {
|
|
2427
|
+
if (state.loadingOverlay) return;
|
|
2428
|
+
state.loadingOverlay = createLoadingOverlay(state.options);
|
|
2429
|
+
el.appendChild(state.loadingOverlay);
|
|
2430
|
+
if (state.options.lock) {
|
|
2431
|
+
el.style.overflow = "hidden";
|
|
2432
|
+
}
|
|
2433
|
+
el.classList.add("v-loading--active");
|
|
2434
|
+
}
|
|
2435
|
+
function hideLoading(el, state) {
|
|
2436
|
+
if (!state.loadingOverlay) return;
|
|
2437
|
+
state.loadingOverlay.remove();
|
|
2438
|
+
state.loadingOverlay = null;
|
|
2439
|
+
if (state.options.lock) {
|
|
2440
|
+
el.style.overflow = state.originalOverflow;
|
|
2441
|
+
}
|
|
2442
|
+
el.classList.remove("v-loading--active");
|
|
2443
|
+
}
|
|
2444
|
+
function normalizeOptions$g(binding) {
|
|
2445
|
+
if (typeof binding === "function") {
|
|
2446
|
+
return { handler: binding, duration: 500, distance: 10 };
|
|
2447
|
+
}
|
|
2448
|
+
if (!binding) {
|
|
2449
|
+
throw new Error("[Directix] v-long-press: handler is required");
|
|
2450
|
+
}
|
|
2451
|
+
return __spreadValues({
|
|
2452
|
+
duration: 500,
|
|
2453
|
+
distance: 10,
|
|
2454
|
+
disabled: false,
|
|
2455
|
+
prevent: true,
|
|
2456
|
+
stop: false,
|
|
2457
|
+
tickInterval: 100
|
|
2458
|
+
}, binding);
|
|
2459
|
+
}
|
|
2460
|
+
function getDistance$1(p1, p2) {
|
|
2461
|
+
return Math.sqrt(__pow(p2.x - p1.x, 2) + __pow(p2.y - p1.y, 2));
|
|
2462
|
+
}
|
|
2463
|
+
const vLongPress = defineDirective({
|
|
2464
|
+
name: "long-press",
|
|
2465
|
+
ssr: false,
|
|
2466
|
+
defaults: {
|
|
2467
|
+
duration: 500,
|
|
2468
|
+
distance: 10,
|
|
2469
|
+
disabled: false,
|
|
2470
|
+
prevent: true,
|
|
2471
|
+
stop: false,
|
|
2472
|
+
tickInterval: 100
|
|
2473
|
+
},
|
|
2474
|
+
mounted(el, binding) {
|
|
2475
|
+
const options = normalizeOptions$g(binding.value);
|
|
2476
|
+
if (options.disabled || !isBrowser()) return;
|
|
2477
|
+
const state = {
|
|
2478
|
+
options,
|
|
2479
|
+
timerId: null,
|
|
2480
|
+
tickTimerId: null,
|
|
2481
|
+
startTime: 0,
|
|
2482
|
+
startPos: { x: 0, y: 0 },
|
|
2483
|
+
startHandler: () => {
|
|
2484
|
+
},
|
|
2485
|
+
endHandler: () => {
|
|
2486
|
+
},
|
|
2487
|
+
moveHandler: () => {
|
|
2488
|
+
}
|
|
2489
|
+
};
|
|
2490
|
+
state.startHandler = (e) => {
|
|
2491
|
+
var _a;
|
|
2492
|
+
const event = e;
|
|
2493
|
+
if (options.prevent) {
|
|
2494
|
+
event.preventDefault();
|
|
2495
|
+
}
|
|
2496
|
+
if (options.stop) {
|
|
2497
|
+
event.stopPropagation();
|
|
2498
|
+
}
|
|
2499
|
+
if (state.timerId) {
|
|
2500
|
+
clearTimeout(state.timerId);
|
|
2501
|
+
state.timerId = null;
|
|
2502
|
+
}
|
|
2503
|
+
if (state.tickTimerId) {
|
|
2504
|
+
clearInterval(state.tickTimerId);
|
|
2505
|
+
state.tickTimerId = null;
|
|
2506
|
+
}
|
|
2507
|
+
const pos = getEventPosition(event);
|
|
2508
|
+
state.startPos = { x: pos.x, y: pos.y };
|
|
2509
|
+
state.startTime = Date.now();
|
|
2510
|
+
(_a = options.onStart) == null ? void 0 : _a.call(options, event);
|
|
2511
|
+
if (options.onTick) {
|
|
2512
|
+
let remaining = options.duration;
|
|
2513
|
+
state.tickTimerId = setInterval(() => {
|
|
2514
|
+
var _a2;
|
|
2515
|
+
remaining -= options.tickInterval;
|
|
2516
|
+
(_a2 = options.onTick) == null ? void 0 : _a2.call(options, Math.max(0, remaining));
|
|
2517
|
+
}, options.tickInterval);
|
|
2518
|
+
}
|
|
2519
|
+
state.timerId = setTimeout(() => {
|
|
2520
|
+
if (state.tickTimerId) {
|
|
2521
|
+
clearInterval(state.tickTimerId);
|
|
2522
|
+
state.tickTimerId = null;
|
|
2523
|
+
}
|
|
2524
|
+
options.handler(event);
|
|
2525
|
+
}, options.duration);
|
|
2526
|
+
};
|
|
2527
|
+
state.endHandler = (e) => {
|
|
2528
|
+
var _a;
|
|
2529
|
+
const event = e;
|
|
2530
|
+
if (state.timerId) {
|
|
2531
|
+
clearTimeout(state.timerId);
|
|
2532
|
+
state.timerId = null;
|
|
2533
|
+
}
|
|
2534
|
+
if (state.tickTimerId) {
|
|
2535
|
+
clearInterval(state.tickTimerId);
|
|
2536
|
+
state.tickTimerId = null;
|
|
2537
|
+
}
|
|
2538
|
+
if (state.startTime > 0) {
|
|
2539
|
+
(_a = options.onCancel) == null ? void 0 : _a.call(options, event);
|
|
2540
|
+
}
|
|
2541
|
+
state.startTime = 0;
|
|
2542
|
+
};
|
|
2543
|
+
state.moveHandler = (e) => {
|
|
2544
|
+
var _a;
|
|
2545
|
+
if (!state.timerId) return;
|
|
2546
|
+
const event = e;
|
|
2547
|
+
const pos = getEventPosition(event);
|
|
2548
|
+
const distance = getDistance$1(state.startPos, { x: pos.x, y: pos.y });
|
|
2549
|
+
if (distance > (options.distance || 10)) {
|
|
2550
|
+
if (state.timerId) {
|
|
2551
|
+
clearTimeout(state.timerId);
|
|
2552
|
+
state.timerId = null;
|
|
2553
|
+
}
|
|
2554
|
+
if (state.tickTimerId) {
|
|
2555
|
+
clearInterval(state.tickTimerId);
|
|
2556
|
+
state.tickTimerId = null;
|
|
2557
|
+
}
|
|
2558
|
+
(_a = options.onCancel) == null ? void 0 : _a.call(options, event);
|
|
2559
|
+
state.startTime = 0;
|
|
2560
|
+
}
|
|
2561
|
+
};
|
|
2562
|
+
el.__longPress = state;
|
|
2563
|
+
on(el, "mousedown", state.startHandler);
|
|
2564
|
+
on(el, "mouseup", state.endHandler);
|
|
2565
|
+
on(el, "mouseleave", state.endHandler);
|
|
2566
|
+
on(el, "mousemove", state.moveHandler);
|
|
2567
|
+
on(el, "touchstart", state.startHandler, { passive: !options.prevent });
|
|
2568
|
+
on(el, "touchend", state.endHandler);
|
|
2569
|
+
on(el, "touchcancel", state.endHandler);
|
|
2570
|
+
on(el, "touchmove", state.moveHandler, { passive: true });
|
|
2571
|
+
},
|
|
2572
|
+
updated(el, binding) {
|
|
2573
|
+
const state = el.__longPress;
|
|
2574
|
+
if (!state) {
|
|
2575
|
+
const options = normalizeOptions$g(binding.value);
|
|
2576
|
+
if (!options.disabled) {
|
|
2577
|
+
el.__longPress = null;
|
|
2578
|
+
}
|
|
2579
|
+
return;
|
|
2580
|
+
}
|
|
2581
|
+
state.options = normalizeOptions$g(binding.value);
|
|
2582
|
+
},
|
|
2583
|
+
unmounted(el) {
|
|
2584
|
+
const state = el.__longPress;
|
|
2585
|
+
if (!state) return;
|
|
2586
|
+
if (state.timerId) {
|
|
2587
|
+
clearTimeout(state.timerId);
|
|
2588
|
+
}
|
|
2589
|
+
if (state.tickTimerId) {
|
|
2590
|
+
clearInterval(state.tickTimerId);
|
|
2591
|
+
}
|
|
2592
|
+
off(el, "mousedown", state.startHandler);
|
|
2593
|
+
off(el, "mouseup", state.endHandler);
|
|
2594
|
+
off(el, "mouseleave", state.endHandler);
|
|
2595
|
+
off(el, "mousemove", state.moveHandler);
|
|
2596
|
+
off(el, "touchstart", state.startHandler);
|
|
2597
|
+
off(el, "touchend", state.endHandler);
|
|
2598
|
+
off(el, "touchcancel", state.endHandler);
|
|
2599
|
+
off(el, "touchmove", state.moveHandler);
|
|
2600
|
+
delete el.__longPress;
|
|
2601
|
+
}
|
|
2602
|
+
});
|
|
2603
|
+
function transformText$1(text, options) {
|
|
2604
|
+
if (!text) return text;
|
|
2605
|
+
if (options.first) {
|
|
2606
|
+
return text.charAt(0).toLowerCase() + text.slice(1);
|
|
2607
|
+
}
|
|
2608
|
+
return text.toLowerCase();
|
|
2609
|
+
}
|
|
2610
|
+
function normalizeOptions$f(binding) {
|
|
2611
|
+
var _a, _b;
|
|
2612
|
+
if (binding === void 0 || binding === true) {
|
|
2613
|
+
return { first: false, onInput: true };
|
|
2614
|
+
}
|
|
2615
|
+
if (binding === false) {
|
|
2616
|
+
return { first: false, onInput: false };
|
|
2617
|
+
}
|
|
2618
|
+
return {
|
|
2619
|
+
first: (_a = binding.first) != null ? _a : false,
|
|
2620
|
+
onInput: (_b = binding.onInput) != null ? _b : true
|
|
2621
|
+
};
|
|
2622
|
+
}
|
|
2623
|
+
const vLowercase = defineDirective({
|
|
2624
|
+
name: "lowercase",
|
|
2625
|
+
ssr: true,
|
|
2626
|
+
mounted(el, binding) {
|
|
2627
|
+
const options = normalizeOptions$f(binding.value);
|
|
2628
|
+
if (isInputElement(el)) {
|
|
2629
|
+
const cleanup2 = setupTextTransformInput(el, options, (text) => transformText$1(text, options));
|
|
2630
|
+
el.__lowercaseCleanup = cleanup2;
|
|
2631
|
+
} else {
|
|
2632
|
+
transformTextContent(el, (text) => transformText$1(text, options));
|
|
2633
|
+
}
|
|
2634
|
+
},
|
|
2635
|
+
updated(el, binding) {
|
|
2636
|
+
const options = normalizeOptions$f(binding.value);
|
|
2637
|
+
if (isInputElement(el)) {
|
|
2638
|
+
if (options.onInput) {
|
|
2639
|
+
el.value = transformText$1(el.value, options);
|
|
2640
|
+
}
|
|
2641
|
+
} else {
|
|
2642
|
+
transformTextContent(el, (text) => transformText$1(text, options));
|
|
2643
|
+
}
|
|
2644
|
+
},
|
|
2645
|
+
unmounted(el) {
|
|
2646
|
+
const cleanup2 = el.__lowercaseCleanup;
|
|
2647
|
+
cleanup2 == null ? void 0 : cleanup2();
|
|
2648
|
+
delete el.__lowercaseCleanup;
|
|
2649
|
+
}
|
|
2650
|
+
});
|
|
2651
|
+
const STATE_KEY$2 = "__mask";
|
|
2652
|
+
const TOKEN_PATTERNS = {
|
|
2653
|
+
"#": /\d/,
|
|
2654
|
+
A: /[A-Za-z]/,
|
|
2655
|
+
N: /[A-Za-z0-9]/,
|
|
2656
|
+
X: /./
|
|
2657
|
+
};
|
|
2658
|
+
function parseMask(mask, placeholder) {
|
|
2659
|
+
return [...mask].map((char) => {
|
|
2660
|
+
const pattern = TOKEN_PATTERNS[char];
|
|
2661
|
+
return pattern ? { pattern, placeholder, isLiteral: false } : { pattern: new RegExp(`\\${char}`), placeholder: char, isLiteral: true };
|
|
2662
|
+
});
|
|
2663
|
+
}
|
|
2664
|
+
function normalizeOptions$e(binding) {
|
|
2665
|
+
if (typeof binding === "string") return { mask: binding, placeholder: "_", showPlaceholder: true };
|
|
2666
|
+
if (!(binding == null ? void 0 : binding.mask)) throw new Error("[Directix] v-mask: mask is required");
|
|
2667
|
+
return __spreadValues({ placeholder: "_", showPlaceholder: true, showMaskOnBlur: false, clearIncomplete: false, disabled: false }, binding);
|
|
2668
|
+
}
|
|
2669
|
+
function isInput(el) {
|
|
2670
|
+
return el.tagName === "INPUT" || el.tagName === "TEXTAREA";
|
|
2671
|
+
}
|
|
2672
|
+
function formatValue(value, tokens, placeholder, showPlaceholder) {
|
|
2673
|
+
let result = "", valueIndex = 0;
|
|
2674
|
+
for (const token of tokens) {
|
|
2675
|
+
if (valueIndex >= value.length) {
|
|
2676
|
+
result += token.isLiteral ? token.placeholder : showPlaceholder ? placeholder : "";
|
|
2677
|
+
continue;
|
|
2678
|
+
}
|
|
2679
|
+
const inputChar = value[valueIndex];
|
|
2680
|
+
if (token.isLiteral) {
|
|
2681
|
+
if (inputChar === token.placeholder) valueIndex++;
|
|
2682
|
+
result += token.placeholder;
|
|
2683
|
+
} else if (token.pattern.test(inputChar)) {
|
|
2684
|
+
result += inputChar;
|
|
2685
|
+
valueIndex++;
|
|
2686
|
+
} else if (inputChar === placeholder) {
|
|
2687
|
+
result += showPlaceholder ? placeholder : "";
|
|
2688
|
+
valueIndex++;
|
|
2689
|
+
} else {
|
|
2690
|
+
valueIndex++;
|
|
2691
|
+
}
|
|
2692
|
+
}
|
|
2693
|
+
return result;
|
|
2694
|
+
}
|
|
2695
|
+
function getRawValue(value, tokens, placeholder) {
|
|
2696
|
+
let raw = "";
|
|
2697
|
+
for (let i = 0; i < value.length && i < tokens.length; i++) {
|
|
2698
|
+
if (!tokens[i].isLiteral && value[i] !== placeholder) {
|
|
2699
|
+
raw += value[i];
|
|
2700
|
+
}
|
|
2701
|
+
}
|
|
2702
|
+
return raw;
|
|
2703
|
+
}
|
|
2704
|
+
function isComplete(value, tokens, placeholder) {
|
|
2705
|
+
for (let i = 0; i < tokens.length; i++) {
|
|
2706
|
+
if (!tokens[i].isLiteral && (i >= value.length || value[i] === placeholder)) {
|
|
2707
|
+
return false;
|
|
2708
|
+
}
|
|
2709
|
+
}
|
|
2710
|
+
return true;
|
|
2711
|
+
}
|
|
2712
|
+
function getCursorPos(tokens, rawCursorPos) {
|
|
2713
|
+
let pos = rawCursorPos;
|
|
2714
|
+
while (pos < tokens.length && tokens[pos].isLiteral) {
|
|
2715
|
+
pos++;
|
|
2716
|
+
}
|
|
2717
|
+
return Math.min(pos, tokens.length);
|
|
2718
|
+
}
|
|
2719
|
+
const vMask = defineDirective({
|
|
2720
|
+
name: "mask",
|
|
2721
|
+
ssr: false,
|
|
2722
|
+
defaults: { placeholder: "_", showPlaceholder: true, showMaskOnBlur: false, clearIncomplete: false, disabled: false },
|
|
2723
|
+
mounted(el, binding) {
|
|
2724
|
+
var _a;
|
|
2725
|
+
if (!isInput(el)) {
|
|
2726
|
+
console.warn("[Directix] v-mask: directive must be used on input or textarea elements");
|
|
2727
|
+
return;
|
|
2728
|
+
}
|
|
2729
|
+
const options = normalizeOptions$e(binding.value);
|
|
2730
|
+
if (options.disabled || !isBrowser()) return;
|
|
2731
|
+
const placeholder = options.placeholder || "_";
|
|
2732
|
+
const tokens = parseMask(options.mask, placeholder);
|
|
2733
|
+
const inputHandler = (e) => {
|
|
2734
|
+
var _a2, _b, _c;
|
|
2735
|
+
const target = e.target;
|
|
2736
|
+
const rawValue = target.value;
|
|
2737
|
+
const cursorPos = target.selectionStart || 0;
|
|
2738
|
+
const formatted = formatValue(rawValue, tokens, placeholder, (_a2 = options.showPlaceholder) != null ? _a2 : true);
|
|
2739
|
+
if (formatted !== rawValue) {
|
|
2740
|
+
target.value = formatted;
|
|
2741
|
+
target.setSelectionRange(getCursorPos(tokens, cursorPos), getCursorPos(tokens, cursorPos));
|
|
2742
|
+
target.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2743
|
+
return;
|
|
2744
|
+
}
|
|
2745
|
+
(_b = options.onChange) == null ? void 0 : _b.call(options, formatted, getRawValue(formatted, tokens, placeholder));
|
|
2746
|
+
if (isComplete(formatted, tokens, placeholder)) {
|
|
2747
|
+
(_c = options.onComplete) == null ? void 0 : _c.call(options, formatted);
|
|
2748
|
+
}
|
|
2749
|
+
};
|
|
2750
|
+
const focusHandler = () => {
|
|
2751
|
+
if (!el.value && options.showPlaceholder) {
|
|
2752
|
+
el.value = formatValue("", tokens, placeholder, true);
|
|
2753
|
+
}
|
|
2754
|
+
};
|
|
2755
|
+
const blurHandler = () => {
|
|
2756
|
+
if (!options.showMaskOnBlur && !isComplete(el.value, tokens, placeholder) && options.clearIncomplete) {
|
|
2757
|
+
el.value = "";
|
|
2758
|
+
}
|
|
2759
|
+
};
|
|
2760
|
+
on(el, "input", inputHandler);
|
|
2761
|
+
on(el, "focus", focusHandler);
|
|
2762
|
+
on(el, "blur", blurHandler);
|
|
2763
|
+
el[STATE_KEY$2] = { options, tokens, placeholder, inputHandler, focusHandler, blurHandler };
|
|
2764
|
+
if (el.value) {
|
|
2765
|
+
el.value = formatValue(el.value, tokens, placeholder, (_a = options.showPlaceholder) != null ? _a : true);
|
|
2766
|
+
}
|
|
2767
|
+
},
|
|
2768
|
+
updated(el, binding) {
|
|
2769
|
+
const state = el[STATE_KEY$2];
|
|
2770
|
+
if (!state) return;
|
|
2771
|
+
state.options = normalizeOptions$e(binding.value);
|
|
2772
|
+
state.tokens = parseMask(state.options.mask, state.placeholder);
|
|
2773
|
+
},
|
|
2774
|
+
unmounted(el) {
|
|
2775
|
+
const state = el[STATE_KEY$2];
|
|
2776
|
+
if (!state) return;
|
|
2777
|
+
off(el, "input", state.inputHandler);
|
|
2778
|
+
off(el, "focus", state.focusHandler);
|
|
2779
|
+
off(el, "blur", state.blurHandler);
|
|
2780
|
+
delete el[STATE_KEY$2];
|
|
2781
|
+
}
|
|
2782
|
+
});
|
|
2783
|
+
function formatNumber(value, options) {
|
|
2784
|
+
const { precision = 0, separator = ",", decimal = ".", prefix = "", suffix = "" } = options;
|
|
2785
|
+
const fixed = value.toFixed(precision);
|
|
2786
|
+
const [intPart, decPart] = fixed.split(".");
|
|
2787
|
+
const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
|
|
2788
|
+
let result = formattedInt;
|
|
2789
|
+
if (precision > 0 && decPart) {
|
|
2790
|
+
result += decimal + decPart;
|
|
2791
|
+
}
|
|
2792
|
+
return prefix + result + suffix;
|
|
2793
|
+
}
|
|
2794
|
+
function parseToNumber(value, decimal) {
|
|
2795
|
+
const cleaned = value.replace(/[^\d.-]/g, "").replace(decimal, ".");
|
|
2796
|
+
const num = Number.parseFloat(cleaned);
|
|
2797
|
+
return isNaN(num) ? null : num;
|
|
2798
|
+
}
|
|
2799
|
+
function clampValue(value, options) {
|
|
2800
|
+
var _a;
|
|
2801
|
+
let result = value;
|
|
2802
|
+
const allowNegative = (_a = options.allowNegative) != null ? _a : true;
|
|
2803
|
+
if (!allowNegative && result < 0) {
|
|
2804
|
+
result = Math.abs(result);
|
|
2805
|
+
}
|
|
2806
|
+
if (options.min !== void 0) result = Math.max(options.min, result);
|
|
2807
|
+
if (options.max !== void 0) result = Math.min(options.max, result);
|
|
2808
|
+
return result;
|
|
2809
|
+
}
|
|
2810
|
+
function calculateCursorPosition(rawValue, formatted, cursorPos, startOffset = 0) {
|
|
2811
|
+
let digitsBeforeCursor = 0, digitCount = 0;
|
|
2812
|
+
for (let i = 0; i < cursorPos && i < rawValue.length; i++) {
|
|
2813
|
+
if (/\d/.test(rawValue[i])) {
|
|
2814
|
+
digitsBeforeCursor++;
|
|
2815
|
+
}
|
|
2816
|
+
}
|
|
2817
|
+
for (let i = startOffset; i < formatted.length; i++) {
|
|
2818
|
+
if (/\d/.test(formatted[i])) {
|
|
2819
|
+
digitCount++;
|
|
2820
|
+
}
|
|
2821
|
+
if (digitCount >= digitsBeforeCursor) {
|
|
2822
|
+
return i + 1;
|
|
2823
|
+
}
|
|
2824
|
+
}
|
|
2825
|
+
return formatted.length;
|
|
2826
|
+
}
|
|
2827
|
+
function setupNumberInput(el, options, formatFn) {
|
|
2828
|
+
const { decimal = ".", prefix = "" } = options;
|
|
2829
|
+
let isFormatting = false;
|
|
2830
|
+
const onInput = () => {
|
|
2831
|
+
if (isFormatting) return;
|
|
2832
|
+
const rawValue = el.value;
|
|
2833
|
+
const cursorPos = el.selectionStart || 0;
|
|
2834
|
+
if (!rawValue || rawValue === "-") {
|
|
2835
|
+
return;
|
|
2836
|
+
}
|
|
2837
|
+
const num = parseToNumber(rawValue, decimal);
|
|
2838
|
+
if (num === null) {
|
|
2839
|
+
isFormatting = true;
|
|
2840
|
+
el.value = "";
|
|
2841
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2842
|
+
isFormatting = false;
|
|
2843
|
+
return;
|
|
2844
|
+
}
|
|
2845
|
+
const clamped = clampValue(num, options);
|
|
2846
|
+
const formatted = formatFn(clamped, options);
|
|
2847
|
+
if (formatted !== rawValue) {
|
|
2848
|
+
isFormatting = true;
|
|
2849
|
+
const startOffset = prefix.length;
|
|
2850
|
+
const newCursorPos = calculateCursorPosition(rawValue, formatted, cursorPos, startOffset);
|
|
2851
|
+
el.value = formatted;
|
|
2852
|
+
el.setSelectionRange(newCursorPos, newCursorPos);
|
|
2853
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2854
|
+
isFormatting = false;
|
|
2855
|
+
}
|
|
2856
|
+
};
|
|
2857
|
+
const onBlur = () => {
|
|
2858
|
+
if (!el.value || el.value === "-") return;
|
|
2859
|
+
const num = parseToNumber(el.value, decimal);
|
|
2860
|
+
if (num !== null) {
|
|
2861
|
+
const clamped = clampValue(num, options);
|
|
2862
|
+
const formatted = formatFn(clamped, options);
|
|
2863
|
+
isFormatting = true;
|
|
2864
|
+
el.value = formatted;
|
|
2865
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2866
|
+
isFormatting = false;
|
|
2867
|
+
}
|
|
2868
|
+
};
|
|
2869
|
+
el.addEventListener("input", onInput);
|
|
2870
|
+
el.addEventListener("blur", onBlur);
|
|
2871
|
+
if (el.value) {
|
|
2872
|
+
const num = parseToNumber(el.value, decimal);
|
|
2873
|
+
if (num !== null) {
|
|
2874
|
+
const formatted = formatFn(clampValue(num, options), options);
|
|
2875
|
+
isFormatting = true;
|
|
2876
|
+
el.value = formatted;
|
|
2877
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2878
|
+
isFormatting = false;
|
|
2879
|
+
}
|
|
2880
|
+
}
|
|
2881
|
+
return () => {
|
|
2882
|
+
el.removeEventListener("input", onInput);
|
|
2883
|
+
el.removeEventListener("blur", onBlur);
|
|
2884
|
+
};
|
|
2885
|
+
}
|
|
2886
|
+
function formatMoney(value, options) {
|
|
2887
|
+
const { precision = 2, separator = ",", decimal = ".", symbol = "$", symbolPosition = "before" } = options;
|
|
2888
|
+
const fixed = value.toFixed(precision);
|
|
2889
|
+
const [intPart, decPart] = fixed.split(".");
|
|
2890
|
+
const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
|
|
2891
|
+
let result = formattedInt;
|
|
2892
|
+
if (precision > 0 && decPart) {
|
|
2893
|
+
result += decimal + decPart;
|
|
2894
|
+
}
|
|
2895
|
+
return symbolPosition === "before" ? symbol + result : result + symbol;
|
|
2896
|
+
}
|
|
2897
|
+
const vMoney = defineDirective({
|
|
2898
|
+
name: "money",
|
|
2899
|
+
ssr: true,
|
|
2900
|
+
mounted(el, binding) {
|
|
2901
|
+
var _a, _b, _c;
|
|
2902
|
+
const options = typeof binding.value === "string" ? { symbol: binding.value } : (_a = binding.value) != null ? _a : {};
|
|
2903
|
+
options.precision = (_b = options.precision) != null ? _b : 2;
|
|
2904
|
+
if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
|
|
2905
|
+
const { symbol = "$", symbolPosition = "before" } = options;
|
|
2906
|
+
const prefix = symbolPosition === "before" ? symbol : "";
|
|
2907
|
+
const cleanup2 = setupNumberInput(el, __spreadProps(__spreadValues({}, options), { prefix }), formatMoney);
|
|
2908
|
+
el.__money = { options, cleanup: cleanup2 };
|
|
2909
|
+
requestAnimationFrame(() => {
|
|
2910
|
+
const inputEl = el;
|
|
2911
|
+
if (inputEl.value) {
|
|
2912
|
+
const num = parseToNumber(inputEl.value, options.decimal || ".");
|
|
2913
|
+
if (num !== null) {
|
|
2914
|
+
const formatted = formatMoney(clampValue(num, options), options);
|
|
2915
|
+
if (formatted !== inputEl.value) {
|
|
2916
|
+
inputEl.value = formatted;
|
|
2917
|
+
inputEl.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2918
|
+
}
|
|
2919
|
+
}
|
|
2920
|
+
}
|
|
2921
|
+
});
|
|
2922
|
+
} else {
|
|
2923
|
+
let value = null;
|
|
2924
|
+
if (binding.value && typeof binding.value === "object" && "value" in binding.value) {
|
|
2925
|
+
value = binding.value.value;
|
|
2926
|
+
} else {
|
|
2927
|
+
const textContent = (_c = el.textContent) == null ? void 0 : _c.trim();
|
|
2928
|
+
if (textContent) {
|
|
2929
|
+
value = parseToNumber(textContent, options.decimal || ".");
|
|
2930
|
+
}
|
|
2931
|
+
}
|
|
2932
|
+
if (value !== null) {
|
|
2933
|
+
el.textContent = formatMoney(clampValue(value, options), options);
|
|
2934
|
+
}
|
|
2935
|
+
}
|
|
2936
|
+
},
|
|
2937
|
+
updated(el, binding) {
|
|
2938
|
+
var _a, _b;
|
|
2939
|
+
const options = typeof binding.value === "string" ? { symbol: binding.value } : (_a = binding.value) != null ? _a : {};
|
|
2940
|
+
options.precision = (_b = options.precision) != null ? _b : 2;
|
|
2941
|
+
const state = el.__money;
|
|
2942
|
+
if (state) {
|
|
2943
|
+
state.options = options;
|
|
2944
|
+
} else if (!(el.tagName === "INPUT" || el.tagName === "TEXTAREA")) {
|
|
2945
|
+
let value = null;
|
|
2946
|
+
if (binding.value && typeof binding.value === "object" && "value" in binding.value) {
|
|
2947
|
+
value = binding.value.value;
|
|
2948
|
+
}
|
|
2949
|
+
if (value !== null) {
|
|
2950
|
+
el.textContent = formatMoney(clampValue(value, options), options);
|
|
2951
|
+
}
|
|
2952
|
+
}
|
|
2953
|
+
},
|
|
2954
|
+
unmounted(el) {
|
|
2955
|
+
const state = el.__money;
|
|
2956
|
+
state == null ? void 0 : state.cleanup();
|
|
2957
|
+
delete el.__money;
|
|
2958
|
+
}
|
|
2959
|
+
});
|
|
2960
|
+
function normalizeOptions$d(binding) {
|
|
2961
|
+
if (typeof binding === "function") {
|
|
2962
|
+
return { handler: binding, childList: true };
|
|
2963
|
+
}
|
|
2964
|
+
if (!binding || !binding.handler) {
|
|
2965
|
+
throw new Error("[Directix] v-mutation: handler is required");
|
|
2966
|
+
}
|
|
2967
|
+
return __spreadValues({
|
|
2968
|
+
attributes: false,
|
|
2969
|
+
childList: true,
|
|
2970
|
+
subtree: false,
|
|
2971
|
+
characterData: false,
|
|
2972
|
+
attributeOldValue: false,
|
|
2973
|
+
characterDataOldValue: false,
|
|
2974
|
+
disabled: false
|
|
2975
|
+
}, binding);
|
|
2976
|
+
}
|
|
2977
|
+
const vMutation = defineDirective({
|
|
2978
|
+
name: "mutation",
|
|
2979
|
+
ssr: false,
|
|
2980
|
+
defaults: {
|
|
2981
|
+
attributes: false,
|
|
2982
|
+
childList: true,
|
|
2983
|
+
subtree: false,
|
|
2984
|
+
characterData: false,
|
|
2985
|
+
attributeOldValue: false,
|
|
2986
|
+
characterDataOldValue: false,
|
|
2987
|
+
disabled: false
|
|
2988
|
+
},
|
|
2989
|
+
mounted(el, binding) {
|
|
2990
|
+
const options = normalizeOptions$d(binding.value);
|
|
2991
|
+
if (options.disabled || !isBrowser()) return;
|
|
2992
|
+
if (!supportsMutationObserver()) {
|
|
2993
|
+
console.warn("[Directix] v-mutation: MutationObserver not supported");
|
|
2994
|
+
return;
|
|
2995
|
+
}
|
|
2996
|
+
const state = {
|
|
2997
|
+
options,
|
|
2998
|
+
observer: null
|
|
2999
|
+
};
|
|
3000
|
+
state.observer = new MutationObserver((mutations, observer) => {
|
|
3001
|
+
options.handler(mutations, observer);
|
|
3002
|
+
});
|
|
3003
|
+
state.observer.observe(el, {
|
|
3004
|
+
attributes: options.attributes,
|
|
3005
|
+
attributeFilter: options.attributeFilter,
|
|
3006
|
+
childList: options.childList,
|
|
3007
|
+
subtree: options.subtree,
|
|
3008
|
+
characterData: options.characterData,
|
|
3009
|
+
attributeOldValue: options.attributeOldValue,
|
|
3010
|
+
characterDataOldValue: options.characterDataOldValue
|
|
3011
|
+
});
|
|
3012
|
+
el.__mutation = state;
|
|
3013
|
+
},
|
|
3014
|
+
updated(el, binding) {
|
|
3015
|
+
const state = el.__mutation;
|
|
3016
|
+
if (!state) return;
|
|
3017
|
+
const newOptions = normalizeOptions$d(binding.value);
|
|
3018
|
+
if (newOptions.disabled && !state.options.disabled) {
|
|
3019
|
+
if (state.observer) {
|
|
3020
|
+
state.observer.disconnect();
|
|
3021
|
+
}
|
|
3022
|
+
} else if (!newOptions.disabled && state.options.disabled) {
|
|
3023
|
+
if (state.observer) {
|
|
3024
|
+
state.observer.observe(el, {
|
|
3025
|
+
attributes: newOptions.attributes,
|
|
3026
|
+
attributeFilter: newOptions.attributeFilter,
|
|
3027
|
+
childList: newOptions.childList,
|
|
3028
|
+
subtree: newOptions.subtree,
|
|
3029
|
+
characterData: newOptions.characterData,
|
|
3030
|
+
attributeOldValue: newOptions.attributeOldValue,
|
|
3031
|
+
characterDataOldValue: newOptions.characterDataOldValue
|
|
3032
|
+
});
|
|
3033
|
+
}
|
|
3034
|
+
} else if (!newOptions.disabled) {
|
|
3035
|
+
if (newOptions.attributes !== state.options.attributes || newOptions.childList !== state.options.childList || newOptions.subtree !== state.options.subtree || newOptions.characterData !== state.options.characterData) {
|
|
3036
|
+
if (state.observer) {
|
|
3037
|
+
state.observer.disconnect();
|
|
3038
|
+
state.observer.observe(el, {
|
|
3039
|
+
attributes: newOptions.attributes,
|
|
3040
|
+
attributeFilter: newOptions.attributeFilter,
|
|
3041
|
+
childList: newOptions.childList,
|
|
3042
|
+
subtree: newOptions.subtree,
|
|
3043
|
+
characterData: newOptions.characterData,
|
|
3044
|
+
attributeOldValue: newOptions.attributeOldValue,
|
|
3045
|
+
characterDataOldValue: newOptions.characterDataOldValue
|
|
3046
|
+
});
|
|
3047
|
+
}
|
|
3048
|
+
}
|
|
3049
|
+
}
|
|
3050
|
+
state.options = newOptions;
|
|
3051
|
+
},
|
|
3052
|
+
unmounted(el) {
|
|
3053
|
+
const state = el.__mutation;
|
|
3054
|
+
if (!state) return;
|
|
3055
|
+
if (state.observer) {
|
|
3056
|
+
state.observer.disconnect();
|
|
3057
|
+
}
|
|
3058
|
+
delete el.__mutation;
|
|
3059
|
+
}
|
|
3060
|
+
});
|
|
3061
|
+
const vNumber = defineDirective({
|
|
3062
|
+
name: "number",
|
|
3063
|
+
ssr: true,
|
|
3064
|
+
mounted(el, binding) {
|
|
3065
|
+
var _a, _b;
|
|
3066
|
+
const options = typeof binding.value === "number" ? { precision: binding.value } : (_a = binding.value) != null ? _a : {};
|
|
3067
|
+
if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
|
|
3068
|
+
const cleanup2 = setupNumberInput(el, options, formatNumber);
|
|
3069
|
+
el.__number = { options, cleanup: cleanup2 };
|
|
3070
|
+
requestAnimationFrame(() => {
|
|
3071
|
+
const inputEl = el;
|
|
3072
|
+
if (inputEl.value) {
|
|
3073
|
+
const num = parseToNumber(inputEl.value, options.decimal || ".");
|
|
3074
|
+
if (num !== null) {
|
|
3075
|
+
const formatted = formatNumber(clampValue(num, options), options);
|
|
3076
|
+
if (formatted !== inputEl.value) {
|
|
3077
|
+
inputEl.value = formatted;
|
|
3078
|
+
inputEl.dispatchEvent(new Event("input", { bubbles: true }));
|
|
3079
|
+
}
|
|
3080
|
+
}
|
|
3081
|
+
}
|
|
3082
|
+
});
|
|
3083
|
+
} else {
|
|
3084
|
+
let value = null;
|
|
3085
|
+
if (typeof binding.value === "number") {
|
|
3086
|
+
value = binding.value;
|
|
3087
|
+
} else if (binding.value && typeof binding.value === "object" && "value" in binding.value) {
|
|
3088
|
+
value = binding.value.value;
|
|
3089
|
+
} else {
|
|
3090
|
+
const textContent = (_b = el.textContent) == null ? void 0 : _b.trim();
|
|
3091
|
+
if (textContent) {
|
|
3092
|
+
value = parseToNumber(textContent, options.decimal || ".");
|
|
3093
|
+
}
|
|
3094
|
+
}
|
|
3095
|
+
if (value !== null) {
|
|
3096
|
+
el.textContent = formatNumber(clampValue(value, options), options);
|
|
3097
|
+
}
|
|
3098
|
+
}
|
|
3099
|
+
},
|
|
3100
|
+
updated(el, binding) {
|
|
3101
|
+
var _a;
|
|
3102
|
+
const options = typeof binding.value === "number" ? { precision: binding.value } : (_a = binding.value) != null ? _a : {};
|
|
3103
|
+
const state = el.__number;
|
|
3104
|
+
if (state) {
|
|
3105
|
+
state.options = options;
|
|
3106
|
+
} else if (!(el.tagName === "INPUT" || el.tagName === "TEXTAREA")) {
|
|
3107
|
+
let value = null;
|
|
3108
|
+
if (typeof binding.value === "number") {
|
|
3109
|
+
value = binding.value;
|
|
3110
|
+
} else if (binding.value && typeof binding.value === "object" && "value" in binding.value) {
|
|
3111
|
+
value = binding.value.value;
|
|
3112
|
+
}
|
|
3113
|
+
if (value !== null) {
|
|
3114
|
+
el.textContent = formatNumber(clampValue(value, options), options);
|
|
3115
|
+
}
|
|
3116
|
+
}
|
|
3117
|
+
},
|
|
3118
|
+
unmounted(el) {
|
|
3119
|
+
const state = el.__number;
|
|
3120
|
+
state == null ? void 0 : state.cleanup();
|
|
3121
|
+
delete el.__number;
|
|
3122
|
+
}
|
|
3123
|
+
});
|
|
3124
|
+
const STATE_KEY$1 = "__permission";
|
|
3125
|
+
const WILDCARD = "*";
|
|
3126
|
+
let globalConfig = null;
|
|
3127
|
+
function configurePermission(config) {
|
|
3128
|
+
globalConfig = config;
|
|
3129
|
+
}
|
|
3130
|
+
function getPermissionConfig() {
|
|
3131
|
+
return globalConfig;
|
|
3132
|
+
}
|
|
3133
|
+
function normalizeOptions$c(binding) {
|
|
3134
|
+
if (!binding) {
|
|
3135
|
+
throw new Error("[Directix] v-permission: permission value is required");
|
|
3136
|
+
}
|
|
3137
|
+
if (typeof binding === "string") {
|
|
3138
|
+
return { value: binding };
|
|
3139
|
+
}
|
|
3140
|
+
if (Array.isArray(binding)) {
|
|
3141
|
+
return { value: binding };
|
|
3142
|
+
}
|
|
3143
|
+
return binding;
|
|
3144
|
+
}
|
|
3145
|
+
function hasPermission(required, permissions) {
|
|
3146
|
+
return permissions.includes(WILDCARD) || permissions.includes(required);
|
|
3147
|
+
}
|
|
3148
|
+
function verifyPermission(options) {
|
|
3149
|
+
var _a;
|
|
3150
|
+
if (options.check) {
|
|
3151
|
+
return options.check(options.value, options.mode || "some");
|
|
3152
|
+
}
|
|
3153
|
+
if (!globalConfig) {
|
|
3154
|
+
console.warn("[Directix] v-permission: No permission config provided");
|
|
3155
|
+
return true;
|
|
3156
|
+
}
|
|
3157
|
+
const permissions = globalConfig.getPermissions();
|
|
3158
|
+
const roles = ((_a = globalConfig.getRoles) == null ? void 0 : _a.call(globalConfig)) || [];
|
|
3159
|
+
const roleMap = globalConfig.roleMap || {};
|
|
3160
|
+
const required = Array.isArray(options.value) ? options.value : [options.value];
|
|
3161
|
+
const mode = options.mode || "some";
|
|
3162
|
+
function checkSingle(value) {
|
|
3163
|
+
if (value in roleMap) {
|
|
3164
|
+
return roles.includes(value);
|
|
3165
|
+
}
|
|
3166
|
+
if (hasPermission(value, permissions)) {
|
|
3167
|
+
return true;
|
|
3168
|
+
}
|
|
3169
|
+
for (const role of roles) {
|
|
3170
|
+
const rolePermissions = roleMap[role] || [];
|
|
3171
|
+
if (hasPermission(value, rolePermissions)) {
|
|
3172
|
+
return true;
|
|
3173
|
+
}
|
|
3174
|
+
}
|
|
3175
|
+
return false;
|
|
3176
|
+
}
|
|
3177
|
+
return mode === "every" ? required.every(checkSingle) : required.some(checkSingle);
|
|
3178
|
+
}
|
|
3179
|
+
function handleDenied(el, action, state) {
|
|
3180
|
+
var _a, _b;
|
|
3181
|
+
switch (action) {
|
|
3182
|
+
case "remove":
|
|
3183
|
+
state.parentNode = el.parentNode;
|
|
3184
|
+
state.placeholder = document.createComment("v-permission");
|
|
3185
|
+
(_a = el.parentNode) == null ? void 0 : _a.insertBefore(state.placeholder, el);
|
|
3186
|
+
(_b = el.parentNode) == null ? void 0 : _b.removeChild(el);
|
|
3187
|
+
break;
|
|
3188
|
+
case "disable":
|
|
3189
|
+
state.originalDisabled = el.getAttribute("disabled") || false;
|
|
3190
|
+
el.setAttribute("disabled", "true");
|
|
3191
|
+
el.classList.add("v-permission--disabled");
|
|
3192
|
+
break;
|
|
3193
|
+
case "hide":
|
|
3194
|
+
state.originalDisplay = el.style.display;
|
|
3195
|
+
el.style.display = "none";
|
|
3196
|
+
el.classList.add("v-permission--hidden");
|
|
3197
|
+
break;
|
|
3198
|
+
}
|
|
3199
|
+
}
|
|
3200
|
+
function handleGranted(el, action, state) {
|
|
3201
|
+
switch (action) {
|
|
3202
|
+
case "remove":
|
|
3203
|
+
if (state.placeholder && state.parentNode) {
|
|
3204
|
+
state.parentNode.insertBefore(el, state.placeholder);
|
|
3205
|
+
state.parentNode.removeChild(state.placeholder);
|
|
3206
|
+
state.placeholder = null;
|
|
3207
|
+
}
|
|
3208
|
+
break;
|
|
3209
|
+
case "disable":
|
|
3210
|
+
if (state.originalDisabled === false) {
|
|
3211
|
+
el.removeAttribute("disabled");
|
|
3212
|
+
} else if (state.originalDisabled) {
|
|
3213
|
+
el.setAttribute("disabled", state.originalDisabled);
|
|
3214
|
+
}
|
|
3215
|
+
el.classList.remove("v-permission--disabled");
|
|
3216
|
+
break;
|
|
3217
|
+
case "hide":
|
|
3218
|
+
el.style.display = state.originalDisplay || "";
|
|
3219
|
+
el.classList.remove("v-permission--hidden");
|
|
3220
|
+
break;
|
|
3221
|
+
}
|
|
3222
|
+
}
|
|
3223
|
+
function getState(el) {
|
|
3224
|
+
if (!el[STATE_KEY$1]) {
|
|
3225
|
+
el[STATE_KEY$1] = {
|
|
3226
|
+
options: { value: "" },
|
|
3227
|
+
originalDisplay: "",
|
|
3228
|
+
originalDisabled: false,
|
|
3229
|
+
parentNode: null,
|
|
3230
|
+
placeholder: null
|
|
3231
|
+
};
|
|
3232
|
+
}
|
|
3233
|
+
return el[STATE_KEY$1];
|
|
3234
|
+
}
|
|
3235
|
+
function checkPermission(el, binding) {
|
|
3236
|
+
var _a, _b;
|
|
3237
|
+
const state = getState(el);
|
|
3238
|
+
state.options = normalizeOptions$c(binding.value);
|
|
3239
|
+
const granted = verifyPermission(state.options);
|
|
3240
|
+
(_b = (_a = state.options).onChange) == null ? void 0 : _b.call(_a, granted);
|
|
3241
|
+
const action = state.options.action || "remove";
|
|
3242
|
+
if (granted) {
|
|
3243
|
+
handleGranted(el, action, state);
|
|
3244
|
+
} else {
|
|
3245
|
+
handleDenied(el, action, state);
|
|
3246
|
+
}
|
|
3247
|
+
}
|
|
3248
|
+
function cleanup(el) {
|
|
3249
|
+
const state = el[STATE_KEY$1];
|
|
3250
|
+
if ((state == null ? void 0 : state.placeholder) && state.parentNode) {
|
|
3251
|
+
state.parentNode.removeChild(state.placeholder);
|
|
3252
|
+
}
|
|
3253
|
+
delete el[STATE_KEY$1];
|
|
3254
|
+
}
|
|
3255
|
+
const vPermission = defineDirective({
|
|
3256
|
+
name: "permission",
|
|
3257
|
+
ssr: true,
|
|
3258
|
+
mounted(el, binding) {
|
|
3259
|
+
checkPermission(el, binding);
|
|
3260
|
+
},
|
|
3261
|
+
updated(el, binding) {
|
|
3262
|
+
checkPermission(el, binding);
|
|
3263
|
+
},
|
|
3264
|
+
unmounted(el) {
|
|
3265
|
+
cleanup(el);
|
|
3266
|
+
}
|
|
3267
|
+
});
|
|
3268
|
+
function getResizeInfo(entry) {
|
|
3269
|
+
return {
|
|
3270
|
+
width: entry.contentRect.width,
|
|
3271
|
+
height: entry.contentRect.height,
|
|
3272
|
+
contentRect: entry.contentRect,
|
|
3273
|
+
borderBoxSize: entry.borderBoxSize,
|
|
3274
|
+
contentBoxSize: entry.contentBoxSize,
|
|
3275
|
+
devicePixelContentBoxSize: entry.devicePixelContentBoxSize
|
|
3276
|
+
};
|
|
3277
|
+
}
|
|
3278
|
+
function normalizeOptions$b(binding) {
|
|
3279
|
+
if (typeof binding === "function") {
|
|
3280
|
+
return { handler: binding };
|
|
3281
|
+
}
|
|
3282
|
+
if (!binding) {
|
|
3283
|
+
throw new Error("[Directix] v-resize: handler is required");
|
|
3284
|
+
}
|
|
3285
|
+
return __spreadValues({
|
|
3286
|
+
disabled: false,
|
|
3287
|
+
box: "content-box",
|
|
3288
|
+
debounce: 0
|
|
3289
|
+
}, binding);
|
|
3290
|
+
}
|
|
3291
|
+
function createFallbackResize(el, callback) {
|
|
3292
|
+
const iframe = document.createElement("iframe");
|
|
3293
|
+
iframe.style.cssText = `
|
|
3294
|
+
position: absolute;
|
|
3295
|
+
top: 0;
|
|
3296
|
+
left: 0;
|
|
3297
|
+
width: 100%;
|
|
3298
|
+
height: 100%;
|
|
3299
|
+
border: none;
|
|
3300
|
+
pointer-events: none;
|
|
3301
|
+
opacity: 0;
|
|
3302
|
+
`;
|
|
3303
|
+
el.appendChild(iframe);
|
|
3304
|
+
const iWindow = iframe.contentWindow;
|
|
3305
|
+
if (iWindow) {
|
|
3306
|
+
iWindow.addEventListener("resize", callback);
|
|
3307
|
+
}
|
|
3308
|
+
return {
|
|
3309
|
+
iframe,
|
|
3310
|
+
cleanup: () => {
|
|
3311
|
+
if (iWindow) {
|
|
3312
|
+
iWindow.removeEventListener("resize", callback);
|
|
3313
|
+
}
|
|
3314
|
+
iframe.remove();
|
|
3315
|
+
}
|
|
3316
|
+
};
|
|
3317
|
+
}
|
|
3318
|
+
const vResize = defineDirective({
|
|
3319
|
+
name: "resize",
|
|
3320
|
+
ssr: false,
|
|
3321
|
+
defaults: {
|
|
3322
|
+
disabled: false,
|
|
3323
|
+
box: "content-box",
|
|
3324
|
+
debounce: 0
|
|
3325
|
+
},
|
|
3326
|
+
mounted(el, binding) {
|
|
3327
|
+
const options = normalizeOptions$b(binding.value);
|
|
3328
|
+
if (options.disabled || !isBrowser()) return;
|
|
3329
|
+
const computedStyle = getComputedStyle(el);
|
|
3330
|
+
if (computedStyle.position === "static") {
|
|
3331
|
+
el.style.position = "relative";
|
|
3332
|
+
}
|
|
3333
|
+
const state = {
|
|
3334
|
+
options,
|
|
3335
|
+
observer: null,
|
|
3336
|
+
debounceTimer: null,
|
|
3337
|
+
pendingEntry: null,
|
|
3338
|
+
fallbackIframe: null,
|
|
3339
|
+
handler: (entry) => {
|
|
3340
|
+
if (options.debounce && options.debounce > 0) {
|
|
3341
|
+
state.pendingEntry = entry;
|
|
3342
|
+
if (!state.debounceTimer) {
|
|
3343
|
+
state.debounceTimer = setTimeout(() => {
|
|
3344
|
+
if (state.pendingEntry) {
|
|
3345
|
+
options.handler(state.pendingEntry);
|
|
3346
|
+
}
|
|
3347
|
+
state.debounceTimer = null;
|
|
3348
|
+
state.pendingEntry = null;
|
|
3349
|
+
}, options.debounce);
|
|
3350
|
+
}
|
|
3351
|
+
} else {
|
|
3352
|
+
options.handler(entry);
|
|
3353
|
+
}
|
|
3354
|
+
}
|
|
3355
|
+
};
|
|
3356
|
+
el.__resize = state;
|
|
3357
|
+
if (supportsResizeObserver()) {
|
|
3358
|
+
state.observer = new ResizeObserver((entries) => {
|
|
3359
|
+
for (const entry of entries) {
|
|
3360
|
+
state.handler(entry);
|
|
3361
|
+
}
|
|
3362
|
+
});
|
|
3363
|
+
state.observer.observe(el, { box: options.box });
|
|
3364
|
+
} else {
|
|
3365
|
+
console.warn("[Directix] v-resize: ResizeObserver not supported, using fallback");
|
|
3366
|
+
const { iframe, cleanup: cleanup2 } = createFallbackResize(el, () => {
|
|
3367
|
+
const rect = el.getBoundingClientRect();
|
|
3368
|
+
const entry = {
|
|
3369
|
+
target: el,
|
|
3370
|
+
contentRect: rect,
|
|
3371
|
+
borderBoxSize: [],
|
|
3372
|
+
contentBoxSize: [],
|
|
3373
|
+
devicePixelContentBoxSize: []
|
|
3374
|
+
};
|
|
3375
|
+
state.handler(entry);
|
|
3376
|
+
if (options.onFallback) {
|
|
3377
|
+
options.onFallback(getResizeInfo(entry));
|
|
3378
|
+
}
|
|
3379
|
+
});
|
|
3380
|
+
state.fallbackIframe = iframe;
|
|
3381
|
+
el.__resizeCleanup = cleanup2;
|
|
3382
|
+
}
|
|
3383
|
+
},
|
|
3384
|
+
updated(el, binding) {
|
|
3385
|
+
const state = el.__resize;
|
|
3386
|
+
if (!state) return;
|
|
3387
|
+
state.options = normalizeOptions$b(binding.value);
|
|
3388
|
+
},
|
|
3389
|
+
unmounted(el) {
|
|
3390
|
+
const state = el.__resize;
|
|
3391
|
+
if (!state) return;
|
|
3392
|
+
if (state.debounceTimer) {
|
|
3393
|
+
clearTimeout(state.debounceTimer);
|
|
3394
|
+
}
|
|
3395
|
+
if (state.observer) {
|
|
3396
|
+
state.observer.disconnect();
|
|
3397
|
+
}
|
|
3398
|
+
const cleanup2 = el.__resizeCleanup;
|
|
3399
|
+
if (cleanup2) {
|
|
3400
|
+
cleanup2();
|
|
3401
|
+
}
|
|
3402
|
+
delete el.__resize;
|
|
3403
|
+
delete el.__resizeCleanup;
|
|
3404
|
+
}
|
|
3405
|
+
});
|
|
3406
|
+
function normalizeOptions$a(binding) {
|
|
3407
|
+
if (binding === false) {
|
|
3408
|
+
return { disabled: true, color: "currentColor", duration: 600 };
|
|
3409
|
+
}
|
|
3410
|
+
if (typeof binding === "string") {
|
|
3411
|
+
return { color: binding, duration: 600 };
|
|
3412
|
+
}
|
|
3413
|
+
const base = {
|
|
3414
|
+
color: "currentColor",
|
|
3415
|
+
duration: 600,
|
|
3416
|
+
disabled: false,
|
|
3417
|
+
initialScale: 0,
|
|
3418
|
+
finalScale: 2
|
|
3419
|
+
};
|
|
3420
|
+
return binding && typeof binding === "object" ? __spreadValues(__spreadValues({}, base), binding) : base;
|
|
3421
|
+
}
|
|
3422
|
+
function createRipple(event, el, options) {
|
|
3423
|
+
const rect = el.getBoundingClientRect();
|
|
3424
|
+
const x = event.clientX - rect.left;
|
|
3425
|
+
const y = event.clientY - rect.top;
|
|
3426
|
+
const size = Math.max(rect.width, rect.height) * 2;
|
|
3427
|
+
const ripple = document.createElement("span");
|
|
3428
|
+
ripple.className = "v-ripple__wave";
|
|
3429
|
+
ripple.style.cssText = `
|
|
3430
|
+
position: absolute;
|
|
3431
|
+
border-radius: 50%;
|
|
3432
|
+
pointer-events: none;
|
|
3433
|
+
background-color: ${options.color};
|
|
3434
|
+
width: ${size}px;
|
|
3435
|
+
height: ${size}px;
|
|
3436
|
+
left: ${x - size / 2}px;
|
|
3437
|
+
top: ${y - size / 2}px;
|
|
3438
|
+
transform: scale(${options.initialScale});
|
|
3439
|
+
opacity: 0.3;
|
|
3440
|
+
z-index: 0;
|
|
3441
|
+
`;
|
|
3442
|
+
return ripple;
|
|
3443
|
+
}
|
|
3444
|
+
function animateRipple(ripple, options) {
|
|
3445
|
+
const duration = options.duration || 600;
|
|
3446
|
+
const initialScale = options.initialScale || 0;
|
|
3447
|
+
const finalScale = options.finalScale || 2;
|
|
3448
|
+
if (typeof ripple.animate === "function") {
|
|
3449
|
+
ripple.animate(
|
|
3450
|
+
[
|
|
3451
|
+
{ transform: `scale(${initialScale})`, opacity: 0.3 },
|
|
3452
|
+
{ transform: `scale(${finalScale})`, opacity: 0 }
|
|
3453
|
+
],
|
|
3454
|
+
{
|
|
3455
|
+
duration,
|
|
3456
|
+
easing: "ease-out",
|
|
3457
|
+
fill: "forwards"
|
|
3458
|
+
}
|
|
3459
|
+
).onfinish = () => {
|
|
3460
|
+
ripple.remove();
|
|
3461
|
+
};
|
|
3462
|
+
} else {
|
|
3463
|
+
ripple.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
|
|
3464
|
+
String(ripple.offsetHeight);
|
|
3465
|
+
ripple.style.transform = `scale(${finalScale})`;
|
|
3466
|
+
ripple.style.opacity = "0";
|
|
3467
|
+
setTimeout(() => {
|
|
3468
|
+
ripple.remove();
|
|
3469
|
+
}, duration);
|
|
3470
|
+
}
|
|
3471
|
+
}
|
|
3472
|
+
const vRipple = defineDirective({
|
|
3473
|
+
name: "ripple",
|
|
3474
|
+
ssr: false,
|
|
3475
|
+
defaults: {
|
|
3476
|
+
color: "currentColor",
|
|
3477
|
+
duration: 600,
|
|
3478
|
+
disabled: false,
|
|
3479
|
+
initialScale: 0,
|
|
3480
|
+
finalScale: 2
|
|
3481
|
+
},
|
|
3482
|
+
mounted(el, binding) {
|
|
3483
|
+
const options = normalizeOptions$a(binding.value);
|
|
3484
|
+
if (options.disabled || !isBrowser()) return;
|
|
3485
|
+
const computedStyle = getComputedStyle(el);
|
|
3486
|
+
if (computedStyle.position === "static") {
|
|
3487
|
+
el.style.position = "relative";
|
|
3488
|
+
}
|
|
3489
|
+
if (computedStyle.overflow === "visible") {
|
|
3490
|
+
el.style.overflow = "hidden";
|
|
3491
|
+
}
|
|
3492
|
+
el.classList.add("v-ripple");
|
|
3493
|
+
const state = {
|
|
3494
|
+
options,
|
|
3495
|
+
clickHandler: (e) => {
|
|
3496
|
+
if (state.options.disabled) return;
|
|
3497
|
+
const mouseEvent = e;
|
|
3498
|
+
const ripple = createRipple(mouseEvent, el, state.options);
|
|
3499
|
+
if (ripple) {
|
|
3500
|
+
el.appendChild(ripple);
|
|
3501
|
+
animateRipple(ripple, state.options);
|
|
3502
|
+
}
|
|
3503
|
+
}
|
|
3504
|
+
};
|
|
3505
|
+
el.__ripple = state;
|
|
3506
|
+
on(el, "click", state.clickHandler);
|
|
3507
|
+
},
|
|
3508
|
+
updated(el, binding) {
|
|
3509
|
+
const state = el.__ripple;
|
|
3510
|
+
if (!state) return;
|
|
3511
|
+
state.options = normalizeOptions$a(binding.value);
|
|
3512
|
+
},
|
|
3513
|
+
unmounted(el) {
|
|
3514
|
+
const state = el.__ripple;
|
|
3515
|
+
if (!state) return;
|
|
3516
|
+
off(el, "click", state.clickHandler);
|
|
3517
|
+
el.classList.remove("v-ripple");
|
|
3518
|
+
delete el.__ripple;
|
|
3519
|
+
}
|
|
3520
|
+
});
|
|
3521
|
+
const DEFAULT_ALLOWED_TAGS = ["b", "i", "u", "strong", "em", "br", "p", "span", "div"];
|
|
3522
|
+
const DEFAULT_ALLOWED_ATTRIBUTES = ["title", "alt", "href", "src"];
|
|
3523
|
+
const DANGEROUS_TAGS = ["script", "iframe", "object", "embed", "form", "input", "style", "link", "meta", "base"];
|
|
3524
|
+
const DANGEROUS_ATTRIBUTES = ["onclick", "onerror", "onload", "onmouseover", "onfocus", "onblur", "onchange", "onsubmit"];
|
|
3525
|
+
function normalizeOptions$9(binding) {
|
|
3526
|
+
if (binding === false) {
|
|
3527
|
+
return { disabled: true };
|
|
3528
|
+
}
|
|
3529
|
+
if (binding === true) {
|
|
3530
|
+
return {
|
|
3531
|
+
allowedTags: DEFAULT_ALLOWED_TAGS,
|
|
3532
|
+
allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES
|
|
3533
|
+
};
|
|
3534
|
+
}
|
|
3535
|
+
return __spreadValues({
|
|
3536
|
+
allowedTags: DEFAULT_ALLOWED_TAGS,
|
|
3537
|
+
allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
|
|
3538
|
+
allowDataUrls: false,
|
|
3539
|
+
allowStyles: false,
|
|
3540
|
+
allowClass: false,
|
|
3541
|
+
allowId: false,
|
|
3542
|
+
disabled: false,
|
|
3543
|
+
sanitizeOnUpdate: true
|
|
3544
|
+
}, binding);
|
|
3545
|
+
}
|
|
3546
|
+
function sanitizeHtml(html, options) {
|
|
3547
|
+
var _a;
|
|
3548
|
+
if (options.handler) {
|
|
3549
|
+
return options.handler(html);
|
|
3550
|
+
}
|
|
3551
|
+
const temp = document.createElement("div");
|
|
3552
|
+
temp.innerHTML = html;
|
|
3553
|
+
for (const tag of DANGEROUS_TAGS) {
|
|
3554
|
+
const elements = temp.getElementsByTagName(tag);
|
|
3555
|
+
while (elements.length > 0) {
|
|
3556
|
+
(_a = elements[0].parentNode) == null ? void 0 : _a.removeChild(elements[0]);
|
|
3557
|
+
}
|
|
3558
|
+
}
|
|
3559
|
+
const processElement = (el) => {
|
|
3560
|
+
var _a2;
|
|
3561
|
+
const tagName = el.tagName.toLowerCase();
|
|
3562
|
+
if (options.allowedTags && !options.allowedTags.includes(tagName)) {
|
|
3563
|
+
const text = document.createTextNode(el.textContent || "");
|
|
3564
|
+
(_a2 = el.parentNode) == null ? void 0 : _a2.replaceChild(text, el);
|
|
3565
|
+
return;
|
|
3566
|
+
}
|
|
3567
|
+
for (const attr of DANGEROUS_ATTRIBUTES) {
|
|
3568
|
+
el.removeAttribute(attr);
|
|
3569
|
+
}
|
|
3570
|
+
const href = el.getAttribute("href");
|
|
3571
|
+
if (href && href.toLowerCase().startsWith("javascript:")) {
|
|
3572
|
+
el.removeAttribute("href");
|
|
3573
|
+
}
|
|
3574
|
+
if (!options.allowDataUrls) {
|
|
3575
|
+
const src = el.getAttribute("src");
|
|
3576
|
+
if (src && src.toLowerCase().startsWith("data:")) {
|
|
3577
|
+
el.removeAttribute("src");
|
|
3578
|
+
}
|
|
3579
|
+
}
|
|
3580
|
+
if (options.allowedAttributes) {
|
|
3581
|
+
const attrs = Array.from(el.attributes);
|
|
3582
|
+
for (const attr of attrs) {
|
|
3583
|
+
const isAllowed = options.allowedAttributes.includes(attr.name.toLowerCase());
|
|
3584
|
+
const isClass = attr.name === "class" && options.allowClass;
|
|
3585
|
+
const isId = attr.name === "id" && options.allowId;
|
|
3586
|
+
const isStyle = attr.name === "style" && options.allowStyles;
|
|
3587
|
+
if (!isAllowed && !isClass && !isId && !isStyle) {
|
|
3588
|
+
el.removeAttribute(attr.name);
|
|
3589
|
+
}
|
|
3590
|
+
}
|
|
3591
|
+
}
|
|
3592
|
+
for (const child of Array.from(el.children)) {
|
|
3593
|
+
processElement(child);
|
|
3594
|
+
}
|
|
3595
|
+
};
|
|
3596
|
+
for (const child of Array.from(temp.children)) {
|
|
3597
|
+
processElement(child);
|
|
3598
|
+
}
|
|
3599
|
+
return temp.innerHTML;
|
|
3600
|
+
}
|
|
3601
|
+
const vSanitize = defineDirective({
|
|
3602
|
+
name: "sanitize",
|
|
3603
|
+
ssr: true,
|
|
3604
|
+
defaults: {
|
|
3605
|
+
allowedTags: DEFAULT_ALLOWED_TAGS,
|
|
3606
|
+
allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
|
|
3607
|
+
allowDataUrls: false,
|
|
3608
|
+
allowStyles: false,
|
|
3609
|
+
allowClass: false,
|
|
3610
|
+
allowId: false,
|
|
3611
|
+
disabled: false,
|
|
3612
|
+
sanitizeOnUpdate: true
|
|
3613
|
+
},
|
|
3614
|
+
mounted(el, binding) {
|
|
3615
|
+
if (!isBrowser()) return;
|
|
3616
|
+
const options = normalizeOptions$9(binding.value);
|
|
3617
|
+
if (options.disabled) return;
|
|
3618
|
+
el.__sanitize = { options };
|
|
3619
|
+
const content = el.innerHTML;
|
|
3620
|
+
if (content) {
|
|
3621
|
+
el.innerHTML = sanitizeHtml(content, options);
|
|
3622
|
+
}
|
|
3623
|
+
},
|
|
3624
|
+
updated(el, binding) {
|
|
3625
|
+
const state = el.__sanitize;
|
|
3626
|
+
if (!state) return;
|
|
3627
|
+
state.options = normalizeOptions$9(binding.value);
|
|
3628
|
+
if (state.options.disabled || !state.options.sanitizeOnUpdate) return;
|
|
3629
|
+
const content = el.innerHTML;
|
|
3630
|
+
if (content) {
|
|
3631
|
+
el.innerHTML = sanitizeHtml(content, state.options);
|
|
3632
|
+
}
|
|
3633
|
+
},
|
|
3634
|
+
unmounted(el) {
|
|
3635
|
+
delete el.__sanitize;
|
|
3636
|
+
}
|
|
3637
|
+
});
|
|
3638
|
+
function getScrollInfo(container, lastScrollLeft, lastScrollTop) {
|
|
3639
|
+
let scrollLeft = 0, scrollTop = 0, scrollLeftMax = 0, scrollTopMax = 0;
|
|
3640
|
+
if (container === window) {
|
|
3641
|
+
scrollLeft = window.scrollX || document.documentElement.scrollLeft;
|
|
3642
|
+
scrollTop = window.scrollY || document.documentElement.scrollTop;
|
|
3643
|
+
scrollLeftMax = document.documentElement.scrollWidth - window.innerWidth;
|
|
3644
|
+
scrollTopMax = document.documentElement.scrollHeight - window.innerHeight;
|
|
3645
|
+
} else {
|
|
3646
|
+
const el = container;
|
|
3647
|
+
scrollLeft = el.scrollLeft;
|
|
3648
|
+
scrollTop = el.scrollTop;
|
|
3649
|
+
scrollLeftMax = el.scrollWidth - el.clientWidth;
|
|
3650
|
+
scrollTopMax = el.scrollHeight - el.clientHeight;
|
|
3651
|
+
}
|
|
3652
|
+
const progressX = scrollLeftMax > 0 ? scrollLeft / scrollLeftMax : 0;
|
|
3653
|
+
const progressY = scrollTopMax > 0 ? scrollTop / scrollTopMax : 0;
|
|
3654
|
+
const directionX = scrollLeft !== lastScrollLeft ? scrollLeft > lastScrollLeft ? 1 : -1 : 0;
|
|
3655
|
+
const directionY = scrollTop !== lastScrollTop ? scrollTop > lastScrollTop ? 1 : -1 : 0;
|
|
3656
|
+
return {
|
|
3657
|
+
scrollLeft,
|
|
3658
|
+
scrollTop,
|
|
3659
|
+
scrollLeftMax,
|
|
3660
|
+
scrollTopMax,
|
|
3661
|
+
progressX,
|
|
3662
|
+
progressY,
|
|
3663
|
+
directionX,
|
|
3664
|
+
directionY,
|
|
3665
|
+
container
|
|
3666
|
+
};
|
|
3667
|
+
}
|
|
3668
|
+
function normalizeOptions$8(binding) {
|
|
3669
|
+
if (typeof binding === "function") {
|
|
3670
|
+
return { handler: binding, passive: true };
|
|
3671
|
+
}
|
|
3672
|
+
if (!binding) {
|
|
3673
|
+
throw new Error("[Directix] v-scroll: handler is required");
|
|
3674
|
+
}
|
|
3675
|
+
return __spreadValues({
|
|
3676
|
+
passive: true,
|
|
3677
|
+
throttle: 0,
|
|
3678
|
+
disabled: false
|
|
3679
|
+
}, binding);
|
|
3680
|
+
}
|
|
3681
|
+
const vScroll = defineDirective({
|
|
3682
|
+
name: "scroll",
|
|
3683
|
+
ssr: false,
|
|
3684
|
+
defaults: {
|
|
3685
|
+
passive: true,
|
|
3686
|
+
throttle: 0,
|
|
3687
|
+
disabled: false
|
|
3688
|
+
},
|
|
3689
|
+
mounted(el, binding) {
|
|
3690
|
+
const options = normalizeOptions$8(binding.value);
|
|
3691
|
+
if (options.disabled || !isBrowser()) return;
|
|
3692
|
+
let container;
|
|
3693
|
+
if (options.container) {
|
|
3694
|
+
if (options.container === window) {
|
|
3695
|
+
container = window;
|
|
3696
|
+
} else if (typeof options.container === "string") {
|
|
3697
|
+
const found = document.querySelector(options.container);
|
|
3698
|
+
container = found || getScrollParent(el);
|
|
3699
|
+
} else {
|
|
3700
|
+
container = options.container;
|
|
3701
|
+
}
|
|
3702
|
+
} else {
|
|
3703
|
+
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
3704
|
+
const isSelfScrollable = /(auto|scroll)/.test(overflow + overflowX + overflowY);
|
|
3705
|
+
container = isSelfScrollable ? el : getScrollParent(el);
|
|
3706
|
+
}
|
|
3707
|
+
const state = {
|
|
3708
|
+
options,
|
|
3709
|
+
container,
|
|
3710
|
+
lastScrollLeft: 0,
|
|
3711
|
+
lastScrollTop: 0,
|
|
3712
|
+
throttleTimer: null,
|
|
3713
|
+
pendingEvent: null,
|
|
3714
|
+
scrollHandler: (e) => {
|
|
3715
|
+
if (options.throttle && options.throttle > 0) {
|
|
3716
|
+
state.pendingEvent = e;
|
|
3717
|
+
if (!state.throttleTimer) {
|
|
3718
|
+
state.throttleTimer = setTimeout(() => {
|
|
3719
|
+
if (state.pendingEvent) {
|
|
3720
|
+
const info = getScrollInfo(container, state.lastScrollLeft, state.lastScrollTop);
|
|
3721
|
+
state.lastScrollLeft = info.scrollLeft;
|
|
3722
|
+
state.lastScrollTop = info.scrollTop;
|
|
3723
|
+
options.handler(state.pendingEvent, info);
|
|
3724
|
+
}
|
|
3725
|
+
state.throttleTimer = null;
|
|
3726
|
+
state.pendingEvent = null;
|
|
3727
|
+
}, options.throttle);
|
|
3728
|
+
}
|
|
3729
|
+
} else {
|
|
3730
|
+
const info = getScrollInfo(container, state.lastScrollLeft, state.lastScrollTop);
|
|
3731
|
+
state.lastScrollLeft = info.scrollLeft;
|
|
3732
|
+
state.lastScrollTop = info.scrollTop;
|
|
3733
|
+
options.handler(e, info);
|
|
3734
|
+
}
|
|
3735
|
+
}
|
|
3736
|
+
};
|
|
3737
|
+
const initialInfo = getScrollInfo(container, 0, 0);
|
|
3738
|
+
state.lastScrollLeft = initialInfo.scrollLeft;
|
|
3739
|
+
state.lastScrollTop = initialInfo.scrollTop;
|
|
3740
|
+
el.__scroll = state;
|
|
3741
|
+
on(container, "scroll", state.scrollHandler, { passive: options.passive });
|
|
3742
|
+
},
|
|
3743
|
+
updated(el, binding) {
|
|
3744
|
+
const state = el.__scroll;
|
|
3745
|
+
if (!state) return;
|
|
3746
|
+
state.options = normalizeOptions$8(binding.value);
|
|
3747
|
+
},
|
|
3748
|
+
unmounted(el) {
|
|
3749
|
+
const state = el.__scroll;
|
|
3750
|
+
if (!state) return;
|
|
3751
|
+
if (state.throttleTimer) {
|
|
3752
|
+
clearTimeout(state.throttleTimer);
|
|
3753
|
+
}
|
|
3754
|
+
off(state.container, "scroll", state.scrollHandler);
|
|
3755
|
+
delete el.__scroll;
|
|
3756
|
+
}
|
|
3757
|
+
});
|
|
3758
|
+
const STATE_KEY = "__sticky";
|
|
3759
|
+
function normalizeOptions$7(binding) {
|
|
3760
|
+
if (binding === false) return { disabled: true, top: 0, zIndex: 100 };
|
|
3761
|
+
if (typeof binding === "number") return { top: binding, zIndex: 100 };
|
|
3762
|
+
return __spreadValues({
|
|
3763
|
+
top: 0,
|
|
3764
|
+
zIndex: 100,
|
|
3765
|
+
stickyClass: "v-sticky--fixed",
|
|
3766
|
+
disabled: false
|
|
3767
|
+
}, binding && typeof binding === "object" ? binding : {});
|
|
3768
|
+
}
|
|
3769
|
+
function parseOffset(value) {
|
|
3770
|
+
if (value === void 0) return "0";
|
|
3771
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
3772
|
+
}
|
|
3773
|
+
function getScrollContainer(el, customContainer) {
|
|
3774
|
+
if (customContainer) {
|
|
3775
|
+
if (typeof customContainer === "string") {
|
|
3776
|
+
return document.querySelector(customContainer) || getScrollParent(el);
|
|
3777
|
+
}
|
|
3778
|
+
return customContainer;
|
|
3779
|
+
}
|
|
3780
|
+
const parent = el.parentElement;
|
|
3781
|
+
if (parent) {
|
|
3782
|
+
const { overflow, overflowX, overflowY } = getComputedStyle(parent);
|
|
3783
|
+
if (/(auto|scroll)/.test(overflow + overflowX + overflowY)) {
|
|
3784
|
+
return parent;
|
|
3785
|
+
}
|
|
3786
|
+
}
|
|
3787
|
+
return getScrollParent(el);
|
|
3788
|
+
}
|
|
3789
|
+
function checkSticky(el, state) {
|
|
3790
|
+
if (state.options.disabled) {
|
|
3791
|
+
unsetSticky(el, state);
|
|
3792
|
+
return;
|
|
3793
|
+
}
|
|
3794
|
+
const topOffset = parseFloat(parseOffset(state.options.top));
|
|
3795
|
+
const containerRect = state.container === window ? { top: 0 } : state.container.getBoundingClientRect();
|
|
3796
|
+
const referenceEl = state.placeholder || el;
|
|
3797
|
+
const rect = referenceEl.getBoundingClientRect();
|
|
3798
|
+
const elementTopRelativeToContainer = rect.top - containerRect.top;
|
|
3799
|
+
const shouldSticky = elementTopRelativeToContainer <= topOffset;
|
|
3800
|
+
if (shouldSticky && !state.isSticky) {
|
|
3801
|
+
setSticky(el, state, topOffset, containerRect.top);
|
|
3802
|
+
} else if (!shouldSticky && state.isSticky) {
|
|
3803
|
+
unsetSticky(el, state);
|
|
3804
|
+
}
|
|
3805
|
+
}
|
|
3806
|
+
function setSticky(el, state, topOffset, containerTop) {
|
|
3807
|
+
var _a, _b, _c;
|
|
3808
|
+
state.isSticky = true;
|
|
3809
|
+
const placeholder = document.createElement("div");
|
|
3810
|
+
placeholder.style.cssText = `width:${el.offsetWidth}px;height:${el.offsetHeight}px`;
|
|
3811
|
+
(_a = el.parentNode) == null ? void 0 : _a.insertBefore(placeholder, el);
|
|
3812
|
+
state.placeholder = placeholder;
|
|
3813
|
+
const fixedTop = state.container === window ? topOffset : containerTop + topOffset;
|
|
3814
|
+
el.style.position = "fixed";
|
|
3815
|
+
el.style.top = `${fixedTop}px`;
|
|
3816
|
+
el.style.zIndex = String(state.options.zIndex || 100);
|
|
3817
|
+
el.style.width = `${el.offsetWidth}px`;
|
|
3818
|
+
if (state.options.bottom !== void 0) {
|
|
3819
|
+
el.style.bottom = parseOffset(state.options.bottom);
|
|
3820
|
+
}
|
|
3821
|
+
state.options.stickyClass && el.classList.add(state.options.stickyClass);
|
|
3822
|
+
el.dispatchEvent(new CustomEvent("sticky:change", { detail: { isSticky: true } }));
|
|
3823
|
+
(_c = (_b = state.options).onChange) == null ? void 0 : _c.call(_b, true);
|
|
3824
|
+
}
|
|
3825
|
+
function unsetSticky(el, state) {
|
|
3826
|
+
var _a, _b, _c, _d;
|
|
3827
|
+
if (!state.isSticky) return;
|
|
3828
|
+
state.isSticky = false;
|
|
3829
|
+
(_b = (_a = state.placeholder) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(state.placeholder);
|
|
3830
|
+
state.placeholder = null;
|
|
3831
|
+
Object.assign(el.style, state.originalStyles);
|
|
3832
|
+
state.options.stickyClass && el.classList.remove(state.options.stickyClass);
|
|
3833
|
+
el.dispatchEvent(new CustomEvent("sticky:change", { detail: { isSticky: false } }));
|
|
3834
|
+
(_d = (_c = state.options).onChange) == null ? void 0 : _d.call(_c, false);
|
|
3835
|
+
}
|
|
3836
|
+
const vSticky = defineDirective({
|
|
3837
|
+
name: "sticky",
|
|
3838
|
+
ssr: false,
|
|
3839
|
+
defaults: { top: 0, zIndex: 100, stickyClass: "v-sticky--fixed", disabled: false },
|
|
3840
|
+
mounted(el, binding) {
|
|
3841
|
+
const options = normalizeOptions$7(binding.value);
|
|
3842
|
+
if (options.disabled || !isBrowser()) return;
|
|
3843
|
+
const container = getScrollContainer(el, options.container);
|
|
3844
|
+
const state = {
|
|
3845
|
+
options,
|
|
3846
|
+
placeholder: null,
|
|
3847
|
+
originalStyles: {
|
|
3848
|
+
position: el.style.position,
|
|
3849
|
+
top: el.style.top,
|
|
3850
|
+
bottom: el.style.bottom,
|
|
3851
|
+
zIndex: el.style.zIndex,
|
|
3852
|
+
width: el.style.width
|
|
3853
|
+
},
|
|
3854
|
+
isSticky: false,
|
|
3855
|
+
container,
|
|
3856
|
+
scrollHandler: () => checkSticky(el, state),
|
|
3857
|
+
resizeHandler: () => checkSticky(el, state)
|
|
3858
|
+
};
|
|
3859
|
+
el.classList.add("v-sticky");
|
|
3860
|
+
el[STATE_KEY] = state;
|
|
3861
|
+
on(container, "scroll", state.scrollHandler, { passive: true });
|
|
3862
|
+
on(window, "resize", state.resizeHandler, { passive: true });
|
|
3863
|
+
checkSticky(el, state);
|
|
3864
|
+
},
|
|
3865
|
+
updated(el, binding) {
|
|
3866
|
+
const state = el[STATE_KEY];
|
|
3867
|
+
if (!state) return;
|
|
3868
|
+
state.options = normalizeOptions$7(binding.value);
|
|
3869
|
+
checkSticky(el, state);
|
|
3870
|
+
},
|
|
3871
|
+
unmounted(el) {
|
|
3872
|
+
var _a, _b;
|
|
3873
|
+
const state = el[STATE_KEY];
|
|
3874
|
+
if (!state) return;
|
|
3875
|
+
(_b = (_a = state.placeholder) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(state.placeholder);
|
|
3876
|
+
Object.assign(el.style, state.originalStyles);
|
|
3877
|
+
el.classList.remove("v-sticky", state.options.stickyClass || "v-sticky--fixed");
|
|
3878
|
+
off(state.container, "scroll", state.scrollHandler);
|
|
3879
|
+
off(window, "resize", state.resizeHandler);
|
|
3880
|
+
delete el[STATE_KEY];
|
|
3881
|
+
}
|
|
3882
|
+
});
|
|
3883
|
+
function normalizeOptions$6(binding, directiveBinding) {
|
|
3884
|
+
const wait = parseTime(directiveBinding.arg) || 300;
|
|
3885
|
+
if (typeof binding === "function") {
|
|
3886
|
+
return { handler: binding, wait };
|
|
3887
|
+
}
|
|
3888
|
+
return __spreadProps(__spreadValues({}, binding), { wait: binding.wait || wait });
|
|
3889
|
+
}
|
|
3890
|
+
const vThrottle = defineDirective({
|
|
3891
|
+
name: "throttle",
|
|
3892
|
+
ssr: true,
|
|
3893
|
+
// SSR safe - event binding is skipped on server
|
|
3894
|
+
defaults: {
|
|
3895
|
+
wait: 300,
|
|
3896
|
+
leading: true,
|
|
3897
|
+
trailing: true
|
|
3898
|
+
},
|
|
3899
|
+
mounted(el, binding) {
|
|
3900
|
+
const options = normalizeOptions$6(binding.value, binding);
|
|
3901
|
+
const eventType = getEventTypeFromModifiers(binding.modifiers) || getDefaultEventType(el);
|
|
3902
|
+
const throttledFn = throttle(options.handler, options.wait, {
|
|
3903
|
+
leading: options.leading,
|
|
3904
|
+
trailing: options.trailing
|
|
3905
|
+
});
|
|
3906
|
+
el.addEventListener(eventType, throttledFn);
|
|
3907
|
+
el.__throttle = {
|
|
3908
|
+
throttledFn,
|
|
3909
|
+
eventType,
|
|
3910
|
+
options
|
|
3911
|
+
};
|
|
3912
|
+
},
|
|
3913
|
+
updated(el, binding) {
|
|
3914
|
+
const state = el.__throttle;
|
|
3915
|
+
if (!state) return;
|
|
3916
|
+
const newOptions = normalizeOptions$6(binding.value, binding);
|
|
3917
|
+
if (newOptions.wait !== state.options.wait || newOptions.leading !== state.options.leading || newOptions.trailing !== state.options.trailing) {
|
|
3918
|
+
state.throttledFn.cancel();
|
|
3919
|
+
const throttledFn = throttle(newOptions.handler, newOptions.wait, {
|
|
3920
|
+
leading: newOptions.leading,
|
|
3921
|
+
trailing: newOptions.trailing
|
|
3922
|
+
});
|
|
3923
|
+
el.removeEventListener(state.eventType, state.throttledFn);
|
|
3924
|
+
el.addEventListener(state.eventType, throttledFn);
|
|
3925
|
+
el.__throttle = {
|
|
3926
|
+
throttledFn,
|
|
3927
|
+
eventType: state.eventType,
|
|
3928
|
+
options: newOptions
|
|
3929
|
+
};
|
|
3930
|
+
} else if (newOptions.handler !== state.options.handler) {
|
|
3931
|
+
state.options.handler = newOptions.handler;
|
|
3932
|
+
}
|
|
3933
|
+
},
|
|
3934
|
+
unmounted(el) {
|
|
3935
|
+
const state = el.__throttle;
|
|
3936
|
+
if (!state) return;
|
|
3937
|
+
state.throttledFn.cancel();
|
|
3938
|
+
el.removeEventListener(state.eventType, state.throttledFn);
|
|
3939
|
+
delete el.__throttle;
|
|
3940
|
+
}
|
|
3941
|
+
});
|
|
3942
|
+
const TOOLTIP_STYLES = {
|
|
3943
|
+
padding: "8px 12px",
|
|
3944
|
+
background: "#333",
|
|
3945
|
+
color: "#fff",
|
|
3946
|
+
borderRadius: "6px",
|
|
3947
|
+
fontSize: "14px",
|
|
3948
|
+
lineHeight: "1.5",
|
|
3949
|
+
minWidth: "96px",
|
|
3950
|
+
maxWidth: "320px",
|
|
3951
|
+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
|
|
3952
|
+
};
|
|
3953
|
+
let tooltipContainer = null;
|
|
3954
|
+
function getTooltipContainer() {
|
|
3955
|
+
if (!tooltipContainer && typeof document !== "undefined") {
|
|
3956
|
+
tooltipContainer = document.createElement("div");
|
|
3957
|
+
tooltipContainer.id = "directix-tooltip-container";
|
|
3958
|
+
tooltipContainer.style.cssText = "position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;";
|
|
3959
|
+
document.body.appendChild(tooltipContainer);
|
|
3960
|
+
}
|
|
3961
|
+
return tooltipContainer;
|
|
3962
|
+
}
|
|
3963
|
+
function createTooltip(options) {
|
|
3964
|
+
const tooltip = document.createElement("div");
|
|
3965
|
+
tooltip.className = `v-tooltip v-tooltip--${options.placement || "top"}`;
|
|
3966
|
+
if (options.class) tooltip.classList.add(options.class);
|
|
3967
|
+
const maxWidth = options.maxWidth ? typeof options.maxWidth === "number" ? `${options.maxWidth}px` : options.maxWidth : TOOLTIP_STYLES.maxWidth;
|
|
3968
|
+
tooltip.style.cssText = [
|
|
3969
|
+
"position: absolute",
|
|
3970
|
+
`padding: ${TOOLTIP_STYLES.padding}`,
|
|
3971
|
+
`background: ${TOOLTIP_STYLES.background}`,
|
|
3972
|
+
`color: ${TOOLTIP_STYLES.color}`,
|
|
3973
|
+
`border-radius: ${TOOLTIP_STYLES.borderRadius}`,
|
|
3974
|
+
`font-size: ${TOOLTIP_STYLES.fontSize}`,
|
|
3975
|
+
`line-height: ${TOOLTIP_STYLES.lineHeight}`,
|
|
3976
|
+
`min-width: ${TOOLTIP_STYLES.minWidth}`,
|
|
3977
|
+
`max-width: ${maxWidth}`,
|
|
3978
|
+
"word-wrap: break-word",
|
|
3979
|
+
`box-shadow: ${TOOLTIP_STYLES.boxShadow}`,
|
|
3980
|
+
"pointer-events: none",
|
|
3981
|
+
"opacity: 0",
|
|
3982
|
+
"transition: opacity 0.2s ease",
|
|
3983
|
+
`z-index: ${options.zIndex || 9999}`
|
|
3984
|
+
].join(";");
|
|
3985
|
+
if (options.arrow !== false) {
|
|
3986
|
+
const arrow = document.createElement("div");
|
|
3987
|
+
arrow.className = "v-tooltip__arrow";
|
|
3988
|
+
arrow.style.cssText = "position: absolute; width: 8px; height: 8px; background: #333; transform: rotate(45deg);";
|
|
3989
|
+
tooltip.appendChild(arrow);
|
|
3990
|
+
}
|
|
3991
|
+
const content = document.createElement("div");
|
|
3992
|
+
content.className = "v-tooltip__content";
|
|
3993
|
+
content.textContent = options.content;
|
|
3994
|
+
tooltip.appendChild(content);
|
|
3995
|
+
return tooltip;
|
|
3996
|
+
}
|
|
3997
|
+
function positionTooltip(tooltip, el, placement, offset) {
|
|
3998
|
+
const elRect = el.getBoundingClientRect();
|
|
3999
|
+
const tooltipRect = tooltip.getBoundingClientRect();
|
|
4000
|
+
let top = 0, left = 0;
|
|
4001
|
+
switch (placement) {
|
|
4002
|
+
case "top":
|
|
4003
|
+
top = elRect.top - tooltipRect.height - offset;
|
|
4004
|
+
left = elRect.left + (elRect.width - tooltipRect.width) / 2;
|
|
4005
|
+
break;
|
|
4006
|
+
case "bottom":
|
|
4007
|
+
top = elRect.bottom + offset;
|
|
4008
|
+
left = elRect.left + (elRect.width - tooltipRect.width) / 2;
|
|
4009
|
+
break;
|
|
4010
|
+
case "left":
|
|
4011
|
+
top = elRect.top + (elRect.height - tooltipRect.height) / 2;
|
|
4012
|
+
left = elRect.left - tooltipRect.width - offset;
|
|
4013
|
+
break;
|
|
4014
|
+
case "right":
|
|
4015
|
+
top = elRect.top + (elRect.height - tooltipRect.height) / 2;
|
|
4016
|
+
left = elRect.right + offset;
|
|
4017
|
+
break;
|
|
4018
|
+
}
|
|
4019
|
+
const viewportWidth = window.innerWidth;
|
|
4020
|
+
const viewportHeight = window.innerHeight;
|
|
4021
|
+
if (left < 0) left = 8;
|
|
4022
|
+
if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 8;
|
|
4023
|
+
if (top < 0) top = 8;
|
|
4024
|
+
if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 8;
|
|
4025
|
+
tooltip.style.top = `${top}px`;
|
|
4026
|
+
tooltip.style.left = `${left}px`;
|
|
4027
|
+
const arrow = tooltip.querySelector(".v-tooltip__arrow");
|
|
4028
|
+
if (arrow) {
|
|
4029
|
+
const halfArrow = 4;
|
|
4030
|
+
switch (placement) {
|
|
4031
|
+
case "top":
|
|
4032
|
+
Object.assign(arrow.style, { bottom: `-${halfArrow}px`, left: "50%", transform: "translateX(-50%) rotate(45deg)" });
|
|
4033
|
+
break;
|
|
4034
|
+
case "bottom":
|
|
4035
|
+
Object.assign(arrow.style, { top: `-${halfArrow}px`, left: "50%", transform: "translateX(-50%) rotate(45deg)" });
|
|
4036
|
+
break;
|
|
4037
|
+
case "left":
|
|
4038
|
+
Object.assign(arrow.style, { right: `-${halfArrow}px`, top: "50%", transform: "translateY(-50%) rotate(45deg)" });
|
|
4039
|
+
break;
|
|
4040
|
+
case "right":
|
|
4041
|
+
Object.assign(arrow.style, { left: `-${halfArrow}px`, top: "50%", transform: "translateY(-50%) rotate(45deg)" });
|
|
4042
|
+
break;
|
|
4043
|
+
}
|
|
4044
|
+
}
|
|
4045
|
+
}
|
|
4046
|
+
function showTooltip(el, state) {
|
|
4047
|
+
if (state.isVisible || state.options.disabled) return;
|
|
4048
|
+
if (state.hideTimeout) {
|
|
4049
|
+
clearTimeout(state.hideTimeout);
|
|
4050
|
+
state.hideTimeout = null;
|
|
4051
|
+
}
|
|
4052
|
+
const doShow = () => {
|
|
4053
|
+
var _a, _b;
|
|
4054
|
+
const tooltip = createTooltip(state.options);
|
|
4055
|
+
state.tooltip = tooltip;
|
|
4056
|
+
getTooltipContainer().appendChild(tooltip);
|
|
4057
|
+
requestAnimationFrame(() => {
|
|
4058
|
+
positionTooltip(tooltip, el, state.options.placement || "top", state.options.offset || 8);
|
|
4059
|
+
requestAnimationFrame(() => {
|
|
4060
|
+
tooltip.style.opacity = "1";
|
|
4061
|
+
});
|
|
4062
|
+
});
|
|
4063
|
+
state.isVisible = true;
|
|
4064
|
+
(_b = (_a = state.options).onShow) == null ? void 0 : _b.call(_a);
|
|
4065
|
+
};
|
|
4066
|
+
if (state.options.delay && state.options.delay > 0) {
|
|
4067
|
+
state.showTimeout = setTimeout(doShow, state.options.delay);
|
|
4068
|
+
} else {
|
|
4069
|
+
doShow();
|
|
4070
|
+
}
|
|
4071
|
+
}
|
|
4072
|
+
function hideTooltip(state) {
|
|
4073
|
+
if (!state.isVisible) return;
|
|
4074
|
+
if (state.showTimeout) {
|
|
4075
|
+
clearTimeout(state.showTimeout);
|
|
4076
|
+
state.showTimeout = null;
|
|
4077
|
+
}
|
|
4078
|
+
const doHide = () => {
|
|
4079
|
+
var _a, _b;
|
|
4080
|
+
if (state.tooltip) {
|
|
4081
|
+
state.tooltip.style.opacity = "0";
|
|
4082
|
+
setTimeout(() => {
|
|
4083
|
+
var _a2;
|
|
4084
|
+
(_a2 = state.tooltip) == null ? void 0 : _a2.remove();
|
|
4085
|
+
state.tooltip = null;
|
|
4086
|
+
}, 200);
|
|
4087
|
+
}
|
|
4088
|
+
state.isVisible = false;
|
|
4089
|
+
(_b = (_a = state.options).onHide) == null ? void 0 : _b.call(_a);
|
|
4090
|
+
};
|
|
4091
|
+
if (state.options.hideDelay && state.options.hideDelay > 0) {
|
|
4092
|
+
state.hideTimeout = setTimeout(doHide, state.options.hideDelay);
|
|
4093
|
+
} else {
|
|
4094
|
+
doHide();
|
|
4095
|
+
}
|
|
4096
|
+
}
|
|
4097
|
+
function setupTriggerHandlers(el, state) {
|
|
4098
|
+
const { trigger = "hover" } = state.options;
|
|
4099
|
+
const show = () => showTooltip(el, state);
|
|
4100
|
+
const hide = () => hideTooltip(state);
|
|
4101
|
+
const toggle = () => state.isVisible ? hide() : show();
|
|
4102
|
+
state.handlers = { show, hide, toggle };
|
|
4103
|
+
switch (trigger) {
|
|
4104
|
+
case "hover":
|
|
4105
|
+
el.addEventListener("mouseenter", show);
|
|
4106
|
+
el.addEventListener("mouseleave", hide);
|
|
4107
|
+
break;
|
|
4108
|
+
case "click":
|
|
4109
|
+
el.addEventListener("click", toggle);
|
|
4110
|
+
document.addEventListener("click", state.handlers.docHide = (e) => {
|
|
4111
|
+
if (state.isVisible && !el.contains(e.target)) hide();
|
|
4112
|
+
});
|
|
4113
|
+
break;
|
|
4114
|
+
case "focus":
|
|
4115
|
+
el.addEventListener("focus", show);
|
|
4116
|
+
el.addEventListener("blur", hide);
|
|
4117
|
+
break;
|
|
4118
|
+
}
|
|
4119
|
+
}
|
|
4120
|
+
function removeTriggerHandlers(el, state) {
|
|
4121
|
+
const { show, hide, toggle, docHide } = state.handlers;
|
|
4122
|
+
if (show) {
|
|
4123
|
+
el.removeEventListener("mouseenter", show);
|
|
4124
|
+
el.removeEventListener("focus", show);
|
|
4125
|
+
}
|
|
4126
|
+
if (hide) {
|
|
4127
|
+
el.removeEventListener("mouseleave", hide);
|
|
4128
|
+
el.removeEventListener("blur", hide);
|
|
4129
|
+
}
|
|
4130
|
+
if (toggle) {
|
|
4131
|
+
el.removeEventListener("click", toggle);
|
|
4132
|
+
}
|
|
4133
|
+
if (docHide) {
|
|
4134
|
+
document.removeEventListener("click", docHide);
|
|
4135
|
+
}
|
|
4136
|
+
}
|
|
4137
|
+
function normalizeOptions$5(binding) {
|
|
4138
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4139
|
+
if (typeof binding === "string") {
|
|
4140
|
+
return { content: binding, placement: "top", trigger: "hover" };
|
|
4141
|
+
}
|
|
4142
|
+
if (!binding) {
|
|
4143
|
+
return { content: "", placement: "top", trigger: "hover" };
|
|
4144
|
+
}
|
|
4145
|
+
return {
|
|
4146
|
+
content: binding.content,
|
|
4147
|
+
placement: (_a = binding.placement) != null ? _a : "top",
|
|
4148
|
+
trigger: (_b = binding.trigger) != null ? _b : "hover",
|
|
4149
|
+
delay: (_c = binding.delay) != null ? _c : 0,
|
|
4150
|
+
hideDelay: (_d = binding.hideDelay) != null ? _d : 0,
|
|
4151
|
+
offset: (_e = binding.offset) != null ? _e : 8,
|
|
4152
|
+
class: binding.class,
|
|
4153
|
+
arrow: (_f = binding.arrow) != null ? _f : true,
|
|
4154
|
+
disabled: (_g = binding.disabled) != null ? _g : false,
|
|
4155
|
+
maxWidth: binding.maxWidth,
|
|
4156
|
+
zIndex: (_h = binding.zIndex) != null ? _h : 9999,
|
|
4157
|
+
onShow: binding.onShow,
|
|
4158
|
+
onHide: binding.onHide
|
|
4159
|
+
};
|
|
4160
|
+
}
|
|
4161
|
+
function createState(options) {
|
|
4162
|
+
return {
|
|
4163
|
+
options,
|
|
4164
|
+
tooltip: null,
|
|
4165
|
+
showTimeout: null,
|
|
4166
|
+
hideTimeout: null,
|
|
4167
|
+
isVisible: false,
|
|
4168
|
+
handlers: {}
|
|
4169
|
+
};
|
|
4170
|
+
}
|
|
4171
|
+
const vTooltip = defineDirective({
|
|
4172
|
+
name: "tooltip",
|
|
4173
|
+
ssr: false,
|
|
4174
|
+
mounted(el, binding) {
|
|
4175
|
+
const options = normalizeOptions$5(binding.value);
|
|
4176
|
+
if (options.disabled || !options.content) return;
|
|
4177
|
+
const state = createState(options);
|
|
4178
|
+
el.__tooltip = state;
|
|
4179
|
+
setupTriggerHandlers(el, state);
|
|
4180
|
+
el.setAttribute("aria-describedby", "v-tooltip");
|
|
4181
|
+
},
|
|
4182
|
+
updated(el, binding) {
|
|
4183
|
+
const state = el.__tooltip;
|
|
4184
|
+
const newOptions = normalizeOptions$5(binding.value);
|
|
4185
|
+
if (!state) {
|
|
4186
|
+
if (!newOptions.disabled && newOptions.content) {
|
|
4187
|
+
const newState = createState(newOptions);
|
|
4188
|
+
el.__tooltip = newState;
|
|
4189
|
+
setupTriggerHandlers(el, newState);
|
|
4190
|
+
if (newOptions.trigger === "manual") {
|
|
4191
|
+
showTooltip(el, newState);
|
|
4192
|
+
}
|
|
4193
|
+
}
|
|
4194
|
+
return;
|
|
4195
|
+
}
|
|
4196
|
+
if (newOptions.trigger === "manual") {
|
|
4197
|
+
const oldDisabled = state.options.disabled;
|
|
4198
|
+
state.options = newOptions;
|
|
4199
|
+
if (newOptions.disabled && !oldDisabled) {
|
|
4200
|
+
hideTooltip(state);
|
|
4201
|
+
} else if (!newOptions.disabled && oldDisabled) {
|
|
4202
|
+
showTooltip(el, state);
|
|
4203
|
+
}
|
|
4204
|
+
return;
|
|
4205
|
+
}
|
|
4206
|
+
if (state.tooltip && state.isVisible) {
|
|
4207
|
+
const content = state.tooltip.querySelector(".v-tooltip__content");
|
|
4208
|
+
if (content) content.textContent = newOptions.content;
|
|
4209
|
+
}
|
|
4210
|
+
state.options = newOptions;
|
|
4211
|
+
},
|
|
4212
|
+
unmounted(el) {
|
|
4213
|
+
var _a;
|
|
4214
|
+
const state = el.__tooltip;
|
|
4215
|
+
if (!state) return;
|
|
4216
|
+
if (state.showTimeout) clearTimeout(state.showTimeout);
|
|
4217
|
+
if (state.hideTimeout) clearTimeout(state.hideTimeout);
|
|
4218
|
+
(_a = state.tooltip) == null ? void 0 : _a.remove();
|
|
4219
|
+
removeTriggerHandlers(el, state);
|
|
4220
|
+
delete el.__tooltip;
|
|
4221
|
+
}
|
|
4222
|
+
});
|
|
4223
|
+
const getDistance = (x1, y1, x2, y2) => Math.sqrt(__pow(x2 - x1, 2) + __pow(y2 - y1, 2));
|
|
4224
|
+
const getAngle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
|
|
4225
|
+
const MOUSE_IGNORE_DURATION = 400;
|
|
4226
|
+
const vTouch = defineDirective({
|
|
4227
|
+
name: "touch",
|
|
4228
|
+
ssr: false,
|
|
4229
|
+
mounted(el, binding) {
|
|
4230
|
+
const options = normalizeOptions$4(binding.value);
|
|
4231
|
+
const state = {
|
|
4232
|
+
options,
|
|
4233
|
+
startX: 0,
|
|
4234
|
+
startY: 0,
|
|
4235
|
+
startTime: 0,
|
|
4236
|
+
startDistance: 0,
|
|
4237
|
+
startAngle: 0,
|
|
4238
|
+
lastScale: 1,
|
|
4239
|
+
lastAngle: 0,
|
|
4240
|
+
longPressTimer: null,
|
|
4241
|
+
isLongPress: false,
|
|
4242
|
+
isMouseDown: false,
|
|
4243
|
+
lastTouchEndTime: 0,
|
|
4244
|
+
handlers: { touchStart: () => {
|
|
4245
|
+
}, touchMove: () => {
|
|
4246
|
+
}, touchEnd: () => {
|
|
4247
|
+
} }
|
|
4248
|
+
};
|
|
4249
|
+
el.__touch = state;
|
|
4250
|
+
const clearLongPressTimer = () => {
|
|
4251
|
+
if (state.longPressTimer) {
|
|
4252
|
+
clearTimeout(state.longPressTimer);
|
|
4253
|
+
state.longPressTimer = null;
|
|
4254
|
+
}
|
|
4255
|
+
};
|
|
4256
|
+
const startLongPressTimer = (event) => {
|
|
4257
|
+
clearLongPressTimer();
|
|
4258
|
+
if (state.options.enableLongPress && state.options.onLongPress) {
|
|
4259
|
+
state.longPressTimer = setTimeout(() => {
|
|
4260
|
+
state.isLongPress = true;
|
|
4261
|
+
state.options.onLongPress(event);
|
|
4262
|
+
}, state.options.longPressTimeout || 500);
|
|
4263
|
+
}
|
|
4264
|
+
};
|
|
4265
|
+
const exceedsThreshold = (x, y) => {
|
|
4266
|
+
const threshold = state.options.tapThreshold || 10;
|
|
4267
|
+
return Math.abs(x - state.startX) > threshold || Math.abs(y - state.startY) > threshold;
|
|
4268
|
+
};
|
|
4269
|
+
const handleGestureEnd = (endX, endY, event) => {
|
|
4270
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
4271
|
+
if (state.isLongPress) return;
|
|
4272
|
+
const duration = Date.now() - state.startTime;
|
|
4273
|
+
const deltaX = endX - state.startX;
|
|
4274
|
+
const deltaY = endY - state.startY;
|
|
4275
|
+
const distance = Math.sqrt(__pow(deltaX, 2) + __pow(deltaY, 2));
|
|
4276
|
+
if (state.options.enableSwipe && distance >= (state.options.swipeThreshold || 30) && duration <= (state.options.swipeTimeout || 500)) {
|
|
4277
|
+
const direction = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX > 0 ? "right" : "left" : deltaY > 0 ? "down" : "up";
|
|
4278
|
+
(_b = (_a = state.options).onSwipe) == null ? void 0 : _b.call(_a, direction, event);
|
|
4279
|
+
if (direction === "left") (_d = (_c = state.options).onSwipeLeft) == null ? void 0 : _d.call(_c, event);
|
|
4280
|
+
else if (direction === "right") (_f = (_e = state.options).onSwipeRight) == null ? void 0 : _f.call(_e, event);
|
|
4281
|
+
else if (direction === "up") (_h = (_g = state.options).onSwipeUp) == null ? void 0 : _h.call(_g, event);
|
|
4282
|
+
else (_j = (_i = state.options).onSwipeDown) == null ? void 0 : _j.call(_i, event);
|
|
4283
|
+
} else if (state.options.enableTap && distance < (state.options.tapThreshold || 10) && duration < (state.options.tapTimeout || 250)) {
|
|
4284
|
+
(_l = (_k = state.options).onTap) == null ? void 0 : _l.call(_k, event);
|
|
4285
|
+
}
|
|
4286
|
+
};
|
|
4287
|
+
const handleTouchStart = (e) => {
|
|
4288
|
+
var _a, _b;
|
|
4289
|
+
if (e.touches.length > 1) {
|
|
4290
|
+
e.preventDefault();
|
|
4291
|
+
}
|
|
4292
|
+
state.startTime = Date.now();
|
|
4293
|
+
state.isLongPress = false;
|
|
4294
|
+
if (e.touches.length === 1) {
|
|
4295
|
+
state.startX = e.touches[0].clientX;
|
|
4296
|
+
state.startY = e.touches[0].clientY;
|
|
4297
|
+
startLongPressTimer(e);
|
|
4298
|
+
} else if (e.touches.length === 2) {
|
|
4299
|
+
clearLongPressTimer();
|
|
4300
|
+
const [t1, t2] = e.touches;
|
|
4301
|
+
state.startDistance = getDistance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
|
|
4302
|
+
state.startAngle = getAngle(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
|
|
4303
|
+
state.lastScale = 1;
|
|
4304
|
+
state.lastAngle = 0;
|
|
4305
|
+
}
|
|
4306
|
+
(_b = (_a = state.options).onTouchStart) == null ? void 0 : _b.call(_a, e);
|
|
4307
|
+
};
|
|
4308
|
+
const handleTouchMove = (e) => {
|
|
4309
|
+
var _a, _b;
|
|
4310
|
+
if (e.touches.length >= 1) {
|
|
4311
|
+
e.preventDefault();
|
|
4312
|
+
}
|
|
4313
|
+
if (state.longPressTimer && e.touches.length === 1 && exceedsThreshold(e.touches[0].clientX, e.touches[0].clientY)) {
|
|
4314
|
+
clearLongPressTimer();
|
|
4315
|
+
}
|
|
4316
|
+
if (e.touches.length === 2) {
|
|
4317
|
+
const [t1, t2] = e.touches;
|
|
4318
|
+
const currentDistance = getDistance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
|
|
4319
|
+
const currentAngle = getAngle(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
|
|
4320
|
+
if (state.options.enablePinch && state.options.onPinch) {
|
|
4321
|
+
const scale = currentDistance / state.startDistance;
|
|
4322
|
+
if (Math.abs(scale - state.lastScale) >= (state.options.pinchThreshold || 0.1)) {
|
|
4323
|
+
state.options.onPinch(scale, e);
|
|
4324
|
+
state.lastScale = scale;
|
|
4325
|
+
}
|
|
4326
|
+
}
|
|
4327
|
+
if (state.options.enableRotate && state.options.onRotate) {
|
|
4328
|
+
const angleDiff = currentAngle - state.startAngle;
|
|
4329
|
+
if (Math.abs(angleDiff - state.lastAngle) > 5) {
|
|
4330
|
+
state.options.onRotate(angleDiff, e);
|
|
4331
|
+
state.lastAngle = angleDiff;
|
|
4332
|
+
}
|
|
4333
|
+
}
|
|
4334
|
+
}
|
|
4335
|
+
(_b = (_a = state.options).onTouchMove) == null ? void 0 : _b.call(_a, e);
|
|
4336
|
+
};
|
|
4337
|
+
const handleTouchEnd = (e) => {
|
|
4338
|
+
var _a, _b;
|
|
4339
|
+
clearLongPressTimer();
|
|
4340
|
+
if (e.touches.length === 0) {
|
|
4341
|
+
state.lastTouchEndTime = Date.now();
|
|
4342
|
+
const touch = e.changedTouches[0];
|
|
4343
|
+
handleGestureEnd(touch.clientX, touch.clientY, e);
|
|
4344
|
+
}
|
|
4345
|
+
(_b = (_a = state.options).onTouchEnd) == null ? void 0 : _b.call(_a, e);
|
|
4346
|
+
};
|
|
4347
|
+
const handleMouseDown = (e) => {
|
|
4348
|
+
var _a, _b;
|
|
4349
|
+
if (!state.options.enableMouse) return;
|
|
4350
|
+
if (Date.now() - state.lastTouchEndTime < MOUSE_IGNORE_DURATION) return;
|
|
4351
|
+
e.preventDefault();
|
|
4352
|
+
state.isMouseDown = true;
|
|
4353
|
+
state.startTime = Date.now();
|
|
4354
|
+
state.startX = e.clientX;
|
|
4355
|
+
state.startY = e.clientY;
|
|
4356
|
+
state.isLongPress = false;
|
|
4357
|
+
startLongPressTimer(e);
|
|
4358
|
+
(_b = (_a = state.options).onTouchStart) == null ? void 0 : _b.call(_a, e);
|
|
4359
|
+
};
|
|
4360
|
+
const handleMouseMove = (e) => {
|
|
4361
|
+
var _a, _b;
|
|
4362
|
+
if (!state.isMouseDown || !state.options.enableMouse) return;
|
|
4363
|
+
if (state.longPressTimer && exceedsThreshold(e.clientX, e.clientY)) {
|
|
4364
|
+
clearLongPressTimer();
|
|
4365
|
+
}
|
|
4366
|
+
(_b = (_a = state.options).onTouchMove) == null ? void 0 : _b.call(_a, e);
|
|
4367
|
+
};
|
|
4368
|
+
const handleMouseUp = (e) => {
|
|
4369
|
+
var _a, _b;
|
|
4370
|
+
if (!state.isMouseDown || !state.options.enableMouse) return;
|
|
4371
|
+
state.isMouseDown = false;
|
|
4372
|
+
clearLongPressTimer();
|
|
4373
|
+
if (!state.isLongPress) {
|
|
4374
|
+
handleGestureEnd(e.clientX, e.clientY, e);
|
|
4375
|
+
}
|
|
4376
|
+
(_b = (_a = state.options).onTouchEnd) == null ? void 0 : _b.call(_a, e);
|
|
4377
|
+
};
|
|
4378
|
+
state.handlers = { touchStart: handleTouchStart, touchMove: handleTouchMove, touchEnd: handleTouchEnd, mouseDown: handleMouseDown, mouseMove: handleMouseMove, mouseUp: handleMouseUp };
|
|
4379
|
+
el.addEventListener("touchstart", handleTouchStart, { passive: false });
|
|
4380
|
+
el.addEventListener("touchmove", handleTouchMove, { passive: false });
|
|
4381
|
+
el.addEventListener("touchend", handleTouchEnd);
|
|
4382
|
+
el.addEventListener("touchcancel", handleTouchEnd);
|
|
4383
|
+
if (options.enableMouse) {
|
|
4384
|
+
el.addEventListener("mousedown", handleMouseDown);
|
|
4385
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
4386
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
4387
|
+
}
|
|
4388
|
+
},
|
|
4389
|
+
updated(el, binding) {
|
|
4390
|
+
const state = el.__touch;
|
|
4391
|
+
if (state) state.options = normalizeOptions$4(binding.value);
|
|
4392
|
+
},
|
|
4393
|
+
unmounted(el) {
|
|
4394
|
+
const state = el.__touch;
|
|
4395
|
+
if (state == null ? void 0 : state.longPressTimer) clearTimeout(state.longPressTimer);
|
|
4396
|
+
if (state == null ? void 0 : state.handlers) {
|
|
4397
|
+
el.removeEventListener("touchstart", state.handlers.touchStart);
|
|
4398
|
+
el.removeEventListener("touchmove", state.handlers.touchMove);
|
|
4399
|
+
el.removeEventListener("touchend", state.handlers.touchEnd);
|
|
4400
|
+
el.removeEventListener("touchcancel", state.handlers.touchEnd);
|
|
4401
|
+
if (state.handlers.mouseDown) el.removeEventListener("mousedown", state.handlers.mouseDown);
|
|
4402
|
+
if (state.handlers.mouseMove) document.removeEventListener("mousemove", state.handlers.mouseMove);
|
|
4403
|
+
if (state.handlers.mouseUp) document.removeEventListener("mouseup", state.handlers.mouseUp);
|
|
4404
|
+
}
|
|
4405
|
+
delete el.__touch;
|
|
4406
|
+
}
|
|
4407
|
+
});
|
|
4408
|
+
function normalizeOptions$4(binding) {
|
|
4409
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
4410
|
+
return {
|
|
4411
|
+
swipeThreshold: (_a = binding == null ? void 0 : binding.swipeThreshold) != null ? _a : 30,
|
|
4412
|
+
swipeTimeout: (_b = binding == null ? void 0 : binding.swipeTimeout) != null ? _b : 500,
|
|
4413
|
+
pinchThreshold: (_c = binding == null ? void 0 : binding.pinchThreshold) != null ? _c : 0.1,
|
|
4414
|
+
enableSwipe: (_d = binding == null ? void 0 : binding.enableSwipe) != null ? _d : true,
|
|
4415
|
+
enablePinch: (_e = binding == null ? void 0 : binding.enablePinch) != null ? _e : true,
|
|
4416
|
+
enableRotate: (_f = binding == null ? void 0 : binding.enableRotate) != null ? _f : true,
|
|
4417
|
+
enableTap: (_g = binding == null ? void 0 : binding.enableTap) != null ? _g : true,
|
|
4418
|
+
tapTimeout: (_h = binding == null ? void 0 : binding.tapTimeout) != null ? _h : 250,
|
|
4419
|
+
tapThreshold: (_i = binding == null ? void 0 : binding.tapThreshold) != null ? _i : 10,
|
|
4420
|
+
enableLongPress: (_j = binding == null ? void 0 : binding.enableLongPress) != null ? _j : true,
|
|
4421
|
+
longPressTimeout: (_k = binding == null ? void 0 : binding.longPressTimeout) != null ? _k : 500,
|
|
4422
|
+
enableMouse: (_l = binding == null ? void 0 : binding.enableMouse) != null ? _l : true,
|
|
4423
|
+
onSwipe: binding == null ? void 0 : binding.onSwipe,
|
|
4424
|
+
onSwipeLeft: binding == null ? void 0 : binding.onSwipeLeft,
|
|
4425
|
+
onSwipeRight: binding == null ? void 0 : binding.onSwipeRight,
|
|
4426
|
+
onSwipeUp: binding == null ? void 0 : binding.onSwipeUp,
|
|
4427
|
+
onSwipeDown: binding == null ? void 0 : binding.onSwipeDown,
|
|
4428
|
+
onPinch: binding == null ? void 0 : binding.onPinch,
|
|
4429
|
+
onRotate: binding == null ? void 0 : binding.onRotate,
|
|
4430
|
+
onTap: binding == null ? void 0 : binding.onTap,
|
|
4431
|
+
onLongPress: binding == null ? void 0 : binding.onLongPress,
|
|
4432
|
+
onTouchStart: binding == null ? void 0 : binding.onTouchStart,
|
|
4433
|
+
onTouchMove: binding == null ? void 0 : binding.onTouchMove,
|
|
4434
|
+
onTouchEnd: binding == null ? void 0 : binding.onTouchEnd
|
|
4435
|
+
};
|
|
4436
|
+
}
|
|
4437
|
+
function trimText(text, options) {
|
|
4438
|
+
const { position = "both", chars } = options;
|
|
4439
|
+
const charPattern = chars ? `[\\s${escapeRegex(chars)}]` : "\\s";
|
|
4440
|
+
switch (position) {
|
|
4441
|
+
case "start":
|
|
4442
|
+
return text.replace(new RegExp(`^${charPattern}+`, "g"), "");
|
|
4443
|
+
case "end":
|
|
4444
|
+
return text.replace(new RegExp(`${charPattern}+$`, "g"), "");
|
|
4445
|
+
case "both":
|
|
4446
|
+
default:
|
|
4447
|
+
return text.replace(new RegExp(`^${charPattern}+|${charPattern}+$`, "g"), "");
|
|
4448
|
+
}
|
|
4449
|
+
}
|
|
4450
|
+
function escapeRegex(str) {
|
|
4451
|
+
return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
4452
|
+
}
|
|
4453
|
+
const vTrim = defineDirective({
|
|
4454
|
+
name: "trim",
|
|
4455
|
+
ssr: true,
|
|
4456
|
+
mounted(el, binding) {
|
|
4457
|
+
const options = normalizeOptions$3(binding.value);
|
|
4458
|
+
if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
|
|
4459
|
+
setupInputElement(el, options);
|
|
4460
|
+
} else {
|
|
4461
|
+
const text = el.textContent || "";
|
|
4462
|
+
el.textContent = trimText(text, options);
|
|
4463
|
+
}
|
|
4464
|
+
},
|
|
4465
|
+
updated(el, binding) {
|
|
4466
|
+
const options = normalizeOptions$3(binding.value);
|
|
4467
|
+
const state = el.__trim;
|
|
4468
|
+
if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
|
|
4469
|
+
if (state) {
|
|
4470
|
+
state.options = options;
|
|
4471
|
+
}
|
|
4472
|
+
} else {
|
|
4473
|
+
const text = el.textContent || "";
|
|
4474
|
+
el.textContent = trimText(text, options);
|
|
4475
|
+
}
|
|
4476
|
+
},
|
|
4477
|
+
unmounted(el) {
|
|
4478
|
+
const state = el.__trim;
|
|
4479
|
+
if (state == null ? void 0 : state.inputHandler) {
|
|
4480
|
+
el.removeEventListener("input", state.inputHandler);
|
|
4481
|
+
}
|
|
4482
|
+
if (state == null ? void 0 : state.blurHandler) {
|
|
4483
|
+
el.removeEventListener("blur", state.blurHandler);
|
|
4484
|
+
}
|
|
4485
|
+
delete el.__trim;
|
|
4486
|
+
}
|
|
4487
|
+
});
|
|
4488
|
+
function setupInputElement(el, options) {
|
|
4489
|
+
const state = { options };
|
|
4490
|
+
el.__trim = state;
|
|
4491
|
+
const performTrim = () => {
|
|
4492
|
+
const originalValue = el.value;
|
|
4493
|
+
const trimmed = trimText(originalValue, options);
|
|
4494
|
+
if (originalValue !== trimmed) {
|
|
4495
|
+
el.value = trimmed;
|
|
4496
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
4497
|
+
}
|
|
4498
|
+
};
|
|
4499
|
+
if (options.onInput) {
|
|
4500
|
+
const inputHandler = () => {
|
|
4501
|
+
const originalValue = el.value;
|
|
4502
|
+
const cursorPos = el.selectionStart;
|
|
4503
|
+
const trimmed = originalValue.replace(/\s+$/g, "");
|
|
4504
|
+
if (originalValue !== trimmed) {
|
|
4505
|
+
el.value = trimmed;
|
|
4506
|
+
if (cursorPos !== null) {
|
|
4507
|
+
const newCursorPos = Math.min(cursorPos, trimmed.length);
|
|
4508
|
+
el.setSelectionRange(newCursorPos, newCursorPos);
|
|
4509
|
+
}
|
|
4510
|
+
}
|
|
4511
|
+
};
|
|
4512
|
+
el.addEventListener("input", inputHandler);
|
|
4513
|
+
state.inputHandler = inputHandler;
|
|
4514
|
+
}
|
|
4515
|
+
if (options.onBlur) {
|
|
4516
|
+
const blurHandler = () => performTrim();
|
|
4517
|
+
el.addEventListener("blur", blurHandler);
|
|
4518
|
+
state.blurHandler = blurHandler;
|
|
4519
|
+
}
|
|
4520
|
+
if (el.value) {
|
|
4521
|
+
performTrim();
|
|
4522
|
+
}
|
|
4523
|
+
}
|
|
4524
|
+
function normalizeOptions$3(binding) {
|
|
4525
|
+
var _a, _b, _c;
|
|
4526
|
+
if (binding === void 0 || binding === true) {
|
|
4527
|
+
return { position: "both", onInput: true, onBlur: true };
|
|
4528
|
+
}
|
|
4529
|
+
if (binding === false) {
|
|
4530
|
+
return { position: "both", onInput: false, onBlur: false };
|
|
4531
|
+
}
|
|
4532
|
+
if (typeof binding === "string") {
|
|
4533
|
+
return { position: binding, onInput: true, onBlur: true };
|
|
4534
|
+
}
|
|
4535
|
+
return {
|
|
4536
|
+
position: (_a = binding.position) != null ? _a : "both",
|
|
4537
|
+
onInput: (_b = binding.onInput) != null ? _b : true,
|
|
4538
|
+
onBlur: (_c = binding.onBlur) != null ? _c : true,
|
|
4539
|
+
chars: binding.chars
|
|
4540
|
+
};
|
|
4541
|
+
}
|
|
4542
|
+
function truncateText(text, options) {
|
|
4543
|
+
const { length = 100, position = "end", ellipsis = "..." } = options;
|
|
4544
|
+
if (text.length <= length) {
|
|
4545
|
+
return text;
|
|
4546
|
+
}
|
|
4547
|
+
switch (position) {
|
|
4548
|
+
case "start":
|
|
4549
|
+
return ellipsis + text.slice(-(length - ellipsis.length));
|
|
4550
|
+
case "middle": {
|
|
4551
|
+
const startLen = Math.ceil((length - ellipsis.length) / 2);
|
|
4552
|
+
const endLen = Math.floor((length - ellipsis.length) / 2);
|
|
4553
|
+
return text.slice(0, startLen) + ellipsis + text.slice(-endLen);
|
|
4554
|
+
}
|
|
4555
|
+
case "end":
|
|
4556
|
+
default:
|
|
4557
|
+
return text.slice(0, length - ellipsis.length) + ellipsis;
|
|
4558
|
+
}
|
|
4559
|
+
}
|
|
4560
|
+
const vTruncate = defineDirective({
|
|
4561
|
+
name: "truncate",
|
|
4562
|
+
ssr: true,
|
|
4563
|
+
mounted(el, binding) {
|
|
4564
|
+
const options = normalizeOptions$2(binding.value);
|
|
4565
|
+
const text = el.textContent || "";
|
|
4566
|
+
const state = {
|
|
4567
|
+
originalText: text,
|
|
4568
|
+
options
|
|
4569
|
+
};
|
|
4570
|
+
el.__truncate = state;
|
|
4571
|
+
applyTruncation(el, text, options);
|
|
4572
|
+
},
|
|
4573
|
+
updated(el, binding) {
|
|
4574
|
+
const state = el.__truncate;
|
|
4575
|
+
const newOptions = normalizeOptions$2(binding.value);
|
|
4576
|
+
if (state) {
|
|
4577
|
+
const originalText = state.originalText;
|
|
4578
|
+
if (JSON.stringify(newOptions) !== JSON.stringify(state.options)) {
|
|
4579
|
+
state.options = newOptions;
|
|
4580
|
+
applyTruncation(el, originalText, newOptions);
|
|
4581
|
+
}
|
|
4582
|
+
} else {
|
|
4583
|
+
const text = el.textContent || "";
|
|
4584
|
+
el.__truncate = {
|
|
4585
|
+
originalText: text,
|
|
4586
|
+
options: newOptions
|
|
4587
|
+
};
|
|
4588
|
+
applyTruncation(el, text, newOptions);
|
|
4589
|
+
}
|
|
4590
|
+
},
|
|
4591
|
+
unmounted(el) {
|
|
4592
|
+
delete el.__truncate;
|
|
4593
|
+
}
|
|
4594
|
+
});
|
|
4595
|
+
function applyTruncation(el, text, options) {
|
|
4596
|
+
const { useCss, showTitle = true } = options;
|
|
4597
|
+
if (useCss) {
|
|
4598
|
+
el.style.overflow = "hidden";
|
|
4599
|
+
el.style.textOverflow = "ellipsis";
|
|
4600
|
+
el.style.whiteSpace = "nowrap";
|
|
4601
|
+
if (showTitle && text) {
|
|
4602
|
+
el.setAttribute("title", text);
|
|
4603
|
+
}
|
|
4604
|
+
} else {
|
|
4605
|
+
const truncated = truncateText(text, options);
|
|
4606
|
+
el.textContent = truncated;
|
|
4607
|
+
if (showTitle && text && text !== truncated) {
|
|
4608
|
+
el.setAttribute("title", text);
|
|
4609
|
+
}
|
|
4610
|
+
}
|
|
4611
|
+
}
|
|
4612
|
+
function normalizeOptions$2(binding) {
|
|
4613
|
+
var _a, _b, _c, _d, _e;
|
|
4614
|
+
if (typeof binding === "number") {
|
|
4615
|
+
return {
|
|
4616
|
+
length: binding,
|
|
4617
|
+
position: "end",
|
|
4618
|
+
ellipsis: "...",
|
|
4619
|
+
useCss: false,
|
|
4620
|
+
showTitle: true
|
|
4621
|
+
};
|
|
4622
|
+
}
|
|
4623
|
+
return {
|
|
4624
|
+
length: (_a = binding == null ? void 0 : binding.length) != null ? _a : 100,
|
|
4625
|
+
position: (_b = binding == null ? void 0 : binding.position) != null ? _b : "end",
|
|
4626
|
+
ellipsis: (_c = binding == null ? void 0 : binding.ellipsis) != null ? _c : "...",
|
|
4627
|
+
useCss: (_d = binding == null ? void 0 : binding.useCss) != null ? _d : false,
|
|
4628
|
+
showTitle: (_e = binding == null ? void 0 : binding.showTitle) != null ? _e : true
|
|
4629
|
+
};
|
|
4630
|
+
}
|
|
4631
|
+
function transformText(text, options) {
|
|
4632
|
+
if (!text) return text;
|
|
4633
|
+
if (options.first) {
|
|
4634
|
+
return text.charAt(0).toUpperCase() + text.slice(1);
|
|
4635
|
+
}
|
|
4636
|
+
return text.toUpperCase();
|
|
4637
|
+
}
|
|
4638
|
+
function normalizeOptions$1(binding) {
|
|
4639
|
+
var _a, _b;
|
|
4640
|
+
if (binding === void 0 || binding === true) {
|
|
4641
|
+
return { first: false, onInput: true };
|
|
4642
|
+
}
|
|
4643
|
+
if (binding === false) {
|
|
4644
|
+
return { first: false, onInput: false };
|
|
4645
|
+
}
|
|
4646
|
+
return {
|
|
4647
|
+
first: (_a = binding.first) != null ? _a : false,
|
|
4648
|
+
onInput: (_b = binding.onInput) != null ? _b : true
|
|
4649
|
+
};
|
|
4650
|
+
}
|
|
4651
|
+
const vUppercase = defineDirective({
|
|
4652
|
+
name: "uppercase",
|
|
4653
|
+
ssr: true,
|
|
4654
|
+
mounted(el, binding) {
|
|
4655
|
+
const options = normalizeOptions$1(binding.value);
|
|
4656
|
+
if (isInputElement(el)) {
|
|
4657
|
+
const cleanup2 = setupTextTransformInput(el, options, (text) => transformText(text, options));
|
|
4658
|
+
el.__uppercaseCleanup = cleanup2;
|
|
4659
|
+
} else {
|
|
4660
|
+
transformTextContent(el, (text) => transformText(text, options));
|
|
4661
|
+
}
|
|
4662
|
+
},
|
|
4663
|
+
updated(el, binding) {
|
|
4664
|
+
const options = normalizeOptions$1(binding.value);
|
|
4665
|
+
if (isInputElement(el)) {
|
|
4666
|
+
if (options.onInput) {
|
|
4667
|
+
el.value = transformText(el.value, options);
|
|
4668
|
+
}
|
|
4669
|
+
} else {
|
|
4670
|
+
transformTextContent(el, (text) => transformText(text, options));
|
|
4671
|
+
}
|
|
4672
|
+
},
|
|
4673
|
+
unmounted(el) {
|
|
4674
|
+
const cleanup2 = el.__uppercaseCleanup;
|
|
4675
|
+
cleanup2 == null ? void 0 : cleanup2();
|
|
4676
|
+
delete el.__uppercaseCleanup;
|
|
4677
|
+
}
|
|
4678
|
+
});
|
|
4679
|
+
function normalizeOptions(binding) {
|
|
4680
|
+
if (typeof binding === "boolean") {
|
|
4681
|
+
return { initial: binding };
|
|
4682
|
+
}
|
|
4683
|
+
return __spreadValues({
|
|
4684
|
+
initial: true,
|
|
4685
|
+
disabled: false,
|
|
4686
|
+
useHidden: false
|
|
4687
|
+
}, binding);
|
|
4688
|
+
}
|
|
4689
|
+
const vVisible = defineDirective({
|
|
4690
|
+
name: "visible",
|
|
4691
|
+
ssr: true,
|
|
4692
|
+
// SSR safe - will set initial visibility on server
|
|
4693
|
+
defaults: {
|
|
4694
|
+
initial: true,
|
|
4695
|
+
disabled: false,
|
|
4696
|
+
useHidden: false
|
|
4697
|
+
},
|
|
4698
|
+
mounted(el, binding) {
|
|
4699
|
+
var _a, _b;
|
|
4700
|
+
if (!isBrowser()) return;
|
|
4701
|
+
const options = normalizeOptions(binding.value);
|
|
4702
|
+
const originalDisplay = el.style.display;
|
|
4703
|
+
const originalVisibility = el.style.visibility;
|
|
4704
|
+
const state = {
|
|
4705
|
+
options,
|
|
4706
|
+
isVisible: (_a = options.initial) != null ? _a : true,
|
|
4707
|
+
originalDisplay,
|
|
4708
|
+
originalVisibility,
|
|
4709
|
+
transitionEndHandler: (e) => {
|
|
4710
|
+
if (e.propertyName === "opacity" || e.propertyName === "visibility") {
|
|
4711
|
+
el.dispatchEvent(new CustomEvent("visible:transition-end", {
|
|
4712
|
+
detail: { isVisible: state.isVisible }
|
|
4713
|
+
}));
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
};
|
|
4717
|
+
el.__visible = state;
|
|
4718
|
+
on(el, "transitionend", state.transitionEndHandler);
|
|
4719
|
+
applyVisibility(el, state, (_b = options.initial) != null ? _b : true);
|
|
4720
|
+
},
|
|
4721
|
+
updated(el, binding) {
|
|
4722
|
+
var _a;
|
|
4723
|
+
const state = el.__visible;
|
|
4724
|
+
if (!state) return;
|
|
4725
|
+
const newOptions = normalizeOptions(binding.value);
|
|
4726
|
+
let newVisibility;
|
|
4727
|
+
if (typeof binding.value === "boolean") {
|
|
4728
|
+
newVisibility = binding.value;
|
|
4729
|
+
} else {
|
|
4730
|
+
newVisibility = (_a = newOptions.initial) != null ? _a : true;
|
|
4731
|
+
}
|
|
4732
|
+
if (state.isVisible !== newVisibility) {
|
|
4733
|
+
applyVisibility(el, state, newVisibility);
|
|
4734
|
+
}
|
|
4735
|
+
state.options = newOptions;
|
|
4736
|
+
},
|
|
4737
|
+
unmounted(el) {
|
|
4738
|
+
const state = el.__visible;
|
|
4739
|
+
if (!state) return;
|
|
4740
|
+
off(el, "transitionend", state.transitionEndHandler);
|
|
4741
|
+
el.style.display = state.originalDisplay;
|
|
4742
|
+
el.style.visibility = state.originalVisibility;
|
|
4743
|
+
delete el.__visible;
|
|
4744
|
+
}
|
|
4745
|
+
});
|
|
4746
|
+
function applyVisibility(el, state, isVisible) {
|
|
4747
|
+
const previousVisibility = state.isVisible;
|
|
4748
|
+
state.isVisible = isVisible;
|
|
4749
|
+
if (isVisible) {
|
|
4750
|
+
el.classList.remove("v-hidden");
|
|
4751
|
+
el.classList.add("v-visible");
|
|
4752
|
+
} else {
|
|
4753
|
+
el.classList.remove("v-visible");
|
|
4754
|
+
el.classList.add("v-hidden");
|
|
4755
|
+
}
|
|
4756
|
+
if (state.options.useHidden) {
|
|
4757
|
+
if (isVisible) {
|
|
4758
|
+
el.style.visibility = state.originalVisibility || "visible";
|
|
4759
|
+
} else {
|
|
4760
|
+
const computedStyle = getComputedStyle(el);
|
|
4761
|
+
const hasTransition = computedStyle.transitionDuration !== "0s";
|
|
4762
|
+
if (hasTransition) {
|
|
4763
|
+
const handleTransitionEnd = (e) => {
|
|
4764
|
+
if (e.target === el && (e.propertyName === "opacity" || e.propertyName === "transform")) {
|
|
4765
|
+
if (!state.isVisible) {
|
|
4766
|
+
el.style.visibility = "hidden";
|
|
4767
|
+
}
|
|
4768
|
+
el.removeEventListener("transitionend", handleTransitionEnd);
|
|
4769
|
+
}
|
|
4770
|
+
};
|
|
4771
|
+
el.addEventListener("transitionend", handleTransitionEnd);
|
|
4772
|
+
} else {
|
|
4773
|
+
el.style.visibility = "hidden";
|
|
4774
|
+
}
|
|
4775
|
+
}
|
|
4776
|
+
} else {
|
|
4777
|
+
el.style.display = isVisible ? state.originalDisplay : "none";
|
|
4778
|
+
}
|
|
4779
|
+
el.dispatchEvent(new CustomEvent("visible:change", {
|
|
4780
|
+
detail: { isVisible, previousVisibility }
|
|
4781
|
+
}));
|
|
4782
|
+
if (state.options.handler && previousVisibility !== isVisible) {
|
|
4783
|
+
state.options.handler(isVisible);
|
|
4784
|
+
}
|
|
4785
|
+
}
|
|
4786
|
+
const allDirectives = {
|
|
4787
|
+
"click-outside": vClickOutside,
|
|
4788
|
+
copy: vCopy,
|
|
4789
|
+
debounce: vDebounce,
|
|
4790
|
+
throttle: vThrottle,
|
|
4791
|
+
focus: vFocus,
|
|
4792
|
+
lazy: vLazy,
|
|
4793
|
+
intersect: vIntersect,
|
|
4794
|
+
visible: vVisible,
|
|
4795
|
+
loading: vLoading,
|
|
4796
|
+
scroll: vScroll,
|
|
4797
|
+
"infinite-scroll": vInfiniteScroll,
|
|
4798
|
+
sticky: vSticky,
|
|
4799
|
+
"long-press": vLongPress,
|
|
4800
|
+
hover: vHover,
|
|
4801
|
+
ripple: vRipple,
|
|
4802
|
+
mask: vMask,
|
|
4803
|
+
permission: vPermission,
|
|
4804
|
+
sanitize: vSanitize,
|
|
4805
|
+
resize: vResize,
|
|
4806
|
+
mutation: vMutation,
|
|
4807
|
+
truncate: vTruncate,
|
|
4808
|
+
uppercase: vUppercase,
|
|
4809
|
+
lowercase: vLowercase,
|
|
4810
|
+
capitalcase: vCapitalcase,
|
|
4811
|
+
number: vNumber,
|
|
4812
|
+
money: vMoney,
|
|
4813
|
+
trim: vTrim,
|
|
4814
|
+
tooltip: vTooltip,
|
|
4815
|
+
draggable: vDraggable,
|
|
4816
|
+
touch: vTouch,
|
|
4817
|
+
"image-preview": vImagePreview
|
|
4818
|
+
};
|
|
4819
|
+
const install = (app, options = {}) => {
|
|
4820
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
4821
|
+
let vueVersion = null;
|
|
4822
|
+
if (typeof app === "function" && ((_a = app.version) == null ? void 0 : _a.startsWith("2"))) {
|
|
4823
|
+
vueVersion = 2;
|
|
4824
|
+
} else if ((app == null ? void 0 : app.config) && ((_b = app == null ? void 0 : app.version) == null ? void 0 : _b.startsWith("3"))) {
|
|
4825
|
+
vueVersion = 3;
|
|
4826
|
+
} else if (typeof (app == null ? void 0 : app.directive) === "function" && typeof (app == null ? void 0 : app.mixin) === "function" && ((_c = app.version) == null ? void 0 : _c.startsWith("2"))) {
|
|
4827
|
+
vueVersion = 2;
|
|
4828
|
+
} else if (typeof window !== "undefined") {
|
|
4829
|
+
const win = window;
|
|
4830
|
+
if ((_e = (_d = win.Vue) == null ? void 0 : _d.version) == null ? void 0 : _e.startsWith("2")) {
|
|
4831
|
+
vueVersion = 2;
|
|
4832
|
+
} else if ((_g = (_f = win.Vue) == null ? void 0 : _f.version) == null ? void 0 : _g.startsWith("3")) {
|
|
4833
|
+
vueVersion = 3;
|
|
4834
|
+
}
|
|
4835
|
+
}
|
|
4836
|
+
if (vueVersion) {
|
|
4837
|
+
setVueVersion(vueVersion);
|
|
4838
|
+
}
|
|
1033
4839
|
const { directives, all = false } = options;
|
|
1034
4840
|
if (all || !directives) {
|
|
1035
4841
|
Object.entries(allDirectives).forEach(([name, directive]) => {
|
|
@@ -1052,7 +4858,9 @@ const Directix = {
|
|
|
1052
4858
|
exports.Directix = Directix;
|
|
1053
4859
|
exports.addCleanupVue2 = addCleanup$1;
|
|
1054
4860
|
exports.addCleanupVue3 = addCleanup;
|
|
4861
|
+
exports.capitalcase = vCapitalcase;
|
|
1055
4862
|
exports.clickOutside = vClickOutside;
|
|
4863
|
+
exports.configurePermission = configurePermission;
|
|
1056
4864
|
exports.copy = vCopy;
|
|
1057
4865
|
exports.createVue2Directive = createVue2Directive;
|
|
1058
4866
|
exports.createVue3Directive = createVue3Directive;
|
|
@@ -1062,10 +4870,16 @@ exports.deepClone = deepClone;
|
|
|
1062
4870
|
exports.deepMerge = deepMerge;
|
|
1063
4871
|
exports.defineDirective = defineDirective;
|
|
1064
4872
|
exports.defineDirectiveGroup = defineDirectiveGroup;
|
|
4873
|
+
exports.draggable = vDraggable;
|
|
1065
4874
|
exports.focus = vFocus;
|
|
1066
4875
|
exports.generateId = generateId;
|
|
1067
4876
|
exports.get = get;
|
|
4877
|
+
exports.getPermissionConfig = getPermissionConfig;
|
|
1068
4878
|
exports.getVueVersion = getVueVersion;
|
|
4879
|
+
exports.hover = vHover;
|
|
4880
|
+
exports.imagePreview = vImagePreview;
|
|
4881
|
+
exports.infiniteScroll = vInfiniteScroll;
|
|
4882
|
+
exports.intersect = vIntersect;
|
|
1069
4883
|
exports.isArray = isArray;
|
|
1070
4884
|
exports.isBoolean = isBoolean;
|
|
1071
4885
|
exports.isBrowser = isBrowser;
|
|
@@ -1077,9 +4891,26 @@ exports.isPromise = isPromise;
|
|
|
1077
4891
|
exports.isSSR = isSSR;
|
|
1078
4892
|
exports.isString = isString;
|
|
1079
4893
|
exports.isVue2 = isVue2;
|
|
4894
|
+
exports.isVue27 = isVue27;
|
|
1080
4895
|
exports.isVue3 = isVue3;
|
|
4896
|
+
exports.lazy = vLazy;
|
|
4897
|
+
exports.loading = vLoading;
|
|
4898
|
+
exports.longPress = vLongPress;
|
|
4899
|
+
exports.lowercase = vLowercase;
|
|
4900
|
+
exports.mask = vMask;
|
|
4901
|
+
exports.money = vMoney;
|
|
4902
|
+
exports.mutation = vMutation;
|
|
4903
|
+
exports.number = vNumber;
|
|
1081
4904
|
exports.parseTime = parseTime;
|
|
4905
|
+
exports.permission = vPermission;
|
|
4906
|
+
exports.resetVueVersion = resetVueVersion;
|
|
4907
|
+
exports.resize = vResize;
|
|
4908
|
+
exports.ripple = vRipple;
|
|
4909
|
+
exports.sanitize = vSanitize;
|
|
4910
|
+
exports.scroll = vScroll;
|
|
1082
4911
|
exports.set = set;
|
|
4912
|
+
exports.setVueVersion = setVueVersion;
|
|
4913
|
+
exports.sticky = vSticky;
|
|
1083
4914
|
exports.supportsClipboard = supportsClipboard;
|
|
1084
4915
|
exports.supportsIntersectionObserver = supportsIntersectionObserver;
|
|
1085
4916
|
exports.supportsMutationObserver = supportsMutationObserver;
|
|
@@ -1087,9 +4918,41 @@ exports.supportsPassive = supportsPassive;
|
|
|
1087
4918
|
exports.supportsResizeObserver = supportsResizeObserver;
|
|
1088
4919
|
exports.throttle = vThrottle;
|
|
1089
4920
|
exports.throttleFn = throttle;
|
|
4921
|
+
exports.tooltip = vTooltip;
|
|
4922
|
+
exports.touch = vTouch;
|
|
4923
|
+
exports.trim = vTrim;
|
|
4924
|
+
exports.truncate = vTruncate;
|
|
4925
|
+
exports.uppercase = vUppercase;
|
|
4926
|
+
exports.vCapitalcase = vCapitalcase;
|
|
1090
4927
|
exports.vClickOutside = vClickOutside;
|
|
1091
4928
|
exports.vCopy = vCopy;
|
|
1092
4929
|
exports.vDebounce = vDebounce;
|
|
4930
|
+
exports.vDraggable = vDraggable;
|
|
1093
4931
|
exports.vFocus = vFocus;
|
|
4932
|
+
exports.vHover = vHover;
|
|
4933
|
+
exports.vImagePreview = vImagePreview;
|
|
4934
|
+
exports.vInfiniteScroll = vInfiniteScroll;
|
|
4935
|
+
exports.vIntersect = vIntersect;
|
|
4936
|
+
exports.vLazy = vLazy;
|
|
4937
|
+
exports.vLoading = vLoading;
|
|
4938
|
+
exports.vLongPress = vLongPress;
|
|
4939
|
+
exports.vLowercase = vLowercase;
|
|
4940
|
+
exports.vMask = vMask;
|
|
4941
|
+
exports.vMoney = vMoney;
|
|
4942
|
+
exports.vMutation = vMutation;
|
|
4943
|
+
exports.vNumber = vNumber;
|
|
4944
|
+
exports.vPermission = vPermission;
|
|
4945
|
+
exports.vResize = vResize;
|
|
4946
|
+
exports.vRipple = vRipple;
|
|
4947
|
+
exports.vSanitize = vSanitize;
|
|
4948
|
+
exports.vScroll = vScroll;
|
|
4949
|
+
exports.vSticky = vSticky;
|
|
1094
4950
|
exports.vThrottle = vThrottle;
|
|
4951
|
+
exports.vTooltip = vTooltip;
|
|
4952
|
+
exports.vTouch = vTouch;
|
|
4953
|
+
exports.vTrim = vTrim;
|
|
4954
|
+
exports.vTruncate = vTruncate;
|
|
4955
|
+
exports.vUppercase = vUppercase;
|
|
4956
|
+
exports.vVisible = vVisible;
|
|
4957
|
+
exports.visible = vVisible;
|
|
1095
4958
|
//# sourceMappingURL=index.cjs.map
|