admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add select

Browse Source
This commit is contained in:
kandrusyak
2022-11-02 18:39:20 +03:00
parent 4fd1ff880c
commit ac282a624f
9 changed files with 281 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/BaseAddingNetwork.vue
View File

@@ -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",

37
src/components/base/BaseMenu.vue Normal file
View File

@@ -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>

187
src/components/base/BaseSelect.vue
View File

@@ -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;
fasdfasd() {
this.open = false;
},
closeSelect() {
this.isSelectOpen = false;
},
sendData(e) {
this.$emit("changeInput", e.target.value);
},
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>

142
src/components/base/OldBaseSelect.vue Normal file
View File

@@ -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>

2
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -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",

2
src/pages/clients/components/ClientsFormCreate.vue
View File

@@ -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",

2
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -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",

2
src/pages/clients/components/cells/TableCellBodyPriority.vue
View File

@@ -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"],

24
src/pages/settings/TheSettings.vue
View File

@@ -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>