From ac282a624f4a1912f9a89855e0b02af7e1477b6a Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@t1-consulting.ru>
Date: Wed, 2 Nov 2022 18:39:20 +0300
Subject: [PATCH] add select

---
 src/components/base/BaseAddingNetwork.vue     |   2 +-
 src/components/base/BaseMenu.vue              |  37 ++++
 src/components/base/BaseSelect.vue            | 189 +++++++-----------
 src/components/base/OldBaseSelect.vue         | 142 +++++++++++++
 .../components/CalendarFormAddEvent.vue       |   2 +-
 .../clients/components/ClientsFormCreate.vue  |   2 +-
 .../components/FormCreateBasicInfo.vue        |   2 +-
 .../cells/TableCellBodyPriority.vue           |   2 +-
 src/pages/settings/TheSettings.vue            |  24 ++-
 9 files changed, 281 insertions(+), 121 deletions(-)
 create mode 100644 src/components/base/BaseMenu.vue
 create mode 100644 src/components/base/OldBaseSelect.vue

diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue
index f78fe32..24704f6 100644
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import BaseSelect from "@/components/base/BaseSelect";
+import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableAddingNetwork",
diff --git a/src/components/base/BaseMenu.vue b/src/components/base/BaseMenu.vue
new file mode 100644
index 0000000..f640b90
--- /dev/null
+++ b/src/components/base/BaseMenu.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+  teleport(:to="appContainer")
+    .base-menu(:style="styles")
+      slot
+</template>
+
+<script>
+export default {
+  name: "BaseMenu",
+  computed: {
+    appContainer() {
+      return this.$.appContext.app._container;
+    },
+    parent() {
+      return this.$parent.$el;
+    },
+    parentSize() {
+      return this.parent?.getBoundingClientRect();
+    },
+    styles() {
+      return {
+        left: this.parentSize.left + "px",
+        top: this.parentSize.top + this.parentSize.height + "px",
+      };
+    },
+  },
+  mounted() {
+    console.log(this.parentSize);
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-menu
+  position: absolute
+  z-index: 10
+</style>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 13f51a4..1d81021 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,142 +1,101 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
-    @click="changeSelect"
-    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
-    )
-    .flex.mr-2(v-if="!forNetworks")
-      input.text-base.select.cursor-pointer(
-          :size="sizeInput"
-          v-model="optionData"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          @input="sendData"
-        )
-      .absolute.options.top-12.left-0(
-        v-show="isSelectOpen"
-        :id="id"
-        )
-        .option.px-4.py-1(
-          v-for="data in filteredListData"
-          @click="(e) => chooseOption(e)"
-          :key="data.id || data"
-          :id="data.id || data"
-          ) {{data.name || data}}
-    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
-      .absolute.options.top-11.left-0(
-        v-show="isSelectOpen"
-        :id="id")
-        .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
-          @click="(e) => chooseOption(e)"
-          :key="data.network"
-          :id="data.network"
-          :class="data.icon"
-          )
-    .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
-    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+  .base-select(@click="open = !open", :class="{'open': open }")
+    .placeholder.text-base {{ itemsMap[value] || placeholder }}
+    span.icon-down-arrow.open-icon(:class="{'open': open }")
+    base-menu(v-if="open")
+      .items-container(@click="open = false", @mouseleave="fasdfasd")
+        .item(v-for="item in items", :key="item.id" @click="clickItem(item.id)") {{ item.label }}
 </template>
 
 <script>
+import BaseMenu from "@/components/base/BaseMenu";
 export default {
-  name: "BaseSelect",
+  name: "VSelect",
+  components: { BaseMenu },
   props: {
-    id: String,
-    styleBorder: {
-      default: false,
+    placeholder: String,
+    modelValue: String,
+    items: {
+      type: Array,
+      default: () => [],
     },
-    separator: Boolean,
-    optionData: String,
-    listData: Array,
-    chooseOption: Function,
-    forNetworks: Boolean,
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    sizeInput: Number,
-    disabled: Boolean,
   },
+  emits: ["update:modelValue"],
   data() {
     return {
-      isSelectOpen: false,
+      open: false,
     };
   },
   computed: {
-    filteredListData() {
-      if (!this.disabled && this.optionData) {
-        let filteredList = [];
-        filteredList = this.listData.filter((elem) => {
-          let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
-          }
-          return elem.match(reg);
-        });
-        filteredList.length === 0 ? this.closeSelect() : this.openSelect();
-        return filteredList;
-      }
-      return this.listData;
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    itemsMap() {
+      return this.items.reduce(
+        (acc, item) => ({
+          ...acc,
+          [item.id]: item.label,
+        }),
+        {}
+      );
     },
   },
   methods: {
-    changeSelect() {
-      this.isSelectOpen = !this.isSelectOpen;
+    clickItem(id) {
+      this.value = id;
     },
-    openSelect() {
-      this.isSelectOpen = true;
-    },
-    closeSelect() {
-      this.isSelectOpen = false;
-    },
-    sendData(e) {
-      this.$emit("changeInput", e.target.value);
+    fasdfasd() {
+      this.open = false;
     },
   },
+  mounted() {
+    console.log(this.$.appContext.app._container);
+  },
 };
 </script>
 
-<style lang="sass" scoped>
-.container
-  border-radius: 4px
-  width: fit-content
-  color: var(--font-dark-blue-color)
-  background-color: var(--bg-ligth-blue-color)
-  &.border
-    background-color: var(--default-white)
-    border: 2px solid var(--border-light-grey-color)
-.select
-  appearance: none
-  border: none
-  outline: none
-  color: var(--font-dark-blue-color)
-  background-color: var(--font-black-color-0)
-  &.default
-    color: var(--font-black-color-1)
-  &::-webkit-calendar-picker-indicator
-    display: none
-    -webkit-appearance: none
-  &.networks
-    color: var(--font-dark-blue-color)
-  &::placeholder
-    color: var(--font-black-color-1)
-.options
-  z-index: 3
-  background-color: var(--default-white)
-  border-radius: 4px
-  box-shadow: var(--default-shadow)
+<style scoped lang="sass">
+.base-select
   width: 100%
-.option
-  color: var(--font-black-color)
+  border: 1.5px solid #D3D4DC
+  border-radius: 4px
+  padding: 9px 16px
+  background-color: white
+  user-select: none
+  display: flex
+  justify-content: space-between
+  align-items: center
+  gap: 16px
+  cursor: pointer
+  &.open
+    border: 1.5px solid #4772F2
+.items-container
+  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
+  border-radius: 4px
+  background-color: white
+  margin-top: 4px
+.placeholder
+  color: #090A15
+  opacity: 0.5
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  padding: 8px 16px
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  cursor: pointer
   &:hover
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
-.select-form-separator
-  background-color: var(--btn-blue-color-3)
-  height: 24px
-  width: 1px
-  border-radius: 1px
-.icon
-  color: var(--font-dark-blue-color)
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  font-size: 10px
+  display: flex
   &.open
     transform: rotate(180deg)
 </style>
diff --git a/src/components/base/OldBaseSelect.vue b/src/components/base/OldBaseSelect.vue
new file mode 100644
index 0000000..13f51a4
--- /dev/null
+++ b/src/components/base/OldBaseSelect.vue
@@ -0,0 +1,142 @@
+<template lang="pug">
+  .flex.box-border.container.items-center.cursor-pointer.relative(
+    @click="changeSelect"
+    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    )
+    .flex.mr-2(v-if="!forNetworks")
+      input.text-base.select.cursor-pointer(
+          :size="sizeInput"
+          v-model="optionData"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @input="sendData"
+        )
+      .absolute.options.top-12.left-0(
+        v-show="isSelectOpen"
+        :id="id"
+        )
+        .option.px-4.py-1(
+          v-for="data in filteredListData"
+          @click="(e) => chooseOption(e)"
+          :key="data.id || data"
+          :id="data.id || data"
+          ) {{data.name || data}}
+    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
+      .absolute.options.top-11.left-0(
+        v-show="isSelectOpen"
+        :id="id")
+        .flex.option.justify-center.py-1.text-xl(
+          v-for="data in listData"
+          @click="(e) => chooseOption(e)"
+          :key="data.network"
+          :id="data.network"
+          :class="data.icon"
+          )
+    .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+</template>
+
+<script>
+export default {
+  name: "BaseSelect",
+  props: {
+    id: String,
+    styleBorder: {
+      default: false,
+    },
+    separator: Boolean,
+    optionData: String,
+    listData: Array,
+    chooseOption: Function,
+    forNetworks: Boolean,
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    sizeInput: Number,
+    disabled: Boolean,
+  },
+  data() {
+    return {
+      isSelectOpen: false,
+    };
+  },
+  computed: {
+    filteredListData() {
+      if (!this.disabled && this.optionData) {
+        let filteredList = [];
+        filteredList = this.listData.filter((elem) => {
+          let reg = new RegExp(`${this.optionData}`, "img");
+          if (elem.name) {
+            return elem.name.match(reg);
+          }
+          return elem.match(reg);
+        });
+        filteredList.length === 0 ? this.closeSelect() : this.openSelect();
+        return filteredList;
+      }
+      return this.listData;
+    },
+  },
+  methods: {
+    changeSelect() {
+      this.isSelectOpen = !this.isSelectOpen;
+    },
+    openSelect() {
+      this.isSelectOpen = true;
+    },
+    closeSelect() {
+      this.isSelectOpen = false;
+    },
+    sendData(e) {
+      this.$emit("changeInput", e.target.value);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.container
+  border-radius: 4px
+  width: fit-content
+  color: var(--font-dark-blue-color)
+  background-color: var(--bg-ligth-blue-color)
+  &.border
+    background-color: var(--default-white)
+    border: 2px solid var(--border-light-grey-color)
+.select
+  appearance: none
+  border: none
+  outline: none
+  color: var(--font-dark-blue-color)
+  background-color: var(--font-black-color-0)
+  &.default
+    color: var(--font-black-color-1)
+  &::-webkit-calendar-picker-indicator
+    display: none
+    -webkit-appearance: none
+  &.networks
+    color: var(--font-dark-blue-color)
+  &::placeholder
+    color: var(--font-black-color-1)
+.options
+  z-index: 3
+  background-color: var(--default-white)
+  border-radius: 4px
+  box-shadow: var(--default-shadow)
+  width: 100%
+.option
+  color: var(--font-black-color)
+  &:hover
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.icon
+  color: var(--font-dark-blue-color)
+  &.open
+    transform: rotate(180deg)
+</style>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index c422da0..5fc7836 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -77,7 +77,7 @@
 
 <script>
 import * as moment from "moment/moment";
-import BaseSelect from "@/components/base/BaseSelect";
+import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 export default {
   name: "FormChangeEvent",
diff --git a/src/pages/clients/components/ClientsFormCreate.vue b/src/pages/clients/components/ClientsFormCreate.vue
index 140f8cc..3cc862a 100644
--- a/src/pages/clients/components/ClientsFormCreate.vue
+++ b/src/pages/clients/components/ClientsFormCreate.vue
@@ -37,7 +37,7 @@ import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateId
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
-import BaseSelect from "@/components/base/BaseSelect";
+import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 export default {
   name: "ClientsFormCreate",
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index 122f0aa..ce958f2 100644
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -30,7 +30,7 @@
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
-import BaseSelect from "@/components/base/BaseSelect";
+import BaseSelect from "@/components/base/OldBaseSelect";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "FormCreateBasicInfo",
diff --git a/src/pages/clients/components/cells/TableCellBodyPriority.vue b/src/pages/clients/components/cells/TableCellBodyPriority.vue
index 6ed0eec..2cc7d58 100644
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -9,7 +9,7 @@
 
 <script>
 import { column } from "@/pages/clients/utils/tableConfig";
-import BaseSelect from "@/components/base/BaseSelect";
+import BaseSelect from "@/components/base/OldBaseSelect";
 export default {
   name: "TableCellBodyPriority",
   props: ["value", "width", "isOpenChange", "choosePriority"],
diff --git a/src/pages/settings/TheSettings.vue b/src/pages/settings/TheSettings.vue
index bde9e99..0fbbde9 100644
--- a/src/pages/settings/TheSettings.vue
+++ b/src/pages/settings/TheSettings.vue
@@ -1,9 +1,31 @@
 <template lang="pug">
-  div SettingsPage
+  div
+    v-select(:items="items", placeholder="Выберите значение", v-model="value" )
 </template>
 
 <script>
+import VSelect from "@/components/base/BaseSelect";
 export default {
   name: "TheSettings",
+  components: { VSelect },
+  data() {
+    return {
+      items: [
+        {
+          id: "1",
+          label: "12312312",
+        },
+        {
+          id: "2",
+          label: "123123afsdfasdf12",
+        },
+        {
+          id: "3",
+          label: "123fasvcbxcvbxcvbxcvbxcvdfasdfasdfasdfasd12312",
+        },
+      ],
+      value: "",
+    };
+  },
 };
 </script>