@codbex/harmonia 1.4.1 → 1.4.2
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/harmonia.css +2 -2
- package/dist/harmonia.esm.js +82 -69
- package/dist/harmonia.esm.min.js +2 -2
- package/dist/harmonia.esm.min.js.map +3 -3
- package/dist/harmonia.js +82 -69
- package/dist/harmonia.min.js +2 -2
- package/dist/harmonia.min.js.map +3 -3
- package/package.json +9 -9
package/dist/harmonia.js
CHANGED
|
@@ -869,10 +869,6 @@
|
|
|
869
869
|
bottom: "top",
|
|
870
870
|
top: "bottom"
|
|
871
871
|
};
|
|
872
|
-
var oppositeAlignmentMap = {
|
|
873
|
-
start: "end",
|
|
874
|
-
end: "start"
|
|
875
|
-
};
|
|
876
872
|
function clamp(start, value, end2) {
|
|
877
873
|
return max(start, min(value, end2));
|
|
878
874
|
}
|
|
@@ -891,9 +887,9 @@
|
|
|
891
887
|
function getAxisLength(axis) {
|
|
892
888
|
return axis === "y" ? "height" : "width";
|
|
893
889
|
}
|
|
894
|
-
var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
895
890
|
function getSideAxis(placement) {
|
|
896
|
-
|
|
891
|
+
const firstChar = placement[0];
|
|
892
|
+
return firstChar === "t" || firstChar === "b" ? "y" : "x";
|
|
897
893
|
}
|
|
898
894
|
function getAlignmentAxis(placement) {
|
|
899
895
|
return getOppositeAxis(getSideAxis(placement));
|
|
@@ -916,7 +912,7 @@
|
|
|
916
912
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
917
913
|
}
|
|
918
914
|
function getOppositeAlignmentPlacement(placement) {
|
|
919
|
-
return placement.replace(
|
|
915
|
+
return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
|
|
920
916
|
}
|
|
921
917
|
var lrPlacement = ["left", "right"];
|
|
922
918
|
var rlPlacement = ["right", "left"];
|
|
@@ -947,7 +943,8 @@
|
|
|
947
943
|
return list;
|
|
948
944
|
}
|
|
949
945
|
function getOppositePlacement(placement) {
|
|
950
|
-
|
|
946
|
+
const side = getSide(placement);
|
|
947
|
+
return oppositeSideMap[side] + placement.slice(side.length);
|
|
951
948
|
}
|
|
952
949
|
function expandPaddingObject(padding) {
|
|
953
950
|
return {
|
|
@@ -1097,6 +1094,7 @@
|
|
|
1097
1094
|
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1098
1095
|
};
|
|
1099
1096
|
}
|
|
1097
|
+
var MAX_RESET_COUNT = 50;
|
|
1100
1098
|
var computePosition = async (reference, floating, config) => {
|
|
1101
1099
|
const {
|
|
1102
1100
|
placement = "bottom",
|
|
@@ -1104,7 +1102,10 @@
|
|
|
1104
1102
|
middleware = [],
|
|
1105
1103
|
platform: platform2
|
|
1106
1104
|
} = config;
|
|
1107
|
-
const
|
|
1105
|
+
const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
|
|
1106
|
+
...platform2,
|
|
1107
|
+
detectOverflow
|
|
1108
|
+
};
|
|
1108
1109
|
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
|
|
1109
1110
|
let rects = await platform2.getElementRects({
|
|
1110
1111
|
reference,
|
|
@@ -1116,14 +1117,17 @@
|
|
|
1116
1117
|
y
|
|
1117
1118
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
1118
1119
|
let statefulPlacement = placement;
|
|
1119
|
-
let middlewareData = {};
|
|
1120
1120
|
let resetCount = 0;
|
|
1121
|
-
|
|
1122
|
-
|
|
1121
|
+
const middlewareData = {};
|
|
1122
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
1123
|
+
const currentMiddleware = middleware[i];
|
|
1124
|
+
if (!currentMiddleware) {
|
|
1125
|
+
continue;
|
|
1126
|
+
}
|
|
1123
1127
|
const {
|
|
1124
1128
|
name,
|
|
1125
1129
|
fn
|
|
1126
|
-
} =
|
|
1130
|
+
} = currentMiddleware;
|
|
1127
1131
|
const {
|
|
1128
1132
|
x: nextX,
|
|
1129
1133
|
y: nextY,
|
|
@@ -1137,10 +1141,7 @@
|
|
|
1137
1141
|
strategy,
|
|
1138
1142
|
middlewareData,
|
|
1139
1143
|
rects,
|
|
1140
|
-
platform:
|
|
1141
|
-
...platform2,
|
|
1142
|
-
detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
1143
|
-
},
|
|
1144
|
+
platform: platformWithDetectOverflow,
|
|
1144
1145
|
elements: {
|
|
1145
1146
|
reference,
|
|
1146
1147
|
floating
|
|
@@ -1148,14 +1149,11 @@
|
|
|
1148
1149
|
});
|
|
1149
1150
|
x = nextX != null ? nextX : x;
|
|
1150
1151
|
y = nextY != null ? nextY : y;
|
|
1151
|
-
middlewareData = {
|
|
1152
|
-
...middlewareData,
|
|
1153
|
-
|
|
1154
|
-
...middlewareData[name],
|
|
1155
|
-
...data
|
|
1156
|
-
}
|
|
1152
|
+
middlewareData[name] = {
|
|
1153
|
+
...middlewareData[name],
|
|
1154
|
+
...data
|
|
1157
1155
|
};
|
|
1158
|
-
if (reset && resetCount
|
|
1156
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
1159
1157
|
resetCount++;
|
|
1160
1158
|
if (typeof reset === "object") {
|
|
1161
1159
|
if (reset.placement) {
|
|
@@ -1617,7 +1615,6 @@
|
|
|
1617
1615
|
}
|
|
1618
1616
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
1619
1617
|
}
|
|
1620
|
-
var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
1621
1618
|
function isOverflowElement(element) {
|
|
1622
1619
|
const {
|
|
1623
1620
|
overflow,
|
|
@@ -1625,29 +1622,31 @@
|
|
|
1625
1622
|
overflowY,
|
|
1626
1623
|
display
|
|
1627
1624
|
} = getComputedStyle2(element);
|
|
1628
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) &&
|
|
1625
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
|
|
1629
1626
|
}
|
|
1630
|
-
var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
1631
1627
|
function isTableElement(element) {
|
|
1632
|
-
return
|
|
1628
|
+
return /^(table|td|th)$/.test(getNodeName(element));
|
|
1633
1629
|
}
|
|
1634
|
-
var topLayerSelectors = [":popover-open", ":modal"];
|
|
1635
1630
|
function isTopLayer(element) {
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
return
|
|
1639
|
-
} catch (_e) {
|
|
1640
|
-
return false;
|
|
1631
|
+
try {
|
|
1632
|
+
if (element.matches(":popover-open")) {
|
|
1633
|
+
return true;
|
|
1641
1634
|
}
|
|
1642
|
-
})
|
|
1635
|
+
} catch (_e) {
|
|
1636
|
+
}
|
|
1637
|
+
try {
|
|
1638
|
+
return element.matches(":modal");
|
|
1639
|
+
} catch (_e) {
|
|
1640
|
+
return false;
|
|
1641
|
+
}
|
|
1643
1642
|
}
|
|
1644
|
-
var
|
|
1645
|
-
var
|
|
1646
|
-
var
|
|
1643
|
+
var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
|
1644
|
+
var containRe = /paint|layout|strict|content/;
|
|
1645
|
+
var isNotNone = (value) => !!value && value !== "none";
|
|
1646
|
+
var isWebKitValue;
|
|
1647
1647
|
function isContainingBlock(elementOrCss) {
|
|
1648
|
-
const webkit = isWebKit();
|
|
1649
1648
|
const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
|
|
1650
|
-
return
|
|
1649
|
+
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
|
|
1651
1650
|
}
|
|
1652
1651
|
function getContainingBlock(element) {
|
|
1653
1652
|
let currentNode = getParentNode(element);
|
|
@@ -1662,12 +1661,13 @@
|
|
|
1662
1661
|
return null;
|
|
1663
1662
|
}
|
|
1664
1663
|
function isWebKit() {
|
|
1665
|
-
if (
|
|
1666
|
-
|
|
1664
|
+
if (isWebKitValue == null) {
|
|
1665
|
+
isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
|
|
1666
|
+
}
|
|
1667
|
+
return isWebKitValue;
|
|
1667
1668
|
}
|
|
1668
|
-
var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
1669
1669
|
function isLastTraversableNode(node) {
|
|
1670
|
-
return
|
|
1670
|
+
return /^(html|body|#document)$/.test(getNodeName(node));
|
|
1671
1671
|
}
|
|
1672
1672
|
function getComputedStyle2(element) {
|
|
1673
1673
|
return getWindow(element).getComputedStyle(element);
|
|
@@ -1721,8 +1721,9 @@
|
|
|
1721
1721
|
if (isBody) {
|
|
1722
1722
|
const frameElement = getFrameElement(win);
|
|
1723
1723
|
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
1724
|
+
} else {
|
|
1725
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
1724
1726
|
}
|
|
1725
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
1726
1727
|
}
|
|
1727
1728
|
function getFrameElement(win) {
|
|
1728
1729
|
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
@@ -1886,7 +1887,7 @@
|
|
|
1886
1887
|
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1887
1888
|
scroll = getNodeScroll(offsetParent);
|
|
1888
1889
|
}
|
|
1889
|
-
if (
|
|
1890
|
+
if (isOffsetParentAnElement) {
|
|
1890
1891
|
const offsetRect = getBoundingClientRect(offsetParent);
|
|
1891
1892
|
scale = getScale(offsetParent);
|
|
1892
1893
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
@@ -1960,7 +1961,6 @@
|
|
|
1960
1961
|
y
|
|
1961
1962
|
};
|
|
1962
1963
|
}
|
|
1963
|
-
var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
1964
1964
|
function getInnerBoundingClientRect(element, strategy) {
|
|
1965
1965
|
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
|
|
1966
1966
|
const top2 = clientRect.top + element.clientTop;
|
|
@@ -2018,7 +2018,7 @@
|
|
|
2018
2018
|
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
|
|
2019
2019
|
currentContainingBlockComputedStyle = null;
|
|
2020
2020
|
}
|
|
2021
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle &&
|
|
2021
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
2022
2022
|
if (shouldDropCurrentNode) {
|
|
2023
2023
|
result = result.filter((ancestor) => ancestor !== currentNode);
|
|
2024
2024
|
} else {
|
|
@@ -2038,20 +2038,23 @@
|
|
|
2038
2038
|
} = _ref;
|
|
2039
2039
|
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
2040
2040
|
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
2041
|
-
const
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2041
|
+
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
|
2042
|
+
let top2 = firstRect.top;
|
|
2043
|
+
let right = firstRect.right;
|
|
2044
|
+
let bottom = firstRect.bottom;
|
|
2045
|
+
let left = firstRect.left;
|
|
2046
|
+
for (let i = 1; i < clippingAncestors.length; i++) {
|
|
2047
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
|
2048
|
+
top2 = max(rect.top, top2);
|
|
2049
|
+
right = min(rect.right, right);
|
|
2050
|
+
bottom = min(rect.bottom, bottom);
|
|
2051
|
+
left = max(rect.left, left);
|
|
2052
|
+
}
|
|
2050
2053
|
return {
|
|
2051
|
-
width:
|
|
2052
|
-
height:
|
|
2053
|
-
x:
|
|
2054
|
-
y:
|
|
2054
|
+
width: right - left,
|
|
2055
|
+
height: bottom - top2,
|
|
2056
|
+
x: left,
|
|
2057
|
+
y: top2
|
|
2055
2058
|
};
|
|
2056
2059
|
}
|
|
2057
2060
|
function getDimensions(element) {
|
|
@@ -2260,7 +2263,7 @@
|
|
|
2260
2263
|
animationFrame = false
|
|
2261
2264
|
} = options;
|
|
2262
2265
|
const referenceEl = unwrapElement(reference);
|
|
2263
|
-
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
|
|
2266
|
+
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
|
|
2264
2267
|
ancestors.forEach((ancestor) => {
|
|
2265
2268
|
ancestorScroll && ancestor.addEventListener("scroll", update, {
|
|
2266
2269
|
passive: true
|
|
@@ -2273,7 +2276,7 @@
|
|
|
2273
2276
|
if (elementResize) {
|
|
2274
2277
|
resizeObserver = new ResizeObserver((_ref) => {
|
|
2275
2278
|
let [firstEntry] = _ref;
|
|
2276
|
-
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
2279
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
|
2277
2280
|
resizeObserver.unobserve(floating);
|
|
2278
2281
|
cancelAnimationFrame(reobserveFrame);
|
|
2279
2282
|
reobserveFrame = requestAnimationFrame(() => {
|
|
@@ -2286,7 +2289,9 @@
|
|
|
2286
2289
|
if (referenceEl && !animationFrame) {
|
|
2287
2290
|
resizeObserver.observe(referenceEl);
|
|
2288
2291
|
}
|
|
2289
|
-
|
|
2292
|
+
if (floating) {
|
|
2293
|
+
resizeObserver.observe(floating);
|
|
2294
|
+
}
|
|
2290
2295
|
}
|
|
2291
2296
|
let frameId;
|
|
2292
2297
|
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
@@ -7914,6 +7919,10 @@
|
|
|
7914
7919
|
refreshGutters();
|
|
7915
7920
|
queueLayout();
|
|
7916
7921
|
},
|
|
7922
|
+
gutterHidden() {
|
|
7923
|
+
refreshGutters();
|
|
7924
|
+
queueLayout();
|
|
7925
|
+
},
|
|
7917
7926
|
panelChange() {
|
|
7918
7927
|
queueLayout();
|
|
7919
7928
|
},
|
|
@@ -7952,6 +7961,7 @@
|
|
|
7952
7961
|
el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
|
|
7953
7962
|
el.setAttribute("tabindex", "-1");
|
|
7954
7963
|
el.setAttribute("data-slot", "split-panel");
|
|
7964
|
+
let gutterless = el.getAttribute("data-gutterless") === "true";
|
|
7955
7965
|
const gutter = document.createElement("span");
|
|
7956
7966
|
gutter.setAttribute("data-slot", "split-gutter");
|
|
7957
7967
|
gutter.setAttribute("aria-disabled", el.getAttribute("data-locked") === "true");
|
|
@@ -8073,7 +8083,7 @@
|
|
|
8073
8083
|
}
|
|
8074
8084
|
},
|
|
8075
8085
|
setGutter(last) {
|
|
8076
|
-
if (this.hidden || last) {
|
|
8086
|
+
if (this.hidden || gutterless || last) {
|
|
8077
8087
|
gutter.remove();
|
|
8078
8088
|
} else if (!gutter.parentElement) {
|
|
8079
8089
|
el.after(gutter);
|
|
@@ -8187,7 +8197,10 @@
|
|
|
8187
8197
|
};
|
|
8188
8198
|
const observer = new MutationObserver((mutations) => {
|
|
8189
8199
|
mutations.forEach((mutation) => {
|
|
8190
|
-
if (mutation.attributeName === "data-
|
|
8200
|
+
if (mutation.attributeName === "data-gutterless") {
|
|
8201
|
+
gutterless = el.getAttribute("data-gutterless") === "true";
|
|
8202
|
+
split._h_split.gutterHidden();
|
|
8203
|
+
} else if (mutation.attributeName === "data-hidden") {
|
|
8191
8204
|
panel.hidden = el.getAttribute("data-hidden") === "true";
|
|
8192
8205
|
if (panel.hidden) {
|
|
8193
8206
|
el.classList.add("hidden");
|
|
@@ -8206,7 +8219,7 @@
|
|
|
8206
8219
|
}
|
|
8207
8220
|
});
|
|
8208
8221
|
});
|
|
8209
|
-
observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse"] });
|
|
8222
|
+
observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse", "data-gutterless"] });
|
|
8210
8223
|
cleanup(() => {
|
|
8211
8224
|
gutter.remove();
|
|
8212
8225
|
gutter.removeEventListener("pointerdown", drag);
|
|
@@ -9564,7 +9577,7 @@
|
|
|
9564
9577
|
el.setAttribute("data-slot", "toolbar-image");
|
|
9565
9578
|
});
|
|
9566
9579
|
Alpine.directive("h-toolbar-title", (el) => {
|
|
9567
|
-
el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
|
|
9580
|
+
el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first-of-type:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
|
|
9568
9581
|
el.setAttribute("data-slot", "toolbar-title");
|
|
9569
9582
|
});
|
|
9570
9583
|
Alpine.directive("h-toolbar-spacer", (el) => {
|
|
@@ -10007,7 +10020,7 @@
|
|
|
10007
10020
|
}
|
|
10008
10021
|
|
|
10009
10022
|
// package.json
|
|
10010
|
-
var version = "1.4.
|
|
10023
|
+
var version = "1.4.2";
|
|
10011
10024
|
|
|
10012
10025
|
// src/index.js
|
|
10013
10026
|
window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };
|