mejoras

resources/js/plugins/accordion.js

@@ -0,0 +1,98 @@
+export default function (Alpine) {
+    Alpine.directive("accordion", (el, directive) => {
+        if (!directive.value) handleRoot(el, Alpine);
+        else if (directive.value === "item") handleItem(el, Alpine);
+        else if (directive.value === "trigger") handleTrigger(el, Alpine);
+        else if (directive.value === "content") handleContent(el, Alpine);
+    }).before("bind");
+}
+
+function handleRoot(el, Alpine) {
+    const active = el.getAttribute("defaultValue")
+        ? [el.getAttribute("defaultValue")]
+        : [];
+    const multiple = el.getAttribute("type") === "multiple" ? true : false;
+    // prettier-ignore
+    const collapsible = el.getAttribute("collapsible") === "collapsible" ? true : false;
+
+    Alpine.bind(el, {
+        "x-id"() {
+            return ["alpine-accordion"];
+        },
+        ":id"() {
+            return this.$id("alpine-accordion");
+        },
+        "x-data"() {
+            return {
+                __multiple: multiple,
+                __collapsible: collapsible,
+                __active: active,
+
+                __isOpen(item) {
+                    return this.__active.includes(item);
+                },
+
+                __toggle(item) {
+                    if (
+                        this.__isOpen(item) &&
+                        (this.__collapsible || this.__multiple)
+                    ) {
+                        return this.__remove(item);
+                    }
+
+                    this.__add(item);
+                },
+
+                __add(item) {
+                    if (this.__multiple) {
+                        return this.__active.push(item);
+                    }
+
+                    this.__active = [item];
+                },
+
+                __remove(item) {
+                    if (this.__multiple) {
+                        return (this.__active = this.__active.filter(
+                            (activeItem) => activeItem !== item,
+                        ));
+                    }
+
+                    this.__active = [];
+                },
+
+                __getDataState(item) {
+                    return this.__isOpen(item) ? "open" : "closed";
+                },
+            };
+        },
+    });
+}
+
+function handleItem(el, Alpine) {
+    Alpine.bind(el, {
+        // "x-show"() {
+        //     return this.$data.__open;
+        // },
+    });
+}
+
+function handleTrigger(el, Alpine) {
+    Alpine.bind(el, {
+        "x-ref": "__accordion-trigger",
+        ":id"() {
+            return this.$id("alpine-accordion-trigger");
+        },
+        "@click"() {
+            this.$data.__open = !this.$data.__open;
+        },
+    });
+}
+
+function handleContent(el, Alpine) {
+    Alpine.bind(el, {
+        "x-show"() {
+            return this.$data.__open;
+        },
+    });
+}

resources/js/plugins/collapse.js

@@ -0,0 +1,129 @@
+// Copyright © 2019-2021 Caleb Porzio and contributors
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+export default function (Alpine) {
+    Alpine.directive("collapse", collapse);
+
+    // If we're using a "minimum height", we'll need to disable
+    // x-show's default behavior of setting display: 'none'.
+    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) / 1000;
+        let floor = modifierValue(modifiers, "min", 0);
+        let fullyHide = !modifiers.includes("min");
+
+        if (!el._x_isShown) el.style.height = `${floor}px`;
+        // We use the hidden attribute for the benefit of Tailwind
+        // users as the .space utility will ignore [hidden] elements.
+        // We also use display:none as the hidden attribute has very
+        // low CSS specificity and could be accidentally overridden
+        // by a user.
+        if (!el._x_isShown && fullyHide) el.hidden = true;
+        if (!el._x_isShown) el.style.overflow = "hidden";
+
+        // Override the setStyles function with one that won't
+        // revert updates to the height style.
+        let setFunction = (el, styles) => {
+            let revertFunction = Alpine.setStyles(el, 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 (
+                            Math.abs(el.getBoundingClientRect().height - full) <
+                            1
+                        ) {
+                            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;
+
+                        // check if element is fully collapsed
+                        if (el.style.height == `${floor}px` && fullyHide) {
+                            el.style.display = "none";
+                            el.hidden = true;
+                        }
+                    },
+                );
+            },
+        };
+    }
+}
+
+function modifierValue(modifiers, key, fallback) {
+    // If the modifier isn't present, use the default.
+    if (modifiers.indexOf(key) === -1) return fallback;
+
+    // If it IS present, grab the value after it: x-show.transition.duration.500ms
+    const rawValue = modifiers[modifiers.indexOf(key) + 1];
+
+    if (!rawValue) return fallback;
+
+    if (key === "duration") {
+        // Support x-collapse.duration.500ms && duration.500
+        let match = rawValue.match(/([0-9]+)ms/);
+        if (match) return match[1];
+    }
+
+    if (key === "min") {
+        // Support x-collapse.min.100px && min.100
+        let match = rawValue.match(/([0-9]+)px/);
+        if (match) return match[1];
+    }
+
+    return rawValue;
+}