@eturnity/eturnity_reusable_components 7.12.7-EPDM-10335.0 → 7.12.7-EPDM-10528.0

package/src/components/tableDropdown/index.vue

@@ -53,7 +53,7 @@
           </no-template>
           <input-container
             v-if="item.type === 'input'"
-            @click.stop="onInputClick()"
+            @click.native.stop="onInputClick()"
           >
             <text-container
               v-if="customInputDisabled"
@@ -93,11 +93,16 @@
             triggerType="hover"
           ></et-popover>
           <arrow-down
-            @click.stop="toggleOpen"
+            @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-up @click.stop="toggleOpen" v-else />
         </arrow-wrapper>
         <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
@@ -122,18 +127,20 @@
               :key="index"
               @click="onItemClick(item)"
               :tabindex="0"
-              @keyup.enter="onItemClick(item)"
+              @keyup.enter.native="onItemClick(item)"
             >
-              <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <span v-if="option !== 'template'">
+              <template v-for="(option, idx) in optionsDisplay">
+                <span v-if="option !== 'template'" :key="idx">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}
@@ -176,12 +183,10 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-import styled from 'vue3-styled-components'
-import Spinner from '../spinner'
-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 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)`
@@ -232,8 +237,9 @@ const ComponentContainer = styled('div', containerAttrs)`
   padding: 5px 4px;
 `
 
-const ArrowDown = styled(CollapseArrowIcon)`
+const ArrowDown = styled.img`
   width: 8px;
+  transform: rotate(0deg);
   transition: transform 150ms ease;
 `
 
@@ -397,7 +403,9 @@ const TextContainer = styled.div`
   align-items: center;
 `
 
-const NestedIcon = styled(SubpositionMarkerIcon)`
+const NestedIcon = styled.div`
+  background-image: ${() =>
+    `url(${require('../../assets/icons/subposition_marker.svg')})`};
   height: 10px;
   width: 6px;
 `
@@ -575,28 +583,30 @@ export default {
     },
     setDropdownWidth(options) {
       this.dynamicWidth = []
-
-      options.forEach((item) => {
-        this.optionsDisplay.forEach((header, index) => {
+      options.map((item) => {
+        this.optionsDisplay.map((header, index) => {
           let value =
             header === 'template'
               ? this.$gettext('No main component template')
               : item[header]
+
           value = value ? value : ''
 
-          // Update dynamicWidth with the maximum value
           if (
-            !this.dynamicWidth[index] ||
-            value.length > this.dynamicWidth[index]
+            this.optionsDisplay.length &&
+            (this.dynamicWidth.length < this.optionsDisplay.length ||
+              value.length > this.dynamicWidth[index])
           ) {
+            if (Array.isArray(this.dynamicGridWidth)) {
+              this.dynamicGridWidth[index] = value.length + 'ch'
+            }
             this.dynamicWidth[index] = value.length
           }
         })
       })
-
-      this.dynamicGridWidth = this.dynamicWidth
-        .map((width) => width + 'ch')
-        .join(' ')
+      if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
+        this.dynamicGridWidth = this.dynamicGridWidth.join(' ')
+      }
     }
   },
   computed: {
@@ -617,12 +627,9 @@ export default {
         })
       }
     },
-    optionItems: {
-      immediate: true,
-      handler(val) {
-        if (val && val.length) {
-          this.setDropdownWidth(val)
-        }
+    optionItems(val) {
+      if (val && val.length) {
+        this.setDropdownWidth(val)
       }
     }
   }

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

@@ -161,7 +161,7 @@
 
 <script>
 import draggable from "vuedraggable"
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"

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

@@ -29,12 +29,8 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
-import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
-import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
-import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
-import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
 
 const pageContainerProps = {
   tableHeight: String,
@@ -126,7 +122,6 @@ const TableContainer = styled('table', containerAttrs)`
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
-        .select-button,
         .arrow-container,
         .input-placeholder,
         .table-dropdown-item {
@@ -327,7 +322,8 @@ const TableContainer = styled('table', containerAttrs)`
       height: 16px;
       cursor: grab;
       background-position: center;
-      background-image: ${() => `url(${dragIconSvg})`};
+      background-image: ${() =>
+        `url(${require('../../../assets/icons/drag_icon.svg')})`};
 
       &:active {
         cursor: grabbing;
@@ -339,7 +335,8 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       margin-left: 10px;
-      background-image: ${() => `url(${subpositionIconSvg})`};
+      background-image: ${() =>
+        `url(${require('../../../assets/icons/subposition_icon.svg')})`};
     }
 
     .arrow-down {
@@ -347,7 +344,8 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() => `url(${arrowDownSvg})`};
+      background-image: ${() =>
+        `url(${require('../../../assets/icons/arrow_down.svg')})`};
     }
 
     .arrow-up {
@@ -355,7 +353,8 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() => `url(${arrowUpRedSvg})`};
+      background-image: ${() =>
+        `url(${require('../../../assets/icons/arrow_up_red.svg')})`};
     }
   }
 

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

@@ -29,7 +29,7 @@
               </table-item>
               <icons-container v-if="showIconsContainer">
                 <delete-icon
-                  @click="$emit('on-click-delete', index)"
+                  @click.native="$emit('on-click-delete', index)"
                   color="gray"
                 />
               </icons-container>
@@ -45,7 +45,7 @@
 // This is a read only table. Pass it data, and it displays it
 // ToDo: add this to storybook
 // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import DeleteIcon from '../../deleteIcon'
 import Spinner from '../../spinner'
 

package/src/components/threeDots/index.vue

@@ -123,7 +123,7 @@
 //         },
 //       ],
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Spinner from '../spinner'
 
 const PageContainerAttrs = {

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,108 @@
 <template>
-  <wrapper :width="width" :height="height" :fit="fit">
-    <img :src="src" />
-    <iconWrapper>
-      <icon name="play" :size="playIconSize" :color="playIconColor" />
-    </iconWrapper>
-  </wrapper>
-</template>
-
-<script>
-// import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
-//  How to use:
-//<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-//   playIconColor="red"
-//   playIconSize="20px"
-//   width="400px"
-//   height="600px"
-//   />
-
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
-
-const wrapperAttrs = { width: String, height: String, fit: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  position: relative;
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  & img {
-    object-fit: ${(props) => props.fit};
-    width: ${(props) => props.width};
-    height: ${(props) => props.height};
-  }
-`
-const iconWrapper = styled('div')`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
+    <wrapper :width="width" :height="height" :fit="fit">
+      <img :src="src">
+      <iconWrapper>
+        <icon
+            name="play"
+            :size="playIconSize"
+            :color="playIconColor"
+            />
+        </iconWrapper>
+    </wrapper>
+  </template>
+  
+  <script>
+    // import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
+    //  How to use:
+    //<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
+    //   playIconColor="red"
+    //   playIconSize="20px"
+    //   width="400px"
+    //   height="600px"
+    //   />
+  
+  import styled from 'vue-styled-components'
+  import Icon from '../icon'
+  
+  const wrapperAttrs = { width: String, height:String,fit:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
+    width:${props=>props.width};
+    height:${props=>props.height};
+    & img{
+        object-fit:${props=>props.fit};
+        width:${props=>props.width};
+        height:${props=>props.height};
+    }
+  `  
+  const iconWrapper = styled('div')`
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    justify-content:center;
+    align-items: center;
+  `  
 
-export default {
-  name: 'VideoThumbnail',
-  components: {
-    Wrapper,
-    Icon,
-    iconWrapper
-  },
-  props: {
-    src: {
-      required: true
+  export default {
+    name: 'VideoThumbnail',
+    components: {
+        Wrapper,
+        Icon,
+        iconWrapper
     },
-    fit: {
-      required: false,
-      default: 'cover'
+    props: {
+        src:{
+            required: true,
+        },
+        fit:{
+            required: false,
+            default: 'cover'
+        },
+        width: {
+            required: false,
+            default: '300px'
+        },
+        height: {
+            required: false,
+            default: '200px'
+        },
+        playIconSize:{
+            required: false,
+            default: '50px'
+        },
+        playIconColor:{
+            required: false,
+            default: 'blue'
+        }
     },
-    width: {
-      required: false,
-      default: '300px'
+    data() {
+      return {
+        isOpenByClick:false
+      }
     },
-    height: {
-      required: false,
-      default: '200px'
+    methods:{
+        clickOutside(event) {
+            if (this.openingMode!="click") return
+            if (
+                this.$refs.dropdown.$el == event.target ||
+                this.$refs.dropdown.$el.contains(event.target)
+            ) {
+                return
+            } else {
+                this.isOpenByClick=false
+            }
+        },
     },
-    playIconSize: {
-      required: false,
-      default: '50px'
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
     },
-    playIconColor: {
-      required: false,
-      default: 'blue'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  methods: {
-    clickOutside(event) {
-      if (this.openingMode != 'click') return
-      if (
-        this.$refs.dropdown.$el == event.target ||
-        this.$refs.dropdown.$el.contains(event.target)
-      ) {
-        return
-      } else {
-        this.isOpenByClick = false
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
   }
-}
-</script>
+  </script>
+  

package/src/main.js

@@ -1,6 +1,13 @@
-import App from './App.vue'
-import { createApp } from 'vue'
+import Vue from "vue"
+import App from "./App.vue"
+import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
-const app = createApp(App)
+Vue.config.productionTip = false
 
-app.mount('#app')
+Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app")

package/src/components/icon/iconCache.js

@@ -1,23 +0,0 @@
-const iconCache = {}
-
-export const fetchIcon = async (fileName) => {
-  if (iconCache[fileName]) {
-    return iconCache[fileName]
-  }
-
-  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
-  const fetchUrl = new URL(
-    `../../assets/svgIcons/${fileName}.svg`,
-    import.meta.url
-  ).href
-
-  try {
-    const response = await fetch(fetchUrl)
-    const rawFile = await response.text()
-    iconCache[fileName] = rawFile
-
-    return rawFile
-  } catch (error) {
-    console.error(`Failed to load ${fileName}.svg`)
-  }
-}