126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// packages/collapse/builds/module.js
|
|
var module_exports = {};
|
|
__export(module_exports, {
|
|
collapse: () => src_default,
|
|
default: () => module_default
|
|
});
|
|
module.exports = __toCommonJS(module_exports);
|
|
|
|
// packages/collapse/src/index.js
|
|
function src_default(Alpine) {
|
|
Alpine.directive("collapse", collapse);
|
|
collapse.inline = (el, { modifiers }) => {
|
|
if (!modifiers.includes("min"))
|
|
return;
|
|
el._x_doShow = () => {
|
|
};
|
|
el._x_doHide = () => {
|
|
};
|
|
};
|
|
function collapse(el, { modifiers }) {
|
|
let duration = modifierValue(modifiers, "duration", 250) / 1e3;
|
|
let floor = modifierValue(modifiers, "min", 0);
|
|
let fullyHide = !modifiers.includes("min");
|
|
if (!el._x_isShown)
|
|
el.style.height = `${floor}px`;
|
|
if (!el._x_isShown && fullyHide)
|
|
el.hidden = true;
|
|
if (!el._x_isShown)
|
|
el.style.overflow = "hidden";
|
|
let setFunction = (el2, styles) => {
|
|
let revertFunction = Alpine.setStyles(el2, styles);
|
|
return styles.height ? () => {
|
|
} : revertFunction;
|
|
};
|
|
let transitionStyles = {
|
|
transitionProperty: "height",
|
|
transitionDuration: `${duration}s`,
|
|
transitionTimingFunction: "cubic-bezier(0.4, 0.0, 0.2, 1)"
|
|
};
|
|
el._x_transition = {
|
|
in(before = () => {
|
|
}, after = () => {
|
|
}) {
|
|
if (fullyHide)
|
|
el.hidden = false;
|
|
if (fullyHide)
|
|
el.style.display = null;
|
|
let current = el.getBoundingClientRect().height;
|
|
el.style.height = "auto";
|
|
let full = el.getBoundingClientRect().height;
|
|
if (current === full) {
|
|
current = floor;
|
|
}
|
|
Alpine.transition(el, Alpine.setStyles, {
|
|
during: transitionStyles,
|
|
start: { height: current + "px" },
|
|
end: { height: full + "px" }
|
|
}, () => el._x_isShown = true, () => {
|
|
if (el.getBoundingClientRect().height == full) {
|
|
el.style.overflow = null;
|
|
}
|
|
});
|
|
},
|
|
out(before = () => {
|
|
}, after = () => {
|
|
}) {
|
|
let full = el.getBoundingClientRect().height;
|
|
Alpine.transition(el, setFunction, {
|
|
during: transitionStyles,
|
|
start: { height: full + "px" },
|
|
end: { height: floor + "px" }
|
|
}, () => el.style.overflow = "hidden", () => {
|
|
el._x_isShown = false;
|
|
if (el.style.height == `${floor}px` && fullyHide) {
|
|
el.style.display = "none";
|
|
el.hidden = true;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
}
|
|
function modifierValue(modifiers, key, fallback) {
|
|
if (modifiers.indexOf(key) === -1)
|
|
return fallback;
|
|
const rawValue = modifiers[modifiers.indexOf(key) + 1];
|
|
if (!rawValue)
|
|
return fallback;
|
|
if (key === "duration") {
|
|
let match = rawValue.match(/([0-9]+)ms/);
|
|
if (match)
|
|
return match[1];
|
|
}
|
|
if (key === "min") {
|
|
let match = rawValue.match(/([0-9]+)px/);
|
|
if (match)
|
|
return match[1];
|
|
}
|
|
return rawValue;
|
|
}
|
|
|
|
// packages/collapse/builds/module.js
|
|
var module_default = src_default;
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
collapse
|
|
});
|