@rypen-dev/shared-components 4.1.2 → 4.2.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.
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/AddressDisplay.vue +9 -1
- package/src/components/ModalWrapper.vue +3 -10
- package/src/components/ProductImageSelector.vue +2 -4
- package/src/components/icons/IconApprove.vue +6 -4
- package/src/components/icons/IconBase.vue +5 -11
- package/src/components/icons/IconCaret.vue +3 -1
- package/src/components/icons/IconClose.vue +6 -4
- package/src/components/icons/IconQrCode.vue +541 -539
- package/src/components/icons/IconSave.vue +14 -12
- package/src/components/icons/IconSetup.vue +33 -0
- package/src/components/icons/IconShare.vue +14 -12
- package/src/index.js +3 -0
package/package.json
CHANGED
|
@@ -49,6 +49,10 @@
|
|
|
49
49
|
type: Boolean,
|
|
50
50
|
default: false,
|
|
51
51
|
},
|
|
52
|
+
excludeName: {
|
|
53
|
+
type: Boolean,
|
|
54
|
+
default: false,
|
|
55
|
+
},
|
|
52
56
|
},
|
|
53
57
|
data: () => {
|
|
54
58
|
return {
|
|
@@ -63,7 +67,11 @@
|
|
|
63
67
|
},
|
|
64
68
|
computed: {
|
|
65
69
|
fullName() {
|
|
66
|
-
|
|
70
|
+
if (!this.excludeName) {
|
|
71
|
+
return (this.address.FirstName || '') + (this.address.FirstName && this.address.LastName ? ' ' : '') + (this.address.LastName || '');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return null;
|
|
67
75
|
},
|
|
68
76
|
}
|
|
69
77
|
}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
<transition name="modal">
|
|
3
3
|
<div class="modal-mask hide-for-print" :class="maskCssClass" @click="closeIfCloseable">
|
|
4
4
|
<div class="modal-container" :class="cssClass">
|
|
5
|
-
<a v-if="closeable" class="close" @click="$emit('close')"><icon-
|
|
5
|
+
<a v-if="closeable" class="close" @click="$emit('close')"><icon-close" width="24" height="24" /></a>
|
|
6
6
|
<div class="modal-wrapper">
|
|
7
|
-
<div class="modal-grid" :class="{ 'with-footer':
|
|
7
|
+
<div class="modal-grid" :class="{ 'with-footer': !!$slots.footer }">
|
|
8
8
|
<div class="scrollable-content">
|
|
9
9
|
<div class="modal-header">
|
|
10
10
|
<h3 v-if="header || subheader">{{ header }} <small v-if="subheader">{{ subheader }}</small></h3>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<slot name="body"></slot>
|
|
14
14
|
</div>
|
|
15
15
|
</div>
|
|
16
|
-
<div
|
|
16
|
+
<div v-if="$slots.footer" class="modal-footer">
|
|
17
17
|
<slot name="footer"></slot>
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script>
|
|
27
|
-
import IconBase from "./icons/IconBase.vue";
|
|
28
27
|
import IconClose from "./icons/IconClose.vue";
|
|
29
28
|
|
|
30
29
|
export default {
|
|
@@ -51,7 +50,6 @@
|
|
|
51
50
|
}
|
|
52
51
|
},
|
|
53
52
|
components: {
|
|
54
|
-
IconBase,
|
|
55
53
|
IconClose,
|
|
56
54
|
},
|
|
57
55
|
methods: {
|
|
@@ -61,10 +59,5 @@
|
|
|
61
59
|
}
|
|
62
60
|
}
|
|
63
61
|
},
|
|
64
|
-
computed: {
|
|
65
|
-
hasFooter() {
|
|
66
|
-
return !!this.$slots.footer;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
62
|
}
|
|
70
63
|
</script>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
10
|
<nav v-if="product || forceNav" class="image-nav">
|
|
11
|
-
<a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-
|
|
11
|
+
<a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-caret width="32" height="32" /></a>
|
|
12
12
|
<div class="image-nav-list" :class="imageListClass">
|
|
13
13
|
<a class="variant-image" :class="{ current: variantImageSelected }" @click="selectVariantImage" :style="shiftStyle">
|
|
14
14
|
<img :src="variantImagePath" alt="" />
|
|
@@ -22,12 +22,11 @@
|
|
|
22
22
|
</a>
|
|
23
23
|
</template>
|
|
24
24
|
</div>
|
|
25
|
-
<a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-
|
|
25
|
+
<a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-caret width="32" height="32" /></a>
|
|
26
26
|
</nav>
|
|
27
27
|
</div>
|
|
28
28
|
</template>
|
|
29
29
|
<script>
|
|
30
|
-
import IconBase from "./icons/IconBase.vue";
|
|
31
30
|
import IconCaret from "./icons/IconCaret.vue";
|
|
32
31
|
|
|
33
32
|
export default {
|
|
@@ -170,7 +169,6 @@
|
|
|
170
169
|
},
|
|
171
170
|
},
|
|
172
171
|
components: {
|
|
173
|
-
IconBase,
|
|
174
172
|
IconCaret,
|
|
175
173
|
}
|
|
176
174
|
};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 42.76" class="icon">
|
|
3
|
+
<g>
|
|
4
|
+
<path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M38.52,23.01c-0.18,8.84-6.87,16.41-15.9,17.45c-9.85,1.13-18.75-5.93-19.88-15.78 C1.62,14.83,8.69,5.93,18.54,4.8c3.87-0.45,7.78,0.38,11.14,2.36"/>
|
|
5
|
+
<path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M13.39,20.36l7.68,7.69L47.93,2.42"/>
|
|
6
|
+
</g>
|
|
7
|
+
</svg>
|
|
6
8
|
</template>
|
|
7
9
|
|
|
8
10
|
<script>
|
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
3
3
|
:width="width"
|
|
4
4
|
:height="height"
|
|
5
|
-
:
|
|
6
|
-
:aria-labelledby="iconName"
|
|
5
|
+
:aria-label="title"
|
|
7
6
|
role="presentation"
|
|
8
|
-
class="icon"
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
<slot></slot>
|
|
7
|
+
class="icon">
|
|
8
|
+
<title lang="en">{{ title }}</title>
|
|
9
|
+
<use :xlink:href="'#' + iconName"></use>
|
|
12
10
|
</svg>
|
|
13
11
|
</template>
|
|
14
12
|
|
|
@@ -18,7 +16,7 @@
|
|
|
18
16
|
title: String,
|
|
19
17
|
iconName: {
|
|
20
18
|
type: String,
|
|
21
|
-
default: '
|
|
19
|
+
default: 'icon-close',
|
|
22
20
|
},
|
|
23
21
|
width: {
|
|
24
22
|
type: [Number, String],
|
|
@@ -28,10 +26,6 @@
|
|
|
28
26
|
type: [Number, String],
|
|
29
27
|
default: 64,
|
|
30
28
|
},
|
|
31
|
-
viewbox: {
|
|
32
|
-
type: String,
|
|
33
|
-
default: '0 0 72 72',
|
|
34
|
-
},
|
|
35
29
|
},
|
|
36
30
|
}
|
|
37
31
|
</script>
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
|
|
3
|
+
<path fill="none" fill-rule="evenodd" class="stroke-target" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10l6.119 6L18 10" />
|
|
4
|
+
</svg>
|
|
3
5
|
</template>
|
|
4
6
|
|
|
5
7
|
<script>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
|
|
3
|
+
<g class="color-target" transform="translate(3 3.5)">
|
|
4
|
+
<rect width="20" height="3" x="-1" y="7" rx="1" transform="rotate(45 9 8.5)"/>
|
|
5
|
+
<rect width="20" height="3" x="-1" y="7" rx="1" transform="scale(-1 1) rotate(45 0 -13.228)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</svg>
|
|
6
8
|
</template>
|
|
7
9
|
|
|
8
10
|
<script>
|