|
336 | 336 | `,
|
337 | 337 | }));
|
338 | 338 |
|
339 |
| - Vue.component("cly-content-step", countlyVue.components.create({ |
| 339 | + |
| 340 | + // CONSTANTS |
| 341 | + |
| 342 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker'; |
| 343 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown'; |
| 344 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input'; |
| 345 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number'; |
| 346 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider'; |
| 347 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper'; |
| 348 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch'; |
| 349 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab'; |
| 350 | + |
| 351 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE = { |
| 352 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker', |
| 353 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select', |
| 354 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input', |
| 355 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number', |
| 356 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider', |
| 357 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper', |
| 358 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch', |
| 359 | + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB]: 'div' |
| 360 | + }; |
| 361 | + |
| 362 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL = 'horizontal'; |
| 363 | + const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL = 'vertical'; |
| 364 | + |
| 365 | + Vue.component("cly-content-builder-sidebar-input", countlyVue.components.create({ |
| 366 | + template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'), |
| 367 | + |
340 | 368 | props: {
|
341 |
| - value: { |
342 |
| - type: [String, Number, Boolean, Object], |
343 |
| - default: null |
344 |
| - }, |
345 |
| - subHeader: { |
346 |
| - type: String, |
347 |
| - required: false, |
348 |
| - default: null |
| 369 | + disabled: { |
| 370 | + default: false, |
| 371 | + type: Boolean |
349 | 372 | },
|
| 373 | + |
350 | 374 | label: {
|
351 |
| - type: String, |
352 |
| - required: false, |
353 |
| - default: null |
354 |
| - }, |
355 |
| - inputType: { |
356 |
| - type: String, |
357 |
| - required: false, |
358 |
| - default: 'text' |
| 375 | + default: null, |
| 376 | + type: String |
359 | 377 | },
|
| 378 | + |
360 | 379 | options: {
|
361 |
| - type: Array, |
362 |
| - required: false, |
363 |
| - default: () => [] |
| 380 | + default: () => [], |
| 381 | + type: Array |
364 | 382 | },
|
| 383 | + |
| 384 | + placement: { |
| 385 | + default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL, |
| 386 | + type: String |
| 387 | + }, |
| 388 | + |
365 | 389 | position: {
|
366 |
| - type: String, |
367 |
| - required: false, |
368 |
| - default: 'horizontal' |
| 390 | + default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL, |
| 391 | + type: String |
369 | 392 | },
|
370 |
| - width: { |
371 |
| - type: String, |
372 |
| - required: false, |
373 |
| - default: null |
| 393 | + |
| 394 | + subHeader: { |
| 395 | + default: null, |
| 396 | + type: String |
374 | 397 | },
|
375 |
| - inputProps: { |
376 |
| - type: Object, |
377 |
| - required: false, |
378 |
| - default: () => ({}) |
379 |
| - } |
380 |
| - }, |
381 |
| - data() { |
382 |
| - return { |
383 |
| - localValue: this.initializeLocalValue(), |
384 |
| - }; |
385 |
| - }, |
386 |
| - watch: { |
| 398 | + |
| 399 | + suffix: { |
| 400 | + default: null, |
| 401 | + type: String |
| 402 | + }, |
| 403 | + |
| 404 | + type: { |
| 405 | + default: COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT, |
| 406 | + type: String |
| 407 | + }, |
| 408 | + |
387 | 409 | value: {
|
388 |
| - handler: function(newValue) { |
389 |
| - this.localValue = this.initializeLocalValue(newValue); |
390 |
| - }, |
391 |
| - deep: true |
| 410 | + default: null, |
| 411 | + type: [String, Number, Boolean, Object] |
392 | 412 | },
|
393 |
| - localValue: { |
394 |
| - handler: function(newValue) { |
395 |
| - this.$emit('input', newValue); |
396 |
| - }, |
397 |
| - deep: true |
| 413 | + |
| 414 | + size: { |
| 415 | + default: null, |
| 416 | + type: String |
398 | 417 | }
|
399 | 418 | },
|
400 |
| - methods: { |
401 |
| - initializeLocalValue(val = this.value) { |
402 |
| - if (this.inputType === 'switch') { |
403 |
| - return val === true; |
| 419 | + |
| 420 | + emits: [ |
| 421 | + 'input' |
| 422 | + ], |
| 423 | + |
| 424 | + computed: { |
| 425 | + componentValue: { |
| 426 | + get() { |
| 427 | + if (this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH) { |
| 428 | + return !!this.value; |
| 429 | + } |
| 430 | + |
| 431 | + return this.value || null; |
| 432 | + }, |
| 433 | + set(newValue) { |
| 434 | + this.$emit('input', newValue); |
404 | 435 | }
|
405 |
| - return val !== undefined ? val : null; |
406 |
| - }, |
407 |
| - updateValue: function(newValue) { |
408 |
| - this.localValue = newValue; |
409 |
| - }, |
410 |
| - getComponentType: function(type) { |
411 |
| - const mapping = { |
412 |
| - dropdown: 'el-select', |
413 |
| - input: 'el-input', |
414 |
| - switch: 'el-switch', |
415 |
| - slider: 'el-slider', |
416 |
| - 'color-picker': 'cly-colorpicker', |
417 |
| - 'input-number': 'el-input-number', |
418 |
| - }; |
419 |
| - return mapping[type] || 'div'; |
| 436 | + }, |
| 437 | + |
| 438 | + isDropdownInput() { |
| 439 | + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN; |
| 440 | + }, |
| 441 | + |
| 442 | + isComponentWithOptions() { |
| 443 | + return this.isDropdownInput && Array.isArray(this.options) && this.options.length; |
| 444 | + }, |
| 445 | + |
| 446 | + isSliderInput() { |
| 447 | + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER; |
| 448 | + }, |
| 449 | + |
| 450 | + isSuffixVisible() { |
| 451 | + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix; |
| 452 | + }, |
| 453 | + |
| 454 | + isSwapperInput() { |
| 455 | + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER; |
| 456 | + }, |
| 457 | + |
| 458 | + isVerticalInput() { |
| 459 | + return this.position === COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL; |
| 460 | + }, |
| 461 | + |
| 462 | + mainComponent() { |
| 463 | + return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div'; |
420 | 464 | }
|
421 |
| - }, |
422 |
| - created: function() { |
423 |
| - }, |
424 |
| - template: ` |
425 |
| - <div class="cly-vue-content-builder__layout-step"> |
426 |
| - <div v-if="subHeader" class="cly-vue-content-builder__layout-step__sub-header color-cool-gray-50 bu-mb-2">{{ subHeader }}</div> |
427 |
| - <div class="cly-vue-content-builder__layout-step__element bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center" :class="{'bu-is-flex-direction-column bu-is-align-items-baseline': position !== 'horizontal' }" :style="[position !== 'horizontal' ? {'gap': '8px'}: {}]"> |
428 |
| - <div v-if="label" class="cly-vue-content-builder__layout-step__label">{{ label }}</div> |
429 |
| - <slot name="content-builder-layout-step"> |
430 |
| - <component |
431 |
| - :is="getComponentType(inputType)" |
432 |
| - v-bind="inputProps" |
433 |
| - :value="localValue" |
434 |
| - @input="updateValue" |
435 |
| - :format-tooltip="inputProps && inputProps.formatTooltip" |
436 |
| - :min="inputProps && inputProps.min" |
437 |
| - :max="inputProps && inputProps.max" |
438 |
| - class="cly-vue-content-builder__layout-step__component" |
439 |
| - :style="[ position !== 'horizontal' ? {\'width\': \'100%\'} : {\'width\': width + \'px\'}]" |
440 |
| - > |
441 |
| - <template v-if="inputProps && inputProps.append" v-slot:append>{{inputProps.append}}</template> |
442 |
| - <el-option |
443 |
| - v-if="inputType === 'dropdown'" |
444 |
| - v-for="option in options" |
445 |
| - :key="option.value" |
446 |
| - :label="option.label" |
447 |
| - :value="option.value" |
448 |
| - class="cly-vue-content-builder__layout-step__option" |
449 |
| - ></el-option> |
450 |
| - </component> |
451 |
| - </slot> |
452 |
| - </div> |
453 |
| - </div> |
454 |
| - `, |
| 465 | + } |
455 | 466 | }));
|
456 | 467 |
|
457 |
| - Vue.component("cly-option-swapper", countlyVue.components.BaseComponent.extend({ |
458 |
| - mixins: [countlyVue.mixins.i18n], |
| 468 | + Vue.component("cly-option-swapper", countlyVue.components.create({ |
| 469 | + template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'), |
| 470 | + |
459 | 471 | props: {
|
460 |
| - value: { |
461 |
| - type: [String, Number], |
462 |
| - default: null |
| 472 | + highlightOnSelect: { |
| 473 | + default: true, |
| 474 | + type: Boolean |
463 | 475 | },
|
464 |
| - items: { |
465 |
| - type: Array, |
466 |
| - default: function() { |
467 |
| - return []; |
468 |
| - } |
469 |
| - }, |
470 |
| - activeColorCode: { |
471 |
| - type: String, |
472 |
| - default: '#0166D6' |
| 476 | + |
| 477 | + options: { |
| 478 | + default: () => [], |
| 479 | + type: Array |
473 | 480 | },
|
474 |
| - width: { |
475 |
| - type: String, |
476 |
| - default: '100' |
| 481 | + |
| 482 | + value: { |
| 483 | + default: null, |
| 484 | + type: [String, Number] |
477 | 485 | }
|
478 | 486 | },
|
479 |
| - data: function() { |
480 |
| - return { |
481 |
| - selectedValue: this.items[0].value || 0 |
482 |
| - }; |
483 |
| - }, |
484 |
| - watch: { |
485 |
| - value: function(value) { |
486 |
| - this.selectedValue = value; |
| 487 | + |
| 488 | + emits: [ |
| 489 | + 'input' |
| 490 | + ], |
| 491 | + |
| 492 | + mixins: [countlyVue.mixins.i18n], |
| 493 | + |
| 494 | + computed: { |
| 495 | + selectedOption: { |
| 496 | + get() { |
| 497 | + return this.value || this.options[0].value; |
| 498 | + }, |
| 499 | + set(value) { |
| 500 | + this.$emit('input', value); |
| 501 | + } |
487 | 502 | }
|
488 | 503 | },
|
| 504 | + |
489 | 505 | methods: {
|
490 |
| - numberChange: function(item) { |
491 |
| - if (!item.disabled) { |
492 |
| - this.selectedValue = item.value; |
493 |
| - this.$emit('input', this.selectedValue); |
| 506 | + onOptionClick: function(option) { |
| 507 | + if (!option.disabled) { |
| 508 | + this.selectedOption = option.value; |
494 | 509 | }
|
495 | 510 | }
|
496 |
| - }, |
497 |
| - created: function() { |
498 |
| - this.selectedValue = this.value || this.items[0].value || 0; |
499 |
| - }, |
500 |
| - template: ` |
501 |
| - <div> |
502 |
| - <div class="bu-is-flex cly-option-swapper" :style="{'width': width + 'px'}"> |
503 |
| - <div v-for="(item, index) in items" :key="item.value" class="cly-option-swapper__each-box-wrapper"> |
504 |
| - <div |
505 |
| - :style="[ |
506 |
| - item.value === selectedValue && !item.disabled ? {'background-color': activeColorCode} : {}, |
507 |
| - item.disabled ? {'opacity': '0.5', 'cursor': 'not-allowed', 'background-color': '#E2E4E8'} : {} |
508 |
| - ]" |
509 |
| - :class="{ |
510 |
| - 'cly-option-swapper__active': item.value === selectedValue && !item.disabled, |
511 |
| - 'cly-option-swapper__first': index === 0, |
512 |
| - 'cly-option-swapper__last': index === (items.length - 1), |
513 |
| - 'cly-option-swapper__disabled': item.disabled |
514 |
| - }" |
515 |
| - v-tooltip="item.tooltip" |
516 |
| - class="cly-option-swapper__each" |
517 |
| - @click="numberChange(item)" |
518 |
| - > |
519 |
| - <i v-if="item.icon" |
520 |
| - :class="item.icon" |
521 |
| - :style="[ |
522 |
| - item.value === selectedValue && !item.disabled ? {'color': '#0166d6'} : {'color': '#000'}, |
523 |
| - item.disabled ? {'color': '#999'} : {} |
524 |
| - ]"> |
525 |
| - </i> |
526 |
| - <span v-else |
527 |
| - :style="[ |
528 |
| - item.value === selectedValue && !item.disabled ? {'color': '#0166d6'} : {'color': '#000'}, |
529 |
| - item.disabled ? {'color': '#999'} : {} |
530 |
| - ]" |
531 |
| - class="text-medium" |
532 |
| - > |
533 |
| - {{ item.text }} |
534 |
| - </span> |
535 |
| - </div> |
536 |
| - </div> |
537 |
| - </div> |
538 |
| - </div> |
539 |
| - ` |
| 511 | + } |
540 | 512 | }));
|
541 | 513 |
|
542 | 514 | Vue.component("cly-device-selector", countlyVue.components.BaseComponent.extend({
|
|
0 commit comments