From 28f829ae6a79e879875d05af25f23ca0f40b4aeb Mon Sep 17 00:00:00 2001
From: Damir Sadykov <zs.keda@gmail.com>
Date: Thu, 16 Jun 2022 16:42:44 +0500
Subject: [PATCH] [#1844] Add manual input example to the docs (#1913)

* Add example, fix RU version

* manual example file

* Minor. Typo fix.

Co-authored-by: Vitaly <vitaly.raichev@epicmax.co>

Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
Co-authored-by: Vitaly <vitaly.raichev@epicmax.co>
---
 packages/docs/src/locales/en/en.json                  |  8 ++++++--
 packages/docs/src/locales/ru/ru.json                  |  8 ++++++++
 .../ui-elements/date-input/examples/manual.vue        | 11 +++++++++++
 .../ui-elements/date-input/page-config.ts             |  6 ++++++
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 packages/docs/src/page-configs/ui-elements/date-input/examples/manual.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index f7a509b9d2..c170f1bb81 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3000,9 +3000,13 @@
         "title": "Formatting",
         "text": "You can pass the format function to VaDateInput which will format input text like you want to. This way you can use any format that you want. For example, you can use [date-fns](https://date-fns.org/v2.23.0/docs/format)[[target=_blank]]."
       },
+      "manual": {
+        "title": "Date Manual Input",
+        "text": "You can add `manual-input` attribute to allow user input text from keyboard manually."
+      },
       "input": {
-        "title": "Input date",
-        "text": "You can allow user to input text from keyboard. You need to set readonly prop as true. You can pass the parse function to VaDateInput which will parse input text like you want to. This way you can use any format that you want. For example, you can use [date-fns](https://date-fns.org/v2.23.0/docs/format)[[target=_blank]] to parse date string. By default we parse this input using standard `Date.parse` method."
+        "title": "Parsing",
+        "text": "You can pass the parse function to VaDateInput which will parse input text like you want to. This way you can use any format that you want. For example, you can use [date-fns](https://date-fns.org/v2.23.0/docs/format)[[target=_blank]] to parse date string. By default we parse this input using standard `Date.parse` method."
       },
       "inputProps": {
         "title": "Input props",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 975657b8f4..8825cf1f9d 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -2888,6 +2888,14 @@
         "title": "Форматирование",
         "text": "Вы можете передать функцию форматирования в `VaDateInput`, которая будет форматировать вводимый текст так, как вы хотите. Таким образом, вы можете использовать любой формат, который хотите. Например, вы можете использовать [date-fns](https://date-fns.org/v2.23.0/docs/format)[[target=_blank]]"
       },
+      "manual": {
+        "title": "Пользовательский ввод",
+        "text": "Вы можете дать пользователю вводить дату вручную. Для этого добавьте атрибут `manual-input`"
+      },
+      "input": {
+        "title": "Парсинг",
+        "text": "Вы можете добавить функцию парсинга к VaDateInput чтобы распознавать введеный текст тем или иным образом. Это позволит вам использовать любое форматирование. Например использовать [date-fns](https://date-fns.org/v2.23.0/docs/format)[[target=_blank]] чтобы парсить строку. По умолчанию мы используем для этого метод `Date.parse`."
+      },
       "inputProps": {
         "title": "Передаваемые свойства",
         "text": "Вы можете передать свойства в `VaDateInput`"
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/examples/manual.vue b/packages/docs/src/page-configs/ui-elements/date-input/examples/manual.vue
new file mode 100644
index 0000000000..e759154933
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/date-input/examples/manual.vue
@@ -0,0 +1,11 @@
+<template>
+  <va-date-input v-model="value" manual-input />
+</template>
+
+<script>
+export default {
+  data () {
+    return { value: new Date() }
+  },
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/date-input/page-config.ts b/packages/docs/src/page-configs/ui-elements/date-input/page-config.ts
index ac6d122f35..689aaf25c2 100644
--- a/packages/docs/src/page-configs/ui-elements/date-input/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/date-input/page-config.ts
@@ -46,6 +46,12 @@ const config: ApiDocsBlock[] = [
     'formatting',
   ),
 
+  ...block.exampleBlock(
+    'dateInput.examples.manual.title',
+    'dateInput.examples.manual.text',
+    'manual',
+  ),
+
   ...block.exampleBlock(
     'dateInput.examples.input.title',
     'dateInput.examples.input.text',