centaline-data-driven 1.4.52 → 1.4.54

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.
@@ -1,223 +0,0 @@
1
- <template>
2
- <div class="ct-so" :class="[(focus || showDrop)?'isfocus':'',model.attrs.size?'ct-so-'+model.attrs.size:''
3
- ]" @mouseover="mouseOverHandle" @mouseout="mouseOutHandle">
4
- <div :class="[model.showLabel?'el-input-group el-input-group--prepend':'',!valid?'inputError':'']">
5
- <div v-if="model.showLabel && model.label" class="el-input-group__prepend">
6
- {{model.label}}
7
- </div>
8
- <el-popover ref="pop" placement="bottom-start" v-model="showDrop" :class="[model.showLabel?'showLabel':'']">
9
- <div>
10
- <div>
11
- <el-input ref="searchInput" :size="model.attrs.size" suffix-icon="el-icon-search" v-model="searchText" @input="searchInputHandle"></el-input>
12
- </div>
13
- <ct-select-option :model="model" :optionRowCount="optionRowCount" @click="selectOption($event)"></ct-select-option>
14
- </div>
15
- <input slot="reference" v-bind="model.attrs" readonly="readonly" v-model="model.text" :placeholder="soPlaceholder"
16
- ref="ct-input" class="ct-input_inner" :style="{height:inputHeight + 'px','line-height':inputLineHeight + 'px'}"
17
- @focus="focusHandle" @blur="blurHandle" @click="clickHandle" @input="inputHandler($event)" @change="changeHandler($event)" />
18
- </el-popover>
19
- <span class="el-input__suffix" @click="clickHandle" :class="[model.attrs.size?'el-input--'+model.attrs.size:'']">
20
- <span v-if="showClear === false" class="el-input__suffix-inner">
21
- <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':showDrop}"></i>
22
- </span>
23
- <span v-if="showClear === true" class="el-input__suffix-inner ct-close">
24
- <i class="el-select__caret el-input__icon el-icon-circle-close is-show-close" @click="clearClickHandle($event)"></i>
25
- </span>
26
- </span>
27
- </div>
28
- <transition name="el-fade-in">
29
- <span v-show="!valid" class="errorMessage">
30
- {{validMessage}}
31
- </span>
32
- </transition>
33
- </div>
34
- </template>
35
-
36
- <script>
37
- import dynamicElement from '../../mixins/dynamicElement'
38
- import selectOption from '../../selectOption/src/selectOption'
39
- export default {
40
- name: 'ct-sos',
41
- mixins: [dynamicElement],
42
- components: {
43
- 'ctSelectOption': selectOption
44
- },
45
- props: {
46
- api: String,
47
- vmodel: Object,
48
- popShow: {
49
- type: Boolean,
50
- default: true
51
- }
52
- },
53
- data() {
54
- return {
55
- focus: false,
56
- showDrop: false,
57
- inputHeight: 26,
58
- showClear: false,
59
- searchText: ""
60
- }
61
- },
62
- created() {
63
- if (typeof this.vmodel === 'undefined') {
64
- this.model = this.loaderObj.Sos(this.source);
65
- }
66
- else {
67
- this.model = this.vmodel;
68
- }
69
- this.$watch('model.value', (n, o) => {
70
- if (typeof this.model.child !== 'undefined') {
71
- this.model.child.value = this.model.child.defaultValue || '';
72
- this.model.child.text = this.model.child.defaultText || '';
73
- }
74
- });
75
- this.inputHeight = this.inputLineHeight;
76
- },
77
- computed: {
78
- soPlaceholder: {
79
- get: function () {
80
- if (this.model.value !== '') {
81
- return '';
82
- }
83
- else {
84
- return this.model.label;
85
- }
86
- },
87
- set: function (v) {
88
-
89
- }
90
- },
91
- inputLineHeight: {
92
- get: function () {
93
- switch (this.model.attrs.size) {
94
- case 'mini':
95
- return 26;
96
- case 'small':
97
- return 32;
98
- case 'medium':
99
- return 36;
100
- default:
101
- return 40;
102
- }
103
- }
104
- },
105
- optionColSpan: function () {
106
- return parseInt(24 / this.model.optionColCount);
107
- },
108
- optionRowCount: function () {
109
- return parseInt(this.model.options.length % this.model.optionColCount > 0 ? (this.model.options.length / this.model.optionColCount) + 1 : this.model.options.length / this.model.optionColCount);
110
- }
111
- },
112
- mounted() {
113
- var self = this;
114
- this.$nextTick(function () {
115
- var dropdown = self.$refs["pop"];
116
- self.$watch('model.options', function (newVal, oldVal) {
117
- self.$nextTick(() => {
118
- if (typeof dropdown.popperJS !== 'undefined' && dropdown.popperJS) {
119
- dropdown.popperJS.destroy();
120
- dropdown.popperJS = null;
121
- dropdown.updatePopper();
122
- }
123
- self.$refs["searchInput"].$el.querySelector("input").focus();
124
- });
125
- }, { deep: true, immediate: true });
126
- });
127
- },
128
- methods: {
129
- getOptions: function () {
130
- var self = this;
131
- this.model.getOptions(this.api, self.searchText);
132
- },
133
- soChange: function () {
134
- var self = this;
135
- if (typeof this.model.child !== 'undefined') {
136
- this.model.child.value = this.model.child.defaultValue || '';
137
- this.model.child.text = this.model.child.defaultText || '';
138
- }
139
- var currentOption = this.model.options.find((value) => {
140
- return self.model.value === value[self.model.optionAttrs.value];
141
- });
142
- if (currentOption) {
143
- this.model.text = currentOption[self.model.optionAttrs.label];
144
- }
145
- else {
146
- this.model.text = '';
147
- }
148
- this.$emit('change', this.model.value);
149
- this.inputHandler(self.model.value);
150
- this.changeHandler(self.model.value);
151
- },
152
- focusHandle: function () {
153
- this.$set(this, 'focus', true);
154
- },
155
- blurHandle: function () {
156
- this.$set(this, 'focus', false);
157
- },
158
- clickHandle: function () {
159
- this.$set(this, 'showDrop', !this.showDrop);
160
- if (this.showDrop) {
161
- this.getOptions();
162
- }
163
- this.focusHandle();
164
- },
165
- getOptionText: function (value) {
166
- var self = this;
167
- var option = this.model.options.find((v) => { return v[self.model.optionAttrs.value] === value });
168
- if (option) {
169
- return option[self.model.optionAttrs.label];
170
- } else {
171
- return value;
172
- }
173
- },
174
- getOptionSelect(value) {
175
- if (this.model.value === value) {
176
- return "danger";
177
- }
178
- else {
179
- return "success";
180
- }
181
- },
182
- selectOption(value) {
183
- if (this.model.value === value) {
184
- this.model.value = '';
185
- }
186
- else {
187
- this.model.value = value;
188
- }
189
- this.soChange();
190
- this.$emit('input', this.model.value);
191
- this.$set(this, 'showDrop', false);
192
- },
193
- mouseOverHandle: function () {
194
- if (this.model.value !== '' && this.model.clearable) {
195
- this.$set(this, 'showClear', true);
196
- }
197
- },
198
- mouseOutHandle: function () {
199
- this.$set(this, 'showClear', false);
200
- },
201
- clearClickHandle: function (event) {
202
- this.model.value = '';
203
- this.soChange();
204
- this.$emit('input', this.model.value);
205
- event.stopPropagation();
206
- },
207
- searchInputHandle: function () {
208
- var currentSeatch = this.searchText;
209
- this.searchTickControl(currentSeatch);
210
- },
211
- searchTickControl: function (search) {
212
- var self = this;
213
- setTimeout(function () {
214
- if (search === self.searchText) {
215
- self.getOptions(self.searchText);
216
- }
217
- }, self.model.searchTick);
218
- }
219
- }
220
- }
221
- </script>
222
- <style>
223
- </style>
@@ -1,391 +0,0 @@
1
- <template>
2
- <div class="ct-tags" :class="[(focus || showDrop)?'isfocus':'',model.attrs.size?'ct-tags-'+model.attrs.size:''
3
- ]" @mouseover="mouseOverHandle" @mouseout="mouseOutHandle">
4
- <div :class="[model.showLabel?'el-input-group el-input-group--prepend':'',!valid?'inputError':'']">
5
- <div v-if="model.showLabel && model.label" class="el-input-group__prepend">
6
- {{model.label}}
7
- </div>
8
- <div>
9
- <div ref="cttags" class="el-select__tags" :style="{'max-width':tagsWidth + 'px'}" @click="clickHandle">
10
- <span>
11
- <span class="el-tag el-tag--info" :class="[model.attrs.size?'el-tag--'+model.attrs.size:'']" v-for="item in model.value">
12
- <span class="el-select__tags-text">{{getOptionText(item)}}</span>
13
- <i class="el-tag__close el-icon-close" @click="deleteOption(item,$event)"></i>
14
- </span>
15
- </span>
16
- </div>
17
- <el-popover ref="pop" placement="bottom-start" v-model="showDrop" :class="[model.showLabel?'showLabel':'']">
18
- <div>
19
- <div>
20
- <el-input ref="searchInput" :size="model.attrs.size" suffix-icon="el-icon-search" v-model="searchText" @input="searchInputHandle"></el-input>
21
- </div>
22
- <ct-select-option :model="model" :optionRowCount="optionRowCount" @click="selectOption($event)"></ct-select-option>
23
- </div>
24
- <input slot="reference" v-bind="model.attrs" :placeholder="tagsPlaceholder"
25
- ref="ct-input" class="ct-input_inner" :style="{height:inputHeight + 'px','line-height':inputLineHeight + 'px'}"
26
- @focus="focusHandle" @blur="blurHandle" @click="clickHandle" />
27
- </el-popover>
28
- <span class="el-input__suffix" @click="clickHandle" :class="[model.attrs.size?'el-input--'+model.attrs.size:'']">
29
- <span v-if="showClear === false" class="el-input__suffix-inner">
30
- <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':showDrop}"></i>
31
- </span>
32
- <span v-if="showClear === true" class="el-input__suffix-inner ct-close">
33
- <i class="el-select__caret el-input__icon el-icon-circle-close is-show-close" @click="clearClickHandle($event)"></i>
34
- </span>
35
- </span>
36
- </div>
37
- </div>
38
- <transition name="el-fade-in">
39
- <span v-show="!valid" class="errorMessage">
40
- {{validMessage}}
41
- </span>
42
- </transition>
43
- </div>
44
- </template>
45
-
46
- <script>
47
- import dynamicElement from '../../mixins/dynamicElement'
48
- import selectOption from '../../selectOption/src/selectOption'
49
- export default {
50
- name: 'ct-tags',
51
- mixins: [dynamicElement],
52
- components: {
53
- 'ct-select-option': selectOption
54
- },
55
- props: {
56
- api: String,
57
- vmodel: Object,
58
- popShow: {
59
- type: Boolean,
60
- default: true
61
- }
62
- },
63
- data() {
64
- return {
65
- focus: false,
66
- showDrop: false,
67
- inputHeight: 26,
68
- tagsWidth: 175,
69
- showClear: false,
70
- searchText: "",
71
- globalOptions:[]
72
- }
73
- },
74
- created() {
75
- if (typeof this.vmodel === 'undefined') {
76
- this.model = this.loaderObj.Tags(this.source);
77
- }
78
- else {
79
- this.model = this.vmodel;
80
- }
81
- this.$watch('model.value', (n, o) => {
82
- if (typeof this.model.child !== 'undefined') {
83
- this.model.child.value = this.model.child.defaultValue || '';
84
- this.model.child.text = this.model.child.defaultText || '';
85
- }
86
- });
87
- this.inputHeight = this.inputLineHeight;
88
- },
89
- computed: {
90
- tagsPlaceholder: {
91
- get: function () {
92
- if (this.model.value.length > 0) {
93
- return '';
94
- }
95
- else {
96
- return this.model.label;
97
- }
98
- },
99
- set: function (v) {
100
-
101
- }
102
- },
103
- inputLineHeight: {
104
- get: function () {
105
- switch (this.model.attrs.size) {
106
- case 'mini':
107
- return 26;
108
- case 'small':
109
- return 32;
110
- case 'medium':
111
- return 36;
112
- default:
113
- return 40;
114
- }
115
- }
116
- },
117
- optionColSpan: function () {
118
- return parseInt(24 / this.model.optionRowCount);
119
- },
120
- optionRowCount: function () {
121
- return parseInt(this.model.options.length % this.model.optionRowCount > 0 ? (this.model.options.length / this.model.optionRowCount) + 1 : this.model.options.length / this.model.optionRowCount);
122
- }
123
- },
124
- mounted() {
125
- var self = this;
126
- this.resize();
127
- this.$nextTick(function () {
128
- var dropdown = self.$refs["pop"];
129
- self.$watch('model.options', function (newVal, oldVal) {
130
- self.$nextTick(() => {
131
- if (typeof dropdown.popperJS !== 'undefined' && dropdown.popperJS) {
132
- dropdown.popperJS.destroy();
133
- dropdown.popperJS = null;
134
- dropdown.updatePopper();
135
- }
136
- this.setToGlobalOptions();
137
- self.$refs["searchInput"].$el.querySelector("input").focus();
138
- });
139
- }, { deep: true, immediate: true });
140
- });
141
-
142
- },
143
- methods: {
144
- getOptions: function () {
145
- var self = this;
146
- this.model.getOptions(this.api, self.searchText);
147
- },
148
- tagsChange: function () {
149
- var self = this;
150
- if (typeof this.model.child !== 'undefined') {
151
- this.model.child.value = this.model.child.defaultValue || '';
152
- this.model.child.text = this.model.child.defaultText || '';
153
- }
154
- var currentOptions = this.globalOptions.filter((value) => {
155
- return self.model.value.indexOf(value[self.model.optionAttrs.value]) >= 0;
156
- });
157
- if (currentOptions) {
158
- this.model.text = currentOptions;
159
- }
160
- else {
161
- this.model.text = [];
162
- }
163
- this.$emit('change', this.model.value);
164
- this.inputHandler(self.model.value);
165
- this.changeHandler(self.model.value);
166
- },
167
- focusHandle: function () {
168
- this.$set(this, 'focus', true);
169
- },
170
- blurHandle: function () {
171
- this.$set(this, 'focus', false);
172
- },
173
- clickHandle: function () {
174
- this.$set(this, 'showDrop', !this.showDrop);
175
- if (this.showDrop) {
176
- this.getOptions();
177
- }
178
- this.focusHandle();
179
- },
180
- resetInputHeight() {
181
- var self = this;
182
- this.$nextTick(function () {
183
- for (var i = 1; i < 100; i++) {
184
- if (i * self.inputLineHeight > self.$refs['cttags'].clientHeight) {
185
- self.$set(self, 'inputHeight', i * self.inputLineHeight);
186
- break;
187
- }
188
- }
189
- });
190
- },
191
- resetTagsWidth() {
192
- var self = this;
193
- this.$nextTick(function () {
194
- self.$set(self, 'tagsWidth', self.$refs['ct-input'].clientWidth - 30);
195
- });
196
- },
197
- resize() {
198
- this.resetInputHeight();
199
- this.resetTagsWidth();
200
- },
201
- getOptionText: function (value) {
202
- var self = this;
203
- var option = this.globalOptions.find((v) => { return v[self.model.optionAttrs.value] === value });
204
- if (option) {
205
- return option[self.model.optionAttrs.label];
206
- } else {
207
- return value;
208
- }
209
- },
210
- deleteOption(value, event) {
211
- var self = this;
212
- this.model.value.splice(
213
- this.model.value.findIndex(
214
- (v) => {
215
- return v === value;
216
- }
217
- )
218
- , 1);
219
- self.resize();
220
- if (event) {
221
- event.stopPropagation();
222
- }
223
- this.tagsChange();
224
- this.$emit('input', this.model.value);
225
- },
226
- getOptionSelect(value) {
227
- if (this.model.value.find((v) => { return v === value })) {
228
- return "danger";
229
- }
230
- else {
231
- return "success";
232
- }
233
- },
234
- selectOption(value) {
235
- if (this.model.value.find((v) => { return v === value })) {
236
- this.deleteOption(value);
237
- }
238
- else {
239
- this.model.value.push(value);
240
- }
241
- this.resize();
242
- this.tagsChange();
243
- this.$emit('input', this.model.value);
244
- },
245
- mouseOverHandle: function () {
246
- if (this.model.value.length > 0 && this.model.clearable) {
247
- this.$set(this, 'showClear', true);
248
- }
249
- },
250
- mouseOutHandle: function () {
251
- this.$set(this, 'showClear', false);
252
- },
253
- clearClickHandle: function (event) {
254
- this.model.value.splice(0);
255
- this.resize();
256
- this.tagsChange();
257
- this.$emit('input', this.model.value);
258
- event.stopPropagation();
259
- },
260
- searchInputHandle: function () {
261
- var currentSeatch = this.searchText;
262
- this.searchTickControl(currentSeatch);
263
- },
264
- searchTickControl: function (search) {
265
- var self = this;
266
- setTimeout(function () {
267
- if (search === self.searchText) {
268
- self.getOptions(self.searchText);
269
- }
270
- }, self.model.searchTick);
271
- },
272
- setToGlobalOptions() {
273
- var self = this;
274
- this.model.options.forEach((v) => {
275
- var globalOption = self.globalOptions.find((v1) => {
276
- return v1[self.model.optionAttrs.value] === v[self.model.optionAttrs.value];
277
- });
278
- if (globalOption) {
279
- globalOption[self.model.optionAttrs.label] = v[self.model.optionAttrs.label];
280
- }
281
- else {
282
- self.globalOptions.push(v);
283
- }
284
- });
285
- }
286
- },
287
- watch: {
288
- popShow: function (newV, oldV) {
289
- this.resize();
290
- }
291
- }
292
- }
293
- </script>
294
- <style>
295
- .ct-tags .ct-input_inner {
296
- -webkit-appearance: none;
297
- background-color: #fff;
298
- background-image: none;
299
- border-radius: 4px;
300
- border: 1px solid #dcdfe6;
301
- -webkit-box-sizing: border-box;
302
- box-sizing: border-box;
303
- color: transparent;
304
- display: inline-block;
305
- font-size: inherit;
306
- line-height: 26px;
307
- outline: 0;
308
- padding: 0 15px;
309
- padding-right: 30px;
310
- -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
311
- transition: border-color .2s cubic-bezier(.645,.045,.355,1);
312
- width: 100%;
313
- cursor: pointer;
314
- z-index: 2000;
315
- }
316
-
317
- .ct-tags .ct-input_inner::-webkit-input-placeholder {
318
- color: #c0c4cc;
319
- }
320
-
321
- .ct-tags .ct-input_inner::-moz-placeholder {
322
- color: #c0c4cc;
323
- }
324
-
325
- .ct-tags .ct-input_inner:-ms-input-placeholder {
326
- color: #c0c4cc;
327
- }
328
-
329
- .ct-tags .ct-input_inner:hover {
330
- border-color: #c0c4cc; /*border-color:#c0c4cc*/
331
- }
332
-
333
- .ct-tags.isfocus .ct-input_inner:hover {
334
- border-color: #409EFF; /*border-color:#c0c4cc*/
335
- }
336
-
337
- .ct-tags.isfocus .ct-input_inner {
338
- border-color: #409EFF;
339
- }
340
-
341
- .ct-tags .el-input__suffix {
342
- right: 10px;
343
- cursor: pointer;
344
- }
345
-
346
- .ct-tags .el-select__caret {
347
- color: #c0c4cc;
348
- font-size: inherit;
349
- -webkit-transition: -webkit-transform .3s;
350
- transition: -webkit-transform .3s;
351
- transition: transform .3s;
352
- transition: transform .3s, -webkit-transform .3s;
353
- transition: transform .3s,-webkit-transform .3s;
354
- -webkit-transform: rotateZ(180deg);
355
- transform: rotateZ(180deg);
356
- cursor: pointer;
357
- }
358
-
359
- .ct-tags .is-reverse {
360
- -webkit-transform: rotateZ(0deg);
361
- transform: rotateZ(0deg);
362
- }
363
-
364
- .ct-tags .el-tag {
365
- -webkit-box-sizing: border-box;
366
- box-sizing: border-box;
367
- border-color: transparent;
368
- margin: 2px 0 2px 6px;
369
- background-color: #f0f2f5;
370
- }
371
-
372
- .ct-tags.ct-tags-mini {
373
- font-size: 12px;
374
- }
375
-
376
- .ct-tags.ct-tags-small {
377
- font-size: 13px;
378
- }
379
-
380
- .ct-tags.ct-tags-medium {
381
- font-size: 14px;
382
- }
383
-
384
- .ct-option {
385
- margin: 5px;
386
- cursor:pointer;
387
- }
388
- .ct-tags .ct-close > .el-select__caret.is-show-close:hover {
389
- color: #909399;
390
- }
391
- </style>