@eturnity/eturnity_reusable_components 7.18.0-EPDM-10335.0 → 7.18.0-EPDM-10335.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.18.0-EPDM-10335.0",
+  "version": "7.18.0-EPDM-10335.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/card/index.vue

@@ -1,26 +1,26 @@
 <template>
-    <Wrapper
-      v-show="!isLoading"
-      :class="viewCardClass"
-      :width="width"
-      :minWidth="minWidth"
-    >
-      <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
-      <CardWrapper v-else>
-        <CardTitle :class="titleClass" >
-          {{ $gettext(title) }}
-          <et-popover
-            v-if="showPopover && popoverText !== ''"
-            :text="popoverText"
-          ></et-popover>
-        </CardTitle>
-        <slot></slot>
-      </CardWrapper>
-    </Wrapper>
+  <Wrapper
+    v-show="!isLoading"
+    :class="viewCardClass"
+    :width="width"
+    :minWidth="minWidth"
+  >
+    <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+    <CardWrapper v-else>
+      <CardTitle :class="titleClass">
+        {{ $gettext(title) }}
+        <et-popover
+          v-if="showPopover && popoverText !== ''"
+          :text="popoverText"
+        ></et-popover>
+      </CardTitle>
+      <slot></slot>
+    </CardWrapper>
+  </Wrapper>
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Spinner from '../spinner'
 
 const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
@@ -28,9 +28,10 @@ const Wrapper = styled('div', WrapperProps)`
   max-width: ${(props) => props.width};
   min-width: ${(props) => props.minWidth};
   padding: 20px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   border-radius: 4px;
-  background-color: ${props => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.white};
   height: 100%;
 `
 
@@ -42,7 +43,7 @@ const CardWrapper = styled('div')`
 const CardTitle = styled('p')`
   font-size: 14px;
   line-height: 1;
-  color: ${props => props.theme.colors.black};
+  color: ${(props) => props.theme.colors.black};
   font-weight: 700;
   margin-bottom: 10px;
 `
@@ -89,7 +90,7 @@ export default {
     Spinner,
     Wrapper,
     CardTitle,
-    CardWrapper,
+    CardWrapper
   }
 }
-</script>
+</script>

package/src/components/deleteIcon/index.vue

@@ -1,11 +1,7 @@
 <template>
-  <wrapper
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-    :isDisabled="isDisabled"
-  >
-    <delete-icon-red v-if="isHovered && !isDisabled" :hoverBg="hoverBg" />
-    <delete-icon-gray v-else />
+  <wrapper :isDisabled="isDisabled">
+    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
+    <delete-icon-gray class="icon-gray" />
   </wrapper>
 </template>
 
@@ -21,6 +17,28 @@ const Wrapper = styled('div', wrapperAttrs)`
   width: 30px;
   height: 30px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+
+  .icon-red {
+    display: none;
+  }
+
+  .icon-gray {
+    display: inline;
+  }
+
+  ${(props) =>
+    !props.isDisabled &&
+    `
+      &:hover {
+        .icon-red {
+          display: inline;
+        }
+
+        .icon-gray {
+          display: none;
+        }
+      }
+    `}
 `
 
 const IconImageAttrs = { hoverBg: String }
@@ -55,11 +73,6 @@ export default {
       required: false,
       default: ''
     }
-  },
-  data() {
-    return {
-      isHovered: false
-    }
   }
 }
 </script>

package/src/components/inputs/select/index.vue

@@ -627,9 +627,9 @@ export default {
       }
       await this.$nextTick()
       const isDisplayedAtBottom = await this.generateDropdownPosition()
-      await this.$nextTick()
       // If the dropdown menu is going to be displayed at the bottom,
       // we need reverify its position after a dom update (nextTick)
+      await this.$nextTick()
       if (isDisplayedAtBottom) this.generateDropdownPosition()
     },
     async generateDropdownPosition() {
@@ -666,6 +666,8 @@ export default {
       const windowHeight =
         window.innerHeight || document.documentElement.clientHeight
 
+      if (windowHeight <= 650) return true
+
       // using Math.floor because the offsets may contain decimals we are not going to consider here
       return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
     },
@@ -720,7 +722,9 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$el.childElementCount
+        return this.$refs.dropdown.$el.childElementCount > 1
+          ? this.$refs.dropdown.$el.childElementCount
+          : this.$refs.dropdown.$el.children[0].childElementCount
       }
 
       return 0
@@ -739,6 +743,20 @@ export default {
         this.dropdownPosition.left !== null &&
         (!this.isSearchable || this.isSearchable)
       )
+    },
+    isMobileDevice() {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera
+      const touchCapable =
+        'ontouchstart' in window ||
+        navigator.maxTouchPoints > 0 ||
+        navigator.msMaxTouchPoints > 0
+
+      return (
+        /Android/i.test(userAgent) ||
+        /iPad|iPhone|iPod/.test(userAgent) ||
+        (/Macintosh/.test(userAgent) && touchCapable) ||
+        /windows phone/i.test(userAgent)
+      )
     }
   },
   watch: {
@@ -760,7 +778,7 @@ export default {
       }
       if (val && this.isSearchable) {
         this.$nextTick(() => {
-          if (this.$refs.searchInput) {
+          if (this.$refs.searchInput && !this.isMobileDevice) {
             this.$refs.searchInput.$el.querySelector('input').focus()
           }
         })

package/src/components/pagination/index.vue

@@ -75,7 +75,7 @@ import icon from '../icon'
 import theme from '@/assets/theme.js'
 
 const paginationWrapper = styled.nav`
-  color: ${(props) => props.theme.brightBlue};
+  color: ${(props) => props.theme.colors.brightBlue};
   font-size: 13px;
   display: flex;
   flex-wrap: wrap;
@@ -95,7 +95,7 @@ const paginationLink = styled.div`
 
   &.active {
     color: #fff;
-    background-color: ${(props) => props.theme.brightBlue};
+    background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }

package/src/components/tableDropdown/index.vue

@@ -40,12 +40,7 @@
             "
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <img
-              :src="require('../../assets/icons/file_icon.png')"
-              alt="icon"
-              width="12"
-              height="16"
-            />
+            <img :src="fileIcon" alt="icon" width="12" height="16" />
             <div>{{ item.value }}</div>
           </template-link>
           <no-template v-if="item.type && item.type === 'no-template'">
@@ -182,6 +177,7 @@ import SearchInput from '../inputs/searchInput'
 import InputText from '../inputs/inputText'
 import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
 import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
+import fileIconPng from '../../assets/icons/file_icon.png'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -494,7 +490,8 @@ export default {
       inputText: '',
       wasClicked: false, // prevents custom-name from being triggered on the <input-text />
       dynamicWidth: [], // for numbers
-      dynamicGridWidth: [] // for grid values
+      dynamicGridWidth: [], // for grid values
+      fileIcon: fileIconPng
     }
   },
   methods: {
@@ -516,7 +513,7 @@ export default {
         })
         this.$emit('toggle-dropdown-open', { close: false })
         this.$nextTick(() => {
-          this.$refs.searchInput.$el.children[0].children[0].focus()
+          this.$refs.searchInput.$el.children[0].children[1].focus()
         })
       } else {
         document.removeEventListener('click', this.clickOutside)