@kiva/kv-components 4.8.5 → 5.0.0

package/dist/vue/KvCommentsHeartButton.js

@@ -0,0 +1,62 @@
+import { toRefs as c, computed as s, resolveComponent as r, openBlock as m, createElementBlock as f, createVNode as p, normalizeClass as u } from "vue";
+import { mdiHeart as d, mdiHeartOutline as k } from "@mdi/js";
+import v from "./KvMaterialIcon.js";
+/* empty css                       */
+import _ from "../_virtual/_plugin-vue_export-helper.js";
+const w = {
+  name: "KvCommentsHeartButton",
+  components: {
+    KvMaterialIcon: v
+  },
+  props: {
+    /**
+     * Use if small icon is needed
+     */
+    isSmall: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Use if icon is liked
+     */
+    isLiked: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "click"
+  ],
+  setup(a) {
+    const {
+      isSmall: e,
+      isLiked: t
+    } = c(a), o = s(() => t.value ? d : k), l = s(() => {
+      let n = e.value ? "tw-w-2.5 tw-h-2.5" : "tw-w-3 tw-h-3";
+      return n += t.value ? " filled" : "", n;
+    });
+    return {
+      icon: o,
+      classState: l
+    };
+  }
+};
+function B(a, e, t, o, l, n) {
+  const i = r("kv-material-icon");
+  return m(), f("button", {
+    "aria-label": "Like",
+    class: "tw-flex tw-flex-col tw-justify-center",
+    onClick: e[0] || (e[0] = (C) => {
+      a.$emit("click", !t.isLiked);
+    })
+  }, [
+    p(i, {
+      icon: o.icon,
+      class: u(o.classState)
+    }, null, 8, ["icon", "class"])
+  ]);
+}
+const y = /* @__PURE__ */ _(w, [["render", B], ["__scopeId", "data-v-50e5ceb0"]]);
+export {
+  y as default
+};

package/dist/vue/KvCommentsList.js

@@ -0,0 +1,65 @@
+import l from "./KvCommentsListItem.js";
+import { resolveComponent as d, openBlock as s, createElementBlock as i, Fragment as u, renderList as c, createBlock as p } from "vue";
+import _ from "../_virtual/_plugin-vue_export-helper.js";
+const o = "add-reaction", f = {
+  name: "KvCommentsList",
+  components: { KvCommentsListItem: l },
+  props: {
+    /**
+     * The full URL for the user image
+     */
+    userImageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The name to display for the user
+     */
+    userDisplayName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The ID for the user
+     */
+    userPublicId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Activity comments
+     */
+    comments: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [o],
+  setup(a, { emit: r }) {
+    return {
+      handleReaction: (n) => {
+        r(o, n);
+      }
+    };
+  }
+};
+function y(a, r, e, n, g, I) {
+  const m = d("KvCommentsListItem");
+  return s(), i("div", null, [
+    (s(!0), i(u, null, c(e.comments, (t) => (s(), p(m, {
+      id: t.id,
+      key: t.id,
+      comment: t,
+      "user-image-url": e.userImageUrl,
+      "user-display-name": e.userDisplayName,
+      "user-public-id": e.userPublicId,
+      "is-liked": t.is_liked,
+      class: "tw-mb-2 tw-not-prose",
+      onAddReaction: n.handleReaction
+    }, null, 8, ["id", "comment", "user-image-url", "user-display-name", "user-public-id", "is-liked", "onAddReaction"]))), 128))
+  ]);
+}
+const L = /* @__PURE__ */ _(f, [["render", y]]);
+export {
+  L as default
+};

package/dist/vue/KvCommentsListItem.js

@@ -0,0 +1,221 @@
+import { mdiChevronDown as P } from "@mdi/js";
+import { toRefs as B, ref as y, computed as i, inject as j, onMounted as S, resolveComponent as v, openBlock as r, createElementBlock as m, createElementVNode as f, createVNode as k, toDisplayString as p, createCommentVNode as c, createBlock as U, normalizeClass as H, createTextVNode as Y, Fragment as z, renderList as F, nextTick as q } from "vue";
+import G from "./KvMaterialIcon.js";
+import J from "./KvCommentsReplyButton.js";
+import Q from "./KvCommentsHeartButton.js";
+import W from "./KvCommentsAdd.js";
+import X from "./KvUserAvatar.js";
+import Z from "../_virtual/_plugin-vue_export-helper.js";
+const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
+  name: "KvCommentsListItem",
+  components: {
+    KvCommentsReplyButton: J,
+    KvCommentsHeartButton: Q,
+    KvCommentsAdd: W,
+    KvUserAvatar: X,
+    KvMaterialIcon: G
+  },
+  props: {
+    /**
+     * The full URL for the user image
+     */
+    userImageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The name to display for the user
+     */
+    userDisplayName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The ID for the user
+     */
+    userPublicId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Activity comment
+     */
+    comment: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * The nest level of the comment
+     */
+    nestLevel: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: [
+    N
+  ],
+  setup(g, { emit: s }) {
+    const {
+      comment: e,
+      userPublicId: n
+    } = B(g), u = y(!1), h = y(null), a = y(), _ = y(!1), b = i(() => {
+      var t;
+      return ((t = e == null ? void 0 : e.value) == null ? void 0 : t.text) ?? "";
+    }), w = i(() => {
+      var t;
+      return ((t = e == null ? void 0 : e.value) == null ? void 0 : t.publicLenderId) ?? "";
+    }), C = i(() => {
+      var t, l;
+      return ((l = (t = a == null ? void 0 : a.value) == null ? void 0 : t.image) == null ? void 0 : l.url) ?? "";
+    }), I = i(() => {
+      var t;
+      return ((t = a == null ? void 0 : a.value) == null ? void 0 : t.name) ?? "";
+    }), o = i(() => {
+      var t, l;
+      return ((l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.comment) ?? null;
+    }), E = i(() => {
+      var t, l;
+      return ((l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.like) ?? [];
+    }), R = i(() => E.value.find((t) => t.publicLenderId === n.value)), O = i(() => R.value !== void 0), T = () => {
+      u.value = !u.value, q(() => {
+        u.value && h.value.$refs.input.focus();
+      });
+    }, x = (t, l) => {
+      var L;
+      const d = {
+        reaction: t,
+        id: ((L = e == null ? void 0 : e.value) == null ? void 0 : L.id) ?? null,
+        isChild: !0,
+        value: l
+      };
+      s(N, d);
+    }, D = () => {
+      u.value = !1;
+    }, A = i(() => {
+      var t, l, d;
+      return ((d = (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.like) == null ? void 0 : d.length) ?? 0;
+    }), M = i(() => {
+      var t, l, d;
+      return ((d = (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.comment) == null ? void 0 : d.length) ?? 0;
+    }), V = () => {
+      _.value = !_.value;
+    }, K = j("fetchLenderInfo");
+    return S(async () => {
+      if (w.value) {
+        const t = await K(w.value);
+        a.value = t;
+      }
+    }), {
+      hideInput: D,
+      showInput: u,
+      commentsAddRef: h,
+      replyClick: T,
+      addReaction: x,
+      REPLY_COMMENT_EVENT: $,
+      LIKE_COMMENT_EVENT: ee,
+      ADD_REACTION_EVENT: N,
+      commentText: b,
+      authorImage: C,
+      authorName: I,
+      childComments: o,
+      isLiked: O,
+      numberOfLikes: A,
+      numberOfReplies: M,
+      repliesOpened: _,
+      toggleReplies: V,
+      mdiChevronDown: P
+    };
+  }
+}, ne = { class: "tw-flex tw-items-center tw-gap-1" }, le = {
+  key: 0,
+  class: "data-hj-suppress tw-font-medium"
+}, se = { class: "tw-flex tw-items-center tw-gap-x-1" }, oe = { class: "tw-flex tw-items-center tw-gap-0.5" }, ie = {
+  key: 0,
+  "data-testid": "like-count",
+  class: "tw-font-medium"
+}, re = {
+  key: 0,
+  class: "tw-w-full"
+}, ae = {
+  key: 1,
+  class: "tw-my-1"
+}, me = { key: 1 };
+function de(g, s, e, n, u, h) {
+  const a = v("kv-user-avatar"), _ = v("kv-comments-heart-button"), b = v("kv-comments-reply-button"), w = v("kv-comments-add"), C = v("kv-material-icon"), I = v("kv-comments-list-item", !0);
+  return r(), m("div", null, [
+    f("div", null, [
+      f("div", ne, [
+        k(a, {
+          "lender-name": n.authorName,
+          "lender-image-url": n.authorImage,
+          "is-small": ""
+        }, null, 8, ["lender-name", "lender-image-url"]),
+        n.authorName ? (r(), m("p", le, p(n.authorName), 1)) : c("", !0)
+      ]),
+      f("p", null, p(n.commentText), 1)
+    ]),
+    f("div", se, [
+      f("div", oe, [
+        k(_, {
+          "is-small": !0,
+          "is-liked": n.isLiked,
+          disabled: !e.userPublicId,
+          onClick: s[0] || (s[0] = (o) => n.addReaction(n.LIKE_COMMENT_EVENT, o))
+        }, null, 8, ["is-liked", "disabled"]),
+        n.numberOfLikes ? (r(), m("p", ie, p(n.numberOfLikes), 1)) : c("", !0)
+      ]),
+      e.userPublicId && e.nestLevel === 0 ? (r(), U(b, {
+        key: 0,
+        onClick: n.replyClick
+      }, null, 8, ["onClick"])) : c("", !0)
+    ]),
+    n.showInput ? (r(), m("div", re, [
+      k(w, {
+        ref: "commentsAddRef",
+        "user-image-url": e.userImageUrl,
+        "user-display-name": e.userDisplayName,
+        "is-reply": !0,
+        class: "tw-ml-3",
+        onAddComment: s[1] || (s[1] = (o) => n.addReaction(n.REPLY_COMMENT_EVENT, o)),
+        onHideInput: n.hideInput
+      }, null, 8, ["user-image-url", "user-display-name", "onHideInput"])
+    ])) : c("", !0),
+    n.childComments ? (r(), m("div", ae, [
+      n.numberOfReplies ? (r(), m("button", {
+        key: 0,
+        class: "tw-ml-3 tw-text-action tw-font-medium tw-mb-1 tw-flex tw-items-center",
+        onClick: s[2] || (s[2] = (...o) => n.toggleReplies && n.toggleReplies(...o))
+      }, [
+        k(C, {
+          class: H(["tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease", { "tw-rotate-180": n.repliesOpened }]),
+          icon: n.mdiChevronDown
+        }, null, 8, ["class", "icon"]),
+        Y(" " + p(n.numberOfReplies) + " " + p(n.numberOfReplies > 1 ? "replies" : "reply"), 1)
+      ])) : c("", !0),
+      n.repliesOpened ? (r(), m("div", me, [
+        (r(!0), m(z, null, F(n.childComments, (o) => (r(), m("div", {
+          key: o.id,
+          class: "tw-ml-3"
+        }, [
+          k(I, {
+            "user-image-url": e.userImageUrl,
+            "user-display-name": e.userDisplayName,
+            "user-public-id": e.userPublicId,
+            comment: o,
+            "nest-level": e.nestLevel + 1,
+            onAddReaction: s[3] || (s[3] = (E) => {
+              g.$emit(n.ADD_REACTION_EVENT, E);
+            })
+          }, null, 8, ["user-image-url", "user-display-name", "user-public-id", "comment", "nest-level"])
+        ]))), 128))
+      ])) : c("", !0)
+    ])) : c("", !0)
+  ]);
+}
+const ye = /* @__PURE__ */ Z(te, [["render", de]]);
+export {
+  ee as LIKE_COMMENT_EVENT,
+  $ as REPLY_COMMENT_EVENT,
+  ye as default
+};

package/dist/vue/KvCommentsReplyButton.css

@@ -0,0 +1 @@
+[data-v-34b54f14] span{min-height:0}[data-v-34b54f14] span>span{display:flex;align-items:center;padding-top:0;padding-bottom:0;padding-left:.25rem;padding-right:.25rem}[data-v-34b54f14] svg{margin-left:.25rem;margin-right:.25rem}

package/dist/vue/KvCommentsReplyButton.js

@@ -0,0 +1,42 @@
+import C from "./KvButton.js";
+import { resolveComponent as r, openBlock as l, createBlock as p, withCtx as s, createElementVNode as o } from "vue";
+/* empty css                       */
+import i from "../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  name: "KvCommentsReplyButton",
+  components: {
+    KvButton: C
+  },
+  emits: [
+    "click"
+  ]
+};
+function a(e, t, c, f, v, u) {
+  const n = r("kv-button");
+  return l(), p(n, {
+    variant: "ghost",
+    "aria-label": "Reply",
+    onClick: t[0] || (t[0] = (d) => e.$emit("click"))
+  }, {
+    default: s(() => t[1] || (t[1] = [
+      o("svg", {
+        width: "14",
+        height: "11",
+        viewBox: "0 0 14 11",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, [
+        o("path", {
+          d: "M2.87502 5.12499L4.91669 7.16666C5.06946 7.31943 5.14585 7.49652 5.14585 7.69791C5.14585 7.8993 5.06946 8.0797 4.91669 8.23911C4.76391 8.38525 4.58683 8.45832 4.38544 8.45832C4.18405 8.45832 4.00696 8.38193 3.85419 8.22916L0.520854 4.89582C0.368076 4.7481 0.291687 4.57575 0.291687 4.37878C0.291687 4.18181 0.368076 4.00693 0.520854 3.85416L3.85419 0.520823C4.00696 0.368045 4.18521 0.291656 4.38892 0.291656C4.59261 0.291656 4.76853 0.368045 4.91669 0.520823C5.06946 0.668976 5.14585 0.8449 5.14585 1.04859C5.14585 1.2523 5.06946 1.43055 4.91669 1.58332L2.87502 3.62499H10C11.1067 3.62499 12.05 4.01499 12.83 4.79499C13.61 5.57499 14 6.51832 14 7.62499V9.87499C14 10.0875 13.9286 10.2656 13.7857 10.4094C13.6427 10.5531 13.4657 10.625 13.2544 10.625C13.0432 10.625 12.8646 10.5531 12.7188 10.4094C12.5729 10.2656 12.5 10.0875 12.5 9.87499V7.62499C12.5 6.93055 12.257 6.34027 11.7709 5.85416C11.2847 5.36805 10.6945 5.12499 10 5.12499H2.87502Z",
+          fill: "#1C1B1F"
+        })
+      ], -1),
+      o("span", null, " reply ", -1)
+    ])),
+    _: 1
+  });
+}
+const $ = /* @__PURE__ */ i(m, [["render", a], ["__scopeId", "data-v-34b54f14"]]);
+export {
+  $ as default
+};

package/dist/vue/KvContentfulImg.js

@@ -0,0 +1,196 @@
+import { toRefs as _, computed as k, openBlock as h, createElementBlock as c, createElementVNode as r, Fragment as g, renderList as y, createCommentVNode as b, createTextVNode as S, toDisplayString as v } from "vue";
+import q from "../_virtual/_plugin-vue_export-helper.js";
+const Q = {
+  props: {
+    /**
+     * Large, uncompressed image url that you get back from contentful.
+    * */
+    contentfulSrc: {
+      type: String,
+      required: !0
+    },
+    /**
+     * If the browser can't support webp we fallback to this image format.
+     * `jpg, png, webp`
+    * */
+    fallbackFormat: {
+      type: String,
+      default: "jpg",
+      validator(e) {
+        return ["jpg", "png", "gif"].indexOf(e) !== -1;
+      }
+    },
+    /**
+     * 1x width of the image. Width or height must be defined. Ideally both.
+    * */
+    width: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * 1x height of the image. Width or height must be defined. Ideally both.
+    * */
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * Alt text for the image
+    * */
+    alt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Loading hint to the browser - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+     * `lazy, eager`
+    * */
+    loading: {
+      type: String,
+      default: null,
+      validator(e) {
+        return ["lazy", "eager"].indexOf(e) !== -1;
+      }
+    },
+    /**
+     * Focus area when modifying images. Focus area has no effect on the default 'scale' fit.
+     * https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-focus-area
+    * */
+    focus: {
+      type: String,
+      default: "center",
+      validator(e) {
+        return ["center", "top", "right", "left", "bottom", "top_right", "top_left", "bottom_right", "bottom_left", "face", "faces"].indexOf(e) !== -1;
+      }
+    },
+    /**
+     * Focus area when modifying images. Focus area has no effect on the default 'scale' fit.
+     * https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/change-the-resizing-behavior
+    * */
+    fit: {
+      type: String,
+      default: "scale",
+      validator(e) {
+        return ["pad", "fill", "scale", "crop", "thumb"].indexOf(e) !== -1;
+      }
+    },
+    /**
+     * Sources sizes.
+     * Array of objects for different image sources.
+     * Sample object:
+     * 		{
+    			width: 1440,
+    			height: 620,
+    			media: 'min-width: 1025px',
+    			url: '//some-protocol-relative-contentful-url'
+    		}
+    * */
+    sourceSizes: {
+      type: Array,
+      required: !1,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const {
+      alt: u,
+      contentfulSrc: t,
+      width: i,
+      height: x
+    } = _(e), m = (n = null, o = 1) => {
+      let w = n && n.url ? `${n.url}?` : `${t.value}?`, f = n ? n.width : i.value, a = n ? n.height : x.value, s;
+      return f >= 2e3 && (s = f / 1999, f = 1999, a = Math.round(a / s)), a >= 2e3 && (s = a / 1999, a = 1999, f = Math.round(f / s)), f && (w += `w=${f * o}`), f && a && (w += "&"), a && (w += `h=${a * o}`), w;
+    }, l = (n, o) => o === "2x" ? 65 : n && parseInt(n, 10) < 200 ? 95 : 80, d = k(() => u.value && u.value.charAt(0) === "^" ? u.value.slice(1).trim() : "");
+    return {
+      buildUrl: m,
+      caption: d,
+      setQuality: l
+    };
+  }
+}, U = {
+  key: 0,
+  class: "tw-inline-block tw-not-prose"
+}, F = {
+  class: "tw-h-full tw-w-full",
+  style: { "object-fit": "inherit" }
+}, z = ["media", "width", "height", "srcset"], j = ["media", "width", "height", "srcset"], N = ["src", "alt", "loading"], O = ["srcset"], B = ["srcset", "src", "width", "height", "alt", "loading"], C = {
+  key: 0,
+  class: "tw-text-h4 tw-mt-2"
+};
+function M(e, u, t, i, x, m) {
+  return (t.width || t.height) && t.contentfulSrc ? (h(), c("figure", U, [
+    r("picture", F, [
+      t.sourceSizes.length > 0 ? (h(), c(g, { key: 0 }, [
+        (h(!0), c(g, null, y(t.sourceSizes, (l, d) => (h(), c("source", {
+          key: "webp-image" + d,
+          media: "(" + l.media + ")",
+          type: "image/webp",
+          width: l.width ? l.width : null,
+          height: l.height ? l.height : null,
+          srcset: `
+						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "2x")} 2x,
+						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "1x")} 1x`
+        }, null, 8, z))), 128)),
+        (h(!0), c(g, null, y(t.sourceSizes, (l, d) => (h(), c("source", {
+          key: "fallback-image" + d,
+          media: "(" + l.media + ")",
+          width: l.width ? l.width : null,
+          height: l.height ? l.height : null,
+          srcset: `
+						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "2x")} 2x,
+						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "1x")} 1x`
+        }, null, 8, j))), 128)),
+        r("img", {
+          class: "tw-max-w-full tw-max-h-full",
+          style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
+          src: `${i.buildUrl(t.width, t.height)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
+          alt: i.caption || t.alt,
+          loading: t.loading
+        }, null, 8, N)
+      ], 64)) : b("", !0),
+      t.sourceSizes.length === 0 ? (h(), c(g, { key: 1 }, [
+        r("source", {
+          type: "image/webp",
+          srcset: `
+						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "2x")} 2x,
+						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "1x")} 1x`
+        }, null, 8, O),
+        r("img", {
+          class: "tw-max-w-full tw-max-h-full",
+          style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
+          srcset: `
+						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "2x")} 2x,
+						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")} 1x`,
+          src: `${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
+          width: t.width ? t.width : null,
+          height: t.height ? t.height : null,
+          alt: i.caption || t.alt,
+          loading: t.loading
+        }, null, 8, B)
+      ], 64)) : b("", !0)
+    ]),
+    i.caption ? (h(), c("figcaption", C, [
+      u[0] || (u[0] = r("span", {
+        class: "tw-inline-flex tw-align-text-top",
+        "aria-hidden": "true",
+        role: "img"
+      }, [
+        r("svg", {
+          class: "tw-h-2 tw-w-2.5",
+          viewBox: "0 0 20 20",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, [
+          r("path", {
+            d: "m3.12088 18.7441c12.86212 0 15.87912-14.52631 15.87912-16.99996h-1.1209c-12.85272 0-15.8791 14.51376-15.8791 16.99996z",
+            fill: "currentColor"
+          })
+        ])
+      ], -1)),
+      S(" " + v(i.caption), 1)
+    ])) : b("", !0)
+  ])) : b("", !0);
+}
+const E = /* @__PURE__ */ q(Q, [["render", M]]);
+export {
+  E as default
+};

package/dist/vue/KvCountdownTimer.js

@@ -0,0 +1,31 @@
+import { toRefs as u, ref as l, onMounted as c, onBeforeUnmount as f, openBlock as m, createElementBlock as v, toDisplayString as s, createCommentVNode as d } from "vue";
+import { isBefore as p, intervalToDuration as _, differenceInHours as L } from "date-fns";
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const D = {
+  props: {
+    deadline: {
+      type: Date,
+      required: !0
+    }
+  },
+  setup(i) {
+    const { deadline: n } = u(i), t = l(null), e = l(null), o = l(null), r = () => {
+      const a = /* @__PURE__ */ new Date();
+      p(a, n.value) ? (e.value = _({ start: a, end: n.value }), o.value = L(n.value, a)) : (e.value = { minutes: 0, seconds: 0 }, o.value = 0);
+    };
+    return c(() => {
+      r(), t.value = setInterval(() => {
+        r(), e.value || clearInterval(t.value);
+      }, 1e3);
+    }), f(() => {
+      t.value && clearInterval(t.value);
+    }), { timeLeft: e, remainingHours: o };
+  }
+}, I = { key: 0 };
+function g(i, n, t, e, o, r) {
+  return e.timeLeft ? (m(), v("span", I, s(e.remainingHours) + "h " + s(e.timeLeft.minutes) + "m " + s(e.timeLeft.seconds) + "s ", 1)) : d("", !0);
+}
+const x = /* @__PURE__ */ B(D, [["render", g]]);
+export {
+  x as default
+};

package/dist/vue/KvExpandable.js

@@ -0,0 +1,65 @@
+import { toRefs as s, openBlock as u, createBlock as i, Transition as f, withCtx as d, renderSlot as v } from "vue";
+import { expand as c, collapse as y } from "../utils/expander.js";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const _ = {
+  props: {
+    property: {
+      type: String,
+      default: "height"
+    },
+    delay: {
+      type: Number,
+      default: 500
+    },
+    easing: {
+      type: String,
+      default: "ease"
+    },
+    skipEnter: {
+      type: Boolean,
+      default: !1
+    },
+    skipLeave: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(r) {
+    const {
+      property: a,
+      delay: n,
+      easing: e,
+      skipEnter: l,
+      skipLeave: p
+    } = s(r);
+    return {
+      enter: (o, t) => l.value ? t() : (c(o, {
+        property: a.value,
+        delay: n.value,
+        easing: e.value,
+        done: t
+      }), !0),
+      leave: (o, t) => p.value ? t() : (y(o, {
+        property: a.value,
+        delay: n.value,
+        easing: e.value,
+        done: t
+      }), !0)
+    };
+  }
+};
+function g(r, a, n, e, l, p) {
+  return u(), i(f, {
+    onEnter: e.enter,
+    onLeave: e.leave
+  }, {
+    default: d(() => [
+      v(r.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["onEnter", "onLeave"]);
+}
+const L = /* @__PURE__ */ m(_, [["render", g]]);
+export {
+  L as default
+};