@kiva/kv-components 7.6.3 → 8.0.0

package/dist/vue/KvTabPanel2.js

@@ -0,0 +1,28 @@
+import { toRefs as i, inject as c, computed as a } from "vue";
+const l = {
+  props: {
+    /**
+     * A unique id which correspondes to a `for` property on the KvTab which controls it
+     * e.g., <kv-tab for="foo">... <kv-tab-panel id="foo">
+     * */
+    id: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(o) {
+    const {
+      id: r
+    } = i(o), e = c("$KvTabContext");
+    return {
+      isActive: a(() => {
+        var s;
+        let t = [], n = 0;
+        return e && (t = e.navItems, n = e.selectedIndex), ((s = t[n]) == null ? void 0 : s.forPanel) === r.value;
+      })
+    };
+  }
+};
+export {
+  l as default
+};

package/dist/vue/KvTabs.js

@@ -1,86 +1,32 @@
-import { reactive as h, ref as g, computed as p, provide as E, onMounted as y, onBeforeUnmount as I, openBlock as k, createElementBlock as D, normalizeClass as b, createElementVNode as v, renderSlot as u, normalizeStyle as _, getCurrentInstance as K } from "vue";
-import z from "../_virtual/_plugin-vue_export-helper.js";
-const A = {
-  props: {
-    vertical: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(f, { emit: c }) {
-    const t = h({
-      selectedIndex: 0,
-      setTab: null,
-      navItems: []
-    }), l = g(null), r = p(() => {
-      var s;
-      const { navItems: e, selectedIndex: n } = t;
-      return ((s = e[n]) == null ? void 0 : s.$el) ?? null;
-    }), w = () => {
-      const e = K();
-      e && e.proxy.$forceUpdate();
-    }, a = (e) => {
-      t.selectedIndex = e, r.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), c("tab-changed", e);
-    };
-    t.setTab = a, E("$KvTabContext", t);
-    const x = (e) => {
-      const { navItems: n, selectedIndex: s } = t, d = () => {
-        var m;
-        const o = n.find((T) => T.isActive);
-        o && ((m = o.$el) == null || m.focus());
-      }, i = n.length;
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        const o = (s + 1) % i;
-        a(o), d();
-      }
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        const o = (s - 1 + i) % i;
-        a(o), d();
-      }
-      e.key === "Home" && (e.preventDefault(), a(0), d()), e.key === "End" && (e.preventDefault(), a(i - 1), d());
-    };
-    return y(() => {
-      t.navItems.forEach((e, n) => {
-        e.selected && a(n);
-      }), l.value = new ResizeObserver(() => {
-        w();
-      }), l.value.observe(r.value);
-    }), I(() => {
-      l.value.disconnect();
-    }), {
-      handleKeyDown: x,
-      selectedTabEl: r,
-      tabContext: t
-    };
-  }
-}, B = { class: "tw-relative" };
-function C(f, c, t, l, r, w) {
-  return k(), D("div", {
-    class: b(t.vertical ? "md:tw-flex" : "")
+import d from "./KvTabs2.js";
+import { openBlock as c, createElementBlock as s, normalizeClass as l, createElementVNode as a, renderSlot as i, normalizeStyle as w } from "vue";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "tw-relative" };
+function b(o, r, e, t, v, x) {
+  return c(), s("div", {
+    class: l(e.vertical ? "md:tw-flex" : "")
   }, [
-    v("div", {
+    a("div", {
       role: "tablist",
-      class: b(["tw-flex tw-overflow-auto tw-relative tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6 tw-mb-3 lg:tw-mb-4", { "md:tw-flex-col md:tw-mr-3": t.vertical }]),
-      onKeydown: c[0] || (c[0] = (a) => l.handleKeyDown(a))
+      class: l(["tw-flex tw-overflow-auto tw-relative tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6 tw-mb-3 lg:tw-mb-4", { "md:tw-flex-col md:tw-mr-3": e.vertical }]),
+      onKeydown: r[0] || (r[0] = (n) => t.handleKeyDown(n))
     }, [
-      u(f.$slots, "tabNav"),
-      v("div", {
-        class: b(["tw-absolute tw-bottom-0 tw-h-0.5 tw-left-0 tw-bg-primary-inverse tw-rounded-full tw-origin-left tw-transition-all tw-duration-300", { "tw-hidden md:tw-block tw-top-0 md:tw-bg-action": t.vertical }]),
-        style: _(`
-					width: ${l.selectedTabEl && !t.vertical ? l.selectedTabEl.clientWidth : 3}px;
-					height: ${l.selectedTabEl && t.vertical ? `${l.selectedTabEl.clientHeight}px` : "0.25rem"};
-					transform: ${l.selectedTabEl && !t.vertical ? `translateX(${l.selectedTabEl.offsetLeft}px)` : l.selectedTabEl ? `translateY(${l.selectedTabEl.offsetTop}px)` : null};
+      i(o.$slots, "tabNav"),
+      a("div", {
+        class: l(["tw-absolute tw-bottom-0 tw-h-0.5 tw-left-0 tw-bg-primary-inverse tw-rounded-full tw-origin-left tw-transition-all tw-duration-300", { "tw-hidden md:tw-block tw-top-0 md:tw-bg-action": e.vertical }]),
+        style: w(`
+					width: ${t.selectedTabEl && !e.vertical ? t.selectedTabEl.clientWidth : 3}px;
+					height: ${t.selectedTabEl && e.vertical ? `${t.selectedTabEl.clientHeight}px` : "0.25rem"};
+					transform: ${t.selectedTabEl && !e.vertical ? `translateX(${t.selectedTabEl.offsetLeft}px)` : t.selectedTabEl ? `translateY(${t.selectedTabEl.offsetTop}px)` : null};
 				`)
       }, null, 6)
     ], 34),
-    v("div", B, [
-      u(f.$slots, "tabPanels")
+    a("div", f, [
+      i(o.$slots, "tabPanels")
     ])
   ], 2);
 }
-const H = /* @__PURE__ */ z(A, [["render", C]]);
+const h = /* @__PURE__ */ m(d, [["render", b]]);
 export {
-  H as default
+  h as default
 };

package/dist/vue/KvTabs.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    handleKeyDown: (event: any) => void;
+    selectedTabEl: import('vue').ComputedRef<any>;
+    tabContext: {
+        selectedIndex: number;
+        setTab: any;
+        navItems: any[];
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvTabs2.js

@@ -0,0 +1,60 @@
+import { reactive as b, ref as I, computed as m, provide as x, onMounted as T, onBeforeUnmount as h, getCurrentInstance as y } from "vue";
+const D = {
+  props: {
+    vertical: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(k, { emit: u }) {
+    const t = b({
+      selectedIndex: 0,
+      setTab: null,
+      navItems: []
+    }), l = I(null), f = m(() => {
+      var c;
+      const { navItems: e, selectedIndex: o } = t;
+      return ((c = e[o]) == null ? void 0 : c.$el) ?? null;
+    }), i = () => {
+      const e = y();
+      e && e.proxy.$forceUpdate();
+    }, n = (e) => {
+      t.selectedIndex = e, f.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), u("tab-changed", e);
+    };
+    t.setTab = n, x("$KvTabContext", t);
+    const p = (e) => {
+      const { navItems: o, selectedIndex: c } = t, a = () => {
+        var d;
+        const s = o.find((v) => v.isActive);
+        s && ((d = s.$el) == null || d.focus());
+      }, r = o.length;
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const s = (c + 1) % r;
+        n(s), a();
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const s = (c - 1 + r) % r;
+        n(s), a();
+      }
+      e.key === "Home" && (e.preventDefault(), n(0), a()), e.key === "End" && (e.preventDefault(), n(r - 1), a());
+    };
+    return T(() => {
+      t.navItems.forEach((e, o) => {
+        e.selected && n(o);
+      }), l.value = new ResizeObserver(() => {
+        i();
+      }), l.value.observe(f.value);
+    }), h(() => {
+      l.value.disconnect();
+    }), {
+      handleKeyDown: p,
+      selectedTabEl: f,
+      tabContext: t
+    };
+  }
+};
+export {
+  D as default
+};

package/dist/vue/KvTextInput.js

@@ -1,140 +1,20 @@
-import { toRefs as b, ref as w, resolveComponent as h, openBlock as u, createElementBlock as m, normalizeClass as f, normalizeStyle as x, createElementVNode as s, mergeProps as I, 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 = {
+import u from "./KvTextInput2.js";
+import { resolveComponent as m, openBlock as l, createElementBlock as d, normalizeClass as s, normalizeStyle as g, createElementVNode as i, mergeProps as f, toHandlers as b, createBlock as c, createCommentVNode as a, withDirectives as v, createVNode as h, vShow as y, renderSlot as x } from "vue";
+import k from "../_virtual/_plugin-vue_export-helper.js";
+const _ = ["id", "type", "placeholder", "disabled", "value"], C = {
   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: x(e.styles)
+function I(w, n, t, e, V, B) {
+  const o = m("kv-material-icon");
+  return l(), d("div", {
+    class: s(["tw-inline-flex", e.classes]),
+    style: g(e.styles)
   }, [
-    s("div", {
-      class: f(["tw-relative tw-w-full", { "tw-opacity-low": t.disabled }])
+    i("div", {
+      class: s(["tw-relative tw-w-full", { "tw-opacity-low": t.disabled }])
     }, [
-      s("input", I({
+      i("input", f({
         id: t.id,
         ref: "textInputRef",
         type: t.type,
@@ -147,39 +27,39 @@ function L(a, l, t, e, i, r) {
         }],
         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, {
+      }, e.inputAttrs, { value: t.modelValue }, b(e.inputListeners, !0), {
+        onInput: n[0] || (n[0] = (...r) => e.onInput && e.onInput(...r))
+      }), null, 16, _),
+      t.icon ? (l(), c(o, {
         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, {
+      }, null, 8, ["icon"])) : a("", !0),
+      t.valid ? a("", !0) : (l(), c(o, {
         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", {
+      v(i("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))
+        onClick: n[1] || (n[1] = (...r) => e.clearInput && e.clearInput(...r))
       }, [
-        l[2] || (l[2] = s("span", { class: "tw-sr-only" }, "clear input", -1)),
-        k(n, {
+        n[2] || (n[2] = i("span", { class: "tw-sr-only" }, "clear input", -1)),
+        h(o, {
           class: "tw-w-3 tw-h-3",
           icon: e.mdiClose
         }, null, 8, ["icon"])
       ], 512), [
-        [S, t.canClear && t.valid && !!e.inputText]
+        [y, t.canClear && t.valid && !!e.inputText]
       ]),
-      a.$slots.error ? (u(), m("div", K, [
-        _(a.$slots, "error")
-      ])) : c("", !0)
+      w.$slots.error ? (l(), d("div", C, [
+        x(w.$slots, "error")
+      ])) : a("", !0)
     ], 2)
   ], 6);
 }
-const J = /* @__PURE__ */ T(z, [["render", L]]);
+const A = /* @__PURE__ */ k(u, [["render", I]]);
 export {
-  J as default
+  A as default
 };

package/dist/vue/KvTextInput.vue.d.ts

@@ -0,0 +1,105 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    canClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    mdiAlertCircleOutline: string;
+    mdiClose: string;
+    onInput: (event: any) => void;
+    focus: () => void;
+    blur: () => void;
+    clearInput: () => void;
+    inputText: import('vue').Ref<string | number | boolean, string | number | boolean>;
+    classes: any[];
+    styles: any[];
+    inputAttrs: any;
+    inputListeners: any;
+    textInputRef: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, string[], string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    canClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}>, {
+    type: string;
+    icon: string;
+    disabled: boolean;
+    modelValue: string | number | boolean;
+    valid: boolean;
+    placeholder: string;
+    canClear: boolean;
+}, {}, {
+    KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        icon: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvTextInput2.js

@@ -0,0 +1,126 @@
+import { toRefs as m, ref as o } from "vue";
+import { mdiAlertCircleOutline as f, mdiClose as y } from "@mdi/js";
+import { useAttrs as v } from "../utils/attrs.js";
+import g from "./KvMaterialIcon.js";
+const n = [
+  "input",
+  "update:modelValue"
+], h = {
+  components: {
+    KvMaterialIcon: g
+  },
+  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: n,
+  setup(r, a) {
+    const { emit: e } = a, {
+      modelValue: s
+    } = m(r), t = o(null), l = o(s.value), {
+      classes: p,
+      styles: i,
+      inputAttrs: d,
+      inputListeners: c
+    } = v(a, n);
+    return {
+      mdiAlertCircleOutline: f,
+      mdiClose: y,
+      onInput: (u) => {
+        l.value = u.target.value, e("input", u.target.value), e("update:modelValue", u.target.value);
+      },
+      focus: () => {
+        t.value.focus();
+      },
+      blur: () => {
+        t.value.blur();
+      },
+      clearInput: () => {
+        l.value = "", e("input", ""), e("update:modelValue", "");
+      },
+      inputText: l,
+      classes: p,
+      styles: i,
+      inputAttrs: d,
+      inputListeners: c,
+      textInputRef: t
+    };
+  }
+};
+export {
+  h as default
+};