wj-elements 0.1.128 → 0.1.129
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dark.css +6 -1
- package/dist/{infinite-scroll.element-DcO1E5Es.js → infinite-scroll.element-R3y_ZQj6.js} +42 -14
- package/dist/light.css +5 -0
- package/dist/{list.element-TZXMx1rt.js → list.element-syl98NWS.js} +4 -1
- package/dist/localize.js +4 -3
- package/dist/{popup.element-l8v-dMoK.js → popup.element-C0a1z1y2.js} +191 -78
- package/dist/wje-accordion-item.js +1 -1
- package/dist/wje-animation.js +141 -13
- package/dist/wje-aside.js +1 -1
- package/dist/wje-avatar.js +5 -5
- package/dist/wje-badge.js +1 -1
- package/dist/wje-breadcrumb.js +16 -6
- package/dist/wje-breadcrumbs.js +4 -4
- package/dist/wje-button-group.js +2 -2
- package/dist/wje-button.js +64 -6
- package/dist/wje-card-content.js +1 -1
- package/dist/wje-card-controls.js +1 -1
- package/dist/wje-card-header.js +1 -1
- package/dist/wje-card-subtitle.js +1 -1
- package/dist/wje-card-title.js +1 -1
- package/dist/wje-carousel-item.js +1 -1
- package/dist/wje-carousel.js +1 -1
- package/dist/wje-checkbox.js +14 -11
- package/dist/wje-chip.js +1 -1
- package/dist/wje-col.js +9 -3
- package/dist/wje-color-picker.js +72 -42
- package/dist/wje-container.js +1 -1
- package/dist/wje-copy-button.js +3 -3
- package/dist/wje-dialog.js +89 -0
- package/dist/wje-divider.js +1 -1
- package/dist/wje-dropdown.js +21 -6
- package/dist/wje-element.js +284 -127
- package/dist/wje-fetchAndParseCSS.js +2 -1
- package/dist/wje-file-upload-item.js +5 -2
- package/dist/wje-file-upload.js +57 -13
- package/dist/wje-footer.js +1 -1
- package/dist/wje-form.js +1 -1
- package/dist/wje-format-digital.js +1 -1
- package/dist/wje-grid.js +1 -1
- package/dist/wje-header.js +1 -1
- package/dist/wje-icon-picker.js +6 -3
- package/dist/wje-icon.js +4 -1
- package/dist/wje-img-comparer.js +1 -3
- package/dist/wje-img.js +5 -2
- package/dist/wje-infinite-scroll.js +1 -1
- package/dist/wje-input-file.js +4 -1
- package/dist/wje-input.js +9 -4
- package/dist/wje-item.js +34 -3
- package/dist/wje-kanban.js +16 -31
- package/dist/wje-label.js +1 -10
- package/dist/wje-list.js +1 -1
- package/dist/wje-main.js +1 -1
- package/dist/wje-masonry.js +9 -9
- package/dist/wje-master.js +9 -117
- package/dist/wje-menu-button.js +4 -1
- package/dist/wje-menu-item.js +13 -4
- package/dist/wje-menu-label.js +1 -1
- package/dist/wje-menu.js +4 -1
- package/dist/wje-option.js +8 -4
- package/dist/wje-options.js +25 -11
- package/dist/wje-orgchart-group.js +2 -2
- package/dist/wje-orgchart-item.js +7 -4
- package/dist/wje-orgchart.js +1 -1
- package/dist/wje-popup.js +1 -1
- package/dist/wje-progress-bar.js +6 -2
- package/dist/wje-qr-code.js +2 -2
- package/dist/wje-radio-group.js +4 -1
- package/dist/wje-radio.js +1 -1
- package/dist/wje-rate.js +6 -3
- package/dist/wje-relative-time.js +37 -19
- package/dist/wje-reorder.js +73 -10
- package/dist/wje-route.js +1 -1
- package/dist/wje-router-link.js +1 -2
- package/dist/wje-routerx.js +3 -1
- package/dist/wje-row.js +1 -11
- package/dist/wje-select.js +15 -12
- package/dist/wje-slider.js +7 -4
- package/dist/wje-sliding-container.js +125 -49
- package/dist/wje-split-view.js +10 -2
- package/dist/wje-status.js +1 -1
- package/dist/wje-stepper.js +879 -766
- package/dist/wje-store.js +17 -18
- package/dist/wje-tab-group.js +4 -1
- package/dist/wje-tab-panel.js +1 -1
- package/dist/wje-tab.js +4 -1
- package/dist/wje-textarea.js +8 -2
- package/dist/wje-thumbnail.js +1 -9
- package/dist/wje-toast.js +24 -23
- package/dist/wje-toggle.js +7 -1
- package/dist/wje-toolbar-action.js +1 -1
- package/dist/wje-toolbar.js +1 -1
- package/dist/wje-tooltip.js +5 -1
- package/dist/wje-visually-hidden.js +1 -1
- package/package.json +16 -5
|
@@ -113,12 +113,21 @@ function getPaddingObject(padding) {
|
|
|
113
113
|
};
|
|
114
114
|
}
|
|
115
115
|
function rectToClientRect(rect) {
|
|
116
|
+
const {
|
|
117
|
+
x,
|
|
118
|
+
y,
|
|
119
|
+
width,
|
|
120
|
+
height
|
|
121
|
+
} = rect;
|
|
116
122
|
return {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
123
|
+
width,
|
|
124
|
+
height,
|
|
125
|
+
top: y,
|
|
126
|
+
left: x,
|
|
127
|
+
right: x + width,
|
|
128
|
+
bottom: y + height,
|
|
129
|
+
x,
|
|
130
|
+
y
|
|
122
131
|
};
|
|
123
132
|
}
|
|
124
133
|
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
@@ -249,7 +258,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
249
258
|
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
250
259
|
}
|
|
251
260
|
i = -1;
|
|
252
|
-
continue;
|
|
253
261
|
}
|
|
254
262
|
}
|
|
255
263
|
return {
|
|
@@ -290,9 +298,10 @@ async function detectOverflow(state, options) {
|
|
|
290
298
|
strategy
|
|
291
299
|
}));
|
|
292
300
|
const rect = elementContext === "floating" ? {
|
|
293
|
-
...rects.floating,
|
|
294
301
|
x,
|
|
295
|
-
y
|
|
302
|
+
y,
|
|
303
|
+
width: rects.floating.width,
|
|
304
|
+
height: rects.floating.height
|
|
296
305
|
} : rects.reference;
|
|
297
306
|
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
|
|
298
307
|
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
|
|
@@ -303,6 +312,7 @@ async function detectOverflow(state, options) {
|
|
|
303
312
|
y: 1
|
|
304
313
|
};
|
|
305
314
|
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
315
|
+
elements,
|
|
306
316
|
rect,
|
|
307
317
|
offsetParent,
|
|
308
318
|
strategy
|
|
@@ -314,7 +324,7 @@ async function detectOverflow(state, options) {
|
|
|
314
324
|
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
315
325
|
};
|
|
316
326
|
}
|
|
317
|
-
const arrow = (options) => ({
|
|
327
|
+
const arrow$1 = (options) => ({
|
|
318
328
|
name: "arrow",
|
|
319
329
|
options,
|
|
320
330
|
async fn(state) {
|
|
@@ -361,7 +371,7 @@ const arrow = (options) => ({
|
|
|
361
371
|
const max2 = clientSize - arrowDimensions[length] - maxPadding;
|
|
362
372
|
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
363
373
|
const offset2 = clamp(min$1, center, max2);
|
|
364
|
-
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center
|
|
374
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
365
375
|
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
|
|
366
376
|
return {
|
|
367
377
|
[axis]: coords[axis] + alignmentOffset,
|
|
@@ -376,7 +386,7 @@ const arrow = (options) => ({
|
|
|
376
386
|
};
|
|
377
387
|
}
|
|
378
388
|
});
|
|
379
|
-
const flip = function(options) {
|
|
389
|
+
const flip$1 = function(options) {
|
|
380
390
|
if (options === void 0) {
|
|
381
391
|
options = {};
|
|
382
392
|
}
|
|
@@ -406,10 +416,12 @@ const flip = function(options) {
|
|
|
406
416
|
return {};
|
|
407
417
|
}
|
|
408
418
|
const side = getSide(placement);
|
|
419
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
409
420
|
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
410
421
|
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
411
422
|
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
412
|
-
|
|
423
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
|
|
424
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
413
425
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
414
426
|
}
|
|
415
427
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
@@ -446,8 +458,16 @@ const flip = function(options) {
|
|
|
446
458
|
if (!resetPlacement) {
|
|
447
459
|
switch (fallbackStrategy) {
|
|
448
460
|
case "bestFit": {
|
|
449
|
-
var _overflowsData$
|
|
450
|
-
const placement2 = (_overflowsData$
|
|
461
|
+
var _overflowsData$filter2;
|
|
462
|
+
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
|
|
463
|
+
if (hasFallbackAxisSideDirection) {
|
|
464
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
465
|
+
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
|
|
466
|
+
// reading directions favoring greater width.
|
|
467
|
+
currentSideAxis === "y";
|
|
468
|
+
}
|
|
469
|
+
return true;
|
|
470
|
+
}).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
451
471
|
if (placement2) {
|
|
452
472
|
resetPlacement = placement2;
|
|
453
473
|
}
|
|
@@ -492,10 +512,9 @@ async function convertValueToCoords(state, options) {
|
|
|
492
512
|
crossAxis: 0,
|
|
493
513
|
alignmentAxis: null
|
|
494
514
|
} : {
|
|
495
|
-
mainAxis: 0,
|
|
496
|
-
crossAxis: 0,
|
|
497
|
-
alignmentAxis:
|
|
498
|
-
...rawValue
|
|
515
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
516
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
517
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
499
518
|
};
|
|
500
519
|
if (alignment && typeof alignmentAxis === "number") {
|
|
501
520
|
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
|
|
@@ -508,7 +527,7 @@ async function convertValueToCoords(state, options) {
|
|
|
508
527
|
y: crossAxis * crossAxisMulti
|
|
509
528
|
};
|
|
510
529
|
}
|
|
511
|
-
const offset = function(options) {
|
|
530
|
+
const offset$1 = function(options) {
|
|
512
531
|
if (options === void 0) {
|
|
513
532
|
options = 0;
|
|
514
533
|
}
|
|
@@ -516,20 +535,29 @@ const offset = function(options) {
|
|
|
516
535
|
name: "offset",
|
|
517
536
|
options,
|
|
518
537
|
async fn(state) {
|
|
538
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
519
539
|
const {
|
|
520
540
|
x,
|
|
521
|
-
y
|
|
541
|
+
y,
|
|
542
|
+
placement,
|
|
543
|
+
middlewareData
|
|
522
544
|
} = state;
|
|
523
545
|
const diffCoords = await convertValueToCoords(state, options);
|
|
546
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
547
|
+
return {};
|
|
548
|
+
}
|
|
524
549
|
return {
|
|
525
550
|
x: x + diffCoords.x,
|
|
526
551
|
y: y + diffCoords.y,
|
|
527
|
-
data:
|
|
552
|
+
data: {
|
|
553
|
+
...diffCoords,
|
|
554
|
+
placement
|
|
555
|
+
}
|
|
528
556
|
};
|
|
529
557
|
}
|
|
530
558
|
};
|
|
531
559
|
};
|
|
532
|
-
const size = function(options) {
|
|
560
|
+
const size$1 = function(options) {
|
|
533
561
|
if (options === void 0) {
|
|
534
562
|
options = {};
|
|
535
563
|
}
|
|
@@ -537,6 +565,7 @@ const size = function(options) {
|
|
|
537
565
|
name: "size",
|
|
538
566
|
options,
|
|
539
567
|
async fn(state) {
|
|
568
|
+
var _state$middlewareData, _state$middlewareData2;
|
|
540
569
|
const {
|
|
541
570
|
placement,
|
|
542
571
|
rects,
|
|
@@ -565,17 +594,18 @@ const size = function(options) {
|
|
|
565
594
|
widthSide = side;
|
|
566
595
|
heightSide = alignment === "end" ? "top" : "bottom";
|
|
567
596
|
}
|
|
568
|
-
const
|
|
569
|
-
const
|
|
597
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
598
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
599
|
+
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
600
|
+
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
570
601
|
const noShift = !state.middlewareData.shift;
|
|
571
602
|
let availableHeight = overflowAvailableHeight;
|
|
572
603
|
let availableWidth = overflowAvailableWidth;
|
|
573
|
-
if (
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
604
|
+
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
605
|
+
availableWidth = maximumClippingWidth;
|
|
606
|
+
}
|
|
607
|
+
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
608
|
+
availableHeight = maximumClippingHeight;
|
|
579
609
|
}
|
|
580
610
|
if (noShift && !alignment) {
|
|
581
611
|
const xMin = max(overflow.left, 0);
|
|
@@ -605,6 +635,9 @@ const size = function(options) {
|
|
|
605
635
|
}
|
|
606
636
|
};
|
|
607
637
|
};
|
|
638
|
+
function hasWindow() {
|
|
639
|
+
return typeof window !== "undefined";
|
|
640
|
+
}
|
|
608
641
|
function getNodeName(node) {
|
|
609
642
|
if (isNode(node)) {
|
|
610
643
|
return (node.nodeName || "").toLowerCase();
|
|
@@ -613,23 +646,32 @@ function getNodeName(node) {
|
|
|
613
646
|
}
|
|
614
647
|
function getWindow(node) {
|
|
615
648
|
var _node$ownerDocument;
|
|
616
|
-
return (node == null
|
|
649
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
617
650
|
}
|
|
618
651
|
function getDocumentElement(node) {
|
|
619
652
|
var _ref;
|
|
620
653
|
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
621
654
|
}
|
|
622
655
|
function isNode(value) {
|
|
656
|
+
if (!hasWindow()) {
|
|
657
|
+
return false;
|
|
658
|
+
}
|
|
623
659
|
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
624
660
|
}
|
|
625
661
|
function isElement(value) {
|
|
662
|
+
if (!hasWindow()) {
|
|
663
|
+
return false;
|
|
664
|
+
}
|
|
626
665
|
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
627
666
|
}
|
|
628
667
|
function isHTMLElement(value) {
|
|
668
|
+
if (!hasWindow()) {
|
|
669
|
+
return false;
|
|
670
|
+
}
|
|
629
671
|
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
630
672
|
}
|
|
631
673
|
function isShadowRoot(value) {
|
|
632
|
-
if (typeof ShadowRoot === "undefined") {
|
|
674
|
+
if (!hasWindow() || typeof ShadowRoot === "undefined") {
|
|
633
675
|
return false;
|
|
634
676
|
}
|
|
635
677
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
@@ -646,9 +688,18 @@ function isOverflowElement(element) {
|
|
|
646
688
|
function isTableElement(element) {
|
|
647
689
|
return ["table", "td", "th"].includes(getNodeName(element));
|
|
648
690
|
}
|
|
649
|
-
function
|
|
691
|
+
function isTopLayer(element) {
|
|
692
|
+
return [":popover-open", ":modal"].some((selector) => {
|
|
693
|
+
try {
|
|
694
|
+
return element.matches(selector);
|
|
695
|
+
} catch (e) {
|
|
696
|
+
return false;
|
|
697
|
+
}
|
|
698
|
+
});
|
|
699
|
+
}
|
|
700
|
+
function isContainingBlock(elementOrCss) {
|
|
650
701
|
const webkit = isWebKit();
|
|
651
|
-
const css = getComputedStyle(
|
|
702
|
+
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
|
652
703
|
return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
|
|
653
704
|
}
|
|
654
705
|
function getContainingBlock(element) {
|
|
@@ -656,9 +707,10 @@ function getContainingBlock(element) {
|
|
|
656
707
|
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
657
708
|
if (isContainingBlock(currentNode)) {
|
|
658
709
|
return currentNode;
|
|
659
|
-
} else {
|
|
660
|
-
|
|
710
|
+
} else if (isTopLayer(currentNode)) {
|
|
711
|
+
return null;
|
|
661
712
|
}
|
|
713
|
+
currentNode = getParentNode(currentNode);
|
|
662
714
|
}
|
|
663
715
|
return null;
|
|
664
716
|
}
|
|
@@ -680,8 +732,8 @@ function getNodeScroll(element) {
|
|
|
680
732
|
};
|
|
681
733
|
}
|
|
682
734
|
return {
|
|
683
|
-
scrollLeft: element.
|
|
684
|
-
scrollTop: element.
|
|
735
|
+
scrollLeft: element.scrollX,
|
|
736
|
+
scrollTop: element.scrollY
|
|
685
737
|
};
|
|
686
738
|
}
|
|
687
739
|
function getParentNode(node) {
|
|
@@ -719,10 +771,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
|
|
719
771
|
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
720
772
|
const win = getWindow(scrollableAncestor);
|
|
721
773
|
if (isBody) {
|
|
722
|
-
|
|
774
|
+
const frameElement = getFrameElement(win);
|
|
775
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
723
776
|
}
|
|
724
777
|
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
725
778
|
}
|
|
779
|
+
function getFrameElement(win) {
|
|
780
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
781
|
+
}
|
|
726
782
|
function getCssDimensions(element) {
|
|
727
783
|
const css = getComputedStyle(element);
|
|
728
784
|
let width = parseFloat(css.width) || 0;
|
|
@@ -815,8 +871,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
815
871
|
if (domElement) {
|
|
816
872
|
const win = getWindow(domElement);
|
|
817
873
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
818
|
-
let
|
|
819
|
-
|
|
874
|
+
let currentWin = win;
|
|
875
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
876
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
820
877
|
const iframeScale = getScale(currentIFrame);
|
|
821
878
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
822
879
|
const css = getComputedStyle(currentIFrame);
|
|
@@ -828,7 +885,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
828
885
|
height *= iframeScale.y;
|
|
829
886
|
x += left;
|
|
830
887
|
y += top;
|
|
831
|
-
|
|
888
|
+
currentWin = getWindow(currentIFrame);
|
|
889
|
+
currentIFrame = getFrameElement(currentWin);
|
|
832
890
|
}
|
|
833
891
|
}
|
|
834
892
|
return rectToClientRect({
|
|
@@ -840,13 +898,15 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
840
898
|
}
|
|
841
899
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
842
900
|
let {
|
|
901
|
+
elements,
|
|
843
902
|
rect,
|
|
844
903
|
offsetParent,
|
|
845
904
|
strategy
|
|
846
905
|
} = _ref;
|
|
847
|
-
const
|
|
906
|
+
const isFixed = strategy === "fixed";
|
|
848
907
|
const documentElement = getDocumentElement(offsetParent);
|
|
849
|
-
|
|
908
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
909
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
850
910
|
return rect;
|
|
851
911
|
}
|
|
852
912
|
let scroll = {
|
|
@@ -855,7 +915,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
855
915
|
};
|
|
856
916
|
let scale = createCoords(1);
|
|
857
917
|
const offsets = createCoords(0);
|
|
858
|
-
|
|
918
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
919
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
859
920
|
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
860
921
|
scroll = getNodeScroll(offsetParent);
|
|
861
922
|
}
|
|
@@ -876,8 +937,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
876
937
|
function getClientRects(element) {
|
|
877
938
|
return Array.from(element.getClientRects());
|
|
878
939
|
}
|
|
879
|
-
function getWindowScrollBarX(element) {
|
|
880
|
-
|
|
940
|
+
function getWindowScrollBarX(element, rect) {
|
|
941
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
942
|
+
if (!rect) {
|
|
943
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
944
|
+
}
|
|
945
|
+
return rect.left + leftScroll;
|
|
881
946
|
}
|
|
882
947
|
function getDocumentRect(element) {
|
|
883
948
|
const html = getDocumentElement(element);
|
|
@@ -995,7 +1060,7 @@ function getClippingRect(_ref) {
|
|
|
995
1060
|
rootBoundary,
|
|
996
1061
|
strategy
|
|
997
1062
|
} = _ref;
|
|
998
|
-
const elementClippingAncestors = boundary === "clippingAncestors" ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1063
|
+
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
999
1064
|
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1000
1065
|
const firstClippingAncestor = clippingAncestors[0];
|
|
1001
1066
|
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
@@ -1014,7 +1079,14 @@ function getClippingRect(_ref) {
|
|
|
1014
1079
|
};
|
|
1015
1080
|
}
|
|
1016
1081
|
function getDimensions(element) {
|
|
1017
|
-
|
|
1082
|
+
const {
|
|
1083
|
+
width,
|
|
1084
|
+
height
|
|
1085
|
+
} = getCssDimensions(element);
|
|
1086
|
+
return {
|
|
1087
|
+
width,
|
|
1088
|
+
height
|
|
1089
|
+
};
|
|
1018
1090
|
}
|
|
1019
1091
|
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1020
1092
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
@@ -1038,13 +1110,26 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1038
1110
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
1039
1111
|
}
|
|
1040
1112
|
}
|
|
1113
|
+
let htmlX = 0;
|
|
1114
|
+
let htmlY = 0;
|
|
1115
|
+
if (documentElement && !isOffsetParentAnElement && !isFixed) {
|
|
1116
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
1117
|
+
htmlY = htmlRect.top + scroll.scrollTop;
|
|
1118
|
+
htmlX = htmlRect.left + scroll.scrollLeft - // RTL <body> scrollbar.
|
|
1119
|
+
getWindowScrollBarX(documentElement, htmlRect);
|
|
1120
|
+
}
|
|
1121
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
|
|
1122
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
|
|
1041
1123
|
return {
|
|
1042
|
-
x
|
|
1043
|
-
y
|
|
1124
|
+
x,
|
|
1125
|
+
y,
|
|
1044
1126
|
width: rect.width,
|
|
1045
1127
|
height: rect.height
|
|
1046
1128
|
};
|
|
1047
1129
|
}
|
|
1130
|
+
function isStaticPositioned(element) {
|
|
1131
|
+
return getComputedStyle(element).position === "static";
|
|
1132
|
+
}
|
|
1048
1133
|
function getTrueOffsetParent(element, polyfill) {
|
|
1049
1134
|
if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
|
|
1050
1135
|
return null;
|
|
@@ -1052,36 +1137,47 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
1052
1137
|
if (polyfill) {
|
|
1053
1138
|
return polyfill(element);
|
|
1054
1139
|
}
|
|
1055
|
-
|
|
1140
|
+
let rawOffsetParent = element.offsetParent;
|
|
1141
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
1142
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
1143
|
+
}
|
|
1144
|
+
return rawOffsetParent;
|
|
1056
1145
|
}
|
|
1057
1146
|
function getOffsetParent(element, polyfill) {
|
|
1058
|
-
const
|
|
1147
|
+
const win = getWindow(element);
|
|
1148
|
+
if (isTopLayer(element)) {
|
|
1149
|
+
return win;
|
|
1150
|
+
}
|
|
1059
1151
|
if (!isHTMLElement(element)) {
|
|
1060
|
-
|
|
1152
|
+
let svgOffsetParent = getParentNode(element);
|
|
1153
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
1154
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
1155
|
+
return svgOffsetParent;
|
|
1156
|
+
}
|
|
1157
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
1158
|
+
}
|
|
1159
|
+
return win;
|
|
1061
1160
|
}
|
|
1062
1161
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1063
|
-
while (offsetParent && isTableElement(offsetParent) &&
|
|
1162
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1064
1163
|
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1065
1164
|
}
|
|
1066
|
-
if (offsetParent && (
|
|
1067
|
-
return
|
|
1165
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1166
|
+
return win;
|
|
1068
1167
|
}
|
|
1069
|
-
return offsetParent || getContainingBlock(element) ||
|
|
1168
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
1070
1169
|
}
|
|
1071
|
-
const getElementRects = async function(
|
|
1072
|
-
let {
|
|
1073
|
-
reference,
|
|
1074
|
-
floating,
|
|
1075
|
-
strategy
|
|
1076
|
-
} = _ref;
|
|
1170
|
+
const getElementRects = async function(data) {
|
|
1077
1171
|
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1078
1172
|
const getDimensionsFn = this.getDimensions;
|
|
1173
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
1079
1174
|
return {
|
|
1080
|
-
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
1175
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
1081
1176
|
floating: {
|
|
1082
1177
|
x: 0,
|
|
1083
1178
|
y: 0,
|
|
1084
|
-
|
|
1179
|
+
width: floatingDimensions.width,
|
|
1180
|
+
height: floatingDimensions.height
|
|
1085
1181
|
}
|
|
1086
1182
|
};
|
|
1087
1183
|
};
|
|
@@ -1105,8 +1201,9 @@ function observeMove(element, onMove) {
|
|
|
1105
1201
|
let timeoutId;
|
|
1106
1202
|
const root = getDocumentElement(element);
|
|
1107
1203
|
function cleanup() {
|
|
1204
|
+
var _io;
|
|
1108
1205
|
clearTimeout(timeoutId);
|
|
1109
|
-
io
|
|
1206
|
+
(_io = io) == null || _io.disconnect();
|
|
1110
1207
|
io = null;
|
|
1111
1208
|
}
|
|
1112
1209
|
function refresh(skip, threshold) {
|
|
@@ -1148,7 +1245,7 @@ function observeMove(element, onMove) {
|
|
|
1148
1245
|
if (!ratio) {
|
|
1149
1246
|
timeoutId = setTimeout(() => {
|
|
1150
1247
|
refresh(false, 1e-7);
|
|
1151
|
-
},
|
|
1248
|
+
}, 1e3);
|
|
1152
1249
|
} else {
|
|
1153
1250
|
refresh(false, ratio);
|
|
1154
1251
|
}
|
|
@@ -1198,7 +1295,8 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
1198
1295
|
resizeObserver.unobserve(floating);
|
|
1199
1296
|
cancelAnimationFrame(reobserveFrame);
|
|
1200
1297
|
reobserveFrame = requestAnimationFrame(() => {
|
|
1201
|
-
|
|
1298
|
+
var _resizeObserver;
|
|
1299
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
1202
1300
|
});
|
|
1203
1301
|
}
|
|
1204
1302
|
update();
|
|
@@ -1223,18 +1321,23 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
1223
1321
|
}
|
|
1224
1322
|
update();
|
|
1225
1323
|
return () => {
|
|
1324
|
+
var _resizeObserver2;
|
|
1226
1325
|
ancestors.forEach((ancestor) => {
|
|
1227
1326
|
ancestorScroll && ancestor.removeEventListener("scroll", update);
|
|
1228
1327
|
ancestorResize && ancestor.removeEventListener("resize", update);
|
|
1229
1328
|
});
|
|
1230
|
-
cleanupIo
|
|
1231
|
-
resizeObserver
|
|
1329
|
+
cleanupIo == null || cleanupIo();
|
|
1330
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
1232
1331
|
resizeObserver = null;
|
|
1233
1332
|
if (animationFrame) {
|
|
1234
1333
|
cancelAnimationFrame(frameId);
|
|
1235
1334
|
}
|
|
1236
1335
|
};
|
|
1237
1336
|
}
|
|
1337
|
+
const offset = offset$1;
|
|
1338
|
+
const flip = flip$1;
|
|
1339
|
+
const size = size$1;
|
|
1340
|
+
const arrow = arrow$1;
|
|
1238
1341
|
const computePosition = (reference, floating, options) => {
|
|
1239
1342
|
const cache = /* @__PURE__ */ new Map();
|
|
1240
1343
|
const mergedOptions = {
|
|
@@ -1346,7 +1449,7 @@ class Popup extends WJElement {
|
|
|
1346
1449
|
* @param {Object} params - The parameters for drawing.
|
|
1347
1450
|
* @returns {DocumentFragment}
|
|
1348
1451
|
*/
|
|
1349
|
-
draw(
|
|
1452
|
+
draw() {
|
|
1350
1453
|
let fragment = document.createDocumentFragment();
|
|
1351
1454
|
let slotAnchor = document.createElement("slot");
|
|
1352
1455
|
slotAnchor.setAttribute("name", "anchor");
|
|
@@ -1365,7 +1468,13 @@ class Popup extends WJElement {
|
|
|
1365
1468
|
this.native = native;
|
|
1366
1469
|
return fragment;
|
|
1367
1470
|
}
|
|
1368
|
-
|
|
1471
|
+
/**
|
|
1472
|
+
* After Draws the component.
|
|
1473
|
+
* @params {Object} context - The context for drawing.
|
|
1474
|
+
* @params {Object} store - The store for drawing.
|
|
1475
|
+
* @params {Object} params - The parameters for drawing.
|
|
1476
|
+
*/
|
|
1477
|
+
afterDraw() {
|
|
1369
1478
|
this.setAnchor();
|
|
1370
1479
|
if (this.hasAttribute("active"))
|
|
1371
1480
|
this.show(false);
|
|
@@ -1454,10 +1563,10 @@ class Popup extends WJElement {
|
|
|
1454
1563
|
}[placement];
|
|
1455
1564
|
if (middlewareData.arrow) {
|
|
1456
1565
|
const { width, height } = this.native.getBoundingClientRect();
|
|
1457
|
-
|
|
1566
|
+
let { osX = x, osY = y } = middlewareData.arrow;
|
|
1458
1567
|
Object.assign(this.arrow.style, {
|
|
1459
|
-
left:
|
|
1460
|
-
top:
|
|
1568
|
+
left: osX !== null && osX !== void 0 ? `${width / 2 - this.arrow.offsetWidth / 2}px` : "",
|
|
1569
|
+
top: osY !== null && osY !== void 0 ? `${height / 2 - this.arrow.offsetHeight / 2}px` : "",
|
|
1461
1570
|
[staticSide]: `${-this.arrow.offsetHeight / 2}px`
|
|
1462
1571
|
});
|
|
1463
1572
|
}
|
|
@@ -1476,7 +1585,9 @@ class Popup extends WJElement {
|
|
|
1476
1585
|
*/
|
|
1477
1586
|
show(dispatchEvent = true) {
|
|
1478
1587
|
var _a;
|
|
1479
|
-
|
|
1588
|
+
if (dispatchEvent) {
|
|
1589
|
+
event.dispatchCustomEvent(this, "wje-popup:show");
|
|
1590
|
+
}
|
|
1480
1591
|
this.native.classList.add("popup-active");
|
|
1481
1592
|
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
1482
1593
|
this.cleanup = autoUpdate(this.anchorEl, this.native, () => {
|
|
@@ -1492,7 +1603,9 @@ class Popup extends WJElement {
|
|
|
1492
1603
|
*/
|
|
1493
1604
|
hide(dispatchEvent = true) {
|
|
1494
1605
|
var _a;
|
|
1495
|
-
|
|
1606
|
+
if (dispatchEvent) {
|
|
1607
|
+
event.dispatchCustomEvent(this, "wje-popup:hide");
|
|
1608
|
+
}
|
|
1496
1609
|
this.native.classList.remove("popup-active");
|
|
1497
1610
|
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
1498
1611
|
this.cleanup = void 0;
|
|
@@ -50,7 +50,7 @@ class AccordionItem extends WJElement {
|
|
|
50
50
|
* @param {Object} params - The parameters for drawing the element.
|
|
51
51
|
* @return {Object} The document fragment containing the drawn element.
|
|
52
52
|
*/
|
|
53
|
-
draw(
|
|
53
|
+
draw() {
|
|
54
54
|
let fragment = document.createDocumentFragment();
|
|
55
55
|
let native = document.createElement("div");
|
|
56
56
|
native.setAttribute("part", "native");
|