Merge pull request #5921 from Countly/SER-2150-content-general-issue-for-input-boxes

[Feat] Add suffix to input number

Author: pnrgenc

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -385,7 +385,7 @@
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER = 'number';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch';
@@ -395,7 +395,7 @@
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input',
-        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number',
+        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER]: 'el-input-number',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch',
@@ -475,13 +475,21 @@
                         return countlyCommon.unescapeHtml(this.value) || '';
                     }
 
+                    if (this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER) {
+                        return +this.value || 0;
+                    }
+
                     return this.value || null;
                 },
                 set(newValue) {
                     this.$emit('input', newValue);
                 }
             },
 
+            controlsProp() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER ? false : null;
+            },
+
             isDropdownInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN;
             },
@@ -495,7 +503,10 @@
             },
 
             isSuffixVisible() {
-                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix;
+                return (
+                    this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT ||
+                    this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER
+                ) && this.suffix;
             },
 
             isSwapperInput() {

frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html

@@ -25,6 +25,7 @@
         v-model="componentValue"
         class="cly-vue-content-builder-sidebar-input__component"
         :class="{ 'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput }"
+        :controls="controlsProp"
         :disabled="disabled"
         :options="options"
       >
@@ -44,6 +45,12 @@
           />
         </template>
       </component>
+      <div
+        v-if="isSuffixVisible && type === 'number'"
+        class="cly-vue-content-builder-sidebar-input__number-input-suffix"
+      >
+        {{ suffix }}
+      </div>
     </slot>
   </div>
 </div>

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4616,6 +4616,18 @@
         width: auto;
         box-shadow: none;
 
+        // .cly-vue-content-builder-sidebar-input__component.el-input-number
+        &.el-input-number {
+            position: relative;
+
+            // .cly-vue-content-builder-sidebar-input__component.el-input-number .el-input__inner
+            & .el-input__inner {
+                text-align: left;
+                padding: 6px 10px;
+                padding-right: 34px;
+            }
+        }
+
         // .cly-vue-content-builder-sidebar-input__component .el-input__count
         & .el-input__count {
             position: absolute;
@@ -4710,7 +4722,7 @@
 
         // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component
         &--small .cly-vue-content-builder-sidebar-input__component {
-            max-width: 64px;
+            max-width: 70px;
         }
 
         // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component
@@ -4740,6 +4752,19 @@
         line-height: 16px;
     }
 
+    // .cly-vue-content-builder-sidebar-input__number-input-suffix
+    &__number-input-suffix {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 6px 10px;
+        padding-left: 0;
+        color: #81868D;
+        width: 16px;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
     // .cly-vue-content-builder-sidebar-input__sub-header
     &__sub-header {
         color: #81868D;