@eturnity/eturnity_reusable_components 1.0.17 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.17",
+  "version": "1.0.21",
   "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/inputs/checkbox/index.vue

@@ -1,6 +1,10 @@
 <template>
   <component-wrapper>
-    <container :checkColor="checkColor"
+    <container
+      :checkColor="checkColor"
+      :size="size"
+      :hasLabel="!!label.length"
+      :backgroundColor="backgroundColor"
       >{{ label }}
       <input-checkbox
         type="checkbox"
@@ -20,6 +24,8 @@
 //     :isChecked="isChecked" //required
 //     @on-event-handler="onInputChange($event)" //required
 //     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
 // />
 import styled from "vue-styled-components"
 
@@ -27,10 +33,15 @@ const ComponentWrapper = styled.div`
   display: inline-block;
 `
 
-const containerAttrs = { checkColor: String }
+const containerAttrs = {
+  checkColor: String,
+  size: String,
+  hasLabel: Boolean,
+  backgroundColor: String,
+}
 const Container = styled("label", containerAttrs)`
   display: grid;
-  height: 28px;
+  height: ${(props) => (props.hasLabel ? "28px" : "auto")};
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
@@ -44,9 +55,20 @@ const Container = styled("label", containerAttrs)`
     position: absolute;
     top: 0;
     left: 0;
-    height: 25px;
-    width: 25px;
-    background-color: #fff;
+    height: ${(props) =>
+      props.size === "medium"
+        ? "25px"
+        : props.size === "small"
+        ? "16px"
+        : "25px"};
+    width: ${(props) =>
+      props.size === "medium"
+        ? "25px"
+        : props.size === "small"
+        ? "16px"
+        : "25px"};
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.green};
     border-radius: 4px;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
 
@@ -58,14 +80,27 @@ const Container = styled("label", containerAttrs)`
   }
 
   .checkmark:after {
-    left: 9px;
-    top: 5px;
-    width: 5px;
-    height: 10px;
+    left: ${(props) =>
+      props.size === "medium" ? "9px" : props.size === "small" ? "5px" : "9px"};
+    top: ${(props) =>
+      props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+    width: ${(props) =>
+      props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
+    height: ${(props) =>
+      props.size === "medium"
+        ? "10px"
+        : props.size === "small"
+        ? "6px"
+        : "10px"};
     border: solid
       ${(props) =>
-        props.checkColor ? props.checkColor : props.theme.colors.black};
-    border-width: 0 3px 3px 0;
+        props.checkColor ? props.checkColor : props.theme.colors.white};
+    border-width: ${(props) =>
+      props.size === "medium"
+        ? "0 3px 3px 0"
+        : props.size === "small"
+        ? "0 2px 2px 0"
+        : "0 3px 3px 0"};
     transform: rotate(45deg);
   }
 `
@@ -102,6 +137,13 @@ export default {
     checkColor: {
       required: false,
     },
+    size: {
+      required: false,
+      default: "medium", // small, medium
+    },
+    backgroundColor: {
+      required: false,
+    },
   },
   methods: {
     onChangeHandler(value) {

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

@@ -65,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;
     }
@@ -193,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;
@@ -206,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 {
@@ -215,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 {
@@ -224,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")})`};
     }
   }