@awes-io/ui 2.135.0 → 2.136.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/CHANGELOG.md +19 -0
- package/assets/css/components/_index.css +1 -0
- package/assets/css/components/cropper.css +114 -14
- package/assets/css/components/image-upload.css +4 -6
- package/assets/css/components/info.css +2 -2
- package/assets/css/components/layout-error.css +49 -0
- package/assets/css/components/page-single.css +4 -0
- package/assets/js/icons/mono.js +2 -0
- package/components/3_organisms/AwCropper.vue +35 -32
- package/components/3_organisms/AwImageUpload.vue +33 -7
- package/components/5_layouts/AwLayoutError.vue +124 -28
- package/nuxt/awes.config.js +2 -2
- package/nuxt/layouts/error.vue +1 -8
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.136.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.135.0...@awes-io/ui@2.136.0) (2025-10-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fix from review ([75ff49f](https://github.com/awes-io/client/commit/75ff49fa6a3574dd2b2a843118663759ef27ee0c))
|
|
12
|
+
* google font removed by default ([fc49569](https://github.com/awes-io/client/commit/fc49569439b5771049043f8625df7cc9265b0694))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* change cropper style ([b707f7b](https://github.com/awes-io/client/commit/b707f7b025ac159feedbe5a13de29543b7c4b0a2))
|
|
18
|
+
* change logic for image upload ([ccc794c](https://github.com/awes-io/client/commit/ccc794c8826b9fe5d80ad0d5e42a853883813321))
|
|
19
|
+
* create layout error and some fix style ([1a5eaf3](https://github.com/awes-io/client/commit/1a5eaf3859aa90bbaee1b036a3f4da65118e709e))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [2.135.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.134.0...@awes-io/ui@2.135.0) (2025-08-27)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -5,38 +5,138 @@
|
|
|
5
5
|
margin-left: auto;
|
|
6
6
|
margin-right: auto;
|
|
7
7
|
|
|
8
|
-
&.aw-cropper--square {
|
|
9
|
-
.croppie-container {
|
|
10
|
-
.cr-viewport {
|
|
11
|
-
border-radius: 20%;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
8
|
&__croppie {
|
|
17
9
|
position: relative;
|
|
18
10
|
}
|
|
19
11
|
|
|
20
12
|
&__rotate {
|
|
21
13
|
position: absolute;
|
|
22
|
-
right:
|
|
23
|
-
top:
|
|
14
|
+
right: 1rem;
|
|
15
|
+
top: 1rem;
|
|
24
16
|
z-index: 2;
|
|
17
|
+
opacity: 1;
|
|
18
|
+
color: var(--c-surface);
|
|
19
|
+
fill: var(--c-surface);
|
|
20
|
+
padding: 0;
|
|
21
|
+
min-height: 0;
|
|
25
22
|
}
|
|
26
23
|
|
|
24
|
+
&__buttons {
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
gap: 1rem;
|
|
28
|
+
flex-direction: column-reverse;
|
|
29
|
+
|
|
30
|
+
margin-top: 1.5rem;
|
|
31
|
+
padding-top: 1.5rem;
|
|
32
|
+
border-top: 1px solid var(--c-mono-800);
|
|
33
|
+
margin-left: -1.5rem;
|
|
34
|
+
margin-right: -1.5rem;
|
|
35
|
+
padding-right: 1.5rem;
|
|
36
|
+
padding-left: 1.5rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
27
41
|
.croppie-container {
|
|
42
|
+
visibility: hidden;
|
|
43
|
+
|
|
28
44
|
.cr-viewport,
|
|
29
45
|
.cr-resizer {
|
|
30
46
|
border: none;
|
|
31
|
-
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.cr-slider-wrap {
|
|
50
|
+
width: 100%;
|
|
51
|
+
background: var(--c-on-surface);
|
|
52
|
+
border: 1px solid var(--c-mono-200);
|
|
53
|
+
border-radius: 0.625rem;
|
|
54
|
+
display: flex;
|
|
55
|
+
padding: 0.75rem 1.5rem;
|
|
56
|
+
position: absolute;
|
|
57
|
+
bottom: 1rem;
|
|
58
|
+
margin: 0;
|
|
59
|
+
z-index: 2;
|
|
60
|
+
width: calc(100% - 3rem);
|
|
61
|
+
left: 1.5rem;
|
|
62
|
+
|
|
63
|
+
input[type="range"] {
|
|
64
|
+
-webkit-appearance: none;
|
|
65
|
+
width: 100%;
|
|
66
|
+
background: transparent;
|
|
67
|
+
padding: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
input[type="range"]::-webkit-slider-runnable-track {
|
|
71
|
+
height: 0.25rem;
|
|
72
|
+
background: var(--c-surface);
|
|
73
|
+
}
|
|
74
|
+
input[type="range"]::-moz-range-track {
|
|
75
|
+
height: 0.25rem;
|
|
76
|
+
background: var(--c-surface);
|
|
77
|
+
}
|
|
78
|
+
input[type="range"]::-ms-track {
|
|
79
|
+
height: 0.25rem;
|
|
80
|
+
background: var(--c-surface);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Повзунок (кружечок) */
|
|
84
|
+
input[type="range"]::-webkit-slider-thumb {
|
|
85
|
+
-webkit-appearance: none;
|
|
86
|
+
height: 1rem;
|
|
87
|
+
width: 1rem;
|
|
88
|
+
border-radius: 50%;
|
|
89
|
+
background: var(--c-surface);
|
|
90
|
+
}
|
|
91
|
+
input[type="range"]::-moz-range-thumb {
|
|
92
|
+
height: 1rem;
|
|
93
|
+
width: 1rem;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
background: var(--c-surface);
|
|
96
|
+
}
|
|
97
|
+
input[type="range"]::-ms-thumb {
|
|
98
|
+
height: 1rem;
|
|
99
|
+
width: 1rem;
|
|
100
|
+
border-radius: 50%;
|
|
101
|
+
background: var(--c-surface);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.cr-boundary {
|
|
106
|
+
height: 28.5rem;
|
|
107
|
+
border-radius: 0.9375rem;
|
|
108
|
+
background: #000;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.cr-vp-square {
|
|
112
|
+
border-radius: 0.9375rem;
|
|
32
113
|
}
|
|
33
114
|
|
|
34
115
|
.cr-viewport {
|
|
35
|
-
|
|
116
|
+
max-width: var(--max-width-viewport);
|
|
117
|
+
max-height: var(--max-height-viewport);
|
|
118
|
+
width: 100% !important;
|
|
119
|
+
height: auto !important;
|
|
120
|
+
|
|
121
|
+
aspect-ratio: 1/1;
|
|
36
122
|
}
|
|
123
|
+
}
|
|
37
124
|
|
|
38
|
-
|
|
39
|
-
|
|
125
|
+
&.is-ready {
|
|
126
|
+
.croppie-container {
|
|
127
|
+
visibility: visible;
|
|
40
128
|
}
|
|
41
129
|
}
|
|
42
130
|
}
|
|
131
|
+
|
|
132
|
+
@media (min-width: 692px) {
|
|
133
|
+
.aw-cropper {
|
|
134
|
+
&__buttons {
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
margin-left: -2rem;
|
|
137
|
+
margin-right: -2rem;
|
|
138
|
+
padding-right: 2rem;
|
|
139
|
+
padding-left: 2rem;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
overflow-wrap: break-word;
|
|
3
3
|
|
|
4
4
|
&__label {
|
|
5
|
-
font-size:
|
|
5
|
+
font-size: 0.875rem;
|
|
6
6
|
margin-bottom: 0;
|
|
7
7
|
|
|
8
8
|
& > .aw-description {
|
|
9
|
-
font-size:
|
|
9
|
+
font-size: 0.875rem;
|
|
10
10
|
margin-bottom: 0;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.aw-layout-error {
|
|
2
|
+
min-height: 100vh;
|
|
3
|
+
padding: 2rem;
|
|
4
|
+
|
|
5
|
+
&__card {
|
|
6
|
+
max-width: 100vw;
|
|
7
|
+
margin: 2rem -2rem 0;
|
|
8
|
+
border-radius: 0.9375rem;
|
|
9
|
+
background: var(--c-surface);
|
|
10
|
+
padding: 1.5rem;
|
|
11
|
+
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
gap: 1.5rem;
|
|
15
|
+
align-items: center;
|
|
16
|
+
|
|
17
|
+
&-wrapper {
|
|
18
|
+
padding: 1rem 0;
|
|
19
|
+
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: 1rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-title {
|
|
27
|
+
font-size: 2rem;
|
|
28
|
+
font-weight: 700;
|
|
29
|
+
line-height: 1;
|
|
30
|
+
text-align: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&-text {
|
|
34
|
+
font-size: 1rem;
|
|
35
|
+
font-weight: 400;
|
|
36
|
+
line-height: 1.125rem;
|
|
37
|
+
text-align: center;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@screen lg {
|
|
43
|
+
.aw-layout-error {
|
|
44
|
+
&__card {
|
|
45
|
+
margin: 2rem auto 0;
|
|
46
|
+
max-width: 33.75rem;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
package/assets/js/icons/mono.js
CHANGED
|
@@ -78,6 +78,8 @@ export const ICONS = {
|
|
|
78
78
|
settings:
|
|
79
79
|
'M11.57 1c.83.01 1.65.1 2.46.29.35.07.62.37.66.73l.19 1.72A1.56 1.56 0 0 0 17.05 5l1.58-.7a.85.85 0 0 1 .96.2c1.14 1.22 2 2.68 2.49 4.28.1.34-.02.72-.3.93l-1.4 1.03a1.56 1.56 0 0 0 0 2.52l1.4 1.03c.29.21.4.59.3.93-.5 1.6-1.34 3.06-2.48 4.28a.85.85 0 0 1-.96.2l-1.59-.7a1.56 1.56 0 0 0-2.17 1.26l-.2 1.72a.85.85 0 0 1-.64.73c-1.63.39-3.33.39-4.97 0a.85.85 0 0 1-.64-.73l-.2-1.72A1.56 1.56 0 0 0 6.07 19l-1.58.7a.85.85 0 0 1-.96-.2c-1.14-1.23-2-2.7-2.49-4.29a.85.85 0 0 1 .3-.93l1.41-1.03a1.56 1.56 0 0 0 0-2.52l-1.4-1.03a.85.85 0 0 1-.3-.93c.49-1.6 1.34-3.06 2.48-4.28a.85.85 0 0 1 .96-.2l1.58.7a1.56 1.56 0 0 0 2.18-1.26l.19-1.72c.04-.36.3-.66.66-.73.8-.18 1.63-.28 2.48-.29Zm0 1.7c-.51 0-1.02.04-1.53.12l-.12 1.1a3.26 3.26 0 0 1-4.54 2.63L4.36 6.1a9.36 9.36 0 0 0-1.52 2.62l.9.66a3.25 3.25 0 0 1 0 5.24l-.9.66c.36.95.88 1.84 1.52 2.62l1.03-.45a3.25 3.25 0 0 1 4.53 2.62l.12 1.11c1 .17 2.03.17 3.03 0l.13-1.11a3.25 3.25 0 0 1 4.53-2.62l1.02.45a9.36 9.36 0 0 0 1.52-2.62l-.9-.66a3.25 3.25 0 0 1 0-5.24l.9-.66a9.36 9.36 0 0 0-1.52-2.62l-1.01.45a3.25 3.25 0 0 1-4.54-2.62l-.13-1.1c-.5-.09-1-.13-1.5-.14Zm-.01 5.07a4.23 4.23 0 1 1 0 8.46 4.23 4.23 0 0 1 0-8.46Zm0 1.7a2.54 2.54 0 1 0 0 5.07 2.54 2.54 0 0 0 0-5.08Z',
|
|
80
80
|
triangle: 'm12.06 14.5 4.25-5H7.7l4.37 5Z',
|
|
81
|
+
upload:
|
|
82
|
+
'M12.027 8.888c.195 0 .382.078.52.216l3.677 3.675a.736.736 0 0 1-1.04 1.04l-2.422-2.42v9.254a.736.736 0 0 1-1.47 0v-9.255L8.87 13.82a.737.737 0 0 1-1.031-.009.735.735 0 0 1-.009-1.03l3.677-3.676a.736.736 0 0 1 .52-.216ZM12.029 3a5.875 5.875 0 0 1 5.697 4.45 5.883 5.883 0 0 1-.552 11.733h-2.206a.735.735 0 0 1 0-1.471h2.206a4.414 4.414 0 0 0 3.12-7.532 4.413 4.413 0 0 0-3.12-1.292.794.794 0 0 1-.79-.628 4.406 4.406 0 0 0-8.722 0 .763.763 0 0 1-.808.628 4.413 4.413 0 0 0 .026 8.824h2.205a.736.736 0 1 1 0 1.47H6.88a5.884 5.884 0 0 1-.552-11.74A5.875 5.875 0 0 1 12.03 3Z',
|
|
81
83
|
undo:
|
|
82
84
|
'm2.54 2.6 2.17 2.17a10.24 10.24 0 0 1 15.81 12.8 10.24 10.24 0 0 1-15.45 2.01.48.48 0 0 1 0-.72l.85-.84h.6a8.07 8.07 0 1 0-.36-11.8L8.45 8.5c.36.36 0 .84-.37.84H2.3a.48.48 0 0 1-.48-.48V2.84c0-.36.48-.6.84-.24h-.12Z',
|
|
83
85
|
user:
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
<div
|
|
3
3
|
v-show="!!croppie"
|
|
4
4
|
class="aw-cropper"
|
|
5
|
-
:style="{
|
|
5
|
+
:style="{
|
|
6
|
+
'--max-width-viewport': `${width}px`,
|
|
7
|
+
'--max-height-viewport': `${height}px`
|
|
8
|
+
}"
|
|
6
9
|
:class="{ 'aw-cropper--square': square }"
|
|
7
10
|
>
|
|
8
11
|
<!-- image wrapped because of Croppie -->
|
|
@@ -10,6 +13,7 @@
|
|
|
10
13
|
<img :src="src" alt="" ref="image" />
|
|
11
14
|
|
|
12
15
|
<AwButton
|
|
16
|
+
data-dark="false"
|
|
13
17
|
class="aw-cropper__rotate"
|
|
14
18
|
content-class="px-2"
|
|
15
19
|
theme="icon"
|
|
@@ -20,23 +24,23 @@
|
|
|
20
24
|
<template #icon>
|
|
21
25
|
<svg
|
|
22
26
|
xmlns="http://www.w3.org/2000/svg"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
height="20"
|
|
26
|
-
class="fill-current"
|
|
27
|
+
width="16"
|
|
28
|
+
height="16"
|
|
27
29
|
>
|
|
28
30
|
<path
|
|
29
|
-
d="
|
|
31
|
+
d="M4.51 2.982a6.111 6.111 0 0 1 7.645.536h-1.1a.611.611 0 1 0 0 1.222h2.444a.611.611 0 0 0 .611-.611V1.684a.611.611 0 0 0-1.222 0v.85a7.333 7.333 0 1 0 2.048 7.849c.13-.38-.168-.754-.57-.754a.67.67 0 0 0-.62.453 6.114 6.114 0 0 1-6.378 3.995A6.11 6.11 0 0 1 4.511 2.982Z"
|
|
30
32
|
/>
|
|
31
33
|
</svg>
|
|
32
34
|
</template>
|
|
33
35
|
</AwButton>
|
|
34
36
|
</div>
|
|
35
37
|
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
<div class="aw-cropper__buttons">
|
|
39
|
+
<slot name="buttons" :rotate="rotate" :save="save">
|
|
40
|
+
<!-- save -->
|
|
41
|
+
<AwButton :text="$t('Save Image')" @click="save" />
|
|
42
|
+
</slot>
|
|
43
|
+
</div>
|
|
40
44
|
</div>
|
|
41
45
|
</template>
|
|
42
46
|
|
|
@@ -97,10 +101,14 @@ export default {
|
|
|
97
101
|
}
|
|
98
102
|
},
|
|
99
103
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
+
mounted() {
|
|
105
|
+
preventPinchResize(true)
|
|
106
|
+
this.$nextTick(this.initCroppie)
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
beforeDestroy() {
|
|
110
|
+
preventPinchResize(false)
|
|
111
|
+
this.croppie && this.croppie.destroy()
|
|
104
112
|
},
|
|
105
113
|
|
|
106
114
|
methods: {
|
|
@@ -108,20 +116,25 @@ export default {
|
|
|
108
116
|
this.croppie = new Croppie(this.$refs.image, {
|
|
109
117
|
viewport: {
|
|
110
118
|
width: +this.width,
|
|
111
|
-
height: +this.height
|
|
112
|
-
|
|
113
|
-
boundary: {
|
|
114
|
-
width: this.totalWidth,
|
|
115
|
-
height: +this.height + +this.padding
|
|
119
|
+
height: +this.height,
|
|
120
|
+
type: this.square ? 'square' : 'circle'
|
|
116
121
|
},
|
|
117
122
|
enableOrientation: true
|
|
118
123
|
})
|
|
119
|
-
|
|
120
|
-
setTimeout(() => this.croppie.setZoom(0), 60)
|
|
121
124
|
},
|
|
122
125
|
|
|
123
126
|
refresh() {
|
|
124
|
-
this.
|
|
127
|
+
this.$el.classList.remove('is-ready')
|
|
128
|
+
|
|
129
|
+
this.croppie
|
|
130
|
+
.bind({
|
|
131
|
+
url: this.$refs.image.src,
|
|
132
|
+
zoom: 0
|
|
133
|
+
})
|
|
134
|
+
.then(() => {
|
|
135
|
+
this.croppie.setZoom(0)
|
|
136
|
+
this.$el.classList.add('is-ready')
|
|
137
|
+
})
|
|
125
138
|
},
|
|
126
139
|
|
|
127
140
|
rotate() {
|
|
@@ -138,16 +151,6 @@ export default {
|
|
|
138
151
|
|
|
139
152
|
this.$emit('save', file)
|
|
140
153
|
}
|
|
141
|
-
},
|
|
142
|
-
|
|
143
|
-
mounted() {
|
|
144
|
-
preventPinchResize(true)
|
|
145
|
-
this.$nextTick(this.initCroppie)
|
|
146
|
-
},
|
|
147
|
-
|
|
148
|
-
beforeDestroy() {
|
|
149
|
-
preventPinchResize(false)
|
|
150
|
-
this.croppie && this.croppie.destroy()
|
|
151
154
|
}
|
|
152
155
|
}
|
|
153
156
|
</script>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="aw-image-upload">
|
|
3
3
|
<AwFile
|
|
4
|
-
v-
|
|
4
|
+
v-show="!hasValue"
|
|
5
5
|
:disabled="disabled"
|
|
6
6
|
:accept="accept"
|
|
7
7
|
class="aw-image-upload__file"
|
|
8
|
+
ref="fileLoader"
|
|
8
9
|
@input="handleImage($event)"
|
|
9
10
|
>
|
|
10
11
|
<AwActionIcon
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
/>
|
|
18
19
|
</AwFile>
|
|
19
20
|
<AwActionIcon
|
|
20
|
-
v-
|
|
21
|
+
v-if="hasValue && fileIcon"
|
|
21
22
|
:icon="fileIcon"
|
|
22
23
|
color="mono-900"
|
|
23
24
|
icon-color="mono-400"
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
class="aw-image-upload__image"
|
|
26
27
|
/>
|
|
27
28
|
<img
|
|
28
|
-
v-else
|
|
29
|
+
v-else-if="hasValue"
|
|
29
30
|
:src="value"
|
|
30
31
|
:alt="fileName"
|
|
31
32
|
width="80"
|
|
@@ -65,6 +66,7 @@
|
|
|
65
66
|
ref="cropModal"
|
|
66
67
|
:param="null"
|
|
67
68
|
:title="$t('Edit photo')"
|
|
69
|
+
class="aw-image-upload__modal"
|
|
68
70
|
@opened="$refs.cropper.refresh()"
|
|
69
71
|
@before-close="clearUploadedFileOrBlock"
|
|
70
72
|
>
|
|
@@ -73,12 +75,24 @@
|
|
|
73
75
|
:src="file"
|
|
74
76
|
:save-width="600"
|
|
75
77
|
:save-height="600"
|
|
78
|
+
:width="336"
|
|
79
|
+
:height="336"
|
|
80
|
+
:padding="0"
|
|
81
|
+
:square="square"
|
|
76
82
|
class="aw-image-upload__aw-cropper"
|
|
77
83
|
@save="onCropSave"
|
|
78
84
|
>
|
|
79
85
|
<template #buttons="slotAttrs">
|
|
80
86
|
<AwButton
|
|
81
|
-
:text="$t('
|
|
87
|
+
:text="$t('Change photo')"
|
|
88
|
+
:disabled="loading"
|
|
89
|
+
theme="outline"
|
|
90
|
+
icon="awesio/upload"
|
|
91
|
+
@click="onClickChangePhoto"
|
|
92
|
+
/>
|
|
93
|
+
|
|
94
|
+
<AwButton
|
|
95
|
+
:text="$t('Save')"
|
|
82
96
|
:loading="loading"
|
|
83
97
|
@click="slotAttrs.save"
|
|
84
98
|
/>
|
|
@@ -153,7 +167,9 @@ export default {
|
|
|
153
167
|
default() {
|
|
154
168
|
return conf(this, 'resultPath')
|
|
155
169
|
}
|
|
156
|
-
}
|
|
170
|
+
},
|
|
171
|
+
|
|
172
|
+
square: Boolean
|
|
157
173
|
},
|
|
158
174
|
|
|
159
175
|
data() {
|
|
@@ -196,12 +212,22 @@ export default {
|
|
|
196
212
|
},
|
|
197
213
|
|
|
198
214
|
methods: {
|
|
215
|
+
onClickChangePhoto() {
|
|
216
|
+
this.$refs.fileLoader.$el
|
|
217
|
+
.querySelector('input[type="file"]')
|
|
218
|
+
.click()
|
|
219
|
+
},
|
|
220
|
+
|
|
199
221
|
handleImage(files) {
|
|
200
222
|
if (!files[0] || !(files[0] instanceof File)) return
|
|
201
223
|
|
|
202
224
|
this.file = URL.createObjectURL(files[0])
|
|
203
225
|
|
|
204
|
-
if (this.
|
|
226
|
+
if (this.$refs.cropModal.isOpened) {
|
|
227
|
+
this.$nextTick(() => {
|
|
228
|
+
this.$refs.cropper.refresh()
|
|
229
|
+
})
|
|
230
|
+
} else if (this.crop) {
|
|
205
231
|
this.$refs.cropModal.open()
|
|
206
232
|
} else {
|
|
207
233
|
return this.saveImage()
|
|
@@ -232,7 +258,7 @@ export default {
|
|
|
232
258
|
|
|
233
259
|
await this.saveImage()
|
|
234
260
|
|
|
235
|
-
this.$refs.cropModal?.close()
|
|
261
|
+
await this.$refs.cropModal?.close()
|
|
236
262
|
},
|
|
237
263
|
|
|
238
264
|
clearUploadedFileOrBlock(stopper) {
|
|
@@ -1,37 +1,125 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
<div class="aw-layout-error">
|
|
3
|
+
<AwButton icon="awesio/close" color="mono" href="/" />
|
|
4
|
+
|
|
5
|
+
<div class="aw-layout-error__card">
|
|
6
|
+
<svg
|
|
7
|
+
v-if="statusCode === 404"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
width="200"
|
|
10
|
+
height="200"
|
|
11
|
+
fill="none"
|
|
12
|
+
>
|
|
13
|
+
<g clip-path="url(#a)">
|
|
14
|
+
<path
|
|
15
|
+
fill="#F3F5F7"
|
|
16
|
+
d="M33.332 64.445c0-17.183 13.929-31.111 31.111-31.111h71.111c17.182 0 31.111 13.928 31.111 31.11v71.112c0 17.182-13.929 31.111-31.111 31.111h-71.11c-17.183 0-31.112-13.929-31.112-31.111V64.445Z"
|
|
17
|
+
/>
|
|
18
|
+
<g fill="#000" clip-path="url(#b)">
|
|
19
|
+
<path
|
|
20
|
+
d="M112.349 109.616c1.931-2.602 2.991-5.767 2.991-9.116v-5.286h2.192a1.933 1.933 0 0 0 0-3.867h-1.012L101.623 68.38a1.935 1.935 0 0 0-3.245 0L83.481 91.347h-1.012a1.934 1.934 0 1 0 0 3.867h2.191v5.286c0 3.349 1.06 6.514 2.992 9.116-7.862 4.096-13.304 12.348-13.304 21.95 0 1.068.865 1.934 1.933 1.934h47.438a1.934 1.934 0 0 0 1.934-1.934c0-9.525-5.391-17.827-13.304-21.95ZM100 106.558a6.324 6.324 0 0 1 6.317 6.317c0 1.903-.823 4.382-2.098 6.317-1.295 1.966-2.832 3.093-4.219 3.093-3.205 0-6.316-5.702-6.316-9.41a6.324 6.324 0 0 1 6.316-6.317Zm-9.067-19.594h18.134l2.843 4.383H88.09l2.843-4.383ZM100 72.986l6.559 10.111H93.442L100 72.986Zm11.473 22.228v5.286c0 2.726-.939 5.288-2.635 7.324-1.758-3.063-5.06-5.133-8.838-5.133-3.778 0-7.08 2.07-8.837 5.133a11.378 11.378 0 0 1-2.635-7.324v-5.286h22.945Zm-33.17 34.419c.68-7.449 5.255-13.678 11.514-16.779 0 5.555 4.39 13.298 10.183 13.298 5.798 0 10.2-7.788 10.184-13.293 6.433 3.208 10.832 9.617 11.51 16.774H78.303Z"
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M102.398 114.242a1.933 1.933 0 0 0-2.398-3.003 1.934 1.934 0 0 0-2.398 3.003 3.395 3.395 0 0 0 4.796 0Z"
|
|
24
|
+
/>
|
|
25
|
+
</g>
|
|
26
|
+
</g>
|
|
27
|
+
<path
|
|
28
|
+
fill="#14171D"
|
|
29
|
+
fill-rule="evenodd"
|
|
30
|
+
d="M39.217 20.394a3.846 3.846 0 0 0 3.845-3.845.55.55 0 0 1 1.098 0 3.846 3.846 0 0 0 3.844 3.845.55.55 0 0 1 0 1.098 3.846 3.846 0 0 0-3.844 3.844.55.55 0 0 1-1.098 0 3.846 3.846 0 0 0-3.845-3.844.55.55 0 0 1 0-1.098ZM19.78 39.556a7.78 7.78 0 0 0 7.777-7.778 1.111 1.111 0 0 1 2.222 0 7.78 7.78 0 0 0 7.778 7.778 1.112 1.112 0 0 1 0 2.222 7.78 7.78 0 0 0-7.778 7.778 1.111 1.111 0 0 1-2.222 0 7.78 7.78 0 0 0-7.778-7.778 1.111 1.111 0 0 1 0-2.222ZM160.184 173.482a5.966 5.966 0 0 0 5.963-5.963.851.851 0 1 1 1.704 0 5.965 5.965 0 0 0 5.963 5.963.851.851 0 1 1 0 1.703 5.965 5.965 0 0 0-5.963 5.963.853.853 0 0 1-1.704 0 5.966 5.966 0 0 0-5.963-5.963.852.852 0 0 1 0-1.703ZM173.372 46.296a4.928 4.928 0 0 0 4.926-4.925.704.704 0 1 1 1.407 0 4.928 4.928 0 0 0 4.926 4.925.704.704 0 0 1 0 1.408 4.928 4.928 0 0 0-4.926 4.926.704.704 0 0 1-1.407 0 4.928 4.928 0 0 0-4.926-4.926.704.704 0 1 1 0-1.408Z"
|
|
31
|
+
clip-rule="evenodd"
|
|
32
|
+
/>
|
|
33
|
+
<circle cx="176.335" cy="145.667" r="3.667" fill="#14171D" />
|
|
34
|
+
<circle cx="36.999" cy="174.333" r="3.667" fill="#14171D" />
|
|
35
|
+
<circle cx="26.332" cy="159.667" r="7" fill="#14171D" />
|
|
36
|
+
<defs>
|
|
37
|
+
<clipPath id="a">
|
|
38
|
+
<rect
|
|
39
|
+
width="133.333"
|
|
40
|
+
height="133.333"
|
|
41
|
+
x="33.332"
|
|
42
|
+
y="33.334"
|
|
43
|
+
fill="#fff"
|
|
44
|
+
rx="66.667"
|
|
45
|
+
/>
|
|
46
|
+
</clipPath>
|
|
47
|
+
<clipPath id="b">
|
|
48
|
+
<path fill="#fff" d="M67 67.5h66v66H67z" />
|
|
49
|
+
</clipPath>
|
|
50
|
+
</defs>
|
|
51
|
+
</svg>
|
|
12
52
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
53
|
+
<svg
|
|
54
|
+
v-else-if="statusCode === 403"
|
|
55
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
+
width="200"
|
|
57
|
+
height="200"
|
|
58
|
+
fill="none"
|
|
17
59
|
>
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
60
|
+
<g clip-path="url(#a)">
|
|
61
|
+
<path
|
|
62
|
+
fill="#F3F5F7"
|
|
63
|
+
d="M33.332 64.445c0-17.183 13.929-31.111 31.111-31.111h71.111c17.182 0 31.111 13.928 31.111 31.11v71.112c0 17.182-13.929 31.111-31.111 31.111h-71.11c-17.183 0-31.112-13.929-31.112-31.111V64.445Z"
|
|
64
|
+
/>
|
|
65
|
+
<g fill="#14171D" clip-path="url(#b)">
|
|
66
|
+
<path
|
|
67
|
+
d="M126.866 73.134c-8.179-8.179-21.487-8.179-29.665 0-6.656 6.656-7.895 16.708-3.718 24.63L68.81 122.436a6.196 6.196 0 0 0 0 8.753 6.173 6.173 0 0 0 4.376 1.81c1.585 0 3.17-.604 4.377-1.81l24.673-24.674a21.005 21.005 0 0 0 9.797 2.417c5.372 0 10.744-2.044 14.833-6.134 8.179-8.179 8.179-21.486 0-29.665Zm-26.93 26.93c-6.67-6.67-6.67-17.524 0-24.195a17.053 17.053 0 0 1 12.097-5.003c4.381 0 8.763 1.668 12.098 5.003 6.67 6.67 6.67 17.524 0 24.195-6.671 6.671-17.525 6.671-24.195 0Zm-25.108 28.391a2.324 2.324 0 0 1-3.283 0 2.324 2.324 0 0 1 0-3.283l18.437-18.437 3.283 3.283-18.437 18.437ZM96 107.283 92.717 104l2.933-2.934a21.086 21.086 0 0 0 3.283 3.283L96 107.283Z"
|
|
68
|
+
/>
|
|
69
|
+
<path
|
|
70
|
+
d="M119.409 80.592a1.934 1.934 0 0 0-2.735 0l-4.639 4.64-4.64-4.64a1.934 1.934 0 1 0-2.735 2.735l4.64 4.64-4.64 4.64a1.934 1.934 0 0 0 2.735 2.734l4.64-4.64 4.639 4.64a1.93 1.93 0 0 0 2.735 0 1.934 1.934 0 0 0 0-2.735l-4.639-4.64 4.639-4.639a1.933 1.933 0 0 0 0-2.735Z"
|
|
71
|
+
/>
|
|
72
|
+
</g>
|
|
73
|
+
</g>
|
|
74
|
+
<path
|
|
75
|
+
fill="#14171D"
|
|
76
|
+
fill-rule="evenodd"
|
|
77
|
+
d="M39.217 20.394a3.846 3.846 0 0 0 3.845-3.845.55.55 0 0 1 1.098 0 3.846 3.846 0 0 0 3.844 3.845.55.55 0 0 1 0 1.098 3.846 3.846 0 0 0-3.844 3.844.55.55 0 0 1-1.098 0 3.846 3.846 0 0 0-3.845-3.844.55.55 0 0 1 0-1.098ZM19.78 39.556a7.78 7.78 0 0 0 7.777-7.778 1.111 1.111 0 0 1 2.222 0 7.78 7.78 0 0 0 7.778 7.778 1.112 1.112 0 0 1 0 2.222 7.78 7.78 0 0 0-7.778 7.778 1.111 1.111 0 0 1-2.222 0 7.78 7.78 0 0 0-7.778-7.778 1.111 1.111 0 0 1 0-2.222ZM160.184 173.482a5.966 5.966 0 0 0 5.963-5.963.851.851 0 1 1 1.704 0 5.965 5.965 0 0 0 5.963 5.963.851.851 0 1 1 0 1.703 5.965 5.965 0 0 0-5.963 5.963.853.853 0 0 1-1.704 0 5.966 5.966 0 0 0-5.963-5.963.852.852 0 0 1 0-1.703ZM173.372 46.296a4.928 4.928 0 0 0 4.926-4.925.704.704 0 1 1 1.407 0 4.928 4.928 0 0 0 4.926 4.925.704.704 0 0 1 0 1.408 4.928 4.928 0 0 0-4.926 4.926.704.704 0 0 1-1.407 0 4.928 4.928 0 0 0-4.926-4.926.704.704 0 1 1 0-1.408Z"
|
|
78
|
+
clip-rule="evenodd"
|
|
79
|
+
/>
|
|
80
|
+
<circle cx="176.335" cy="145.667" r="3.667" fill="#14171D" />
|
|
81
|
+
<circle cx="36.999" cy="174.333" r="3.667" fill="#14171D" />
|
|
82
|
+
<circle cx="26.332" cy="159.667" r="7" fill="#14171D" />
|
|
83
|
+
<defs>
|
|
84
|
+
<clipPath id="a">
|
|
85
|
+
<rect
|
|
86
|
+
width="133.333"
|
|
87
|
+
height="133.333"
|
|
88
|
+
x="33.332"
|
|
89
|
+
y="33.334"
|
|
90
|
+
fill="#fff"
|
|
91
|
+
rx="66.667"
|
|
92
|
+
/>
|
|
93
|
+
</clipPath>
|
|
94
|
+
<clipPath id="b">
|
|
95
|
+
<path fill="#fff" d="M67 67h66v66H67z" />
|
|
96
|
+
</clipPath>
|
|
97
|
+
</defs>
|
|
98
|
+
</svg>
|
|
99
|
+
|
|
100
|
+
<div class="aw-layout-error__card-wrapper">
|
|
101
|
+
<div class="aw-layout-error__card-title">
|
|
102
|
+
{{ title }}
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="aw-layout-error__card-text">
|
|
106
|
+
{{ $t('error_status__code', { code: statusCode }) }}
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="aw-layout-error__card-text">
|
|
110
|
+
{{ message }}
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<AwButton :text="$t('Back')" href="/" size="lg" color="dark" />
|
|
115
|
+
</div>
|
|
21
116
|
</div>
|
|
22
117
|
</template>
|
|
23
118
|
|
|
24
119
|
<script>
|
|
25
|
-
import { pathOr } from 'rambdax'
|
|
26
|
-
import AwBottomBar from '@AwOrganisms/AwBottomBar.vue'
|
|
27
|
-
|
|
28
120
|
export default {
|
|
29
121
|
name: 'AwLayoutError',
|
|
30
122
|
|
|
31
|
-
components: {
|
|
32
|
-
AwBottomBar
|
|
33
|
-
},
|
|
34
|
-
|
|
35
123
|
props: {
|
|
36
124
|
error: {
|
|
37
125
|
type: Object,
|
|
@@ -44,12 +132,20 @@ export default {
|
|
|
44
132
|
return (this.error && this.error.statusCode) || 500
|
|
45
133
|
},
|
|
46
134
|
|
|
47
|
-
|
|
48
|
-
|
|
135
|
+
title() {
|
|
136
|
+
if (this.statusCode === 404 || this.statusCode === 403) {
|
|
137
|
+
return this.$t(`error_status_${this.statusCode}_title`)
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
return ''
|
|
49
141
|
},
|
|
50
142
|
|
|
51
|
-
|
|
52
|
-
|
|
143
|
+
message() {
|
|
144
|
+
if (this.statusCode === 404 || this.statusCode === 403) {
|
|
145
|
+
return this.$t(`error_status_${this.statusCode}_description`)
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return this.error.message || this.$t('Something is wrong.')
|
|
53
149
|
}
|
|
54
150
|
}
|
|
55
151
|
}
|
package/nuxt/awes.config.js
CHANGED
|
@@ -15,8 +15,8 @@ export default {
|
|
|
15
15
|
src: 'https://static.awes.io/demo/awes-background.svg'
|
|
16
16
|
},
|
|
17
17
|
|
|
18
|
-
googleFont:
|
|
19
|
-
|
|
18
|
+
googleFont: null,
|
|
19
|
+
// 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
|
|
20
20
|
|
|
21
21
|
style: styles.default
|
|
22
22
|
}
|
package/nuxt/layouts/error.vue
CHANGED
|
@@ -3,17 +3,10 @@
|
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
6
|
-
import { pathOr } from 'rambdax'
|
|
7
|
-
|
|
8
6
|
export default {
|
|
9
7
|
name: 'NuxtLayoutError',
|
|
10
8
|
|
|
11
|
-
layout
|
|
12
|
-
// const code = pathOr(500, 'nuxt.err.statusCode', app)
|
|
13
|
-
const loggedIn = pathOr(false, '$auth.loggedIn', app)
|
|
14
|
-
|
|
15
|
-
return loggedIn /* && code === 404 */ ? 'default' : 'empty'
|
|
16
|
-
},
|
|
9
|
+
layout: 'empty',
|
|
17
10
|
|
|
18
11
|
props: {
|
|
19
12
|
error: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.136.0",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"rollup-plugin-visualizer": "^2.6.0",
|
|
115
115
|
"rollup-plugin-vue": "^5.0.1"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "2c739b64133c12f218af97279d4d714173c4e8ab"
|
|
118
118
|
}
|