Merge pull request #184 from Jenesius/issue_180

fix: update `rtl` css variables.

Author: Jenesius

examples/all-inputs/App.vue

@@ -1,5 +1,10 @@
 <template>
 	<div>
+
+		<div>
+			<button @click = "handleRTL">Make RTL</button>
+		</div>
+
 		<h2>Input Text</h2>
 		<input-field name = "username"/>
 		<input-field name = "username" label = "With label"/>
@@ -20,7 +25,7 @@
 		<input-field name = "description" type = "textarea" label = "Placeholder" placeholder = "Add information about user." />
 		<input-field name = "description" type = "textarea" label = "Auto resize" autoresize  />
 
-		<h2>Input Tel</h2>
+		<h2>Input Date</h2>
 		<input-field name = "birthday" type = "date"/>
 		<input-field name = "birthday" type = "date" label = "With label"/>
 		<input-field name = "birthday" type = "date" label = "Disabled" disabled/>
@@ -141,6 +146,9 @@ function prettyUnit(unit: string) {
 	}
 }
 
+function handleRTL() {
+	document.body.dir =  (document.body.dir === 'rtl') ? "ltr" : "rtl"
+}
 
 const optionsCheckbox = [
 	{

src/widgets/inputs/input-date/input-date.vue

@@ -13,7 +13,7 @@
 					:disabled="disabled"
 				>
 			</div>
-			<div class="input-date-icon"
+			<div class="input-date-icon vf-grid-center"
 				 @click="changeCalendarStatus(!calendarStatus)"
 				 :class="{
 					'input-date-icon_active': calendarStatus
@@ -155,7 +155,7 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
 }
 
 .input-date {
-	padding: 0 4px;
+	padding-inline: 4px;
 	color: var(--vf-input-color);
 	font-size: var(--vf-input-font-size);
 	position: relative;
@@ -171,25 +171,25 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
 .input-date-mask {
 	display: flex;
 	align-items: center;
+	height: 100%;
+
 	position: absolute;
+	inset-inline-start: 0;
+	inset-block-start: 0;
 	z-index: 0;
-	top: 0;
-	height: 100%;
-	left: 0;
 	margin: 0;
-	padding: 0 4px;
+
+	padding-inline: 4px;
 	user-select: none;
 	font-size: var(--vf-input-font-size);
 	color: var(--vf-input-gray-dark);
 }
 
 .input-date-icon {
 	cursor: pointer;
-	display: grid;
-	place-content: center;
 	stroke: var(--vf-input-gray-deep);
 	transition: var(--vf-input-transtion-fast);
-	padding: 0 6px;
+	padding-inline: 6px;
 }
 
 .input-date-icon_active {
@@ -201,9 +201,9 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
 
 .input-date-calendar {
 	position: absolute;
-	right: 0;
-	margin-top: 10px;
 	z-index: 2;
+	inset-inline-end: 0;
+	inset-block-start: 10px;
 }
 .container-date-calendar {
 	position: relative;

src/widgets/inputs/input-number/widget-input-number.vue

@@ -99,7 +99,7 @@ function onStep(v: boolean) {
 		outline: none;
 		padding: 0 4px;
 		color: var(--vf-input-color);
-		text-align: right;
+
 		background-color: transparent;
 	}
 
@@ -120,6 +120,6 @@ function onStep(v: boolean) {
         color: var(--vf-input-black-light);
         line-height: var(--vf-input-height);
         font-size: var(--vf-input-font-size);
-        padding: 0 5px 0 0;
+		padding-inline-end: 5px;
 	}
 </style>

src/widgets/inputs/input-select/widget-input-select-current.vue

@@ -30,14 +30,14 @@ defineProps<{
 }
 
 .container-input-select-current-label {
-	padding: 0 6px;
+	padding-inline: 6px;
 	color: var(--vf-input-color);
 	font-size: var(--vf-input-font-size);
 
 	flex-grow: 1;
 }
 
 .container-input-select-current > .vf-arrow {
-	margin: 0 10px 0 0;
+	margin-inline-end: 10px;
 }
 </style>

src/widgets/inputs/input-switch/widget-input-switch.vue

@@ -54,8 +54,9 @@ function onInput(v = props.values ? getNextFormToggleValues(props.values, props.
 <style scoped>
 .container-input-switch {
 	display: flex;
-	gap: 12px;
 	align-items: center;
+
+	gap: 12px;
 }
 
 .input-switch {
@@ -87,6 +88,13 @@ function onInput(v = props.values ? getNextFormToggleValues(props.values, props.
 	background-color: var(--vf-input-active);
 	transform: translateX(18px);
 }
+[dir="rtl"] .input-switch-button {
+	transform: translateX(-3px);
+}
+[dir="rtl"] .input-switch-button_active {
+	transform: translateX(-18px);
+}
+
 .vf-input-switch_error {
 	border: var(--vf-input-border-error);
 }

src/widgets/inputs/input-tel/widget-input-tel-code.vue

@@ -17,7 +17,7 @@
 
 <style scoped>
     .container-input-tel-code{
-        padding: 0 10px;
+        padding-inline: 10px;
     }
     .input-tel-code{
         user-select: none;

src/widgets/inputs/input-text/input-text.vue

@@ -101,11 +101,11 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 	color: var(--vf-input-black-light);
 	line-height: var(--vf-input-height);
 	font-size: var(--vf-input-font-size);
-	padding: 0 0 0 4px;
+	padding-inline: 4px 0;
 }
 .input-text {
 	flex-grow: 1;
-	padding: 0 4px;
+	padding-inline: 4px;
 	color: var(--vf-input-color);
 	font-size: var(--vf-input-font-size);
 }