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

[WIP] Исправил стили сайдбара на странице календаря

Browse Source
This commit is contained in:
megavrilinvv
2023-07-14 18:23:34 +03:00
parent 5fa7e3252d
commit 67e2c3f22c
5 changed files with 216 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/icons/medcard.svg
View File

@@ -1,6 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" fill="#9294A7"/>
<path d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" fill="#9294A7"/>
</g>
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.22099 2.30769C6.40882 1.00296 7.53814 0 8.90323 0H15.0968C16.4619 0 17.5912 1.00296 17.779 2.30769H21.2903C22.7868 2.30769 24 3.51308 24 5V27.3077C24 28.7946 22.7868 30 21.2903 30H2.70968C1.21316 30 0 28.7946 0 27.3077V5C0 3.51308 1.21316 2.30769 2.70968 2.30769H6.22099ZM6.22099 4.61538H2.70968C2.49589 4.61538 2.32258 4.78758 2.32258 5V27.3077C2.32258 27.5201 2.49589 27.6923 2.70968 27.6923H21.2903C21.5041 27.6923 21.6774 27.5201 21.6774 27.3077V5C21.6774 4.78758 21.5041 4.61538 21.2903 4.61538H17.779C17.5912 5.92011 16.4619 6.92308 15.0968 6.92308H8.90323C7.53814 6.92308 6.40882 5.92011 6.22099 4.61538ZM8.90323 2.30769C8.68944 2.30769 8.51613 2.47989 8.51613 2.69231V4.23077C8.51613 4.44319 8.68944 4.61538 8.90323 4.61538H15.0968C15.3106 4.61538 15.4839 4.44319 15.4839 4.23077V2.69231C15.4839 2.47989 15.3106 2.30769 15.0968 2.30769H8.90323Z" fill="#9294A7"/>
<path d="M2.70968 4.61538H6.22099C6.40882 5.92011 7.53814 6.92308 8.90323 6.92308H15.0968C16.4619 6.92308 17.5912 5.92011 17.779 4.61538H21.2903C21.5041 4.61538 21.6774 4.78758 21.6774 5V27.3077C21.6774 27.5201 21.5041 27.6923 21.2903 27.6923H2.70968C2.49589 27.6923 2.32258 27.5201 2.32258 27.3077V5C2.32258 4.78758 2.49589 4.61538 2.70968 4.61538Z" fill="#9294A7"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
src/components/BaseInput.vue
View File

@@ -26,9 +26,9 @@
hide-bottom-space,
)
template(v-slot:prepend, v-if="iconLeft")
slot
slot(name="iconLeft")
template(v-slot:append, v-if="iconRight")
slot
slot(name="iconRight")
slot(v-if="!iconLeft && !iconRight")
</template>

111
src/pages/newCalendar/components/CalendarOpenSidebar.vue
View File

@@ -2,7 +2,7 @@
.sidebar-wrapper.flex.flex-col.gap-y-1
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
q-btn.rotate-180(
@click="openSidebar",
@click="openSidebar(); hideSidebar()",
dense,
padding="8px",
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
@@ -30,35 +30,42 @@
.status.flex.items-center.gap-x-1.px-2
img(:src="item.icon")
span {{item.name}}
.flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
.flex.h-8.w-full.items-center.justify-between
base-input(
v-model="foundPerson",
debounce="10",
@keyup.enter="searchPerson",
@input="searchPerson",
id="input",
placeholder="Найти пациента...",
outlined,
:width="160",
iconLeft,
fontSize="12px",
lineHeight="16px",
textColor="var(--font-grey-color)"
.flex.flex-col.px-4.pt-6px.pb-0(:class="choiceState()", v-else)
.flex.flex-col.gap-y-2
.flex.h-8.w-full.items-center.justify-between
base-input.input(
v-model="foundPerson",
debounce="10",
@keyup.enter="searchPerson",
@input="searchPerson",
id="input",
placeholder="Найти пациента...",
:width="160"
size="S",
:iconLeft="!foundPerson",
iconRight
)
template(v-slot:iconLeft)
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
template(v-slot:iconRight)
q-icon.cursor-pointer(
@click="copyValue(foundPerson)"
name="app:icon-copy",
size="16px",
style="color: var(--font-grey-color)"
)
q-btn.ml-2(
@click="sortPerson(elem.data)",
icon="app:sort-number",
:class="sortingClass",
:style="{width: '32px', height: '32px'}",
padding="0"
)
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(elem.data)"
)
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
q-btn.btn.ml-2(
@click="sortPerson(elem.data)",
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
:style="{width: '32px', height: '32px'}",
padding="0"
)
img(:src="sort_word")
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(elem.data)"
)
span Все
img(v-if="selectAll(elem.data)", :src="icon_ok")
.flex.items-center.h-6 Все
img(v-if="selectAll(elem.data)", :src="icon_ok")
.person-wrapper.flex.flex-col
.person.items-center.flex.justify-between.py-2.cursor-pointer(
v-for="(person, index) in choiceData(elem.data)",
@@ -68,7 +75,7 @@
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
.flex.flex-col.font-medium
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
.text.text-xsx {{person.birthday}}
.grey-color.text-xsx {{person.birthday}}
img.h-6.w-6(v-if="person.check", :src="icon_ok")
</template>
@@ -76,10 +83,11 @@
import arrow from "@/assets/icons/double_left_arrow.svg";
import icon_ok from "@/assets/icons/icon_ok.svg";
import sort_word from "@/assets/icons/sort_word.svg";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInput from "@/components/BaseInput.vue";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "CalendarOpenSidebar",
props: { openSidebar: Function, createForm: Function },
@@ -97,6 +105,17 @@ export default {
trimOwnerName: trimName,
};
},
computed: {
sortingClass() {
return this.sort
? {
"sort-icon-active": true,
}
: {
"sort-icon-default": true,
};
},
},
methods: {
choiceState() {
let num = 0;
@@ -114,8 +133,13 @@ export default {
};
},
choiceForm(choice, idx) {
if (choice)
if (choice) {
if (idx === 2) {
this.foundPerson = "";
this.sortData = [];
}
return (this.patientList.find((e) => e.id === idx).choice = false);
}
this.patientList.find((e) => e.id === idx).choice = true;
},
checkPerson(index, arr) {
@@ -150,6 +174,9 @@ export default {
arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
}
},
hideSidebar() {
this.patientList.forEach((e) => (e.choice = false));
},
},
};
</script>
@@ -168,6 +195,12 @@ export default {
background: var(--default-white)
border-radius: 4px
color: var(--font-dark-blue-color)
&:last-child
border-bottom-left-radius: 0.25rem
border-bottom-right-radius: 0.25rem
.expansion :deep(.q-item__section--side)
color: var(--font-black-color)
.select
padding-bottom: 2px
@@ -191,10 +224,14 @@ export default {
.patient :deep(.q-expansion-item__content)
padding-bottom: 0px
.btn
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
.sort-icon-active
background-color: var(--btn-blue-color)
color: var(--default-white)
#input :deep(.q-field__control)
height: 32px
.q-field__prepend
@@ -210,7 +247,7 @@ export default {
padding: 10px 16px !important
min-height: 54px
.text
.grey-color
color: var(--font-grey-color)
.q-expansion-item :deep(.q-item)
@@ -251,4 +288,10 @@ export default {
.default
max-height: 0px
transition: all 0.5s ease-in
.input :deep(.q-field__prepend)
padding-right: 4px
.input :deep(.q-field__append)
padding-left: 6px
</style>

178
src/pages/newCalendar/components/CalendarSidebar.vue
View File

@@ -11,15 +11,15 @@
.button.flex
base-button(width="40px", @click="createForm")
q-icon(name="app:plus", size="12px")
.button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
q-btn.blue-hover(
v-click-outside="hideActive",
@click="()=>clickButton(svg.name)",
.button.flex.relative.btn-sidebar.button-svg.cursor-pointer(v-for="svg in patientData.arrSvg")
q-btn(
:class="{'active-btn': findActiveBtn(svg.name)}",
@click="()=>showActive(svg.name)",
dense,
style="color: var(--font-grey-color); borderRadius: 50%",
style="borderRadius: 50%",
:padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
)
calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
calendar-sidebar-svg.svg(:name-svg="svg.name", :active="svg.active")
.separator.flex.absolute(v-show="allLeave")
.sidebar.flex-col.flex
.mark-top.flex.w-2.h-2
@@ -29,7 +29,8 @@
v-if="svg.name === 'round'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.status-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
@@ -44,7 +45,8 @@
v-if="svg.name === 'medcard'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.fill-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
@@ -59,40 +61,48 @@
v-if="svg.name === 'group'",
anchor="center start",
self="top right",
:style="{'margin-left': '8px !important'}"
:style="{'margin-left': '8px !important'}",
@before-hide="hideActive"
)
.patient-wrapper.flex.flex-col.gap-y-4.px-4.pt-4
.font-bold.text-xm {{svg.text}}
.flex.flex-col.relative(:style="{height: '391px'}")
.flex.h-8.w-full.items-center.justify-between
base-input(
v-model="foundPerson",
debounce="10",
@keyup.enter="searchPerson",
@input="searchPerson",
id="input",
placeholder="Найти пациента...",
outlined,
:width="160",
iconLeft,
fontSize="12px",
lineHeight="16px",
textColor="var(--font-grey-color)"
.flex.flex-col.relative(:style="{maxHeight: '391px'}")
.flex.flex-col.gap-y-2
.flex.h-8.w-full.items-center.justify-between
base-input.input(
v-model="foundPerson",
debounce="10",
@keyup.enter="searchPerson",
@input="searchPerson",
id="input",
placeholder="Найти пациента...",
:width="160"
size="S",
:iconLeft="!foundPerson",
iconRight
)
template(v-slot:iconLeft)
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
template(v-slot:iconRight)
q-icon.cursor-pointer(
@click="copyValue(foundPerson)"
name="app:icon-copy",
size="16px",
style="color: var(--font-grey-color)"
)
q-btn.ml-2(
icon="app:sort-number",
@click="sortPerson(patientsData)",
:style="{width: '32px', height: '32px'}",
padding="0",
:class="sortingClass"
)
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(patientsData)"
)
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
q-btn.btn.ml-2(
@click="sortPerson(patientsData)",
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
:style="{ width: '32px', height: '32px'}",
padding="0"
)
img(:src="sort_word")
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(patientsData)"
)
span Все
img(v-if="selectAll(patientsData)", :src="icon_ok")
.person-wrapper.flex.flex-col
.flex.items-center Все
img(v-if="selectAll(patientsData)", :src="icon_ok")
.person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
.person.items-center.flex.justify-between.py-2.cursor-pointer(
v-for="(person, index) in choiceData(patientsData)",
@click="checkPerson(index, patientsData)"
@@ -103,19 +113,19 @@
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
.text.text-xsx {{person.birthday}}
img.h-6.w-6(v-if="person.check", :src="icon_ok")
.gradient.flex.absolute
.gradient.flex.absolute(v-if="isGradient")
</template>
<script>
import arrow from "@/assets/icons/double_left_arrow.svg";
import icon_ok from "@/assets/icons/icon_ok.svg";
import sort_word from "@/assets/icons/sort_word.svg";
import BaseInput from "@/components/base/BaseInput.vue";
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "CalendarSidebar",
@@ -134,6 +144,7 @@ export default {
sortData: [],
sort: false,
trimOwnerName: trimName,
isGradient: true,
};
},
computed: {
@@ -142,19 +153,39 @@ export default {
? false
: true;
},
sortingClass() {
return this.sort
? {
"sort-icon-active": true,
}
: {
"sort-icon-default": true,
};
},
},
methods: {
findActiveBtn(name) {
return this.patientData.arrSvg.find((e) => e.name === name)?.active
? true
: false;
},
hideActive() {
this.patientData.arrSvg.forEach((e) => {
if (e.active) e.active = false;
});
this.sortData = [];
this.foundPerson = "";
this.patientsData.forEach((e) => (e.check = false));
},
clickButton(name) {
showActive(name) {
this.patientData.arrSvg = this.patientData.arrSvg.map((e) => {
if (e.name === name) return { ...e, active: true };
return { ...e, active: false };
});
},
copyValue(text) {
navigator.clipboard.writeText(text);
},
checkPerson(index, arr) {
arr.map((e) => {
if (e.id === index) e.check = !e.check;
@@ -185,6 +216,21 @@ export default {
arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
}
},
scrollTo(event) {
if (event.currentTarget.scrollTop === 305)
return (this.isGradient = false);
this.isGradient = true;
},
},
watch: {
foundPerson: {
immediate: true,
handler(val) {
if (val && document.getElementById("persons").offsetHeight < 311) {
this.isGradient = false;
}
},
},
},
};
</script>
@@ -199,6 +245,9 @@ export default {
background: var(--default-white)
align-items: center
justify-content: center
&:last-child
border-bottom-left-radius: 0.25rem
border-bottom-right-radius: 0.25rem
.btn-sidebar
&:hover
@@ -215,7 +264,7 @@ export default {
.patient-wrapper
width: 232px
height: 445px
max-height: 445px
color: var(--font-dark-blue-color)
.status
@@ -229,11 +278,12 @@ export default {
.person-wrapper
overflow-y: auto
margin-right: -10px
max-height: 311px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
margin-top: -48px
margin-bottom: 26px
margin-top: -28px
margin-bottom: 18px
.person
height: 56px
@@ -247,6 +297,12 @@ export default {
.q-field__prepend
height: 32px
.input :deep(.q-field__prepend)
padding-right: 4px
.input :deep(.q-field__append)
padding-left: 6px
.separator
display: none
z-index: 6
@@ -269,15 +325,39 @@ export default {
border-radius: 4px
color: var(--default-white)
// .q-btn .blue-hover
// transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
// &:hover
// background: var(--bg-light-blue-color)
.gradient
width: 232px
height: 44px
right: 0px
bottom: 0px
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
.sort-icon-active
background-color: var(--btn-blue-color)
color: var(--default-white)
.active-btn
transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
background: var(--bg-light-blue-color)
.q-btn :deep(.q-focus-helper)
display: none
.q-btn :deep(.q-ripple)
display: none
.button-svg
&:hover
.svg :deep(.hover)
opacity: 1
transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
</style>
<style lang="sass">
.q-menu
box-shadow: -4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)
</style>

12
src/pages/newCalendar/components/CalendarSidebarSvg.vue
View File

@@ -2,13 +2,13 @@
svg(:width="configSize[nameSvg].width" :height="configSize[nameSvg].height" :viewBox="`0 0 ${configSize[nameSvg].width} ${configSize[nameSvg].height}`" fill="none" xmlns="http://www.w3.org/2000/svg")
g(v-if="nameSvg === 'round'")
path(opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 20C7.5 26.9036 13.0964 32.5 20 32.5C26.9036 32.5 32.5 26.9036 32.5 20C32.5 13.0964 26.9036 7.5 20 7.5C13.0964 7.5 7.5 13.0964 7.5 20ZM20 5C11.7157 5 5 11.7157 5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5Z" :fill="active ? '#4772F2' : '#9294A7'")
path(d="M10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30C14.4772 30 10 25.5228 10 20Z" :fill="active ? '#4772F2' : '#9294A7'")
path.hover(:opacity="active ? '1' : '0.6'" d="M10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30C14.4772 30 10 25.5228 10 20Z" :fill="active ? '#4772F2' : '#9294A7'")
g(v-if="nameSvg === 'medcard'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" :fill="active ? '#4772F2' : '#9294A7'")
path(d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" :fill="active ? '#4772F2' : '#9294A7'")
path.hover(:opacity="active ? '1' : '0.6'" fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" :fill="active ? '#4772F2' : '#9294A7'")
path.hover(:opacity="active ? '1' : '0.6'" d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" :fill="active ? '#4772F2' : '#9294A7'")
g(v-if="nameSvg === 'group'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M0 23.6157C0 20.3869 2.6735 17.7695 5.97143 17.7695H16.0286C19.3265 17.7695 22 20.3869 22 23.6157V24.8464C22 26.036 21.015 27.0003 19.8 27.0003H2.2C0.984974 27.0003 0 26.036 0 24.8464V23.6157Z" :fill="active ? '#4772F2' : '#9294A7'")
path(d="M17.1272 8.68044C17.1272 12.0644 14.3839 14.8077 11 14.8077C7.616 14.8077 4.87275 12.0644 4.87275 8.68044C4.87275 5.29647 7.616 2.55322 11 2.55322C14.3839 2.55322 17.1272 5.29647 17.1272 8.68044Z" :fill="active ? '#4772F2' : '#9294A7'")
path.hover(:opacity="active ? '1' : '0.6'" fill-rule="evenodd" clip-rule="evenodd" d="M0 23.6157C0 20.3869 2.6735 17.7695 5.97143 17.7695H16.0286C19.3265 17.7695 22 20.3869 22 23.6157V24.8464C22 26.036 21.015 27.0003 19.8 27.0003H2.2C0.984974 27.0003 0 26.036 0 24.8464V23.6157Z" :fill="active ? '#4772F2' : '#9294A7'")
path.hover(:opacity="active ? '1' : '0.6'" d="M17.1272 8.68044C17.1272 12.0644 14.3839 14.8077 11 14.8077C7.616 14.8077 4.87275 12.0644 4.87275 8.68044C4.87275 5.29647 7.616 2.55322 11 2.55322C14.3839 2.55322 17.1272 5.29647 17.1272 8.68044Z" :fill="active ? '#4772F2' : '#9294A7'")
g(opacity="0.6")
path(d="M20.3457 12.077H27.66C30.0584 12.077 32.0028 14.04 32.0028 16.4616V17.3847C32.0028 18.2768 31.2865 19.0001 30.4028 19.0001H23.6888C22.357 16.8586 20.129 15.3317 17.5488 14.8961C18.2892 14.1192 18.8898 13.2091 19.3081 12.2029C19.6406 12.1206 19.9881 12.077 20.3457 12.077Z" :fill="active ? '#4772F2' : '#9294A7'")
path(d="M24.0677 9.83683C26.5477 9.83683 28.5582 7.82634 28.5582 5.34627C28.5582 2.8662 26.5477 0.855713 24.0677 0.855713C21.5876 0.855713 19.5771 2.8662 19.5771 5.34627C19.5771 7.82634 21.5876 9.83683 24.0677 9.83683Z" :fill="active ? '#4772F2' : '#9294A7'")
@@ -32,5 +32,3 @@ export default {
},
};
</script>
<style lang="sass" scoped></style>