@eturnity/eturnity_reusable_components 1.1.35 → 1.1.36

package/package.json

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

package/src/components/tableDropdown/index.vue

@@ -3,11 +3,18 @@
     :colspan="colSpan"
     :isOpen="isOpen"
     @click="toggleOpen"
-    ref="dropdownItem"
     :disabled="disabled"
   >
     <component-container :colSpan="colSpan - 1" class="table-dropdown">
-      <component-item v-for="(item, index) in tableItems" :key="index">
+      <component-item
+        v-for="(item, index) in tableItems"
+        :key="index"
+        ref="dropdownItem"
+        :class="{
+          'table-dropdown-item':
+            item.type !== 'no-template' && item.type !== 'input',
+        }"
+      >
         <template-button
           @click.stop="onTemplateClick(item.row)"
           v-if="item.type && item.type === 'template' && item.value === ''"
@@ -26,7 +33,7 @@
           />
           <div>{{ item.value }}</div>
         </template-link>
-        <no-template v-else-if="item.type && item.type === 'no-template'">
+        <no-template v-if="item.type && item.type === 'no-template'">
           {{ $gettext("No main component template") }}
         </no-template>
         <input-container
@@ -37,6 +44,7 @@
             class="inputField"
             :value="item.value"
             :noBorder="true"
+            :minWidth="item.value.length + 'ch'"
             :disabled="customInputDisabled"
             @input-change="onCustomInputChange($event)"
           />
@@ -50,20 +58,24 @@
         :text="$gettext(`Component has been archived and shouldn't be used`)"
         triggerType="hover"
       ></et-popover>
-      <arrow-down
-        v-if="!isOpen"
-        class="arrow-dropdown"
-        :src="require('../../assets/icons/collapse_arrow_icon.svg')"
-      />
-      <arrow-up
-        v-else
-        :src="require('../../assets/icons/collapse_arrow_icon.svg')"
-      />
+      <arrow-container class="arrow-container">
+        <arrow-down
+          @click.native.stop="toggleOpen"
+          v-if="!isOpen"
+          class="arrow-dropdown"
+          :src="require('../../assets/icons/collapse_arrow_icon.svg')"
+        />
+        <arrow-up
+          @click.native.stop="toggleOpen"
+          v-else
+          :src="require('../../assets/icons/collapse_arrow_icon.svg')"
+        />
+      </arrow-container>
     </component-container>
     <options-container
       v-if="isOpen"
       :top="getItemLocation('top')"
-      :width="getItemLocation('width')"
+      :left="getItemLocation('left')"
       ref="optionsContainer"
     >
       <options-wrapper @click.prevent.stop>
@@ -145,24 +157,33 @@ import SearchInput from "@eturnity/eturnity_reusable_components/src/components/i
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
-const DropdownRow = styled("td", rowAttrs)`
+const DropdownRow = styled("div", rowAttrs)`
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  display: contents;
 
   input {
     cursor: ${(props) => (!props.isOpen ? "pointer !important" : "inherit")};
   }
 `
 
-const ComponentItem = styled.div`
+const ComponentItem = styled.td`
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 0 !important;
+
+  &.table-dropdown-item {
+    background-clip: content-box;
+    padding: 8px 0 7px 0 !important;
+
+    span {
+      padding-left: 15px;
+    }
+  }
 `
 
 const containerAttrs = { colSpan: Number }
 const ComponentContainer = styled("div", containerAttrs)`
-  display: grid;
-  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto) auto;
-  grid-gap: 12px;
+  display: contents;
   align-items: center;
   background-color: ${(props) => props.theme.colors.white};
   border-radius: 4px;
@@ -181,13 +202,26 @@ const ArrowUp = styled.img`
   transition: transform 150ms ease;
 `
 
-const optionsAttrs = { top: Number, width: Number }
+const ArrowContainer = styled.td`
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+  background-clip: content-box;
+  padding: 8px 0 7px 0 !important;
+  border-radius: 0 4px 4px 0;
+
+  .arrow-dropdown {
+    vertical-align: middle;
+    margin-left: 11px;
+  }
+`
+
+const optionsAttrs = { top: Number, left: Number }
 const OptionsContainer = styled("div", optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
   top: ${(props) => props.top + "px"};
-  width: ${(props) => props.width + "px"};
+  left: ${(props) => props.left + "px"};
+  width: auto;
   max-height: 360px;
   min-height: 200px;
   overflow: auto;
@@ -213,12 +247,16 @@ const OptionsWrapper = styled.div`
   font-size: 14px;
   grid-template-rows: max-content;
   height: max-content;
+  min-width: 350px;
 `
 
 const OptionsItem = styled("div", containerAttrs)`
   display: grid;
-  grid-template-columns: 1fr repeat(${(props) => props.colSpan}, auto);
-  grid-gap: 12px;
+  grid-template-columns: 1fr repeat(
+      ${(props) => props.colSpan},
+      minmax(50px, auto)
+    );
+  grid-gap: 30px;
   padding: 10px;
   height: max-content;
 
@@ -267,15 +305,7 @@ const TemplateLink = styled.div`
 
 const InputContainer = styled.div`
   .inputField input {
-    padding: 0;
-
-    &:focus {
-      padding: 5px 0px;
-    }
-
-    &:hover {
-      padding: 0px 0 !important;
-    }
+    border-radius: 4px 0 0 4px;
   }
 `
 
@@ -323,6 +353,7 @@ export default {
     CustomContainer,
     CustomName,
     CustomSubtext,
+    ArrowContainer,
   },
   props: {
     colSpan: {
@@ -426,7 +457,7 @@ export default {
       this.$emit("dropdown-search", value)
     },
     getItemLocation(value) {
-      let ref = this.$refs.dropdownItem
+      let ref = this.$refs.dropdownItem[0]
       let location = ref.$el.getBoundingClientRect()[value]
       if (value === "top") {
         location = location + window.scrollY + 40