@eturnity/eturnity_reusable_components 8.40.1 → 8.40.2
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/main.es18.js +1 -1
- package/dist/main.es386.js +1 -1
- package/dist/main.es742.js +60 -21
- package/dist/main.es743.js +21 -60
- package/package.json +1 -1
- package/src/components/buttons/mainButton/index.vue +14 -0
- package/src/components/inputs/checkbox/index.vue +1 -1
- package/src/components/inputs/inputText/index.vue +1 -4
- package/src/components/inputs/radioButton/index.vue +94 -69
- package/src/components/inputs/select/index.vue +16 -1
- package/src/components/inputs/textAreaInput/index.vue +8 -0
- package/src/components/spinner/index.vue +2 -0
package/dist/main.es18.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { isSymbol, hasChanged, isObject, NOOP, isArray, extend, toRawType, isFunction, def, hasOwn, isIntegerKey, isMap, makeMap, capitalize } from "./main.
|
|
1
|
+
import { isSymbol, hasChanged, isObject, NOOP, isArray, extend, toRawType, isFunction, def, hasOwn, isIntegerKey, isMap, makeMap, capitalize } from "./main.es742.js";
|
|
2
2
|
function warn(msg, ...args) {
|
|
3
3
|
console.warn(`[Vue warn] ${msg}`, ...args);
|
|
4
4
|
}
|
package/dist/main.es386.js
CHANGED
package/dist/main.es742.js
CHANGED
|
@@ -1,25 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
return supported;
|
|
1
|
+
function makeMap(str, expectsLowerCase) {
|
|
2
|
+
const map = /* @__PURE__ */ Object.create(null);
|
|
3
|
+
const list = str.split(",");
|
|
4
|
+
for (let i = 0; i < list.length; i++) {
|
|
5
|
+
map[list[i]] = true;
|
|
7
6
|
}
|
|
8
|
-
|
|
9
|
-
supported = true;
|
|
10
|
-
perf = window.performance;
|
|
11
|
-
} else if (typeof globalThis !== "undefined" && ((_a = globalThis.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
|
|
12
|
-
supported = true;
|
|
13
|
-
perf = globalThis.perf_hooks.performance;
|
|
14
|
-
} else {
|
|
15
|
-
supported = false;
|
|
16
|
-
}
|
|
17
|
-
return supported;
|
|
18
|
-
}
|
|
19
|
-
function now() {
|
|
20
|
-
return isPerformanceSupported() ? perf.now() : Date.now();
|
|
7
|
+
return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
|
|
21
8
|
}
|
|
9
|
+
!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
|
|
10
|
+
!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
|
|
11
|
+
const NOOP = () => {
|
|
12
|
+
};
|
|
13
|
+
const extend = Object.assign;
|
|
14
|
+
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
15
|
+
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
|
|
16
|
+
const isArray = Array.isArray;
|
|
17
|
+
const isMap = (val) => toTypeString(val) === "[object Map]";
|
|
18
|
+
const isFunction = (val) => typeof val === "function";
|
|
19
|
+
const isString = (val) => typeof val === "string";
|
|
20
|
+
const isSymbol = (val) => typeof val === "symbol";
|
|
21
|
+
const isObject = (val) => val !== null && typeof val === "object";
|
|
22
|
+
const objectToString = Object.prototype.toString;
|
|
23
|
+
const toTypeString = (value) => objectToString.call(value);
|
|
24
|
+
const toRawType = (value) => {
|
|
25
|
+
return toTypeString(value).slice(8, -1);
|
|
26
|
+
};
|
|
27
|
+
const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
|
|
28
|
+
const cacheStringFunction = (fn) => {
|
|
29
|
+
const cache = /* @__PURE__ */ Object.create(null);
|
|
30
|
+
return (str) => {
|
|
31
|
+
const hit = cache[str];
|
|
32
|
+
return hit || (cache[str] = fn(str));
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
const capitalize = cacheStringFunction(
|
|
36
|
+
(str) => str.charAt(0).toUpperCase() + str.slice(1)
|
|
37
|
+
);
|
|
38
|
+
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
|
|
39
|
+
const def = (obj, key, value) => {
|
|
40
|
+
Object.defineProperty(obj, key, {
|
|
41
|
+
configurable: true,
|
|
42
|
+
enumerable: false,
|
|
43
|
+
value
|
|
44
|
+
});
|
|
45
|
+
};
|
|
22
46
|
export {
|
|
23
|
-
|
|
24
|
-
|
|
47
|
+
NOOP,
|
|
48
|
+
capitalize,
|
|
49
|
+
def,
|
|
50
|
+
extend,
|
|
51
|
+
hasChanged,
|
|
52
|
+
hasOwn,
|
|
53
|
+
isArray,
|
|
54
|
+
isFunction,
|
|
55
|
+
isIntegerKey,
|
|
56
|
+
isMap,
|
|
57
|
+
isObject,
|
|
58
|
+
isString,
|
|
59
|
+
isSymbol,
|
|
60
|
+
makeMap,
|
|
61
|
+
objectToString,
|
|
62
|
+
toRawType,
|
|
63
|
+
toTypeString
|
|
25
64
|
};
|
package/dist/main.es743.js
CHANGED
|
@@ -1,64 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
let supported;
|
|
2
|
+
let perf;
|
|
3
|
+
function isPerformanceSupported() {
|
|
4
|
+
var _a;
|
|
5
|
+
if (supported !== void 0) {
|
|
6
|
+
return supported;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
if (typeof window !== "undefined" && window.performance) {
|
|
9
|
+
supported = true;
|
|
10
|
+
perf = window.performance;
|
|
11
|
+
} else if (typeof globalThis !== "undefined" && ((_a = globalThis.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
|
|
12
|
+
supported = true;
|
|
13
|
+
perf = globalThis.perf_hooks.performance;
|
|
14
|
+
} else {
|
|
15
|
+
supported = false;
|
|
16
|
+
}
|
|
17
|
+
return supported;
|
|
18
|
+
}
|
|
19
|
+
function now() {
|
|
20
|
+
return isPerformanceSupported() ? perf.now() : Date.now();
|
|
8
21
|
}
|
|
9
|
-
!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
|
|
10
|
-
!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
|
|
11
|
-
const NOOP = () => {
|
|
12
|
-
};
|
|
13
|
-
const extend = Object.assign;
|
|
14
|
-
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
15
|
-
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
|
|
16
|
-
const isArray = Array.isArray;
|
|
17
|
-
const isMap = (val) => toTypeString(val) === "[object Map]";
|
|
18
|
-
const isFunction = (val) => typeof val === "function";
|
|
19
|
-
const isString = (val) => typeof val === "string";
|
|
20
|
-
const isSymbol = (val) => typeof val === "symbol";
|
|
21
|
-
const isObject = (val) => val !== null && typeof val === "object";
|
|
22
|
-
const objectToString = Object.prototype.toString;
|
|
23
|
-
const toTypeString = (value) => objectToString.call(value);
|
|
24
|
-
const toRawType = (value) => {
|
|
25
|
-
return toTypeString(value).slice(8, -1);
|
|
26
|
-
};
|
|
27
|
-
const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
|
|
28
|
-
const cacheStringFunction = (fn) => {
|
|
29
|
-
const cache = /* @__PURE__ */ Object.create(null);
|
|
30
|
-
return (str) => {
|
|
31
|
-
const hit = cache[str];
|
|
32
|
-
return hit || (cache[str] = fn(str));
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
const capitalize = cacheStringFunction(
|
|
36
|
-
(str) => str.charAt(0).toUpperCase() + str.slice(1)
|
|
37
|
-
);
|
|
38
|
-
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
|
|
39
|
-
const def = (obj, key, value) => {
|
|
40
|
-
Object.defineProperty(obj, key, {
|
|
41
|
-
configurable: true,
|
|
42
|
-
enumerable: false,
|
|
43
|
-
value
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
22
|
export {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
def,
|
|
50
|
-
extend,
|
|
51
|
-
hasChanged,
|
|
52
|
-
hasOwn,
|
|
53
|
-
isArray,
|
|
54
|
-
isFunction,
|
|
55
|
-
isIntegerKey,
|
|
56
|
-
isMap,
|
|
57
|
-
isObject,
|
|
58
|
-
isString,
|
|
59
|
-
isSymbol,
|
|
60
|
-
makeMap,
|
|
61
|
-
objectToString,
|
|
62
|
-
toRawType,
|
|
63
|
-
toTypeString
|
|
23
|
+
isPerformanceSupported,
|
|
24
|
+
now
|
|
64
25
|
};
|
package/package.json
CHANGED
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
:width="width"
|
|
17
17
|
>
|
|
18
18
|
<LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
|
|
19
|
+
<FlexSpinner v-if="isLoading">
|
|
20
|
+
<RCSpinner size="tiny" />
|
|
21
|
+
</FlexSpinner>
|
|
19
22
|
<Icon
|
|
20
23
|
v-if="icon"
|
|
21
24
|
:color="getIconColor"
|
|
@@ -44,6 +47,7 @@
|
|
|
44
47
|
// />
|
|
45
48
|
|
|
46
49
|
import styled from 'vue3-styled-components'
|
|
50
|
+
import RCSpinner from '../../spinner'
|
|
47
51
|
import Icon from '../../icon'
|
|
48
52
|
import theme from '../../../assets/theme'
|
|
49
53
|
|
|
@@ -174,6 +178,10 @@
|
|
|
174
178
|
transform: rotate(20deg);
|
|
175
179
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
|
176
180
|
`
|
|
181
|
+
const FlexSpinner = styled('div')`
|
|
182
|
+
flex: 0;
|
|
183
|
+
margin-right: 8px;
|
|
184
|
+
`
|
|
177
185
|
|
|
178
186
|
export default {
|
|
179
187
|
name: 'MainButton',
|
|
@@ -183,6 +191,8 @@
|
|
|
183
191
|
PageContainer,
|
|
184
192
|
ButtonContainer,
|
|
185
193
|
BetaTag,
|
|
194
|
+
RCSpinner,
|
|
195
|
+
FlexSpinner,
|
|
186
196
|
},
|
|
187
197
|
props: {
|
|
188
198
|
type: {
|
|
@@ -285,6 +295,10 @@
|
|
|
285
295
|
type: Boolean,
|
|
286
296
|
default: false,
|
|
287
297
|
},
|
|
298
|
+
isLoading: {
|
|
299
|
+
type: Boolean,
|
|
300
|
+
default: false,
|
|
301
|
+
},
|
|
288
302
|
},
|
|
289
303
|
computed: {
|
|
290
304
|
theme() {
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
v-if="hasError && hasErrorMessage"
|
|
94
94
|
data-test-id="error_message_wrapper"
|
|
95
95
|
>
|
|
96
|
-
{{
|
|
96
|
+
{{ errorMessage }}
|
|
97
97
|
</ErrorMessage>
|
|
98
98
|
</InputErrorWrapper>
|
|
99
99
|
</InputWrapper>
|
|
@@ -444,9 +444,6 @@
|
|
|
444
444
|
hasErrorMessage() {
|
|
445
445
|
return this.errorMessage && this.errorMessage.length > 0
|
|
446
446
|
},
|
|
447
|
-
dynamicErrorMessage() {
|
|
448
|
-
return this.errorMessage
|
|
449
|
-
},
|
|
450
447
|
},
|
|
451
448
|
watch: {
|
|
452
449
|
hasFocus(newVal) {
|
|
@@ -1,77 +1,85 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<LabelContainer
|
|
9
|
-
:checkmark-color="checkmarkColor"
|
|
10
|
-
:color-mode="colorMode"
|
|
11
|
-
:has-label="!!item.label"
|
|
12
|
-
:has-slots="!!$slots[`input-${item.value}`]"
|
|
13
|
-
:is-checked="selectedOption === item.value"
|
|
14
|
-
:is-disabled="isItemDisabled(item)"
|
|
15
|
-
:size="size"
|
|
2
|
+
<FlexRadioContainer>
|
|
3
|
+
<ComponentWrapper :color-mode="colorMode" :layout="layout">
|
|
4
|
+
<RadioWrapper
|
|
5
|
+
v-for="(item, index) in options"
|
|
6
|
+
:key="item.value"
|
|
7
|
+
:data-test-id="'radioWrapper_' + item.value"
|
|
16
8
|
>
|
|
17
|
-
<
|
|
18
|
-
:
|
|
19
|
-
:data-id="`radio_button_${dataId}_option_${item.value}`"
|
|
20
|
-
:data-qa-id="dataQaId"
|
|
21
|
-
:data-test-id="'radioInput_' + item.value"
|
|
22
|
-
:disabled="isItemDisabled(item)"
|
|
23
|
-
:name="'radioButtons_' + radioName"
|
|
24
|
-
type="radio"
|
|
25
|
-
:value="selectedOption"
|
|
26
|
-
@click="onInputHandler(item.value)"
|
|
27
|
-
/>
|
|
28
|
-
<span class="checkmark"></span>
|
|
29
|
-
<LabelText
|
|
30
|
-
v-if="item.label"
|
|
9
|
+
<LabelContainer
|
|
10
|
+
:checkmark-color="checkmarkColor"
|
|
31
11
|
:color-mode="colorMode"
|
|
32
|
-
:
|
|
12
|
+
:has-label="!!item.label"
|
|
13
|
+
:has-slots="!!$slots[`input-${item.value}`]"
|
|
14
|
+
:is-checked="selectedOption === item.value"
|
|
33
15
|
:is-disabled="isItemDisabled(item)"
|
|
16
|
+
:size="size"
|
|
34
17
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</LabelContainer>
|
|
46
|
-
<ImageContainer v-if="item.img">
|
|
47
|
-
<RadioImage
|
|
48
|
-
:data-test-id="'radioImage_' + item.value"
|
|
49
|
-
:src="item.img"
|
|
50
|
-
/>
|
|
51
|
-
<div
|
|
52
|
-
class="search-icn-container"
|
|
53
|
-
:data-test-id="'radioOpenImage_' + item.value"
|
|
54
|
-
@click="toggleImageModal(index)"
|
|
55
|
-
>
|
|
56
|
-
<img
|
|
57
|
-
alt=""
|
|
58
|
-
class="search-icn"
|
|
59
|
-
:src="require('../../../assets/icons/search_icon.png')"
|
|
18
|
+
<Radio
|
|
19
|
+
:checked="selectedOption === item.value"
|
|
20
|
+
:data-id="`radio_button_${dataId}_option_${item.value}`"
|
|
21
|
+
:data-qa-id="dataQaId"
|
|
22
|
+
:data-test-id="'radioInput_' + item.value"
|
|
23
|
+
:disabled="isItemDisabled(item)"
|
|
24
|
+
:name="'radioButtons_' + radioName"
|
|
25
|
+
type="radio"
|
|
26
|
+
:value="selectedOption"
|
|
27
|
+
@click="onInputHandler(item.value)"
|
|
60
28
|
/>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
29
|
+
<span class="checkmark"></span>
|
|
30
|
+
<LabelText
|
|
31
|
+
v-if="item.label"
|
|
32
|
+
:color-mode="colorMode"
|
|
33
|
+
:data-test-id="'radioLabel_' + item.value"
|
|
34
|
+
:is-disabled="isItemDisabled(item)"
|
|
35
|
+
>
|
|
36
|
+
{{ item.label }}
|
|
37
|
+
<IsRequiredLabelStar v-if="isRequiredLabel" />
|
|
38
|
+
</LabelText>
|
|
39
|
+
<InfoText
|
|
40
|
+
v-if="item.infoText"
|
|
41
|
+
:data-test-id="'radioInfo_' + item.value"
|
|
42
|
+
size="16px"
|
|
43
|
+
:text="item.infoText"
|
|
44
|
+
/>
|
|
45
|
+
<slot :name="`input-${item.value}`"></slot>
|
|
46
|
+
</LabelContainer>
|
|
47
|
+
<ImageContainer v-if="item.img">
|
|
48
|
+
<RadioImage
|
|
49
|
+
:data-test-id="'radioImage_' + item.value"
|
|
50
|
+
:src="item.img"
|
|
51
|
+
/>
|
|
52
|
+
<div
|
|
53
|
+
class="search-icn-container"
|
|
54
|
+
:data-test-id="'radioOpenImage_' + item.value"
|
|
55
|
+
@click="toggleImageModal(index)"
|
|
56
|
+
>
|
|
57
|
+
<img
|
|
58
|
+
alt=""
|
|
59
|
+
class="search-icn"
|
|
60
|
+
:src="require('../../../assets/icons/search_icon.png')"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
</ImageContainer>
|
|
64
|
+
<Modal
|
|
65
|
+
v-if="item.img"
|
|
66
|
+
:data-test-id="'radioModal_' + item.value"
|
|
67
|
+
:is-open="isImageOpen(index)"
|
|
68
|
+
@on-close="toggleImageModal(null)"
|
|
69
|
+
>
|
|
70
|
+
<ModalImageContainer>
|
|
71
|
+
<ModalImage :src="item.img" />
|
|
72
|
+
</ModalImageContainer>
|
|
73
|
+
</Modal>
|
|
74
|
+
</RadioWrapper>
|
|
75
|
+
</ComponentWrapper>
|
|
76
|
+
<ErrorMessage
|
|
77
|
+
v-if="hasError && errorMessage"
|
|
78
|
+
data-test-id="error_message_wrapper"
|
|
79
|
+
>
|
|
80
|
+
{{ errorMessage }}
|
|
81
|
+
</ErrorMessage>
|
|
82
|
+
</FlexRadioContainer>
|
|
75
83
|
</template>
|
|
76
84
|
|
|
77
85
|
<script>
|
|
@@ -99,6 +107,7 @@
|
|
|
99
107
|
import Modal from '../../modals/modal'
|
|
100
108
|
import InfoText from '../../infoText'
|
|
101
109
|
import IsRequiredLabelStar from '../isRequiredLabelStar'
|
|
110
|
+
import ErrorMessage from '../../errorMessage'
|
|
102
111
|
|
|
103
112
|
const wrapperProps = {
|
|
104
113
|
layout: String,
|
|
@@ -246,7 +255,11 @@
|
|
|
246
255
|
const ModalImageContainer = styled.div`
|
|
247
256
|
padding: 40px;
|
|
248
257
|
`
|
|
249
|
-
|
|
258
|
+
const FlexRadioContainer = styled.div`
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
position: relative;
|
|
262
|
+
`
|
|
250
263
|
export default {
|
|
251
264
|
name: 'RadioButton',
|
|
252
265
|
components: {
|
|
@@ -262,6 +275,8 @@
|
|
|
262
275
|
InfoText,
|
|
263
276
|
LabelText,
|
|
264
277
|
IsRequiredLabelStar,
|
|
278
|
+
ErrorMessage,
|
|
279
|
+
FlexRadioContainer,
|
|
265
280
|
},
|
|
266
281
|
props: {
|
|
267
282
|
disabled: {
|
|
@@ -320,6 +335,16 @@
|
|
|
320
335
|
default: false,
|
|
321
336
|
type: Boolean,
|
|
322
337
|
},
|
|
338
|
+
hasError: {
|
|
339
|
+
required: false,
|
|
340
|
+
default: false,
|
|
341
|
+
type: Boolean,
|
|
342
|
+
},
|
|
343
|
+
errorMessage: {
|
|
344
|
+
required: false,
|
|
345
|
+
default: '',
|
|
346
|
+
type: String,
|
|
347
|
+
},
|
|
323
348
|
},
|
|
324
349
|
emits: ['on-radio-change'],
|
|
325
350
|
data() {
|
|
@@ -201,6 +201,12 @@
|
|
|
201
201
|
</SelectDropdown>
|
|
202
202
|
</Component>
|
|
203
203
|
</DropdownWrapper>
|
|
204
|
+
<ErrorMessage
|
|
205
|
+
v-if="hasError && hasErrorMessage"
|
|
206
|
+
data-test-id="error_message_wrapper"
|
|
207
|
+
>
|
|
208
|
+
{{ errorMessage }}
|
|
209
|
+
</ErrorMessage>
|
|
204
210
|
</SelectButtonWrapper>
|
|
205
211
|
</InputWrapper>
|
|
206
212
|
</Container>
|
|
@@ -233,6 +239,7 @@
|
|
|
233
239
|
import { Teleport, inject } from 'vue'
|
|
234
240
|
import styled from 'vue3-styled-components'
|
|
235
241
|
import InfoText from '../../infoText'
|
|
242
|
+
import ErrorMessage from '../../errorMessage'
|
|
236
243
|
import Icon from '../../icon'
|
|
237
244
|
import InputText from '../inputText'
|
|
238
245
|
import DraggableInputHandle from '../../draggableInputHandle'
|
|
@@ -302,7 +309,6 @@
|
|
|
302
309
|
const Container = styled('div', inputProps)`
|
|
303
310
|
width: ${(props) => props.selectWidth};
|
|
304
311
|
position: ${(props) => (props.noRelative ? 'static' : 'relative')};
|
|
305
|
-
display: inline-block;
|
|
306
312
|
text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
|
|
307
313
|
`
|
|
308
314
|
|
|
@@ -514,6 +520,7 @@
|
|
|
514
520
|
Teleport,
|
|
515
521
|
DraggableInputHandle,
|
|
516
522
|
IsRequiredLabelStar,
|
|
523
|
+
ErrorMessage,
|
|
517
524
|
},
|
|
518
525
|
|
|
519
526
|
props: {
|
|
@@ -620,9 +627,14 @@
|
|
|
620
627
|
default: true,
|
|
621
628
|
},
|
|
622
629
|
hasError: {
|
|
630
|
+
type: Boolean,
|
|
623
631
|
required: false,
|
|
624
632
|
default: false,
|
|
625
633
|
},
|
|
634
|
+
errorMessage: {
|
|
635
|
+
type: String,
|
|
636
|
+
default: '',
|
|
637
|
+
},
|
|
626
638
|
disabled: {
|
|
627
639
|
required: false,
|
|
628
640
|
type: Boolean,
|
|
@@ -735,6 +747,9 @@
|
|
|
735
747
|
}
|
|
736
748
|
},
|
|
737
749
|
computed: {
|
|
750
|
+
hasErrorMessage() {
|
|
751
|
+
return this.errorMessage && this.errorMessage.length > 0
|
|
752
|
+
},
|
|
738
753
|
optionLength() {
|
|
739
754
|
if (this.isDropdownOpen) {
|
|
740
755
|
return this.$refs.dropdown.$el.childElementCount > 1
|
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
:resize="resize"
|
|
26
26
|
:rows="rowHeight"
|
|
27
27
|
:value="value"
|
|
28
|
+
@blur="onInputBlur"
|
|
29
|
+
@focus="onInputFocus"
|
|
28
30
|
@input="onChangeHandler"
|
|
29
31
|
></textarea>
|
|
30
32
|
</InputContainer>
|
|
@@ -208,6 +210,12 @@
|
|
|
208
210
|
}
|
|
209
211
|
this.$emit('input-change', $event.target.value)
|
|
210
212
|
},
|
|
213
|
+
onInputBlur($event) {
|
|
214
|
+
this.$emit('input-blur', $event.target.value)
|
|
215
|
+
},
|
|
216
|
+
onInputFocus($event) {
|
|
217
|
+
this.$emit('input-focus', $event.target.value)
|
|
218
|
+
},
|
|
211
219
|
},
|
|
212
220
|
}
|
|
213
221
|
</script>
|