@viur/shop-components 0.15.5 → 0.15.6
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/package.json +1 -1
- package/src/components/CartItem.vue +54 -18
- package/src/components/CartItemSmall.vue +54 -18
- package/src/components/DiscountInput.vue +13 -3
- package/src/main.js +13 -4
package/package.json
CHANGED
|
@@ -36,17 +36,8 @@
|
|
|
36
36
|
|
|
37
37
|
<div class="viur-shop-cart-leaf-quantity">
|
|
38
38
|
<div class="viur-shop-cart-leaf-label">{{$t('viur.shop.quantity')}}</div>
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
|
|
42
|
-
type="number"
|
|
43
|
-
placeholder="Number"
|
|
44
|
-
min="0"
|
|
45
|
-
noSpinButtons
|
|
46
|
-
:value="item.quantity"
|
|
47
|
-
@sl-change="changeAmount($event.target.value)"
|
|
48
|
-
>
|
|
49
|
-
<dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
|
|
39
|
+
<div class="viur-shop-cart-leaf-quantity-row">
|
|
40
|
+
<dialog-Button class="viur-shop-cart-leaf-delete" variant="danger" outline :disabled="!edit">
|
|
50
41
|
<sl-icon name="trash"></sl-icon>
|
|
51
42
|
<template #dialog="{close}">
|
|
52
43
|
{{ $t('messages.remove_article_from_cart') }}
|
|
@@ -56,13 +47,24 @@
|
|
|
56
47
|
</sl-bar>
|
|
57
48
|
</template>
|
|
58
49
|
</dialog-Button>
|
|
59
|
-
<sl-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
<sl-input
|
|
51
|
+
:disabled="!edit"
|
|
52
|
+
class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
|
|
53
|
+
type="number"
|
|
54
|
+
placeholder="Number"
|
|
55
|
+
min="1"
|
|
56
|
+
noSpinButtons
|
|
57
|
+
:value="item.quantity"
|
|
58
|
+
@sl-change="changeAmount($event.target.value)"
|
|
59
|
+
>
|
|
60
|
+
<sl-button slot="prefix" :disabled="!edit" @click="decrement">
|
|
61
|
+
<sl-icon name="dash-lg"></sl-icon>
|
|
62
|
+
</sl-button>
|
|
63
|
+
<sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
|
|
64
|
+
<sl-icon name="plus-lg"></sl-icon>
|
|
65
|
+
</sl-button>
|
|
66
|
+
</sl-input>
|
|
67
|
+
</div>
|
|
66
68
|
</div>
|
|
67
69
|
|
|
68
70
|
<div class="viur-shop-cart-leaf-unitprice">
|
|
@@ -124,6 +126,12 @@ function removeArticle(){
|
|
|
124
126
|
removeItem(props.item['article']['dest']['key'])
|
|
125
127
|
}
|
|
126
128
|
|
|
129
|
+
function decrement(){
|
|
130
|
+
if (props.item.quantity > 1) {
|
|
131
|
+
changeAmount(props.item.quantity -= 1)
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
127
135
|
</script>
|
|
128
136
|
<style scoped>
|
|
129
137
|
@layer foundation.shop {
|
|
@@ -303,6 +311,23 @@ function removeArticle(){
|
|
|
303
311
|
}
|
|
304
312
|
}
|
|
305
313
|
|
|
314
|
+
.viur-shop-cart-leaf-quantity-row {
|
|
315
|
+
display: flex;
|
|
316
|
+
align-items: center;
|
|
317
|
+
gap: var(--sl-spacing-x-small);
|
|
318
|
+
width: 100%;
|
|
319
|
+
min-width: 0;
|
|
320
|
+
|
|
321
|
+
& .viur-shop-cart-leaf-value--quantity {
|
|
322
|
+
flex: 1;
|
|
323
|
+
min-width: 0;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.viur-shop-cart-leaf-delete {
|
|
328
|
+
flex-shrink: 0;
|
|
329
|
+
}
|
|
330
|
+
|
|
306
331
|
.viur-shop-cart-leaf-unitprice {
|
|
307
332
|
grid-column: 3 / span 1;
|
|
308
333
|
align-self: center;
|
|
@@ -377,4 +402,15 @@ function removeArticle(){
|
|
|
377
402
|
}
|
|
378
403
|
|
|
379
404
|
}
|
|
405
|
+
|
|
406
|
+
.viur-shop-cart-leaf-delete::part(base) {
|
|
407
|
+
border-radius: 0;
|
|
408
|
+
height: var(--sl-input-height-medium);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.viur-shop-cart-leaf-delete::part(label) {
|
|
412
|
+
padding: 0 var(--sl-spacing-small);
|
|
413
|
+
display: flex;
|
|
414
|
+
align-items: center;
|
|
415
|
+
}
|
|
380
416
|
</style>
|
|
@@ -18,17 +18,8 @@
|
|
|
18
18
|
v-html="getValue(item.shop_name)"
|
|
19
19
|
></h4>
|
|
20
20
|
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
|
|
24
|
-
type="number"
|
|
25
|
-
placeholder="Number"
|
|
26
|
-
min="0"
|
|
27
|
-
noSpinButtons
|
|
28
|
-
:value="item.quantity"
|
|
29
|
-
@sl-change="changeAmount($event.target.value)"
|
|
30
|
-
>
|
|
31
|
-
<dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline :disabled="!edit">
|
|
21
|
+
<div class="viur-shop-cart-leaf-quantity-row">
|
|
22
|
+
<dialog-Button class="viur-shop-cart-leaf-delete" variant="danger" outline :disabled="!edit">
|
|
32
23
|
<sl-icon name="trash"></sl-icon>
|
|
33
24
|
<template #dialog="{close}">
|
|
34
25
|
{{ $t('messages.remove_article_from_cart') }}
|
|
@@ -38,13 +29,24 @@
|
|
|
38
29
|
</sl-bar>
|
|
39
30
|
</template>
|
|
40
31
|
</dialog-Button>
|
|
41
|
-
<sl-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
<sl-input
|
|
33
|
+
:disabled="!edit"
|
|
34
|
+
class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
|
|
35
|
+
type="number"
|
|
36
|
+
placeholder="Number"
|
|
37
|
+
min="1"
|
|
38
|
+
noSpinButtons
|
|
39
|
+
:value="item.quantity"
|
|
40
|
+
@sl-change="changeAmount($event.target.value)"
|
|
41
|
+
>
|
|
42
|
+
<sl-button slot="prefix" :disabled="!edit" @click="decrement">
|
|
43
|
+
<sl-icon name="dash-lg"></sl-icon>
|
|
44
|
+
</sl-button>
|
|
45
|
+
<sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
|
|
46
|
+
<sl-icon name="plus-lg"></sl-icon>
|
|
47
|
+
</sl-button>
|
|
48
|
+
</sl-input>
|
|
49
|
+
</div>
|
|
48
50
|
|
|
49
51
|
<div class="viur-shop-cart-leaf-article-number">
|
|
50
52
|
<div class="viur-shop-cart-leaf-label">{{ $t('viur.shop.article_number') }}</div>
|
|
@@ -96,6 +98,12 @@ function removeArticle(){
|
|
|
96
98
|
removeItem(props.item['article']['dest']['key'])
|
|
97
99
|
}
|
|
98
100
|
|
|
101
|
+
function decrement(){
|
|
102
|
+
if (props.item.quantity > 1) {
|
|
103
|
+
changeAmount(props.item.quantity -= 1)
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
99
107
|
</script>
|
|
100
108
|
<style scoped>
|
|
101
109
|
@layer foundation.shop {
|
|
@@ -180,6 +188,23 @@ function removeArticle(){
|
|
|
180
188
|
align-self: flex-end;
|
|
181
189
|
}
|
|
182
190
|
|
|
191
|
+
.viur-shop-cart-leaf-quantity-row {
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
gap: var(--sl-spacing-x-small);
|
|
195
|
+
width: 100%;
|
|
196
|
+
min-width: 0;
|
|
197
|
+
|
|
198
|
+
& .viur-shop-cart-leaf-value--quantity {
|
|
199
|
+
flex: 1;
|
|
200
|
+
min-width: 0;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.viur-shop-cart-leaf-delete {
|
|
205
|
+
flex-shrink: 0;
|
|
206
|
+
}
|
|
207
|
+
|
|
183
208
|
.viur-shop-cart-leaf-unitprice {
|
|
184
209
|
align-self: flex-end;
|
|
185
210
|
grid-column: 4 / span 1;
|
|
@@ -244,4 +269,15 @@ function removeArticle(){
|
|
|
244
269
|
}
|
|
245
270
|
|
|
246
271
|
}
|
|
272
|
+
|
|
273
|
+
.viur-shop-cart-leaf-delete::part(base) {
|
|
274
|
+
border-radius: 0;
|
|
275
|
+
height: var(--sl-input-height-medium);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.viur-shop-cart-leaf-delete::part(label) {
|
|
279
|
+
padding: 0 var(--sl-spacing-small);
|
|
280
|
+
display: flex;
|
|
281
|
+
align-items: center;
|
|
282
|
+
}
|
|
247
283
|
</style>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</div>
|
|
22
22
|
</template>
|
|
23
23
|
</template>
|
|
24
|
-
<
|
|
24
|
+
<div class="viur-shop-input-wrapper">
|
|
25
25
|
<sl-input
|
|
26
26
|
class="viur-shop-discount-input"
|
|
27
27
|
:placeholder="$t('viur.shop.add_discount_placeholder')"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
>
|
|
31
31
|
</sl-input>
|
|
32
32
|
<sl-button @click="addDiscountAction()" :loading="state.loading">{{ $t('viur.shop.add_discount') }}</sl-button>
|
|
33
|
-
</
|
|
33
|
+
</div>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
@@ -92,7 +92,17 @@ function removeDiscountAction(key){
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.viur-shop-discount-input {
|
|
95
|
-
flex
|
|
95
|
+
flex: 1 1 100%;
|
|
96
|
+
min-width: 0;
|
|
96
97
|
}
|
|
97
98
|
|
|
99
|
+
.viur-shop-input-wrapper {
|
|
100
|
+
display: flex;
|
|
101
|
+
gap: var(--sl-spacing-small);
|
|
102
|
+
max-width: 100%;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.viur-shop-input-wrapper sl-button {
|
|
106
|
+
flex-shrink: 0;
|
|
107
|
+
}
|
|
98
108
|
</style>
|
package/src/main.js
CHANGED
|
@@ -24,8 +24,14 @@ const ViurShopComponents = {
|
|
|
24
24
|
|
|
25
25
|
app.use(createPinia());
|
|
26
26
|
|
|
27
|
+
// If an i18n instance is passed in, share it (don't create a second, competing
|
|
28
|
+
// instance). Otherwise create our own (Composition mode + globalInjection so that
|
|
29
|
+
// $t in templates and useI18n() use the same composer).
|
|
30
|
+
const sharedI18n = !!options?.i18n
|
|
27
31
|
let messages = {}
|
|
28
|
-
const i18n = createI18n({
|
|
32
|
+
const i18n = options?.i18n || createI18n({
|
|
33
|
+
legacy: false,
|
|
34
|
+
globalInjection: true,
|
|
29
35
|
locale: defaultLocale,
|
|
30
36
|
fallbackLocale: fallback,
|
|
31
37
|
messages: messages,
|
|
@@ -47,9 +53,12 @@ const ViurShopComponents = {
|
|
|
47
53
|
}
|
|
48
54
|
updateLocaleMessages(loc, messages[loc])
|
|
49
55
|
}
|
|
50
|
-
app.use(
|
|
51
|
-
|
|
52
|
-
|
|
56
|
+
// A shared instance is installed by the host (main.js) via app.use() — don't install it twice here.
|
|
57
|
+
if (!sharedI18n) {
|
|
58
|
+
app.use(
|
|
59
|
+
i18n
|
|
60
|
+
);
|
|
61
|
+
}
|
|
53
62
|
},
|
|
54
63
|
};
|
|
55
64
|
|