@eturnity/eturnity_reusable_components 7.8.6-EPDM-9779.2 → 7.8.6-EPDM-7951.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;
 `
@@ -604,7 +596,7 @@ export default {
           }
         })
       })
-      if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
+      if (Array.isArray(this.dynamicGridWidth)) {
         this.dynamicGridWidth = this.dynamicGridWidth.join(' ')
       }
     }
@@ -627,9 +619,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,7 +29,7 @@
 <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'
 
 const pageContainerProps = {
@@ -122,6 +122,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 {

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

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M245.7,232.4c1,7.7-2.4,11.3-10.3,10.8l-62.1-6.9c-4.9-0.5-8-1.9-9.3-4.1c-1.3-2.2-0.6-4.7,2.3-7.5c1.9-1.6,4.1-3.9,6.8-6.8c2.7-2.9,5-5.2,6.8-7c1.9-2,2.4-3.8,1.8-5.4c-0.7-1.6-2-3.5-4-5.7c-4.7-4.4-9-8.5-12.9-12.1c-3.9-3.6-8.2-7.8-12.9-12.6c-1-1-2-2-3-3.2c-1-1.2-1.8-2.4-2.3-3.8c-0.5-1.4-0.6-2.9-0.2-4.4c0.3-1.6,1.4-3.3,3.3-5.1c1-1,1.9-1.9,2.5-2.6c0.7-0.7,1.3-1.4,2-2c0.7-0.6,1.4-1.2,2.1-2c0.7-0.7,1.7-1.8,2.9-3.1c3.4-3.3,6.5-4.7,9.3-4.2c2.9,0.5,6,2.4,9.3,5.7c3.4,3.3,6.8,6.6,10.3,10c3.5,3.4,7.5,7.2,11.8,11.5c3.2,3,5.9,5,8.2,6.2c2.3,1.2,4.5,0.6,6.7-1.5c1.5-1.5,3.4-3.3,5.7-5.3c2.3-2,4.2-3.9,5.9-5.5c2.9-2.8,5.4-3.9,7.7-3.2c2.3,0.7,3.7,3.1,4.2,7.4L245.7,232.4L245.7,232.4L245.7,232.4z M11.1,24c-0.5-4.3,0-7.2,1.6-8.9c1.6-1.6,4.4-2.3,8.5-2L83.2,20c5.1,0.5,8.2,1.9,9.5,4.1c1.3,2.2,0.5,4.7-2.4,7.5c-1.7,1.6-3.7,3.8-6.2,6.4c-2.4,2.6-4.6,4.8-6.4,6.6c-2,2-2.7,3.8-2,5.4c0.7,1.6,2.1,3.5,4.3,5.7c2.2,2.3,4.2,4.3,6.2,6c1.9,1.7,3.8,3.4,5.7,5.2c1.9,1.7,3.8,3.6,5.8,5.5l6.3,6.2c1,1,2,2.1,2.9,3.4c0.9,1.3,1.6,2.7,2,4.2c0.4,1.5,0.4,3-0.1,4.7c-0.5,1.6-1.6,3.3-3.3,4.9l-2.8,2.7c-0.7,0.7-1.3,1.3-1.9,2c-0.6,0.7-1.3,1.3-2.1,2l-2.8,3c-3.4,3.3-6.3,4.5-8.7,3.7c-2.4-0.8-5.3-2.9-8.7-6.2c-3.4-3.3-6.5-6.4-9.6-9.2c-3-2.9-6.7-6.5-11.1-10.7c-3-3-5.7-5-8.1-6.2c-2.4-1.2-4.6-0.7-6.8,1.5c-1.5,1.6-3.6,3.7-6.3,6c-2.7,2.4-4.9,4.4-6.5,6c-2.9,2.8-5.4,3.9-7.6,3.2c-2.2-0.7-3.5-3.1-4-7.4L11.1,24L11.1,24L11.1,24z M234.8,12.9c4.4-0.5,7.4,0,9.1,1.6c1.7,1.6,2.4,4.4,2,8.5l-7.1,60.6c-0.5,4.8-1.9,7.8-4.2,9.1c-2.3,1.3-4.8,0.5-7.7-2.5c-1.7-1.6-3.9-3.7-6.5-6c-2.7-2.4-5-4.5-6.8-6.3c-2-1.8-3.9-2.4-5.5-1.9c-1.7,0.6-3.6,1.9-5.8,4.1c-4.5,4.4-8.5,8.5-12,12.1c-3.4,3.6-7.5,7.7-12.2,12.3c-1,1-2.2,1.9-3.5,2.8c-1.3,0.9-2.8,1.6-4.3,2c-1.5,0.4-3.1,0.4-4.8-0.1s-3.4-1.6-5-3.4c-1-1-1.9-1.8-2.6-2.5s-1.5-1.3-2.1-2c-0.7-0.7-1.4-1.3-2.1-2c-0.7-0.6-1.7-1.6-2.9-3c-3.4-3.3-4.7-6.2-4-8.6c0.7-2.5,2.8-5.3,6.3-8.6l9.6-9.8c3.2-3.3,7-7.1,11.3-11.3c3.2-3,5.4-5.6,6.6-7.9c1.2-2.3,0.6-4.4-1.8-6.4c-1.5-1.5-3.4-3.5-5.8-6c-2.4-2.6-4.4-4.6-6-6.3c-2.9-2.8-3.9-5.2-3.3-7.4c0.7-2.1,3.2-3.4,7.6-3.9L234.8,12.9L234.8,12.9L234.8,12.9z M21.2,241.7c-4.2,0.3-7.2-0.3-9-1.9c-1.8-1.6-2.5-4.3-2.1-8.3l7.1-60.6c0.5-4.9,1.9-8,4.2-9.2c2.3-1.2,4.8-0.5,7.7,2.3c1.7,1.6,4,3.8,6.9,6.4c2.9,2.6,5.3,4.8,7.2,6.6c2,2,3.7,2.8,5,2.6c1.3-0.2,3-1.4,5-3.6c2.2-2.1,4.3-4.2,6.3-6.3c2-2,4-4.1,6-6c2-2,4.1-4,6.2-6.2c2.1-2.1,4.3-4.4,6.7-6.6c1-1,2.1-2,3.3-3c1.2-1,2.5-1.7,3.9-2.2s2.9-0.5,4.5-0.1c1.6,0.4,3.3,1.5,5.2,3.3c1,1,1.9,1.8,2.6,2.5c0.7,0.7,1.5,1.3,2.1,2l2,2.2l3,2.7c3.4,3.3,4.8,6.3,4.4,9c-0.4,2.7-2.4,5.8-5.9,9.2c-3.2,3.1-6.5,6.5-10.1,10c-3.5,3.5-7.5,7.4-11.8,11.7c-3,3-4.9,5.4-5.7,7.3c-0.7,1.9,0,3.9,2.1,6c1.7,1.5,3.6,3.3,5.7,5.5c2.1,2.2,4,4.1,5.7,5.8c2.9,2.8,3.9,5.2,3.2,7.4c-0.7,2.1-3.3,3.4-7.7,3.9L21.2,241.7L21.2,241.7L21.2,241.7z" style="stroke-dasharray: 1461, 1461;stroke-dashoffset: 0;fill-opacity: 1;"></path></svg>