Merge pull request #20 from dderbentsov/UC-5

Поправлены стили формы добавления ивента, исправлены зависимости pack…

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
+  presets: ["@vue/cli-plugin-babel/preset"],
-    '@vue/cli-plugin-babel/preset'
+};
-  ]
-}

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": "^8.25.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-config-prettier": "^8.3.0",
-    "node-sass": "^7.0.3",
+    "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",
+    "prettier": "^2.4.1",
-    "pug-plain-loader": "^1.1.0",
     "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"

postcss.config.js

@@ -1,7 +1,7 @@
-const tailwind = require('tailwindcss')
+const tailwind = require("tailwindcss");
-const autoprefixer = require('autoprefixer')
+const autoprefixer = require("autoprefixer");
-const tailwindConfig = require('./tailwind.config')
+const tailwindConfig = require("./tailwind.config");
 
 module.exports = {
   plugins: [tailwind(tailwindConfig), autoprefixer],
-}
+};

src/App.vue

@@ -1,38 +1,29 @@
 <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 TheHeader from "@/components/TheHeader";
-  import TheSidebar from "@/components/TheSidebar";
+import TheSidebar from "@/components/TheSidebar";
-  export default {
+export default {
   name: "App",
-    components: {TheHeader, TheSidebar}
+  components: { TheHeader, TheSidebar },
-  }
+};
 </script>
 
 <style lang="sass">
-  #app
+#app
-    font-feature-settings: "pnum" on, "lnum" on
+  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
+body
-    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

src/components/BaseSelect.vue

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

src/components/HeaderInputs.vue

@@ -14,66 +14,66 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: "HeaderInputs",
   props: {},
   data() {
     return {
       selectedFilter: "Календарь",
       filters: ["Календарь", "Клиенты"],
-        isOpen: false
+      isOpen: false,
-      }
+    };
-    },
-    computed: {
-      
   },
+  computed: {},
   methods: {
     changeState() {
-        this.isOpen = !this.isOpen
+      this.isOpen = !this.isOpen;
     },
     selectFilter(filter) {
-        this.selectedFilter = filter
+      this.selectedFilter = filter;
-      }
+    },
-    }
+  },
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .open
+.open
   .arrow
     transform: rotate(180deg)
 
-  .header-inputs-wrapper
+.wrapper
   background-color: var(--bg-white-color)
+  display: flex
+  align-items: center
 
-  .select-container
+.select-container
   border-radius: 4px 0 0 4px
   border: 1px solid var(--border-light-grey-color)
   border-right: none
 
-  .icon-wrapper
+.icon-wrapper
   width: 24px
   height: 24px
 
-  .loupe
+.loupe
   font-size: 21px
 
-  .custom-input
+.custom-input
   border: none
   outline: none
   background-color: transparent
   color: var(--btn-blue-color)
   height: 100%
 
-  .select-wrapper
+.select-wrapper
   position: relative
   z-index: 2
   cursor: pointer
 
-  .select-input
+.select-input
   width: 100px
 
-  .options-wrapper
+.options-wrapper
   width: 172px
   background-color: var(--bg-white-color)
   color: var(--font-dark-blue-color)
@@ -81,31 +81,31 @@
   position: absolute
   box-shadow: var(--default-shadow)
 
-  .search-input
+.search-input
   border-radius: 0 4px 4px 0
   border: 1px solid var(--border-light-grey-color)
   &::placeholder
     color: var(--font-grey-color)
 
-  .option-list
+.option-list
   cursor: pointer
   &:last-child
     margin: 0
   &:hover
     color: var(--btn-blue-color)
 
-  .options-text
+.options-text
   display: flex
   align-items: center
 
-  .arrow
+.arrow
   font-size: 8px
   color: var(--btn-blue-color)
 
-  .icon-ok
+.icon-ok
   font-size: 13px
 
-  .icon-down-arrow
+.icon-down-arrow
   width: 16px
   height: 16px
 </style>

src/components/TheHeader.vue

@@ -13,52 +13,52 @@
 </template>
 
 <script>
-  import img from "@/assets/images/avatar.svg"
+import img from "@/assets/images/avatar.svg";
-  import HeaderInputs from "./HeaderInputs.vue"
+import HeaderInputs from "./HeaderInputs.vue";
-  export default {
+export default {
   name: "TheHeader",
-    components: {HeaderInputs},
+  components: { HeaderInputs },
   data() {
     return {
-        avatarSrc: img
+      avatarSrc: img,
-      }
+    };
-    }
+  },
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .header-buttons
+.header-buttons
   outline: none
   border: none
   background-color: transparent
   cursor: pointer
   color: var(--font-dark-blue-color)
 
-  .header-wrapper
+.header-wrapper
   width: 100%
   background-color: var(--bg-white-color)
   position: relative
   z-index: 2
 
-  .left-side
+.left-side
   cursor: pointer
 
-  .logo-img
+.logo-img
   height: 32px
   width: 70px
 
-  .icon-down-arrow
+.icon-down-arrow
   width: 24px
   height: 24px
   font-size: 12px
 
-  .icon-bell
+.icon-bell
   width: 24px
   height: 24px
   font-size: 24px
   color: var(--font-dark-blue-color)
 
-  .avatar-img
+.avatar-img
   width: 32px
   height: 32px
 </style>

src/components/TheSidebar.vue

@@ -13,16 +13,16 @@
 </template>
 
 <script>
-  import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
+import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
 
-  export default {
+export default {
   name: "TheSidebar",
-    components: {TheButtonSidebar},
+  components: { TheButtonSidebar },
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .sidebar
+.sidebar
   max-width: 80px
   background-color: #F8F8FF
 </style>

src/components/base/BaseSelect.vue

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

src/components/base/buttons/BaseAddEvent.vue

@@ -3,13 +3,13 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: "AddEventButton"
+  name: "AddEventButton",
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .event-button
+.event-button
   outline: none
   border: none
   cursor: pointer

src/components/base/buttons/BaseButtonPlus.vue

@@ -3,13 +3,13 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: "ButtonPlus",
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .button-plus
+.button-plus
   outline: none
   border: none
   cursor: pointer

src/components/base/buttons/BaseSidebarButton.vue

@@ -5,39 +5,39 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: "ButtonSidebar",
   props: {
     path: String,
     id: String,
-      changeStyle: Function
+    changeStyle: Function,
   },
-    data(){
+  data() {
     return {
-        selectedStyle: false
+      selectedStyle: false,
-      }
+    };
-    }
+  },
-  }
+};
 </script>
 
 <style lang="sass" scoped>
-  .button
+.button
   width: fit-content
   cursor: pointer
-    background-color: rgb(65, 105, 225, 0)
+  background-color: rgba(65, 105, 225, 0)
   border-radius: 0 4px 4px 0
-    border-left-color: rgb(65, 105, 225, 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
+.button:focus
-    background-color: rgb(65, 105, 225, 0.3)
+  background-color: rgba(65, 105, 225, 0.3)
-    border-left-color: rgb(65, 105, 225, 1)
+  border-left-color: rgba(65, 105, 225, 1)
   color: #4169E1
-  .button:hover
+.button:hover
-    background-color: rgb(65, 105, 225, 0.3)
+  background-color: rgba(65, 105, 225, 0.3)
-    border-left-color: rgb(65, 105, 225, 1)
+  border-left-color: rgba(65, 105, 225, 1)
   color: #4169E1
 </style>

src/main.js

@@ -1,9 +1,9 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
 import router from "./router";
-import './assets/sass/fonts.sass'
+import "./assets/sass/fonts.sass";
-import './assets/sass/tailwind.sass'
+import "./assets/sass/tailwind.sass";
-import './assets/sass/variables.sass'
+import "./assets/sass/variables.sass";
-import './assets/css/iconfonts.css'
+import "./assets/css/iconfonts.css";
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).mount("#app");

src/pages/calendar/TheCalendar.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-  import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
+import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
-  export default {
+export default {
   name: "TheCalendar",
-    components: {CalendarFormAddEvent}
+  components: { CalendarFormAddEvent },
-  }
+};
 </script>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -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,16 +58,16 @@
 </template>
 
 <script>
-  import BaseSelect from "@/components/BaseSelect";
+import BaseSelect from "@/components/base/BaseSelect";
-  import AddEventButton from "@/components/base/buttons/BaseAddEvent";
+import AddEventButton from "@/components/base/buttons/BaseAddEvent";
-  import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
-  export default {
+export default {
   name: "FormChangeEvent",
-    components: {AddEventButton, ButtonPlus, BaseSelect},
+  components: { AddEventButton, ButtonPlus, BaseSelect },
   props: {
     listResponsible: {
-        default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
+      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
-      }
+    },
   },
   data() {
     return {
@@ -74,7 +76,7 @@
       selectKindEventOpen: false,
       listFriendInfo: [1],
       listContacts: [1],
-        kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
+      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
       eventData: {
         responsible: "Выберите ответственного",
         eventClient: "",
@@ -84,56 +86,60 @@
         },
         friendInfo: {},
         kindEvent: "Вид события",
-          contacts: {}
+        contacts: {},
-        }
+      },
-      }
+    };
   },
   methods: {
     createEvent() {
-        this.formOpen = !this.formOpen
+      this.formOpen = !this.formOpen;
     },
     addFriendInfo(e) {
-        if(e.currentTarget.id === "addInfo") {
+      if (e.currentTarget.id === "addInfo") {
-          this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
+        this.listFriendInfo.push(
+          this.listFriendInfo[this.listFriendInfo.length - 1] + 1
+        );
       }
-        if(e.currentTarget.id === "addContact") {
+      if (e.currentTarget.id === "addContact") {
-          this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
+        this.listContacts.push(
+          this.listContacts[this.listContacts.length - 1] + 1
+        );
       }
     },
     closeEventForm() {
-        this.formOpen=!this.formOpen
+      this.formOpen = !this.formOpen;
     },
     openSelectResponsible() {
-        this.selectResponsibleOpen = !this.selectResponsibleOpen
+      this.selectResponsibleOpen = !this.selectResponsibleOpen;
     },
     openSelectKindEvent() {
-        this.selectKindEventOpen = !this.selectKindEventOpen
+      this.selectKindEventOpen = !this.selectKindEventOpen;
     },
     chooseOption(event) {
-        if(event.currentTarget.id === "responsible") {
+      if (event.currentTarget.id === "responsible") {
-          this.eventData.responsible=this.listResponsible[event.target.id]
+        this.eventData.responsible = this.listResponsible[event.target.id];
-        }
-        if(event.currentTarget.id === "kind") {
-          this.eventData.kindEvent=this.kindEvents[event.target.id]
-        }
-      }
       }
+      if (event.currentTarget.id === "kind") {
+        this.eventData.kindEvent = this.kindEvents[event.target.id];
       }
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>
-  .event-form
+.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
+.form-item
   cursor: pointer
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
-  .item-input
+.item-input
   appearance: none
   border: none
   outline: none
@@ -143,11 +149,11 @@
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
-  .icon
+.icon
   width: 24px
   height: 24px
   color: var(--font-dark-blue-color)
-  .close-icon
+.close-icon
   cursor: pointer
   color: var(--font-dark-blue-color)
   &:hover

src/pages/home/TheHome.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: "TheHome"
+  name: "TheHome",
-  }
+};
 </script>

src/pages/settings/TheSettings.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: "TheSettings"
+  name: "TheSettings",
-  }
+};
 </script>

src/pages/user/TheUser.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  export default {
+export default {
-    name: "TheUser"
+  name: "TheUser",
-  }
+};
 </script>

src/router.js

@@ -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 },
-  ]
+  ],
-})
+});

tailwind.config.js

@@ -1,25 +1,22 @@
 module.exports = {
-  content: [
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
-    './index.html',
-    './src/**/*.{js,jsx,ts,tsx,vue}',
-  ],
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Raleway', 'sans-serif'],
+        sans: ["Raleway", "sans-serif"],
       },
       fontSize: {
-        xxs: ['12px', { lineHeight: '14px' }],
+        xxs: ["12px", { lineHeight: "14px" }],
-        xs: ['13px', { lineHeight: '15px' }],
+        xs: ["13px", { lineHeight: "15px" }],
-        sm: ['14px', { lineHeight: '16px' }],
+        sm: ["14px", { lineHeight: "16px" }],
-        base: ['16px', { lineHeight: '19px' }],
+        base: ["16px", { lineHeight: "19px" }],
-        m: ['16px', { lineHeight: '21.6px' }],
+        m: ["16px", { lineHeight: "21.6px" }],
-        lg: ['18px', { lineHeight: '21px' }],
+        lg: ["18px", { lineHeight: "21px" }],
-        xl: ['20px', { lineHeight: '23px' }],
+        xl: ["20px", { lineHeight: "23px" }],
-        '2xl': ['28px', { lineHeight: '33px' }],
+        "2xl": ["28px", { lineHeight: "33px" }],
-        '3xl': ['60px', { lineHeight: '70px' }],
+        "3xl": ["60px", { lineHeight: "70px" }],
-        '4xl': ['44px', { lineHeight: '48px' }],
+        "4xl": ["44px", { lineHeight: "48px" }],
-      }
+      },
     },
   },
   plugins: [],

vue.config.js

@@ -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'
-            },
-          ]
-        },
       ],
     },
   },