@kiva/kv-components 8.11.3 → 8.12.0
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.
- package/dist/data/allCountriesISOMap.d.ts +1 -0
- package/dist/data/allCountriesISOMap.js +249 -0
- package/dist/data/simpleMapCentroids.d.ts +8 -0
- package/dist/data/simpleMapCentroids.js +1265 -0
- package/dist/data/simpleMapCountryPaths.d.ts +6 -0
- package/dist/data/simpleMapCountryPaths.js +215 -0
- package/dist/data/simpleMapPaths.d.ts +214 -0
- package/dist/data/simpleMapPaths.js +216 -0
- package/dist/index.js +209 -207
- package/dist/utils/useMapTourCycle.d.ts +20 -0
- package/dist/utils/useMapTourCycle.js +73 -0
- package/dist/vue/KvAtbModal.css +1 -1
- package/dist/vue/KvAtbModal.js +5 -5
- package/dist/vue/KvCheckoutReceipt.css +1 -1
- package/dist/vue/KvCheckoutReceipt.js +31 -31
- package/dist/vue/KvIntroductionLoanCard.css +1 -1
- package/dist/vue/KvIntroductionLoanCard.js +15 -15
- package/dist/vue/KvLoanActivities.css +1 -1
- package/dist/vue/KvLoanActivities.js +19 -19
- package/dist/vue/KvLoanTeamPick.js +1 -1
- package/dist/vue/KvPieChartV2.vue.d.ts +2 -2
- package/dist/vue/KvPill.js +1 -1
- package/dist/vue/KvProgressCircle.vue.d.ts +1 -1
- package/dist/vue/KvSecondaryNav.vue.d.ts +1 -1
- package/dist/vue/KvSideSheet.js +15 -12
- package/dist/vue/KvSimpleMap.css +1 -0
- package/dist/vue/KvSimpleMap.js +7 -0
- package/dist/vue/KvSimpleMap.vue.d.ts +270 -0
- package/dist/vue/KvSimpleMap2.js +529 -0
- package/dist/vue/KvVotingCard.css +1 -1
- package/dist/vue/KvVotingCard.js +14 -14
- package/dist/vue/KvVotingCardV2.js +23 -23
- package/dist/vue/KvWideLoanCard.css +1 -1
- package/dist/vue/KvWideLoanCard.js +2 -2
- package/dist/vue/index.d.ts +2 -0
- package/docs/make-to-vue.md +74 -22
- package/package.json +3 -3
|
@@ -0,0 +1,529 @@
|
|
|
1
|
+
import { defineComponent as Ue, useSlots as Ye, computed as l, ref as m, watch as V, onMounted as We, onBeforeUnmount as Xe, openBlock as v, createElementBlock as d, normalizeStyle as $, createElementVNode as g, Fragment as Ge, renderList as qe, unref as C, createVNode as L, createCommentVNode as T, Transition as Ke, withCtx as je, normalizeClass as Je, renderSlot as Qe, toDisplayString as le } from "vue";
|
|
2
|
+
import { mdiPlus as et, mdiMinus as tt, mdiPlay as nt } from "@mdi/js";
|
|
3
|
+
import N from "@kiva/kv-tokens";
|
|
4
|
+
import ot from "../data/simpleMapPaths.js";
|
|
5
|
+
import lt from "../data/simpleMapCountryPaths.js";
|
|
6
|
+
import U from "../data/simpleMapCentroids.js";
|
|
7
|
+
import { ALL_COUNTRIES_ISO_MAP as ae } from "../data/allCountriesISOMap.js";
|
|
8
|
+
import { useMapTourCycle as at } from "../utils/useMapTourCycle.js";
|
|
9
|
+
import Y from "./KvMaterialIcon.js";
|
|
10
|
+
const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"], it = {
|
|
11
|
+
key: 0,
|
|
12
|
+
class: "kv-simple-map__zoom-controls tw-absolute tw-top-2 tw-right-2 tw-flex tw-flex-col tw-gap-1"
|
|
13
|
+
}, st = ["disabled"], ct = ["disabled"], pt = { class: "kv-simple-map__popup-layer tw-absolute tw-inset-0 tw-pointer-events-none" }, ft = { class: "kv-simple-map__popup-content" }, mt = { class: "kv-simple-map__default-popup" }, vt = {
|
|
14
|
+
key: 0,
|
|
15
|
+
class: "tw-text-label"
|
|
16
|
+
}, dt = {
|
|
17
|
+
key: 1,
|
|
18
|
+
class: "tw-text-caption"
|
|
19
|
+
}, R = 1300.02, D = 571.784, yt = "cubic-bezier(0.76, 0, 0.24, 1)", xt = 60, St = /* @__PURE__ */ Ue({
|
|
20
|
+
__name: "KvSimpleMap",
|
|
21
|
+
props: {
|
|
22
|
+
/**
|
|
23
|
+
* Countries to make interactive: each entry is hover-able and (when autoplay
|
|
24
|
+
* is true) becomes a stop on the scripted tour. Countries not in this list
|
|
25
|
+
* still render as background but do not show popups.
|
|
26
|
+
*/
|
|
27
|
+
countries: {
|
|
28
|
+
type: Array,
|
|
29
|
+
default: () => []
|
|
30
|
+
},
|
|
31
|
+
/**
|
|
32
|
+
* Width / height ratio that drives the default container height when no
|
|
33
|
+
* explicit height is set. Defaults to the source SVG's natural ratio.
|
|
34
|
+
*/
|
|
35
|
+
aspectRatio: {
|
|
36
|
+
type: Number,
|
|
37
|
+
default: R / D
|
|
38
|
+
},
|
|
39
|
+
/**
|
|
40
|
+
* Explicit height override in pixels. Takes precedence over aspectRatio.
|
|
41
|
+
*/
|
|
42
|
+
height: {
|
|
43
|
+
type: Number,
|
|
44
|
+
default: null
|
|
45
|
+
},
|
|
46
|
+
/**
|
|
47
|
+
* Explicit width override in pixels. Defaults to 100% of parent.
|
|
48
|
+
*/
|
|
49
|
+
width: {
|
|
50
|
+
type: Number,
|
|
51
|
+
default: null
|
|
52
|
+
},
|
|
53
|
+
/**
|
|
54
|
+
* When true, the map runs an automatic tour through `countries`, panning
|
|
55
|
+
* and zooming to each in turn. Drag and zoom controls are suspended.
|
|
56
|
+
*/
|
|
57
|
+
autoplay: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
default: !1
|
|
60
|
+
},
|
|
61
|
+
/**
|
|
62
|
+
* When true (and autoplay is true), the tour repeats indefinitely.
|
|
63
|
+
*/
|
|
64
|
+
loop: {
|
|
65
|
+
type: Boolean,
|
|
66
|
+
default: !0
|
|
67
|
+
},
|
|
68
|
+
/**
|
|
69
|
+
* Allow click-and-drag to pan the map. Ignored during autoplay.
|
|
70
|
+
*/
|
|
71
|
+
allowDragging: {
|
|
72
|
+
type: Boolean,
|
|
73
|
+
default: !0
|
|
74
|
+
},
|
|
75
|
+
/**
|
|
76
|
+
* Show + / − zoom buttons. Hidden during autoplay.
|
|
77
|
+
*/
|
|
78
|
+
showZoomControls: {
|
|
79
|
+
type: Boolean,
|
|
80
|
+
default: !0
|
|
81
|
+
},
|
|
82
|
+
/**
|
|
83
|
+
* Multiplier applied to the base "fit-to-width" scale when focusing on a
|
|
84
|
+
* country during the tour. 2.0 ≈ desktop default, 2.4 ≈ more impact on small viewports.
|
|
85
|
+
*/
|
|
86
|
+
zoomFactor: {
|
|
87
|
+
type: Number,
|
|
88
|
+
default: 2
|
|
89
|
+
},
|
|
90
|
+
/**
|
|
91
|
+
* Minimum zoom (1 = full overview).
|
|
92
|
+
*/
|
|
93
|
+
minZoom: {
|
|
94
|
+
type: Number,
|
|
95
|
+
default: 1
|
|
96
|
+
},
|
|
97
|
+
/**
|
|
98
|
+
* Maximum zoom multiplier on top of base scale.
|
|
99
|
+
*/
|
|
100
|
+
maxZoom: {
|
|
101
|
+
type: Number,
|
|
102
|
+
default: 4
|
|
103
|
+
},
|
|
104
|
+
/**
|
|
105
|
+
* Step applied per zoom-button click.
|
|
106
|
+
*/
|
|
107
|
+
zoomStep: {
|
|
108
|
+
type: Number,
|
|
109
|
+
default: 0.5
|
|
110
|
+
},
|
|
111
|
+
/** Highlight color for active / hovered countries. Defaults to eco-green DEFAULT. */
|
|
112
|
+
highlightColor: {
|
|
113
|
+
type: String,
|
|
114
|
+
default: N.colors["eco-green"].DEFAULT
|
|
115
|
+
},
|
|
116
|
+
/** Base color for countries that aren't in the `countries` list. */
|
|
117
|
+
baseColor: {
|
|
118
|
+
type: String,
|
|
119
|
+
default: N.colors.gray[200]
|
|
120
|
+
},
|
|
121
|
+
/**
|
|
122
|
+
* Loan-count thresholds that bucket each country into one of the four
|
|
123
|
+
* eco-green tiers. The default mirrors the design spec:
|
|
124
|
+
* 1–3 → tier 1, 4–8 → tier 2, 9–14 → tier 3, 15+ → tier 4.
|
|
125
|
+
* Pass an array of four ascending lower-bounds to customize.
|
|
126
|
+
*/
|
|
127
|
+
loanCountTiers: {
|
|
128
|
+
type: Array,
|
|
129
|
+
default: () => [1, 4, 9, 15]
|
|
130
|
+
},
|
|
131
|
+
/** Background color of the ocean / unfilled area. */
|
|
132
|
+
oceanColor: {
|
|
133
|
+
type: String,
|
|
134
|
+
default: "#e8f4fa"
|
|
135
|
+
},
|
|
136
|
+
/**
|
|
137
|
+
* Where to place the hover/tour popup relative to the country:
|
|
138
|
+
* 'top' — centered above the country (auto-flips below if it
|
|
139
|
+
* would clip the top edge of the container).
|
|
140
|
+
* 'bottom-right' — top-left of the popup hugs the country's
|
|
141
|
+
* bottom-right bbox corner.
|
|
142
|
+
*/
|
|
143
|
+
popupPlacement: {
|
|
144
|
+
type: String,
|
|
145
|
+
default: "top",
|
|
146
|
+
validator: (k) => ["top", "bottom-right"].includes(k)
|
|
147
|
+
},
|
|
148
|
+
/**
|
|
149
|
+
* Pixel gap between the popup and the country edge, applied to whichever
|
|
150
|
+
* placement is active. Accepts negative values to make the popup overlap
|
|
151
|
+
* the country (useful for tightly hugging the bbox).
|
|
152
|
+
*/
|
|
153
|
+
popupOffset: {
|
|
154
|
+
type: Number,
|
|
155
|
+
default: 0
|
|
156
|
+
},
|
|
157
|
+
/**
|
|
158
|
+
* On mount (and on resize), fit the camera to the bounding box of the
|
|
159
|
+
* `countries` list with a small padding buffer. When false, the map opens
|
|
160
|
+
* on the full world overview. The user's drag/zoom always overrides this
|
|
161
|
+
* — the fit is only applied until the first interaction.
|
|
162
|
+
*/
|
|
163
|
+
fitToCountries: {
|
|
164
|
+
type: Boolean,
|
|
165
|
+
default: !0
|
|
166
|
+
},
|
|
167
|
+
/**
|
|
168
|
+
* Padding around the fit bbox, expressed as a fraction of the bbox extent
|
|
169
|
+
* on each side (0.15 = 15% breathing room around all four edges). Only
|
|
170
|
+
* applies when `fitToCountries` is true.
|
|
171
|
+
*/
|
|
172
|
+
fitPadding: {
|
|
173
|
+
type: Number,
|
|
174
|
+
default: 0.15
|
|
175
|
+
},
|
|
176
|
+
/** Tour: ms before the first pan begins. */
|
|
177
|
+
initialDelay: { type: Number, default: 1e3 },
|
|
178
|
+
/** Tour: ms per pan animation. */
|
|
179
|
+
panDuration: { type: Number, default: 1200 },
|
|
180
|
+
/** Tour: ms to dwell on each country after the pan settles. */
|
|
181
|
+
holdPerStep: { type: Number, default: 2e3 },
|
|
182
|
+
/** Tour: ms before the next pan to hide the active popup. */
|
|
183
|
+
popupHideBefore: { type: Number, default: 350 },
|
|
184
|
+
/** Tour: ms held on the full overview at the end of a cycle. */
|
|
185
|
+
holdAll: { type: Number, default: 2e3 },
|
|
186
|
+
/** Highlight fade duration, in ms. */
|
|
187
|
+
fadeDuration: { type: Number, default: 500 }
|
|
188
|
+
},
|
|
189
|
+
setup(k) {
|
|
190
|
+
const n = k, ue = Ye(), W = l(() => !!ue.popup), E = m(null), i = m(0), x = m(0);
|
|
191
|
+
function re() {
|
|
192
|
+
return n.height != null ? `${n.height}px` : i.value ? `${i.value / n.aspectRatio}px` : `${100 / n.aspectRatio}%`;
|
|
193
|
+
}
|
|
194
|
+
const ie = l(() => ({
|
|
195
|
+
width: n.width != null ? `${n.width}px` : "100%",
|
|
196
|
+
height: re(),
|
|
197
|
+
paddingBottom: n.height != null ? void 0 : `${100 / n.aspectRatio}%`
|
|
198
|
+
}));
|
|
199
|
+
let P = null;
|
|
200
|
+
function X() {
|
|
201
|
+
const e = E.value;
|
|
202
|
+
if (!e) return;
|
|
203
|
+
const t = e.getBoundingClientRect();
|
|
204
|
+
i.value = t.width, x.value = t.height;
|
|
205
|
+
}
|
|
206
|
+
const se = l(() => n.countries), ce = l(() => n.loop), A = m(!1), pe = l(() => n.autoplay && !A.value), fe = l(() => ({
|
|
207
|
+
initialDelay: n.initialDelay,
|
|
208
|
+
panDuration: n.panDuration,
|
|
209
|
+
holdPerStep: n.holdPerStep,
|
|
210
|
+
popupHideBefore: n.popupHideBefore,
|
|
211
|
+
holdAll: n.holdAll,
|
|
212
|
+
fadeDuration: n.fadeDuration
|
|
213
|
+
})), {
|
|
214
|
+
panIdx: G,
|
|
215
|
+
highlighted: me,
|
|
216
|
+
showPopupIdx: q,
|
|
217
|
+
isRunning: s,
|
|
218
|
+
start: ve
|
|
219
|
+
} = at(se, pe, ce, fe.value), c = l(() => i.value ? i.value / R : 1), K = l(() => {
|
|
220
|
+
const e = c.value, t = D * e;
|
|
221
|
+
return {
|
|
222
|
+
x: 0,
|
|
223
|
+
y: Math.max(0, (x.value - t) / 2),
|
|
224
|
+
scale: e
|
|
225
|
+
};
|
|
226
|
+
});
|
|
227
|
+
function de(e) {
|
|
228
|
+
return e.cx != null && e.cy != null ? { cx: e.cx, cy: e.cy } : U[e.id] ?? null;
|
|
229
|
+
}
|
|
230
|
+
const ye = l(() => {
|
|
231
|
+
if (G.value < 0) return null;
|
|
232
|
+
const e = n.countries[G.value];
|
|
233
|
+
if (!e) return null;
|
|
234
|
+
const t = de(e);
|
|
235
|
+
if (!t) return null;
|
|
236
|
+
const o = c.value * n.zoomFactor;
|
|
237
|
+
return {
|
|
238
|
+
x: i.value / 2 - t.cx * o,
|
|
239
|
+
y: x.value / 2 - t.cy * o,
|
|
240
|
+
scale: o
|
|
241
|
+
};
|
|
242
|
+
}), u = m({ x: 0, y: 0, scale: 1 }), B = m(!1), j = m(!1), I = m(!1), xe = l(() => {
|
|
243
|
+
if (!n.fitToCountries || !n.countries.length || !i.value || !x.value) return null;
|
|
244
|
+
let e = 1 / 0, t = 1 / 0, o = -1 / 0, a = -1 / 0;
|
|
245
|
+
if (n.countries.forEach((r) => {
|
|
246
|
+
if (r.cx != null && r.cy != null) {
|
|
247
|
+
r.cx < e && (e = r.cx), r.cx > o && (o = r.cx), r.cy < t && (t = r.cy), r.cy > a && (a = r.cy);
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
const f = U[r.id];
|
|
251
|
+
if (!f) return;
|
|
252
|
+
const ne = 2 * f.cx - f.xMax, oe = 2 * f.cy - f.yMax;
|
|
253
|
+
ne < e && (e = ne), oe < t && (t = oe), f.xMax > o && (o = f.xMax), f.yMax > a && (a = f.yMax);
|
|
254
|
+
}), !Number.isFinite(e)) return null;
|
|
255
|
+
const y = Math.max(0, n.fitPadding), w = Math.max(1, o - e) * (1 + y * 2), M = Math.max(1, a - t) * (1 + y * 2), b = Math.min(i.value / w, x.value / M), He = c.value * n.minZoom, ze = c.value * n.maxZoom, F = Math.max(He, Math.min(ze, b)), Fe = (e + o) / 2, Ve = (t + a) / 2;
|
|
256
|
+
return {
|
|
257
|
+
x: i.value / 2 - Fe * F,
|
|
258
|
+
y: x.value / 2 - Ve * F,
|
|
259
|
+
scale: F
|
|
260
|
+
};
|
|
261
|
+
}), he = l(() => xe.value ?? K.value), O = l(() => s.value ? ye.value ?? K.value : u.value);
|
|
262
|
+
V(he, (e) => {
|
|
263
|
+
s.value || I.value || (u.value = e);
|
|
264
|
+
}, { immediate: !0 }), V(() => n.countries, () => {
|
|
265
|
+
I.value = !1;
|
|
266
|
+
}), V(() => n.autoplay, () => {
|
|
267
|
+
A.value = !1;
|
|
268
|
+
});
|
|
269
|
+
const we = l(() => {
|
|
270
|
+
const { x: e, y: t, scale: o } = O.value, a = !B.value && j.value;
|
|
271
|
+
return {
|
|
272
|
+
width: `${R}px`,
|
|
273
|
+
height: `${D}px`,
|
|
274
|
+
transformOrigin: "0 0",
|
|
275
|
+
transform: `translate(${e}px, ${t}px) scale(${o})`,
|
|
276
|
+
transition: a ? `transform ${n.panDuration}ms ${yt}` : "none",
|
|
277
|
+
willChange: "transform"
|
|
278
|
+
};
|
|
279
|
+
}), _ = m(null), Z = l(() => {
|
|
280
|
+
const e = /* @__PURE__ */ new Map();
|
|
281
|
+
return n.countries.forEach((t) => e.set(t.id, t)), e;
|
|
282
|
+
});
|
|
283
|
+
function be(e) {
|
|
284
|
+
return Z.value.has(e) || !!ae[e];
|
|
285
|
+
}
|
|
286
|
+
function H(e) {
|
|
287
|
+
return be(e);
|
|
288
|
+
}
|
|
289
|
+
const S = N.colors["eco-green"], ge = [S[1], S[2], S[3], S[4]], J = l(() => n.highlightColor ?? S.DEFAULT), _e = l(() => n.baseColor ?? N.colors.gray[200]), Me = N.colors.gray[300];
|
|
290
|
+
function Ce(e) {
|
|
291
|
+
if (e == null || e < n.loanCountTiers[0]) return null;
|
|
292
|
+
for (let t = n.loanCountTiers.length - 1; t >= 0; t -= 1)
|
|
293
|
+
if (e >= n.loanCountTiers[t]) return ge[t];
|
|
294
|
+
return null;
|
|
295
|
+
}
|
|
296
|
+
function ke(e) {
|
|
297
|
+
return {
|
|
298
|
+
transition: `fill ${n.fadeDuration}ms ease-in-out`,
|
|
299
|
+
cursor: H(e) && !s.value ? "pointer" : "inherit"
|
|
300
|
+
};
|
|
301
|
+
}
|
|
302
|
+
function Pe(e) {
|
|
303
|
+
const t = Z.value.get(e), o = t ? Ce(t.loanCount) : null, a = _.value === e && H(e);
|
|
304
|
+
return me.value.has(e) ? J.value : a ? o ? J.value : Me : o ?? _e.value;
|
|
305
|
+
}
|
|
306
|
+
function Se(e) {
|
|
307
|
+
s.value || H(e) && (_.value = e);
|
|
308
|
+
}
|
|
309
|
+
function $e(e) {
|
|
310
|
+
_.value === e && (_.value = null);
|
|
311
|
+
}
|
|
312
|
+
function Te(e) {
|
|
313
|
+
if (e.cx != null && e.cy != null)
|
|
314
|
+
return {
|
|
315
|
+
cx: e.cx,
|
|
316
|
+
cy: e.cy,
|
|
317
|
+
xMin: e.cx,
|
|
318
|
+
xMax: e.cx,
|
|
319
|
+
yMin: e.cy,
|
|
320
|
+
yMax: e.cy
|
|
321
|
+
};
|
|
322
|
+
const t = U[e.id];
|
|
323
|
+
return t ? {
|
|
324
|
+
cx: t.cx,
|
|
325
|
+
cy: t.cy,
|
|
326
|
+
xMax: t.xMax,
|
|
327
|
+
yMax: t.yMax,
|
|
328
|
+
xMin: 2 * t.cx - t.xMax,
|
|
329
|
+
yMin: 2 * t.cy - t.yMax
|
|
330
|
+
} : null;
|
|
331
|
+
}
|
|
332
|
+
function Q(e) {
|
|
333
|
+
const t = Te(e);
|
|
334
|
+
if (!t) return null;
|
|
335
|
+
const o = O.value, a = { "--kv-simple-map-popup-offset": `${n.popupOffset}px` };
|
|
336
|
+
if (n.popupPlacement === "bottom-right")
|
|
337
|
+
return {
|
|
338
|
+
placement: "bottom-right",
|
|
339
|
+
style: {
|
|
340
|
+
left: `${t.xMax * o.scale + o.x}px`,
|
|
341
|
+
top: `${t.yMax * o.scale + o.y}px`,
|
|
342
|
+
...a
|
|
343
|
+
}
|
|
344
|
+
};
|
|
345
|
+
const y = t.cx * o.scale + o.x, w = t.yMin * o.scale + o.y, M = t.yMax * o.scale + o.y, b = w < xt ? "bottom" : "top";
|
|
346
|
+
return {
|
|
347
|
+
placement: b,
|
|
348
|
+
style: {
|
|
349
|
+
left: `${y}px`,
|
|
350
|
+
top: `${b === "top" ? w : M}px`,
|
|
351
|
+
...a
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
}
|
|
355
|
+
function ee(e) {
|
|
356
|
+
return !!e.name || e.loanCount != null;
|
|
357
|
+
}
|
|
358
|
+
const p = l(() => {
|
|
359
|
+
if (s.value && q.value >= 0) {
|
|
360
|
+
const e = n.countries[q.value];
|
|
361
|
+
if (!e || !W.value && !ee(e)) return null;
|
|
362
|
+
const t = Q(e);
|
|
363
|
+
return t ? { country: e, ...t } : null;
|
|
364
|
+
}
|
|
365
|
+
if (!s.value && _.value) {
|
|
366
|
+
const e = _.value, t = Z.value.get(e) ?? { id: e, name: ae[e] };
|
|
367
|
+
if (!W.value && !ee(t)) return null;
|
|
368
|
+
const o = Q(t);
|
|
369
|
+
return o ? { country: t, ...o } : null;
|
|
370
|
+
}
|
|
371
|
+
return null;
|
|
372
|
+
});
|
|
373
|
+
function Ne(e) {
|
|
374
|
+
return e === 1 ? "1 loan" : `${e} loans`;
|
|
375
|
+
}
|
|
376
|
+
let h = null;
|
|
377
|
+
function z(e) {
|
|
378
|
+
h && (u.value = {
|
|
379
|
+
...u.value,
|
|
380
|
+
x: h.tx + (e.clientX - h.x),
|
|
381
|
+
y: h.ty + (e.clientY - h.y)
|
|
382
|
+
});
|
|
383
|
+
}
|
|
384
|
+
function Re() {
|
|
385
|
+
B.value = !1, h = null, window.removeEventListener("pointermove", z);
|
|
386
|
+
}
|
|
387
|
+
function De(e) {
|
|
388
|
+
e.button !== 0 && e.pointerType === "mouse" || (s.value && (u.value = { ...O.value }, A.value = !0), n.allowDragging && (I.value = !0, B.value = !0, h = {
|
|
389
|
+
x: e.clientX,
|
|
390
|
+
y: e.clientY,
|
|
391
|
+
tx: u.value.x,
|
|
392
|
+
ty: u.value.y
|
|
393
|
+
}, window.addEventListener("pointermove", z), window.addEventListener("pointerup", Re, { once: !0 })));
|
|
394
|
+
}
|
|
395
|
+
const Ee = l(() => n.autoplay && !s.value);
|
|
396
|
+
function Ae() {
|
|
397
|
+
A.value = !1, ve();
|
|
398
|
+
}
|
|
399
|
+
const Be = l(() => !n.allowDragging || s.value ? "default" : B.value ? "grabbing" : "grab"), Ie = l(() => u.value.scale < c.value * n.maxZoom - 1e-3), Le = l(() => u.value.scale > c.value * n.minZoom + 1e-3);
|
|
400
|
+
function te(e) {
|
|
401
|
+
const t = u.value, o = c.value * n.minZoom, a = c.value * n.maxZoom, y = Math.min(a, Math.max(o, t.scale + e * c.value));
|
|
402
|
+
if (Math.abs(y - t.scale) < 1e-6) return;
|
|
403
|
+
I.value = !0;
|
|
404
|
+
const w = i.value, M = x.value, b = y / t.scale;
|
|
405
|
+
u.value = {
|
|
406
|
+
x: w / 2 - (w / 2 - t.x) * b,
|
|
407
|
+
y: M / 2 - (M / 2 - t.y) * b,
|
|
408
|
+
scale: y
|
|
409
|
+
};
|
|
410
|
+
}
|
|
411
|
+
function Oe() {
|
|
412
|
+
te(n.zoomStep);
|
|
413
|
+
}
|
|
414
|
+
function Ze() {
|
|
415
|
+
te(-n.zoomStep);
|
|
416
|
+
}
|
|
417
|
+
return We(() => {
|
|
418
|
+
X(), typeof ResizeObserver < "u" && E.value && (P = new ResizeObserver(X), P.observe(E.value)), requestAnimationFrame(() => {
|
|
419
|
+
requestAnimationFrame(() => {
|
|
420
|
+
j.value = !0;
|
|
421
|
+
});
|
|
422
|
+
});
|
|
423
|
+
}), Xe(() => {
|
|
424
|
+
P == null || P.disconnect(), window.removeEventListener("pointermove", z);
|
|
425
|
+
}), (e, t) => (v(), d("div", {
|
|
426
|
+
ref_key: "rootRef",
|
|
427
|
+
ref: E,
|
|
428
|
+
class: "kv-simple-map tw-relative tw-block tw-overflow-hidden",
|
|
429
|
+
style: $(ie.value)
|
|
430
|
+
}, [
|
|
431
|
+
g("div", {
|
|
432
|
+
class: "kv-simple-map__clip tw-absolute tw-inset-0 tw-overflow-hidden",
|
|
433
|
+
style: $({ backgroundColor: k.oceanColor, cursor: Be.value }),
|
|
434
|
+
onPointerdown: De
|
|
435
|
+
}, [
|
|
436
|
+
g("div", {
|
|
437
|
+
class: "kv-simple-map__pan-layer tw-absolute tw-top-0 tw-left-0",
|
|
438
|
+
style: $(we.value)
|
|
439
|
+
}, [
|
|
440
|
+
(v(), d("svg", {
|
|
441
|
+
width: R,
|
|
442
|
+
height: D,
|
|
443
|
+
viewBox: `0 0 ${R} ${D}`,
|
|
444
|
+
fill: "none",
|
|
445
|
+
"aria-hidden": "true",
|
|
446
|
+
class: "tw-block"
|
|
447
|
+
}, [
|
|
448
|
+
(v(!0), d(Ge, null, qe(C(lt), (o) => (v(), d("path", {
|
|
449
|
+
key: o.id,
|
|
450
|
+
d: C(ot)[o.key],
|
|
451
|
+
fill: Pe(o.id),
|
|
452
|
+
"fill-rule": "evenodd",
|
|
453
|
+
"clip-rule": "evenodd",
|
|
454
|
+
stroke: "white",
|
|
455
|
+
"stroke-linejoin": "round",
|
|
456
|
+
style: $(ke(o.id)),
|
|
457
|
+
onPointerenter: (a) => Se(o.id),
|
|
458
|
+
onPointerleave: (a) => $e(o.id)
|
|
459
|
+
}, null, 44, rt))), 128))
|
|
460
|
+
], 8, ut))
|
|
461
|
+
], 4)
|
|
462
|
+
], 36),
|
|
463
|
+
k.showZoomControls && !C(s) ? (v(), d("div", it, [
|
|
464
|
+
g("button", {
|
|
465
|
+
type: "button",
|
|
466
|
+
class: "kv-simple-map__control-btn",
|
|
467
|
+
disabled: !Ie.value,
|
|
468
|
+
"aria-label": "Zoom in",
|
|
469
|
+
onClick: Oe
|
|
470
|
+
}, [
|
|
471
|
+
L(Y, {
|
|
472
|
+
class: "tw-w-2 tw-h-2",
|
|
473
|
+
icon: C(et)
|
|
474
|
+
}, null, 8, ["icon"])
|
|
475
|
+
], 8, st),
|
|
476
|
+
g("button", {
|
|
477
|
+
type: "button",
|
|
478
|
+
class: "kv-simple-map__control-btn",
|
|
479
|
+
disabled: !Le.value,
|
|
480
|
+
"aria-label": "Zoom out",
|
|
481
|
+
onClick: Ze
|
|
482
|
+
}, [
|
|
483
|
+
L(Y, {
|
|
484
|
+
class: "tw-w-2 tw-h-2",
|
|
485
|
+
icon: C(tt)
|
|
486
|
+
}, null, 8, ["icon"])
|
|
487
|
+
], 8, ct)
|
|
488
|
+
])) : T("", !0),
|
|
489
|
+
Ee.value ? (v(), d("button", {
|
|
490
|
+
key: 1,
|
|
491
|
+
type: "button",
|
|
492
|
+
class: "kv-simple-map__control-btn kv-simple-map__play-btn tw-absolute tw-bottom-2 tw-right-2",
|
|
493
|
+
"aria-label": "Resume tour",
|
|
494
|
+
onClick: Ae
|
|
495
|
+
}, [
|
|
496
|
+
L(Y, {
|
|
497
|
+
class: "tw-w-2 tw-h-2",
|
|
498
|
+
icon: C(nt)
|
|
499
|
+
}, null, 8, ["icon"])
|
|
500
|
+
])) : T("", !0),
|
|
501
|
+
g("div", pt, [
|
|
502
|
+
L(Ke, { name: "kv-simple-map-popup" }, {
|
|
503
|
+
default: je(() => [
|
|
504
|
+
p.value ? (v(), d("div", {
|
|
505
|
+
key: p.value.country.id,
|
|
506
|
+
class: Je(["kv-simple-map__popup tw-absolute", `kv-simple-map__popup--${p.value.placement}`]),
|
|
507
|
+
style: $(p.value.style)
|
|
508
|
+
}, [
|
|
509
|
+
g("div", ft, [
|
|
510
|
+
Qe(e.$slots, "popup", {
|
|
511
|
+
country: p.value.country
|
|
512
|
+
}, () => [
|
|
513
|
+
g("div", mt, [
|
|
514
|
+
p.value.country.name ? (v(), d("div", vt, le(p.value.country.name), 1)) : T("", !0),
|
|
515
|
+
p.value.country.loanCount != null ? (v(), d("div", dt, le(Ne(p.value.country.loanCount)), 1)) : T("", !0)
|
|
516
|
+
])
|
|
517
|
+
], !0)
|
|
518
|
+
])
|
|
519
|
+
], 6)) : T("", !0)
|
|
520
|
+
]),
|
|
521
|
+
_: 3
|
|
522
|
+
})
|
|
523
|
+
])
|
|
524
|
+
], 4));
|
|
525
|
+
}
|
|
526
|
+
});
|
|
527
|
+
export {
|
|
528
|
+
St as default
|
|
529
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.kv-voting-card[data-v-
|
|
1
|
+
.kv-voting-card[data-v-482992ab]{max-width:300px}
|
package/dist/vue/KvVotingCard.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import u from "./KvVotingCard2.js";
|
|
2
|
-
import { resolveComponent as s, openBlock as o, createElementBlock as w, createElementVNode as t, renderSlot as v, toDisplayString as c, createBlock as i, createCommentVNode as
|
|
2
|
+
import { resolveComponent as s, openBlock as o, createElementBlock as w, createElementVNode as t, renderSlot as v, toDisplayString as c, createBlock as i, createCommentVNode as n, withCtx as x, createTextVNode as g } from "vue";
|
|
3
3
|
import "./KvVotingCard.css";
|
|
4
4
|
import h from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
5
|
const k = { class: "kv-voting-card tw-bg-white tw-rounded tw-shadow tw-p-1 tw-flex tw-flex-col tw-max-w-300" }, b = { class: "tw-relative tw-flex tw-w-full tw-bg-black tw-rounded tw-mb-1" }, p = {
|
|
6
6
|
class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-text-upper tw-inline-flex tw-items-center",
|
|
7
7
|
style: { padding: "2px 6px", "text-transform": "capitalize" }
|
|
8
|
-
}, C = { class: "tw-flex tw-flex-grow" }, y = { class: "tw-flex-grow" }, V = { class: "tw-
|
|
8
|
+
}, C = { class: "tw-flex tw-flex-grow" }, y = { class: "tw-flex-grow" }, V = { class: "tw-text-title" }, B = { class: "tw-flex-shrink" }, I = { class: "tw-flex tw-items-center tw-w-full tw-mb-1" }, N = {
|
|
9
9
|
key: 1,
|
|
10
10
|
class: "tw-ml-2 tw-font-medium"
|
|
11
11
|
};
|
|
12
|
-
function P(a,
|
|
13
|
-
const
|
|
12
|
+
function P(a, l, e, d, z, r) {
|
|
13
|
+
const _ = s("kv-material-icon"), m = s("kv-progress-bar"), f = s("kv-button");
|
|
14
14
|
return o(), w("div", k, [
|
|
15
15
|
t("div", b, [
|
|
16
16
|
v(a.$slots, "image", {}, void 0, !0),
|
|
17
17
|
t("div", p, [
|
|
18
|
-
|
|
18
|
+
l[0] || (l[0] = t("span", {
|
|
19
19
|
class: "tw-inline-flex tw-align-text-top",
|
|
20
20
|
"aria-hidden": "true",
|
|
21
21
|
role: "img"
|
|
@@ -39,36 +39,36 @@ function P(a, n, e, d, z, r) {
|
|
|
39
39
|
t("h3", V, c(e.category), 1)
|
|
40
40
|
]),
|
|
41
41
|
t("div", B, [
|
|
42
|
-
e.showInfoIcon ? (o(), i(
|
|
42
|
+
e.showInfoIcon ? (o(), i(_, {
|
|
43
43
|
key: 0,
|
|
44
44
|
icon: d.infoIcon,
|
|
45
45
|
class: "tw-h-3 tw-w-3",
|
|
46
46
|
onClick: r.handleInfoClick
|
|
47
|
-
}, null, 8, ["icon", "onClick"])) :
|
|
47
|
+
}, null, 8, ["icon", "onClick"])) : n("", !0)
|
|
48
48
|
])
|
|
49
49
|
]),
|
|
50
50
|
t("div", I, [
|
|
51
|
-
e.showPercentage ? (o(), i(
|
|
51
|
+
e.showPercentage ? (o(), i(m, {
|
|
52
52
|
key: 0,
|
|
53
53
|
class: "tw-flex-grow",
|
|
54
54
|
label: "Percent of votes for " + e.category,
|
|
55
55
|
value: e.percentage
|
|
56
|
-
}, null, 8, ["label", "value"])) :
|
|
57
|
-
e.showPercentage ? (o(), w("div", N, c(e.percentage) + "% ", 1)) :
|
|
56
|
+
}, null, 8, ["label", "value"])) : n("", !0),
|
|
57
|
+
e.showPercentage ? (o(), w("div", N, c(e.percentage) + "% ", 1)) : n("", !0)
|
|
58
58
|
]),
|
|
59
59
|
e.showVoteButton ? (o(), i(f, {
|
|
60
60
|
key: 0,
|
|
61
61
|
class: "tw-w-full",
|
|
62
62
|
onClick: r.castVote
|
|
63
63
|
}, {
|
|
64
|
-
default:
|
|
65
|
-
|
|
64
|
+
default: x(() => l[1] || (l[1] = [
|
|
65
|
+
g(" Vote ")
|
|
66
66
|
])),
|
|
67
67
|
_: 1
|
|
68
|
-
}, 8, ["onClick"])) :
|
|
68
|
+
}, 8, ["onClick"])) : n("", !0)
|
|
69
69
|
]);
|
|
70
70
|
}
|
|
71
|
-
const T = /* @__PURE__ */ h(u, [["render", P], ["__scopeId", "data-v-
|
|
71
|
+
const T = /* @__PURE__ */ h(u, [["render", P], ["__scopeId", "data-v-482992ab"]]);
|
|
72
72
|
export {
|
|
73
73
|
T as default
|
|
74
74
|
};
|