@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvCardFrame.js

@@ -1,76 +1,14 @@
-import { computed as n, resolveComponent as d, openBlock as i, createBlock as m, normalizeClass as r, withCtx as h, createElementVNode as u, renderSlot as c } from "vue";
-import { defaultTheme as a, stoneDarkTheme as f, stoneLightTheme as g, marigoldLightTheme as v, greenLightTheme as p, greenDarkTheme as w } from "@kiva/kv-tokens";
-import C from "./KvThemeProvider.js";
-import k from "../_virtual/_plugin-vue_export-helper.js";
-const _ = {
-  components: {
-    KvThemeProvider: C
-  },
-  props: {
-    allowOverflow: {
-      type: Boolean,
-      default: !0
-    },
-    bgColorClass: {
-      type: String,
-      default: "tw-bg-primary"
-    },
-    borderClass: {
-      type: String,
-      default: ""
-    },
-    radiusClass: {
-      type: String,
-      default: "tw-rounded"
-    },
-    shadowClass: {
-      type: String,
-      default: "tw-shadow-lg"
-    },
-    theme: {
-      type: String,
-      default: "default",
-      validator(t) {
-        return [
-          "default",
-          "greenLight",
-          "greenDark",
-          "marigoldLight",
-          "stoneLight",
-          "stoneDark"
-        ].includes(t);
-      }
-    }
-  },
-  setup(t) {
-    return { themeStyle: n(() => {
-      switch (t.theme) {
-        case "default":
-          return a;
-        case "greenDark":
-          return w;
-        case "greenLight":
-          return p;
-        case "marigoldLight":
-          return v;
-        case "stoneLight":
-          return g;
-        case "stoneDark":
-          return f;
-        default:
-          return a;
-      }
-    }) };
-  }
-};
-function y(t, o, e, s, L, S) {
-  const l = d("kv-theme-provider");
-  return i(), m(l, {
-    theme: s.themeStyle,
+import l from "./KvCardFrame2.js";
+import { resolveComponent as s, openBlock as d, createBlock as m, normalizeClass as r, withCtx as c, createElementVNode as n, renderSlot as f } from "vue";
+import i from "../_virtual/_plugin-vue_export-helper.js";
+function v(t, _, e, o, h, C) {
+  const a = s("kv-theme-provider");
+  return d(), m(a, {
+    theme: o.themeStyle,
     class: r(["kv-card-frame-theme-provider", e.radiusClass])
   }, {
-    default: h(() => [
-      u("div", {
+    default: c(() => [
+      n("div", {
         class: r([
           "kv-card-frame tw-h-full",
           e.bgColorClass,
@@ -80,13 +18,13 @@ function y(t, o, e, s, L, S) {
           { "tw-overflow-hidden": !e.allowOverflow }
         ])
       }, [
-        c(t.$slots, "default")
+        f(t.$slots, "default")
       ], 2)
     ]),
     _: 3
   }, 8, ["theme", "class"]);
 }
-const B = /* @__PURE__ */ k(_, [["render", y]]);
+const x = /* @__PURE__ */ i(l, [["render", v]]);
 export {
-  B as default
+  x as default
 };

package/dist/vue/KvCardFrame.vue.d.ts

@@ -0,0 +1,86 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    allowOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bgColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    radiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    shadowClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>, {
+    themeStyle: import('vue').ComputedRef<any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    allowOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bgColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    radiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    shadowClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>> & Readonly<{}>, {
+    theme: string;
+    allowOverflow: boolean;
+    bgColorClass: string;
+    borderClass: string;
+    radiusClass: string;
+    shadowClass: string;
+}, {}, {
+    KvThemeProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        theme: {
+            type: ObjectConstructor;
+            default: any;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        theme: {
+            type: ObjectConstructor;
+            default: any;
+        };
+    }>> & Readonly<{}>, {
+        tag: string;
+        theme: Record<string, any>;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvCardFrame2.js

@@ -0,0 +1,67 @@
+import { computed as r } from "vue";
+import { defaultTheme as t, stoneDarkTheme as a, stoneLightTheme as n, marigoldLightTheme as o, greenLightTheme as s, greenDarkTheme as l } from "@kiva/kv-tokens";
+import i from "./KvThemeProvider.js";
+const h = {
+  components: {
+    KvThemeProvider: i
+  },
+  props: {
+    allowOverflow: {
+      type: Boolean,
+      default: !0
+    },
+    bgColorClass: {
+      type: String,
+      default: "tw-bg-primary"
+    },
+    borderClass: {
+      type: String,
+      default: ""
+    },
+    radiusClass: {
+      type: String,
+      default: "tw-rounded"
+    },
+    shadowClass: {
+      type: String,
+      default: "tw-shadow-lg"
+    },
+    theme: {
+      type: String,
+      default: "default",
+      validator(e) {
+        return [
+          "default",
+          "greenLight",
+          "greenDark",
+          "marigoldLight",
+          "stoneLight",
+          "stoneDark"
+        ].includes(e);
+      }
+    }
+  },
+  setup(e) {
+    return { themeStyle: r(() => {
+      switch (e.theme) {
+        case "default":
+          return t;
+        case "greenDark":
+          return l;
+        case "greenLight":
+          return s;
+        case "marigoldLight":
+          return o;
+        case "stoneLight":
+          return n;
+        case "stoneDark":
+          return a;
+        default:
+          return t;
+      }
+    }) };
+  }
+};
+export {
+  h as default
+};

package/dist/vue/KvCarousel.css

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

package/dist/vue/KvCarousel.js

@@ -1,265 +1,128 @@
-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 g from "./KvCarousel2.js";
+import { resolveComponent as h, openBlock as o, createElementBlock as n, normalizeClass as a, createElementVNode as i, Fragment as c, renderList as m, normalizeStyle as y, renderSlot as x, createVNode as s, toDisplayString as u, createCommentVNode as b } from "vue";
 import "./KvCarousel.css";
-import N from "../_virtual/_plugin-vue_export-helper.js";
-const O = {
-  name: "KvCarousel",
-  components: {
-    KvMaterialIcon: U
-  },
-  props: {
-    /**
-     * Should multiple slides be visible at a time.
-     * If true, a width must be set for each individual
-     * carousel slide or slideMaxWidth must
-     * be used.
-     * */
-    multipleSlidesVisible: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Options for the embla carousel - // https://davidcetinkaya.github.io/embla-carousel/api#options
-     * */
-    emblaOptions: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    /**
-     * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
-     * */
-    autoplayOptions: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    /**
-     * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
-     * */
-    fadeEnabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The type of logic to implement when deciding how many slides
-     * to scroll when pressing the next/prev button
-     * `visible, auto`
-     * */
-    slidesToScroll: {
-      type: String,
-      default: "auto",
-      validator: (w) => ["visible", "auto"].indexOf(w) !== -1
-    },
-    /**
-     * CSS value and unit to set the max width on responsive slides.
-     * Slide will be responsive full width until the max width value
-     * is reached - example value: '32.5rem'
-     * */
-    slideMaxWidth: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Aside controls version of the carousel
-     * */
-    asideControls: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Dotted controls version of the carousel
-     * */
-    isDotted: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Enables carousel slides to have a circle effect
-     * */
-    inCircle: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Position carousel controls in the top right corner
-     * */
-    controlsTopRight: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "change",
-    "interact-carousel"
-  ],
-  setup(w, { emit: l, slots: e }) {
-    const {
-      componentSlotKeys: t,
-      currentIndex: m,
-      embla: b,
-      goToSlide: s,
-      handleUserInteraction: o,
-      isAriaHidden: a,
-      isAutoplaying: y,
-      nextIndex: x,
-      previousIndex: v,
-      reInit: C,
-      reInitVisible: I,
-      rootEl: k,
-      slideIndicatorCount: S,
-      slideIndicatorListLength: _,
-      slides: R,
-      toggleAutoPlay: T
-    } = K(w, { emit: l, slots: e });
-    return {
-      componentSlotKeys: t,
-      currentIndex: m,
-      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: R,
-      toggleAutoPlay: T
-    };
-  }
-}, W = ["aria-label", "aria-current", "aria-hidden", "tab-index"], D = ["disabled"], H = ["aria-label"], P = ["disabled"], z = {
+import v from "../_virtual/_plugin-vue_export-helper.js";
+const k = ["aria-label", "aria-current", "aria-hidden", "tab-index"], C = ["disabled"], _ = ["aria-label"], I = ["disabled"], S = {
   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"], q = {
+}, R = ["onClick"], j = {
   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%" }
-}, G = ["disabled"], J = {
+}, T = ["disabled"], A = {
   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%" }
-}, Q = ["disabled"];
-function X(w, l, e, t, m, b) {
-  const s = V("kv-material-icon");
-  return r(), n("section", {
+}, N = ["disabled"];
+function L(f, l, e, t, U, V) {
+  const d = h("kv-material-icon");
+  return o(), n("section", {
     ref: "rootEl",
-    class: d(["kv-carousel tw-overflow-hidden tw-w-full", { "lg:tw-relative": e.asideControls, "tw-relative tw-pt-6": e.controlsTopRight }]),
+    class: a(["kv-carousel tw-overflow-hidden tw-w-full", { "lg:tw-relative": e.asideControls, "tw-relative tw-pt-6": e.controlsTopRight }]),
     "aria-label": "carousel"
   }, [
     i("div", {
-      class: d(["tw-flex tw-gap-x-4", {
+      class: a(["tw-flex tw-gap-x-4", {
         "tw-mx-auto aside-controls-content": e.asideControls,
         "circle-carousel": e.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 }]),
+      (o(!0), n(c, null, m(t.componentSlotKeys, (r, w) => (o(), n("div", {
+        key: w,
+        class: a(["tw-flex-none tw-relative", { "tw-w-full": !e.multipleSlidesVisible || e.slideMaxWidth, "circle-slide": e.inCircle }]),
         role: "group",
-        "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}` : "")
+        "aria-label": `slide ${w + 1} of ${t.componentSlotKeys.length}`,
+        "aria-current": t.currentIndex === w ? "true" : "false",
+        "aria-hidden": t.isAriaHidden(w) ? "true" : "false",
+        "tab-index": t.isAriaHidden(w) ? "-1" : !1,
+        style: y(e.slideMaxWidth ? `max-width:${e.slideMaxWidth}` : "")
       }, [
-        M(w.$slots, o, {}, void 0, !0)
-      ], 14, W))), 128))
+        x(f.$slots, r, {}, void 0, !0)
+      ], 14, k))), 128))
     ], 2),
-    t.slideIndicatorCount > 1 && !e.isDotted ? (r(), n("div", {
+    t.slideIndicatorCount > 1 && !e.isDotted ? (o(), n("div", {
       key: 0,
-      class: d(["kv-carousel__controls tw-flex tw-justify-between tw-items-center tw-w-full", {
+      class: a(["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-1.5 tw-pr-1": e.controlsTopRight
       }])
     }, [
       i("button", {
-        class: d(["tw-text-primary tw-rounded-full tw-border-primary tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default", {
+        class: a(["tw-text-primary 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 tw-h-4 tw-w-4": !e.controlsTopRight,
           "tw-bg-white tw-shadow-lg tw-h-3.5 tw-w-3.5": e.controlsTopRight
         }]),
         disabled: t.embla && !t.embla.canScrollPrev(),
-        onClick: l[0] || (l[0] = (o) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+        onClick: l[0] || (l[0] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
       }, [
-        c(s, {
+        s(d, {
           class: "tw-w-4",
           icon: e.asideControls ? t.mdiArrowLeft : t.mdiChevronLeft
         }, null, 8, ["icon"]),
         l[4] || (l[4] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
-      ], 10, D),
-      e.controlsTopRight ? f("", !0) : (r(), n("div", {
+      ], 10, C),
+      e.controlsTopRight ? b("", !0) : (o(), 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"
-      }, h(t.currentIndex + 1) + "/" + h(t.slideIndicatorCount), 9, H)),
+      }, u(t.currentIndex + 1) + "/" + u(t.slideIndicatorCount), 9, _)),
       i("button", {
-        class: d(["tw-text-primary tw-rounded-full tw-border-primary tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default", {
+        class: a(["tw-text-primary 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 tw-h-4 tw-w-4": !e.controlsTopRight,
           "tw-bg-white tw-shadow-lg tw-h-3.5 tw-w-3.5": e.controlsTopRight
         }]),
         disabled: t.embla && !t.embla.canScrollNext(),
-        onClick: l[1] || (l[1] = (o) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+        onClick: l[1] || (l[1] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
       }, [
-        c(s, {
+        s(d, {
           class: "tw-w-4",
           icon: e.asideControls ? t.mdiArrowRight : t.mdiChevronRight
         }, null, 8, ["icon"]),
         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)
+      ], 10, I)
+    ], 2)) : t.slideIndicatorCount > 1 ? (o(), n("div", S, [
+      (o(!0), n(c, null, m(t.slideIndicatorCount, (r) => (o(), n("button", {
+        key: r,
+        onClick: (w) => t.goToSlide(r - 1)
       }, [
         i("div", {
-          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 }
+          class: a(["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 }
           ]])
         }, null, 2)
-      ], 8, F))), 128))
-    ])) : f("", !0),
-    e.asideControls ? (r(), n(u, { key: 2 }, [
-      i("div", q, [
+      ], 8, R))), 128))
+    ])) : b("", !0),
+    e.asideControls ? (o(), n(c, { key: 2 }, [
+      i("div", j, [
         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: l[2] || (l[2] = (o) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+          onClick: l[2] || (l[2] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
         }, [
-          c(s, {
+          s(d, {
             class: "tw-w-4",
             icon: t.mdiArrowLeft
           }, null, 8, ["icon"]),
           l[6] || (l[6] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
-        ], 8, G)
+        ], 8, T)
       ]),
-      i("div", J, [
+      i("div", A, [
         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: l[3] || (l[3] = (o) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+          onClick: l[3] || (l[3] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
         }, [
-          c(s, {
+          s(d, {
             class: "tw-w-4",
             icon: t.mdiArrowRight
           }, null, 8, ["icon"]),
           l[7] || (l[7] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
-        ], 8, Q)
+        ], 8, N)
       ])
-    ], 64)) : f("", !0)
+    ], 64)) : b("", !0)
   ], 2);
 }
-const lt = /* @__PURE__ */ N(O, [["render", X], ["__scopeId", "data-v-031f58b6"]]);
+const z = /* @__PURE__ */ v(g, [["render", L], ["__scopeId", "data-v-c7500299"]]);
 export {
-  lt as default
+  z as default
 };