@eturnity/eturnity_reusable_components 1.1.0 → 1.1.3

package/package.json

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

package/src/components/tableDropdown/index.vue

@@ -28,9 +28,19 @@
         <no-template v-else-if="item.type && item.type === 'no-template'">
           {{ $gettext("No main component template") }}
         </no-template>
-        <span v-else>
-          {{ item.value }}
-        </span>
+        <input-container
+          v-else-if="item.type === 'input'"
+          @click.stop="onInputClick()"
+        >
+          <input-text
+            class="inputField"
+            :value="item.value"
+            :noBorder="true"
+            :disabled="customInputDisabled"
+            @input-change="$emit('custom-input-change', $event)"
+          />
+        </input-container>
+        <span v-else> {{ item.value }}</span>
       </component-item>
       <et-popover
         v-if="showArchived"
@@ -97,6 +107,13 @@
           </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>
   </dropdown-row>
 </template>
@@ -124,6 +141,7 @@
 import styled from "vue-styled-components"
 import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 
 const rowAttrs = { disabled: Boolean }
 const DropdownRow = styled("td", rowAttrs)`
@@ -162,6 +180,7 @@ const optionsAttrs = { top: Number, width: 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"};
   max-height: 360px;
@@ -241,6 +260,41 @@ const TemplateLink = styled.div`
   grid-gap: 12px;
 `
 
+const InputContainer = styled.div`
+  .inputField input {
+    padding: 0 10px;
+
+    &:focus {
+      padding: 5px 10px;
+    }
+
+    &:hover {
+      padding: 0 10px !important;
+    }
+  }
+`
+
+const CustomContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 10px 22px;
+  border-top: 1px solid ${(props) => props.theme.colors.grey3};
+  height: 37px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const CustomName = styled.div`
+  justify-self: flex-start;
+`
+
+const CustomSubtext = styled.div`
+  justify-self: flex-end;
+  color: ${(props) => props.theme.colors.grey3};
+`
+
 export default {
   name: "table-dropdown",
   components: {
@@ -259,12 +313,27 @@ export default {
     TemplateButton,
     NoTemplate,
     TemplateLink,
+    InputText,
+    InputContainer,
+    CustomContainer,
+    CustomName,
+    CustomSubtext,
   },
   props: {
     colSpan: {
       required: false,
       default: 1,
     },
+    customInputDisabled: {
+      // whether the input field should be disabled
+      required: false,
+      default: true,
+    },
+    allowFreeInputs: {
+      // whether we allow the user to select a custom input
+      required: false,
+      default: false,
+    },
     tableItems: {
       required: true,
     },
@@ -319,13 +388,21 @@ export default {
       } else {
         document.removeEventListener("click", this.clickOutside)
         this.$emit("toggle-dropdown-open", { close: true })
+        this.inputText = ""
+      }
+    },
+    onInputClick() {
+      if (!this.isOpen) {
+        this.toggleOpen()
       }
     },
     scrollToItem() {
-      this.$refs.optionsContainer.$el.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      })
+      if (this.$refs.optionsContainer) {
+        this.$refs.optionsContainer.$el.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        })
+      }
     },
     onTemplateClick(item) {
       this.$emit("on-template-click", item)
@@ -337,6 +414,7 @@ export default {
       this.$emit("item-selected", item)
     },
     onSearch(value) {
+      this.inputText = value
       this.$emit("dropdown-search", value)
     },
     getItemLocation(value) {
@@ -351,11 +429,22 @@ export default {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return
       }
+      this.inputText = ""
       // 'close: true' is needed in case a box is open and another box is clicked on
       // so this one will close properly
       document.removeEventListener("click", this.clickOutside)
       this.$emit("toggle-dropdown-open", { close: true })
     },
+    onCustomNameClick() {
+      this.$emit("on-custom-input-name", this.inputText)
+      this.$emit("toggle-dropdown-open", { close: true })
+      this.inputText = ""
+    },
+  },
+  computed: {
+    getCustomName() {
+      return this.inputText
+    },
   },
   watch: {
     isOpen(newVal) {

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

@@ -325,7 +325,8 @@ const TableContainer = styled.table`
   .open-container {
     border: 1px solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
+    cursor: auto;
   }
 `