@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

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

@@ -1,195 +1,195 @@
 <template>
-  <page-wrapper>
-    <title-text>
+  <PageWrapper>
+    <TitleText>
       {{ tableTitle }}
-    </title-text>
-    <table-scroll>
-      <table-wrapper :fullWidth="fullWidth">
-        <spinner-wrapper v-if="isLoading">
-          <spinner />
-        </spinner-wrapper>
-        <table-container v-else>
+    </TitleText>
+    <TableScroll>
+      <TableWrapper :full-width="fullWidth">
+        <SpinnerWrapper v-if="isLoading">
+          <Spinner />
+        </SpinnerWrapper>
+        <TableContainer v-else>
           <thead>
             <tr>
-              <table-header v-for="(item, index) in headerItems" :key="index">
+              <TableHeader v-for="(item, index) in headerItems" :key="index">
                 {{ item.value }}
-              </table-header>
-              <div v-if="showIconsContainer && tableItems.length" />
+              </TableHeader>
+              <div v-if="showIconsContainer && tableItems.length"></div>
             </tr>
           </thead>
           <tbody>
-            <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
-              <empty-container>
+            <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
+              <EmptyContainer>
                 {{ 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">
+              </EmptyContainer>
+            </EmptyTd>
+            <TableRow v-for="(row, index) in tableItems" v-else :key="index">
+              <TableItem v-for="(item, idx) in row" :key="idx">
                 {{ item.value }}
-              </table-item>
-              <icons-container v-if="showIconsContainer">
-                <delete-icon
-                  @click="$emit('on-click-delete', index)"
+              </TableItem>
+              <IconsContainer v-if="showIconsContainer">
+                <DeleteIcon
                   color="gray"
+                  @click="$emit('on-click-delete', index)"
                 />
-              </icons-container>
-            </table-row>
+              </IconsContainer>
+            </TableRow>
           </tbody>
-        </table-container>
-      </table-wrapper>
-    </table-scroll>
-  </page-wrapper>
+        </TableContainer>
+      </TableWrapper>
+    </TableScroll>
+  </PageWrapper>
 </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 'vue3-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-weight: 700;
-  text-align: left;
-`
-
-const TableRow = styled.tr`
-  &:hover {
-    background-color: #f5f7fa;
-    cursor: pointer;
-  }
-`
-
-const TitleText = styled.div`
-  font-weight: 700;
-  margin-bottom: 6px;
-`
-
-const PageWrapper = styled.div`
-  margin: 16px 0;
-  font-size: 13px;
-`
+  // 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 'vue3-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
+    }
 
-const IconsContainer = styled.div`
-  width: 100%;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  background-color: #fff;
+    track ::-webkit-scrollbar-track {
+      background: #fff;
+    }
 
-  &:hover {
+    ::-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-weight: 700;
+    text-align: left;
+  `
+
+  const TableRow = styled.tr`
+    &:hover {
+      background-color: #f5f7fa;
+      cursor: pointer;
+    }
+  `
+
+  const TitleText = styled.div`
+    font-weight: 700;
+    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;
-  }
-`
-
-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
+
+    &: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: 'ViewTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      TableContainer,
+      TableHeader,
+      TableItem,
+      TableRow,
+      TitleText,
+      PageWrapper,
+      DeleteIcon,
+      IconsContainer,
+      Spinner,
+      SpinnerWrapper,
+      EmptyContainer,
+      EmptyTd,
     },
-    showDeleteButton: {
-      required: false,
-      default: false
+    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',
+      },
     },
-    isLoading: {
-      required: false,
-      default: false
+    computed: {
+      showIconsContainer() {
+        return this.showDeleteButton
+      },
     },
-    emptyText: {
-      required: false,
-      default: 'There are no items'
-    }
-  },
-  computed: {
-    showIconsContainer() {
-      return this.showDeleteButton
-    }
   }
-}
 </script>