@eturnity/eturnity_reusable_components 1.0.13 → 1.0.17

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>