@eturnity/eturnity_reusable_components 1.0.16 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.16",
+  "version": "1.0.20",
   "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/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/components/spinner/index.vue

@@ -1,11 +1,11 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper :src="require('../../assets/icons/black-spinner.svg')" />
+      <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
     </container>
   </spinner-container>
   <container v-else>
-    <spinner-wrapper :src="require('../../assets/icons/black-spinner.svg')" />
+    <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
   </container>
 </template>
 

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

@@ -12,8 +12,10 @@
 </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 "../../components/spinner"
+import Spinner from "../../spinner"
 
 const TableScroll = styled.div`
   position: relative;
@@ -63,12 +65,23 @@ const TableContainer = styled.table`
   th {
     padding: 12px 20px;
     background-color: ${(props) => props.theme.colors.blue1};
+
+    .ordering {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-gap: 6px;
+    }
   }
 
   td {
     padding: 7px 10px;
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
+    &.empty {
+      height: 100px;
+      text-align: center;
+    }
+
     &.no-border {
       border-bottom: none;
     }
@@ -191,7 +204,7 @@ const TableContainer = styled.table`
       cursor: grab;
       background-position: center;
       background-image: ${() =>
-        `url(${require("@/assets/images/drag_icon.svg")})`};
+        `url(${require("../../../assets/icons/drag_icon.svg")})`};
 
       &:active {
         cursor: grabbing;
@@ -204,7 +217,7 @@ const TableContainer = styled.table`
       background: no-repeat;
       margin-left: 10px;
       background-image: ${() =>
-        `url(${require("@/assets/images/subposition_icon.svg")})`};
+        `url(${require("../../../assets/icons/subposition_icon.svg")})`};
     }
 
     .arrow-down {
@@ -213,7 +226,7 @@ const TableContainer = styled.table`
       background: no-repeat;
       background-position: center;
       background-image: ${() =>
-        `url(${require("@/assets/images/arrow_down.svg")})`};
+        `url(${require("../../../assets/icons/arrow_down.svg")})`};
     }
 
     .arrow-up {
@@ -222,7 +235,7 @@ const TableContainer = styled.table`
       background: no-repeat;
       background-position: center;
       background-image: ${() =>
-        `url(${require("@/assets/images/arrow_up_red.svg")})`};
+        `url(${require("../../../assets/icons/arrow_up_red.svg")})`};
     }
   }