goodteditor-ui 1.0.76 → 2.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/.eslintrc.js +10 -8
- package/index.html +20 -0
- package/package.json +13 -33
- package/postcss.config.js +1 -0
- package/src/components/ui/Badge.vue +3 -2
- package/src/components/ui/ColorPicker/Alpha.vue +1 -0
- package/src/components/ui/ColorPicker/Colors.vue +2 -1
- package/src/components/ui/ColorPicker/Hue.vue +1 -0
- package/src/components/ui/ColorPicker/Saturation.vue +1 -0
- package/src/components/ui/ColorPicker.vue +5 -4
- package/src/components/ui/Datalist.vue +8 -7
- package/src/components/ui/DatePicker.vue +11 -10
- package/src/components/ui/FileSelector.vue +2 -1
- package/src/components/ui/Grid.vue +14 -9
- package/src/components/ui/Image.vue +4 -2
- package/src/components/ui/InputAutocomplete.vue +23 -22
- package/src/components/ui/InputColorPicker.vue +10 -9
- package/src/components/ui/InputDatePicker.vue +11 -10
- package/src/components/ui/InputTags.vue +14 -13
- package/src/components/ui/InputTimePicker.vue +10 -9
- package/src/components/ui/InputUnits.vue +5 -5
- package/src/components/ui/Lazy.vue +5 -4
- package/src/components/ui/Pagination.vue +5 -4
- package/src/components/ui/Paginator.vue +5 -4
- package/src/components/ui/Popover.vue +14 -9
- package/src/components/ui/Popup.vue +5 -4
- package/src/components/ui/ResponsiveContainer.vue +17 -10
- package/src/components/ui/Select.vue +16 -14
- package/src/components/ui/TimePicker.vue +6 -7
- package/src/components/ui/Tooltip.vue +4 -3
- package/src/components/ui/WysiwygEditor/WysiwygEditor.vue +11 -10
- package/src/components/ui/WysiwygEditor/extensions/font-size.js +1 -1
- package/src/components/ui/WysiwygEditor/extensions/formatting.js +1 -1
- package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue +3 -3
- package/src/components/ui/WysiwygEditor/renders/InputAuto.vue +3 -3
- package/src/components/ui/WysiwygEditor/renders/InputUnits.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/Select.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue +2 -2
- package/src/components/ui/WysiwygEditor/renders/components/Tooltip.vue +2 -1
- package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js +1 -0
- package/src/components/ui/utils/FormComponent.js +36 -37
- package/src/main.js +2 -6
- package/vite.config.js +6 -0
- package/babel.config.js +0 -5
- package/vue.config.js +0 -8
package/.eslintrc.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
export default {
|
|
2
|
+
'root': true,
|
|
3
|
+
env: {
|
|
4
|
+
es2022: true,
|
|
5
|
+
},
|
|
6
|
+
extends: ['plugin:vue/essential', 'eslint:recommended'],
|
|
7
|
+
rules: {
|
|
8
|
+
'vue/no-v-model-argument': 'off',
|
|
9
|
+
},
|
|
10
|
+
};
|
package/index.html
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
7
|
+
<title>Goodt-ui</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<noscript>
|
|
12
|
+
<strong
|
|
13
|
+
>We're sorry but this app doesn't work properly
|
|
14
|
+
without JavaScript enabled. Please enable it to continue.</strong
|
|
15
|
+
>
|
|
16
|
+
</noscript>
|
|
17
|
+
<div id="app"></div>
|
|
18
|
+
<script type="module" src="/src/main.js"></script>
|
|
19
|
+
</body>
|
|
20
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goodteditor-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"homepage": "https://goodt-ui.netlify.app/",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"serve": "vue-
|
|
8
|
-
"build": "vue-
|
|
9
|
-
"dev": "
|
|
7
|
+
"serve": "vue-styleguidist server",
|
|
8
|
+
"build": "vue-styleguidist build",
|
|
9
|
+
"dev": "vite",
|
|
10
10
|
"docs:build": "set NODE_ENV=development && npm run build",
|
|
11
11
|
"docs:deploy": "npx netlify deploy --dir=docs --prod"
|
|
12
12
|
},
|
|
@@ -24,43 +24,23 @@
|
|
|
24
24
|
"@tiptap/extension-text-style": "^2.0.0",
|
|
25
25
|
"@tiptap/extension-underline": "^2.0.0",
|
|
26
26
|
"@tiptap/starter-kit": "^2.0.0",
|
|
27
|
-
"@tiptap/vue-
|
|
27
|
+
"@tiptap/vue-3": "^2.6.6"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@
|
|
31
|
-
"
|
|
32
|
-
"@vue/cli-plugin-eslint": "^5.0.8",
|
|
33
|
-
"@vue/cli-service": "^5.0.8",
|
|
34
|
-
"babel-eslint": "^10.1.0",
|
|
35
|
-
"eslint": "^7.5.0",
|
|
30
|
+
"@goodt/postcss-config": "^2.1.0",
|
|
31
|
+
"eslint": "^9.14.0",
|
|
36
32
|
"eslint-plugin-vue": "^9.25.0",
|
|
37
33
|
"less": "^3.13.1",
|
|
38
|
-
"less-loader": "^7.0.0",
|
|
39
34
|
"netlify-cli": "^5.0.1",
|
|
40
|
-
"vue-
|
|
41
|
-
"vue-styleguidist": "^4.72.4",
|
|
42
|
-
"vue-template-compiler": "^2.6.12",
|
|
43
|
-
"webpack": "^5.91.0"
|
|
35
|
+
"vue-styleguidist": "^4.72.4"
|
|
44
36
|
},
|
|
45
37
|
"peerDependencies": {
|
|
46
|
-
"vue": "^2.6.12",
|
|
47
|
-
"goodt-framework-css": "^2.0.0",
|
|
48
38
|
"@mdi/font": "^7.4.0",
|
|
49
|
-
"@mdi/light-font": "^0.2.0"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"node": true
|
|
55
|
-
},
|
|
56
|
-
"extends": [
|
|
57
|
-
"plugin:vue/essential",
|
|
58
|
-
"eslint:recommended"
|
|
59
|
-
],
|
|
60
|
-
"parserOptions": {
|
|
61
|
-
"parser": "babel-eslint"
|
|
62
|
-
},
|
|
63
|
-
"rules": {}
|
|
39
|
+
"@mdi/light-font": "^0.2.0",
|
|
40
|
+
"goodt-framework-css": "^2.0.0",
|
|
41
|
+
"vue": "^3.4.12",
|
|
42
|
+
"vite": "^5.4.6",
|
|
43
|
+
"@vitejs/plugin-vue": "^5.1.2"
|
|
64
44
|
},
|
|
65
45
|
"browserslist": [
|
|
66
46
|
"> 1%",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('@goodt/postcss-config/postcss.config.js');
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
<div class="ui-badge badge" :class="cssClass">
|
|
3
3
|
<!-- @slot Content slot -->
|
|
4
4
|
<slot></slot>
|
|
5
|
-
<!--
|
|
5
|
+
<!--
|
|
6
6
|
@slot Custom 'remove' content (icon, button etc)
|
|
7
|
-
@binding {function} remove remove function
|
|
7
|
+
@binding {function} remove remove function
|
|
8
8
|
-->
|
|
9
9
|
<slot name="remove" v-if="removable" :remove="onRemove">
|
|
10
10
|
<i class="mdi mdi-close text-small mar-left-2 cursor-pointer" @click="onRemove"></i>
|
|
@@ -51,6 +51,7 @@ export default {
|
|
|
51
51
|
default: false,
|
|
52
52
|
},
|
|
53
53
|
},
|
|
54
|
+
emits: ['remove'],
|
|
54
55
|
computed: {
|
|
55
56
|
cssClass() {
|
|
56
57
|
let o = {};
|
|
@@ -78,6 +78,7 @@ export default {
|
|
|
78
78
|
default: ''
|
|
79
79
|
}
|
|
80
80
|
},
|
|
81
|
+
emits: ['selectColor'],
|
|
81
82
|
data() {
|
|
82
83
|
return {
|
|
83
84
|
imgAlphaBase64: '',
|
|
@@ -88,7 +89,7 @@ export default {
|
|
|
88
89
|
created() {
|
|
89
90
|
this.imgAlphaBase64 = createAlphaSquare(4).toDataURL();
|
|
90
91
|
},
|
|
91
|
-
|
|
92
|
+
beforeUnmount() {
|
|
92
93
|
this.setColorsHistory(this.color);
|
|
93
94
|
},
|
|
94
95
|
methods: {
|
|
@@ -114,7 +114,7 @@ export default {
|
|
|
114
114
|
/**
|
|
115
115
|
* @model
|
|
116
116
|
*/
|
|
117
|
-
|
|
117
|
+
modelValue: {
|
|
118
118
|
type: String,
|
|
119
119
|
default: '#000000'
|
|
120
120
|
},
|
|
@@ -140,6 +140,7 @@ export default {
|
|
|
140
140
|
default: false
|
|
141
141
|
}
|
|
142
142
|
},
|
|
143
|
+
emits: ['update:modelValue', 'submit', 'changeColor', 'close'],
|
|
143
144
|
data() {
|
|
144
145
|
return {
|
|
145
146
|
hueWidth: 15,
|
|
@@ -195,7 +196,7 @@ export default {
|
|
|
195
196
|
}
|
|
196
197
|
},
|
|
197
198
|
watch: {
|
|
198
|
-
|
|
199
|
+
modelValue: {
|
|
199
200
|
handler(input, prevInput) {
|
|
200
201
|
if (prevInput == null) {
|
|
201
202
|
this.modelMode = resolveColorMode(input);
|
|
@@ -220,8 +221,8 @@ export default {
|
|
|
220
221
|
* Triggers when the color changes
|
|
221
222
|
* @property {Number} rgbaString color rgba string
|
|
222
223
|
*/
|
|
223
|
-
this.$emit('
|
|
224
|
-
}
|
|
224
|
+
this.$emit('update:modelValue', this.rgbaString);
|
|
225
|
+
},
|
|
225
226
|
},
|
|
226
227
|
created() {
|
|
227
228
|
document.addEventListener('keydown', this.onDocKeydown);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ui-datalist dropdown" :class="cssClass">
|
|
3
|
-
<!--
|
|
3
|
+
<!--
|
|
4
4
|
@slot Dropdown header slot
|
|
5
5
|
-->
|
|
6
6
|
<slot name="header"></slot>
|
|
7
7
|
<ul ref="ul" :style="{ maxHeight }">
|
|
8
|
-
<!--
|
|
8
|
+
<!--
|
|
9
9
|
@slot Label slot for single mode
|
|
10
10
|
@binding {Object} option option
|
|
11
11
|
@binding {Number} index option's index
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</li>
|
|
34
34
|
</slot>
|
|
35
35
|
</ul>
|
|
36
|
-
<!--
|
|
36
|
+
<!--
|
|
37
37
|
@slot Dropdown footer slot
|
|
38
38
|
-->
|
|
39
39
|
<slot name="footer"></slot>
|
|
@@ -68,13 +68,13 @@ export default {
|
|
|
68
68
|
},
|
|
69
69
|
/**
|
|
70
70
|
* Defines the size of the component
|
|
71
|
-
* @values '', small, large
|
|
71
|
+
* @values 'normal', small, large
|
|
72
72
|
*/
|
|
73
73
|
size: {
|
|
74
74
|
type: String,
|
|
75
|
-
default: '',
|
|
75
|
+
default: 'normal',
|
|
76
76
|
validator: function (value) {
|
|
77
|
-
return ['', 'small', 'large'].indexOf(value) >= 0;
|
|
77
|
+
return ['normal', 'small', 'large'].indexOf(value) >= 0;
|
|
78
78
|
},
|
|
79
79
|
},
|
|
80
80
|
/**
|
|
@@ -92,6 +92,7 @@ export default {
|
|
|
92
92
|
default: -1,
|
|
93
93
|
},
|
|
94
94
|
},
|
|
95
|
+
emits: ['select-option', 'update:cursorIndex'],
|
|
95
96
|
data() {
|
|
96
97
|
return { useScrollAnimation: true };
|
|
97
98
|
},
|
|
@@ -99,7 +100,7 @@ export default {
|
|
|
99
100
|
cssClass() {
|
|
100
101
|
let { size, useScrollAnimation } = this;
|
|
101
102
|
let o = [];
|
|
102
|
-
size && o.push(`dropdown-${this.size}`);
|
|
103
|
+
size !== 'normal' && o.push(`dropdown-${this.size}`);
|
|
103
104
|
!useScrollAnimation && o.push('no-scroll-animation');
|
|
104
105
|
return o;
|
|
105
106
|
},
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
<div class="ui-date-picker">
|
|
3
3
|
<div class="panel d-inline-flex flex-col scroll-hide">
|
|
4
4
|
<div class="row row-collapse row-vgap-none flex-nowrap">
|
|
5
|
-
<div class="col col-auto" v-if="$
|
|
6
|
-
<!--
|
|
5
|
+
<div class="col col-auto" v-if="$slots.left?.()">
|
|
6
|
+
<!--
|
|
7
7
|
@slot Custom left content
|
|
8
8
|
-->
|
|
9
9
|
<slot name="left"></slot>
|
|
10
10
|
</div>
|
|
11
11
|
<div class="col col-auto">
|
|
12
|
-
<!--
|
|
12
|
+
<!--
|
|
13
13
|
@slot Custom header content
|
|
14
14
|
@binding {Function} prevYear select previous year
|
|
15
15
|
@binding {Function} prevMonth select previous month
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
v-for="dayIndex of dayNamesIndexes"
|
|
69
69
|
:key="`day-${dayIndex}`"
|
|
70
70
|
>
|
|
71
|
-
<!--
|
|
71
|
+
<!--
|
|
72
72
|
@slot Custom day content
|
|
73
73
|
@binding {Number} dayIndex day index (0 = sunday)
|
|
74
74
|
@binding {String} dayName day name
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
v-for="n in currentMonthDates"
|
|
93
93
|
:key="`${n.getMonth()}-${n.getDate()}`"
|
|
94
94
|
>
|
|
95
|
-
<!--
|
|
95
|
+
<!--
|
|
96
96
|
@slot Custom date content
|
|
97
97
|
@binding {Date} date date
|
|
98
98
|
@binding {Date} dateStart range start date
|
|
@@ -161,8 +161,8 @@
|
|
|
161
161
|
</div>
|
|
162
162
|
</div>
|
|
163
163
|
</div>
|
|
164
|
-
<div class="col col-auto" v-if="$
|
|
165
|
-
<!--
|
|
164
|
+
<div class="col col-auto" v-if="$slots.right?.()">
|
|
165
|
+
<!--
|
|
166
166
|
@slot Custom right content
|
|
167
167
|
-->
|
|
168
168
|
<slot name="right"></slot>
|
|
@@ -229,7 +229,7 @@ export default {
|
|
|
229
229
|
/**
|
|
230
230
|
* @model
|
|
231
231
|
*/
|
|
232
|
-
|
|
232
|
+
modelValue: {
|
|
233
233
|
type: [Date, Array],
|
|
234
234
|
default: null,
|
|
235
235
|
validation(val) {
|
|
@@ -319,6 +319,7 @@ export default {
|
|
|
319
319
|
},
|
|
320
320
|
},
|
|
321
321
|
},
|
|
322
|
+
emits: ['update:modelValue', 'set-date', 'change'],
|
|
322
323
|
data() {
|
|
323
324
|
return {
|
|
324
325
|
date: null,
|
|
@@ -367,7 +368,7 @@ export default {
|
|
|
367
368
|
},
|
|
368
369
|
},
|
|
369
370
|
watch: {
|
|
370
|
-
|
|
371
|
+
modelValue: {
|
|
371
372
|
handler(val) {
|
|
372
373
|
let d = new Date();
|
|
373
374
|
if (this.range && Array.isArray(val)) {
|
|
@@ -515,7 +516,7 @@ export default {
|
|
|
515
516
|
* Date change event
|
|
516
517
|
* @property {Date} date
|
|
517
518
|
*/
|
|
518
|
-
this.$emit('
|
|
519
|
+
this.$emit('update:modelValue', val);
|
|
519
520
|
/**
|
|
520
521
|
* Date change event
|
|
521
522
|
* @property {Date} date
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="ui-file-selector">
|
|
3
3
|
<!--
|
|
4
4
|
@slot default slot
|
|
5
|
-
@binding {File[]} files selected files
|
|
5
|
+
@binding {File[]} files selected files
|
|
6
6
|
-->
|
|
7
7
|
<slot v-bind="{ files }">select files</slot>
|
|
8
8
|
<input
|
|
@@ -51,6 +51,7 @@ export default {
|
|
|
51
51
|
default: false,
|
|
52
52
|
},
|
|
53
53
|
},
|
|
54
|
+
emits: ['change'],
|
|
54
55
|
data() {
|
|
55
56
|
return {
|
|
56
57
|
files: [],
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
}
|
|
5
5
|
</style>
|
|
6
6
|
<script>
|
|
7
|
+
import { h } from 'vue';
|
|
8
|
+
|
|
7
9
|
export default {
|
|
8
10
|
props: {
|
|
9
11
|
/**
|
|
@@ -74,18 +76,21 @@ export default {
|
|
|
74
76
|
return { 'grid-area': name, 'min-height': 0 };
|
|
75
77
|
},
|
|
76
78
|
},
|
|
77
|
-
render(
|
|
78
|
-
const { wrapTag, slotNames, gridStyle, getSlotStyle, $
|
|
79
|
-
const children = slotNames.
|
|
80
|
-
const slot = $
|
|
79
|
+
render() {
|
|
80
|
+
const { wrapTag, slotNames, gridStyle, getSlotStyle, $slots } = this;
|
|
81
|
+
const children = slotNames.reduce((acc, name) => {
|
|
82
|
+
const slot = $slots[name]?.();
|
|
81
83
|
if (!slot) {
|
|
82
|
-
return
|
|
84
|
+
return acc;
|
|
83
85
|
}
|
|
84
86
|
const slotChild = slot({ style: getSlotStyle(name) });
|
|
85
|
-
return
|
|
86
|
-
|
|
87
|
-
:
|
|
88
|
-
|
|
87
|
+
return {
|
|
88
|
+
...acc,
|
|
89
|
+
[name]: wrapTag
|
|
90
|
+
? h(wrapTag, { style: getSlotStyle(name), key: name }, slotChild)
|
|
91
|
+
: slotChild,
|
|
92
|
+
};
|
|
93
|
+
}, {});
|
|
89
94
|
return h('div', { class: 'ui-grid', style: gridStyle }, children);
|
|
90
95
|
},
|
|
91
96
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { h } from 'vue';
|
|
3
|
+
|
|
2
4
|
/**
|
|
3
5
|
* @param {File} file
|
|
4
6
|
* @return {Promise<string>}
|
|
@@ -49,9 +51,9 @@ export default {
|
|
|
49
51
|
immediate: true,
|
|
50
52
|
},
|
|
51
53
|
},
|
|
52
|
-
render(
|
|
54
|
+
render() {
|
|
53
55
|
const { source } = this;
|
|
54
|
-
return source ? h('img', {
|
|
56
|
+
return source ? h('img', { src: source }) : this.$slots.default;
|
|
55
57
|
},
|
|
56
58
|
};
|
|
57
59
|
</script>
|
|
@@ -7,25 +7,25 @@
|
|
|
7
7
|
:data-popover="popoverTargetId"
|
|
8
8
|
>
|
|
9
9
|
<div style="flex: 1 0 0">
|
|
10
|
-
<!--
|
|
10
|
+
<!--
|
|
11
11
|
@slot Custom input slot
|
|
12
12
|
@binding {String} id input id attribute value
|
|
13
13
|
@binding {String} value input value
|
|
14
14
|
@binding {Object} inputBinds input props (use v-bind)
|
|
15
15
|
@binding {Object} inputEvents input events (use v-on)
|
|
16
16
|
-->
|
|
17
|
-
<slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
|
|
17
|
+
<slot name="input" v-bind="{ id: inputId, value: modelValue, inputBinds, inputEvents }">
|
|
18
18
|
<input
|
|
19
19
|
:id="inputId"
|
|
20
20
|
class="ui-input-autocomplete-input w-100"
|
|
21
21
|
type="text"
|
|
22
|
-
:value="
|
|
22
|
+
:value="modelValue"
|
|
23
23
|
v-bind="inputBinds"
|
|
24
24
|
v-on="inputEvents"
|
|
25
25
|
/>
|
|
26
26
|
</slot>
|
|
27
27
|
</div>
|
|
28
|
-
<!--
|
|
28
|
+
<!--
|
|
29
29
|
@slot Loading custom content
|
|
30
30
|
-->
|
|
31
31
|
<slot name="loading" v-if="loading">
|
|
@@ -33,32 +33,32 @@
|
|
|
33
33
|
<div class="preloader"></div>
|
|
34
34
|
</div>
|
|
35
35
|
</slot>
|
|
36
|
-
<ui-popover :show
|
|
36
|
+
<ui-popover v-model:show="popoverShow" v-bind="popoverOptions">
|
|
37
37
|
<ui-datalist
|
|
38
38
|
class="w-100 pull-left"
|
|
39
39
|
@select-option="onDatalistSelectOption"
|
|
40
40
|
v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
|
|
41
|
-
:cursorIndex
|
|
41
|
+
v-model:cursorIndex="dataListCursorIndex"
|
|
42
42
|
ref="datalist"
|
|
43
43
|
>
|
|
44
44
|
<template #header>
|
|
45
|
-
<!--
|
|
45
|
+
<!--
|
|
46
46
|
@slot Dropdown header content
|
|
47
47
|
-->
|
|
48
48
|
<slot name="dropdown-header"></slot>
|
|
49
|
-
<!--
|
|
49
|
+
<!--
|
|
50
50
|
@slot No results content
|
|
51
51
|
-->
|
|
52
52
|
<slot name="noresults" v-if="!loading && !suggestedOptions.length"></slot>
|
|
53
53
|
</template>
|
|
54
54
|
<template #option="{ option, index, cursorIndex, setCursorIndex }">
|
|
55
|
-
<!--
|
|
55
|
+
<!--
|
|
56
56
|
@slot Dropdown option
|
|
57
57
|
@binding {String} option option label
|
|
58
58
|
@binding {Number} optionIndex option index
|
|
59
59
|
@binding {String} value current value
|
|
60
60
|
@binding {String} valueLocal current delimited value
|
|
61
|
-
@binding {Number} cursorIndex current dropdown selection index
|
|
61
|
+
@binding {Number} cursorIndex current dropdown selection index
|
|
62
62
|
@binding {Function} selectOption function that select's the option
|
|
63
63
|
@binding {Function} setCursorIndex function that sets the cursor index
|
|
64
64
|
-->
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
v-bind="{
|
|
68
68
|
option: option,
|
|
69
69
|
optionIndex: index,
|
|
70
|
-
value,
|
|
70
|
+
value: modelValue,
|
|
71
71
|
valueLocal: delimitedValue,
|
|
72
72
|
cursorIndex,
|
|
73
73
|
selectOption,
|
|
@@ -80,13 +80,13 @@
|
|
|
80
80
|
</template>
|
|
81
81
|
</ui-datalist>
|
|
82
82
|
</ui-popover>
|
|
83
|
-
<!--
|
|
83
|
+
<!--
|
|
84
84
|
@slot Custom clear btn slot
|
|
85
85
|
@binding {Function} clear function that clears the value
|
|
86
86
|
-->
|
|
87
87
|
<slot
|
|
88
88
|
name="clear-btn"
|
|
89
|
-
v-if="useClearBtn &&
|
|
89
|
+
v-if="useClearBtn && modelValue.length > 0"
|
|
90
90
|
v-bind="{ clear: clearValue }"
|
|
91
91
|
>
|
|
92
92
|
<i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
|
|
@@ -184,6 +184,7 @@ export default {
|
|
|
184
184
|
default: false,
|
|
185
185
|
},
|
|
186
186
|
},
|
|
187
|
+
emits: ['change', 'blur', 'focus'],
|
|
187
188
|
data() {
|
|
188
189
|
return {
|
|
189
190
|
loading: false,
|
|
@@ -207,7 +208,7 @@ export default {
|
|
|
207
208
|
},
|
|
208
209
|
computed: {
|
|
209
210
|
delimitedIndex() {
|
|
210
|
-
let sub = this.
|
|
211
|
+
let sub = this.modelValue.substring(0, this.caretIndex);
|
|
211
212
|
let m = [];
|
|
212
213
|
let i = -1;
|
|
213
214
|
while ((i = sub.indexOf(this.delimiter, i + 1)) != -1) {
|
|
@@ -217,14 +218,14 @@ export default {
|
|
|
217
218
|
},
|
|
218
219
|
delimitedValue() {
|
|
219
220
|
if (this.delimiter) {
|
|
220
|
-
return this.
|
|
221
|
+
return this.modelValue.split(this.delimiter)[this.delimitedIndex];
|
|
221
222
|
}
|
|
222
|
-
return this.
|
|
223
|
+
return this.modelValue;
|
|
223
224
|
},
|
|
224
225
|
},
|
|
225
226
|
methods: {
|
|
226
227
|
clearValue() {
|
|
227
|
-
this.$emit('
|
|
228
|
+
this.$emit('update:modelValue', '');
|
|
228
229
|
this.caretIndex = 0;
|
|
229
230
|
this.delimitedValuePrev = null;
|
|
230
231
|
this.filterTID = null;
|
|
@@ -269,18 +270,18 @@ export default {
|
|
|
269
270
|
selectOption(opt) {
|
|
270
271
|
let val = opt;
|
|
271
272
|
if (this.delimiter) {
|
|
272
|
-
let arr = this.
|
|
273
|
+
let arr = this.modelValue.split(this.delimiter);
|
|
273
274
|
arr[this.delimitedIndex] = opt;
|
|
274
275
|
val = arr.join(this.delimiter);
|
|
275
276
|
}
|
|
276
277
|
/**
|
|
277
278
|
* Value change event
|
|
278
|
-
* @property {String}
|
|
279
|
+
* @property {String} modelValue
|
|
279
280
|
*/
|
|
280
|
-
this.$emit('
|
|
281
|
+
this.$emit('update:modelValue', val);
|
|
281
282
|
/**
|
|
282
283
|
* Value change event
|
|
283
|
-
* @property {String}
|
|
284
|
+
* @property {String} modelValue
|
|
284
285
|
*/
|
|
285
286
|
this.$emit('change', val);
|
|
286
287
|
this.popoverShow = false;
|
|
@@ -338,7 +339,7 @@ export default {
|
|
|
338
339
|
* input event
|
|
339
340
|
* @property {String} value
|
|
340
341
|
*/
|
|
341
|
-
this.$emit('
|
|
342
|
+
this.$emit('update:modelValue', val);
|
|
342
343
|
|
|
343
344
|
this.popoverShow = true;
|
|
344
345
|
this.caretIndex = e.target ? e.target.selectionStart : 0;
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
@binding {Object} inputBinds input props (use v-bind)
|
|
16
16
|
@binding {Object} inputEvents input events (use v-on)
|
|
17
17
|
-->
|
|
18
|
-
<slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
|
|
18
|
+
<slot name="input" v-bind="{ id: inputId, value: modelValue, inputBinds, inputEvents }">
|
|
19
19
|
<input
|
|
20
20
|
:id="inputId"
|
|
21
21
|
class="ui-input-color-picker-input w-100"
|
|
22
22
|
type="text"
|
|
23
|
-
:value="
|
|
23
|
+
:value="modelValue"
|
|
24
24
|
v-bind="inputBinds"
|
|
25
25
|
v-on="inputEvents"
|
|
26
26
|
/>
|
|
@@ -31,22 +31,22 @@
|
|
|
31
31
|
@binding {String} value current value
|
|
32
32
|
@binding {Function} toggle function that toggles the color picker
|
|
33
33
|
-->
|
|
34
|
-
<slot name="icon" v-bind="{ value, toggle: togglePopover }">
|
|
34
|
+
<slot name="icon" v-bind="{ value: modelValue, toggle: togglePopover }">
|
|
35
35
|
<div
|
|
36
36
|
class="ui-input-color-picker-icon-preview mar-left-2"
|
|
37
|
-
:class="[
|
|
38
|
-
:style="{ ...(isValid && { background:
|
|
37
|
+
:class="[readonly ? 'events-none' : 'cursor-pointer']"
|
|
38
|
+
:style="{ ...(isValid && { background: modelValue }) }"
|
|
39
39
|
@click="togglePopover"
|
|
40
40
|
></div>
|
|
41
41
|
</slot>
|
|
42
42
|
</div>
|
|
43
|
-
<ui-popover v-if="popoverShow" :show
|
|
43
|
+
<ui-popover v-if="popoverShow" v-model:show="popoverShow" v-bind="popoverOptions">
|
|
44
44
|
<color-picker
|
|
45
45
|
class="ui-input-color-picker-cp pull-left"
|
|
46
46
|
v-bind="{
|
|
47
|
-
|
|
47
|
+
modelValue,
|
|
48
48
|
colorsDefault,
|
|
49
|
-
showSubmit: true
|
|
49
|
+
showSubmit: true
|
|
50
50
|
}"
|
|
51
51
|
@close="onColorPickerClose"
|
|
52
52
|
@submit="onColorPickerSubmit"
|
|
@@ -122,6 +122,7 @@ export default {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
},
|
|
125
|
+
emits: ['change', 'valid'],
|
|
125
126
|
data() {
|
|
126
127
|
return {
|
|
127
128
|
isValid: false,
|
|
@@ -148,7 +149,7 @@ export default {
|
|
|
148
149
|
* Input event
|
|
149
150
|
* @property {String} color
|
|
150
151
|
*/
|
|
151
|
-
this.$emit('
|
|
152
|
+
this.$emit('update:modelValue', val);
|
|
152
153
|
},
|
|
153
154
|
changeColor(val) {
|
|
154
155
|
/**
|