@kiva/kv-components 7.0.0 → 7.1.0

package/dist/vue/KvCarousel.css

@@ -1 +1 @@
-@media (min-width: 64rem){.aside-controls-content[data-v-bb42b5ff]{width:82%}}.circle-slide[data-v-bb42b5ff]{width:auto}.circle-slide.is-selected[data-v-bb42b5ff]{opacity:1;transform:scale(1.2);max-width:300px}.circle-slide[data-v-bb42b5ff]:not(.is-selected){opacity:.5;transform:scale(.7)}.circle-carousel[data-v-bb42b5ff]{margin:0 auto}
+@media (min-width: 64rem){.aside-controls-content[data-v-7c085f82]{width:82%}}.circle-slide[data-v-7c085f82]{width:auto}.circle-slide.is-selected[data-v-7c085f82]{opacity:1;transform:scale(1.2);max-width:300px}.circle-slide[data-v-7c085f82]:not(.is-selected){opacity:.5;transform:scale(.7)}.circle-carousel[data-v-7c085f82]{margin:0 auto}

package/dist/vue/KvCarousel.js

@@ -1,12 +1,13 @@
-import { mdiArrowLeft as L, mdiArrowRight as B, mdiChevronLeft as U, mdiChevronRight as V } from "@mdi/js";
-import { carouselUtil as E } from "../utils/carousels.js";
-import K from "./KvMaterialIcon.js";
-import { resolveComponent as M, openBlock as n, createElementBlock as a, normalizeClass as w, createElementVNode as i, Fragment as f, renderList as b, normalizeStyle as N, renderSlot as O, createVNode as c, toDisplayString as y, createCommentVNode as g } from "vue";
+import { mdiArrowLeft as j, mdiArrowRight as A, mdiChevronLeft as B, mdiChevronRight as L } from "@mdi/js";
+import { carouselUtil as K } from "../utils/carousels.js";
+import U from "./KvMaterialIcon.js";
+import { resolveComponent as V, openBlock as r, createElementBlock as n, normalizeClass as d, createElementVNode as i, Fragment as u, renderList as g, normalizeStyle as E, renderSlot as M, createVNode as c, toDisplayString as h, createCommentVNode as f } from "vue";
 import "./KvCarousel.css";
-import R from "../_virtual/_plugin-vue_export-helper.js";
-const W = {
+import N from "../_virtual/_plugin-vue_export-helper.js";
+const O = {
+  name: "KvCarousel",
   components: {
-    KvMaterialIcon: K
+    KvMaterialIcon: U
   },
   props: {
     /**
@@ -52,7 +53,7 @@ const W = {
     slidesToScroll: {
       type: String,
       default: "auto",
-      validator: (s) => ["visible", "auto"].indexOf(s) !== -1
+      validator: (w) => ["visible", "auto"].indexOf(w) !== -1
     },
     /**
      * CSS value and unit to set the max width on responsive slides.
@@ -83,164 +84,182 @@ const W = {
     inCircle: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Position carousel controls in the top right corner
+     * */
+    controlsTopRight: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
     "change",
     "interact-carousel"
   ],
-  setup(s, { emit: e, slots: l }) {
+  setup(w, { emit: l, slots: e }) {
     const {
       componentSlotKeys: t,
       currentIndex: m,
-      embla: u,
-      goToSlide: d,
-      handleUserInteraction: r,
-      isAriaHidden: o,
-      isAutoplaying: x,
-      nextIndex: h,
+      embla: b,
+      goToSlide: s,
+      handleUserInteraction: o,
+      isAriaHidden: a,
+      isAutoplaying: y,
+      nextIndex: x,
       previousIndex: v,
       reInit: C,
       reInitVisible: I,
       rootEl: k,
       slideIndicatorCount: S,
       slideIndicatorListLength: _,
-      slides: A,
-      toggleAutoPlay: j
-    } = E(s, { emit: e, slots: l });
+      slides: R,
+      toggleAutoPlay: T
+    } = K(w, { emit: l, slots: e });
     return {
       componentSlotKeys: t,
       currentIndex: m,
-      embla: u,
-      goToSlide: d,
-      handleUserInteraction: r,
-      isAriaHidden: o,
-      isAutoplaying: x,
-      mdiArrowLeft: L,
-      mdiArrowRight: B,
-      mdiChevronLeft: U,
-      mdiChevronRight: V,
-      nextIndex: h,
+      embla: b,
+      goToSlide: s,
+      handleUserInteraction: o,
+      isAriaHidden: a,
+      isAutoplaying: y,
+      mdiArrowLeft: j,
+      mdiArrowRight: A,
+      mdiChevronLeft: B,
+      mdiChevronRight: L,
+      nextIndex: x,
       previousIndex: v,
       reInit: C,
       reInitVisible: I,
       rootEl: k,
       slideIndicatorCount: S,
       slideIndicatorListLength: _,
-      slides: A,
-      toggleAutoPlay: j
+      slides: R,
+      toggleAutoPlay: T
     };
   }
-}, D = ["aria-label", "aria-current", "aria-hidden", "tab-index"], H = ["disabled"], P = ["aria-label"], T = ["disabled"], z = {
+}, W = ["aria-label", "aria-current", "aria-hidden", "tab-index"], D = ["disabled"], H = ["aria-label"], P = ["disabled"], z = {
   key: 1,
   class: "kv-carousel__controls tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-mt-4 tw-w-full"
-}, F = ["onClick"], p = {
+}, F = ["onClick"], q = {
   class: "tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-items-center",
   style: { background: "linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)", width: "8%" }
-}, q = ["disabled"], G = {
+}, G = ["disabled"], J = {
   class: "tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-right-0 tw-items-center tw-justify-end tw-w-16",
   style: { background: "linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)", width: "8%" }
-}, J = ["disabled"];
-function Q(s, e, l, t, m, u) {
-  const d = M("kv-material-icon");
-  return n(), a("section", {
+}, Q = ["disabled"];
+function X(w, l, e, t, m, b) {
+  const s = V("kv-material-icon");
+  return r(), n("section", {
     ref: "rootEl",
-    class: w(["kv-carousel tw-overflow-hidden tw-w-full", { "lg:tw-relative": l.asideControls }]),
+    class: d(["kv-carousel tw-overflow-hidden tw-w-full", { "lg:tw-relative": e.asideControls, "tw-relative tw-pt-8": e.controlsTopRight }]),
     "aria-label": "carousel"
   }, [
     i("div", {
-      class: w(["tw-flex tw-gap-x-4", {
-        "tw-mx-auto aside-controls-content": l.asideControls,
-        "circle-carousel": l.inCircle
+      class: d(["tw-flex tw-gap-x-4", {
+        "tw-mx-auto aside-controls-content": e.asideControls,
+        "circle-carousel": e.inCircle
       }])
     }, [
-      (n(!0), a(f, null, b(t.componentSlotKeys, (r, o) => (n(), a("div", {
-        key: o,
-        class: w(["tw-flex-none tw-relative", { "tw-w-full": !l.multipleSlidesVisible || l.slideMaxWidth, "circle-slide": l.inCircle }]),
+      (r(!0), n(u, null, g(t.componentSlotKeys, (o, a) => (r(), n("div", {
+        key: a,
+        class: d(["tw-flex-none tw-relative", { "tw-w-full": !e.multipleSlidesVisible || e.slideMaxWidth, "circle-slide": e.inCircle }]),
         role: "group",
-        "aria-label": `slide ${o + 1} of ${t.componentSlotKeys.length}`,
-        "aria-current": t.currentIndex === o ? "true" : "false",
-        "aria-hidden": t.isAriaHidden(o) ? "true" : "false",
-        "tab-index": t.isAriaHidden(o) ? "-1" : !1,
-        style: N(l.slideMaxWidth ? `max-width:${l.slideMaxWidth}` : "")
+        "aria-label": `slide ${a + 1} of ${t.componentSlotKeys.length}`,
+        "aria-current": t.currentIndex === a ? "true" : "false",
+        "aria-hidden": t.isAriaHidden(a) ? "true" : "false",
+        "tab-index": t.isAriaHidden(a) ? "-1" : !1,
+        style: E(e.slideMaxWidth ? `max-width:${e.slideMaxWidth}` : "")
       }, [
-        O(s.$slots, r, {}, void 0, !0)
-      ], 14, D))), 128))
+        M(w.$slots, o, {}, void 0, !0)
+      ], 14, W))), 128))
     ], 2),
-    t.slideIndicatorCount > 1 && !l.isDotted ? (n(), a("div", {
+    t.slideIndicatorCount > 1 && !e.isDotted ? (r(), n("div", {
       key: 0,
-      class: w(["kv-carousel__controls tw-flex tw-justify-between md:tw-justify-center tw-items-center tw-mt-4 tw-w-full", { "lg:tw-hidden": l.asideControls }])
+      class: d(["kv-carousel__controls tw-flex tw-justify-between tw-items-center tw-w-full", {
+        "lg:tw-hidden": e.asideControls,
+        "tw-mt-4 md:tw-justify-center": !e.controlsTopRight,
+        "md:tw-justify-end tw-absolute tw-top-0 tw-right-0 tw-w-auto tw-gap-2 tw-pr-1": e.controlsTopRight
+      }])
     }, [
       i("button", {
-        class: "tw-text-primary tw-rounded-full tw-border-2 tw-border-primary tw-h-4 tw-w-4 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+        class: d(["tw-text-primary tw-h-4 tw-w-4 tw-rounded-full tw-border-primary tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default", {
+          "tw-border-2": !e.controlsTopRight,
+          "tw-bg-white tw-shadow-lg": e.controlsTopRight
+        }]),
         disabled: t.embla && !t.embla.canScrollPrev(),
-        onClick: e[0] || (e[0] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+        onClick: l[0] || (l[0] = (o) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
       }, [
-        c(d, {
+        c(s, {
           class: "tw-w-4",
-          icon: l.asideControls ? t.mdiArrowLeft : t.mdiChevronLeft
+          icon: e.asideControls ? t.mdiArrowLeft : t.mdiChevronLeft
         }, null, 8, ["icon"]),
-        e[4] || (e[4] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
-      ], 8, H),
-      i("div", {
+        l[4] || (l[4] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
+      ], 10, D),
+      e.controlsTopRight ? f("", !0) : (r(), n("div", {
+        key: 0,
         "aria-label": `screen ${t.currentIndex + 1} of ${t.slideIndicatorCount}`,
         class: "tw-mx-2 md:tw-mx-3 lg:tw-mx-4 tw-invisible md:tw-visible"
-      }, y(t.currentIndex + 1) + "/" + y(t.slideIndicatorCount), 9, P),
+      }, h(t.currentIndex + 1) + "/" + h(t.slideIndicatorCount), 9, H)),
       i("button", {
-        class: "tw-text-primary tw-rounded-full tw-border-2 tw-border-primary tw-h-4 tw-w-4 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+        class: d(["tw-text-primary tw-h-4 tw-w-4 tw-rounded-full tw-border-primary tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default", {
+          "tw-border-2": !e.controlsTopRight,
+          "tw-bg-white tw-shadow-lg": e.controlsTopRight
+        }]),
         disabled: t.embla && !t.embla.canScrollNext(),
-        onClick: e[1] || (e[1] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+        onClick: l[1] || (l[1] = (o) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
       }, [
-        c(d, {
+        c(s, {
           class: "tw-w-4",
-          icon: l.asideControls ? t.mdiArrowRight : t.mdiChevronRight
+          icon: e.asideControls ? t.mdiArrowRight : t.mdiChevronRight
         }, null, 8, ["icon"]),
-        e[5] || (e[5] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
-      ], 8, T)
-    ], 2)) : t.slideIndicatorCount > 1 ? (n(), a("div", z, [
-      (n(!0), a(f, null, b(t.slideIndicatorCount, (r) => (n(), a("button", {
-        key: r,
-        onClick: (o) => t.goToSlide(r - 1)
+        l[5] || (l[5] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
+      ], 10, P)
+    ], 2)) : t.slideIndicatorCount > 1 ? (r(), n("div", z, [
+      (r(!0), n(u, null, g(t.slideIndicatorCount, (o) => (r(), n("button", {
+        key: o,
+        onClick: (a) => t.goToSlide(o - 1)
       }, [
         i("div", {
-          class: w(["tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out", [
-            { "tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5": t.currentIndex === r - 1 },
-            { "tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1": t.currentIndex !== r - 1 }
+          class: d(["tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out", [
+            { "tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5": t.currentIndex === o - 1 },
+            { "tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1": t.currentIndex !== o - 1 }
           ]])
         }, null, 2)
       ], 8, F))), 128))
-    ])) : g("", !0),
-    l.asideControls ? (n(), a(f, { key: 2 }, [
-      i("div", p, [
+    ])) : f("", !0),
+    e.asideControls ? (r(), n(u, { key: 2 }, [
+      i("div", q, [
         i("button", {
           class: "tw-text-primary tw-bg-gray-100 tw-rounded-full tw-h-6 tw-w-6 tw-ml-3 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
           disabled: t.embla && !t.embla.canScrollPrev(),
-          onClick: e[2] || (e[2] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+          onClick: l[2] || (l[2] = (o) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
         }, [
-          c(d, {
+          c(s, {
             class: "tw-w-4",
             icon: t.mdiArrowLeft
           }, null, 8, ["icon"]),
-          e[6] || (e[6] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
-        ], 8, q)
+          l[6] || (l[6] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
+        ], 8, G)
       ]),
-      i("div", G, [
+      i("div", J, [
         i("button", {
           class: "tw-text-primary tw-bg-gray-100 tw-rounded-full tw-h-6 tw-w-6 tw-mr-3 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
           disabled: t.embla && !t.embla.canScrollNext(),
-          onClick: e[3] || (e[3] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+          onClick: l[3] || (l[3] = (o) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
         }, [
-          c(d, {
+          c(s, {
             class: "tw-w-4",
             icon: t.mdiArrowRight
           }, null, 8, ["icon"]),
-          e[7] || (e[7] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
-        ], 8, J)
+          l[7] || (l[7] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
+        ], 8, Q)
       ])
-    ], 64)) : g("", !0)
+    ], 64)) : f("", !0)
   ], 2);
 }
-const lt = /* @__PURE__ */ R(W, [["render", Q], ["__scopeId", "data-v-bb42b5ff"]]);
+const lt = /* @__PURE__ */ N(O, [["render", X], ["__scopeId", "data-v-7c085f82"]]);
 export {
   lt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "d1d979db0ae3e33f4b8b8a1d04a802ffb0c733ee"
+  "gitHead": "e89d40ce0dda4f00cdfb43b62d7d6e3938ca621b"
 }