goodteditor-ui 1.0.81 → 1.0.83
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,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="ui-datalist dropdown" :class="cssClass">
|
|
3
|
-
<!--
|
|
2
|
+
<div class="ui-datalist dropdown" :class="cssClass" :style="cssStyle">
|
|
3
|
+
<!--
|
|
4
4
|
@slot Dropdown header slot
|
|
5
5
|
-->
|
|
6
6
|
<slot name="header"></slot>
|
|
7
|
-
<ul ref="ul"
|
|
8
|
-
<!--
|
|
7
|
+
<ul ref="ul">
|
|
8
|
+
<!--
|
|
9
9
|
@slot Label slot for single mode
|
|
10
10
|
@binding {Object} option option
|
|
11
11
|
@binding {Number} index option's index
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
option,
|
|
20
20
|
index,
|
|
21
21
|
cursorIndex,
|
|
22
|
-
setCursorIndex
|
|
22
|
+
setCursorIndex,
|
|
23
|
+
select: () => onOptionClick(option, index)
|
|
23
24
|
}">
|
|
24
25
|
<li :class="{ active: index == cursorIndex }" :key="index" @click="onOptionClick(option, index)">
|
|
25
26
|
<div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
|
|
@@ -37,18 +38,21 @@
|
|
|
37
38
|
</li>
|
|
38
39
|
</slot>
|
|
39
40
|
</ul>
|
|
40
|
-
<!--
|
|
41
|
+
<!--
|
|
41
42
|
@slot Dropdown footer slot
|
|
42
43
|
-->
|
|
43
44
|
<slot name="footer"></slot>
|
|
44
45
|
</div>
|
|
45
46
|
</template>
|
|
46
|
-
<style lang="
|
|
47
|
+
<style lang="pcss" scoped>
|
|
47
48
|
.dropdown {
|
|
49
|
+
--item-height: var(--datalist-item-height, calc(var(--spacer3) * 2 + var(--line-height) * 1rem));
|
|
50
|
+
max-height: calc(var(--item-height) * var(--item-count));
|
|
48
51
|
outline: none;
|
|
49
52
|
|
|
50
53
|
ul {
|
|
51
54
|
scroll-behavior: smooth;
|
|
55
|
+
max-height: inherit;
|
|
52
56
|
}
|
|
53
57
|
|
|
54
58
|
&.no-scroll-animation {
|
|
@@ -90,6 +94,13 @@ export default {
|
|
|
90
94
|
type: String,
|
|
91
95
|
default: ''
|
|
92
96
|
},
|
|
97
|
+
/**
|
|
98
|
+
* Max visible items count
|
|
99
|
+
*/
|
|
100
|
+
maxItems: {
|
|
101
|
+
type: Number,
|
|
102
|
+
default: 4
|
|
103
|
+
},
|
|
93
104
|
/**
|
|
94
105
|
* The current cursor index position (.sync)
|
|
95
106
|
*/
|
|
@@ -108,6 +119,15 @@ export default {
|
|
|
108
119
|
size && o.push(`dropdown-${this.size}`);
|
|
109
120
|
!useScrollAnimation && o.push('no-scroll-animation');
|
|
110
121
|
return o;
|
|
122
|
+
},
|
|
123
|
+
cssStyle() {
|
|
124
|
+
const { maxHeight, maxItems } = this;
|
|
125
|
+
return {
|
|
126
|
+
...(maxHeight && {
|
|
127
|
+
maxHeight
|
|
128
|
+
}),
|
|
129
|
+
'--item-count': maxItems
|
|
130
|
+
};
|
|
111
131
|
}
|
|
112
132
|
},
|
|
113
133
|
watch: {
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
@slot Placeholder slot
|
|
43
43
|
-->
|
|
44
44
|
<slot name="placeholder">
|
|
45
|
-
<input class="w-100" :placeholder="placeholder" />
|
|
45
|
+
<input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
|
|
46
46
|
</slot>
|
|
47
47
|
</div>
|
|
48
48
|
</template>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
@slot Placeholder slot
|
|
71
71
|
-->
|
|
72
72
|
<slot name="placeholder">
|
|
73
|
-
<input class="w-100" :placeholder="placeholder" />
|
|
73
|
+
<input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
|
|
74
74
|
</slot>
|
|
75
75
|
</div>
|
|
76
76
|
</template>
|
|
@@ -79,17 +79,20 @@
|
|
|
79
79
|
@slot Open state icon slot
|
|
80
80
|
-->
|
|
81
81
|
<slot name="icon-open" v-if="popoverShow">
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
<i class="icon mdi mdi-chevron-up" :class="{
|
|
83
|
+
'mdi-18px': size === '',
|
|
84
|
+
'h-auto w-auto': size === 'small'
|
|
85
|
+
}">
|
|
86
|
+
</i>
|
|
85
87
|
</slot>
|
|
86
88
|
<!--
|
|
87
89
|
@slot Close state icon slot
|
|
88
90
|
-->
|
|
89
91
|
<slot name="icon-close" v-else>
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
92
|
+
<i class="icon mdi mdi-chevron-down" :class="{
|
|
93
|
+
'mdi-18px': size === '',
|
|
94
|
+
'h-auto w-auto': size === 'small'
|
|
95
|
+
}"></i>
|
|
93
96
|
</slot>
|
|
94
97
|
|
|
95
98
|
<ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
|
|
@@ -259,12 +262,14 @@
|
|
|
259
262
|
}
|
|
260
263
|
|
|
261
264
|
&-placeholder {
|
|
262
|
-
input {
|
|
265
|
+
&-input {
|
|
266
|
+
font-size: inherit;
|
|
267
|
+
min-height: initial;
|
|
263
268
|
border: none;
|
|
264
|
-
margin: 0;
|
|
265
269
|
padding: 0;
|
|
266
|
-
color: inherit;
|
|
267
270
|
background: transparent;
|
|
271
|
+
outline: none;
|
|
272
|
+
color: inherit;
|
|
268
273
|
}
|
|
269
274
|
}
|
|
270
275
|
}
|
|
@@ -374,6 +379,9 @@ export default {
|
|
|
374
379
|
},
|
|
375
380
|
options() {
|
|
376
381
|
this.importModel(this.value);
|
|
382
|
+
},
|
|
383
|
+
popoverShow(isPopoverShown) {
|
|
384
|
+
this.$emit('options-toggle', isPopoverShown);
|
|
377
385
|
}
|
|
378
386
|
},
|
|
379
387
|
methods: {
|