@eturnity/eturnity_reusable_components 1.1.25 → 1.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.25",
+  "version": "1.1.28",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/inputText/index.vue

@@ -1,6 +1,9 @@
 <template>
   <container>
-    <input-wrapper :alignItems="alignItems">
+    <input-wrapper
+      :alignItems="alignItems"
+      :hasLabel="!!label && label.length > 0"
+    >
       <label-wrapper v-if="label">
         <input-label>{{ label }}</input-label>
         <info-text
@@ -85,14 +88,14 @@ const InputContainer = styled("input", inputProps)`
   }
 `
 
-const inputAttrs = { alignItems: String }
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
 const InputWrapper = styled("div", inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 14px;
   grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
+    props.alignItems === "vertical" || !props.hasLabel ? "1fr" : "auto 1fr"};
 `
 
 const ErrorMessage = styled.div`

package/src/components/tableDropdown/index.vue

@@ -6,7 +6,7 @@
     ref="dropdownItem"
     :disabled="disabled"
   >
-    <component-container :colSpan="colSpan" class="table-dropdown">
+    <component-container :colSpan="colSpan - 1" class="table-dropdown">
       <component-item v-for="(item, index) in tableItems" :key="index">
         <template-button
           @click.stop="onTemplateClick(item.row)"
@@ -38,7 +38,7 @@
             :value="item.value"
             :noBorder="true"
             :disabled="customInputDisabled"
-            @input-change="$emit('custom-input-change', $event)"
+            @input-change="onCustomInputChange($event)"
           />
         </input-container>
         <span v-else> {{ item.value }}</span>
@@ -161,7 +161,7 @@ const ComponentItem = styled.div`
 const containerAttrs = { colSpan: Number }
 const ComponentContainer = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr)) auto;
+  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto) auto;
   grid-gap: 12px;
   align-items: center;
   background-color: ${(props) => props.theme.colors.white};
@@ -217,7 +217,7 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr));
+  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto);
   grid-gap: 12px;
   padding: 10px;
   height: max-content;
@@ -373,6 +373,7 @@ export default {
   data() {
     return {
       inputText: "",
+      wasClicked: false, // prevents custom-name from being triggered on the <input-text />
     }
   },
   methods: {
@@ -380,6 +381,7 @@ export default {
       if (this.disabled) {
         return
       }
+      this.wasClicked = false
       if (!this.isOpen) {
         document.addEventListener("click", this.clickOutside)
         this.$emit("dropdown-search", "")
@@ -416,6 +418,7 @@ export default {
       this.$emit("on-selected-template-click", item)
     },
     onItemClick(item) {
+      this.wasClicked = true
       this.$emit("item-selected", item)
     },
     onSearch(value) {
@@ -441,10 +444,17 @@ export default {
       this.$emit("toggle-dropdown-open", { close: true })
     },
     onCustomNameClick() {
+      this.wasClicked = true
       this.$emit("on-custom-input-name", this.inputText)
       this.$emit("toggle-dropdown-open", { close: true })
       this.inputText = ""
     },
+    onCustomInputChange(event) {
+      if (this.wasClicked) {
+        return
+      }
+      this.$emit("custom-input-change", event)
+    },
   },
   computed: {
     getCustomName() {