@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.6 → 7.12.7--EPDM-5518.0

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+const EmptyText = styled.div`
+  color: ${(props) => props.theme.colors.white};
+  font-size: 13px;
+  padding-left: 16px;
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>

package/src/components/sideMenu/index.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Icon from '../icon'
 import Spinner from '../spinner'
 

package/src/components/spinner/index.vue

@@ -1,19 +1,24 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper :size="size" />
+      <spinner-wrapper
+        :size="size"
+        :src="require('../../assets/icons/black_spinner.svg')"
+      />
     </container>
   </spinner-container>
   <container v-else :limitedToModal="limitedToModal">
-    <spinner-wrapper :size="size" />
+    <spinner-wrapper
+      :size="size"
+      :src="require('../../assets/icons/black_spinner.svg')"
+    />
   </container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue3-styled-components'
-import SpinnerSvg from '../../assets/icons/black_spinner.svg?component'
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -38,7 +43,7 @@ const Container = styled('div', containerAttrs)`
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled(SpinnerSvg, spinnerAttrs)`
+const SpinnerWrapper = styled('img', spinnerAttrs)`
   width: ${(props) => (props.size ? props.size : '60px')};
 `
 
@@ -64,4 +69,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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;
 `
@@ -596,7 +604,7 @@ export default {
           }
         })
       })
-      if (Array.isArray(this.dynamicGridWidth)) {
+      if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
         this.dynamicGridWidth = this.dynamicGridWidth.join(' ')
       }
     }
@@ -619,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")