goodteditor-ui 1.0.94 → 1.0.96
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
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
}">
|
|
28
28
|
<ui-badge
|
|
29
29
|
class="mar-none mar-right-2"
|
|
30
|
-
theme="
|
|
30
|
+
:theme="selectedBadgeTheme"
|
|
31
31
|
size="small"
|
|
32
32
|
:key="index"
|
|
33
|
-
removable
|
|
33
|
+
:removable="isSelectedRemovable"
|
|
34
34
|
@click.native.stop
|
|
35
35
|
@remove="deselectOption(option)">
|
|
36
36
|
<span>{{ getOptionLabel(option) }}</span>
|
|
@@ -79,20 +79,23 @@
|
|
|
79
79
|
@slot Open state icon slot
|
|
80
80
|
-->
|
|
81
81
|
<slot name="icon-open" v-if="popoverShow">
|
|
82
|
-
<i
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
<i
|
|
83
|
+
class="icon mdi mdi-chevron-up"
|
|
84
|
+
:class="{
|
|
85
|
+
'mdi-18px': size === '',
|
|
86
|
+
'h-auto w-auto': size === 'small'
|
|
87
|
+
}"></i>
|
|
87
88
|
</slot>
|
|
88
89
|
<!--
|
|
89
90
|
@slot Close state icon slot
|
|
90
91
|
-->
|
|
91
92
|
<slot name="icon-close" v-else>
|
|
92
|
-
<i
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
<i
|
|
94
|
+
class="icon mdi mdi-chevron-down"
|
|
95
|
+
:class="{
|
|
96
|
+
'mdi-18px': size === '',
|
|
97
|
+
'h-auto w-auto': size === 'small'
|
|
98
|
+
}"></i>
|
|
96
99
|
</slot>
|
|
97
100
|
|
|
98
101
|
<ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
|
|
@@ -117,6 +120,7 @@
|
|
|
117
120
|
@binding {String} label option's label
|
|
118
121
|
@binding {Number} index option's index
|
|
119
122
|
@binding {Boolean} isSelected option selection status
|
|
123
|
+
@binding {Boolean} isDisabled option availability status
|
|
120
124
|
@binding {Number} cursorIndex current cursor index
|
|
121
125
|
@binding {Function} selectOption function that selects option
|
|
122
126
|
@binding {Function} deselectOption function that deselects option
|
|
@@ -131,6 +135,7 @@
|
|
|
131
135
|
index,
|
|
132
136
|
cursorIndex,
|
|
133
137
|
isSelected: isOptionSelected(option),
|
|
138
|
+
isDisabled: isOptionDisabled(option),
|
|
134
139
|
selectOption,
|
|
135
140
|
deselectOption,
|
|
136
141
|
toggleOption
|
|
@@ -142,6 +147,7 @@
|
|
|
142
147
|
@binding {String} label option's label
|
|
143
148
|
@binding {Number} index option's index
|
|
144
149
|
@binding {Boolean} isSelected option selection status
|
|
150
|
+
@binding {Boolean} isDisabled option availability status
|
|
145
151
|
@binding {Number} cursorIndex current cursor index
|
|
146
152
|
@binding {Function} selectOption function that selects option
|
|
147
153
|
@binding {Function} deselectOption function that deselects option
|
|
@@ -157,6 +163,7 @@
|
|
|
157
163
|
label: getOptionLabel(option),
|
|
158
164
|
index,
|
|
159
165
|
isSelected: isOptionSelected(option),
|
|
166
|
+
isDisabled: isOptionDisabled(option),
|
|
160
167
|
cursorIndex,
|
|
161
168
|
selectOption,
|
|
162
169
|
deselectOption,
|
|
@@ -168,7 +175,8 @@
|
|
|
168
175
|
<li
|
|
169
176
|
:class="{
|
|
170
177
|
active: isOptionSelected(option),
|
|
171
|
-
'bg-grey-lighter': index == cursorIndex
|
|
178
|
+
'bg-grey-lighter': index == cursorIndex,
|
|
179
|
+
'events-none': isOptionDisabled(option)
|
|
172
180
|
}"
|
|
173
181
|
:key="index"
|
|
174
182
|
:title="getOptionLabel(option)"
|
|
@@ -184,6 +192,7 @@
|
|
|
184
192
|
label: getOptionLabel(option),
|
|
185
193
|
index,
|
|
186
194
|
isSelected: isOptionSelected(option),
|
|
195
|
+
isDisabled: isOptionDisabled(option),
|
|
187
196
|
cursorIndex
|
|
188
197
|
}">
|
|
189
198
|
{{ getOptionLabel(option) }}
|
|
@@ -220,6 +229,7 @@
|
|
|
220
229
|
@binding {String} label option's label
|
|
221
230
|
@binding {Number} index option's index
|
|
222
231
|
@binding {Boolean} isSelected option selection status
|
|
232
|
+
@binding {Boolean} isDisabled option availability status
|
|
223
233
|
@binding {Number} cursorIndex current cursor index
|
|
224
234
|
@binding {Function} selectOption function that selects option
|
|
225
235
|
@binding {Function} deselectOption function that deselects option
|
|
@@ -233,6 +243,7 @@
|
|
|
233
243
|
label: getOptionLabel(option),
|
|
234
244
|
index,
|
|
235
245
|
isSelected: isOptionSelected(option),
|
|
246
|
+
isDisabled: isOptionDisabled(option),
|
|
236
247
|
cursorIndex,
|
|
237
248
|
selectOption,
|
|
238
249
|
deselectOption,
|
|
@@ -336,6 +347,13 @@ export default {
|
|
|
336
347
|
type: [String, Symbol],
|
|
337
348
|
default: 'label'
|
|
338
349
|
},
|
|
350
|
+
/**
|
|
351
|
+
* Defines the 'disabled' field of the option Object
|
|
352
|
+
*/
|
|
353
|
+
disabledField: {
|
|
354
|
+
type: [String, Symbol],
|
|
355
|
+
default: 'disabled'
|
|
356
|
+
},
|
|
339
357
|
autoWidth: {
|
|
340
358
|
default: true
|
|
341
359
|
},
|
|
@@ -375,7 +393,7 @@ export default {
|
|
|
375
393
|
itemHeight: {
|
|
376
394
|
type: String,
|
|
377
395
|
default: null
|
|
378
|
-
}
|
|
396
|
+
}
|
|
379
397
|
},
|
|
380
398
|
data() {
|
|
381
399
|
return {
|
|
@@ -388,8 +406,17 @@ export default {
|
|
|
388
406
|
* @return {object}
|
|
389
407
|
*/
|
|
390
408
|
cssClassExt() {
|
|
391
|
-
|
|
392
|
-
|
|
409
|
+
if (this.readonly) {
|
|
410
|
+
const { ['events-none']: eventsNone, ...cssClass } = this.cssClass;
|
|
411
|
+
return cssClass;
|
|
412
|
+
}
|
|
413
|
+
return this.cssClass;
|
|
414
|
+
},
|
|
415
|
+
selectedBadgeTheme() {
|
|
416
|
+
return this.disabled ? '' : 'primary';
|
|
417
|
+
},
|
|
418
|
+
isSelectedRemovable() {
|
|
419
|
+
return this.readonly === false && this.disabled === false;
|
|
393
420
|
}
|
|
394
421
|
},
|
|
395
422
|
watch: {
|
|
@@ -478,6 +505,10 @@ export default {
|
|
|
478
505
|
isOptionSelected(option) {
|
|
479
506
|
return this.optionsSelected.includes(option);
|
|
480
507
|
},
|
|
508
|
+
isOptionDisabled(option) {
|
|
509
|
+
let disabled = option ? option[this.disabledField] : null;
|
|
510
|
+
return Boolean(disabled);
|
|
511
|
+
},
|
|
481
512
|
createOptionRollback() {
|
|
482
513
|
const optionsSelected = [...this.optionsSelected];
|
|
483
514
|
return () => {
|
|
@@ -487,6 +518,9 @@ export default {
|
|
|
487
518
|
};
|
|
488
519
|
},
|
|
489
520
|
selectOption(option) {
|
|
521
|
+
if (this.readonly) {
|
|
522
|
+
return;
|
|
523
|
+
}
|
|
490
524
|
if (this.isOptionSelected(option)) {
|
|
491
525
|
return;
|
|
492
526
|
}
|
|
@@ -502,6 +536,9 @@ export default {
|
|
|
502
536
|
this.triggerModelChange(rollback);
|
|
503
537
|
},
|
|
504
538
|
deselectOption(option) {
|
|
539
|
+
if (this.readonly) {
|
|
540
|
+
return;
|
|
541
|
+
}
|
|
505
542
|
if (!this.multiple) {
|
|
506
543
|
this.popoverShow = false;
|
|
507
544
|
return;
|