@kiva/kv-components 6.26.0 → 6.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/vue/KvAtbModal.css +1 -1
  2. package/dist/vue/KvAtbModal.js +81 -78
  3. package/dist/vue/KvSideSheet.js +137 -129
  4. package/package.json +2 -2
package/dist/vue/KvAtbModal.css CHANGED
@@ -1 +1 @@
1
- @media (min-width: 45.875rem){.cart-modal[data-v-9be640c2] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}
1
+ @media (min-width: 45.875rem){.cart-modal[data-v-2070d628] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}
package/dist/vue/KvAtbModal.js CHANGED
@@ -1,13 +1,13 @@
1
- import { toRefs as N, ref as j, computed as C, onMounted as V, onUnmounted as F, resolveComponent as E, openBlock as u, createBlock as O, normalizeStyle as z, withCtx as B, createElementBlock as m, createVNode as D, createElementVNode as e, normalizeClass as R, toDisplayString as T, createCommentVNode as k } from "vue";
2
- import { throttle as I } from "../utils/throttle.js";
3
- import U from "./KvCartModal.js";
4
- import G from "./KvCartPill.js";
1
+ import { toRefs as N, ref as E, computed as C, watch as F, onMounted as O, onUnmounted as z, resolveComponent as B, openBlock as d, createBlock as D, normalizeStyle as R, withCtx as S, createElementBlock as h, createVNode as T, createElementVNode as e, normalizeClass as I, toDisplayString as U, createCommentVNode as y } from "vue";
2
+ import { throttle as G } from "../utils/throttle.js";
3
+ import W from "./KvCartModal.js";
4
+ import Y from "./KvCartPill.js";
5
5
  import "./KvAtbModal.css";
6
- import W from "../_virtual/_plugin-vue_export-helper.js";
7
- const Y = {
6
+ import J from "../_virtual/_plugin-vue_export-helper.js";
7
+ const Q = {
8
8
  components: {
9
- KvCartModal: U,
10
- KvCartPill: G
9
+ KvCartModal: W,
10
+ KvCartPill: Y
11
11
  },
12
12
  props: {
13
13
  /**
@@ -101,70 +101,73 @@ const Y = {
101
101
  "close-redirect"
102
102
  // close and redirect to another page on parent component
103
103
  ],
104
- setup(g, { emit: i }) {
104
+ setup(b, { emit: i }) {
105
105
  const {
106
- addedLoan: n,
107
- userData: l,
108
- hasEverLoggedIn: M,
109
- myKivaExperimentEnabled: y,
110
- oneLoanAwayCategory: p,
111
- oneLoanAwayFilteredUrl: d,
112
- milestonesProgress: S
113
- } = N(g), w = j(0), v = j(0), b = C(() => {
106
+ modalVisible: a,
107
+ addedLoan: l,
108
+ userData: m,
109
+ hasEverLoggedIn: A,
110
+ myKivaExperimentEnabled: p,
111
+ oneLoanAwayCategory: w,
112
+ oneLoanAwayFilteredUrl: v,
113
+ milestonesProgress: q
114
+ } = N(b), f = E(0), k = E(0), Z = C(() => {
114
115
  var t;
115
- return ((t = n.value) == null ? void 0 : t.basketSize) ?? 0;
116
- }), q = C(() => {
117
- const t = `${window.innerWidth - v.value - 200}`, o = `${w.value}`;
116
+ return ((t = l.value) == null ? void 0 : t.basketSize) ?? 0;
117
+ }), H = C(() => {
118
+ const t = `${window.innerWidth - k.value - 200}`, o = `${f.value}`;
118
119
  return { right: t, top: o };
119
- }), c = C(() => {
120
+ }), u = C(() => {
120
121
  var t;
121
- return (t = n.value) == null ? void 0 : t.name;
122
- }), A = C(() => {
122
+ return (t = l.value) == null ? void 0 : t.name;
123
+ }), _ = C(() => {
123
124
  var t;
124
- return !((t = l.value) != null && t.my);
125
- }), f = C(() => {
126
- var t, o, a;
127
- return y.value && (A.value && !M.value || !A.value && !((a = (o = (t = l.value) == null ? void 0 : t.my) == null ? void 0 : o.loans) != null && a.totalCount)) && b.value === 1;
128
- }), Z = C(() => p.value && d.value && !f.value), _ = C(() => Object.values(S.value).reduce((t, o) => t + (o > 0 ? o : 0), 0)), H = C(() => {
129
- var o, a, s;
130
- if (f.value) {
131
- const r = `Supporting ${c.value} helps`;
132
- return ((o = n.value) == null ? void 0 : o.borrowerCount) > 1 || (a = n.value) != null && a.themes.includes("Social Enterprise") ? `${r} them invest in themselves.` : ((s = n.value) == null ? void 0 : s.gender) === "male" ? `${r} him invest in himself.` : `${r} her invest in herself.`;
125
+ return !((t = m.value) != null && t.my);
126
+ }), g = C(() => {
127
+ var t, o, r;
128
+ return p.value && (_.value && !A.value || !_.value && !((r = (o = (t = m.value) == null ? void 0 : t.my) == null ? void 0 : o.loans) != null && r.totalCount)) && Z.value === 1;
129
+ }), x = C(() => w.value && v.value && !g.value), j = C(() => Object.values(q.value).reduce((t, o) => t + (o > 0 ? o : 0), 0)), P = C(() => {
130
+ var o, r, s;
131
+ if (g.value) {
132
+ const n = `Supporting ${u.value} helps`;
133
+ return ((o = l.value) == null ? void 0 : o.borrowerCount) > 1 || (r = l.value) != null && r.themes.includes("Social Enterprise") ? `${n} them invest in themselves.` : ((s = l.value) == null ? void 0 : s.gender) === "male" ? `${n} him invest in himself.` : `${n} her invest in herself.`;
133
134
  }
134
- if (Z.value)
135
+ if (x.value)
135
136
  return "You’re close to your next achievement!";
136
- const t = _.value > 1 ? `${_.value} achievements` : "your next achievement";
137
- return c.value ? `Supporting ${c.value} will reach ${t}!` : "Supporting this loan reaches an achievement!";
138
- }), P = (t) => {
139
- t === "view-basket" ? i("close-redirect", { type: t, path: "/basket" }) : t === "support-another" && d.value && i("close-redirect", { type: t, path: d.value });
137
+ const t = j.value > 1 ? `${j.value} achievements` : "your next achievement";
138
+ return u.value ? `Supporting ${u.value} will reach ${t}!` : "Supporting this loan reaches an achievement!";
139
+ }), V = (t) => {
140
+ t === "view-basket" ? i("close-redirect", { type: t, path: "/basket" }) : t === "support-another" && v.value && i("close-redirect", { type: t, path: v.value });
140
141
  }, K = (t) => {
141
142
  const { type: o } = t;
142
- o && P(o), i("reset-modal");
143
- }, x = () => {
143
+ o && V(o), i("reset-modal");
144
+ }, M = () => {
144
145
  const t = document.getElementsByTagName("header")[0], o = (t == null ? void 0 : t.getBoundingClientRect()) ?? null;
145
- let a = [...document.querySelectorAll('[data-testid="header-basket"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight);
146
- s || (a = [...document.querySelectorAll('[data-testid="header-about"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight));
147
- const r = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
148
- r && (r == null ? void 0 : r.right) !== v.value && (v.value = r == null ? void 0 : r.right), o && (o == null ? void 0 : o.bottom) !== w.value && (w.value = o == null ? void 0 : o.bottom);
149
- }, h = I(x, 100);
150
- return V(() => {
151
- x(), window.addEventListener("scroll", h), window.addEventListener("resize", h);
152
- }), F(() => {
153
- window.removeEventListener("scroll", h), window.removeEventListener("resize", h);
146
+ let r = [...document.querySelectorAll('[data-testid="header-basket"]')], s = r.find((L) => L == null ? void 0 : L.clientHeight);
147
+ s || (r = [...document.querySelectorAll('[data-testid="header-about"]')], s = r.find((L) => L == null ? void 0 : L.clientHeight));
148
+ const n = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
149
+ n && (n == null ? void 0 : n.right) !== k.value && (k.value = n == null ? void 0 : n.right), o && (o == null ? void 0 : o.bottom) !== f.value && (f.value = o == null ? void 0 : o.bottom);
150
+ }, c = G(M, 50);
151
+ return F(a, () => {
152
+ a.value && M();
153
+ }, { immediate: !0 }), O(() => {
154
+ M(), window.addEventListener("scroll", c), window.addEventListener("resize", c);
155
+ }), z(() => {
156
+ window.removeEventListener("scroll", c), window.removeEventListener("resize", c);
154
157
  }), {
155
- modalPosition: q,
156
- basketCount: b,
157
- isFirstLoan: f,
158
- borrowerName: c,
159
- showOneAway: Z,
160
- pillMsg: H,
158
+ modalPosition: H,
159
+ basketCount: Z,
160
+ isFirstLoan: g,
161
+ borrowerName: u,
162
+ showOneAway: x,
163
+ pillMsg: P,
161
164
  closeCartModal: K
162
165
  };
163
166
  }
164
- }, J = {
167
+ }, X = {
165
168
  key: 0,
166
169
  class: "tw-w-full tw-mx-2.5 tw-border-t tw-border-tertiary tw-py-2"
167
- }, Q = {
170
+ }, $ = {
168
171
  key: 0,
169
172
  class: "tw-min-w-3",
170
173
  width: "40",
@@ -172,7 +175,7 @@ const Y = {
172
175
  viewBox: "0 0 40 40",
173
176
  fill: "none",
174
177
  xmlns: "http://www.w3.org/2000/svg"
175
- }, X = {
178
+ }, e1 = {
176
179
  key: 1,
177
180
  class: "tw-min-w-3",
178
181
  width: "18",
@@ -180,42 +183,42 @@ const Y = {
180
183
  viewBox: "0 0 18 21",
181
184
  fill: "none",
182
185
  xmlns: "http://www.w3.org/2000/svg"
183
- }, $ = {
186
+ }, t1 = {
184
187
  key: 2,
185
188
  class: "tw-text-h5"
186
189
  };
187
- function e1(g, i, n, l, M, y) {
188
- const p = E("KvCartPill"), d = E("KvCartModal");
189
- return n.modalVisible ? (u(), O(d, {
190
+ function o1(b, i, a, l, m, A) {
191
+ const p = B("KvCartPill"), w = B("KvCartModal");
192
+ return a.modalVisible ? (d(), D(w, {
190
193
  key: 0,
191
- style: z({
194
+ style: R({
192
195
  "--modal-right": `${l.modalPosition.right}px`,
193
196
  "--modal-top": `${l.modalPosition.top}px`
194
197
  }),
195
198
  class: "cart-modal !tw-top-0",
196
- visible: n.modalVisible,
197
- "photo-path": n.photoPath,
199
+ visible: a.modalVisible,
200
+ "photo-path": a.photoPath,
198
201
  "basket-count": l.basketCount,
199
- "category-name": n.oneLoanAwayCategory,
202
+ "category-name": a.oneLoanAwayCategory,
200
203
  onCartModalClosed: l.closeCartModal
201
204
  }, {
202
- content: B(() => [
203
- n.showModalContent || l.isFirstLoan ? (u(), m("div", J, [
204
- D(p, {
205
+ content: S(() => [
206
+ a.showModalContent || l.isFirstLoan ? (d(), h("div", X, [
207
+ T(p, {
205
208
  class: "!tw-w-full tw-justify-center",
206
209
  "borrower-name": l.borrowerName,
207
- "milestones-number": n.milestonesNumber,
210
+ "milestones-number": a.milestonesNumber,
208
211
  "is-close-next-milestone": l.showOneAway,
209
212
  "custom-message": l.pillMsg
210
213
  }, {
211
- icon: B(() => [
214
+ icon: S(() => [
212
215
  e("div", {
213
- class: R({
216
+ class: I({
214
217
  // eslint-disable-next-line max-len
215
218
  "tw-flex tw-items-center tw-justify-center tw-bg-gray-100 tw-p-0.5 tw-rounded tw-whitespace-nowrap": l.showOneAway
216
219
  })
217
220
  }, [
218
- l.isFirstLoan ? (u(), m("svg", Q, i[0] || (i[0] = [
221
+ l.isFirstLoan ? (d(), h("svg", $, i[0] || (i[0] = [
219
222
  e("path", {
220
223
  d: "M36.2676 17.5025C34.6519 30.5945 24.9878 35.8229 20.1847 38.0889C20.1496 38.1055 20.1099 38.1043 20.075 38.0873C8.60201 32.516 4.24979 22.9018 3.62911 17.5025C3.34064 14.6558 3.18678 8.5719 3.14406 5.7867C3.14315 5.72754 3.1847 5.67723 3.24194 5.66227C11.6312 3.46948 14.2758 3.52186 20.0937 1.86776C20.1175 1.86099 20.1437 1.86113 20.1673 1.86833C26.6496 3.83905 31.8224 4.23356 36.8613 5.66108C36.9176 5.67702 36.9559 5.72959 36.9546 5.78805C36.8227 11.47 36.4423 15.9605 36.2676 17.5025Z",
221
224
  fill: "#2AA967",
@@ -371,23 +374,23 @@ function e1(g, i, n, l, M, y) {
371
374
  })
372
375
  ])
373
376
  ], -1)
374
- ]))) : (u(), m("svg", X, i[1] || (i[1] = [
377
+ ]))) : (d(), h("svg", e1, i[1] || (i[1] = [
375
378
  e("path", {
376
379
  d: "M9.0001 19L5.6251 20.125C5.50843 20.1583 5.4001 20.1833 5.3001 20.2C5.2001 20.2167 5.1001 20.225 5.0001 20.225C4.46676 20.225 4.0001 20.0375 3.6001 19.6625C3.2001 19.2875 3.0001 18.8083 3.0001 18.225V12.775L0.400098 8.55C0.300098 8.38333 0.225098 8.2125 0.175098 8.0375C0.125098 7.8625 0.100098 7.68333 0.100098 7.5C0.100098 7.31667 0.125098 7.1375 0.175098 6.9625C0.225098 6.7875 0.300098 6.61667 0.400098 6.45L3.8001 0.95C3.98343 0.65 4.2251 0.416667 4.5251 0.25C4.8251 0.0833333 5.1501 0 5.5001 0H12.5001C12.8501 0 13.1751 0.0833333 13.4751 0.25C13.7751 0.416667 14.0168 0.65 14.2001 0.95L17.6001 6.45C17.7001 6.61667 17.7751 6.7875 17.8251 6.9625C17.8751 7.1375 17.9001 7.31667 17.9001 7.5C17.9001 7.68333 17.8751 7.8625 17.8251 8.0375C17.7751 8.2125 17.7001 8.38333 17.6001 8.55L15.0001 12.775V18.225C15.0001 18.8083 14.8001 19.2875 14.4001 19.6625C14.0001 20.0375 13.5334 20.225 13.0001 20.225C12.9001 20.225 12.8001 20.2167 12.7001 20.2C12.6001 20.1833 12.4918 20.1583 12.3751 20.125L9.0001 19ZM5.5001 13H12.5001L15.9001 7.5L12.5001 2H5.5001L2.1001 7.5L5.5001 13ZM7.9501 8.75L11.4751 5.2C11.6584 5 11.8876 4.90417 12.1626 4.9125C12.4376 4.92083 12.6751 5.01667 12.8751 5.2C13.0751 5.4 13.1793 5.6375 13.1876 5.9125C13.1959 6.1875 13.1001 6.425 12.9001 6.625L8.6501 10.875C8.4501 11.075 8.21677 11.175 7.9501 11.175C7.68343 11.175 7.4501 11.075 7.2501 10.875L5.1251 8.75C4.9251 8.55 4.8251 8.3125 4.8251 8.0375C4.8251 7.7625 4.9251 7.525 5.1251 7.325C5.3251 7.125 5.5626 7.025 5.8376 7.025C6.1126 7.025 6.3501 7.125 6.5501 7.325L7.9501 8.75Z",
377
380
  fill: "#757575"
378
381
  }, null, -1)
379
382
  ]))),
380
- l.showOneAway ? (u(), m("div", $, T(n.oneAwayText), 1)) : k("", !0)
383
+ l.showOneAway ? (d(), h("div", t1, U(a.oneAwayText), 1)) : y("", !0)
381
384
  ], 2)
382
385
  ]),
383
386
  _: 1
384
387
  }, 8, ["borrower-name", "milestones-number", "is-close-next-milestone", "custom-message"])
385
- ])) : k("", !0)
388
+ ])) : y("", !0)
386
389
  ]),
387
390
  _: 1
388
- }, 8, ["style", "visible", "photo-path", "basket-count", "category-name", "onCartModalClosed"])) : k("", !0);
391
+ }, 8, ["style", "visible", "photo-path", "basket-count", "category-name", "onCartModalClosed"])) : y("", !0);
389
392
  }
390
- const i1 = /* @__PURE__ */ W(Y, [["render", e1], ["__scopeId", "data-v-9be640c2"]]);
393
+ const C1 = /* @__PURE__ */ J(Q, [["render", o1], ["__scopeId", "data-v-2070d628"]]);
391
394
  export {
392
- i1 as default
395
+ C1 as default
393
396
  };
package/dist/vue/KvSideSheet.js CHANGED
@@ -1,11 +1,11 @@
1
- import { toRefs as q, ref as w, reactive as J, computed as L, onMounted as P, onUnmounted as B, watch as y, resolveComponent as Q, openBlock as g, createElementBlock as p, normalizeClass as k, withModifiers as X, createElementVNode as c, normalizeStyle as j, createVNode as O, createCommentVNode as b, toDisplayString as Y, renderSlot as F, nextTick as Z } from "vue";
2
- import { mdiArrowLeft as $, mdiClose as ee, mdiExportVariant as te } from "@mdi/js";
3
- import oe from "./KvMaterialIcon.js";
4
- import ne from "../_virtual/_plugin-vue_export-helper.js";
5
- const ie = {
1
+ import { toRefs as J, ref as f, reactive as P, computed as O, onMounted as Q, onUnmounted as C, watch as g, resolveComponent as X, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as Y, createElementVNode as u, normalizeStyle as j, createVNode as H, createCommentVNode as x, toDisplayString as Z, renderSlot as I, nextTick as $ } from "vue";
2
+ import { mdiArrowLeft as ee, mdiClose as te, mdiExportVariant as oe } from "@mdi/js";
3
+ import ne from "./KvMaterialIcon.js";
4
+ import ie from "../_virtual/_plugin-vue_export-helper.js";
5
+ const le = {
6
6
  name: "KvSideSheet",
7
7
  components: {
8
- KvMaterialIcon: oe
8
+ KvMaterialIcon: ne
9
9
  },
10
10
  props: {
11
11
  /**
@@ -65,248 +65,256 @@ const ie = {
65
65
  widthDimensions: {
66
66
  type: [String, Object],
67
67
  default: () => ({ default: "100%", md: "50%" }),
68
- validator: (i) => typeof i == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i) : typeof i == "object" ? Object.keys(i).every((l) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(l) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i[l])) : !1
68
+ validator: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((i) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(i) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[i])) : !1
69
+ },
70
+ /**
71
+ * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
72
+ * */
73
+ hideHeadlineBgOnMobile: {
74
+ type: Boolean,
75
+ default: !1
69
76
  }
70
77
  },
71
78
  emits: ["side-sheet-closed", "go-to-link"],
72
- setup(i, { emit: l, slots: s }) {
79
+ setup(n, { emit: i, slots: l }) {
73
80
  const {
74
81
  visible: t,
75
82
  kvTrackFunction: z,
76
- trackEventCategory: H,
77
- widthDimensions: a
78
- } = q(i), o = w(!1), r = w({}), C = w(null), v = w(null), m = w(null), _ = w(null), V = w(null), f = J({
83
+ trackEventCategory: M,
84
+ widthDimensions: s,
85
+ hideHeadlineBgOnMobile: r
86
+ } = J(n), d = f(!1), a = f({}), E = f(null), m = f(null), y = f(null), _ = f(null), V = f(null), h = P({
79
87
  headline: 0,
80
88
  controls: 0
81
- }), I = L(() => {
82
- const e = _.value - f.headline - f.controls;
89
+ }), N = O(() => {
90
+ const e = _.value - (r.value ? 0 : h.headline) - h.controls;
83
91
  return Math.max(e, 0);
84
- }), W = L(() => {
85
- if (typeof a.value == "string")
86
- return a.value;
92
+ }), W = O(() => {
93
+ if (typeof s.value == "string")
94
+ return s.value;
87
95
  const e = {
88
96
  sm: 640,
89
97
  md: 768,
90
98
  lg: 1024,
91
99
  xl: 1280,
92
100
  "2xl": 1536
93
- }, n = V.value || window.innerWidth, u = Object.keys(a.value).filter((d) => d !== "default").sort((d, R) => e[R] - e[d]).find((d) => n >= e[d]);
94
- return u ? a.value[u] : a.value.default || "100%";
95
- }), N = (e, n) => {
96
- let u;
97
- return (...d) => {
98
- clearTimeout(u), u = setTimeout(() => e(...d), n);
101
+ }, o = V.value || window.innerWidth, w = Object.keys(s.value).filter((c) => c !== "default").sort((c, L) => e[L] - e[c]).find((c) => o >= e[c]);
102
+ return w ? s.value[w] : s.value.default || "100%";
103
+ }), U = (e, o) => {
104
+ let w;
105
+ return (...c) => {
106
+ clearTimeout(w), w = setTimeout(() => e(...c), o);
99
107
  };
100
- }, x = () => {
108
+ }, S = () => {
101
109
  _.value = window.innerHeight, V.value = window.innerWidth, setTimeout(() => {
102
- Z(() => {
110
+ $(() => {
103
111
  var e;
104
- if (m.value) {
105
- const n = m.value.getBoundingClientRect();
106
- f.headline = n.height;
112
+ if (y.value) {
113
+ const o = y.value.getBoundingClientRect();
114
+ h.headline = o.height;
107
115
  } else
108
- f.headline = 0;
109
- if ((e = s.controls) != null && e.call(s) && v.value) {
110
- const n = v.value.getBoundingClientRect();
111
- f.controls = n.height;
116
+ h.headline = 0;
117
+ if ((e = l.controls) != null && e.call(l) && m.value) {
118
+ const o = m.value.getBoundingClientRect();
119
+ h.controls = o.height;
112
120
  } else
113
- f.controls = 0;
121
+ h.controls = 0;
114
122
  });
115
123
  }, 300);
116
- }, S = N(x, 100), E = () => {
124
+ }, B = U(S, 100), T = () => {
117
125
  const e = "tw-overflow-hidden";
118
- o.value ? document.body.classList.add(e) : document.body.classList.remove(e);
126
+ d.value ? document.body.classList.add(e) : document.body.classList.remove(e);
119
127
  }, K = () => {
120
- o.value = !1, E(), z.value(H.value, "click", "side-sheet-closed"), setTimeout(() => {
121
- l("side-sheet-closed");
122
- }, 300), document.removeEventListener("keyup", T);
123
- }, U = () => {
124
- l("go-to-link");
125
- }, T = (e) => {
128
+ d.value = !1, T(), z.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
129
+ i("side-sheet-closed");
130
+ }, 300), document.removeEventListener("keyup", R);
131
+ }, A = () => {
132
+ i("go-to-link");
133
+ }, R = (e) => {
126
134
  (e == null ? void 0 : e.key) === "Escape" && K();
127
135
  };
128
- P(() => {
136
+ Q(() => {
129
137
  if (setTimeout(() => {
130
- x();
131
- }, 100), v.value) {
132
- const e = new ResizeObserver(S);
133
- e.observe(v.value), B(() => e.disconnect());
138
+ S();
139
+ }, 100), m.value) {
140
+ const e = new ResizeObserver(B);
141
+ e.observe(m.value), C(() => e.disconnect());
134
142
  }
135
- if (m.value) {
136
- const e = new ResizeObserver(S);
137
- e.observe(m.value), B(() => e.disconnect());
143
+ if (y.value) {
144
+ const e = new ResizeObserver(B);
145
+ e.observe(y.value), C(() => e.disconnect());
138
146
  }
139
- window.addEventListener("resize", S), B(() => window.removeEventListener("resize", S));
140
- }), y(() => {
147
+ window.addEventListener("resize", B), C(() => window.removeEventListener("resize", B));
148
+ }), g(() => {
141
149
  var e;
142
- return (e = s.controls) == null ? void 0 : e.call(s);
150
+ return (e = l.controls) == null ? void 0 : e.call(l);
143
151
  }, () => {
144
152
  setTimeout(() => {
145
- x();
153
+ S();
146
154
  }, 100);
147
155
  }, { deep: !0 });
148
- const A = L(() => ({
156
+ const G = O(() => ({
149
157
  width: W.value
150
158
  }));
151
- y(t, (e) => {
152
- e ? (document.addEventListener("keyup", T), r.value = {}, setTimeout(() => {
153
- o.value = !0, E(), x();
154
- }, 10)) : (o.value = !1, E(), document.removeEventListener("keyup", T), r.value = {});
155
- }), y(W, (e) => {
156
- o.value && t.value && r.value && Object.keys(r.value).length > 0 && (r.value = {
157
- ...r.value,
159
+ g(t, (e) => {
160
+ e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
161
+ d.value = !0, T(), S();
162
+ }, 10)) : (d.value = !1, T(), document.removeEventListener("keyup", R), a.value = {});
163
+ }), g(W, (e) => {
164
+ d.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
165
+ ...a.value,
158
166
  width: e,
159
167
  transition: "none"
160
168
  // No animation for resize
161
169
  }, setTimeout(() => {
162
- r.value && Object.keys(r.value).length > 0 && (r.value = {
163
- ...r.value,
170
+ a.value && Object.keys(a.value).length > 0 && (a.value = {
171
+ ...a.value,
164
172
  transition: "all 0.3s ease-in-out"
165
173
  });
166
174
  }, 50));
167
175
  });
168
- const M = () => {
169
- if (typeof a.value == "object" && C.value) {
176
+ const D = () => {
177
+ if (typeof s.value == "object" && E.value) {
170
178
  const e = "side-sheet-styles";
171
- let n = document.getElementById(e);
172
- n || (n = document.createElement("style"), n.id = e, document.head.appendChild(n));
173
- const u = {
179
+ let o = document.getElementById(e);
180
+ o || (o = document.createElement("style"), o.id = e, document.head.appendChild(o));
181
+ const w = {
174
182
  sm: "640px",
175
183
  md: "768px",
176
184
  lg: "1024px",
177
185
  xl: "1280px",
178
186
  "2xl": "1536px"
179
- }, R = Object.keys(a.value).filter((h) => h !== "default").sort((h, G) => {
180
- const D = ["sm", "md", "lg", "xl", "2xl"];
181
- return D.indexOf(h) - D.indexOf(G);
182
- }).map((h) => `
183
- @media (min-width: ${u[h]}) {
184
- #side-sheet-${i.trackEventCategory || "default"} {
185
- width: ${a.value[h]} !important;
187
+ }, L = Object.keys(s.value).filter((v) => v !== "default").sort((v, q) => {
188
+ const F = ["sm", "md", "lg", "xl", "2xl"];
189
+ return F.indexOf(v) - F.indexOf(q);
190
+ }).map((v) => `
191
+ @media (min-width: ${w[v]}) {
192
+ #side-sheet-${n.trackEventCategory || "default"} {
193
+ width: ${s.value[v]} !important;
186
194
  }
187
195
  }
188
196
  `).join("");
189
- n.textContent = R, C.value.id = `side-sheet-${i.trackEventCategory || "default"}`, B(() => {
190
- n && n.remove();
197
+ o.textContent = L, E.value.id = `side-sheet-${n.trackEventCategory || "default"}`, C(() => {
198
+ o && o.remove();
191
199
  });
192
200
  }
193
201
  };
194
- return y(a, () => {
195
- o.value && M();
196
- }, { immediate: !0 }), y(o, (e) => {
197
- e && M();
202
+ return g(s, () => {
203
+ d.value && D();
204
+ }, { immediate: !0 }), g(d, (e) => {
205
+ e && D();
198
206
  }), {
199
207
  closeSideSheet: K,
200
- contentHeight: I,
201
- controlsRef: v,
202
- headlineRef: m,
203
- sideSheetRef: C,
204
- sideSheetStyles: A,
205
- goToLink: U,
206
- mdiArrowLeft: $,
207
- mdiClose: ee,
208
- mdiExportVariant: te,
209
- modalStyles: r,
210
- open: o
208
+ contentHeight: N,
209
+ controlsRef: m,
210
+ headlineRef: y,
211
+ sideSheetRef: E,
212
+ sideSheetStyles: G,
213
+ goToLink: A,
214
+ mdiArrowLeft: ee,
215
+ mdiClose: te,
216
+ mdiExportVariant: oe,
217
+ modalStyles: a,
218
+ open: d
211
219
  };
212
220
  }
213
- }, le = { class: "tw-flex tw-gap-1.5" }, se = { key: 1 }, ae = { class: "tw-flex tw-gap-1.5" };
214
- function re(i, l, s, t, z, H) {
215
- const a = Q("kv-material-icon");
216
- return s.visible ? (g(), p("div", {
221
+ }, se = { class: "tw-flex tw-gap-1.5" }, ae = { key: 1 }, re = { class: "tw-flex tw-gap-1.5" };
222
+ function de(n, i, l, t, z, M) {
223
+ const s = X("kv-material-icon");
224
+ return l.visible ? (p(), k("div", {
217
225
  key: 0,
218
- class: k(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
226
+ class: b(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
219
227
  "tw-bg-opacity-0 tw-delay-300": !t.open,
220
228
  "tw-bg-opacity-low": t.open
221
229
  }]),
222
- onClick: l[3] || (l[3] = X((...o) => t.closeSideSheet && t.closeSideSheet(...o), ["self"]))
230
+ onClick: i[3] || (i[3] = Y((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
223
231
  }, [
224
- c("div", {
232
+ u("div", {
225
233
  ref: "sideSheetRef",
226
- class: k(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
234
+ class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
227
235
  "tw-translate-x-full": !t.open,
228
236
  "tw-translate-x-0": t.open,
229
- "tw-h-full": i.$slots.controls
237
+ "tw-h-full": n.$slots.controls
230
238
  }]),
231
239
  style: j(t.sideSheetStyles)
232
240
  }, [
233
- c("div", {
241
+ u("div", {
234
242
  class: "tw-flex tw-flex-col tw-h-full",
235
243
  style: j(t.modalStyles)
236
244
  }, [
237
- c("div", {
245
+ u("div", {
238
246
  ref: "headlineRef",
239
- class: k(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
247
+ class: b(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
240
248
  "tw-opacity-0": !t.open,
241
249
  "tw-opacity-full": t.open,
242
- "tw-border-b": s.showHeadlineBorder
250
+ "tw-border-b": l.showHeadlineBorder
243
251
  }])
244
252
  }, [
245
- c("div", le, [
246
- s.showBackButton ? (g(), p("button", {
253
+ u("div", se, [
254
+ l.showBackButton ? (p(), k("button", {
247
255
  key: 0,
248
256
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
249
- onClick: l[0] || (l[0] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
257
+ onClick: i[0] || (i[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
250
258
  }, [
251
- O(a, {
259
+ H(s, {
252
260
  class: "tw-w-3 tw-h-3",
253
261
  icon: t.mdiArrowLeft
254
262
  }, null, 8, ["icon"])
255
- ])) : b("", !0),
256
- s.headline ? (g(), p("h3", se, Y(s.headline), 1)) : b("", !0)
263
+ ])) : x("", !0),
264
+ l.headline ? (p(), k("h3", ae, Z(l.headline), 1)) : x("", !0)
257
265
  ]),
258
- c("div", ae, [
259
- s.showGoToLink ? (g(), p("button", {
266
+ u("div", re, [
267
+ l.showGoToLink ? (p(), k("button", {
260
268
  key: 0,
261
269
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
262
- onClick: l[1] || (l[1] = (...o) => t.goToLink && t.goToLink(...o))
270
+ onClick: i[1] || (i[1] = (...r) => t.goToLink && t.goToLink(...r))
263
271
  }, [
264
- O(a, {
272
+ H(s, {
265
273
  class: "tw-w-3 tw-h-3",
266
274
  icon: t.mdiExportVariant
267
275
  }, null, 8, ["icon"])
268
- ])) : b("", !0),
269
- c("button", {
276
+ ])) : x("", !0),
277
+ u("button", {
270
278
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
271
- onClick: l[2] || (l[2] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
279
+ onClick: i[2] || (i[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
272
280
  }, [
273
- O(a, {
281
+ H(s, {
274
282
  class: "tw-w-3 tw-h-3",
275
283
  icon: t.mdiClose
276
284
  }, null, 8, ["icon"])
277
285
  ])
278
286
  ])
279
287
  ], 2),
280
- c("div", {
288
+ u("div", {
281
289
  id: "sidesheet-content",
282
290
  class: "tw-overflow-y-auto tw-overscroll-y-contain",
283
291
  style: j({ height: t.contentHeight + "px" })
284
292
  }, [
285
- c("div", {
286
- class: k(["tw-px-2 tw-transition-opacity tw-duration-200", {
293
+ u("div", {
294
+ class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
287
295
  "tw-opacity-0": !t.open,
288
296
  "tw-opacity-full": t.open
289
297
  }])
290
298
  }, [
291
- F(i.$slots, "default")
299
+ I(n.$slots, "default")
292
300
  ], 2)
293
301
  ], 4),
294
- i.$slots.controls ? (g(), p("div", {
302
+ n.$slots.controls ? (p(), k("div", {
295
303
  key: 0,
296
304
  ref: "controlsRef",
297
- class: k(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
305
+ class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
298
306
  "tw-opacity-0": !t.open,
299
307
  "tw-opacity-full": t.open
300
308
  }]),
301
309
  style: { "z-index": "999" }
302
310
  }, [
303
- F(i.$slots, "controls")
304
- ], 2)) : b("", !0)
311
+ I(n.$slots, "controls")
312
+ ], 2)) : x("", !0)
305
313
  ], 4)
306
314
  ], 6)
307
- ], 2)) : b("", !0);
315
+ ], 2)) : x("", !0);
308
316
  }
309
- const fe = /* @__PURE__ */ ne(ie, [["render", re]]);
317
+ const he = /* @__PURE__ */ ie(le, [["render", de]]);
310
318
  export {
311
- fe as default
319
+ he as default
312
320
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "6.26.0",
3
+ "version": "6.27.1",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -111,5 +111,5 @@
111
111
  "embla-carousel-fade",
112
112
  "popper.js"
113
113
  ],
114
- "gitHead": "011cfb70b0013350aa3a295329b65e99e4e102f8"
114
+ "gitHead": "e766ed7236457d109c994d6e675797886a4a52a2"
115
115
  }