Merge pull request #20 from dderbentsov/UC-5
Поправлены стили формы добавления ивента, исправлены зависимости pack…
This commit is contained in:
Алексей Дёмин
@@ -1,5 +1,3 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
};
|
||||
|
||||
2051
package-lock.json
generated
2051
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -8,7 +8,6 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.1.5",
|
||||
"vuex": "^4.0.2"
|
||||
@@ -21,13 +20,13 @@
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@webdiscus/pug-loader": "^2.9.4",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"node-sass": "^7.0.3",
|
||||
"eslint": "^8.25.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^9.6.0",
|
||||
"postcss": "^8.4.17",
|
||||
"postcss-loader": "^7.0.1",
|
||||
"pug": "^3.0.2",
|
||||
"pug-plain-loader": "^1.1.0",
|
||||
"prettier": "^2.4.1",
|
||||
"sass-loader": "^13.0.2",
|
||||
"tailwindcss": "^3.1.8"
|
||||
},
|
||||
@@ -38,7 +37,8 @@
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
"eslint:recommended",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const tailwind = require('tailwindcss')
|
||||
const autoprefixer = require('autoprefixer')
|
||||
const tailwindConfig = require('./tailwind.config')
|
||||
const tailwind = require("tailwindcss");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const tailwindConfig = require("./tailwind.config");
|
||||
|
||||
module.exports = {
|
||||
plugins: [tailwind(tailwindConfig), autoprefixer],
|
||||
}
|
||||
};
|
||||
|
||||
47
src/App.vue
47
src/App.vue
@@ -1,39 +1,30 @@
|
||||
<template lang="pug">
|
||||
.app-container
|
||||
.flex.flex-col.w-full.h-full.gap-y-2
|
||||
the-header
|
||||
.pages-container
|
||||
.flex.flex-auto
|
||||
the-sidebar
|
||||
router-view
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheHeader from "@/components/TheHeader";
|
||||
import TheSidebar from "@/components/TheSidebar";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {TheHeader, TheSidebar}
|
||||
}
|
||||
import TheHeader from "@/components/TheHeader";
|
||||
import TheSidebar from "@/components/TheSidebar";
|
||||
export default {
|
||||
name: "App",
|
||||
components: { TheHeader, TheSidebar },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
#app
|
||||
font-feature-settings: "pnum" on, "lnum" on
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
height: 100%
|
||||
width: 100%
|
||||
line-height: normal
|
||||
.pages-container
|
||||
display: flex
|
||||
flex: auto
|
||||
.app-container
|
||||
height: 100%
|
||||
width: 100%
|
||||
row-gap: 8px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
body
|
||||
background-color: var(--bg-lavender-color)
|
||||
margin: 0
|
||||
padding: 0
|
||||
#app
|
||||
font-feature-settings: 'pnum' on, 'lnum' on
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
height: 100%
|
||||
width: 100%
|
||||
line-height: normal
|
||||
body
|
||||
background-color: var(--bg-lavender-color)
|
||||
margin: 0
|
||||
padding: 0
|
||||
</style>
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-2.py-2.px-4.container(@click="selectOpen")
|
||||
.relative.flex.flex-col
|
||||
.not-italic.text-base.select {{optionData}}
|
||||
.absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
|
||||
.not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
|
||||
.select-form-separator
|
||||
.text-sm.icon-down-arrow.icon
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSelect",
|
||||
props: {
|
||||
id: String,
|
||||
optionData: String,
|
||||
listData: Array,
|
||||
chooseOption: Function,
|
||||
isOpen: Boolean,
|
||||
selectOpen: Function
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.container
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.select
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.options
|
||||
z-index: 3
|
||||
width: max-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.option
|
||||
color: var(--font-black-color)
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color)
|
||||
.select-form-separator
|
||||
background-color: rgba(65, 105, 225, 0.2)
|
||||
height: 24px
|
||||
width: 1px
|
||||
border-radius: 1px
|
||||
.icon
|
||||
text-align: center
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
|
||||
.select-container(@click="changeState")
|
||||
.select-wrapper.flex.items-center.mx-4.my-2
|
||||
img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
|
||||
img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
|
||||
span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
|
||||
.arrow.icon-down-arrow.flex.justify-center.items-center
|
||||
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
|
||||
@@ -14,98 +14,98 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HeaderInputs",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
selectedFilter: "Календарь",
|
||||
filters: ["Календарь", "Клиенты"],
|
||||
isOpen: false
|
||||
}
|
||||
export default {
|
||||
name: "HeaderInputs",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
selectedFilter: "Календарь",
|
||||
filters: ["Календарь", "Клиенты"],
|
||||
isOpen: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
computed: {
|
||||
|
||||
selectFilter(filter) {
|
||||
this.selectedFilter = filter;
|
||||
},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
selectFilter(filter) {
|
||||
this.selectedFilter = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.open
|
||||
.arrow
|
||||
transform: rotate(180deg)
|
||||
|
||||
.header-inputs-wrapper
|
||||
background-color: var(--bg-white-color)
|
||||
|
||||
.select-container
|
||||
border-radius: 4px 0 0 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-right: none
|
||||
|
||||
.icon-wrapper
|
||||
width: 24px
|
||||
height: 24px
|
||||
|
||||
.loupe
|
||||
font-size: 21px
|
||||
|
||||
.custom-input
|
||||
border: none
|
||||
outline: none
|
||||
background-color: transparent
|
||||
color: var(--btn-blue-color)
|
||||
height: 100%
|
||||
|
||||
.select-wrapper
|
||||
position: relative
|
||||
z-index: 2
|
||||
cursor: pointer
|
||||
|
||||
.select-input
|
||||
width: 100px
|
||||
|
||||
.options-wrapper
|
||||
width: 172px
|
||||
background-color: var(--bg-white-color)
|
||||
color: var(--font-dark-blue-color)
|
||||
border-radius: 4px
|
||||
position: absolute
|
||||
box-shadow: var(--default-shadow)
|
||||
|
||||
.search-input
|
||||
border-radius: 0 4px 4px 0
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
&::placeholder
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.option-list
|
||||
cursor: pointer
|
||||
&:last-child
|
||||
margin: 0
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.options-text
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.open
|
||||
.arrow
|
||||
font-size: 8px
|
||||
transform: rotate(180deg)
|
||||
|
||||
.wrapper
|
||||
background-color: var(--bg-white-color)
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.select-container
|
||||
border-radius: 4px 0 0 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-right: none
|
||||
|
||||
.icon-wrapper
|
||||
width: 24px
|
||||
height: 24px
|
||||
|
||||
.loupe
|
||||
font-size: 21px
|
||||
|
||||
.custom-input
|
||||
border: none
|
||||
outline: none
|
||||
background-color: transparent
|
||||
color: var(--btn-blue-color)
|
||||
height: 100%
|
||||
|
||||
.select-wrapper
|
||||
position: relative
|
||||
z-index: 2
|
||||
cursor: pointer
|
||||
|
||||
.select-input
|
||||
width: 100px
|
||||
|
||||
.options-wrapper
|
||||
width: 172px
|
||||
background-color: var(--bg-white-color)
|
||||
color: var(--font-dark-blue-color)
|
||||
border-radius: 4px
|
||||
position: absolute
|
||||
box-shadow: var(--default-shadow)
|
||||
|
||||
.search-input
|
||||
border-radius: 0 4px 4px 0
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
&::placeholder
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.option-list
|
||||
cursor: pointer
|
||||
&:last-child
|
||||
margin: 0
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.icon-ok
|
||||
font-size: 13px
|
||||
.options-text
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.icon-down-arrow
|
||||
width: 16px
|
||||
height: 16px
|
||||
</style>
|
||||
.arrow
|
||||
font-size: 8px
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.icon-ok
|
||||
font-size: 13px
|
||||
|
||||
.icon-down-arrow
|
||||
width: 16px
|
||||
height: 16px
|
||||
</style>
|
||||
|
||||
@@ -13,52 +13,52 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import img from "@/assets/images/avatar.svg"
|
||||
import HeaderInputs from "./HeaderInputs.vue"
|
||||
export default {
|
||||
name: "TheHeader",
|
||||
components: {HeaderInputs},
|
||||
data() {
|
||||
return {
|
||||
avatarSrc: img
|
||||
}
|
||||
}
|
||||
}
|
||||
import img from "@/assets/images/avatar.svg";
|
||||
import HeaderInputs from "./HeaderInputs.vue";
|
||||
export default {
|
||||
name: "TheHeader",
|
||||
components: { HeaderInputs },
|
||||
data() {
|
||||
return {
|
||||
avatarSrc: img,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.header-buttons
|
||||
outline: none
|
||||
border: none
|
||||
background-color: transparent
|
||||
cursor: pointer
|
||||
color: var(--font-dark-blue-color)
|
||||
.header-buttons
|
||||
outline: none
|
||||
border: none
|
||||
background-color: transparent
|
||||
cursor: pointer
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.header-wrapper
|
||||
width: 100%
|
||||
background-color: var(--bg-white-color)
|
||||
position: relative
|
||||
z-index: 2
|
||||
.header-wrapper
|
||||
width: 100%
|
||||
background-color: var(--bg-white-color)
|
||||
position: relative
|
||||
z-index: 2
|
||||
|
||||
.left-side
|
||||
cursor: pointer
|
||||
.left-side
|
||||
cursor: pointer
|
||||
|
||||
.logo-img
|
||||
height: 32px
|
||||
width: 70px
|
||||
.logo-img
|
||||
height: 32px
|
||||
width: 70px
|
||||
|
||||
.icon-down-arrow
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 12px
|
||||
.icon-down-arrow
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 12px
|
||||
|
||||
.icon-bell
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 24px
|
||||
color: var(--font-dark-blue-color)
|
||||
.icon-bell
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 24px
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.avatar-img
|
||||
width: 32px
|
||||
height: 32px
|
||||
</style>
|
||||
.avatar-img
|
||||
width: 32px
|
||||
height: 32px
|
||||
</style>
|
||||
|
||||
@@ -13,16 +13,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
||||
|
||||
export default {
|
||||
name: "TheSidebar",
|
||||
components: {TheButtonSidebar},
|
||||
}
|
||||
export default {
|
||||
name: "TheSidebar",
|
||||
components: { TheButtonSidebar },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.sidebar
|
||||
max-width: 80px
|
||||
background-color: #F8F8FF
|
||||
.sidebar
|
||||
max-width: 80px
|
||||
background-color: #F8F8FF
|
||||
</style>
|
||||
|
||||
63
src/components/base/BaseSelect.vue
Normal file
63
src/components/base/BaseSelect.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
|
||||
.relative.flex.flex-col
|
||||
.not-italic.text-base.select(:style="{ minWidth : width}") {{optionData}}
|
||||
.absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
|
||||
.not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
|
||||
.select-form-separator
|
||||
.text-sm.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSelect",
|
||||
props: {
|
||||
id: String,
|
||||
width: String,
|
||||
optionData: String,
|
||||
listData: Array,
|
||||
chooseOption: Function,
|
||||
isOpen: Boolean,
|
||||
selectOpen: Function,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.container
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.select
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.options
|
||||
z-index: 3
|
||||
width: max-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.option
|
||||
color: var(--font-black-color)
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color)
|
||||
.select-form-separator
|
||||
background-color: rgba(65, 105, 225, 0.2)
|
||||
height: 24px
|
||||
width: 1px
|
||||
border-radius: 1px
|
||||
.icon
|
||||
text-align: center
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
&.open
|
||||
transform: rotate(180deg)
|
||||
</style>
|
||||
@@ -3,18 +3,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddEventButton"
|
||||
}
|
||||
export default {
|
||||
name: "AddEventButton",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.event-button
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: fit-content
|
||||
color: var(--bg-white-color)
|
||||
background-color: var(--btn-blue-color)
|
||||
border-radius: 4px
|
||||
.event-button
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: fit-content
|
||||
color: var(--bg-white-color)
|
||||
background-color: var(--btn-blue-color)
|
||||
border-radius: 4px
|
||||
</style>
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonPlus",
|
||||
}
|
||||
export default {
|
||||
name: "ButtonPlus",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.button-plus
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: 24px
|
||||
height: 24px
|
||||
max-height: 24px
|
||||
color: #4772F2
|
||||
background-color: rgba(65, 105, 225, 0.25)
|
||||
border-radius: 50%
|
||||
.button-plus
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: 24px
|
||||
height: 24px
|
||||
max-height: 24px
|
||||
color: #4772F2
|
||||
background-color: rgba(65, 105, 225, 0.25)
|
||||
border-radius: 50%
|
||||
</style>
|
||||
|
||||
@@ -5,39 +5,39 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonSidebar",
|
||||
props: {
|
||||
path: String,
|
||||
id: String,
|
||||
changeStyle: Function
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
selectedStyle: false
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "ButtonSidebar",
|
||||
props: {
|
||||
path: String,
|
||||
id: String,
|
||||
changeStyle: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedStyle: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.button
|
||||
width: fit-content
|
||||
cursor: pointer
|
||||
background-color: rgb(65, 105, 225, 0)
|
||||
border-radius: 0 4px 4px 0
|
||||
border-left-color: rgb(65, 105, 225, 0)
|
||||
border-left-width: 4px
|
||||
border-right: none
|
||||
border-top: none
|
||||
border-bottom: none
|
||||
border-left-style: solid
|
||||
.button:focus
|
||||
background-color: rgb(65, 105, 225, 0.3)
|
||||
border-left-color: rgb(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
.button:hover
|
||||
background-color: rgb(65, 105, 225, 0.3)
|
||||
border-left-color: rgb(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
.button
|
||||
width: fit-content
|
||||
cursor: pointer
|
||||
background-color: rgba(65, 105, 225, 0)
|
||||
border-radius: 0 4px 4px 0
|
||||
border-left-color: rgba(65, 105, 225, 0)
|
||||
border-left-width: 4px
|
||||
border-right: none
|
||||
border-top: none
|
||||
border-bottom: none
|
||||
border-left-style: solid
|
||||
.button:focus
|
||||
background-color: rgba(65, 105, 225, 0.3)
|
||||
border-left-color: rgba(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
.button:hover
|
||||
background-color: rgba(65, 105, 225, 0.3)
|
||||
border-left-color: rgba(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
</style>
|
||||
|
||||
14
src/main.js
14
src/main.js
@@ -1,9 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import './assets/sass/fonts.sass'
|
||||
import './assets/sass/tailwind.sass'
|
||||
import './assets/sass/variables.sass'
|
||||
import './assets/css/iconfonts.css'
|
||||
import "./assets/sass/fonts.sass";
|
||||
import "./assets/sass/tailwind.sass";
|
||||
import "./assets/sass/variables.sass";
|
||||
import "./assets/css/iconfonts.css";
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
createApp(App).use(router).mount("#app");
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
|
||||
export default {
|
||||
name: "TheCalendar",
|
||||
components: {CalendarFormAddEvent}
|
||||
}
|
||||
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
|
||||
export default {
|
||||
name: "TheCalendar",
|
||||
components: { CalendarFormAddEvent },
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template lang="pug">
|
||||
.flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen")
|
||||
.flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen" )
|
||||
.flex.flex-col.gap-y-2
|
||||
.flex.justify-between.pt-2
|
||||
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
|
||||
.icon-cancel.close-icon.text-xs(@click="closeEventForm")
|
||||
base-select(
|
||||
id="responsible"
|
||||
width="205px"
|
||||
:option-data="eventData.responsible"
|
||||
:list-data="listResponsible"
|
||||
:choose-option="chooseOption"
|
||||
@@ -38,6 +39,7 @@
|
||||
span.not-italic.text-xs.opacity-40.leading-3 Вид события
|
||||
base-select(
|
||||
id="kind"
|
||||
width="118px"
|
||||
:option-data="eventData.kindEvent"
|
||||
:list-data="kindEvents"
|
||||
:choose-option="chooseOption"
|
||||
@@ -56,100 +58,104 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseSelect from "@/components/BaseSelect";
|
||||
import AddEventButton from "@/components/base/buttons/BaseAddEvent";
|
||||
import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
|
||||
export default {
|
||||
name: "FormChangeEvent",
|
||||
components: {AddEventButton, ButtonPlus, BaseSelect},
|
||||
props: {
|
||||
listResponsible: {
|
||||
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
|
||||
import BaseSelect from "@/components/base/BaseSelect";
|
||||
import AddEventButton from "@/components/base/buttons/BaseAddEvent";
|
||||
import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
|
||||
export default {
|
||||
name: "FormChangeEvent",
|
||||
components: { AddEventButton, ButtonPlus, BaseSelect },
|
||||
props: {
|
||||
listResponsible: {
|
||||
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formOpen: true,
|
||||
selectResponsibleOpen: false,
|
||||
selectKindEventOpen: false,
|
||||
listFriendInfo: [1],
|
||||
listContacts: [1],
|
||||
kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
|
||||
eventData: {
|
||||
responsible: "Выберите ответственного",
|
||||
eventClient: "",
|
||||
timeEvent: {
|
||||
firstTime: "11:00",
|
||||
secondTime: "12:30",
|
||||
},
|
||||
friendInfo: {},
|
||||
kindEvent: "Вид события",
|
||||
contacts: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createEvent() {
|
||||
this.formOpen = !this.formOpen;
|
||||
},
|
||||
addFriendInfo(e) {
|
||||
if (e.currentTarget.id === "addInfo") {
|
||||
this.listFriendInfo.push(
|
||||
this.listFriendInfo[this.listFriendInfo.length - 1] + 1
|
||||
);
|
||||
}
|
||||
if (e.currentTarget.id === "addContact") {
|
||||
this.listContacts.push(
|
||||
this.listContacts[this.listContacts.length - 1] + 1
|
||||
);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formOpen: true,
|
||||
selectResponsibleOpen: false,
|
||||
selectKindEventOpen: false,
|
||||
listFriendInfo: [1],
|
||||
listContacts: [1],
|
||||
kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
|
||||
eventData: {
|
||||
responsible: "Выберите ответственного",
|
||||
eventClient: "",
|
||||
timeEvent: {
|
||||
firstTime: "11:00",
|
||||
secondTime: "12:30",
|
||||
},
|
||||
friendInfo: {},
|
||||
kindEvent: "Вид события",
|
||||
contacts: {}
|
||||
}
|
||||
closeEventForm() {
|
||||
this.formOpen = !this.formOpen;
|
||||
},
|
||||
openSelectResponsible() {
|
||||
this.selectResponsibleOpen = !this.selectResponsibleOpen;
|
||||
},
|
||||
openSelectKindEvent() {
|
||||
this.selectKindEventOpen = !this.selectKindEventOpen;
|
||||
},
|
||||
chooseOption(event) {
|
||||
if (event.currentTarget.id === "responsible") {
|
||||
this.eventData.responsible = this.listResponsible[event.target.id];
|
||||
}
|
||||
if (event.currentTarget.id === "kind") {
|
||||
this.eventData.kindEvent = this.kindEvents[event.target.id];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createEvent() {
|
||||
this.formOpen = !this.formOpen
|
||||
},
|
||||
addFriendInfo(e) {
|
||||
if(e.currentTarget.id === "addInfo") {
|
||||
this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
|
||||
}
|
||||
if(e.currentTarget.id === "addContact") {
|
||||
this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
|
||||
}
|
||||
},
|
||||
closeEventForm() {
|
||||
this.formOpen=!this.formOpen
|
||||
},
|
||||
openSelectResponsible() {
|
||||
this.selectResponsibleOpen = !this.selectResponsibleOpen
|
||||
},
|
||||
openSelectKindEvent() {
|
||||
this.selectKindEventOpen = !this.selectKindEventOpen
|
||||
},
|
||||
chooseOption(event) {
|
||||
if(event.currentTarget.id === "responsible") {
|
||||
this.eventData.responsible=this.listResponsible[event.target.id]
|
||||
}
|
||||
if(event.currentTarget.id === "kind") {
|
||||
this.eventData.kindEvent=this.kindEvents[event.target.id]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.event-form
|
||||
height: fit-content
|
||||
min-width: 448px
|
||||
background-color: var(--bg-white-color)
|
||||
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
|
||||
border-radius: 4px
|
||||
.form-item
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.item-input
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.icon
|
||||
width: 24px
|
||||
height: 24px
|
||||
color: var(--font-dark-blue-color)
|
||||
.close-icon
|
||||
cursor: pointer
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
.event-form
|
||||
height: fit-content
|
||||
min-width: 448px
|
||||
background-color: var(--bg-white-color)
|
||||
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
|
||||
border-radius: 4px
|
||||
.form-item
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.item-input
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.icon
|
||||
width: 24px
|
||||
height: 24px
|
||||
color: var(--font-dark-blue-color)
|
||||
.close-icon
|
||||
cursor: pointer
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheHome"
|
||||
}
|
||||
export default {
|
||||
name: "TheHome",
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheSettings"
|
||||
}
|
||||
export default {
|
||||
name: "TheSettings",
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheUser"
|
||||
}
|
||||
export default {
|
||||
name: "TheUser",
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {createRouter, createWebHashHistory} from "vue-router";
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import TheHome from "@/pages/home/TheHome.vue";
|
||||
import TheCalendar from "@/pages/calendar/TheCalendar";
|
||||
import TheUser from "@/pages/user/TheUser";
|
||||
@@ -10,6 +10,6 @@ export default createRouter({
|
||||
{ path: "/", component: TheHome },
|
||||
{ path: "/calendar", component: TheCalendar },
|
||||
{ path: "/user", component: TheUser },
|
||||
{ path: "/settings", component: TheSettings }
|
||||
]
|
||||
})
|
||||
{ path: "/settings", component: TheSettings },
|
||||
],
|
||||
});
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{js,jsx,ts,tsx,vue}',
|
||||
],
|
||||
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Raleway', 'sans-serif'],
|
||||
sans: ["Raleway", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
xxs: ['12px', { lineHeight: '14px' }],
|
||||
xs: ['13px', { lineHeight: '15px' }],
|
||||
sm: ['14px', { lineHeight: '16px' }],
|
||||
base: ['16px', { lineHeight: '19px' }],
|
||||
m: ['16px', { lineHeight: '21.6px' }],
|
||||
lg: ['18px', { lineHeight: '21px' }],
|
||||
xl: ['20px', { lineHeight: '23px' }],
|
||||
'2xl': ['28px', { lineHeight: '33px' }],
|
||||
'3xl': ['60px', { lineHeight: '70px' }],
|
||||
'4xl': ['44px', { lineHeight: '48px' }],
|
||||
}
|
||||
xxs: ["12px", { lineHeight: "14px" }],
|
||||
xs: ["13px", { lineHeight: "15px" }],
|
||||
sm: ["14px", { lineHeight: "16px" }],
|
||||
base: ["16px", { lineHeight: "19px" }],
|
||||
m: ["16px", { lineHeight: "21.6px" }],
|
||||
lg: ["18px", { lineHeight: "21px" }],
|
||||
xl: ["20px", { lineHeight: "23px" }],
|
||||
"2xl": ["28px", { lineHeight: "33px" }],
|
||||
"3xl": ["60px", { lineHeight: "70px" }],
|
||||
"4xl": ["44px", { lineHeight: "48px" }],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
const { defineConfig } = require('@vue/cli-service');
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
|
||||
module.exports = defineConfig({
|
||||
|
||||
chainWebpack: (config) => {
|
||||
const pugRule = config.module.rule('pug');
|
||||
const pugRule = config.module.rule("pug");
|
||||
|
||||
pugRule.uses.clear();
|
||||
pugRule.oneOfs.clear();
|
||||
@@ -17,30 +16,19 @@ module.exports = defineConfig({
|
||||
oneOf: [
|
||||
{
|
||||
resourceQuery: /^\?vue/u,
|
||||
loader: '@webdiscus/pug-loader',
|
||||
loader: "@webdiscus/pug-loader",
|
||||
options: {
|
||||
method: 'html',
|
||||
method: "html",
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: '@webdiscus/pug-loader',
|
||||
loader: "@webdiscus/pug-loader",
|
||||
options: {
|
||||
method: 'compile',
|
||||
method: "compile",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'postcss-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user