goodteditor-ui 1.0.83 → 1.0.85
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goodteditor-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.85",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"homepage": "https://goodt-ui.netlify.app/",
|
|
6
6
|
"scripts": {
|
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
"vue-cli-plugin-styleguidist": "~4.72.4",
|
|
41
41
|
"vue-styleguidist": "^4.72.4",
|
|
42
42
|
"vue-template-compiler": "^2.6.12",
|
|
43
|
-
"webpack": "^5.91.0"
|
|
43
|
+
"webpack": "^5.91.0",
|
|
44
|
+
"postcss": "^8.1.0"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|
|
46
47
|
"vue": "^2.6.12",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@slot Dropdown header slot
|
|
5
5
|
-->
|
|
6
6
|
<slot name="header"></slot>
|
|
7
|
-
<ul ref="ul">
|
|
7
|
+
<ul ref="ul" class="list" :style="cssListStyle">
|
|
8
8
|
<!--
|
|
9
9
|
@slot Label slot for single mode
|
|
10
10
|
@binding {Object} option option
|
|
@@ -50,7 +50,16 @@
|
|
|
50
50
|
max-height: calc(var(--item-height) * var(--item-count));
|
|
51
51
|
outline: none;
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
--default-item-height: calc(var(--spacer3) * 2 + var(--line-height) * 1rem);
|
|
54
|
+
&&-small {
|
|
55
|
+
--default-item-height: calc(var(--spacer2) * 2 + var(--font-size-smaller) * var(--line-height) * 1.125);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.list {
|
|
59
|
+
--item-count: 5;
|
|
60
|
+
--item-height: var(--default-item-height);
|
|
61
|
+
|
|
62
|
+
max-height: calc(var(--item-height) * var(--item-count));
|
|
54
63
|
scroll-behavior: smooth;
|
|
55
64
|
max-height: inherit;
|
|
56
65
|
}
|
|
@@ -92,7 +101,21 @@ export default {
|
|
|
92
101
|
*/
|
|
93
102
|
maxHeight: {
|
|
94
103
|
type: String,
|
|
95
|
-
default:
|
|
104
|
+
default: null
|
|
105
|
+
},
|
|
106
|
+
/**
|
|
107
|
+
* Max visible items count
|
|
108
|
+
*/
|
|
109
|
+
maxItems: {
|
|
110
|
+
type: Number,
|
|
111
|
+
default: 5
|
|
112
|
+
},
|
|
113
|
+
/**
|
|
114
|
+
* Item height count
|
|
115
|
+
*/
|
|
116
|
+
itemHeight: {
|
|
117
|
+
type: String,
|
|
118
|
+
default: null
|
|
96
119
|
},
|
|
97
120
|
/**
|
|
98
121
|
* Max visible items count
|
|
@@ -121,11 +144,20 @@ export default {
|
|
|
121
144
|
return o;
|
|
122
145
|
},
|
|
123
146
|
cssStyle() {
|
|
124
|
-
const {
|
|
147
|
+
const { maxItems } = this;
|
|
148
|
+
return {
|
|
149
|
+
'--item-count': maxItems
|
|
150
|
+
};
|
|
151
|
+
},
|
|
152
|
+
cssListStyle() {
|
|
153
|
+
const { maxHeight, maxItems, itemHeight } = this;
|
|
125
154
|
return {
|
|
126
155
|
...(maxHeight && {
|
|
127
156
|
maxHeight
|
|
128
157
|
}),
|
|
158
|
+
...(itemHeight && {
|
|
159
|
+
'--item-height': itemHeight
|
|
160
|
+
}),
|
|
129
161
|
'--item-count': maxItems
|
|
130
162
|
};
|
|
131
163
|
}
|
|
@@ -34,12 +34,9 @@
|
|
|
34
34
|
setToday,
|
|
35
35
|
month,
|
|
36
36
|
monthName: monthNames[month],
|
|
37
|
-
year
|
|
38
|
-
}"
|
|
39
|
-
|
|
40
|
-
<div
|
|
41
|
-
class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3"
|
|
42
|
-
>
|
|
37
|
+
year
|
|
38
|
+
}">
|
|
39
|
+
<div class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3">
|
|
43
40
|
<div class="flex-shrink nobr">
|
|
44
41
|
<div class="icon cursor-pointer" @click="prevYear">
|
|
45
42
|
<i class="mdi mdi-chevron-double-left"></i>
|
|
@@ -66,8 +63,7 @@
|
|
|
66
63
|
<div
|
|
67
64
|
class="ui-date-picker-day-cell text-small"
|
|
68
65
|
v-for="dayIndex of dayNamesIndexes"
|
|
69
|
-
:key="`day-${dayIndex}`"
|
|
70
|
-
>
|
|
66
|
+
:key="`day-${dayIndex}`">
|
|
71
67
|
<!--
|
|
72
68
|
@slot Custom day content
|
|
73
69
|
@binding {Number} dayIndex day index (0 = sunday)
|
|
@@ -79,9 +75,8 @@
|
|
|
79
75
|
v-bind="{
|
|
80
76
|
dayIndex,
|
|
81
77
|
dayName: dayNames[dayIndex],
|
|
82
|
-
isWeekend: isWeekendDay(dayIndex)
|
|
83
|
-
}"
|
|
84
|
-
>
|
|
78
|
+
isWeekend: isWeekendDay(dayIndex)
|
|
79
|
+
}">
|
|
85
80
|
<div class="color-grey-dark">
|
|
86
81
|
{{ dayNames[dayIndex] }}
|
|
87
82
|
</div>
|
|
@@ -90,8 +85,7 @@
|
|
|
90
85
|
<div
|
|
91
86
|
class="ui-date-picker-date-cell text-small"
|
|
92
87
|
v-for="n in currentMonthDates"
|
|
93
|
-
:key="`${n.getMonth()}-${n.getDate()}`"
|
|
94
|
-
>
|
|
88
|
+
:key="`${n.getMonth()}-${n.getDate()}`">
|
|
95
89
|
<!--
|
|
96
90
|
@slot Custom date content
|
|
97
91
|
@binding {Date} date date
|
|
@@ -125,25 +119,18 @@
|
|
|
125
119
|
isSelected: isSelectedDate(n),
|
|
126
120
|
isToday: isTodayDate(n),
|
|
127
121
|
isWeekend: isWeekendDate(n),
|
|
128
|
-
setDate
|
|
129
|
-
}"
|
|
130
|
-
>
|
|
122
|
+
setDate
|
|
123
|
+
}">
|
|
131
124
|
<div
|
|
132
125
|
class="btn btn-icon btn-small"
|
|
133
126
|
:class="{
|
|
134
127
|
'btn-primary': isSelectedDate(n) || isRangeDate(n),
|
|
135
|
-
'radius-right-none':
|
|
136
|
-
|
|
137
|
-
'radius-
|
|
138
|
-
|
|
139
|
-
'radius-none':
|
|
140
|
-
isRangeDate(n) &&
|
|
141
|
-
!isRangeStartDate(n) &&
|
|
142
|
-
!isRangeEndDate(n),
|
|
143
|
-
'disabled radius-none': isDisabledDate(n),
|
|
128
|
+
'radius-right-none': isRangeStartDate(n) && !isRangeEndDate(n) && dateEnd,
|
|
129
|
+
'radius-left-none': !isRangeStartDate(n) && isRangeEndDate(n),
|
|
130
|
+
'radius-none': isRangeDate(n) && !isRangeStartDate(n) && !isRangeEndDate(n),
|
|
131
|
+
'disabled radius-none': isDisabledDate(n)
|
|
144
132
|
}"
|
|
145
|
-
@click="setDate(n)"
|
|
146
|
-
>
|
|
133
|
+
@click="setDate(n)">
|
|
147
134
|
<template v-if="isSelectedDate(n) || isRangeDate(n)">
|
|
148
135
|
<div>{{ n.getDate() }}</div>
|
|
149
136
|
</template>
|
|
@@ -160,6 +147,33 @@
|
|
|
160
147
|
</slot>
|
|
161
148
|
</div>
|
|
162
149
|
</div>
|
|
150
|
+
<!--
|
|
151
|
+
@slot Custom footer content
|
|
152
|
+
@binding {Function} prevYear select previous year
|
|
153
|
+
@binding {Function} prevMonth select previous month
|
|
154
|
+
@binding {Function} nextYear select next year
|
|
155
|
+
@binding {Function} nextMonth select next month
|
|
156
|
+
@binding {Function} setMonth set month by index (0 = january)
|
|
157
|
+
@binding {Function} setYear set year (4-digit)
|
|
158
|
+
@binding {Function} setToday set today's date
|
|
159
|
+
@binding {Number} month current month index (0 = january)
|
|
160
|
+
@binding {String} monthName current month name
|
|
161
|
+
@binding {Number} year current year (4-digit)
|
|
162
|
+
-->
|
|
163
|
+
<slot
|
|
164
|
+
name="footer"
|
|
165
|
+
v-bind="{
|
|
166
|
+
prevYear,
|
|
167
|
+
prevMonth,
|
|
168
|
+
nextYear,
|
|
169
|
+
nextMonth,
|
|
170
|
+
setMonth,
|
|
171
|
+
setYear,
|
|
172
|
+
setToday,
|
|
173
|
+
month,
|
|
174
|
+
monthName: monthNames[month],
|
|
175
|
+
year
|
|
176
|
+
}"></slot>
|
|
163
177
|
</div>
|
|
164
178
|
<div class="col col-auto" v-if="$scopedSlots.right">
|
|
165
179
|
<!--
|
|
@@ -234,39 +248,39 @@ export default {
|
|
|
234
248
|
default: null,
|
|
235
249
|
validation(val) {
|
|
236
250
|
if (Array.isArray(val)) {
|
|
237
|
-
return val.find(el => !this.isValid(el)) == null;
|
|
251
|
+
return val.find((el) => !this.isValid(el)) == null;
|
|
238
252
|
} else {
|
|
239
253
|
return this.isValid(val);
|
|
240
254
|
}
|
|
241
|
-
}
|
|
255
|
+
}
|
|
242
256
|
},
|
|
243
257
|
/**
|
|
244
258
|
* Min date (inclusive)
|
|
245
259
|
*/
|
|
246
260
|
min: {
|
|
247
261
|
type: Date,
|
|
248
|
-
default: null
|
|
262
|
+
default: null
|
|
249
263
|
},
|
|
250
264
|
/**
|
|
251
265
|
* Max date (inclusive)
|
|
252
266
|
*/
|
|
253
267
|
max: {
|
|
254
268
|
type: Date,
|
|
255
|
-
default: null
|
|
269
|
+
default: null
|
|
256
270
|
},
|
|
257
271
|
/**
|
|
258
272
|
* Allowed date filter function(date:Date):Boolean
|
|
259
273
|
*/
|
|
260
274
|
allowed: {
|
|
261
275
|
type: Function,
|
|
262
|
-
default: () => true
|
|
276
|
+
default: () => true
|
|
263
277
|
},
|
|
264
278
|
/**
|
|
265
279
|
* Range mode
|
|
266
280
|
*/
|
|
267
281
|
range: {
|
|
268
282
|
type: Boolean,
|
|
269
|
-
default: false
|
|
283
|
+
default: false
|
|
270
284
|
},
|
|
271
285
|
/**
|
|
272
286
|
* Day names starting from 'Sunday'
|
|
@@ -275,7 +289,7 @@ export default {
|
|
|
275
289
|
type: Array,
|
|
276
290
|
default() {
|
|
277
291
|
return ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
|
|
278
|
-
}
|
|
292
|
+
}
|
|
279
293
|
},
|
|
280
294
|
/**
|
|
281
295
|
* Weekend day indexes (0 = Sunday; 6 = Saturday)
|
|
@@ -284,7 +298,7 @@ export default {
|
|
|
284
298
|
type: Array,
|
|
285
299
|
default() {
|
|
286
300
|
return [0, 6];
|
|
287
|
-
}
|
|
301
|
+
}
|
|
288
302
|
},
|
|
289
303
|
/**
|
|
290
304
|
* Month names starting from 'January'
|
|
@@ -304,9 +318,9 @@ export default {
|
|
|
304
318
|
'Сентябрь',
|
|
305
319
|
'Октябрь',
|
|
306
320
|
'Ноябрь',
|
|
307
|
-
'Декабрь'
|
|
321
|
+
'Декабрь'
|
|
308
322
|
];
|
|
309
|
-
}
|
|
323
|
+
}
|
|
310
324
|
},
|
|
311
325
|
/**
|
|
312
326
|
* Which day is the first day of the week (0 = Sunday; 6 = Saturday)
|
|
@@ -316,8 +330,8 @@ export default {
|
|
|
316
330
|
default: 1,
|
|
317
331
|
validation(val) {
|
|
318
332
|
return val >= 0 && val < 7;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
321
335
|
},
|
|
322
336
|
data() {
|
|
323
337
|
return {
|
|
@@ -326,7 +340,7 @@ export default {
|
|
|
326
340
|
dateEnd: null,
|
|
327
341
|
month: null,
|
|
328
342
|
year: null,
|
|
329
|
-
syncMonthYear: true
|
|
343
|
+
syncMonthYear: true
|
|
330
344
|
};
|
|
331
345
|
},
|
|
332
346
|
computed: {
|
|
@@ -349,22 +363,18 @@ export default {
|
|
|
349
363
|
return new Date(this.year, this.month + 1, 0).getDate();
|
|
350
364
|
},
|
|
351
365
|
currentMonthDates() {
|
|
352
|
-
let dates = [...new Array(this.daysInMonth)].map(
|
|
353
|
-
(v, i) => new Date(this.year, this.month, i + 1)
|
|
354
|
-
);
|
|
366
|
+
let dates = [...new Array(this.daysInMonth)].map((v, i) => new Date(this.year, this.month, i + 1));
|
|
355
367
|
return [...this.prevMonthDates, ...dates, ...this.nextMonthDates];
|
|
356
368
|
},
|
|
357
369
|
prevMonthDates() {
|
|
358
370
|
let n = this.firstDayOfMonth;
|
|
359
371
|
let pmd = new Date(this.year, this.month, 0).getDate();
|
|
360
|
-
return [...new Array(n)]
|
|
361
|
-
.map((v, i) => new Date(this.year, this.month - 1, pmd - i))
|
|
362
|
-
.reverse();
|
|
372
|
+
return [...new Array(n)].map((v, i) => new Date(this.year, this.month - 1, pmd - i)).reverse();
|
|
363
373
|
},
|
|
364
374
|
nextMonthDates() {
|
|
365
375
|
let n = 6 - this.lastDayOfMonth;
|
|
366
376
|
return [...new Array(n)].map((v, i) => new Date(this.year, this.month + 1, i + 1));
|
|
367
|
-
}
|
|
377
|
+
}
|
|
368
378
|
},
|
|
369
379
|
watch: {
|
|
370
380
|
value: {
|
|
@@ -385,14 +395,14 @@ export default {
|
|
|
385
395
|
}
|
|
386
396
|
this.syncMonthYear = true;
|
|
387
397
|
},
|
|
388
|
-
immediate: true
|
|
398
|
+
immediate: true
|
|
389
399
|
},
|
|
390
400
|
range() {
|
|
391
401
|
this.date = null;
|
|
392
402
|
this.dateStart = null;
|
|
393
403
|
this.dateEnd = null;
|
|
394
404
|
this._triggerChange();
|
|
395
|
-
}
|
|
405
|
+
}
|
|
396
406
|
},
|
|
397
407
|
methods: {
|
|
398
408
|
isValid(date) {
|
|
@@ -521,7 +531,7 @@ export default {
|
|
|
521
531
|
* @property {Date} date
|
|
522
532
|
*/
|
|
523
533
|
this.$emit('change', val);
|
|
524
|
-
}
|
|
525
|
-
}
|
|
534
|
+
}
|
|
535
|
+
}
|
|
526
536
|
};
|
|
527
537
|
</script>
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
:class="cssClass"
|
|
5
5
|
@focus="onRootFocus"
|
|
6
6
|
tabindex="0"
|
|
7
|
-
:data-popover="popoverTargetId"
|
|
8
|
-
>
|
|
7
|
+
:data-popover="popoverTargetId">
|
|
9
8
|
<div class="ui-input-date-picker-wrapper d-flex flex-v-center w-100">
|
|
10
9
|
<div style="flex: 1 0 0">
|
|
11
10
|
<!--
|
|
@@ -16,18 +15,14 @@
|
|
|
16
15
|
@binding {Object} inputBinds input props (use v-bind)
|
|
17
16
|
@binding {Object} inputEvents input events (use v-on)
|
|
18
17
|
-->
|
|
19
|
-
<slot
|
|
20
|
-
name="input"
|
|
21
|
-
v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
|
|
22
|
-
>
|
|
18
|
+
<slot name="input" v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }">
|
|
23
19
|
<input
|
|
24
20
|
:id="inputId"
|
|
25
21
|
class="ui-input-date-picker-input w-100"
|
|
26
22
|
type="text"
|
|
27
23
|
:value="valueLabel"
|
|
28
24
|
v-bind="inputBinds"
|
|
29
|
-
v-on="inputEvents"
|
|
30
|
-
/>
|
|
25
|
+
v-on="inputEvents" />
|
|
31
26
|
</slot>
|
|
32
27
|
</div>
|
|
33
28
|
<!--
|
|
@@ -54,8 +49,7 @@
|
|
|
54
49
|
class="ui-input-date-picker-dp pull-left"
|
|
55
50
|
@change="onDpChange"
|
|
56
51
|
@set-date="onDpSetDate"
|
|
57
|
-
v-bind="{ value: date, ...datepicker }"
|
|
58
|
-
>
|
|
52
|
+
v-bind="{ value: date, ...datepicker }">
|
|
59
53
|
<template #header="scope">
|
|
60
54
|
<!--
|
|
61
55
|
@slot @see [DatePicker.slots.header](#datepicker)
|
|
@@ -86,6 +80,12 @@
|
|
|
86
80
|
-->
|
|
87
81
|
<slot name="dp-right"></slot>
|
|
88
82
|
</template>
|
|
83
|
+
<template #footer="scope">
|
|
84
|
+
<!--
|
|
85
|
+
@slot @see [DatePicker.slots.footer](#datepicker)
|
|
86
|
+
-->
|
|
87
|
+
<slot name="dp-footer" v-bind="scope"></slot>
|
|
88
|
+
</template>
|
|
89
89
|
</date-picker>
|
|
90
90
|
</ui-popover>
|
|
91
91
|
</div>
|
|
@@ -111,7 +111,7 @@ import FormComponent from './utils/FormComponent';
|
|
|
111
111
|
import WithPopover from './utils/WithPopover';
|
|
112
112
|
import { isDateValid } from './utils/Helpers';
|
|
113
113
|
|
|
114
|
-
let lz = n => (n < 10 ? `0${n}` : `${n}`);
|
|
114
|
+
let lz = (n) => (n < 10 ? `0${n}` : `${n}`);
|
|
115
115
|
export default {
|
|
116
116
|
mixins: [FormComponent, WithPopover],
|
|
117
117
|
components: { DatePicker, UiPopover },
|
|
@@ -121,21 +121,21 @@ export default {
|
|
|
121
121
|
*/
|
|
122
122
|
value: {
|
|
123
123
|
type: [String, Array],
|
|
124
|
-
default: ''
|
|
124
|
+
default: ''
|
|
125
125
|
},
|
|
126
126
|
/**
|
|
127
127
|
* Whether the input is editable
|
|
128
128
|
*/
|
|
129
129
|
editable: {
|
|
130
130
|
type: Boolean,
|
|
131
|
-
default: true
|
|
131
|
+
default: true
|
|
132
132
|
},
|
|
133
133
|
/**
|
|
134
134
|
* Allow clearing the date
|
|
135
135
|
*/
|
|
136
136
|
allowClear: {
|
|
137
137
|
type: Boolean,
|
|
138
|
-
default: true
|
|
138
|
+
default: true
|
|
139
139
|
},
|
|
140
140
|
/**
|
|
141
141
|
* Datepicker options
|
|
@@ -145,14 +145,14 @@ export default {
|
|
|
145
145
|
type: Object,
|
|
146
146
|
default() {
|
|
147
147
|
return {};
|
|
148
|
-
}
|
|
148
|
+
}
|
|
149
149
|
},
|
|
150
150
|
/**
|
|
151
151
|
* Date range delimiter (only if datepicker.range = true)
|
|
152
152
|
*/
|
|
153
153
|
delimiter: {
|
|
154
154
|
type: String,
|
|
155
|
-
default: ' – '
|
|
155
|
+
default: ' – '
|
|
156
156
|
},
|
|
157
157
|
/**
|
|
158
158
|
* Function which parses date String -> Date
|
|
@@ -167,13 +167,13 @@ export default {
|
|
|
167
167
|
let mt = str.match(/^(\d{1,}).(\d{1,}).(\d{1,})$/);
|
|
168
168
|
if (mt) {
|
|
169
169
|
mt.shift();
|
|
170
|
-
let [d, m, y] = mt.map(v => parseInt(v));
|
|
170
|
+
let [d, m, y] = mt.map((v) => parseInt(v));
|
|
171
171
|
if (d > 0 && m > 0 && y >= 0) {
|
|
172
172
|
return new Date(y, m - 1, d);
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
return null;
|
|
176
|
-
}
|
|
176
|
+
}
|
|
177
177
|
},
|
|
178
178
|
/**
|
|
179
179
|
* Function which formats date Date -> String
|
|
@@ -186,8 +186,8 @@ export default {
|
|
|
186
186
|
return '';
|
|
187
187
|
}
|
|
188
188
|
return `${lz(date.getDate())}.${lz(date.getMonth() + 1)}.${lz(date.getFullYear())}`;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
191
|
},
|
|
192
192
|
data() {
|
|
193
193
|
return {
|
|
@@ -196,10 +196,10 @@ export default {
|
|
|
196
196
|
input: this.onInputInput,
|
|
197
197
|
change: this.onInputChange,
|
|
198
198
|
focus: this.onInputFocus,
|
|
199
|
-
blur: this.onInputBlur
|
|
199
|
+
blur: this.onInputBlur
|
|
200
200
|
},
|
|
201
201
|
inputValue: '',
|
|
202
|
-
inputValueRaw: ''
|
|
202
|
+
inputValueRaw: ''
|
|
203
203
|
};
|
|
204
204
|
},
|
|
205
205
|
computed: {
|
|
@@ -214,7 +214,7 @@ export default {
|
|
|
214
214
|
return {
|
|
215
215
|
placeholder,
|
|
216
216
|
readonly: readonly || !editable
|
|
217
|
-
}
|
|
217
|
+
};
|
|
218
218
|
}
|
|
219
219
|
},
|
|
220
220
|
watch: {
|
|
@@ -235,7 +235,7 @@ export default {
|
|
|
235
235
|
this.date = isDateValid(d) ? d : null;
|
|
236
236
|
}
|
|
237
237
|
},
|
|
238
|
-
immediate: true
|
|
238
|
+
immediate: true
|
|
239
239
|
},
|
|
240
240
|
isRange(val) {
|
|
241
241
|
/**
|
|
@@ -320,7 +320,7 @@ export default {
|
|
|
320
320
|
* @property {String|Array} value
|
|
321
321
|
*/
|
|
322
322
|
this.$emit('change', model);
|
|
323
|
-
}
|
|
324
|
-
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
325
|
};
|
|
326
326
|
</script>
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
class="w-100 pull-left"
|
|
101
101
|
@click.native.stop
|
|
102
102
|
@select-option="onDatalistSelectOption"
|
|
103
|
-
v-bind="{ size, options, class: datalistCssClass }"
|
|
103
|
+
v-bind="{ size, options, class: datalistCssClass, maxHeight, maxItems, itemHeight }"
|
|
104
104
|
:cursorIndex.sync="dataListCursorIndex"
|
|
105
105
|
ref="datalist">
|
|
106
106
|
<template #header>
|
|
@@ -307,13 +307,6 @@ export default {
|
|
|
307
307
|
return [];
|
|
308
308
|
}
|
|
309
309
|
},
|
|
310
|
-
/**
|
|
311
|
-
* Datalist css classes (optional)
|
|
312
|
-
*/
|
|
313
|
-
datalistCssClass: {
|
|
314
|
-
type: [String, Array],
|
|
315
|
-
default: ''
|
|
316
|
-
},
|
|
317
310
|
/**
|
|
318
311
|
* Allow multiple selection
|
|
319
312
|
*/
|
|
@@ -353,7 +346,36 @@ export default {
|
|
|
353
346
|
valueOfOptionChecker: {
|
|
354
347
|
type: Function,
|
|
355
348
|
default: null
|
|
356
|
-
}
|
|
349
|
+
},
|
|
350
|
+
// DATALIST OPTIONS
|
|
351
|
+
/**
|
|
352
|
+
* Datalist css classes (optional)
|
|
353
|
+
*/
|
|
354
|
+
datalistCssClass: {
|
|
355
|
+
type: [String, Array],
|
|
356
|
+
default: ''
|
|
357
|
+
},
|
|
358
|
+
/**
|
|
359
|
+
* Defines the max-height of the dropdown list (value may be any css unit/expression)
|
|
360
|
+
*/
|
|
361
|
+
maxHeight: {
|
|
362
|
+
type: String,
|
|
363
|
+
default: null
|
|
364
|
+
},
|
|
365
|
+
/**
|
|
366
|
+
* Max visible items count
|
|
367
|
+
*/
|
|
368
|
+
maxItems: {
|
|
369
|
+
type: Number,
|
|
370
|
+
default: 4
|
|
371
|
+
},
|
|
372
|
+
/**
|
|
373
|
+
* Item height count
|
|
374
|
+
*/
|
|
375
|
+
itemHeight: {
|
|
376
|
+
type: String,
|
|
377
|
+
default: null
|
|
378
|
+
},
|
|
357
379
|
},
|
|
358
380
|
data() {
|
|
359
381
|
return {
|