fix(variable-input): always display variable input

ToucanToco · Jan 24, 2025 · df1b536 · df1b536
1 parent 7fd6954
commit df1b536
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 6 deletions.
diff --git a/ui/src/components/stepforms/widgets/Autocomplete.vue b/ui/src/components/stepforms/widgets/Autocomplete.vue
@@ -15,7 +15,10 @@
     >
       <multiselect
         :value="value"
-        :class="{ 'widget-autocomplete__multiselect--with-example': withExample }"
+        :class="{ 
+          'widget-autocomplete__multiselect--with-example': withExample, 
+          'multiselect--with-variables': availableVariables
+          }"
         :options="options"
         :placeholder="placeholder"
         :allow-empty="false"
@@ -205,6 +208,10 @@ export default class AutocompleteWidget extends FormWidget {
   width: auto;
 }
 
+.multiselect--with-variables .multiselect__single {
+  padding-right: 28px;
+}
+
 .multiselect__single,
 .multiselect__input {
   padding-left: 0;

diff --git a/ui/src/components/stepforms/widgets/InputDate.vue b/ui/src/components/stepforms/widgets/InputDate.vue
@@ -17,6 +17,9 @@
       <input
         ref="input"
         class="widget-input-date"
+        :class="{
+          'widget-input--with-variables': availableVariables
+        }"
         :placeholder="placeholder"
         type="date"
         :value="parsedValue"
@@ -122,4 +125,9 @@ export default class InputDateWidget extends FormWidget {
     color: $active-color;
   }
 }
+
+.widget-input--with-variables {
+  padding-right: 35px;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/ui/src/components/stepforms/widgets/InputNumber.vue b/ui/src/components/stepforms/widgets/InputNumber.vue
@@ -88,6 +88,7 @@ export default class InputNumberWidget extends FormWidget {
     return {
       'widget-input-number': true,
       'widget-input-number--focused': this.isFocused,
+      'widget-input--with-variables': !!this.availableVariables
     };
   }
 
@@ -141,4 +142,9 @@ export default class InputNumberWidget extends FormWidget {
     color: $active-color;
   }
 }
+
+.widget-input--with-variables {
+  padding-right: 35px;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/ui/src/components/stepforms/widgets/InputText.vue b/ui/src/components/stepforms/widgets/InputText.vue
@@ -17,6 +17,9 @@
       <input
         ref="input"
         class="widget-input-text"
+        :class="{
+          'widget-input--with-variables': availableVariables
+        }"
         data-cy="weaverbird-input-text"
         :placeholder="placeholder"
         type="text"
@@ -116,4 +119,9 @@ export default class InputTextWidget extends FormWidget {
     color: $active-color;
   }
 }
+
+.widget-input--with-variables {
+  padding-right: 35px;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/ui/src/components/stepforms/widgets/MultiInputText.vue b/ui/src/components/stepforms/widgets/MultiInputText.vue
@@ -12,7 +12,10 @@
     >
       <multiselect
         class="widget-multiinputtext__multiselect"
-        :class="{ 'widget-multiinputtext__multiselect--big': isMultiselectBig }"
+        :class="{ 
+          'widget-multiinputtext__multiselect--big': isMultiselectBig, 
+          'multiselect--with-variables': availableVariables 
+        }"
         :value="value"
         @input="updateValue"
         :options="options"
@@ -185,6 +188,11 @@ export default class MultiInputTextWidget extends Vue {
   line-height: 20px;
   padding-left: 5px;
 }
+
+.multiselect--with-variables .multiselect__single {
+  padding-right: 28px;
+}
+
 .multiselect__single {
   background-color: transparent;
   color: $base-color-light;

diff --git a/ui/src/components/stepforms/widgets/VariableInput.vue b/ui/src/components/stepforms/widgets/VariableInput.vue
@@ -13,6 +13,7 @@
       </div>
     </div>
     <VariableInputBase
+      :isVariable="isVariable"
       :available-variables="availableVariables"
       :variable-delimiters="variableDelimiters"
       :trusted-variable-delimiters="trustedVariableDelimiters"

diff --git a/ui/src/components/stepforms/widgets/VariableInputs/VariableInputBase.vue b/ui/src/components/stepforms/widgets/VariableInputs/VariableInputBase.vue
@@ -12,6 +12,7 @@
         class="widget-variable__toggle"
         :class="{
           'widget-variable__toggle--choosing': isChoosingVariable,
+          'widget-variable__toggle--hidden': isVariable,
           'widget-variable__toggle--parent-arrow': hasArrow,
         }"
         @click.stop="startChoosingVariable"
@@ -81,6 +82,9 @@ export default class VariableInputBase extends Vue {
   @Prop({ default: false })
   hasArrow!: boolean;
 
+  @Prop({ default: false })
+  isVariable!: boolean;
+
   isChoosingVariable = false;
 
   isAdvancedVariableModalOpened = false;
@@ -208,8 +212,6 @@ export default class VariableInputBase extends Vue {
 }
 
 .widget-variable__toggle {
-  opacity: 0;
-  visibility: hidden;
   display: block;
   position: absolute;
   top: 0;
@@ -229,12 +231,14 @@ export default class VariableInputBase extends Vue {
 
   &:hover,
   &.widget-variable__toggle--choosing {
-    opacity: 1;
-    visibility: visible;
     background: $active-color;
     color: #eaeff5;
   }
 
+  &.widget-variable__toggle--hidden {
+    display: none;
+  }
+
   &.widget-variable__toggle--parent-arrow {
     right: 35px;
   }