From 2b334dd51ab49a8638572aa4f54c8f26a967abdc Mon Sep 17 00:00:00 2001
From: jenesius <lokargenia@gmail.com>
Date: Tue, 15 Aug 2023 23:36:07 +0300
Subject: [PATCH] fix: update calendar grid

---
 plugin/styles/main.css                     | 73 ----------------------
 plugin/widgets/input-field.vue             |  1 -
 project/pages/test/App.vue                 |  4 +-
 src/styles/main.css                        |  2 +
 src/widgets/form-field.vue                 |  1 +
 src/widgets/input-date/input-date.vue      | 15 +++--
 src/widgets/input-date/widget-calendar.vue | 60 ++++++++++--------
 src/widgets/input-text/input-text.vue      |  3 +
 8 files changed, 52 insertions(+), 107 deletions(-)
 delete mode 100644 plugin/styles/main.css

diff --git a/plugin/styles/main.css b/plugin/styles/main.css
deleted file mode 100644
index 32740dc..0000000
--- a/plugin/styles/main.css
+++ /dev/null
@@ -1,73 +0,0 @@
-:root {
-    --vf-input-active:                      #4e74ff;
-    --vf-input-active-disabled:             #bac7f8;
-    --vf-input-error:                       #fa5c5c;
-    --vf-input-white-light:                 #f6f6f6;
-    --vf-input-white-dark:                  #dadada;
-    --vf-input-gray-light:                  #c8c8c8;
-    --vf-input-gray-dark:                   #b2b2b2;
-    --vf-input-black-dark:                  #333333;
-    --vf-input-black-light:                 #646363;
-    --vf-input-color:                       #1c1c1c;
-    --vf-input-background:                  #ffffff;
-    --vf-input-background-disabled:         #e9e9e9;
-
-    --vf-input-border-color: var(--vf-input-gray-light);
-    --vf-input-border-color-focus: var(--vf-input-gray-dark);
-
-    --vf-input-font-size: 13.333px;
-    --vf-input-border-radius: 4px;
-
-    --vf-input-height: 35px;
-    --vf-input-select-option-height:        240px;
-
-
-    --vf-input-border: 1px solid var(--vf-input-border-color);
-    --vf-input-border-error: 1px solid var(--vf-input-error);
-    --vf-input-border-focus: 1px solid var(--vf-input-border-color-focus);
-    --vf-input-label-color: var(--vf-input-black-dark);
-    --vf-input-transtion-fast: 0.1s;
-}
-.vf-input_clean {
-    border: 0;
-    outline: none;
-    background-color: transparent;
-    font-family: inherit;
-}
-.vf-grid-center {
-    display: grid;
-    place-content: center;
-}
-.vf-input-label {
-    color: var(--vf-input-label-color);
-    font-size: 13px;
-}
-
-
-
-.vf-arrow {
-    border: solid var(--vf-input-gray-dark);
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 3px;
-    transition: transform 150ms, background-color 0.2s;
-}
-.vf-arrow_down {
-    transform: rotate(45deg);
-    -webkit-transform: rotate(45deg);
-}
-
-.vf-arrow_up {
-    transform: rotate(-135deg);
-    -webkit-transform: rotate(-135deg);
-}
-
-.slide-enter-from,
-.slide-leave-to {
-    transform: translateY(20px);
-    opacity: 0;
-}
-.slide-enter-active,
-.slide-leave-active {
-    transition: 0.2s;
-}
\ No newline at end of file
diff --git a/plugin/widgets/input-field.vue b/plugin/widgets/input-field.vue
index 2c6ad4c..b9e1eb0 100644
--- a/plugin/widgets/input-field.vue
+++ b/plugin/widgets/input-field.vue
@@ -104,7 +104,6 @@ function handleInput(v: any) {
 </script>
 
 <style>
-@import "./../styles/main.css";
 
 
 </style>
diff --git a/project/pages/test/App.vue b/project/pages/test/App.vue
index b3bbecd..f3cb191 100644
--- a/project/pages/test/App.vue
+++ b/project/pages/test/App.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="container-examples">
 
-        <form-field name="created" type = "date" label = "Created" />
+        <form-field name="created" type = "date" label = "Created" placeholder = "Введите дату создания"/>
         <form-field name="created" type = "date" mask = "mm-dd-yyyy" label = "Ceated English" />
 
         <form-field name="address.city" label = "Address city" />
 
-		<form-field :name="name" label = "Username"/>
+		<form-field :name="name" label = "Username" placeholder = "Username"/>
 		<form-field label = "TEST" v-model = "test"/>
 		<p>Test: {{test}}</p>
 		<form-field name="username.name.jenesius" label = "Username"/>
diff --git a/src/styles/main.css b/src/styles/main.css
index 32740dc..38344ce 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -15,6 +15,8 @@
     --vf-input-border-color: var(--vf-input-gray-light);
     --vf-input-border-color-focus: var(--vf-input-gray-dark);
 
+    --vf-input-placeholder-color: var(--vf-input-gray-dark);
+
     --vf-input-font-size: 13.333px;
     --vf-input-border-radius: 4px;
 
diff --git a/src/widgets/form-field.vue b/src/widgets/form-field.vue
index 9508563..d5778ca 100644
--- a/src/widgets/form-field.vue
+++ b/src/widgets/form-field.vue
@@ -125,5 +125,6 @@ input?.setValidation(mergeValidation())
 
 </script>
 <style>
+@import "./../styles/main.css";
 
 </style>
diff --git a/src/widgets/input-date/input-date.vue b/src/widgets/input-date/input-date.vue
index 878bc26..b4364fb 100644
--- a/src/widgets/input-date/input-date.vue
+++ b/src/widgets/input-date/input-date.vue
@@ -3,7 +3,7 @@
 		<div class="container-input-date">
 
 			<div class="wrap-input-date">
-				<p class="input-date-mask">{{ prettyMask }}</p>
+				<p class="input-date-mask">{{(insideValue?.length || !placeholder) ? prettyMask : (placeholder) }}</p>
 				<input
 					class="vf-input_clean input-date"
 					type="text"
@@ -26,7 +26,7 @@
 			<div ref="refCalendar" v-if="calendarStatus" class = "container-date-calendar">
 				<widget-calendar class="input-date-calendar"
 								 :model-value="modelValue"
-								 @update:modelValue="test" />
+								 @update:modelValue="handleCalendarInput" />
 			</div>
 		</transition>
 	</field-wrap>
@@ -46,7 +46,8 @@ const props = withDefaults(defineProps<{
 	modelValue: any,
 	label?: string,
 	errors: ValidationError[],
-	mask?: string
+	mask?: string,
+	placeholder?: string
 }>(), {
 	mask: () => STORE.date.dateMask
 })
@@ -60,20 +61,23 @@ const refCalendar = ref();
 const calendarStatus = ref(false);
 
 
-function test(s: string) {
+function handleCalendarInput(s: string) {
 	const date = new Date(s);
 
 	emit('update:modelValue', date?.toUTCString());
 }
 
+let offCalendar: any;
 
 function changeCalendarStatus(status: boolean) {
 	calendarStatus.value = status;
 	nextTick(() => {
-		if (status) clickOutside(refCalendar.value, changeCalendarStatus.bind(null, false))
+		if (status) offCalendar = clickOutside(refCalendar.value, changeCalendarStatus.bind(null, false))
+		else offCalendar?.()
 	})
 }
 
+
 function handleInput(v: string) {
 	insideValue.value = v;
 	if (!DateController.CheckFullerMask(v, props.mask)) return;
@@ -166,6 +170,7 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
 	place-content: center;
 	stroke: var(--vf-input-gray-dark);
 	transition: var(--vf-input-transtion-fast);
+	padding: 0 6px;
 }
 
 .input-date-icon_active {
diff --git a/src/widgets/input-date/widget-calendar.vue b/src/widgets/input-date/widget-calendar.vue
index a1d6e3f..c734129 100644
--- a/src/widgets/input-date/widget-calendar.vue
+++ b/src/widgets/input-date/widget-calendar.vue
@@ -6,7 +6,7 @@
 		</div>
 		<div class="widget-calendar-board">
 			<div class="widget-calendar-board-header">
-                <span class="widget-calendar-board-label"
+                <span class="widget-calendar-board-header-label"
 					  v-for="(elem) in arrayDays"
 					  :key="elem.value"
 				>{{ elem.label }}</span>
@@ -25,7 +25,7 @@
               [functionDateClass?.(elem.value) || '']: true
             }"
 				>
-					<span>{{ elem.label }}</span>
+					<span class = "widget-calendar-board-card-label">{{ elem.label }}</span>
 				</div>
 			</div>
 		</div>
@@ -118,8 +118,9 @@ function isCurrentMonth(v: string) {
 	padding: 10px;
 	border-radius: var(--vf-input-border-radius);
 	background-color: var(--vf-input-background);
+	display: grid;
+	gap: 10px;
 }
-
 .widget-calendar-navigation {
 	display: grid;
 	grid-template-columns: 120px 100px;
@@ -127,63 +128,70 @@ function isCurrentMonth(v: string) {
 }
 
 .widget-calendar-board-header {
-	display: flex;
-	justify-content: space-between;
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	text-align: center;
 }
 
-.widget-calendar-board-label {
+.widget-calendar-board-header-label {
 	font-weight: bold;
+	font-size: 13px;
 }
-
-.widget-calendar-days-name > span:last-child {
-	margin-right: 0;
-}
-
 .widget-calendar-board-body {
 	display: grid;
 	grid-template-columns: repeat(7, 1fr);
+	text-align: center;
+
 }
 
 .widget-calendar-board-card {
+	display: grid;
+	place-content: center;
 	cursor: pointer;
 	position: relative;
+	width: 100%;
+	aspect-ratio: 1/1;
 
 	text-align: right;
 
-	font-size: 14px;
-	line-height: 20px;
+
 	transition: var(--vf-input-transtion-fast);
 	user-select: none;
 }
+.widget-calendar-board-card-label {
+	display: block;
+	width: 20px;
+	font-size: 14px;
+	line-height: 20px;
+}
 
 .calendar-date_active {
 	color: white;
 }
 
-.calendar-date_active:after {
+.calendar-date_active:after,
+.calendar-date_current:after {
 	position: absolute;
 	content: "";
-	background-color: var(--vf-input-active) !important;
 	width: 20px;
-	height: 18px;
+	aspect-ratio: 1/1;
+	left: 6px;
 	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
 	z-index: -1;
 	border: 1px solid var(--vf-input-gray-dark);
 	border-radius: 2px;
+
 }
 
-.calendar-date_current:after {
-	position: absolute;
-	content: "";
+.calendar-date_active:after {
+	background-color: var(--vf-input-active) !important;
+}
 
+.calendar-date_current:after {
 	background: var(--vf-input-gray-light);
-	width: 20px;
-	height: 18px;
-	right: 0;
-	z-index: -1;
-
-	border: 1px solid var(--vf-input-gray-dark);
-	border-radius: 2px;
 }
 
 .calendar-date_shadow {
diff --git a/src/widgets/input-text/input-text.vue b/src/widgets/input-text/input-text.vue
index 5fb7642..55dad8d 100644
--- a/src/widgets/input-text/input-text.vue
+++ b/src/widgets/input-text/input-text.vue
@@ -107,4 +107,7 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 	color: var(--vf-input-color);
 	font-size: var(--vf-input-font-size);
 }
+.input-text::placeholder{
+	color: var(--vf-input-placeholder-color);
+}
 </style>