@eturnity/eturnity_reusable_components 7.18.0--EPDM-5518.4 → 7.18.0-EPDM-10335.1

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/clock_full.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM5.875 5.05243V2.125H4.125V5.92743L6.19061 7.47663L7.24061 6.07663L5.875 5.05243Z" fill="white"/>
-</svg>

package/src/components/markerItem/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <page-container>
-    <marker-container
-      :backgroundColor="backgroundColor"
-      :hasIcon="!!iconName"
-      :cursor="cursor"
-    >
-      <icon
-        v-if="!!iconName"
-        :name="iconName"
-        color="white"
-        size="10px"
-        :cursor="cursor"
-      />
-      <span>{{ label }}</span>
-    </marker-container>
-  </page-container>
-</template>
-
-<script>
-// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
-// To use:
-// <marker-item
-//   label="Label"
-//   backgroundColor="#ab5348"
-//   iconName="icon_name"
-//   cursor="pointer"
-// />
-
-import styled from 'vue-styled-components'
-import Icon from '../icon'
-import Modal from '../modals/modal'
-import PageTitle from '../pageTitle'
-import DeleteIcon from '../deleteIcon'
-import PageSubtitle from '../pageSubtitle'
-import MainButton from '../buttons/mainButton'
-
-const PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 14px;
-`
-
-const MarkerAttrs = {
-  backgroundColor: String,
-  hasIcon: Boolean,
-  cursor: String
-}
-const MarkerContainer = styled('div', MarkerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
-  grid-gap: 5px;
-  position: relative;
-  align-items: center;
-  padding: 2px 7px;
-  color: ${(props) => props.theme.colors.white};
-  background-color: ${(props) =>
-    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border: 1px solid
-    ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
-`
-
-// const IconContainer = styled.div`
-//   padding: 8px;
-//   line-height: 0;
-// `
-
-export default {
-  name: 'project-marker',
-  components: {
-    PageContainer,
-    MarkerContainer,
-    Icon
-  },
-  props: {
-    backgroundColor: {
-      required: false
-    },
-    iconName: {
-      required: false
-    },
-    label: {
-      required: true
-    },
-    cursor: {
-      required: false,
-      default: 'default'
-    }
-  }
-}
-</script>