@eturnity/eturnity_reusable_components 1.1.35 → 1.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.35",
+  "version": "1.1.38",
   "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,96 +33,106 @@
           />
           <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
-          v-else-if="item.type === 'input'"
+          v-if="item.type === 'input'"
           @click.stop="onInputClick()"
         >
           <input-text
             class="inputField"
             :value="item.value"
             :noBorder="true"
+            :minWidth="item.value.length + 'ch'"
             :disabled="customInputDisabled"
             @input-change="onCustomInputChange($event)"
           />
         </input-container>
         <span v-else> {{ item.value }}</span>
       </component-item>
-      <et-popover
-        v-if="showArchived"
-        style="position: absolute; left: 5px; top: 13px; z-index: 99"
-        button-class="error"
-        :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')"
-      />
-    </component-container>
-    <options-container
-      v-if="isOpen"
-      :top="getItemLocation('top')"
-      :width="getItemLocation('width')"
-      ref="optionsContainer"
-    >
-      <options-wrapper @click.prevent.stop>
-        <search-container @click.prevent.stop>
-          <search-input
-            :value="inputText"
-            :placeholder="$gettext('Keyword') + '...'"
-            @click.prevent.stop
-            @on-change="onSearch($event)"
-            ref="searchInput"
+      <arrow-container class="arrow-container">
+        <arrow-wrapper :showArchived="showArchived">
+          <et-popover
+            v-if="showArchived"
+            button-class="error"
+            :text="
+              $gettext(`Component has been archived and shouldn't be used`)
+            "
+            triggerType="hover"
+          ></et-popover>
+          <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')"
           />
-        </search-container>
-        <spinner v-if="optionsLoading" />
-        <empty-text v-else-if="!optionsLoading && !optionItems.length">
-          {{ emptyText ? emptyText : $gettext("No components found.") }}
-        </empty-text>
-        <options-item
-          v-else
-          :colSpan="colSpan"
-          v-for="(item, index) in optionItems"
-          :key="index"
-          @click="onItemClick(item)"
-          :tabindex="0"
-          @keyup.enter.native="onItemClick(item)"
+        </arrow-wrapper>
+        <options-container
+          v-if="isOpen"
+          :top="getItemLocation('top')"
+          :left="getItemLocation('left')"
+          ref="optionsContainer"
         >
-          <template v-for="(option, idx) in optionsDisplay">
-            <span v-if="option !== 'template'" :key="idx">
-              {{ item[option] }}
-            </span>
-            <template-button
-              @click.stop="onTemplateClick(item)"
-              v-else-if="option === 'template' && item.has_template"
-              :key="idx"
-              >{{ $gettext("Use template...") }}</template-button
+          <options-wrapper @click.prevent.stop>
+            <search-container @click.prevent.stop>
+              <search-input
+                :value="inputText"
+                :placeholder="$gettext('Keyword') + '...'"
+                @click.prevent.stop
+                @on-change="onSearch($event)"
+                ref="searchInput"
+              />
+            </search-container>
+            <spinner v-if="optionsLoading" />
+            <empty-text v-else-if="!optionsLoading && !optionItems.length">
+              {{ emptyText ? emptyText : $gettext("No components found.") }}
+            </empty-text>
+            <options-item
+              v-else
+              :colSpan="colSpan - 1"
+              v-for="(item, index) in optionItems"
+              :key="index"
+              @click="onItemClick(item)"
+              :tabindex="0"
+              @keyup.enter.native="onItemClick(item)"
             >
-            <no-template
-              v-else-if="option === 'template' && !item.has_template"
-              :key="idx"
+              <template v-for="(option, idx) in optionsDisplay">
+                <span v-if="option !== 'template'" :key="idx">
+                  {{ item[option] }}
+                </span>
+                <template-button
+                  @click.stop="onTemplateClick(item)"
+                  v-else-if="option === 'template' && item.has_template"
+                  :key="idx"
+                  >{{ $gettext("Use template...") }}</template-button
+                >
+                <no-template
+                  v-else-if="option === 'template' && !item.has_template"
+                  :key="idx"
+                >
+                  {{ $gettext("No main component template") }}
+                </no-template>
+              </template>
+            </options-item>
+          </options-wrapper>
+          <custom-container
+            v-if="inputText.length && allowFreeInputs"
+            @click="onCustomNameClick()"
+          >
+            <custom-name>{{ getCustomName }}</custom-name>
+            <custom-subtext
+              >({{ $gettext("custom_component") }})</custom-subtext
             >
-              {{ $gettext("No main component template") }}
-            </no-template>
-          </template>
-        </options-item>
-      </options-wrapper>
-      <custom-container
-        v-if="inputText.length && allowFreeInputs"
-        @click="onCustomNameClick()"
-      >
-        <custom-name>{{ getCustomName }}</custom-name>
-        <custom-subtext>({{ $gettext("custom_component") }})</custom-subtext>
-      </custom-container>
-    </options-container>
+          </custom-container>
+        </options-container>
+      </arrow-container>
+    </component-container>
   </dropdown-row>
 </template>
 
@@ -145,24 +162,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 +207,35 @@ 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 arrowAttrs = { showArchived: Boolean }
+const ArrowWrapper = styled("div", arrowAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) =>
+    props.showArchived ? "auto auto" : "auto"};
+  align-items: center;
+  justify-items: center;
+`
+
+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,14 +261,19 @@ const OptionsWrapper = styled.div`
   font-size: 14px;
   grid-template-rows: max-content;
   height: max-content;
+  min-width: 400px; // kind of an arbitrary number until we know all use cases
 `
 
 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;
+  justify-items: flex-start;
 
   span {
     overflow: hidden;
@@ -267,15 +320,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;
   }
 `
 
@@ -312,6 +357,7 @@ export default {
     Spinner,
     EmptyText,
     SearchInput,
+    ArrowWrapper,
     OptionsWrapper,
     OptionsItem,
     SearchContainer,
@@ -323,6 +369,7 @@ export default {
     CustomContainer,
     CustomName,
     CustomSubtext,
+    ArrowContainer,
   },
   props: {
     colSpan: {
@@ -426,7 +473,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