71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.gap-y-3.p-4(:style="{'width': '485px'}")
|
|
.flex.flex-col.gap-y-3.relative
|
|
base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40", outlined)
|
|
.text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
|
|
.input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
|
|
textarea.place-input.w-full.outline-0.not-italic.resize-none(
|
|
:cols="24",
|
|
placeholder="Описание",
|
|
v-model="description"
|
|
)
|
|
q-btn(
|
|
label="Добавить",
|
|
no-caps,
|
|
color="primary",
|
|
padding="4px 24px",
|
|
@click="sendNote",
|
|
style="font-weight: 500; height: 40px; width: 122px"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
|
|
export default {
|
|
name: "TableCreateNote",
|
|
components: { BaseInput },
|
|
props: {
|
|
createNote: Function,
|
|
closePopup: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "",
|
|
description: "",
|
|
};
|
|
},
|
|
computed: {
|
|
changeValue() {
|
|
return this.title.length;
|
|
},
|
|
},
|
|
methods: {
|
|
sendNote() {
|
|
this.createNote(this.title, this.description);
|
|
this.closePopup();
|
|
this.title = "";
|
|
this.description = "";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.title
|
|
min-height: 39px
|
|
.description
|
|
min-height: 70px
|
|
.input-wrapper
|
|
border: 2px solid var(--border-light-grey-color)
|
|
border-radius: 4px
|
|
background-color: var(--default-white)
|
|
textarea
|
|
overflow: hidden
|
|
.text
|
|
color: var(--font-grey-color)
|
|
.button
|
|
&:hover
|
|
opacity: 0.7
|
|
</style>
|