fix: update calendar grid

plugin/widgets/input-field.vue

@@ -104,7 +104,6 @@ function handleInput(v: any) {
 </script>
 
 <style>
-@import "./../styles/main.css";
 
 
 </style>

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"/>

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;
 

src/widgets/form-field.vue

@@ -125,5 +125,6 @@ input?.setValidation(mergeValidation())
 
 </script>
 <style>
+@import "./../styles/main.css";
 
 </style>

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 {

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,72 +118,80 @@ 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;
 	justify-content: space-between;
 }
 
 .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 {

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>