docs: add ru Language

docs/.vitepress/config.ts

@@ -7,7 +7,7 @@ export default {
 	themeConfig: {
 		nav: nav(),
 		sidebar: sidebar(),
-		logo: './../images/logo.svg',
+		logo: '/images/logo.svg',
 		socialLinks: [
 			{ icon: 'github', link: 'https://github.com/Jenesius/vue-modal' },
 		],
@@ -16,46 +16,158 @@ export default {
 			copyright: "Copyright © 2022-present Jenesius",
 		},
 	},
-
-}
+	locales: {
+		root: {
+			dir: "en",
+			label: "English",
+		},
+		ru: {
+
+			label: "Русский",
+			lang: "ru",
+			description: "Система форм для Vue",
+			themeConfig: {
+				nav: nav('ru'),
+				sidebar: sidebar('ru'),
+				outline: {
+					label: "На этой странице",
+				},
+				docFooter: {
+					prev: 'Предыдущая страница',
+					next: 'Следующая страница',
+				},
+				sidebarMenuLabel: 'Меню',
+				returnToTopLabel: 'Вернуться наверх',
+				langMenuLabel: 'Изменить язык',
+				darkModeSwitchLabel: 'Изменить тему'
+			},
+
+		},
 
-function nav() {
+	},
+}
+const defaultLang = 'en';
+type Lang = 'ru' | 'en'
+function nav(lang: Lang = defaultLang) {
+	const getLink = getLinkHandler(lang);
+	const getLabel = getLabelHandler(lang);
 	return [
-		{ text: 'Guide', link: '/guide/getting-started', activeMatch: '/guide/' },
-		{ text: 'Examples', link: '/examples/list', activeMatch: '/examples/' },
-		{ text: 'Found mistake?', link: 'https://github.com/Jenesius/vue-modal/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=[BUG]'},
+		{ text: getLabel('guide'), link: getLink('/guide/getting-started'), activeMatch: getLink('/guide/') },
+		{ text: getLabel('examples'), link: getLink('/examples/list'), activeMatch: getLink('/examples/') },
+		{ text: getLabel('found mistake?'), link: 'https://github.com/Jenesius/vue-modal/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=[BUG]'},
 	]
 }
-function sidebar() {
+function sidebar(lang: Lang = defaultLang) {
+	const getLink = getLinkHandler(lang);
+	const getLabel = getLabelHandler(lang);
 	return [
 		{
-			text: 'Guide',
+			text: getLabel('guide'),
 			items: [
-				{ text: 'Getting started', link: '/guide/getting-started' },
-				{ text: 'Methods', link: '/guide/guide-methods' },
-				{ text: 'Navigation Guards', link: '/guide/guide-navigation-guards' },
-				{ text: 'Returned value', link: '/guide/guide-returned-value' },
-				{ text: 'Store', link: "/guide/store" }
+				{ text: getLabel('get started!'), link: getLink('/guide/getting-started') },
+				{ text: getLabel('methods'), link: getLink('/guide/guide-methods') },
+				{ text: getLabel('navigation guards'), link: getLink('/guide/guide-navigation-guards') },
+				{ text: getLabel('returned value'), link: getLink('/guide/guide-returned-value') },
+				{ text: getLabel('store'), link: getLink("/guide/store") }
 			]
 		},
 		{
-			text: 'Details',
+			text: getLabel('details'),
 			items: [
-				{ text: 'ModalObject', link: '/guide/modal-object'},
-				{ text: 'Styles', link: '/guide/details-styles'},
-				{ text: 'Config', link: '/guide/config.md'},
-				{ text: 'Event close', link: '/guide/event-close' },
-				{ text: 'Animation', link: '/guide/details-animation'},
+				{ text: getLabel('modalObject'), link: getLink('/guide/modal-object')},
+				{ text: getLabel('styles'), link: getLink('/guide/details-styles')},
+				{ text: getLabel('config'), link: getLink('/guide/config.md')},
+				{ text: getLabel('event close'), link: getLink('/guide/event-close') },
+				{ text: getLabel('animation'), link: getLink('/guide/details-animation')},
 			]
 		},
 		{
-			text: 'Integration With VueRouter',
+			text: getLabel('integration With VueRouter'),
 			items: [
-				{ text: 'Introduction', link: '/guide/integration-introduction'},
-				{ text: 'Installation', link: '/guide/integration-installation'},
-				{ text: 'Practical', link: '/guide/integration-practical'},
-				{ text: 'Closing Modal with Router', link: '/vue-router-integration/close-after-route-changed' }
+				{ text: getLabel('introduction'), link: getLink('/guide/integration-introduction')},
+				{ text: getLabel('installation'), link: getLink('/guide/integration-installation')},
+				{ text: getLabel('practical'), link: getLink('/guide/integration-practical')},
+				{ text: getLabel('closing Modal with Router'), link: getLink('/vue-router-integration/close-after-route-changed') }
 			]
 		}
 	]
 }
+
+
+
+
+function getLabelHandler(lang: Lang) {
+	const labelStore = {
+		'details': {
+			ru: 'детали'
+		},
+		'modalObject': {
+			ru: 'modalObject'
+		},
+		'styles': {
+			ru: 'стили'
+		},
+		'event close': {
+			ru: 'Событие закрытия'
+		},
+		animation: {
+			ru: 'анимация'
+		},
+		'integration With VueRouter': {
+			ru: 'интеграция с VueRouter'
+		},
+		'introduction': {
+			ru: 'введение'
+		},
+		'installation': {
+			ru: 'установка'
+		},
+		'practical': {
+			ru: 'передача параметров'
+		},
+		'closing Modal with Router': {
+			ru: 'закрытие модального окна через маршрут'
+		},
+		'store': {
+			ru: 'хранилище'
+		},
+		'returned value': {
+			ru: 'возвращаемое значение'
+		},
+		'navigation guards': {
+			ru: 'навигационные хуки'
+		},
+		'methods': {
+			ru: 'методы'
+		},
+		'guide': {
+			ru: 'руководство'
+		},
+		'examples': {
+			ru: 'примеры'
+		},
+		'found mistake?': {
+			ru: 'нашли ошибку?'
+		},
+		'get started!': {
+			ru: 'приступим!'
+		},
+		'config': {
+			ru: 'конфигурация'
+		}
+	}
+	return function getLabel(label: keyof typeof labelStore) {
+		function upper(str: string) {
+			if (!str) return '---- -- -----'
+			return str[0].toUpperCase() + str.slice(1);
+		}
+		if (lang === defaultLang) return upper(label);
+		return upper(labelStore[label][lang])
+	}
+}
+function getLinkHandler(lang: Lang) {
+	return function getLink(link: string) {
+		if (lang === defaultLang) return link;
+		return [lang, link].join('/');
+	}
+}

docs/examples/list.md

@@ -1,6 +1,6 @@
 - [Simple modal](simple-modal.md) 
 - [Prompt modal](prompt-modal.md)
 - [Multi modal](multi-modals.md)
-- [VueRouter with Modals](vue-router-with-modals.md)
+- [VueRouter with Modals](../ru/examples/vue-router-with-modals.md)
 - [Demo](demo.md)
 - [Animation](animation.md)

docs/examples/vue-router-with-modals.md

@@ -1,7 +1,7 @@
 # VueRouter with Modals
 
 It turned out to be problematic on the site to display an example for working with vue-router, but you can familiarize yourself with it by running
-`npm run serve` and go to **/vue-router**.
+`npm run serve` and go to **/vue-router-with-modal**.
 
 In this example, we'll look at how vue-router integration works and how to use it.
 

docs/guide/guide-methods.md

@@ -44,18 +44,14 @@ pushModal(VueComponent)
 ```
 ```vue
 <template>
-    <button @click = "pushModal">Push second</button>
+    <button @click = "add">Push second</button>
 </template>
-<script>
+<script setup>
     import {pushModal} from "jenesius-vue-modal";
     import ModalSecond from "ModalSecond";
-    export default {
-        setup(){
-            return {
-                pushModal: () => pushModal(ModalSecond)
-            }
-        },
-    }
+	function add() {
+		pushModal(ModalSecond);
+	}
 </script>
 ```
 ```vue

docs/ru/examples/animation.md

@@ -0,0 +1,7 @@
+<script setup>
+import App from '../../examples/simple-animation/App.vue';
+</script>
+
+# Кастомные анимации
+
+<App/>

docs/ru/examples/demo.md

@@ -0,0 +1,6 @@
+<script setup>
+import App from '../../examples/pretty-modal/App.vue';
+</script>
+
+# Демо
+<App/>

docs/ru/examples/list.md

@@ -0,0 +1,6 @@
+- [Простое модальное окно](simple-modal.md) 
+- [Возращение значение из модального окна](prompt-modal.md)
+- [Множественные модальные окна](multi-modals.md)
+- [vue-router с модальными окнами](../ru/examples/vue-router-with-modals.md)
+- [Демо](demo.md)
+- [Анимации](animation.md)

docs/ru/examples/multi-modals.md

@@ -0,0 +1,7 @@
+<script setup>
+import App from '../../examples/multi-modal/App.vue';
+</script>
+
+# Multi Modal
+
+<App/>

docs/ru/examples/prompt-modal.md

@@ -0,0 +1,7 @@
+<script setup>
+import App from '../../examples/prompt-modal/App.vue';
+</script>
+
+# Prompt Modal
+
+<App/>

docs/ru/examples/simple-modal.md

@@ -0,0 +1,7 @@
+<script setup>
+import App from '../../examples/open-modal/App.vue';
+</script>
+
+# Simple Modal
+
+<App/>

docs/ru/examples/vue-router-with-modals.md

@@ -0,0 +1,49 @@
+# VueRouter с Modals
+
+На сайте оказалось проблематично отобразить пример работы с vue-router, но ознакомиться с ним можно, запустив
+`npm run serve` и перейдите в **/vue-router-with-modal**.
+
+В этом примере мы рассмотрим, как работает интеграция vue-router и как ее использовать.
+
+Для работы с VueRouter библиотека предоставляет метод **useModalRouter**, который в первую очередь является оболочкой для
+компонент. Именно с его помощью наши компоненты будут обернуты в модальные окна. Для использования давайте создадим простой
+конфигурационный файл для vue-router:
+```ts
+import {createRouter, createWebHashHistory} from "vue-router"
+import {useModalRouter} from "jenesius-vue-modal";
+import Modal from "./any-modal.vue";
+
+const routes = [
+    {
+        path: "/",
+        component: SomeComponent
+    },
+    {
+        path: "/users/:id",
+        component: useModalRouter(Modal) // Step 1
+    }
+]
+
+const router =  createRouter({
+    routes,
+    history: createWebHashHistory()
+})
+
+useModalRouter.init(router); // Step 2
+
+export default router
+```
+
+### Шаг 1
+На первом этапе мы оборачиваем компонент. Фактически этот метод делает следующее:
+1. При переходе на указанный маршрут будет отображаться переданный компонент.
+2. Render всегда возвращает в результате *null*.
+3. При выходе с маршрута текущее модальное окно закроется.
+
+### Шаг 2
+Перед работой мы должны предоставить маршрутизатор, чтобы библиотека могла подписываться на изменение состояния.
+маршрутизатор.
+
+----
+
+Теперь, если мы перейдем к */users/:id*, откроется наше модальное окно, а значение id будет передано в качестве props.

docs/ru/guide/config.md

@@ -0,0 +1,25 @@
+# Конфигурация
+Вы можете изменить настройки модальных окон. В этой статье будут приведены примеры того, как
+вы можете закрыть модальные окна, нажав **Escape** или кнопку фона. Также отключить прокрутку,
+изменить имя анимированных классов и многое другое.
+
+Модальные окна можно настроить, вызвав *config*:
+```ts
+import {config} from "jenesius-vue-modal";
+config({
+    // Параметры
+})
+```
+Объект конфигурации имеет следующий интерфейс:
+```ts
+interface Config{
+    scrollLock?: boolean,
+    animation? : string,
+    backgroundClose? : boolean,
+    escClose?   : boolean
+}
+```
+- scrollLock (значение по умолчанию **true**). Отключить прокрутку во времени, когда модальное окно открыто.
+- animation (значение по умолчанию **modal-list**). Имя анимации для `transition-group`.
+- backgroundClose (значение по умолчанию **true**). Закрытие модального окна при нажатии на затемнённый фон.
+- escClose (значение по умолчанию **true**). Закрытие по нажатии клавиши ESC.

docs/ru/guide/details-animation.md

@@ -0,0 +1,35 @@
+# Анимация
+Если вам нужно изменить анимацию показа или скрытия модального окна, вам нужно переопределить некоторые свойства и стили.
+По умолчанию для анимации модальных окон используется **modal-list** в качестве имени анимации. Чтобы переопределить имя
+анимации, вам нужно указать новые в конфигурации:
+
+```ts
+import {config} from "jenesius-vue-modal";
+
+config({
+    animation: "fade" // Любая другая
+})
+```
+При изменении анимации необходимо учитывать, что мы должны анимировать как **.modal-container**, так и само модальное
+окно **.modal-item**.
+
+Например, изменим анимацию и продолжительность появления модальное окно:
+
+*Вместо **fade** вы можете использовать **modal-list**. В таком случае вам не нужно переопределять имя в конфигурации.*
+
+```css
+/* Не забудьте указать время анимации для стартового блока. */
+.fade-enter-active, 
+.fade-leave-active,
+.fade-enter-active .modal-item,
+.fade-leave-active .modal-item{
+    transition: 1.2s;
+}
+
+.fade-enter-from .modal-item,
+.fade-leave-to .modal-item{
+    transform: translateX(100px);
+}
+```
+
+