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

package/src/components/tableDropdown/index.vue

@@ -53,7 +53,7 @@
           </no-template>
           <input-container
             v-if="item.type === 'input'"
-            @click.native.stop="onInputClick()"
+            @click.stop="onInputClick()"
           >
             <text-container
               v-if="customInputDisabled"
@@ -93,16 +93,11 @@
             triggerType="hover"
           ></et-popover>
           <arrow-down
-            @click.native.stop="toggleOpen"
+            @click.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>
@@ -127,20 +122,18 @@
               :key="index"
               @click="onItemClick(item)"
               :tabindex="0"
-              @keyup.enter.native="onItemClick(item)"
+              @keyup.enter="onItemClick(item)"
             >
-              <template v-for="(option, idx) in optionsDisplay">
-                <span v-if="option !== 'template'" :key="idx">
+              <template v-for="(option, idx) in optionsDisplay" :key="idx">
+                <span v-if="option !== 'template'">
                   {{ !!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') }}
@@ -183,10 +176,12 @@
 //   :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 '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'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -237,9 +232,8 @@ const ComponentContainer = styled('div', containerAttrs)`
   padding: 5px 4px;
 `
 
-const ArrowDown = styled.img`
+const ArrowDown = styled(CollapseArrowIcon)`
   width: 8px;
-  transform: rotate(0deg);
   transition: transform 150ms ease;
 `
 
@@ -403,9 +397,7 @@ const TextContainer = styled.div`
   align-items: center;
 `
 
-const NestedIcon = styled.div`
-  background-image: ${() =>
-    `url(${require('../../assets/icons/subposition_marker.svg')})`};
+const NestedIcon = styled(SubpositionMarkerIcon)`
   height: 10px;
   width: 6px;
 `
@@ -583,30 +575,28 @@ export default {
     },
     setDropdownWidth(options) {
       this.dynamicWidth = []
-      options.map((item) => {
-        this.optionsDisplay.map((header, index) => {
+
+      options.forEach((item) => {
+        this.optionsDisplay.forEach((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.optionsDisplay.length &&
-            (this.dynamicWidth.length < this.optionsDisplay.length ||
-              value.length > this.dynamicWidth[index])
+            !this.dynamicWidth[index] ||
+            value.length > this.dynamicWidth[index]
           ) {
-            if (Array.isArray(this.dynamicGridWidth)) {
-              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.dynamicWidth
+        .map((width) => width + 'ch')
+        .join(' ')
     }
   },
   computed: {
@@ -627,9 +617,12 @@ export default {
         })
       }
     },
-    optionItems(val) {
-      if (val && val.length) {
-        this.setDropdownWidth(val)
+    optionItems: {
+      immediate: true,
+      handler(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 "vue-styled-components"
+import styled from "vue3-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,8 +29,12 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue-styled-components'
+import styled from 'vue3-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,
@@ -122,6 +126,7 @@ 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 {
@@ -322,8 +327,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 16px;
       cursor: grab;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/drag_icon.svg')})`};
+      background-image: ${() => `url(${dragIconSvg})`};
 
       &:active {
         cursor: grabbing;
@@ -335,8 +339,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       margin-left: 10px;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/subposition_icon.svg')})`};
+      background-image: ${() => `url(${subpositionIconSvg})`};
     }
 
     .arrow-down {
@@ -344,8 +347,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/arrow_down.svg')})`};
+      background-image: ${() => `url(${arrowDownSvg})`};
     }
 
     .arrow-up {
@@ -353,8 +355,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/arrow_up_red.svg')})`};
+      background-image: ${() => `url(${arrowUpRedSvg})`};
     }
   }
 

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

@@ -29,7 +29,7 @@
               </table-item>
               <icons-container v-if="showIconsContainer">
                 <delete-icon
-                  @click.native="$emit('on-click-delete', index)"
+                  @click="$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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import DeleteIcon from '../../deleteIcon'
 import Spinner from '../../spinner'
 

package/src/components/threeDots/index.vue

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

package/src/components/videoThumbnail/index.vue

@@ -1,108 +1,103 @@
 <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 '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;
-  `  
+  <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'
 
-  export default {
-    name: 'VideoThumbnail',
-    components: {
-        Wrapper,
-        Icon,
-        iconWrapper
+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
     },
-    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'
-        }
+    fit: {
+      required: false,
+      default: 'cover'
     },
-    data() {
-      return {
-        isOpenByClick:false
-      }
+    width: {
+      required: false,
+      default: '300px'
     },
-    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
-            }
-        },
+    height: {
+      required: false,
+      default: '200px'
     },
-    mounted() {
-        document.addEventListener('click', this.clickOutside)
-    },
-    beforeDestroy() {
-        document.removeEventListener('click', this.clickOutside)
+    playIconSize: {
+      required: false,
+      default: '50px'
     },
+    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,13 +1,6 @@
-import Vue from "vue"
-import App from "./App.vue"
-import VueCompositionAPI from "@vue/composition-api"
-import vClickOutside from 'v-click-outside'
+import App from './App.vue'
+import { createApp } from 'vue'
 
-Vue.config.productionTip = false
+const app = createApp(App)
 
-Vue.use(VueCompositionAPI)
-Vue.use(vClickOutside)
-
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app")
+app.mount('#app')

package/src/assets/svgIcons/bexio.svg

@@ -1,4 +0,0 @@
-<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.462 8.46H12.894C12.7848 8.46 12.697 8.4327 12.6307 8.37809C12.5683 8.32349 12.5176 8.26108 12.4786 8.19087L10.5186 4.94378C10.4874 5.04129 10.4504 5.12514 10.4075 5.19535L8.52943 8.19087C8.48263 8.25718 8.42802 8.31958 8.36562 8.37809C8.30711 8.4327 8.2291 8.46 8.13159 8.46H6.66309L9.47138 4.10714L6.77425 0H8.34221C8.45143 0 8.52943 0.0156017 8.57624 0.0468051C8.62694 0.0741079 8.67375 0.120913 8.71665 0.18722L10.6415 3.28805C10.6805 3.19054 10.7273 3.09303 10.7819 2.99552L12.5488 0.216473C12.5917 0.142365 12.6385 0.0877595 12.6892 0.052656C12.7399 0.017552 12.8043 0 12.8823 0H14.3859L11.6654 4.04278L14.462 8.46Z" fill="#263238"/>
-<path d="M3.16519 7.23137C3.45772 7.23137 3.70344 7.19627 3.90237 7.12606C4.10129 7.05585 4.25925 6.96224 4.37627 6.84523C4.49718 6.72822 4.58299 6.5917 4.63369 6.43569C4.6883 6.27967 4.7156 6.1139 4.7156 5.93838C4.7156 5.75506 4.68635 5.59124 4.62784 5.44693C4.56934 5.29871 4.47768 5.1739 4.35286 5.07249C4.22805 4.96718 4.06618 4.88722 3.86726 4.83261C3.67224 4.77801 3.43627 4.75071 3.15934 4.75071H1.57382V7.23137H3.16519ZM1.57382 1.21693V3.66249H2.82585C3.36411 3.66249 3.76975 3.56498 4.04278 3.36996C4.31971 3.17494 4.45817 2.86486 4.45817 2.43971C4.45817 1.99896 4.33336 1.68498 4.08373 1.49776C3.83411 1.31054 3.44407 1.21693 2.91361 1.21693H1.57382ZM2.91361 0C3.46747 0 3.94137 0.0526557 4.33531 0.157967C4.72925 0.263278 5.05104 0.413444 5.30066 0.608465C5.55419 0.803486 5.73946 1.03946 5.85647 1.31639C5.97349 1.59332 6.03199 1.90535 6.03199 2.25249C6.03199 2.45141 6.00274 2.64253 5.94423 2.82585C5.88573 3.00527 5.79407 3.17494 5.66925 3.33485C5.54834 3.49087 5.39232 3.63324 5.2012 3.76195C5.01398 3.89066 4.78971 3.99988 4.52838 4.08959C5.69071 4.35091 6.27187 4.97888 6.27187 5.97349C6.27187 6.33232 6.20361 6.66386 6.0671 6.96809C5.93058 7.27232 5.73166 7.5356 5.47033 7.75793C5.209 7.97635 4.88722 8.14797 4.50498 8.27278C4.12274 8.39759 3.68589 8.46 3.19444 8.46H0V0H2.91361Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/data_transfer.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H6V16H2V2H16V16H12V18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0ZM9 6L5 10H8V18H10V10H13L9 6Z" fill="#263238"/>
-</svg>