@kiva/kv-components 8.9.0 → 8.10.0

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -0,0 +1,202 @@
+import { PropType } from 'vue';
+export interface KvPieChartV2Item {
+    label: string;
+    value: number;
+    color?: string;
+}
+export type PieChartUnit = 'percent' | 'amount' | 'count';
+interface ComputedSegment {
+    label: string;
+    value: number;
+    percent: number;
+    color: string;
+    dashLength: number;
+    startDeg: number;
+    delay: number;
+    isVisible: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    values: {
+        type: PropType<KvPieChartV2Item[]>;
+        default: () => any[];
+    };
+    unit: {
+        type: PropType<PieChartUnit>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    shownSegments: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    segmentGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    animateOut: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    CX: number;
+    CY: number;
+    radius: import('vue').ComputedRef<number>;
+    circumference: import('vue').ComputedRef<number>;
+    LOADING_BG_COLOR: string;
+    OTHER_SEGMENT_BG_COLOR: string;
+    showOtherLightbox: import('vue').Ref<boolean, boolean>;
+    animatedIn: import('vue').Ref<boolean, boolean>;
+    displayValues: import('vue').Ref<number[], number[]>;
+    hasData: import('vue').ComputedRef<boolean>;
+    visibleSegments: import('vue').ComputedRef<ComputedSegment[]>;
+    otherSegment: import('vue').ComputedRef<ComputedSegment>;
+    otherItems: import('vue').ComputedRef<{
+        color: string;
+        label: string;
+        value: number;
+    }[]>;
+    allItemsWithColors: import('vue').ComputedRef<{
+        color: string;
+        label: string;
+        value: number;
+    }[]>;
+    valueMinWidth: import('vue').ComputedRef<string>;
+    formatDisplayValue: (index: number) => string;
+    formatItemValue: (item: {
+        value: number;
+    }) => string;
+    formatOtherDisplayValue: () => string;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    values: {
+        type: PropType<KvPieChartV2Item[]>;
+        default: () => any[];
+    };
+    unit: {
+        type: PropType<PieChartUnit>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    shownSegments: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    segmentGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    animateOut: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    values: KvPieChartV2Item[];
+    loading: boolean;
+    unit: PieChartUnit;
+    shownSegments: number;
+    strokeWidth: number;
+    segmentGap: number;
+    initialDelay: number;
+    animateOut: boolean;
+}, {}, {
+    KvLightbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        blurBackground: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            default: string;
+            validator(value: string): boolean;
+        };
+        title: {
+            type: StringConstructor;
+            required: true;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {
+        mdiClose: string;
+        role: import('vue').ComputedRef<"alertdialog" | "dialog">;
+        kvLightbox: import('vue').Ref<any, any>;
+        kvLightboxBody: import('vue').Ref<any, any>;
+        onKeyUp: any;
+        onScreenClick: () => void;
+        hide: (closedBy?: string) => void;
+        show: () => void;
+        controlsRef: import('vue').Ref<any, any>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        blurBackground: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            default: string;
+            validator(value: string): boolean;
+        };
+        title: {
+            type: StringConstructor;
+            required: true;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        "onLightbox-closed"?: (...args: any[]) => any;
+    }>, {
+        variant: string;
+        visible: boolean;
+        preventClose: boolean;
+        blurBackground: 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>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvPieChartV22.js

@@ -0,0 +1,232 @@
+import { toRefs as z, ref as I, computed as u, onMounted as J, watch as U, onUnmounted as Q } from "vue";
+import { getPieChartColor as $, LOADING_BG_COLOR as Z, OTHER_SEGMENT_BG_COLOR as ee } from "../utils/pieChartColors.js";
+import { easeInOutCubic as te } from "../utils/useCountUp.js";
+import ae from "./KvLightbox.js";
+const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
+  name: "KvPieChartV2",
+  components: {
+    KvLightbox: ae
+  },
+  props: {
+    /**
+     * Chart data items. Each must have a label and numeric value.
+     */
+    values: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How values are displayed in legend pills.
+     * @values percent, amount, count
+     */
+    unit: {
+      type: String,
+      default: "percent",
+      validator: (g) => ["percent", "amount", "count"].includes(g)
+    },
+    /**
+     * Shows a skeleton donut ring when true.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Maximum number of visible segments before remaining items collapse into "Other".
+     */
+    shownSegments: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * Donut ring thickness in SVG user units (viewBox is 262x262). The radius
+     * shrinks as this grows, so the outer edge always fits within the viewBox.
+     */
+    strokeWidth: {
+      type: Number,
+      default: 56
+    },
+    /**
+     * Visual gap between adjacent segments, in SVG user units along the ring's
+     * circumference. Set to 0 for no gap.
+     */
+    segmentGap: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * Delay in milliseconds before the first segment starts animating in.
+     * Subsequent segments stagger from this baseline.
+     */
+    initialDelay: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * When changed from false to true, plays the reverse sweep-out animation.
+     */
+    animateOut: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(g) {
+    const {
+      values: A,
+      unit: m,
+      loading: M,
+      shownSegments: d,
+      strokeWidth: B,
+      segmentGap: T,
+      initialDelay: D,
+      animateOut: y
+    } = z(g), k = I(!1), c = I(!1), G = u(() => Math.max((E - B.value) / 2, 1)), b = u(() => 2 * Math.PI * G.value), h = u(() => [...A.value].sort((e, t) => t.value - e.value)), o = u(() => h.value.reduce((e, t) => e + t.value, 0)), O = u(() => A.value.length > 0), S = u(() => h.value.slice(0, d.value)), C = u(() => h.value.slice(d.value).map((t, n) => ({
+      ...t,
+      color: $(d.value + n, t.color)
+    }))), q = u(() => h.value.map((e, t) => ({
+      ...e,
+      color: $(t, e.color)
+    }))), w = u(() => C.value.reduce((e, t) => e + t.value, 0)), R = u(() => o.value > 0 ? w.value / o.value : 0), f = u(() => {
+      let e = 0;
+      return S.value.map((t, n) => {
+        const a = o.value > 0 ? t.value / o.value : 0, l = Math.max(a * b.value - T.value, 0), s = e * 360 - 90;
+        return e += a, {
+          label: t.label,
+          value: t.value,
+          percent: a,
+          color: $(n, t.color),
+          dashLength: l,
+          startDeg: s,
+          delay: D.value + n * W,
+          isVisible: c.value && !y.value
+        };
+      });
+    }), v = u(() => {
+      if (C.value.length === 0) return null;
+      let e = 0;
+      S.value.forEach((l) => {
+        e += o.value > 0 ? l.value / o.value : 0;
+      });
+      const t = Math.max(R.value * b.value - T.value, 0), n = e * 360 - 90, a = S.value.length;
+      return {
+        label: "Other",
+        value: w.value,
+        percent: R.value,
+        color: "#C4C4C4",
+        dashLength: t,
+        startDeg: n,
+        delay: D.value + a * W,
+        isVisible: c.value && !y.value
+      };
+    }), r = I([]), p = [], i = [], V = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, _ = (e, t, n) => {
+      let a = null;
+      function l(s) {
+        a === null && (a = s);
+        const L = s - a, P = Math.min(L / ue, 1), Y = te(P), j = Math.round(t + (n - t) * Y);
+        r.value[e] = j, P < 1 && (i[e] = requestAnimationFrame(l));
+      }
+      i[e] = requestAnimationFrame(l);
+    }, x = (e = !1) => {
+      p.forEach(clearTimeout), p.length = 0, i.forEach(cancelAnimationFrame), i.length = 0;
+      const t = [
+        ...f.value,
+        ...v.value ? [v.value] : []
+      ];
+      for (; r.value.length < t.length; )
+        r.value.push(0);
+      t.forEach((n, a) => {
+        const l = V(n), { delay: s } = n, L = setTimeout(() => {
+          e ? _(a, r.value[a], 0) : _(a, 0, l);
+        }, s);
+        p.push(L);
+      });
+    }, N = (e) => {
+      const t = r.value[e] ?? 0;
+      switch (m.value) {
+        case "percent":
+          return `${t}%`;
+        case "amount":
+          return `$${t.toLocaleString()}`;
+        case "count":
+        default:
+          return `${t.toLocaleString()}`;
+      }
+    }, K = (e) => {
+      const t = o.value > 0 ? e.value / o.value : 0;
+      switch (m.value) {
+        case "percent":
+          return `${Math.round(t * 100)}%`;
+        case "amount":
+          return `$${e.value.toLocaleString()}`;
+        case "count":
+        default:
+          return `${e.value.toLocaleString()}`;
+      }
+    }, X = () => {
+      const e = f.value.length;
+      return N(e);
+    }, H = u(() => {
+      const e = [
+        ...f.value,
+        ...v.value ? [v.value] : []
+      ];
+      let t = 0;
+      return e.forEach((n) => {
+        const a = V(n);
+        let l;
+        switch (m.value) {
+          case "percent":
+            l = `${a}%`;
+            break;
+          case "amount":
+            l = `$${a.toLocaleString()}`;
+            break;
+          default:
+            l = `${a.toLocaleString()}`;
+        }
+        l.length > t && (t = l.length);
+      }), `${t}ch`;
+    }), F = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          c.value = !0, x(!1);
+        });
+      });
+    };
+    return J(() => {
+      !M.value && O.value && F();
+    }), U(M, (e) => {
+      !e && O.value && F();
+    }), U(y, (e) => {
+      e && (c.value = !1, x(!0));
+    }), Q(() => {
+      p.forEach(clearTimeout), i.forEach(cancelAnimationFrame);
+    }), {
+      // Constants
+      CX: le,
+      CY: ne,
+      radius: G,
+      circumference: b,
+      LOADING_BG_COLOR: Z,
+      OTHER_SEGMENT_BG_COLOR: ee,
+      // State
+      showOtherLightbox: k,
+      animatedIn: c,
+      displayValues: r,
+      // Computed
+      hasData: O,
+      visibleSegments: f,
+      otherSegment: v,
+      otherItems: C,
+      allItemsWithColors: q,
+      valueMinWidth: H,
+      // Methods
+      formatDisplayValue: N,
+      formatItemValue: K,
+      formatOtherDisplayValue: X
+    };
+  }
+};
+export {
+  ve as default
+};

package/dist/vue/KvProgressCircle.vue.d.ts

@@ -64,9 +64,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     color: string;
+    strokeWidth: number;
     arcScale: number;
     rotate: number;
-    strokeWidth: number;
     showNumber: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvTabPanel.js

@@ -1,17 +1,17 @@
-import l from "./KvTabPanel2.js";
-import { openBlock as a, createBlock as o, Transition as c, withCtx as r, withDirectives as n, createElementBlock as s, renderSlot as d, vShow as v } from "vue";
-import b from "../_virtual/_plugin-vue_export-helper.js";
-const w = ["id", "aria-hidden", "aria-labelledby"];
-function f(i, p, t, e, _, m) {
-  return a(), o(c, {
+import o from "./KvTabPanel2.js";
+import { openBlock as a, createBlock as l, Transition as r, withCtx as c, withDirectives as n, createElementBlock as s, renderSlot as d, vShow as v } from "vue";
+import f from "../_virtual/_plugin-vue_export-helper.js";
+const b = ["id", "aria-hidden", "aria-labelledby"];
+function w(i, p, t, e, m, _) {
+  return a(), l(r, {
     "enter-active-class": "tw-transition-opacity tw-duration-700",
     "leave-active-class": "",
-    "enter-class": "tw-opacity-0 tw-absolute tw-top-0",
+    "enter-from-class": "tw-opacity-0 tw-absolute tw-top-0",
     "enter-to-class": "tw-opacity-full",
-    "leave-class": "",
+    "leave-from-class": "",
     "leave-to-class": "tw-opacity-0 tw-absolute tw-top-0"
   }, {
-    default: r(() => [
+    default: c(() => [
       n((a(), s("div", {
         id: `kv-tab-panel-${t.id}`,
         key: `kv-tab-panel-${t.id}`,
@@ -21,14 +21,14 @@ function f(i, p, t, e, _, m) {
         tabindex: "0"
       }, [
         d(i.$slots, "default")
-      ], 8, w)), [
+      ], 8, b)), [
         [v, e.isActive]
       ])
     ]),
     _: 3
   });
 }
-const y = /* @__PURE__ */ b(l, [["render", f]]);
+const y = /* @__PURE__ */ f(o, [["render", w]]);
 export {
   y as default
 };

package/dist/vue/KvTabs.js

@@ -1,32 +1,32 @@
-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";
+import w from "./KvTabs2.js";
+import { openBlock as d, createElementBlock as s, normalizeClass as l, createElementVNode as o, renderSlot as i, normalizeStyle as m } from "vue";
+import c from "../_virtual/_plugin-vue_export-helper.js";
 const f = { class: "tw-relative" };
-function b(o, r, e, t, v, x) {
-  return c(), s("div", {
+function v(a, r, e, t, b, g) {
+  return d(), s("div", {
     class: l(e.vertical ? "md:tw-flex" : "")
   }, [
-    a("div", {
+    o("div", {
       role: "tablist",
       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))
     }, [
-      i(o.$slots, "tabNav"),
-      a("div", {
+      i(a.$slots, "tabNav"),
+      o("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};
+        style: m(`
+					width: ${t.indicatorStyle.width}px;
+					height: ${t.indicatorStyle.height};
+					transform: ${t.indicatorStyle.transform};
 				`)
       }, null, 6)
     ], 34),
-    a("div", f, [
-      i(o.$slots, "tabPanels")
+    o("div", f, [
+      i(a.$slots, "tabPanels")
     ])
   ], 2);
 }
-const h = /* @__PURE__ */ m(d, [["render", b]]);
+const p = /* @__PURE__ */ c(w, [["render", v]]);
 export {
-  h as default
+  p as default
 };

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

@@ -1,3 +1,14 @@
+import { ComponentPublicInstance } from 'vue';
+interface TabNavItem extends ComponentPublicInstance {
+    forPanel?: string;
+    isActive?: boolean;
+    selected?: boolean;
+}
+interface TabContext {
+    selectedIndex: number;
+    setTab: ((index: number) => void) | null;
+    navItems: TabNavItem[];
+}
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     vertical: {
         type: BooleanConstructor;
@@ -5,12 +16,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>, {
     handleKeyDown: (event: any) => void;
-    selectedTabEl: import('vue').ComputedRef<any>;
-    tabContext: {
-        selectedIndex: number;
-        setTab: any;
-        navItems: any[];
+    indicatorStyle: {
+        width: number;
+        height: string;
+        transform: string;
     };
+    tabContext: TabContext;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     vertical: {
         type: BooleanConstructor;

package/dist/vue/KvTabs2.js

@@ -1,60 +1,70 @@
-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 = {
+import { reactive as h, ref as x, computed as I, provide as T, watch as g, nextTick as y, onMounted as k, onBeforeUnmount as $ } from "vue";
+const E = {
   props: {
     vertical: {
       type: Boolean,
       default: !1
     }
   },
-  setup(k, { emit: u }) {
-    const t = b({
+  setup(p, { emit: b }) {
+    const t = h({
       selectedIndex: 0,
       setTab: null,
       navItems: []
-    }), l = I(null), f = m(() => {
-      var c;
+    }), i = x(null), r = I(() => {
+      var l;
       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);
+      return ((l = e[o]) == null ? void 0 : l.$el) ?? null;
+    }), n = h({
+      width: 3,
+      height: "0.25rem",
+      transform: ""
+    }), c = () => {
+      const e = r.value;
+      e && (p.vertical ? (n.width = 3, n.height = `${e.clientHeight}px`, n.transform = `translateY(${e.offsetTop}px)`) : (n.width = e.clientWidth, n.height = "0.25rem", n.transform = `translateX(${e.offsetLeft}px)`));
+    }, s = (e) => {
+      t.selectedIndex = e, r.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), b("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;
+    t.setTab = s, T("$KvTabContext", t);
+    const m = (e) => {
+      const { navItems: o, selectedIndex: l } = t, d = () => {
+        var v;
+        const a = o.find((w) => w.isActive);
+        a && ((v = a.$el) == null || v.focus());
+      }, f = o.length;
       if (e.key === "ArrowRight") {
         e.preventDefault();
-        const s = (c + 1) % r;
-        n(s), a();
+        const a = (l + 1) % f;
+        s(a), d();
       }
       if (e.key === "ArrowLeft") {
         e.preventDefault();
-        const s = (c - 1 + r) % r;
-        n(s), a();
+        const a = (l - 1 + f) % f;
+        s(a), d();
       }
-      e.key === "Home" && (e.preventDefault(), n(0), a()), e.key === "End" && (e.preventDefault(), n(r - 1), a());
+      e.key === "Home" && (e.preventDefault(), s(0), d()), e.key === "End" && (e.preventDefault(), s(f - 1), d());
+    }, u = () => {
+      var e;
+      (e = i.value) == null || e.disconnect(), r.value && (i.value = new ResizeObserver(() => {
+        c();
+      }), i.value.observe(r.value));
     };
-    return T(() => {
+    return g(r, () => {
+      u(), y(c);
+    }), k(() => {
       t.navItems.forEach((e, o) => {
-        e.selected && n(o);
-      }), l.value = new ResizeObserver(() => {
-        i();
-      }), l.value.observe(f.value);
-    }), h(() => {
-      l.value.disconnect();
+        e.selected && s(o);
+      }), c(), u(), window.addEventListener("resize", c);
+    }), $(() => {
+      var e;
+      (e = i.value) == null || e.disconnect(), window.removeEventListener("resize", c);
     }), {
-      handleKeyDown: p,
-      selectedTabEl: f,
+      handleKeyDown: m,
+      indicatorStyle: n,
       tabContext: t
     };
   }
 };
 export {
-  D as default
+  E as default
 };

package/dist/vue/index.d.ts

@@ -58,6 +58,7 @@ export { default as KvMaterialIcon } from './KvMaterialIcon.vue';
 export { default as KvPageContainer } from './KvPageContainer.vue';
 export { default as KvPagination } from './KvPagination.vue';
 export { default as KvPieChart } from './KvPieChart.vue';
+export { default as KvPieChartV2 } from './KvPieChartV2.vue';
 export { default as KvPill } from './KvPill.vue';
 export { default as KvPopper } from './KvPopper.vue';
 export { default as KvProgressBar } from './KvProgressBar.vue';