@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.7 → 6.37.0-EPDM-2198.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0-EPDM-8148.7",
+  "version": "6.37.0-EPDM-2198.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,169 +1,82 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-
-      <br/>
+      <br />
       <input-number
-          :value="value"
-          :minNumber="0"
-          unitName="mm"
-          :numberPrecision="0"
-          backgroundColor="transparent"
-          borderColor="eturnityGrey"
-          inputHeight="34px"
-          inputWidth="420px"
-          textAlign="left"
-          :isInteractive="true"
-          :interactionStep="1"
-          @on-input="value = $event"
-          @input-change="changeHandler"
-          @input-focus="focusHandler"
-          @input-blur="blurHandler"
+        :value="value"
+        :minNumber="0"
+        unitName="mm"
+        :numberPrecision="0"
+        backgroundColor="transparent"
+        borderColor="eturnityGrey"
+        inputHeight="34px"
+        inputWidth="420px"
+        textAlign="left"
+        :isInteractive="true"
+        :interactionStep="1"
+        @on-input="inputHandler"
+        @input-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
       >
         <template v-slot:label>
-          <div>Interactive Label</div>
+          <div>Interactive Label 1</div>
         </template>
       </input-number>
 
-      <dropdown-component openingMode="hover" gap="30px">
-        <template #trigger><i>Click Me</i></template>
-        <template #dropdown>
-          <div>
-            <a href="">test1</a>
-            <button href="">test2</button>
-            <br>
-            <p>Text</p>
-          </div>
-        </template>
-      </dropdown-component>
-
-      <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"
-      />
+      <hr>
 
-      <SwitchField
-          @on-switch-change="onInputChange($event)"
-          :options="[
-              { value: 0, content: 'zero' },
-              { value: 1, content: 'one' },
-              { value: 2, content: 'two' }
-            ]"
-          :value="value"
-          label="label"
-          toggleColor="red"
-          size="large"
-          backgroundColor="blue"
-          labelAlign="left"
-          fontColor="black"
-          :disabled="false"
-      />
-      <icon
-          name="opacity"
-          color="red"
-          hoveredColor="blue"
-          size="60px"
-          cursor="default"
-          isStriked="true"
-      />
-      <Select
-          :value="value"
-          selectWidth="100%"
-          optionWidth="50%"
-          label="that is a label"
-          alignItems="vertical"
-          colorMode="dark"
-          isSearchable="true"
-          @input-change="value = $event"
-          @search-change="searchValue = $event"
+      <input-number
+        :value="value"
+        :minNumber="0"
+        unitName="mm"
+        :numberPrecision="0"
+        backgroundColor="transparent"
+        borderColor="eturnityGrey"
+        inputHeight="34px"
+        inputWidth="420px"
+        textAlign="left"
+        :isInteractive="true"
+        :interactionStep="1"
+        @on-input="inputHandler"
+        @input-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
       >
-        <template #selector="{ selectedValue }">
-          value selected: {{ selectedValue }}
-        </template>
-        <template #dropdown>
-          <Option
-              v-for="opt in filteredOptionList"
-              :key="opt.id"
-              :value="opt.val"
-          >{{ opt.lookFor }}
-          </Option
-          >
+        <template v-slot:label>
+          <div>Interactive Label 2</div>
         </template>
-      </Select>
-
-
-      {{ filteredOptionList }}
+      </input-number>
 
-      <iconCollection color="red"/>
+      <hr>
+      <button @click="value=42">Click to set at 42</button>
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import {ThemeProvider} from 'vue-styled-components'
+import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
-import Select from '@/components/inputs/select'
-import SwitchField from '@/components/inputs/switchField'
-import Option from '@/components/inputs/select/option'
-import iconCollection from '@/components/icon/iconCollection'
-import dropdownComponent from '@/components/dropdown'
-import videoThumbnail from '@/components/videoThumbnail'
-import icon from '@/components/icon'
-// import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
-// const RowContainer = styled.div`
-//   display: inline-flex;
-//   gap: 10px;
-//   flex-wrap: wrap;
-// `
-
 export default {
   name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Option,
-    Select,
-    SwitchField,
-    iconCollection,
-    dropdownComponent,
-    videoThumbnail,
-    icon
   },
   data() {
     return {
       value: 42,
-      value2: 42,
-      companyName: 'toto',
-      optionList: [
-        {id: 'a', val: 'A', lookFor: 'babababa'},
-        {id: 'b', val: 'B', lookFor: 'abab'},
-        {id: 'c', val: 'C', lookFor: 'ccc'},
-        {id: 'd', val: 'D', lookFor: 'ddd'},
-        {id: 'e', val: 'E', lookFor: 'dddee'},
-        {id: 'f', val: 'F', lookFor: 'ddfff'},
-        {id: 'g', val: 'G', lookFor: 'dggg'},
-        {id: 'h', val: 'H', lookFor: 'dddhhh'},
-      ],
-      searchValue: ''
     }
   },
   computed: {
-    filteredOptionList() {
-      return this.optionList.filter((opt) =>
-          opt.lookFor.includes(this.searchValue)
-      )
-    }
   },
   methods: {
     blurHandler(e) {
@@ -176,64 +89,12 @@ export default {
       console.log('focus', e)
     },
     inputHandler(e) {
-      this.value2 = e
       console.log('input', e)
-    },
-    keydownHandler(e) {
-      console.log('test', e)
+      //this.value = e
+      setTimeout(()=>{this.value = e},1000)
     },
     getTheme() {
       return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    onInputBlur(event) {
-      console.log(event)
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
-      ]
-      return items
-    },
-    getComponentInfo({row, value}) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
     }
   }
 }

package/src/assets/svgIcons/charger_icon_white.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g class="st0">
+	<g class="st1">
+		<rect x="-312.013" y="-258.339" class="st2" width="2" height="16"/>
+	</g>
+	<g class="st1">
+		<polygon class="st2" points="-303.346,-242.339 -303.346,-248.339 -312.013,-248.426 -312.013,-242.339 		"/>
+	</g>
+	<g class="st1">
+		<rect x="-311.673" y="-258.339" class="st2" width="8" height="2"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M-294.833-255.839v-2.5h-7v2.5c0,1.933,1.567,3.5,3.5,3.5l0,0
+			C-296.4-252.339-294.833-253.906-294.833-255.839z"/>
+	</g>
+	<g class="st1">
+		<rect x="-305.346" y="-258.339" class="st2" width="2" height="16"/>
+	</g>
+	<g class="st1">
+		<rect x="-299.333" y="-258.339" class="st2" width="2" height="12"/>
+	</g>
+	<g class="st1">
+		<rect x="-303.346" y="-248.339" class="st2" width="6" height="2"/>
+	</g>
+	<g class="st1">
+		<rect x="-301.346" y="-260.339" class="st2" width="2" height="2"/>
+	</g>
+	<g class="st1">
+		<rect x="-297.346" y="-260.339" class="st2" width="2" height="2"/>
+	</g>
+</g>
+<g>
+	<path class="st2" d="M15.777,8.974h3v-2h-3V6h-1c-1.857,0-3.404,1.272-3.855,2.987H8.889V3V1h-2H3.223h-2v2v14v2h2h5.667v-1v-1
+		v-6.013h2.025C11.356,12.716,12.911,14,14.777,14h1v-1.026h3v-2h-3V8.987V8.974z M6.889,17H3.223V3h3.667v5.987v2V17z"/>
+</g>
+</svg>

package/src/assets/svgIcons/collections.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H17C17.55 18 18 17.55 18 17V11C18 10.45 17.55 10 17 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16ZM17 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H17C17.55 8 18 7.55 18 7V1C18 0.45 17.55 0 17 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/dashboard.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/energy_meter.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2021 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="462px" height="512px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 462 511.93"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path fill="white" d="M22.37 0l417.26 0c12.31,0 22.37,10.06 22.37,22.37l0 400.73c0,12.3 -10.06,22.37 -22.37,22.37l-32.27 0 0 19.01c0,6.2 -5.06,11.27 -11.26,11.27l-25.1 0 0 32.03c0,2.28 -1.87,4.15 -4.15,4.15l-32.33 0c-4.56,0 -8.29,-3.73 -8.29,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -25.76 0c-6.2,0 -11.26,-5.07 -11.26,-11.27l0 -19.01 -32.27 0c-12.31,0 -22.37,-10.07 -22.37,-22.37l0 -400.73c0,-12.31 10.06,-22.37 22.37,-22.37zm61.36 103.62l294.54 0c3.34,0 6.38,1.38 8.57,3.57 2.19,2.19 3.56,5.23 3.56,8.57l0 53.77c0,3.33 -1.37,6.37 -3.56,8.56 -2.2,2.2 -5.23,3.57 -8.57,3.57l-294.54 0c-3.34,0 -6.38,-1.37 -8.57,-3.57 -2.19,-2.19 -3.56,-5.23 -3.56,-8.56l0 -53.77c0,-3.34 1.36,-6.37 3.56,-8.57 2.2,-2.21 5.23,-3.57 8.57,-3.57zm159 210.98l15.79 0c2.29,0.01 4.15,1.87 4.15,4.16 0,0.83 -0.25,1.63 -0.7,2.32l-37.64 64.27c-0.75,1.23 -2.09,1.98 -3.53,1.98 -2.29,0 -4.15,-1.86 -4.15,-4.14 0,-0.28 0.02,-0.55 0.08,-0.81l5.55 -39.45 -18.73 0.32c-0.02,0 -0.05,0 -0.08,0 -2.25,0 -4.09,-1.81 -4.13,-4.06 0,-0.01 0,-0.01 0,-0.02 0,-0.75 0.2,-1.5 0.58,-2.15l37.06 -64.26c0.75,-1.24 2.1,-2 3.55,-2 2.29,0 4.15,1.85 4.15,4.15 0,0.18 -0.02,0.36 -0.04,0.54l-1.91 39.15zm151.34 -255.93c5.79,0 10.49,4.95 10.49,11.06 0,6.1 -4.7,11.05 -10.49,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm-326.13 0c5.8,0 10.5,4.95 10.5,11.06 0,6.1 -4.7,11.05 -10.5,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm0 307.96c5.8,0 10.5,4.96 10.5,11.06 0,6.11 -4.7,11.06 -10.5,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm326.13 0c5.79,0 10.49,4.96 10.49,11.06 0,6.11 -4.7,11.06 -10.49,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm-38.94 -206.03c-3.07,0 -5.53,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.86,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.08,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.34,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.34,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.18,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.12 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.82,0.79 1.41,0.79zm-63.81 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.54,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.86,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.33 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.16 7.1c-3.08,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.31,-2.88 7.39,-2.88 3.07,0 5.54,0.96 7.39,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.39,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.41,-0.79 0.35,-0.53 0.53,-1.22 0.53,-2.08l0 -15.98c0,-0.86 -0.18,-1.56 -0.53,-2.09 -0.34,-0.52 -0.81,-0.79 -1.41,-0.79 -0.6,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.81,0.79 1.41,0.79zm58.85 102.29c-4.25,0 -7.69,-3.45 -7.69,-7.69 0,-4.24 3.44,-7.68 7.69,-7.68l128.88 0c4.25,0 7.69,3.44 7.69,7.68 0,4.24 -3.44,7.69 -7.69,7.69l-128.88 0zm-50.58 -38.85c-4.24,0 -7.69,-3.44 -7.69,-7.68 0,-4.24 3.45,-7.69 7.69,-7.69l230.04 0c4.24,0 7.68,3.45 7.68,7.69 0,4.24 -3.44,7.68 -7.68,7.68l-230.04 0zm212.57 -103.71l0 58.82 49.72 0c0.69,0 1.32,-0.29 1.78,-0.75 0.46,-0.45 0.75,-1.09 0.75,-1.77l0 -53.77c0,-0.69 -0.29,-1.33 -0.75,-1.79 -0.45,-0.45 -1.09,-0.74 -1.78,-0.74l-49.72 0zm-9.61 58.82l0 -58.82 -52.26 0 0 58.82 52.26 0zm-61.87 0l0 -58.82 -52.14 0 0 58.82 52.14 0zm-61.75 0l0 -58.82 -52.3 0 0 58.82 52.3 0zm-61.91 0l0 -58.82 -49.68 0c-0.7,0 -1.33,0.29 -1.79,0.74 -0.45,0.46 -0.74,1.09 -0.74,1.79l0 53.77c0,0.69 0.29,1.32 0.74,1.77 0.46,0.46 1.1,0.75 1.79,0.75l49.68 0zm-74.08 -133.14l343.34 0c12.31,0 22.37,10.07 22.37,22.37l0 324.85c0,12.3 -10.07,22.37 -22.37,22.37l-343.34 0c-12.3,0 -22.37,-10.06 -22.37,-22.37l0 -324.85c0,-12.31 10.06,-22.37 22.37,-22.37z"/>
+ </g>
+</svg>

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,4 @@
 <svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" fill="white" r="7"></circle>
+<circle cx="20" cy="20" r="7"></circle>
 <path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
 </svg>

package/src/assets/svgIcons/expand.svg

@@ -0,0 +1 @@
+<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>

package/src/assets/svgIcons/logout.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.173 4.517L15.242 7.586L15.656 8L15.676 8L15.676 8.02L16.656 9L15.676 9.98L15.676 10L15.656 10L15.242 10.414L12.173 13.483L10.759 12.069L12.827 10L4.676 10L4.676 8L12.827 8L10.758 5.931L12.173 4.517ZM-6.99382e-07 2L-8.74228e-08 16L0 18L2 18L7 18L7 16L2 16L2 2L7 2L7 -3.0598e-07L2 -8.74228e-08L-7.86805e-07 0L-6.99382e-07 2Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/split.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg438"
+   width="838"
+   height="833"
+   viewBox="0 0 838 833"
+   sodipodi:docname="split.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs442">
+    <linearGradient
+       id="linearGradient7383"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop7381" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient6933"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop6931" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="namedview440"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.95078031"
+     inkscape:cx="466.45896"
+     inkscape:cy="549.02273"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g444" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g444">
+    <circle
+       id="path5141"
+       style="fill:none;stroke:#fffeff;stroke-opacity:1"
+       cx="0.66903824"
+       cy="263.65976"
+       r="0.52949077" />
+    <circle
+       id="path5143"
+       style="fill:none;stroke:#fffeff;stroke-opacity:1"
+       cx="0.66903824"
+       cy="263.65976"
+       r="0.52949077" />
+    <g
+       id="path5184"
+       style="stroke:#fffeff;stroke-opacity:1;fill:none">
+      <path
+         style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
+         id="path6861" />
+      <path
+         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
+         id="path6863" />
+    </g>
+    <g
+       id="path5186"
+       style="stroke:#fffeff;stroke-opacity:1;fill:none">
+      <path
+         style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
+         id="path6855" />
+      <path
+         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
+         d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
+         id="path6857" />
+    </g>
+  </g>
+</svg>

package/src/assets/svgIcons/subscriptions.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12H8V10H0V12ZM0 16H8V14H0V16ZM0 8H8V6H0V8ZM0 2V4H8V2H0ZM10 2H18V16H10V2Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -13,6 +13,7 @@ const theme = {
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',
+    brightBlue: '#0068DE',
     grey1: '#666',
     grey2: '#c4c4c4',
     grey3: '#b2b9c5',
@@ -21,6 +22,8 @@ const theme = {
     grey6: '#555d61',
     green: '#99db0c',
     transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
     transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <page-container :shouldPosition="shouldPosition">
-    <button-container>
+    <button-container :data-id="dataId">
       <plus-button :src="require('../../assets/icons/plus_button.svg')" />
     </button-container>
   </page-container>
@@ -8,11 +8,11 @@
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const pageAttrs = { shouldPosition: Boolean }
-const PageContainer = styled("div", pageAttrs)`
-  position: ${(props) => (props.shouldPosition ? "fixed" : "unset")};
+const PageContainer = styled('div', pageAttrs)`
+  position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
   bottom: 30px;
   right: 30px;
 `
@@ -42,17 +42,21 @@ const ButtonContainer = styled.div`
 const PlusButton = styled.img``
 
 export default {
-  name: "add-new-button",
+  name: 'add-new-button',
   components: {
     PageContainer,
     ButtonContainer,
-    PlusButton,
+    PlusButton
   },
   props: {
     shouldPosition: {
       required: false,
-      default: true,
+      default: true
     },
-  },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  }
 }
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -6,6 +6,7 @@
       :isDisabled="isDisabled"
       :customColor="customColor"
       :noWrap="noWrap"
+      :data-id="dataId"
     >
       {{ text }}
     </button-container>
@@ -21,38 +22,45 @@
 //   type="secondary" // primary, secondary, cancel
 //   :isDisabled="true"
 //   :minWidth="minWidth"
+//   :data-id="test_data_id"
 // />
 
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
-const ButtonContainer = styled("div", ButtonAttrs)`
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  noWrap: Boolean
+}
+const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-      props.isDisabled
-          ? props.theme.colors.disabled
-          : props.customColor
-              ? props.customColor
-              : props.type === "primary"
-                  ? props.theme.colors.black
-                  : props.type === "secondary"
-                      ? props.theme.colors.grey3
-                      : props.type === "cancel"
-                          ? props.theme.colors.red
-                          : props.theme.colors.black};
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.type === 'primary'
+      ? props.theme.colors.black
+      : props.type === 'secondary'
+      ? props.theme.colors.grey3
+      : props.type === 'cancel'
+      ? props.theme.colors.red
+      : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
   ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+    opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
   }
 
   &:active {
@@ -61,26 +69,26 @@ const ButtonContainer = styled("div", ButtonAttrs)`
 `
 
 export default {
-  name: "main-button",
+  name: 'main-button',
   components: {
     PageContainer,
-    ButtonContainer,
+    ButtonContainer
   },
   props: {
     type: {
       required: false,
-      default: "primary",
+      default: 'primary'
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     text: {
-      required: true,
+      required: true
     },
     customColor: {
       required: false,
-      default: null,
+      default: null
     },
     noWrap: {
       required: false,
@@ -89,7 +97,11 @@ export default {
     minWidth: {
       required: false,
       default: null
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
-  },
+  }
 }
 </script>