@eturnity/eturnity_reusable_components 1.2.19-EPDM-5295.2 → 1.2.19-EPDM-5295.3

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

@@ -1,365 +1,370 @@
-<template>
-  <page-container>
-    <table-title v-if="titleText">
-      {{ titleText }}
-    </table-title>
-    <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>
-  </page-container>
-</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 PageContainer = styled.div``
-
-const TableTitle = styled.div`
-  margin-bottom: 16px;
-  font-weight: bold;
-  font-size: 14px;
-  text-transform: uppercase;
-`
-
-const TableScroll = styled.div`
-  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 {
-    height: 5px; //height of the whole scrollbar area
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${(props) => props.theme.colors.grey2};
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
-    border-radius: 4px;
-  }
-`
-
-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;
-    }
-  }
-
-  tbody {
-    tr {
-      &:hover {
-        background-color: ${(props) => props.theme.colors.white};
-        cursor: pointer;
-
-        .arrow-container,
-        .input-placeholder,
-        .table-dropdown-item {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-
-        input {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-      }
-
-      td {
-        height: 40px;
-      }
-    }
-  }
-
-  th {
-    padding: 11px 15px;
-    background-color: ${(props) => props.theme.colors.blue1};
-    cursor: auto;
-    height: 40px;
-
-    .ordering {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-gap: 6px;
-    }
-  }
-
-  td {
-    padding: 6px 6px 7px 4px;
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
-
-    &.empty {
-      height: 100px;
-      text-align: center;
-      cursor: default;
-      background-color: #fff !important;
-    }
-
-    &.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;
-      }
-    }
-
-    &.checkbox {
-      padding: 7px 15px !important;
-      width: 40px;
-    }
-
-    &.checkbox-header {
-      width: 40px;
-    }
-  }
-
-  tr {
-    &.disabled {
-      cursor: not-allowed !important;
-    }
-
-    .arrow-dropdown {
-      visibility: hidden;
-    }
-
-    &.footer {
-      td {
-        background-color: ${(props) => props.theme.colors.grey5};
-        /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
-      }
-
-      .text {
-        cursor: auto !important;
-      }
-    }
-
-    .text {
-      padding: 10px 15px 10px 15px;
-      color: ${(props) => props.theme.colors.black};
-      cursor: pointer;
-    }
-
-    .bold {
-      font-weight: bold;
-    }
-
-    .icons-container {
-      padding-right: 2px; // so that the icons are not cut off when hovering
-      width: 1%; // necessary so it doesn't take up too much white space
-      display: table-cell;
-      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:disabled {
-        background-color: ${(props) => props.theme.colors.grey5 + "!important"};
-      }
-
-      .drag-icon {
-        visibility: visible;
-      }
-
-      .drag-wrapper {
-        background-color: ${(props) => props.theme.colors.grey5};
-      }
-
-      .arrow-dropdown {
-        visibility: visible;
-      }
-    }
-
-    .drag-container {
-      display: table-cell;
-      width: 20px;
-      min-width: 20px;
-      height: 40px;
-    }
-
-    .drag-wrapper {
-      width: 16px;
-      height: 36px;
-      display: grid;
-      align-items: center;
-      justify-items: center;
-      border-radius: 4px;
-    }
-
-    .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 {
-    font-size: 13px;
-    padding: 5px 10px;
-    background: #fff;
-
-    &:focus {
-      background: ${(props) => props.theme.colors.grey5};
-    }
-  }
-
-  .open-container {
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-    margin-bottom: 5px;
-    cursor: auto;
-  }
-`
-
-export default {
-  name: "main-table",
-  components: {
-    TableScroll,
-    TableWrapper,
-    SpinnerWrapper,
-    Spinner,
-    TableContainer,
-    PageContainer,
-    TableTitle,
-  },
-  props: {
-    fullWidth: {
-      required: false,
-      default: true,
-    },
-    isLoading: {
-      required: false,
-      default: false,
-    },
-    titleText: {
-      required: false,
-      default: null,
-    },
-  },
-}
-</script>
+<template>
+  <page-container>
+    <table-title v-if="titleText">
+      {{ titleText }}
+    </table-title>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else :cellPaddings="cellPaddings">
+          <slot />
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-container>
+</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 PageContainer = styled.div``
+
+const TableTitle = styled.div`
+  margin-bottom: 16px;
+  font-weight: bold;
+  font-size: 14px;
+  text-transform: uppercase;
+`
+
+const TableScroll = styled.div`
+  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 {
+    height: 5px; //height of the whole scrollbar area
+  }
+
+  ::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.colors.grey2};
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
+    border-radius: 4px;
+  }
+`
+
+const SpinnerWrapper = styled.div`
+  height: 150px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const containerAttrs = { cellPaddings: String }
+const TableContainer = styled("table", containerAttrs)`
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+  font-size: 13px;
+
+  thead {
+    font-weight: bold;
+
+    tr {
+      border-bottom: none !important;
+    }
+  }
+
+  tbody {
+    tr {
+      &:hover {
+        background-color: ${(props) => props.theme.colors.white};
+        cursor: pointer;
+
+        .arrow-container,
+        .input-placeholder,
+        .table-dropdown-item {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
+
+        input {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
+      }
+
+      td {
+        height: 40px;
+      }
+    }
+  }
+
+  th {
+    padding: 11px 15px;
+    background-color: ${(props) => props.theme.colors.blue1};
+    cursor: auto;
+    height: 40px;
+
+    .ordering {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-gap: 6px;
+    }
+  }
+
+  td {
+    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+
+    &.empty {
+      height: 100px;
+      text-align: center;
+      cursor: default;
+      background-color: #fff !important;
+    }
+
+    &.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;
+      }
+    }
+
+    &.checkbox {
+      padding: 7px 15px !important;
+      width: 40px;
+    }
+
+    &.checkbox-header {
+      width: 40px;
+    }
+  }
+
+  tr {
+    &.disabled {
+      cursor: not-allowed !important;
+    }
+
+    .arrow-dropdown {
+      visibility: hidden;
+    }
+
+    &.footer {
+      td {
+        background-color: ${(props) => props.theme.colors.grey5};
+        /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
+      }
+
+      .text {
+        cursor: auto !important;
+      }
+    }
+
+    .text {
+      padding: 10px 15px 10px 15px;
+      color: ${(props) => props.theme.colors.black};
+      cursor: pointer;
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .icons-container {
+      padding-right: 2px; // so that the icons are not cut off when hovering
+      width: 1%; // necessary so it doesn't take up too much white space
+      display: table-cell;
+      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:disabled {
+        background-color: ${(props) => props.theme.colors.grey5 + "!important"};
+      }
+
+      .drag-icon {
+        visibility: visible;
+      }
+
+      .drag-wrapper {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
+      .arrow-dropdown {
+        visibility: visible;
+      }
+    }
+
+    .drag-container {
+      display: table-cell;
+      width: 20px;
+      min-width: 20px;
+      height: 40px;
+    }
+
+    .drag-wrapper {
+      width: 16px;
+      height: 36px;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      border-radius: 4px;
+    }
+
+    .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 {
+    font-size: 13px;
+    padding: 5px 10px;
+    background: #fff;
+
+    &:focus {
+      background: ${(props) => props.theme.colors.grey5};
+    }
+  }
+
+  .open-container {
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+    margin-bottom: 5px;
+    cursor: auto;
+  }
+`
+
+export default {
+  name: "main-table",
+  components: {
+    TableScroll,
+    TableWrapper,
+    SpinnerWrapper,
+    Spinner,
+    TableContainer,
+    PageContainer,
+    TableTitle,
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: true,
+    },
+    cellPaddings: {
+      required: false,
+      default: '',
+    },
+    isLoading: {
+      required: false,
+      default: false,
+    },
+    titleText: {
+      required: false,
+      default: null,
+    },
+  },
+}
+</script>