@eturnity/eturnity_reusable_components 1.2.26--EPDM-3834.1 → 1.2.26--EPDM-3834.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.26--EPDM-3834.1",
+  "version": "1.2.26--EPDM-3834.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/tableDropdown/index.vue

@@ -12,7 +12,7 @@
         ref="dropdownItem"
         :isNested="isNested"
         :class="{
-          'table-dropdown-item': item.type !== 'input',
+          'table-dropdown-item': item.type !== 'input'
         }"
       >
         <nested-container :isNested="isNested">
@@ -32,7 +32,7 @@
               (item.value === '' || item.value === '-')
             "
             :key="idx"
-            >{{ $gettext("Use template...") }}</template-button
+            >{{ $gettext('Use template...') }}</template-button
           >
           <template-link
             v-else-if="
@@ -49,7 +49,7 @@
             <div>{{ item.value }}</div>
           </template-link>
           <no-template v-if="item.type && item.type === 'no-template'">
-            {{ $gettext("No main component template") }}
+            {{ $gettext('No main component template') }}
           </no-template>
           <input-container
             v-if="item.type === 'input'"
@@ -82,7 +82,7 @@
           </text-container>
         </nested-container>
       </component-item>
-      <arrow-container class="arrow-container">
+      <arrow-container class="arrow-container" :isDisabled="disabled">
         <arrow-wrapper :showArchived="showArchived">
           <et-popover
             v-if="showArchived"
@@ -122,7 +122,7 @@
             </search-container>
             <spinner v-if="optionsLoading" />
             <empty-text v-else-if="!optionsLoading && !optionItems.length">
-              {{ emptyText ? emptyText : $gettext("No components found.") }}
+              {{ emptyText ? emptyText : $gettext('No components found.') }}
             </empty-text>
             <options-item
               v-else
@@ -136,19 +136,19 @@
             >
               <template v-for="(option, idx) in optionsDisplay">
                 <span v-if="option !== 'template'" :key="idx">
-                  {{ !!item[option] ? item[option] : "-" }}
+                  {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   :key="idx"
-                  >{{ $gettext("Use template...") }}</template-button
+                  >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
                   v-else-if="option === 'template' && !item.has_template"
                   :key="idx"
                 >
-                  {{ $gettext("No main component template") }}
+                  {{ $gettext('No main component template') }}
                 </no-template>
               </template>
             </options-item>
@@ -159,7 +159,7 @@
           >
             <custom-name>{{ getCustomName }}</custom-name>
             <custom-subtext
-              >({{ $gettext("custom_component") }})</custom-subtext
+              >({{ $gettext('custom_component') }})</custom-subtext
             >
           </custom-container>
         </options-container>
@@ -188,18 +188,18 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-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"
+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, isOpen: Boolean }
-const DropdownRow = styled("div", rowAttrs)`
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+const DropdownRow = styled('div', rowAttrs)`
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   display: contents;
 
   input {
-    cursor: ${(props) => (!props.isOpen ? "pointer !important" : "inherit")};
+    cursor: ${(props) => (!props.isOpen ? 'pointer !important' : 'inherit')};
   }
 
   .input-placeholder {
@@ -209,8 +209,8 @@ const DropdownRow = styled("div", rowAttrs)`
 `
 
 const ItemAttrs = { isNested: Boolean }
-const ComponentItem = styled("td", ItemAttrs)`
-  padding-left: ${(props) => (props.isNested ? "14px !important" : "0")};
+const ComponentItem = styled('td', ItemAttrs)`
+  padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: 0 !important;
@@ -234,7 +234,7 @@ const ComponentItem = styled("td", ItemAttrs)`
 `
 
 const containerAttrs = { colSpan: Number, width: String }
-const ComponentContainer = styled("div", containerAttrs)`
+const ComponentContainer = styled('div', containerAttrs)`
   display: contents;
   align-items: center;
   background-color: ${(props) => props.theme.colors.white};
@@ -254,11 +254,13 @@ const ArrowUp = styled.img`
   transition: transform 150ms ease;
 `
 
-const ArrowContainer = styled.td`
+const ArrowAttrs = { isDisabled: Boolean }
+const ArrowContainer = styled('td', ArrowAttrs)`
   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;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed !important' : 'auto')};
 
   @media not all and (min-resolution: 0.001dpcm) {
     @supports (-webkit-appearance: none) {
@@ -274,22 +276,22 @@ const ArrowContainer = styled.td`
 `
 
 const arrowAttrs = { showArchived: Boolean }
-const ArrowWrapper = styled("div", arrowAttrs)`
+const ArrowWrapper = styled('div', arrowAttrs)`
   display: grid;
   grid-template-columns: ${(props) =>
-    props.showArchived ? "auto auto" : "auto"};
+    props.showArchived ? 'auto auto' : 'auto'};
   align-items: center;
   justify-items: center;
   height: 100%;
 `
 
 const optionsAttrs = { top: Number, left: Number }
-const OptionsContainer = styled("div", optionsAttrs)`
+const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  top: ${(props) => props.top + "px"};
-  left: ${(props) => props.left + "px"};
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.left + 'px'};
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -319,7 +321,7 @@ const OptionsWrapper = styled.div`
   min-width: 400px; // kind of an arbitrary number until we know all use cases
 `
 
-const OptionsItem = styled("div", containerAttrs)`
+const OptionsItem = styled('div', containerAttrs)`
   display: grid;
   /* grid-template-columns: 1fr repeat(
       ${(props) => props.colSpan},
@@ -409,21 +411,21 @@ const TextContainer = styled.div`
 
 const NestedIcon = styled.div`
   background-image: ${() =>
-    `url(${require("../../assets/icons/subposition_marker.svg")})`};
+    `url(${require('../../assets/icons/subposition_marker.svg')})`};
   height: 10px;
   width: 6px;
 `
 
 const NestedAttrs = { isNested: Boolean }
-const NestedContainer = styled("div", NestedAttrs)`
+const NestedContainer = styled('div', NestedAttrs)`
   display: grid;
   grid-gap: 5px;
-  grid-template-columns: ${(props) => (props.isNested ? "auto 1fr" : "1fr")};
+  grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
   align-items: center;
 `
 
 export default {
-  name: "table-dropdown",
+  name: 'table-dropdown',
   components: {
     DropdownRow,
     ComponentItem,
@@ -449,64 +451,64 @@ export default {
     ArrowContainer,
     TextContainer,
     NestedIcon,
-    NestedContainer,
+    NestedContainer
   },
   props: {
     colSpan: {
       required: false,
-      default: 1,
+      default: 1
     },
     customInputDisabled: {
       // whether the input field should be disabled
       required: false,
-      default: true,
+      default: true
     },
     allowFreeInputs: {
       // whether we allow the user to select a custom input
       required: false,
-      default: false,
+      default: false
     },
     tableItems: {
-      required: true,
+      required: true
     },
     showArchived: {
       required: false,
-      default: false,
+      default: false
     },
     isOpen: {
       required: true,
-      default: false,
+      default: false
     },
     optionsLoading: {
       required: false,
-      default: false,
+      default: false
     },
     emptyText: {
       required: false,
-      default: null,
+      default: null
     },
     optionItems: {
-      required: true,
+      required: true
     },
     optionsDisplay: {
       required: true,
-      default: [], // should be like ['display_name', 'company_item_number', 'description']
+      default: [] // should be like ['display_name', 'company_item_number', 'description']
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     isNested: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
-      inputText: "",
+      inputText: '',
       wasClicked: false, // prevents custom-name from being triggered on the <input-text />
       dynamicWidth: [], // for numbers
-      dynamicGridWidth: [], // for grid values
+      dynamicGridWidth: [] // for grid values
     }
   },
   methods: {
@@ -516,19 +518,19 @@ export default {
       }
       this.wasClicked = false
       if (!this.isOpen) {
-        document.addEventListener("click", this.clickOutside)
-        this.$emit("dropdown-search", "")
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
         this.$nextTick(() => {
           this.scrollToItem()
         })
-        this.$emit("toggle-dropdown-open", { close: false })
+        this.$emit('toggle-dropdown-open', { close: false })
         this.$nextTick(() => {
           this.$refs.searchInput.$el.children[0].children[0].focus()
         })
       } else {
-        document.removeEventListener("click", this.clickOutside)
-        this.$emit("toggle-dropdown-open", { close: true })
-        this.inputText = ""
+        document.removeEventListener('click', this.clickOutside)
+        this.$emit('toggle-dropdown-open', { close: true })
+        this.inputText = ''
       }
     },
     onInputClick() {
@@ -539,29 +541,29 @@ export default {
     scrollToItem() {
       if (this.$refs.optionsContainer) {
         this.$refs.optionsContainer.$el.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
+          behavior: 'smooth',
+          block: 'center'
         })
       }
     },
     onTemplateClick(item) {
-      this.$emit("on-template-click", item)
+      this.$emit('on-template-click', item)
     },
     onSelectedTemplateClick(item) {
-      this.$emit("on-selected-template-click", item)
+      this.$emit('on-selected-template-click', item)
     },
     onItemClick(item) {
       this.wasClicked = true
-      this.$emit("item-selected", item)
+      this.$emit('item-selected', item)
     },
     onSearch(value) {
       this.inputText = value
-      this.$emit("dropdown-search", value)
+      this.$emit('dropdown-search', value)
     },
     getItemLocation(value) {
       let ref = this.$refs.dropdownItem[0]
       let location = ref.$el.getBoundingClientRect()[value]
-      if (value === "top") {
+      if (value === 'top') {
         location = location + window.scrollY + 40
       }
       return location
@@ -570,34 +572,34 @@ export default {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return
       }
-      this.inputText = ""
+      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 })
+      document.removeEventListener('click', this.clickOutside)
+      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 = ""
+      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)
+      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")
+            header === 'template'
+              ? this.$gettext('No main component template')
               : item[header]
 
-          value = !!value ? value : ""
+          value = !!value ? value : ''
 
           if (
             this.optionsDisplay.length &&
@@ -605,27 +607,27 @@ export default {
               value.length > this.dynamicWidth[index])
           ) {
             if (Array.isArray(this.dynamicGridWidth)) {
-              this.dynamicGridWidth[index] = value.length + "ch"
+              this.dynamicGridWidth[index] = value.length + 'ch'
             }
             this.dynamicWidth[index] = value.length
           }
         })
       })
       if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
-        this.dynamicGridWidth = this.dynamicGridWidth.join(" ")
+        this.dynamicGridWidth = this.dynamicGridWidth.join(' ')
       }
-    },
+    }
   },
   computed: {
     getCustomName() {
       return this.inputText
-    },
+    }
   },
   watch: {
     isOpen(newVal) {
       if (newVal) {
-        document.addEventListener("click", this.clickOutside)
-        this.$emit("dropdown-search", "")
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
         this.$nextTick(() => {
           this.$refs.searchInput.$el.children[0].children[0].focus()
         })
@@ -638,7 +640,7 @@ export default {
       if (val && val.length) {
         this.setDropdownWidth(val)
       }
-    },
-  },
+    }
+  }
 }
 </script>