@eturnity/eturnity_reusable_components 1.0.14 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.14",
+  "version": "1.0.18",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,7 +1,24 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <page-subtitle text="My Page Title" />
+      <main-table>
+        <thead>
+          <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Column 4</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="text">Body 1</td>
+            <td class="text">Body 2</td>
+            <td class="text">Body 3</td>
+            <td class="text">Body 4</td>
+          </tr>
+        </tbody>
+      </main-table>
     </page-container>
   </ThemeProvider>
 </template>
@@ -10,7 +27,7 @@
 import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
-import PageSubtitle from "@/components/pageSubtitle"
+import MainTable from "@/components/tables/mainTable"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -21,7 +38,7 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    PageSubtitle,
+    MainTable,
   },
   data() {
     return {

package/src/assets/icons/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>

package/src/assets/icons/delete_icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff5656;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/delete_icon_gray.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #DEE2EB;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/drag_icon.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
+<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
+<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
+<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
+<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
+<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/icons/subposition_icon.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0V10H7" stroke="#B2B9C5"/>
+</svg>

package/src/assets/theme.js

@@ -13,6 +13,11 @@ const theme = {
     blue: "#48a2d0",
     red: "#ff7e7e",
     disabled: "#c4c4c4",
+    blue1: "#e4efff",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
   },
   screen: {
     mobileSmall: "345px",

package/src/components/deleteIcon/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <wrapper>
+    <icon :color="color" />
+  </wrapper>
+</template>
+
+<script>
+// To use:
+// <delete-icon
+//   color="gray" // red is default
+// />
+import styled from "vue-styled-components"
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const iconAttrs = { color: String }
+const Icon = styled("span", iconAttrs)`
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  cursor: pointer;
+  background-image: ${(props) =>
+    props.color === "red"
+      ? `url(${require("../../assets/images/delete_icon.svg")})`
+      : props.color === "gray"
+      ? `url(${require("../../assets/images/delete_icon_gray.svg")})`
+      : `url(${require("../../assets/images/delete_icon.svg")})`};
+
+  &:hover {
+    box-shadow: 0px 4px 9px 1px rgb(0 0 0 / 20%);
+    border-radius: 4px;
+    background-image: ${() =>
+      `url(${require("../../assets/images/delete_icon.svg")})`};
+  }
+`
+
+export default {
+  name: "delete-icon",
+  components: {
+    Icon,
+    Wrapper,
+  },
+  props: {
+    color: {
+      required: false,
+      default: "red", // red, gray
+    },
+  },
+}
+</script>

package/src/components/pageSubtitle/index.vue

@@ -11,7 +11,8 @@
 // />
 import styled from "vue-styled-components"
 
-const SubtitleText = styled.div`
+const textAttrs = { color: String }
+const SubtitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
   margin-bottom: 30px;

package/src/components/spinner/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <spinner-container v-if="fullWidth">
+    <container>
+      <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+    </container>
+  </spinner-container>
+  <container v-else>
+    <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+  </container>
+</template>
+
+<script>
+import styled from "vue-styled-components"
+
+const SpinnerContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  z-index: 100;
+`
+
+const Container = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const SpinnerWrapper = styled.img`
+  width: 60px;
+`
+
+export default {
+  name: "spinner",
+  components: {
+    Container,
+    SpinnerWrapper,
+    SpinnerContainer,
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>

package/src/components/tables/mainTable/exampleNested.vue

@@ -0,0 +1,328 @@
+<!-- This is just an example how to use mainTable with collective positioning -->
+<!-- <template>
+  <draggable-table>
+    <thead>
+      <tr>
+        <div />
+        <th v-for="item in headerItems" :key="item.value">
+          {{ item.value }}
+        </th>
+        <th />
+        <div />
+      </tr>
+    </thead>
+    <draggable-container
+      :items="tableList"
+      handle=".drag-container"
+      :options="{ disabled: false }"
+    >
+      <parent-container v-for="el in tableList" :key="el.sales">
+        <tr :class="{ 'no-border': isOpen({ id: el.id }), disabled: true }">
+          <div class="drag-container">
+            <div class="drag-icon" />
+          </div>
+          <td>
+            <div :class="{ 'collective-container': el.children }">
+              <input-text :value="el.description" />
+              <div
+                v-if="el.children"
+                @click="
+                  toggleShowChildren({ id: el.id, length: el.children.length })
+                "
+                :class="{
+                  'collective-box': true,
+                  open: isChildrenOpen({ id: el.id }),
+                }"
+              >
+                {{ el.children.length }}
+              </div>
+            </div>
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.cost_price" />
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.margin" />
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.installation" />
+          </td>
+          <td>
+            <input-text :value="el.sales" />
+          </td>
+          <div class="arrow-container" @click="toggleOpen({ id: el.id })">
+            <div v-if="isOpen({ id: el.id })" class="arrow-up" />
+            <div v-if="!isOpen({ id: el.id })" class="arrow-down" />
+          </div>
+          <div class="icons-container">
+            <three-dots :options="listOptions" />
+            <delete-icon color="gray" />
+          </div>
+        </tr>
+        <tr v-if="isOpen({ id: el.id })" class="container-row">
+          <div />
+          <td class="no-border" colspan="6" v-if="isOpen({ id: el.id })">
+            <div class="open-container">
+              <container-wrapper>
+                <div>hi you</div>
+                <div>Test test</div>
+              </container-wrapper>
+            </div>
+          </td>
+        </tr>
+        <children-wrapper
+          v-if="
+            el.children && el.children.length && isChildrenOpen({ id: el.id })
+          "
+        >
+          <draggable-container :items="el.children" handle=".drag-container">
+            <template v-for="item in el.children">
+              <tr
+                :key="item.sales"
+                :class="{
+                  'no-border': isOpen({ id: item.id }),
+                  disabled: true,
+                }"
+              >
+                <div class="drag-container">
+                  <div class="drag-icon" />
+                </div>
+                <td>
+                  <div class="collective-container">
+                    <span class="subposition-icon" />
+                    <input-text :value="item.description" />
+                  </div>
+                </td>
+                <td>
+                  <input-text :value="item.cost_price" />
+                </td>
+                <td>
+                  <input-text :value="item.margin" />
+                </td>
+                <td>
+                  <input-text :value="item.installation" />
+                </td>
+                <td><input-text :value="item.sales" /></td>
+                <div
+                  class="arrow-container"
+                  @click="toggleOpen({ id: item.id })"
+                >
+                  <div v-if="isOpen({ id: item.id })" class="arrow-up" />
+                  <div v-if="!isOpen({ id: item.id })" class="arrow-down" />
+                </div>
+                <div class="icons-container">
+                  <three-dots :options="listOptions" />
+                  <delete-icon color="gray" />
+                </div>
+              </tr>
+              <tr
+                v-if="isOpen({ id: item.id })"
+                class="container-row"
+                :key="item.sales"
+              >
+                <div />
+                <td
+                  class="no-border"
+                  colspan="6"
+                  v-if="isOpen({ id: item.id })"
+                >
+                  <div class="open-container">
+                    <container-wrapper>
+                      <div>hi you</div>
+                      <div>Test test</div>
+                    </container-wrapper>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </draggable-container>
+        </children-wrapper>
+      </parent-container>
+    </draggable-container>
+    <tr class="footer">
+      <div />
+      <td class="text bold">
+        Total PV system code
+      </td>
+      <td />
+      <td />
+      <td />
+      <td class="text bold">
+        17.000 CHF
+      </td>
+      <td />
+      <div />
+    </tr>
+  </draggable-table>
+</template>
+
+<script>
+import draggable from "vuedraggable"
+import styled from "vue-styled-components"
+import DraggableTable from "@/components/reusable-components/tables/DraggableTable"
+import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+import DeleteIcon from "@/components/reusable-components/DeleteIcon"
+import ThreeDots from "@/components/reusable-components/ThreeDots"
+
+const DraggableContainer = styled(draggable)`
+  display: contents;
+`
+
+const ParentContainer = styled.tbody`
+  /* display: contents; */
+`
+
+const ChildrenWrapper = styled.div`
+  display: contents;
+`
+
+const ContainerWrapper = styled.div`
+  display: grid;
+  padding: 12px;
+  grid-template-columns: 1fr 1fr;
+`
+
+export default {
+  name: "nested-table",
+  components: {
+    DraggableContainer,
+    ParentContainer,
+    DraggableTable,
+    InputText,
+    ChildrenWrapper,
+    DeleteIcon,
+    ThreeDots,
+    ContainerWrapper,
+  },
+  data() {
+    return {
+      tableList: [
+        {
+          description: "My Description 1",
+          cost_price: null,
+          margin: null,
+          installation: null,
+          sales: 1000,
+          id: 1,
+          children: [
+            {
+              description: "My Description 2",
+              cost_price: 20,
+              margin: 200,
+              installation: 2000,
+              sales: 20,
+              id: 2,
+              children: [],
+            },
+            {
+              description: "My Description 7",
+              cost_price: 70,
+              margin: 700,
+              installation: 7000,
+              sales: 70,
+              id: 3,
+              children: [],
+            },
+          ],
+        },
+        {
+          description: "My Description 3",
+          cost_price: 30,
+          margin: 300,
+          installation: 3000,
+          sales: 30,
+          id: 4,
+        },
+        {
+          description: "My Description 5",
+          cost_price: 50,
+          margin: 500,
+          installation: 5000,
+          sales: 50,
+          id: 5,
+          children: [
+            {
+              description: "My Description 6",
+              cost_price: 60,
+              margin: 600,
+              installation: 6000,
+              sales: 60,
+              id: 6,
+              children: [],
+            },
+          ],
+        },
+      ],
+      openItem: null,
+      showChildren: [],
+      listOptions: [
+        {
+          name: "Option 1",
+          value: "option_1",
+        },
+        {
+          name: "Option 2",
+          value: "option_2",
+        },
+        {
+          name: "Option 3",
+          value: "option_3",
+        },
+        {
+          name: "Option 4",
+          value: "option_4",
+        },
+      ],
+    }
+  },
+  computed: {
+    headerItems() {
+      const items = [
+        {
+          value: "Description",
+        },
+        {
+          value: "Cost price",
+        },
+        {
+          value: "Calculation surcharge",
+        },
+        {
+          value: "Installation costs",
+        },
+        {
+          value: "Sales price",
+        },
+      ]
+
+      return items
+    },
+  },
+  methods: {
+    toggleOpen({ id }) {
+      this.openItem = this.openItem === id ? null : id
+    },
+    isOpen({ id }) {
+      return this.openItem === id
+    },
+    toggleShowChildren({ id, length }) {
+      if (!length) {
+        return
+      }
+      if (this.isChildrenOpen({ id })) {
+        // if the item is already in the Array
+        this.showChildren = this.showChildren.filter((item) => item !== id)
+      } else {
+        this.showChildren.push(id)
+      }
+    },
+    isChildrenOpen({ id }) {
+      return this.showChildren.length ? this.showChildren.includes(id) : false
+    },
+  },
+}
+</script>
+-->

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

@@ -0,0 +1,264 @@
+<template>
+  <table-scroll>
+    <table-wrapper :fullWidth="fullWidth">
+      <spinner-wrapper v-if="isLoading">
+        <spinner />
+      </spinner-wrapper>
+      <table-container v-else>
+        <slot />
+      </table-container>
+    </table-wrapper>
+  </table-scroll>
+</template>
+
+<script>
+// ToDo: add this to storybook
+// import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
+import styled from "vue-styled-components"
+import Spinner from "../../spinner"
+
+const TableScroll = styled.div`
+  position: relative;
+  max-width: 100%;
+`
+
+const wrapperAttrs = { fullWidth: Boolean }
+const TableWrapper = styled("div", wrapperAttrs)`
+  width: ${(props) => (props.fullWidth ? "100%" : "fit-content")};
+  max-width: 100%;
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+    width: 10px; //width of the whole scrollbar area
+  }
+
+  track ::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-bottom: 2px solid #b2b9c4; // width of the actual scrollbar
+  }
+`
+
+const SpinnerWrapper = styled.div`
+  height: 150px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const TableContainer = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+  font-size: 13px;
+
+  thead {
+    font-weight: bold;
+
+    tr {
+      border-bottom: none !important;
+    }
+  }
+
+  th {
+    padding: 12px 20px;
+    background-color: ${(props) => props.theme.colors.blue1};
+  }
+
+  td {
+    padding: 7px 10px;
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+
+    &.no-border {
+      border-bottom: none;
+    }
+
+    .collective-container {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      grid-gap: 10px;
+      cursor: pointer;
+    }
+
+    .collective-box {
+      width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      color: #fff;
+      background-color: ${(props) => props.theme.colors.grey3};
+      font-size: 13px;
+      font-weight: normal;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+
+      &.open {
+        background-color: ${(props) => props.theme.colors.green};
+      }
+    }
+  }
+
+  td,
+  th {
+    white-space: nowrap;
+    text-align: left;
+
+    &.align {
+      &-left {
+        text-align: left;
+      }
+
+      &-center {
+        text-align: center;
+      }
+
+      &-right {
+        text-align: right;
+      }
+    }
+  }
+
+  tr {
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    &.footer {
+      td {
+        background-color: ${(props) => props.theme.colors.grey5};
+        border-top: 1px solid ${(props) => props.theme.colors.grey4};
+      }
+    }
+
+    .text {
+      padding: 12px 0 12px 18px;
+      color: ${(props) => props.theme.colors.black};
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .icons-container {
+      width: 100%;
+      display: inline-flex;
+      flex-wrap: nowrap;
+      background-color: #fff;
+      vertical-align: middle;
+    }
+
+    .arrow-container {
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+      text-align: -webkit-center;
+      cursor: pointer;
+      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    }
+
+    &.container-row td {
+      padding: 0;
+    }
+
+    &.no-border {
+      td,
+      .arrow-container {
+        border-bottom: none;
+      }
+    }
+
+    &:hover {
+      input {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
+      .drag-icon {
+        visibility: visible;
+      }
+    }
+
+    .drag-container {
+      display: table-cell;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    .drag-icon {
+      visibility: hidden;
+      width: 10px;
+      height: 16px;
+      cursor: grab;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("../../../assets/icons/drag_icon.svg")})`};
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    .subposition-icon {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      margin-left: 10px;
+      background-image: ${() =>
+        `url(${require("../../../assets/icons/subposition_icon.svg")})`};
+    }
+
+    .arrow-down {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("../../../assets/icons/arrow_down.svg")})`};
+    }
+
+    .arrow-up {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("../../../assets/icons/arrow_up_red.svg")})`};
+    }
+  }
+
+  input {
+    border: none;
+    font-size: 13px;
+    padding: 5px 10px;
+  }
+
+  .open-container {
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+`
+
+export default {
+  name: "main-table",
+  components: {
+    TableScroll,
+    TableWrapper,
+    SpinnerWrapper,
+    Spinner,
+    TableContainer,
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: true,
+    },
+    isLoading: {
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,195 @@
+<template>
+  <page-wrapper>
+    <title-text>
+      {{ tableTitle }}
+    </title-text>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else>
+          <thead>
+            <tr>
+              <table-header v-for="(item, index) in headerItems" :key="index">
+                {{ item.value }}
+              </table-header>
+              <div v-if="showIconsContainer && tableItems.length" />
+            </tr>
+          </thead>
+          <tbody>
+            <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
+              <empty-container>
+                {{ emptyText }}
+              </empty-container>
+            </empty-td>
+            <table-row v-for="(row, index) in tableItems" :key="index" v-else>
+              <table-item v-for="(item, idx) in row" :key="idx">
+                {{ item.value }}
+              </table-item>
+              <icons-container v-if="showIconsContainer">
+                <delete-icon
+                  @click.native="$emit('on-click-delete', index)"
+                  color="gray"
+                />
+              </icons-container>
+            </table-row>
+          </tbody>
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-wrapper>
+</template>
+
+<script>
+// 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 DeleteIcon from "../../deleteIcon"
+import Spinner from "../../spinner"
+
+const TableScroll = styled.div`
+  position: relative;
+  max-width: 100%;
+`
+
+const wrapperAttrs = { fullWidth: Boolean }
+const TableWrapper = styled("div", wrapperAttrs)`
+  width: ${(props) => (props.fullWidth ? "100%" : "fit-content")};
+  max-width: 100%;
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+    width: 10px; //width of the whole scrollbar area
+  }
+
+  track ::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
+  }
+`
+
+const TableContainer = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+`
+
+const TableItem = styled.td`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  width: auto;
+  white-space: nowrap;
+  padding: 12px;
+  text-align: right;
+`
+
+const TableHeader = styled(TableItem)`
+  background-color: #e6e8ee;
+  font-family: "Lato-Bold", Arial;
+  text-align: left;
+`
+
+const TableRow = styled.tr`
+  &:hover {
+    background-color: #f5f7fa;
+    cursor: pointer;
+  }
+`
+
+const TitleText = styled.div`
+  font-family: "Lato-Bold", Arial;
+  margin-bottom: 6px;
+`
+
+const PageWrapper = styled.div`
+  margin: 16px 0;
+  font-size: 13px;
+`
+
+const IconsContainer = styled.div`
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  background-color: #fff;
+
+  &:hover {
+    background-color: #fff;
+  }
+`
+
+const SpinnerWrapper = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  height: 150px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const EmptyContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 100px;
+`
+
+const EmptyTd = styled.td`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+`
+
+export default {
+  name: "view-table",
+  components: {
+    TableScroll,
+    TableWrapper,
+    TableContainer,
+    TableHeader,
+    TableItem,
+    TableRow,
+    TitleText,
+    PageWrapper,
+    DeleteIcon,
+    IconsContainer,
+    Spinner,
+    SpinnerWrapper,
+    EmptyContainer,
+    EmptyTd,
+  },
+  props: {
+    headerItems: {
+      required: true,
+    },
+    tableItems: {
+      required: true,
+    },
+    fullWidth: {
+      required: false,
+      default: true,
+    },
+    tableTitle: {
+      required: false,
+      default: null,
+    },
+    showDeleteButton: {
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      required: false,
+      default: false,
+    },
+    emptyText: {
+      required: false,
+      default: "There are no items",
+    },
+  },
+  computed: {
+    showIconsContainer() {
+      return this.showDeleteButton
+    },
+  },
+}
+</script>

package/src/components/threeDots/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <page-container>
+    <button-container @click="toggleButton()">
+      <dot-item />
+      <dot-item />
+      <dot-item />
+    </button-container>
+    <options-container v-if="isOpen">
+      <option-item
+        v-for="item in options"
+        :key="item.value"
+        tabindex="0"
+        @click="onSelect(item.value)"
+        @keyup.enter="onSelect(item.value)"
+      >
+        {{ item.name }}
+      </option-item>
+    </options-container>
+  </page-container>
+</template>
+
+<script>
+// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
+// To use:
+// <three-dots
+//   :options="listOptions"
+//   @on-select="onSelect($event)"
+// />
+// options to pass:
+// listOptions: [
+//   {
+//     name: "Option 1",
+//     value: "option_1",
+//   },
+//   {
+//     name: "Option 2",
+//     value: "option_2",
+//   },
+//   {
+//     name: "Option 3",
+//     value: "option_3",
+//   },
+//   {
+//     name: "Option 4",
+//     value: "option_4",
+//   }
+// ],
+
+import styled from "vue-styled-components"
+
+const PageContainer = styled.div`
+  position: relative;
+  display: grid;
+  align-items: center;
+`
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  cursor: pointer;
+
+  div {
+    // This is the dot color
+    background-color: #263238;
+  }
+
+  &:hover {
+    div {
+      // Dot color on hover
+      background-color: ${(props) => props.theme.colors.grey3};
+    }
+  }
+`
+
+const DotItem = styled.div`
+  width: 4px;
+  height: 4px;
+  margin: 1px;
+  border-radius: 50%;
+`
+
+const OptionsContainer = styled.div`
+  z-index: 99;
+  position: absolute;
+  right: 0;
+  border: 1px solid
+    ${(props) =>
+      props.buttonColor ? props.buttonColor : props.theme.colors.grey3};
+  display: grid;
+  grid-template-columns: 1fr;
+  min-width: 200px;
+  width: max-content;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-top: 8px;
+  max-height: 220px;
+  overflow: auto;
+`
+
+const OptionItem = styled.div`
+  padding: 12px;
+  cursor: pointer;
+  font-size: 13px;
+
+  &:hover {
+    background-color: #ebeef4;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: #ebeef4;
+  }
+`
+
+export default {
+  name: "three-dots",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    DotItem,
+    OptionsContainer,
+    OptionItem,
+  },
+  props: {
+    options: {
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    toggleButton() {
+      this.isOpen = !this.isOpen
+
+      if (this.isOpen) {
+        document.addEventListener("click", this.clickOutside)
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+      }
+    },
+    onSelect(value) {
+      this.$emit("on-select", value)
+      this.isOpen = false
+    },
+    clickOutside(event) {
+      if (this.$el.contains(event.target) || !this.isOpen) {
+        return
+      }
+      this.toggleButton()
+    },
+  },
+}
+</script>