Добавила иконки

This commit is contained in:
Daria Golova
2023-07-04 15:17:30 +03:00
parent 6f8637c25d
commit 017f6a3085
5 changed files with 75 additions and 18 deletions

View File

@@ -0,0 +1,20 @@
<template lang="pug">
svg(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
g(v-if="nameSvg === 'expanded'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H9C9.9665 2.25 10.75 3.0335 10.75 4V20C10.75 20.9665 9.9665 21.75 9 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H9C9.13807 20.25 9.25 20.1381 9.25 20V4C9.25 3.86193 9.13807 3.75 9 3.75H4Z" :fill="active ? '#fff' : '#9294A7'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M13.25 4C13.25 3.0335 14.0335 2.25 15 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H15C14.0335 21.75 13.25 20.9665 13.25 20V4ZM15 3.75C14.8619 3.75 14.75 3.86193 14.75 4V20C14.75 20.1381 14.8619 20.25 15 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H15Z" :fill="active ? '#fff' : '#9294A7'")
g(v-if="nameSvg === 'compressed'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H6C6.9665 2.25 7.75 3.0335 7.75 4V20C7.75 20.9665 6.9665 21.75 6 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H6C6.13807 20.25 6.25 20.1381 6.25 20V4C6.25 3.86193 6.13807 3.75 6 3.75H4Z" :fill="active ? '#fff' : '#9294A7'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M9.25 4C9.25 3.0335 10.0335 2.25 11 2.25H13C13.9665 2.25 14.75 3.0335 14.75 4V20C14.75 20.9665 13.9665 21.75 13 21.75H11C10.0335 21.75 9.25 20.9665 9.25 20V4ZM11 3.75C10.8619 3.75 10.75 3.86193 10.75 4V20C10.75 20.1381 10.8619 20.25 11 20.25H13C13.1381 20.25 13.25 20.1381 13.25 20V4C13.25 3.86193 13.1381 3.75 13 3.75H11Z" :fill="active ? '#fff' : '#9294A7'")
path(fill-rule="evenodd" clip-rule="evenodd" d="M16.25 4C16.25 3.0335 17.0335 2.25 18 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H18C17.0335 21.75 16.25 20.9665 16.25 20V4ZM18 3.75C17.8619 3.75 17.75 3.86193 17.75 4V20C17.75 20.1381 17.8619 20.25 18 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H18Z" :fill="active ? '#fff' : '#9294A7'")
</template>
<script>
export default {
name: "CalendarDateSwitcherSvg",
props: {
nameSvg: { type: String, default: "expanded" },
active: Boolean,
},
};
</script>

View File

@@ -63,8 +63,14 @@
:options="displayTypesList",
no-caps,
toggle-color="light-blue-4",
padding="4px"
padding="0px"
)
template(v-slot:one)
.w-12.h-8.flex.items-center.justify-center
date-switcher-svg(name-svg="expanded", :active="value === 'expanded'")
template(v-slot:two)
.w-12.h-8.flex.items-center.justify-center
date-switcher-svg(name-svg="compressed", :active="value === 'collapsed'")
</template>
<script>
@@ -72,19 +78,20 @@ import BaseInput from "@/components/base/BaseInput";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import { mapState, mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import DateSwitcherSvg from "@/pages/newCalendar/components/CalendarDateSwitcherSvg.vue";
export default {
name: "CalendarHeader",
mixins: [v_model],
components: { BaseInput, BaseCalendar },
components: { BaseInput, BaseCalendar, DateSwitcherSvg },
data() {
return {
displayTypesList: [
{
label: "exp",
slot: "one",
value: "expanded",
},
{
label: "col",
slot: "two",
value: "collapsed",
},
],