@eturnity/eturnity_reusable_components 1.1.43 → 1.1.46

package/package.json

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

package/src/components/tableDropdown/index.vue

@@ -11,13 +11,16 @@
         :key="index"
         ref="dropdownItem"
         :class="{
-          'table-dropdown-item':
-            item.type !== 'no-template' && item.type !== 'input',
+          'table-dropdown-item': item.type !== 'input',
         }"
       >
         <template-button
           @click.stop="onTemplateClick(item.row)"
-          v-if="item.type && item.type === 'template' && item.value === ''"
+          v-if="
+            item.type &&
+            item.type === 'template' &&
+            (item.value === '' || item.value === '-')
+          "
           :key="idx"
           >{{ $gettext("Use template...") }}</template-button
         >
@@ -49,7 +52,13 @@
             @input-change="onCustomInputChange($event)"
           />
         </input-container>
-        <text-container v-else>
+        <text-container
+          v-else-if="
+            item.type !== 'input' &&
+            item.type !== 'no-template' &&
+            item.type !== 'template'
+          "
+        >
           <span> {{ item.value }}</span>
         </text-container>
       </component-item>
@@ -98,6 +107,7 @@
             <options-item
               v-else
               :colSpan="colSpan - 1"
+              :width="dynamicGridWidth"
               v-for="(item, index) in optionItems"
               :key="index"
               @click="onItemClick(item)"
@@ -106,7 +116,7 @@
             >
               <template v-for="(option, idx) in optionsDisplay">
                 <span v-if="option !== 'template'" :key="idx">
-                  {{ item[option] }}
+                  {{ !!item[option] ? item[option] : "-" }}
                 </span>
                 <template-button
                   @click.stop="onTemplateClick(item)"
@@ -188,7 +198,7 @@ const ComponentItem = styled.td`
   }
 `
 
-const containerAttrs = { colSpan: Number }
+const containerAttrs = { colSpan: Number, width: String }
 const ComponentContainer = styled("div", containerAttrs)`
   display: contents;
   align-items: center;
@@ -268,10 +278,11 @@ const OptionsWrapper = styled.div`
 
 const OptionsItem = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: 1fr repeat(
+  /* grid-template-columns: 1fr repeat(
       ${(props) => props.colSpan},
       minmax(50px, auto)
-    );
+    ); */
+  grid-template-columns: ${(props) => props.width};
   grid-gap: 30px;
   padding: 10px;
   height: max-content;
@@ -430,6 +441,8 @@ export default {
     return {
       inputText: "",
       wasClicked: false, // prevents custom-name from being triggered on the <input-text />
+      dynamicWidth: [], // for numbers
+      dynamicGridWidth: [], // for grid values
     }
   },
   methods: {
@@ -511,6 +524,31 @@ export default {
       }
       this.$emit("custom-input-change", event)
     },
+    setDropdownWidth(options) {
+      this.dynamicWidth = []
+      options.map((item) => {
+        this.optionsDisplay.map((header, index) => {
+          let value =
+            header === "template"
+              ? this.$gettext("No main component template")
+              : item[header]
+
+          value = !!value ? value : ""
+
+          if (
+            this.optionsDisplay.length &&
+            (this.dynamicWidth.length < this.optionsDisplay.length ||
+              value.length > this.dynamicWidth[index])
+          ) {
+            this.dynamicGridWidth[index] = value.length + "ch"
+            this.dynamicWidth[index] = value.length
+          }
+        })
+      })
+      if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
+        this.dynamicGridWidth = this.dynamicGridWidth.join(" ")
+      }
+    },
   },
   computed: {
     getCustomName() {
@@ -530,6 +568,11 @@ export default {
         })
       }
     },
+    optionItems(val) {
+      if (val && val.length) {
+        this.setDropdownWidth(val)
+      }
+    },
   },
 }
 </script>