@kiva/kv-components 4.8.6 → 5.1.0

package/dist/vue/KvTextInput.js

@@ -0,0 +1,185 @@
+import { toRefs as b, ref as w, resolveComponent as h, openBlock as u, createElementBlock as m, normalizeClass as f, normalizeStyle as I, createElementVNode as s, mergeProps as x, toHandlers as V, createBlock as p, createCommentVNode as c, withDirectives as C, createVNode as k, vShow as S, renderSlot as _ } from "vue";
+import { mdiAlertCircleOutline as B, mdiClose as A } from "@mdi/js";
+import { useAttrs as N } from "../utils/attrs.js";
+import R from "./KvMaterialIcon.js";
+import T from "../_virtual/_plugin-vue_export-helper.js";
+const g = [
+  "input",
+  "update:modelValue"
+], z = {
+  components: {
+    KvMaterialIcon: R
+  },
+  inheritAttrs: !1,
+  // v-model will update when a different value is input
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Id of the input, used to associate the input with a <label> element.
+     * */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Value of the text in the input. Used if you're not using the standard v-model bindings
+     * ```
+     * <kv-text-input :value="streetAddress" @input="(val) => streetAddress = val" />
+     * ```
+     * */
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    /**
+     * Text that appears in the form control when it has no value set
+     * Should not be used as a label, but rather an example.
+     * Bad: Enter an address   Good: 1234 E Cherry Lane
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder
+     * */
+    placeholder: {
+      type: String,
+      default: null
+    },
+    /**
+     * Prevents the input from being edited or focused
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * When set to false, visually indicates to the user that the contents of the input need
+     * to be changed
+     * */
+    valid: {
+      type: Boolean,
+      default: !0
+    },
+    /*
+     * SVG path data passed in from an imported @mdi/js module.
+     * Displayed on the left hand side of the input
+     * ```
+     * import { mdiMagnify } from '@mdi/js';
+     * data() { return { mdiMagnify } };
+     * <kv-text-input :icon="mdiMagnify" />`
+     * ```
+     * */
+    icon: {
+      type: String,
+      default: null
+    },
+    /**
+     * Can be used to set show special keyboards for mobile users
+     * E.g., type="number" or type="tel"
+     * */
+    type: {
+      type: String,
+      default: "text"
+    },
+    /**
+     * When set to true, adds a button positioned to the right edge of the input containing an “X”
+     * */
+    canClear: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: g,
+  setup(a, l) {
+    const { emit: t } = l, {
+      modelValue: e
+    } = b(a), i = w(null), r = w(e.value), {
+      classes: n,
+      styles: o,
+      inputAttrs: v,
+      inputListeners: y
+    } = N(l, g);
+    return {
+      mdiAlertCircleOutline: B,
+      mdiClose: A,
+      onInput: (d) => {
+        r.value = d.target.value, t("input", d.target.value), t("update:modelValue", d.target.value);
+      },
+      focus: () => {
+        i.value.focus();
+      },
+      blur: () => {
+        i.value.blur();
+      },
+      clearInput: () => {
+        r.value = "", t("input", ""), t("update:modelValue", "");
+      },
+      inputText: r,
+      classes: n,
+      styles: o,
+      inputAttrs: v,
+      inputListeners: y,
+      textInputRef: i
+    };
+  }
+}, E = ["id", "type", "placeholder", "disabled", "value"], K = {
+  key: 2,
+  class: "tw-text-danger-highlight tw-text-small tw-font-medium tw-mt-1"
+};
+function L(a, l, t, e, i, r) {
+  const n = h("kv-material-icon");
+  return u(), m("div", {
+    class: f(["tw-inline-flex", e.classes]),
+    style: I(e.styles)
+  }, [
+    s("div", {
+      class: f(["tw-relative tw-w-full", { "tw-opacity-low": t.disabled }])
+    }, [
+      s("input", x({
+        id: t.id,
+        ref: "textInputRef",
+        type: t.type,
+        class: ["tw-h-6 tw-w-full tw-px-2 tw-border tw-rounded-sm tw-appearance-none tw-text-base tw-ring-inset focus:tw-outline-none focus:tw-ring-2 focus:tw-border-transparent", {
+          "tw-bg-primary": t.valid && !t.disabled,
+          "tw-border-tertiary focus:tw-ring-action": t.valid,
+          "tw-pr-6 tw-bg-danger-highlight tw-border-danger focus:tw-ring-danger-highlight": !t.valid,
+          "tw-bg-tertiary": t.disabled,
+          "tw-pl-6": t.icon
+        }],
+        placeholder: t.placeholder,
+        disabled: t.disabled
+      }, e.inputAttrs, { value: t.modelValue }, V(e.inputListeners, !0), {
+        onInput: l[0] || (l[0] = (...o) => e.onInput && e.onInput(...o))
+      }), null, 16, E),
+      t.icon ? (u(), p(n, {
+        key: 0,
+        icon: t.icon,
+        class: "tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-left-1.5 tw-pointer-events-none"
+      }, null, 8, ["icon"])) : c("", !0),
+      t.valid ? c("", !0) : (u(), p(n, {
+        key: 1,
+        icon: e.mdiAlertCircleOutline,
+        class: "tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-right-1.5 tw-pointer-events-none tw-text-danger"
+      }, null, 8, ["icon"])),
+      C(s("button", {
+        type: "button",
+        class: "tw-absolute tw-top-1.5 tw-right-1.5",
+        onClick: l[1] || (l[1] = (...o) => e.clearInput && e.clearInput(...o))
+      }, [
+        l[2] || (l[2] = s("span", { class: "tw-sr-only" }, "clear input", -1)),
+        k(n, {
+          class: "tw-w-3 tw-h-3",
+          icon: e.mdiClose
+        }, null, 8, ["icon"])
+      ], 512), [
+        [S, t.canClear && t.valid && !!e.inputText]
+      ]),
+      a.$slots.error ? (u(), m("div", K, [
+        _(a.$slots, "error")
+      ])) : c("", !0)
+    ], 2)
+  ], 6);
+}
+const J = /* @__PURE__ */ T(z, [["render", L]]);
+export {
+  J as default
+};

package/dist/vue/KvTextLink.js

@@ -0,0 +1,93 @@
+import { toRefs as f, ref as d, computed as m, watch as w, onMounted as p, resolveComponent as v, openBlock as s, createBlock as u, resolveDynamicComponent as k, normalizeClass as _, withCtx as b, renderSlot as g, createCommentVNode as h } from "vue";
+import x from "./KvMaterialIcon.js";
+import C from "../_virtual/_plugin-vue_export-helper.js";
+const y = {
+  components: {
+    KvMaterialIcon: x
+  },
+  props: {
+    /**
+     * Use if linking to a Vue route
+     * */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Use if linking to an external link or old-stack page
+     * */
+    href: {
+      type: String,
+      default: null
+    },
+    /**
+     * SVG path data passed in from an imported @mdi/js module.
+     * ```
+     * import { mdiArrowRight } from '@mdi/js';
+     * data() { return { mdiArrowRight } };
+     * <kv-text-link :icon="mdiArrowRight" />`
+     * ```
+     * */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * State of the button
+     * @values '', disabled
+     * */
+    state: {
+      type: String,
+      default: "",
+      validator(n) {
+        return ["", "disabled"].includes(n);
+      }
+    }
+  },
+  emits: [
+    "click"
+  ],
+  setup(n, { emit: i }) {
+    const {
+      to: t,
+      href: e
+    } = f(n), o = d(null), r = m(() => t.value ? "router-link" : e.value ? "a" : "button"), a = (c) => {
+      r.value === "button" && (c.preventDefault(), i("click", c));
+    }, l = () => {
+      e.value && (o.value.href = e.value);
+    };
+    return w(e, () => l()), p(() => l()), {
+      tag: r,
+      onClick: a,
+      buttonRef: o,
+      setHref: l
+    };
+  }
+};
+function S(n, i, t, e, o, r) {
+  const a = v("kv-material-icon");
+  return s(), u(k(e.tag), {
+    ref: "buttonRef",
+    to: t.to,
+    disabled: t.state === "disabled",
+    class: _(["tw-text-h4 tw-text-link", {
+      "tw-opacity-low tw-pointer-events-none": t.state === "disabled",
+      "tw-group tw-inline-flex tw-items-center tw-gap-x-0.5": t.icon
+    }]),
+    onClick: e.onClick
+  }, {
+    default: b(() => [
+      g(n.$slots, "default"),
+      t.icon ? (s(), u(a, {
+        key: 0,
+        icon: t.icon,
+        class: "tw-w-1.5 tw-h-1.5 md:tw-w-2 md:tw-h-2 tw-transition-transform tw-ease-in-out tw-duration-200 group-hover:tw-translate-x-[0.125rem] group-focus:tw-translate-x-[0.125rem]"
+      }, null, 8, ["icon"])) : h("", !0)
+    ]),
+    _: 3
+  }, 8, ["to", "disabled", "class", "onClick"]);
+}
+const K = /* @__PURE__ */ C(y, [["render", S]]);
+export {
+  K as default
+};

package/dist/vue/KvThemeProvider.css

@@ -0,0 +1 @@
+.tw-text-jumbo u,.tw-text-h1 u,.tw-text-h2 u,.tw-text-h3 u,h1 u,h2 u,h3 u{text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:var(--heading-underline-primary);background-repeat:no-repeat;background-position:left bottom}.tw-text-jumbo u,.tw-text-h1 u,h1 u{background-size:100% .75rem;padding-bottom:.375rem}.tw-text-h2 u,h2 u{background-size:100% .375rem;padding-bottom:.125rem}.tw-text-h3 u,h3 u{background-size:100% .375rem;padding-bottom:.2rem}@media (min-width: 64rem){.tw-text-jumbo u{background-size:100% 1rem;padding-bottom:.375rem}}

package/dist/vue/KvThemeProvider.js

@@ -0,0 +1,65 @@
+import { openBlock as r, createElementBlock as o, normalizeStyle as l, renderSlot as n } from "vue";
+/* empty css                 */
+import c from "../_virtual/_plugin-vue_export-helper.js";
+const a = {
+  props: {
+    /**
+     * An object containing CSS custom properties set to RGB values.
+     *
+     * For custom theming, see all available custom properties set to white in RGB, below
+     * @usage
+     * ```
+     * {
+     *    --text-primary: '255, 255, 255',
+     *    --text-primary-inverse: '255, 255, 255',
+     *    --text-secondary: '255, 255, 255',
+     *    --text-tertiary: '255, 255, 255',
+     *    --text-action: '255, 255, 255',
+     *    --text-action-highlight: '255, 255, 255',
+     *    --text-danger: '255, 255, 255',
+     *    --text-danger-highlight: '255, 255, 255',
+     *
+     *    --bg-primary: '255, 255, 255',
+     *    --bg-primary-inverse: '255, 255, 255',
+     *    --bg-secondary: '255, 255, 255',
+     *    --bg-tertiary: '255, 255, 255',
+     *    --bg-action: '255, 255, 255',
+     *    --bg-action-highlight: '255, 255, 255',
+     *    --bg-danger: '255, 255, 255',
+     *    --bg-danger-highlight: '255, 255, 255',
+     *    --bg-caution: '255, 255, 255',
+     *
+     *    --border-primary: '255, 255, 255',
+     *    --border-primary-inverse: '255, 255, 255',
+     *    --border-secondary: '255, 255, 255',
+     *    --border-tertiary: '255, 255, 255',
+     *    --border-action: '255, 255, 255',
+     *    --border-action-highlight: '255, 255, 255',
+     *    --border-danger: '255, 255, 255',
+     *    --border-danger-highlight: '255, 255, 255',
+     *
+     *    --heading-underline-primary: url('/kvui/heading-underline.svg#FFFFFF'),
+     * }
+     * ```
+     *
+     * */
+    theme: {
+      type: Object,
+      default: null
+    }
+  }
+};
+function m(e, p, t, s, i, d) {
+  return r(), o("div", {
+    style: l({
+      ...t.theme,
+      color: "rgb(var(--text-primary))"
+    })
+  }, [
+    n(e.$slots, "default")
+  ], 4);
+}
+const h = /* @__PURE__ */ c(a, [["render", m]]);
+export {
+  h as default
+};

package/dist/vue/KvToast.js

@@ -0,0 +1,123 @@
+import { ref as i, computed as u, resolveComponent as C, openBlock as l, createElementBlock as m, createVNode as p, Transition as M, withCtx as x, createElementVNode as n, normalizeClass as H, createBlock as b, renderSlot as E, createCommentVNode as R } from "vue";
+import { mdiAlert as S, mdiAlertCircle as V, mdiCheckCircle as A, mdiClose as B } from "@mdi/js";
+import N from "./KvMaterialIcon.js";
+import I from "./KvPageContainer.js";
+import K from "../_virtual/_plugin-vue_export-helper.js";
+const L = {
+  components: {
+    KvMaterialIcon: N,
+    KvPageContainer: I
+  },
+  emits: [
+    "close"
+  ],
+  setup(g, { emit: e, slots: r }) {
+    const t = i(!1), c = i(""), s = i("confirmation"), o = i(!1), a = i(null), d = u(() => s.value === "warning" ? S : s.value === "error" ? V : A), h = u(() => {
+      const w = document.createElement("span");
+      w.innerHTML = c.value;
+      const k = 100 * w.innerText.length;
+      return Math.max(k, 5e3);
+    }), T = u(() => !!(r != null && r.toastContent)), _ = () => {
+      t.value = !1, clearTimeout(a.value), e("close");
+    };
+    return {
+      mdiClose: B,
+      isVisible: t,
+      message: c,
+      messageType: s,
+      persist: o,
+      timeout: a,
+      icon: d,
+      msToDisplayToast: h,
+      close: _,
+      show: (f, v, w, y) => {
+        t.value = !0, c.value = typeof f == "string" ? f : "", s.value = typeof v == "string" ? v : "", o.value = !!w, o.value || (a.value = setTimeout(() => {
+          _();
+        }, y ?? h.value));
+      },
+      hasToastContentSlot: T
+    };
+  }
+}, P = {
+  role: "alert",
+  "aria-live": "polite"
+}, Z = {
+  key: 0,
+  "data-test": "tip-message",
+  class: "tw-mx-2.5"
+}, j = { class: "tw-rounded tw-overflow-hidden tw-flex tw-bg-secondary tw-mx-auto tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2 tw-shadow" }, U = {
+  key: 0,
+  width: "16",
+  height: "24",
+  viewBox: "0 0 16 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, z = {
+  ref: "messageRef",
+  class: "tw-flex-1 tw-px-1 tw-py-2 tw-flex"
+}, D = ["innerHTML"];
+function q(g, e, r, t, c, s) {
+  const o = C("kv-material-icon"), a = C("kv-page-container");
+  return l(), m("div", P, [
+    p(M, {
+      "enter-active-class": "tw-transition-opacity tw-duration-300",
+      "leave-active-class": "tw-transition-opacity tw-duration-300",
+      "enter-class": "tw-opacity-0",
+      "enter-to-class": "tw-opacity-full",
+      "leave-class": "tw-opacity-full",
+      "leave-to-class": "tw-opacity-0"
+    }, {
+      default: x(() => [
+        t.isVisible ? (l(), m("div", Z, [
+          p(a, null, {
+            default: x(() => [
+              n("div", j, [
+                n("div", {
+                  class: H(["tw-w-5 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center", {
+                    "tw-bg-brand tw-text-white": t.messageType === "" || t.messageType === "confirmation" || t.messageType === "kiva-logo",
+                    "tw-bg-danger tw-text-primary-inverse": t.messageType === "error",
+                    "tw-bg-caution tw-text-primary": t.messageType === "warning"
+                  }])
+                }, [
+                  t.messageType === "kiva-logo" ? (l(), m("svg", U, e[1] || (e[1] = [
+                    n("path", {
+                      d: "M4.78202 0H0V23.141H4.78202V0ZM6.00533 14.6274C13.6788 14.6274 15.4582 8.05649 15.4582 6.91372H14.7909C7.11743 6.91372 5.33807 13.4846 5.33807 14.6274H6.00533ZM5.33807 15.1988C5.33807 16.3987 6.67259 23.0838 14.9021 23.0838H15.5694C15.5694 21.8839 14.2349 15.1988 6.00533 15.1988H5.33807Z",
+                      fill: "white"
+                    }, null, -1)
+                  ]))) : (l(), b(o, {
+                    key: 1,
+                    class: "tw-w-2.5 tw-h-2.5",
+                    icon: t.icon
+                  }, null, 8, ["icon"]))
+                ], 2),
+                n("div", z, [
+                  t.hasToastContentSlot ? E(g.$slots, "toastContent", { key: 0 }) : (l(), m("p", {
+                    key: 1,
+                    class: "tw-inline-block tw-m-auto",
+                    innerHTML: t.message
+                  }, null, 8, D))
+                ], 512),
+                n("button", {
+                  class: "tw-w-5 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center tw-bg-secondary hover:tw-text-action-highlight",
+                  onClick: e[0] || (e[0] = (...d) => t.close && t.close(...d))
+                }, [
+                  p(o, {
+                    class: "tw-w-2.5 tw-h-2.5",
+                    icon: t.mdiClose
+                  }, null, 8, ["icon"]),
+                  e[2] || (e[2] = n("span", { class: "tw-sr-only" }, "Close notification", -1))
+                ])
+              ])
+            ]),
+            _: 3
+          })
+        ])) : R("", !0)
+      ]),
+      _: 3
+    })
+  ]);
+}
+const X = /* @__PURE__ */ K(L, [["render", q]]);
+export {
+  X as default
+};

package/dist/vue/KvTooltip.css

@@ -0,0 +1 @@
+.tooltip-pane[data-v-0ac37821],.tooltip-arrow[data-v-0ac37821]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-0ac37821]{margin:.5rem;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-0ac37821]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-0ac37821]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-0ac37821]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-0ac37821]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-0ac37821]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-0ac37821]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-0ac37821]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-0ac37821]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}

package/dist/vue/KvTooltip.js

@@ -0,0 +1,91 @@
+import { toRefs as u, ref as v, computed as w, resolveComponent as p, openBlock as i, createBlock as _, withCtx as d, createVNode as h, createElementVNode as n, createElementBlock as k, renderSlot as s, createCommentVNode as y } from "vue";
+import { darkTheme as l, mintTheme as a } from "@kiva/kv-tokens/configs/kivaColors";
+import x from "./KvPopper.js";
+import T from "./KvThemeProvider.js";
+/* empty css           */
+import M from "../_virtual/_plugin-vue_export-helper.js";
+const b = {
+  name: "KvTooltip",
+  components: {
+    KvPopper: x,
+    KvThemeProvider: T
+  },
+  // TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
+  props: {
+    controller: {
+      validator(e) {
+        return typeof e == "string" || typeof window < "u" && "HTMLElement" in window && e instanceof HTMLElement;
+      },
+      required: !0
+    },
+    theme: {
+      type: String,
+      default: "default",
+      validator(e) {
+        return ["default", "mint", "dark"].indexOf(e) !== -1;
+      }
+    }
+  },
+  setup(e) {
+    const {
+      theme: t
+    } = u(e), r = v({
+      preventOverflow: {
+        padding: 10
+      }
+    }), o = w(() => ({
+      mint: a,
+      dark: l
+    })[t.value]);
+    return {
+      darkTheme: l,
+      mintTheme: a,
+      popperModifiers: r,
+      themeStyle: o
+    };
+  }
+}, g = {
+  class: "tw-p-2.5",
+  style: { "max-width": "250px" }
+}, E = {
+  key: 0,
+  class: "tw-text-primary tw-font-medium tw-mb-1.5"
+}, K = { class: "tw-text-primary" };
+function S(e, t, r, o, m, $) {
+  const c = p("kv-popper"), f = p("kv-theme-provider");
+  return i(), _(f, {
+    theme: o.themeStyle,
+    class: "kv-tailwind"
+  }, {
+    default: d(() => [
+      h(c, {
+        controller: r.controller,
+        "popper-modifiers": o.popperModifiers,
+        "popper-placement": "top",
+        "transition-type": "kvfastfade",
+        class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
+      }, {
+        default: d(() => [
+          n("div", g, [
+            e.$slots.title ? (i(), k("div", E, [
+              s(e.$slots, "title", {}, void 0, !0)
+            ])) : y("", !0),
+            n("div", K, [
+              s(e.$slots, "default", {}, void 0, !0)
+            ])
+          ]),
+          t[0] || (t[0] = n("div", {
+            class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
+            "x-arrow": ""
+          }, null, -1))
+        ]),
+        _: 3
+      }, 8, ["controller", "popper-modifiers"])
+    ]),
+    _: 3
+  }, 8, ["theme"]);
+}
+const O = /* @__PURE__ */ M(b, [["render", S], ["__scopeId", "data-v-0ac37821"]]);
+export {
+  O as default
+};

package/dist/vue/KvTreeMapChart.css

@@ -0,0 +1 @@
+.treemap-figure[data-v-fddc53a2]{height:30rem;width:calc(100% + .25rem);margin-right:-.25rem}@media (min-width: 45.875rem){.treemap-figure[data-v-fddc53a2]{height:20rem}}