@kiva/kv-components 5.3.6 → 6.0.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/vue/KvCartModal.css +1 -1
- package/dist/vue/KvCartModal.js +78 -139
- package/package.json +4 -3
- package/build/libCss.js +0 -59
package/dist/vue/KvCartModal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.screen[data-v-
|
|
1
|
+
.screen[data-v-faf9d7e4]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;background-color:#0003}.modal[data-v-faf9d7e4]{width:100%;border-bottom-right-radius:.875rem;border-bottom-left-radius:.875rem;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}@media (min-width: 45.875rem){.modal[data-v-faf9d7e4]{position:absolute;right:0}}.modal[data-v-faf9d7e4]{max-height:90%}.modal__body[data-v-faf9d7e4]{display:flex;gap:1rem;padding-left:1.25rem;padding-right:1.25rem}@media (min-width: 45.875rem){.modal__body[data-v-faf9d7e4]{padding-left:2rem;padding-right:2rem}}.container[data-v-faf9d7e4]{position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 45.875rem){.modal[data-v-faf9d7e4]{max-width:24.5rem}}
|
package/dist/vue/KvCartModal.js
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
import { toRefs as
|
|
2
|
-
import { mdiClose as
|
|
3
|
-
import { useFocusTrap as
|
|
4
|
-
import { hideOthers as
|
|
5
|
-
import { unlockScroll as
|
|
6
|
-
import { unlockPrintSingleEl as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import tt from "./KvBorrowerImage.js";
|
|
1
|
+
import { toRefs as B, ref as f, computed as S, watch as M, onMounted as E, onBeforeUnmount as T, resolveComponent as C, openBlock as y, createBlock as N, Transition as V, withCtx as b, withDirectives as K, createElementVNode as e, withModifiers as p, renderSlot as x, createVNode as k, createElementBlock as F, createCommentVNode as I, createTextVNode as P, toDisplayString as R, vShow as j, nextTick as A } from "vue";
|
|
2
|
+
import { mdiClose as D, mdiCheckCircle as L } from "@mdi/js";
|
|
3
|
+
import { useFocusTrap as O } from "@vueuse/integrations/useFocusTrap";
|
|
4
|
+
import { hideOthers as U } from "../vendor/aria-hidden/dist/es2015/index.js";
|
|
5
|
+
import { unlockScroll as q, lockScroll as z } from "../utils/scrollLock.js";
|
|
6
|
+
import { unlockPrintSingleEl as G, lockPrintSingleEl as H } from "../utils/printing.js";
|
|
7
|
+
import J from "./KvButton.js";
|
|
8
|
+
import Q from "./KvMaterialIcon.js";
|
|
10
9
|
import "./KvCartModal.css";
|
|
11
|
-
import
|
|
12
|
-
const
|
|
10
|
+
import W from "../_virtual/_plugin-vue_export-helper.js";
|
|
11
|
+
const X = {
|
|
13
12
|
components: {
|
|
14
|
-
KvMaterialIcon:
|
|
15
|
-
KvButton:
|
|
16
|
-
KvBorrowerImage: tt
|
|
13
|
+
KvMaterialIcon: Q,
|
|
14
|
+
KvButton: J
|
|
17
15
|
},
|
|
18
16
|
props: {
|
|
19
17
|
/**
|
|
@@ -37,101 +35,69 @@ const ot = {
|
|
|
37
35
|
basketCount: {
|
|
38
36
|
type: Number,
|
|
39
37
|
default: 0
|
|
40
|
-
},
|
|
41
|
-
/**
|
|
42
|
-
* The loan added to the basket
|
|
43
|
-
* */
|
|
44
|
-
addedLoan: {
|
|
45
|
-
type: Object,
|
|
46
|
-
default: () => ({})
|
|
47
|
-
},
|
|
48
|
-
/**
|
|
49
|
-
* The photo path for the borrower image
|
|
50
|
-
* */
|
|
51
|
-
photoPath: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: ""
|
|
54
38
|
}
|
|
55
39
|
},
|
|
56
40
|
emits: [
|
|
57
41
|
"cart-modal-closed"
|
|
58
42
|
],
|
|
59
|
-
setup(
|
|
43
|
+
setup(c, { emit: t }) {
|
|
60
44
|
const {
|
|
61
|
-
visible:
|
|
62
|
-
preventClose:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
c.value
|
|
45
|
+
visible: l,
|
|
46
|
+
preventClose: o
|
|
47
|
+
} = B(c), s = f(null), n = f(null), d = f(null), m = S(() => [
|
|
48
|
+
s.value
|
|
66
49
|
// This cart modal
|
|
67
50
|
]), {
|
|
68
51
|
activate: r,
|
|
69
|
-
deactivate:
|
|
70
|
-
} =
|
|
52
|
+
deactivate: h
|
|
53
|
+
} = O(m, {
|
|
71
54
|
allowOutsideClick: !0
|
|
72
55
|
// allow clicking outside the cart modal to close it
|
|
73
56
|
});
|
|
74
57
|
let u = null, v = null;
|
|
75
|
-
const
|
|
76
|
-
|
|
58
|
+
const a = (i = "") => {
|
|
59
|
+
s.value && n.value && (h(), n.value.scrollTop = 0, G(n.value)), q(), u && (u(), u = null), document.removeEventListener("keyup", v), t("cart-modal-closed", { type: i });
|
|
77
60
|
};
|
|
78
|
-
v = (
|
|
79
|
-
|
|
61
|
+
v = (i) => {
|
|
62
|
+
i && i.key === "Escape" && !o.value && a();
|
|
80
63
|
};
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
|
|
64
|
+
const _ = () => {
|
|
65
|
+
o.value || a("background");
|
|
66
|
+
}, w = () => {
|
|
67
|
+
l.value && (document.addEventListener("keyup", v), A(() => {
|
|
68
|
+
s.value && n.value && (r(), u = U(s.value), H(n.value)), z();
|
|
86
69
|
}));
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
return ((l = i.value) == null ? void 0 : l.name) ?? "";
|
|
90
|
-
}), M = d(() => ({
|
|
91
|
-
alt: `Photo of ${_.value}`,
|
|
92
|
-
aspectRatio: 1,
|
|
93
|
-
defaultImage: { width: 300 },
|
|
94
|
-
hash: i.value.imageHash,
|
|
95
|
-
images: [
|
|
96
|
-
{
|
|
97
|
-
width: 300
|
|
98
|
-
}
|
|
99
|
-
]
|
|
100
|
-
})), E = d(() => i.value.country ?? ""), T = d(() => i.value.amount ?? ""), N = (l) => {
|
|
101
|
-
s(l);
|
|
70
|
+
}, g = (i) => {
|
|
71
|
+
a(i);
|
|
102
72
|
};
|
|
103
|
-
return
|
|
104
|
-
|
|
105
|
-
}),
|
|
106
|
-
|
|
73
|
+
return M(l, () => {
|
|
74
|
+
l.value ? w() : a();
|
|
75
|
+
}), E(() => {
|
|
76
|
+
l.value && (w(), setTimeout(() => {
|
|
107
77
|
t("cart-modal-closed", { type: "time" });
|
|
108
78
|
}, 1e4));
|
|
109
|
-
}),
|
|
110
|
-
mdiClose:
|
|
111
|
-
mdiCheckCircle:
|
|
79
|
+
}), T(() => a()), {
|
|
80
|
+
mdiClose: D,
|
|
81
|
+
mdiCheckCircle: L,
|
|
112
82
|
onKeyUp: v,
|
|
113
|
-
onScreenClick:
|
|
114
|
-
hide:
|
|
115
|
-
show:
|
|
116
|
-
controlsRef:
|
|
117
|
-
handleClick:
|
|
118
|
-
borrowerName: _,
|
|
119
|
-
borrowerImage: M,
|
|
120
|
-
borrowerCountry: E,
|
|
121
|
-
amount: T
|
|
83
|
+
onScreenClick: _,
|
|
84
|
+
hide: a,
|
|
85
|
+
show: w,
|
|
86
|
+
controlsRef: d,
|
|
87
|
+
handleClick: g
|
|
122
88
|
};
|
|
123
89
|
}
|
|
124
|
-
},
|
|
90
|
+
}, Y = { class: "container" }, Z = { class: "tw-flex tw-pt-2 tw-px-2.5" }, $ = { class: "tw-flex tw-flex-grow tw-gap-1 tw-items-center tw-pb-2" }, tt = {
|
|
125
91
|
id: "kvCartModalBody",
|
|
126
92
|
ref: "kvCartModalBody",
|
|
127
93
|
class: "modal__body"
|
|
128
|
-
},
|
|
94
|
+
}, et = {
|
|
129
95
|
ref: "controlsRef",
|
|
130
|
-
class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-
|
|
96
|
+
class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-px-2.5 tw-pb-2 tw-flex-col tw-gap-1"
|
|
131
97
|
};
|
|
132
|
-
function
|
|
133
|
-
const
|
|
134
|
-
return
|
|
98
|
+
function ot(c, t, l, o, s, n) {
|
|
99
|
+
const d = C("kv-material-icon"), m = C("kv-button");
|
|
100
|
+
return y(), N(V, {
|
|
135
101
|
"enter-active-class": "tw-transition-opacity tw-duration-300",
|
|
136
102
|
"leave-active-class": "tw-transition-opacity tw-duration-300",
|
|
137
103
|
"enter-class": "tw-opacity-0",
|
|
@@ -139,97 +105,70 @@ function mt(p, t, a, e, i, c) {
|
|
|
139
105
|
"leave-class": "tw-opacity-full",
|
|
140
106
|
"leave-to-class": "tw-opacity-0"
|
|
141
107
|
}, {
|
|
142
|
-
default:
|
|
143
|
-
|
|
108
|
+
default: b(() => [
|
|
109
|
+
K(e("div", {
|
|
144
110
|
class: "screen",
|
|
145
|
-
onClick: t[
|
|
111
|
+
onClick: t[3] || (t[3] = p((...r) => o.onScreenClick && o.onScreenClick(...r), ["stop", "prevent"]))
|
|
146
112
|
}, [
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
113
|
+
e("div", null, [
|
|
114
|
+
e("div", Y, [
|
|
115
|
+
e("div", {
|
|
150
116
|
ref: "kvCartModal",
|
|
151
117
|
tabindex: "-1",
|
|
152
118
|
"data-test": "kv-cart-modal",
|
|
153
119
|
class: "modal",
|
|
154
120
|
"aria-modal": "true",
|
|
155
121
|
"aria-label": "Added to basket",
|
|
156
|
-
onClick: t[
|
|
122
|
+
onClick: t[2] || (t[2] = p(() => {
|
|
157
123
|
}, ["stop"]))
|
|
158
124
|
}, [
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
class: "tw-w-
|
|
164
|
-
icon:
|
|
125
|
+
e("div", Z, [
|
|
126
|
+
e("div", $, [
|
|
127
|
+
x(c.$slots, "header", {}, () => [
|
|
128
|
+
k(d, {
|
|
129
|
+
class: "tw-w-3.5 tw-h-3.5 tw-text-brand",
|
|
130
|
+
icon: o.mdiCheckCircle
|
|
165
131
|
}, null, 8, ["icon"]),
|
|
166
|
-
t[
|
|
132
|
+
t[4] || (t[4] = e("p", { class: "tw-flex-1 tw-font-medium tw-text-center" }, " Added to basket ", -1))
|
|
167
133
|
], !0),
|
|
168
|
-
|
|
134
|
+
l.preventClose ? I("", !0) : (y(), F("button", {
|
|
169
135
|
key: 0,
|
|
170
136
|
class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
|
|
171
|
-
onClick: t[0] || (t[0] =
|
|
137
|
+
onClick: t[0] || (t[0] = p((r) => o.hide("x-button"), ["stop"]))
|
|
172
138
|
}, [
|
|
173
|
-
|
|
174
|
-
class: "tw-w-3 tw-h-3",
|
|
175
|
-
icon:
|
|
139
|
+
k(d, {
|
|
140
|
+
class: "tw-w-3.5 tw-h-3.5",
|
|
141
|
+
icon: o.mdiClose
|
|
176
142
|
}, null, 8, ["icon"]),
|
|
177
|
-
t[
|
|
143
|
+
t[5] || (t[5] = e("span", { class: "tw-sr-only" }, "Close", -1))
|
|
178
144
|
]))
|
|
179
145
|
])
|
|
180
146
|
]),
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
w(k, {
|
|
184
|
-
class: "tw-rounded loan-image",
|
|
185
|
-
alt: e.borrowerImage.alt,
|
|
186
|
-
"aspect-ratio": e.borrowerImage.aspectRatio,
|
|
187
|
-
"default-image": e.borrowerImage.defaultImage,
|
|
188
|
-
hash: e.borrowerImage.hash,
|
|
189
|
-
images: e.borrowerImage.images,
|
|
190
|
-
"photo-path": a.photoPath
|
|
191
|
-
}, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"])
|
|
192
|
-
]),
|
|
193
|
-
o("div", st, [
|
|
194
|
-
o("div", it, [
|
|
195
|
-
o("p", ct, f(e.borrowerName), 1),
|
|
196
|
-
o("p", dt, f(e.borrowerCountry), 1)
|
|
197
|
-
]),
|
|
198
|
-
o("p", null, " $" + f(e.amount), 1)
|
|
199
|
-
])
|
|
147
|
+
e("div", tt, [
|
|
148
|
+
x(c.$slots, "content", {}, void 0, !0)
|
|
200
149
|
], 512),
|
|
201
|
-
|
|
202
|
-
|
|
150
|
+
e("div", et, [
|
|
151
|
+
k(m, {
|
|
203
152
|
class: "tw-w-full",
|
|
204
|
-
onClick: t[1] || (t[1] = (r) =>
|
|
153
|
+
onClick: t[1] || (t[1] = (r) => o.handleClick("view-basket"))
|
|
205
154
|
}, {
|
|
206
|
-
default:
|
|
207
|
-
|
|
155
|
+
default: b(() => [
|
|
156
|
+
P(" View basket (" + R(l.basketCount) + ") ", 1)
|
|
208
157
|
]),
|
|
209
158
|
_: 1
|
|
210
|
-
}),
|
|
211
|
-
w(m, {
|
|
212
|
-
class: "tw-w-full",
|
|
213
|
-
variant: "secondary",
|
|
214
|
-
onClick: t[2] || (t[2] = (r) => e.handleClick("help-another-person"))
|
|
215
|
-
}, {
|
|
216
|
-
default: g(() => t[7] || (t[7] = [
|
|
217
|
-
I(" Help another person ")
|
|
218
|
-
])),
|
|
219
|
-
_: 1
|
|
220
159
|
})
|
|
221
160
|
], 512)
|
|
222
161
|
], 512)
|
|
223
162
|
])
|
|
224
163
|
])
|
|
225
164
|
], 512), [
|
|
226
|
-
[
|
|
165
|
+
[j, l.visible]
|
|
227
166
|
])
|
|
228
167
|
]),
|
|
229
168
|
_: 3
|
|
230
169
|
});
|
|
231
170
|
}
|
|
232
|
-
const
|
|
171
|
+
const mt = /* @__PURE__ */ W(X, [["render", ot], ["__scopeId", "data-v-faf9d7e4"]]);
|
|
233
172
|
export {
|
|
234
|
-
|
|
173
|
+
mt as default
|
|
235
174
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"@babel/preset-react": "^7.24.7",
|
|
20
20
|
"@babel/preset-typescript": "^7.24.7",
|
|
21
21
|
"@kiva/kv-tokens": "^3.1.0",
|
|
22
|
+
"@kiva/vite-plugin-vue-lib-css": "^2.0.0",
|
|
22
23
|
"@laynezh/vite-plugin-lib-assets": "^0.6.1",
|
|
23
24
|
"@mdi/js": "^7.4.47",
|
|
24
25
|
"@storybook/addon-a11y": "^8.4.7",
|
|
@@ -99,12 +100,12 @@
|
|
|
99
100
|
"numeral": "2.x",
|
|
100
101
|
"vue": "3.x"
|
|
101
102
|
},
|
|
102
|
-
"
|
|
103
|
+
"bundleDependencies": [
|
|
103
104
|
"aria-hidden",
|
|
104
105
|
"embla-carousel",
|
|
105
106
|
"embla-carousel-autoplay",
|
|
106
107
|
"embla-carousel-fade",
|
|
107
108
|
"popper.js"
|
|
108
109
|
],
|
|
109
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "59c2c9181a16a9e579b56826a5cb3415226b1859"
|
|
110
111
|
}
|
package/build/libCss.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { writeFileSync } from 'node:fs';
|
|
2
|
-
import {
|
|
3
|
-
basename,
|
|
4
|
-
dirname,
|
|
5
|
-
relative,
|
|
6
|
-
resolve,
|
|
7
|
-
} from 'node:path';
|
|
8
|
-
|
|
9
|
-
let viteConfig;
|
|
10
|
-
|
|
11
|
-
export default function libCss() {
|
|
12
|
-
return {
|
|
13
|
-
name: 'lib-css',
|
|
14
|
-
apply: 'build',
|
|
15
|
-
enforce: 'post',
|
|
16
|
-
|
|
17
|
-
// Get Vite config when it's resolved to use later
|
|
18
|
-
configResolved(config) {
|
|
19
|
-
viteConfig = config;
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
// Write css import statements to files with imported css after bundle is created
|
|
23
|
-
writeBundle(option, bundle) {
|
|
24
|
-
// Only run for es format in library mode
|
|
25
|
-
if (!viteConfig.build?.lib || option.format !== 'es') {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const { root } = viteConfig;
|
|
30
|
-
const { outDir } = viteConfig.build;
|
|
31
|
-
const cssReplaceRegex = /\/\* empty css \s*\*\//;
|
|
32
|
-
const files = Object.keys(bundle);
|
|
33
|
-
|
|
34
|
-
// Find files with imported css
|
|
35
|
-
const filesWithImportedCss = files.filter((file) => bundle[file].viteMetadata?.importedCss?.size > 0);
|
|
36
|
-
|
|
37
|
-
// Replace empty css comment with css import statement in each file
|
|
38
|
-
filesWithImportedCss.forEach((file) => {
|
|
39
|
-
if (bundle[file].viteMetadata.importedCss.size > 1) {
|
|
40
|
-
console.warn(`Multiple css file imports not supported yet, skipping ${file}`);
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// Get css import path relative to current file
|
|
45
|
-
const [cssPath] = bundle[file].viteMetadata.importedCss;
|
|
46
|
-
const cssImportPath = relative(dirname(file), cssPath);
|
|
47
|
-
|
|
48
|
-
// Add prefix for current directory to css import path if necessary
|
|
49
|
-
const prefix = cssImportPath === basename(cssPath) ? './' : '';
|
|
50
|
-
|
|
51
|
-
// Replace empty css comment with css import statement
|
|
52
|
-
const fileContent = bundle[file].code.replace(cssReplaceRegex, `import "${prefix}${cssImportPath}";`);
|
|
53
|
-
|
|
54
|
-
// Write updated file content
|
|
55
|
-
writeFileSync(resolve(root, outDir, file), fileContent);
|
|
56
|
-
});
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
}
|