@eturnity/eturnity_reusable_components 1.1.24 → 1.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.24",
+  "version": "1.1.27",
   "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

@@ -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>
@@ -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() {

package/src/components/tables/mainTable/index.vue

@@ -320,6 +320,7 @@ const TableContainer = styled.table`
     padding: 5px 10px;
     background: #fff;
     min-width: max-content;
+    min-width: 150px; // Safari/Firefox backup
 
     &:focus {
       background: ${(props) => props.theme.colors.grey5};