@3df-spa/ui 1.0.7 → 1.1.0

package/dist/carousel.js

@@ -0,0 +1,206 @@
+import { defineComponent as p, useAttrs as v, computed as u, ref as C, onMounted as R, nextTick as z, watch as B, onBeforeUnmount as D, provide as I, openBlock as m, createElementBlock as h, mergeProps as _, unref as o, renderSlot as S, inject as g, createElementVNode as c } from "vue";
+import K from "embla-carousel";
+import { c as w } from "./utils-C9QoOYNG.js";
+const b = /* @__PURE__ */ Symbol("carousel"), Y = /* @__PURE__ */ p({
+  name: "UiCarousel",
+  inheritAttrs: !1,
+  __name: "UiCarousel",
+  props: {
+    opts: { default: void 0 },
+    orientation: { default: "horizontal" },
+    plugins: { default: void 0 }
+  },
+  emits: ["set-api"],
+  setup(d, { emit: s }) {
+    const t = d, l = s, n = v(), e = u(() => {
+      const { class: r, ...x } = n;
+      return x;
+    }), a = C(), i = C(), U = C(!1), N = C(!1), E = u(() => t.orientation);
+    function y() {
+      i.value?.scrollPrev();
+    }
+    function k() {
+      i.value?.scrollNext();
+    }
+    function A(r) {
+      U.value = r.canScrollPrev(), N.value = r.canScrollNext();
+    }
+    function P() {
+      i.value && (i.value.destroy(), i.value = void 0);
+    }
+    function $() {
+      const r = a.value;
+      if (!r) return;
+      P();
+      const x = {
+        ...t.opts,
+        axis: t.orientation === "vertical" ? "y" : "x"
+      }, f = K(r, x, t.plugins ?? []);
+      i.value = f, l("set-api", f), A(f), f.on("select", A), f.on("reInit", A);
+    }
+    R(() => {
+      z(() => {
+        a.value && $();
+      });
+    }), B(
+      () => [t.opts, t.orientation],
+      () => {
+        z(() => $());
+      },
+      { deep: !0 }
+    ), D(() => {
+      P();
+    });
+    function j(r) {
+      r.key === "ArrowLeft" && t.orientation === "horizontal" ? (r.preventDefault(), y()) : r.key === "ArrowRight" && t.orientation === "horizontal" ? (r.preventDefault(), k()) : r.key === "ArrowUp" && t.orientation === "vertical" ? (r.preventDefault(), y()) : r.key === "ArrowDown" && t.orientation === "vertical" && (r.preventDefault(), k());
+    }
+    return I(b, {
+      orientation: E,
+      viewportRef: a,
+      api: i,
+      canScrollPrev: U,
+      canScrollNext: N,
+      scrollPrev: y,
+      scrollNext: k
+    }), (r, x) => (m(), h("div", _(e.value, {
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabindex: "0",
+      class: o(w)("relative", o(n).class),
+      onKeydown: j
+    }), [
+      S(r.$slots, "default")
+    ], 16));
+  }
+}), q = /* @__PURE__ */ p({
+  name: "UiCarouselContent",
+  inheritAttrs: !1,
+  __name: "UiCarouselContent",
+  setup(d) {
+    const s = g(b), t = v(), l = u(() => {
+      const { class: e, ...a } = t;
+      return a;
+    });
+    function n(e) {
+      s.viewportRef.value = e;
+    }
+    return R(() => {
+      s.viewportRef.value;
+    }), (e, a) => (m(), h("div", {
+      ref: n,
+      class: "overflow-hidden"
+    }, [
+      c("div", _(l.value, {
+        class: o(w)("flex", o(s).orientation.value === "horizontal" ? "-ml-4" : "-mt-4 flex-col", o(t).class)
+      }), [
+        S(e.$slots, "default")
+      ], 16)
+    ]));
+  }
+}), F = /* @__PURE__ */ p({
+  name: "UiCarouselItem",
+  inheritAttrs: !1,
+  __name: "UiCarouselItem",
+  setup(d) {
+    const s = g(b), t = v(), l = u(() => {
+      const { class: n, ...e } = t;
+      return e;
+    });
+    return (n, e) => (m(), h("div", _(l.value, {
+      role: "group",
+      "aria-roledescription": "slide",
+      class: o(w)(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        o(s).orientation.value === "horizontal" ? "pl-4" : "pt-4",
+        o(t).class
+      )
+    }), [
+      S(n.$slots, "default")
+    ], 16));
+  }
+}), L = ["disabled"], G = /* @__PURE__ */ p({
+  name: "UiCarouselPrevious",
+  inheritAttrs: !1,
+  __name: "UiCarouselPrevious",
+  setup(d) {
+    const s = g(b), t = v(), l = u(() => {
+      const { class: n, ...e } = t;
+      return e;
+    });
+    return (n, e) => (m(), h("button", _(l.value, {
+      type: "button",
+      disabled: !o(s).canScrollPrev.value,
+      "aria-label": "Slide anterior",
+      class: o(w)(
+        "border-ui border-border bg-card absolute z-10 flex h-8 w-8 items-center justify-center rounded-full shadow-md transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        o(s).orientation.value === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        o(t).class
+      ),
+      onClick: e[0] || (e[0] = (a) => o(s).scrollPrev())
+    }), [...e[1] || (e[1] = [
+      c("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "h-4 w-4"
+      }, [
+        c("path", { d: "m15 18-6-6 6-6" })
+      ], -1),
+      c("span", { class: "sr-only" }, "Slide anterior", -1)
+    ])], 16, L));
+  }
+}), O = ["disabled"], H = /* @__PURE__ */ p({
+  name: "UiCarouselNext",
+  inheritAttrs: !1,
+  __name: "UiCarouselNext",
+  setup(d) {
+    const s = g(b), t = v(), l = u(() => {
+      const { class: n, ...e } = t;
+      return e;
+    });
+    return (n, e) => (m(), h("button", _(l.value, {
+      type: "button",
+      disabled: !o(s).canScrollNext.value,
+      "aria-label": "Siguiente slide",
+      class: o(w)(
+        "border-ui border-border bg-card absolute z-10 flex h-8 w-8 items-center justify-center rounded-full shadow-md transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        o(s).orientation.value === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        o(t).class
+      ),
+      onClick: e[0] || (e[0] = (a) => o(s).scrollNext())
+    }), [...e[1] || (e[1] = [
+      c("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "h-4 w-4"
+      }, [
+        c("path", { d: "m9 18 6-6-6-6" })
+      ], -1),
+      c("span", { class: "sr-only" }, "Siguiente slide", -1)
+    ])], 16, O));
+  }
+});
+export {
+  Y as Carousel,
+  q as CarouselContent,
+  F as CarouselItem,
+  H as CarouselNext,
+  G as CarouselPrevious
+};