@eturnity/eturnity_reusable_components 1.0.45 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.45",
+  "version": "1.0.49",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -13,20 +13,6 @@
         </thead>
         <tbody>
           <tr>
-            <td>
-              <input-number
-                placeholder="Enter distance"
-                :isError="false"
-                :numberPrecision="2"
-                unitName="pc"
-                :value="inputValue"
-                @input-change="onInputChange($event)"
-                errorMessage="Enter a number between 1 and 10"
-                :disabled="false"
-                :noBorder="true"
-                textAlign="left"
-              />
-            </td>
             <td class="text">Body 2</td>
             <td class="text">Body 3</td>
             <td class="text">Body 4</td>
@@ -36,6 +22,9 @@
           </tr>
         </tbody>
       </main-table>
+      <br />
+      <br />
+      <search-input :value="inputValue" @on-change="onInputChange" :disabled="false" placeholder="Search..." />
     </page-container>
   </ThemeProvider>
 </template>
@@ -46,7 +35,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import InputNumber from "@/components/inputs/inputNumber"
+import SearchInput from "@/components/inputs/searchInput"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -59,7 +48,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    InputNumber,
+    SearchInput,
   },
   data() {
     return {

package/src/assets/icons/collapse_arrow_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5"><g data-name="Layer 2"><path fill="#263238" d="M0 0h8L4 5 0 0z" data-name="Layer 1"/></g></svg>

package/src/assets/icons/search_icon_black.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9751 13.6383L11.3396 9.9957C12.0755 8.94938 12.4395 7.6858 12.3731 6.40752C12.3068 5.12923 11.8141 3.91027 10.9739 2.94605C10.1337 1.98183 8.9947 1.3282 7.73954 1.08993C6.48437 0.85166 5.1857 1.04256 4.05173 1.63202C2.91776 2.22148 2.01415 3.17536 1.48577 4.34076C0.957383 5.50615 0.834825 6.81556 1.13774 8.05906C1.44065 9.30257 2.1515 10.4082 3.15631 11.1986C4.16113 11.989 5.40173 12.4185 6.67922 12.4183C7.86776 12.418 9.02614 12.0434 9.99056 11.3474L13.626 14.9901L14.9751 13.6383ZM3.98109 9.38128C3.44671 8.84727 3.08262 8.16629 2.93499 7.42469C2.78736 6.68309 2.86284 5.91427 3.15185 5.2157C3.44086 4.51713 3.93039 3.92029 4.55837 3.50084C5.18635 3.08139 5.9245 2.85823 6.67922 2.85965C7.40253 2.85844 8.11118 3.06399 8.72198 3.45218C9.33279 3.84037 9.8204 4.39508 10.1276 5.05121C10.4348 5.70735 10.5488 6.43766 10.4562 7.15645C10.3637 7.87523 10.0684 8.55264 9.60512 9.10918L9.09703 9.61827C8.37063 10.2302 7.44086 10.5457 6.49283 10.5017C5.54479 10.4578 4.64804 10.0578 3.98109 9.38128Z" fill="#263238"/>
+</svg>

package/src/components/inputs/inputNumber/index.vue

@@ -89,6 +89,7 @@ const InputContainer = styled("input", inputProps)`
     props.isDisabled
       ? props.theme.colors.grey5 + " !important"
       : "#fff !important"};
+    box-sizing: border-box;
 
   &::placeholder {
     color: ${(props) =>

package/src/components/inputs/searchInput/index.vue

@@ -0,0 +1,84 @@
+<template>
+<container>
+  <input-wrapper>
+    <input-container
+      :placeholder="placeholder"
+      :value="value"
+      @input="onChangeHandler($event)"
+      :disabled="disabled"
+      :isDisabled="disabled"
+    />
+    <img
+      class="search-icn"
+      :src="require('../../../assets/icons/search_icon_black.svg')"
+    />
+</input-wrapper>
+</container>
+</template>
+
+<script>
+// import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+import styled from 'vue-styled-components'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+
+const inputAttrs = { isDisabled: Boolean }
+const InputContainer = styled('input', inputAttrs)`
+  border: 1px solid ${(props) => props.theme.colors.mediumGray};
+  padding: 11px 30px 11px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) => props.theme.colors.black};
+  width: 100%;
+  box-sizing: border-box;
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'auto'};
+
+  &::placeholder {
+    color: ${(props) => props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;
+
+  img {
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
+`
+
+export default {
+  name: "search-input",
+  components: {
+    InputContainer,
+    InputWrapper,
+    Container
+  },
+  props: {
+    value: {
+      required: true
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    placeholder: {
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    onChangeHandler(event) {
+      this.$emit('on-change', event)
+    }
+  }
+}
+</script>

package/src/components/spinner/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`

package/src/components/tableDropdown.vue/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <dropdown-row :colspan="colSpan" @click="toggleOpen" ref="dropdownItem">
+    <component-container :colSpan="colSpan">
+      <component-item v-for="(item, index) in tableItems" :key="index">
+        {{ item.value }}
+      </component-item>
+      <et-popover
+        v-if="showArchived"
+        style="position: absolute; left: 5px; top: 13px; z-index: 99"
+        button-class="error"
+        :text="$gettext(`Component has been archived and shouldn't be used`)"
+        triggerType="hover"
+      ></et-popover>
+      <arrow-down
+        v-if="!isOpen"
+        class="arrow-dropdown"
+        :src="require('../../assets/images/collapse_arrow_icon.svg')"
+      />
+      <arrow-up
+        v-else
+        :src="require('../../assets/images/collapse_arrow_icon.svg')"
+      />
+    </component-container>
+    <options-container
+      v-if="isOpen"
+      :top="getItemLocation('top')"
+      :width="getItemLocation('width')"
+      ref="optionsContainer"
+    >
+      <options-wrapper @click.prevent.stop>
+        <search-container @click.prevent.stop>
+          <search-input
+            :value="inputText"
+            :placeholder="$gettext('Keyword') + '...'"
+            @click.prevent.stop
+            @on-change="onSearch($event)"
+            ref="searchInput"
+          />
+        </search-container>
+        <spinner v-if="optionsLoading" />
+        <empty-text v-else-if="!optionsLoading && !optionItems.length">
+          {{ emptyText ? emptyText : $gettext("No components found.") }}
+        </empty-text>
+        <options-item
+          v-else
+          :colSpan="colSpan"
+          v-for="(item, index) in optionItems"
+          :key="index"
+          @click="onItemClick(item)"
+          :tabindex="0"
+          @keyup.enter.native="onItemClick(item)"
+        >
+          <span v-for="(option, idx) in optionsDisplay" :key="idx">
+            {{ item[option] }}
+          </span>
+        </options-item>
+      </options-wrapper>
+    </options-container>
+  </dropdown-row>
+</template>
+
+<script>
+// import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
+// To use:
+// <table-dropdown
+//   :colSpan="2"
+//   :tableItems="getDropdownValues(row)"
+//   :showArchived="
+//     row.selectedValue
+//       ? row.selectedValue.status_active === false
+//       : row.status_active === false
+//   "
+//   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
+//   @dropdown-search="onDropdownSearch($event)"
+//   @item-selected="onItemSelected({ item: $event, index })"
+//   :isOpen="isDropdownOpen(row)"
+//   :optionItems="groupComponents" // list of options
+//   :optionsLoading="dropdownOptionsLoading"
+//   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
+// />
+import styled from "vue-styled-components"
+import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+
+const DropdownRow = styled.td``
+
+const ComponentItem = styled.div`
+  padding-left: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const containerAttrs = { colSpan: Number }
+const ComponentContainer = styled("div", containerAttrs)`
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr)) auto;
+  grid-gap: 12px;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 5px 4px;
+`
+
+const ArrowDown = styled.img`
+  width: 8px;
+  transform: rotate(0deg);
+  transition: transform 150ms ease;
+`
+
+const ArrowUp = styled.img`
+  width: 8px;
+  transform: rotate(180deg);
+  transition: transform 150ms ease;
+`
+
+const optionsAttrs = { top: Number, width: Number }
+const OptionsContainer = styled("div", optionsAttrs)`
+  position: absolute;
+  display: grid;
+  top: ${(props) => props.top + "px"};
+  width: ${(props) => props.width + "px"};
+  max-height: 360px;
+  min-height: 200px;
+  overflow: auto;
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  z-index: 9999;
+  background: #fff;
+  border-radius: 4px;
+`
+
+const EmptyText = styled.div`
+  align-self: center;
+  justify-self: center;
+  height: 100px;
+  display: grid;
+  align-content: center;
+`
+
+const OptionsWrapper = styled.div`
+  display: grid;
+  position: relative;
+  padding: 12px;
+  grid-gap: 4px;
+  font-size: 14px;
+  grid-template-rows: max-content;
+  height: max-content;
+`
+
+const OptionsItem = styled("div", containerAttrs)`
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr));
+  grid-gap: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px;
+  height: max-content;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const SearchContainer = styled.div`
+  position: sticky;
+  top: 0;
+  padding-top: 6px;
+  background: #fff;
+  height: 40px;
+`
+
+export default {
+  name: "table-dropdown",
+  components: {
+    DropdownRow,
+    ComponentItem,
+    ComponentContainer,
+    ArrowDown,
+    ArrowUp,
+    OptionsContainer,
+    Spinner,
+    EmptyText,
+    SearchInput,
+    OptionsWrapper,
+    OptionsItem,
+    SearchContainer,
+  },
+  props: {
+    colSpan: {
+      required: false,
+      default: 1,
+    },
+    tableItems: {
+      required: true,
+    },
+    showArchived: {
+      required: false,
+      default: false,
+    },
+    isOpen: {
+      required: true,
+      default: false,
+    },
+    optionsLoading: {
+      required: false,
+      default: false,
+    },
+    emptyText: {
+      required: false,
+      default: null,
+    },
+    optionItems: {
+      required: true,
+    },
+    optionsDisplay: {
+      required: true,
+      default: [], // should be like ['display_name', 'company_item_number', 'description']
+    },
+  },
+  data() {
+    return {
+      inputText: "",
+    }
+  },
+  methods: {
+    toggleOpen() {
+      if (!this.isOpen) {
+        document.addEventListener("click", this.clickOutside)
+        this.$emit("dropdown-search", "")
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+        this.$emit("toggle-dropdown-open", { close: false })
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+        this.$emit("toggle-dropdown-open", { close: true })
+      }
+    },
+    scrollToItem() {
+      this.$refs.optionsContainer.$el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      })
+    },
+    onItemClick(item) {
+      this.$emit("item-selected", item)
+    },
+    onSearch(value) {
+      this.$emit("dropdown-search", value)
+    },
+    getItemLocation(value) {
+      let ref = this.$refs.dropdownItem
+      let location = ref.$el.getBoundingClientRect()[value]
+      if (value === "top") {
+        location = location + window.scrollY + 40
+      }
+      return location
+    },
+    clickOutside(event) {
+      if (event.target === this.$el || this.$el.contains(event.target)) {
+        return
+      }
+      // 'close: true' is needed in case a box is open and another box is clicked on
+      // so this one will close properly
+      document.removeEventListener("click", this.clickOutside)
+      this.$emit("toggle-dropdown-open", { close: true })
+    },
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        document.addEventListener("click", this.clickOutside)
+        this.$emit("dropdown-search", "")
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+      }
+    },
+  },
+}
+</script>

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

@@ -31,7 +31,7 @@ const TableTitle = styled.div`
 `
 
 const TableScroll = styled.div`
-  position: relative;
+  /* position: relative; */
   max-width: 100%;
 `
 
@@ -155,8 +155,6 @@ const TableContainer = styled.table`
   }
 
   tr {
-    position: relative;
-
     &.disabled {
       cursor: not-allowed;
     }