@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvProgressBar.vue.d.ts

@@ -0,0 +1,70 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+    bgVariant: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>, {
+    loaded: import('vue').Ref<boolean, boolean>;
+    percent: import('vue').ComputedRef<number>;
+    animateProgressBar: () => void;
+    variantClass: import('vue').ComputedRef<"tw-bg-tertiary" | "tw-bg-danger" | "tw-bg-caution" | "tw-bg-brand">;
+    backgroundVariant: import('vue').ComputedRef<"tw-bg-tertiary" | "tw-bg-secondary">;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+    bgVariant: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>> & Readonly<{}>, {
+    value: number;
+    variant: string;
+    min: number;
+    max: number;
+    bgVariant: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvProgressBar2.js

@@ -0,0 +1,101 @@
+import { toRefs as p, ref as y, computed as e, onMounted as b, nextTick as v } from "vue";
+const h = {
+  props: {
+    /**
+     * The words to announce to screenreaders describing what this progress represents
+     * e.g., "Percent the loan has funded"
+     * */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The min value of the progress bar
+     * */
+    min: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The max value of the progress bar
+     * */
+    max: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * The current value to display
+     * */
+    value: {
+      type: Number,
+      default: 0,
+      required: !0
+    },
+    /**
+     * Appearance of the progress bar
+     * `primary (default), ghost, danger, caution
+     * */
+    variant: {
+      type: String,
+      default: "primary",
+      validator(t) {
+        return ["primary", "ghost", "danger", "caution"].includes(t);
+      }
+    },
+    /**
+     * Appearance of the progress bar background
+     * `secondary (default), tertiary
+     * */
+    bgVariant: {
+      type: String,
+      default: "secondary",
+      validator(t) {
+        return ["secondary", "tertiary"].includes(t);
+      }
+    }
+  },
+  setup(t) {
+    const {
+      min: a,
+      max: u,
+      value: i,
+      variant: s,
+      bgVariant: c
+    } = p(t), r = y(!1), o = e(() => {
+      const g = (i.value - a.value) / (u.value - a.value) * 100, m = Math.round(g * 10) / 10;
+      return Math.min(Math.max(m, 0), 100);
+    }), d = e(() => {
+      switch (s.value) {
+        case "ghost":
+          return "tw-bg-tertiary";
+        case "danger":
+          return "tw-bg-danger";
+        case "caution":
+          return "tw-bg-caution";
+        default:
+          return "tw-bg-brand";
+      }
+    }), l = e(() => {
+      switch (c.value) {
+        case "tertiary":
+          return "tw-bg-tertiary";
+        default:
+          return "tw-bg-secondary";
+      }
+    }), n = () => {
+      r.value = !0;
+    };
+    return b(async () => {
+      await v(), n();
+    }), {
+      loaded: r,
+      percent: o,
+      animateProgressBar: n,
+      variantClass: d,
+      backgroundVariant: l
+    };
+  }
+};
+export {
+  h as default
+};

package/dist/vue/KvPulsingDot.css

@@ -1 +1 @@
-.pulsing-dot[data-v-51110652]{position:relative}.pulsing-dot__circle[data-v-51110652]{height:.5rem;width:.5rem;border-radius:500rem}.pulsing-dot__ring[data-v-51110652]{border-width:2px;border-style:solid;position:absolute;height:.75rem;width:.75rem;border-radius:500rem;left:-2px;top:-2px;animation:pulsate-51110652 1s ease-out;animation-iteration-count:infinite;opacity:0}@keyframes pulsate-51110652{0%{transform:scale(.1);opacity:0}50%{opacity:1}to{transform:scale(1.2);opacity:0}}
+.pulsing-dot[data-v-88502bce]{position:relative}.pulsing-dot__circle[data-v-88502bce]{height:.5rem;width:.5rem;border-radius:500rem}.pulsing-dot__ring[data-v-88502bce]{border-width:2px;border-style:solid;position:absolute;height:.75rem;width:.75rem;border-radius:500rem;left:-2px;top:-2px;animation:pulsate-88502bce 1s ease-out;animation-iteration-count:infinite;opacity:0}@keyframes pulsate-88502bce{0%{transform:scale(.1);opacity:0}50%{opacity:1}to{transform:scale(1.2);opacity:0}}

package/dist/vue/KvPulsingDot.js

@@ -1,33 +1,19 @@
-import { openBlock as e, createElementBlock as l, createElementVNode as o, normalizeClass as s } from "vue";
+import t from "./KvPulsingDot2.js";
+import { openBlock as l, createElementBlock as r, createElementVNode as e, normalizeClass as s } from "vue";
 import "./KvPulsingDot.css";
-import r from "../_virtual/_plugin-vue_export-helper.js";
-const n = {
-  name: "KvPulsingDot",
-  props: {
-    dotColorClass: {
-      type: String,
-      default: "tw-bg-brand"
-    },
-    pulseColorClass: {
-      type: String,
-      default: "tw-border-brand"
-    }
-  },
-  setup() {
-    return {};
-  }
-}, a = { class: "pulsing-dot" };
-function d(c, i, t, p, u, _) {
-  return e(), l("div", a, [
-    o("div", {
-      class: s(["pulsing-dot__ring", t.pulseColorClass])
+import c from "../_virtual/_plugin-vue_export-helper.js";
+const n = { class: "pulsing-dot" };
+function i(a, _, o, d, p, m) {
+  return l(), r("div", n, [
+    e("div", {
+      class: s(["pulsing-dot__ring", o.pulseColorClass])
     }, null, 2),
-    o("div", {
-      class: s(["pulsing-dot__circle", t.dotColorClass])
+    e("div", {
+      class: s(["pulsing-dot__circle", o.dotColorClass])
     }, null, 2)
   ]);
 }
-const C = /* @__PURE__ */ r(n, [["render", d], ["__scopeId", "data-v-51110652"]]);
+const C = /* @__PURE__ */ c(t, [["render", i], ["__scopeId", "data-v-88502bce"]]);
 export {
   C as default
 };

package/dist/vue/KvPulsingDot.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dotColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    pulseColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dotColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    pulseColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    dotColorClass: string;
+    pulseColorClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvPulsingDot2.js

@@ -0,0 +1,19 @@
+const t = {
+  name: "KvPulsingDot",
+  props: {
+    dotColorClass: {
+      type: String,
+      default: "tw-bg-brand"
+    },
+    pulseColorClass: {
+      type: String,
+      default: "tw-border-brand"
+    }
+  },
+  setup() {
+    return {};
+  }
+};
+export {
+  t as default
+};

package/dist/vue/KvRadio.js

@@ -1,104 +1,21 @@
-import { nanoid as u } from "nanoid";
-import { toRefs as k, ref as f, computed as _, onMounted as C, openBlock as m, createElementBlock as w, normalizeClass as s, normalizeStyle as V, createElementVNode as l, mergeProps as B, toHandlers as x, withModifiers as S, createCommentVNode as N, renderSlot as A } from "vue";
-import { useAttrs as R } from "../utils/attrs.js";
-import z from "../_virtual/_plugin-vue_export-helper.js";
-const h = [
-  "change",
-  "update:modelValue"
-], E = {
-  inheritAttrs: !1,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Value of the input
-     * */
-    value: {
-      type: [String, Number, Boolean],
-      required: !0
-    },
-    /**
-     * Prevents the radio from being toggled or focused
-     * */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Native name attribute. Used to group radios if you're not using v-model. E.g.,
-     * ```
-     *  <KvRadio name="cats">Tabby</KvRadio>
-     *  <KvRadio name="cats">Siamese</KvRadio>
-     *  <KvRadio name="dogs">Husky</KvRadio>
-     *  <KvRadio name="dogs">Boxer</KvRadio>
-     * ```
-     * */
-    name: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Native checked attribute. Used to select the radio if you're not using v-model E.g.,
-     * ```
-     *  <KvRadio value="foo" :checked="myModel === foo">Foo</KvRadio>
-     *  <KvRadio value="bar" :checked="myModel === bar">Bar</KvRadio>
-     * ```
-     * */
-    checked: {
-      type: [String, Number, Boolean],
-      default: !1
-    },
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: !1
-    }
-  },
-  emits: h,
-  setup(r, o) {
-    const { emit: t } = o, {
-      value: e,
-      checked: d,
-      modelValue: a
-    } = k(r), n = f(`kvr-${u(10)}`), i = f(null), {
-      classes: v,
-      styles: p,
-      inputAttrs: g,
-      inputListeners: b
-    } = R(o, h), y = _(() => typeof a.value == typeof e.value ? a.value === e.value : !!d.value);
-    return C(() => {
-      n.value = `kvr-${u(10)}`;
-    }), {
-      uuid: n,
-      isChecked: y,
-      radioRef: i,
-      onChange: (c) => {
-        t("change", c.target.value), t("update:modelValue", c.target.value);
-      },
-      focus: () => i.focus(),
-      blur: () => i.blur(),
-      classes: v,
-      styles: p,
-      inputAttrs: g,
-      inputListeners: b
-    };
-  }
-}, L = ["for"], M = ["id", "checked", "name", "value", "disabled"], j = {
+import a from "./KvRadio2.js";
+import { openBlock as o, createElementBlock as d, normalizeClass as r, normalizeStyle as c, createElementVNode as i, mergeProps as w, toHandlers as f, withModifiers as m, createCommentVNode as h, renderSlot as u } from "vue";
+import v from "../_virtual/_plugin-vue_export-helper.js";
+const b = ["for"], _ = ["id", "checked", "name", "value", "disabled"], g = {
   key: 0,
   class: "tw-rounded-full tw-bg-action",
   style: { width: "0.75rem", height: "0.75rem" }
-}, q = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
-function H(r, o, t, e, d, a) {
-  return m(), w("div", {
-    class: s(e.classes),
-    style: V(e.styles)
+}, k = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function y(l, n, t, e, C, x) {
+  return o(), d("div", {
+    class: r(e.classes),
+    style: c(e.styles)
   }, [
-    l("label", {
-      class: s(["tw-inline-flex tw-items-center tw-align-middle", { "tw-opacity-low": t.disabled }]),
+    i("label", {
+      class: r(["tw-inline-flex tw-items-center tw-align-middle", { "tw-opacity-low": t.disabled }]),
       for: e.uuid
     }, [
-      l("input", B(e.inputAttrs, {
+      i("input", w(e.inputAttrs, {
         id: e.uuid,
         ref: "radioRef",
         class: "tw-peer tw-appearance-none tw-w-max",
@@ -107,24 +24,24 @@ function H(r, o, t, e, d, a) {
         name: t.name,
         value: t.value,
         disabled: t.disabled
-      }, x(e.inputListeners, !0), {
-        onChange: o[0] || (o[0] = S((...n) => e.onChange && e.onChange(...n), ["prevent"]))
-      }), null, 16, M),
-      l("div", {
-        class: s(["tw-w-3 tw-h-3 tw-mr-2 tw-rounded-full tw-border tw-flex-shrink-0 tw-overflow-hidden tw-flex tw-justify-center tw-items-center tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
+      }, f(e.inputListeners, !0), {
+        onChange: n[0] || (n[0] = m((...s) => e.onChange && e.onChange(...s), ["prevent"]))
+      }), null, 16, _),
+      i("div", {
+        class: r(["tw-w-3 tw-h-3 tw-mr-2 tw-rounded-full tw-border tw-flex-shrink-0 tw-overflow-hidden tw-flex tw-justify-center tw-items-center tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
           "tw-border-secondary": !e.isChecked,
           "tw-border-action": e.isChecked
         }])
       }, [
-        e.isChecked ? (m(), w("div", j)) : N("", !0)
+        e.isChecked ? (o(), d("div", g)) : h("", !0)
       ], 2),
-      l("div", q, [
-        A(r.$slots, "default")
+      i("div", k, [
+        u(l.$slots, "default")
       ])
-    ], 10, L)
+    ], 10, b)
   ], 6);
 }
-const O = /* @__PURE__ */ z(E, [["render", H]]);
+const E = /* @__PURE__ */ v(a, [["render", y]]);
 export {
-  O as default
+  E as default
 };

package/dist/vue/KvRadio.vue.d.ts

@@ -0,0 +1,62 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    checked: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>, {
+    uuid: import('vue').Ref<string, string>;
+    isChecked: import('vue').ComputedRef<boolean>;
+    radioRef: import('vue').Ref<any, any>;
+    onChange: (event: any) => void;
+    focus: () => any;
+    blur: () => any;
+    classes: any[];
+    styles: any[];
+    inputAttrs: any;
+    inputListeners: any;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, string[], string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    checked: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}>, {
+    name: string;
+    disabled: boolean;
+    modelValue: string | number | boolean;
+    checked: string | number | boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvRadio2.js

@@ -0,0 +1,89 @@
+import { nanoid as r } from "nanoid";
+import { toRefs as h, ref as s, computed as y, onMounted as b } from "vue";
+import { useAttrs as V } from "../utils/attrs.js";
+const d = [
+  "change",
+  "update:modelValue"
+], R = {
+  inheritAttrs: !1,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Value of the input
+     * */
+    value: {
+      type: [String, Number, Boolean],
+      required: !0
+    },
+    /**
+     * Prevents the radio from being toggled or focused
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Native name attribute. Used to group radios if you're not using v-model. E.g.,
+     * ```
+     *  <KvRadio name="cats">Tabby</KvRadio>
+     *  <KvRadio name="cats">Siamese</KvRadio>
+     *  <KvRadio name="dogs">Husky</KvRadio>
+     *  <KvRadio name="dogs">Boxer</KvRadio>
+     * ```
+     * */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Native checked attribute. Used to select the radio if you're not using v-model E.g.,
+     * ```
+     *  <KvRadio value="foo" :checked="myModel === foo">Foo</KvRadio>
+     *  <KvRadio value="bar" :checked="myModel === bar">Bar</KvRadio>
+     * ```
+     * */
+    checked: {
+      type: [String, Number, Boolean],
+      default: !1
+    },
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: !1
+    }
+  },
+  emits: d,
+  setup(c, t) {
+    const { emit: o } = t, {
+      value: u,
+      checked: f,
+      modelValue: a
+    } = h(c), l = s(`kvr-${r(10)}`), e = s(null), {
+      classes: i,
+      styles: p,
+      inputAttrs: m,
+      inputListeners: v
+    } = V(t, d), g = y(() => typeof a.value == typeof u.value ? a.value === u.value : !!f.value);
+    return b(() => {
+      l.value = `kvr-${r(10)}`;
+    }), {
+      uuid: l,
+      isChecked: g,
+      radioRef: e,
+      onChange: (n) => {
+        o("change", n.target.value), o("update:modelValue", n.target.value);
+      },
+      focus: () => e.value.focus(),
+      blur: () => e.value.blur(),
+      classes: i,
+      styles: p,
+      inputAttrs: m,
+      inputListeners: v
+    };
+  }
+};
+export {
+  R as default
+};

package/dist/vue/KvSecondaryNav.css

@@ -1 +1 @@
-.kv-secondary-nav-holder[data-v-b0827053]{height:62px}.kv-secondary-nav[data-v-b0827053]{min-height:62px}
+.kv-secondary-nav-holder[data-v-c3e621bd]{height:62px}.kv-secondary-nav[data-v-c3e621bd]{min-height:62px}