WIP Поправила форму создания, заменила селекты

2022-11-14 18:39:48 +03:00
parent 91bc4db2de
commit 558795a8b7
7 changed files with 240 additions and 144 deletions
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+    @click="open = !open",
+    :class="{'open': open, 'border-none': borderNone}",
+  )
+    .placeholder.text-base.flex.items-center(
+      :class="{'value-color': value.label || placeholderOpacity}"
+    ) {{ value.label || placeholder }}
+    .flex.items-center
+      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+      span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+    base-options(
+      v-if="open",
+    )
+      .items-container.mt-1(
+        @click="closeOptions",
+        v-click-outside="leaveSelect"
+      )
+        .item.py-2.px-4.cursor-pointer(
+          v-for="item in items",
+          :key="item.id"
+          @click="clickItem(item.id, item.label)"
+        ) {{ item.label }}
+</template>
+
+<script>
+import BaseOptions from "@/components/base/BaseOptions.vue";
+export default {
+  name: "BaseCustomSelect",
+  components: { BaseOptions },
+  props: {
+    placeholder: String,
+    modelValue: Object,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    borderNone: Boolean,
+    separator: Boolean,
+    placeholderOpacity: Boolean,
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    clickItem(id, label) {
+      this.value = {
+        id: id,
+        label: label,
+      };
+    },
+    leaveSelect() {
+      this.open = false;
+    },
+    closeOptions(e) {
+      e.stopPropagation();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-select
+  width: 100%
+  border: 1.5px solid #D3D4DC
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  &.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
+.placeholder
+  color: #090A15
+  opacity: 0.5
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.open
+    transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+</style>