diff --git a/docs/examples/list.md b/docs/examples/list.md
index cf9a469..99bcdd6 100644
--- a/docs/examples/list.md
+++ b/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](../ru/examples/vue-router-with-modals.md)
+- [VueRouter with Modals](vue-router-with-modals.md)
- [Demo](demo.md)
- [Animation](animation.md)
diff --git a/docs/examples/vue-router-with-modals.md b/docs/examples/vue-router-with-modals.md
index e54ca95..cfcfdef 100644
--- a/docs/examples/vue-router-with-modals.md
+++ b/docs/examples/vue-router-with-modals.md
@@ -10,7 +10,7 @@ component. It is with the help of it that our components will be wrapped in moda
config file for vue-router:
```ts
import {createRouter, createWebHashHistory} from "vue-router"
-import {useModalRouter} from "../../plugin/routerIntegration";
+import {useModalRouter} from "jenesius-vue-mdoal";
import Modal from "./any-modal.vue";
const routes = [
diff --git a/docs/guide/details-animation.md b/docs/guide/details-animation.md
index ca52b79..2c88132 100644
--- a/docs/guide/details-animation.md
+++ b/docs/guide/details-animation.md
@@ -4,7 +4,7 @@ to override some properties and styles. Default for animating modal windows uses
**modal-list** as the animation name. To override the animation name, you need
to specify a new one in the configuration:
```ts
-import {config} from "../../../../plugin";
+import {config} from "jenesius-vue-modal";
config({
animation: "fade" // Any name
diff --git a/docs/guide/modal-object.md b/docs/guide/modal-object.md
index 7c7a851..713e060 100644
--- a/docs/guide/modal-object.md
+++ b/docs/guide/modal-object.md
@@ -19,7 +19,7 @@ const modal = await openModal(Modal, {
modal.onclose = () => false
modal.instance.message; // "Welcome"
-modal.closed.value; // true
+modal.closed.value; // false
modal.close() // The modal will not be closed
```
diff --git a/docs/ru/examples/animation.md b/docs/ru/examples/animation.md
index f6c0514..2d23766 100644
--- a/docs/ru/examples/animation.md
+++ b/docs/ru/examples/animation.md
@@ -1,5 +1,5 @@
# Кастомные анимации
diff --git a/docs/ru/examples/demo.md b/docs/ru/examples/demo.md
index c3d25d6..ce77adc 100644
--- a/docs/ru/examples/demo.md
+++ b/docs/ru/examples/demo.md
@@ -1,5 +1,5 @@
# Демо
diff --git a/docs/ru/examples/list.md b/docs/ru/examples/list.md
index 65d56ac..4d599f1 100644
--- a/docs/ru/examples/list.md
+++ b/docs/ru/examples/list.md
@@ -1,6 +1,6 @@
- [Простое модальное окно](simple-modal.md)
- [Возращение значение из модального окна](prompt-modal.md)
- [Множественные модальные окна](multi-modals.md)
-- [vue-router с модальными окнами](../ru/examples/vue-router-with-modals.md)
+- [vue-router с модальными окнами](vue-router-with-modals.md)
- [Демо](demo.md)
- [Анимации](animation.md)
diff --git a/docs/ru/examples/multi-modals.md b/docs/ru/examples/multi-modals.md
index 2b49e22..2af137f 100644
--- a/docs/ru/examples/multi-modals.md
+++ b/docs/ru/examples/multi-modals.md
@@ -1,7 +1,7 @@
-# Multi Modal
+# Множественные модальные окна
\ No newline at end of file
diff --git a/docs/ru/examples/prompt-modal.md b/docs/ru/examples/prompt-modal.md
index 3d0d29d..5cebb57 100644
--- a/docs/ru/examples/prompt-modal.md
+++ b/docs/ru/examples/prompt-modal.md
@@ -1,7 +1,7 @@
-# Prompt Modal
+# Возвращаемое значение
\ No newline at end of file
diff --git a/docs/ru/examples/simple-modal.md b/docs/ru/examples/simple-modal.md
index fa7f639..9a92cb5 100644
--- a/docs/ru/examples/simple-modal.md
+++ b/docs/ru/examples/simple-modal.md
@@ -1,7 +1,7 @@
-# Simple Modal
+# Простое модальное окно
\ No newline at end of file
diff --git a/docs/ru/guide/guide-navigation-guards.md b/docs/ru/guide/guide-navigation-guards.md
index 9419b37..a815310 100644
--- a/docs/ru/guide/guide-navigation-guards.md
+++ b/docs/ru/guide/guide-navigation-guards.md
@@ -1,20 +1,19 @@
-# Navigation Guards
+# Навигационные хуки
-## Information
-Sometimes it is necessary to catch the closing of a modal and manage
-this state. This can be useful to prevent the user from closing the
-modal until they have entered input, or to send a request to the server.
+## Информация
+Иногда необходимо отловить закрытие модального кона. Это может быть полезно для предотвращения закрытия пользователем
+модально, пока они не введут данные или не отправят запрос на сервер.
-If the handler returns **false** or **throws an error** , closing
-the modal window will be interrupted.
+Если обработчик возвращает **false** или **выдает ошибку**, закрытие
+модальное окно будет прервано.
-Jenesius Vue Modal provides three ways to catch closures:
+Jenesius Vue Modal предоставляет три способа перехвата закрытия:
## Onclose
-The [openModal](/guide/guide-methods#open-modal) and [pushModal](/guide/guide-methods#push-modal)
-methods return Promise, which, if successful,
-will return the [modalObject](/guide/modal-object) object. In order to catch the closing of
-a modal window, you need to add an event **onclose** to this object:
+Методы [openModal](./guide-methods#open-modal) and [pushModal](./guide-methods#push-modal)
+возвращают Promise, который в случае успеха
+вернет объект [modalObject](./modal-object). Чтобы поймать закрытие
+модальное окно, вам нужно добавить событие **onclose** к этому объекту:
```ts
import {openModal} from "jenesius-vue-modal";
const modal = await openModal(VueComponent);
@@ -23,11 +22,14 @@ let count = 5;
modal.onclose = () => {
count--;
- if (count > 0 ) return false; //The modal window will be closed after five attempts.
+ if (count > 0 ) return false; // Модальное окно закроется после пяти попыток.
}
```
-EXAMPLE
-If several modal windows are open, and one of them will have an onclose handler that returns false, you can close only those modal windows that were opened after it.
+### Пример
+
+Если открыто несколько модальных окон и у одного из них будет обработчик onclose, возвращающий false, вы сможете
+закрыть только те модальные окна, которые были открыты после него.
+
```ts
import {pushModal, closeModal} from "jenesius-vue-modal";
@@ -37,22 +39,22 @@ const modal3 = await pushModal(VueComponent);
modal2.onclose = () => false;
-closeModal(); // close only modal3
+closeModal(); // закроется только modal3
```
-## In-Component Guards
-Finally, the navigation hook can be specified directly in the component using the following options:
+## Хук внутри компоненты
+Наконец, навигационный хук можно указать непосредственно в компоненте, используя следующие параметры:
- beforeModalClose
```ts
const Foo = {
template: "...",
beforeModalClose() {
- // has access to the context of the component instance this.
+ // имеет доступ к контексту экземпляра компонента this.
}
}
```
## Composition Api
-While you can still use built-in functions, Jenesius Vue Modal provides functions for the Composition API:
+Хотя вы по-прежнему можете использовать встроенные функции, Jenesius Vue Modal предоставляет функции для Composition API:
```ts
import {onBeforeModalClose} from "jenesius-vue-modal"
@@ -60,7 +62,7 @@ export default {
setup() {
onBeforeModalClose(() => {
const answer = window.confirm(
- "Do you really want to leave? You have unsaved changes!"
+ "Вы действительно хочешь уйти? У вас есть несохраненные изменения!"
)
if (!answer) return false
})
@@ -68,8 +70,8 @@ export default {
}
```
-## Async Guards
-The navigation hook can be asynchronous. The modal window will be closed only when it finishes its work:
+## Асинхронный хук
+Навигационный хук может быть асинхронным. Модальное окно закроется только тогда, когда завершит свою работу:
```ts
{
async beforeModalClose(){
@@ -82,17 +84,17 @@ const modal = await openModal(Modal);
modal.onclose = () => {
return new Promise(resolve => {
- setTimeout(resolve, 1000); // The modal will be closed after one second.
+ setTimeout(resolve, 1000); // Модальное окно закроется через одну секунду.
})
}
```
-## Close event
-Each modal close handler get window parameter: event-close
+## Событие close
+Каждый обработчик модального закрытия получает параметр окна: event-close
```ts
modal.onclose = (event) => {
// ...
}
```
-This *event* stores information about how the modal window is closed. Detailed information about it, about the way to prevent
-Closing a modal window by background or by pressing the Esc key can be read [here](/guide/event-close).
+Это *событие* хранит информацию о том, как закрывается модальное окно. Подробная информация о нем, о способах предотвращения
+закрытия модального окна при нажатии на фон или по нажатию клавиши Esc можно прочитать [здесь](./event-close).
diff --git a/docs/ru/guide/guide-returned-value.md b/docs/ru/guide/guide-returned-value.md
index 177b8d9..063467e 100644
--- a/docs/ru/guide/guide-returned-value.md
+++ b/docs/ru/guide/guide-returned-value.md
@@ -1,18 +1,19 @@
-# Return value from Modal
+# Возвращение значения
-If we are talking about the return value of modal windows, we must first understand their essence. By default, modal windows are treated as a separate layer of logic with their own data model. This approach is convenient and makes developing a web application with modal windows safe. This library inherits this concept.
-A modal window is a separate logical level that accepts input parameters and somehow interacts with them.
-However, there are times when a modal window is just part of a process. I sometimes encounter such cases (although I try my best to avoid them).
-I will describe the solutions that I use in my projects. Starting with the most convenient, ending with those that I would not use:
+Если мы говорим о возвращаемом значении модальных окон, мы должны сначала понять их суть.
+По умолчанию модальные окна рассматриваются как отдельный уровень логики со своей собственной моделью данных.
+Такой подход удобен и делает разработку веб-приложения с модальными окнами безопасной. Эта библиотека наследует
+эту концепцию. Модальное окно — это отдельный логический уровень, принимающий входные параметры и каким-то образом с
+ними взаимодействующий. Однако бывают случаи, когда модальное окно является лишь частью процесса. Я иногда сталкиваюсь с
+такими случаями (хотя стараюсь их избегать). Опишу решения, которые использую в своих проектах. Начиная с самых удобных,
+заканчивая теми, которыми я бы не стал пользоваться:
+## Использование PromptModal
-## Using PromptModal
-
-In vanilla JS, there is a function prompt, which, upon closing the popup, will wrap the entered value. To implement such
-logic, let's write a wrapper for the modal window opening function:
-
-File *ModalCode.vue*
+В VanillaJS есть функция prompt, которая при закрытии всплывающего окна возвращает введённое значение. Для реализации
+такой логики, напишем обертку для функции открытия модального окна:
+Файл *ModalCode.vue*
```vue
@@ -23,8 +24,8 @@ import {Modal} from "jenesius-vue-modal";
export default {
methods: {
handleClick() {
- // Current emit will close the modal and provided Meth.random()
- // result to Promise returned by promptModal
+ // Modal.EVENT_PROMPT закроет модальное окно и предоставит Math.random()
+ // результат для Promise, возвращенный PromptModal
this.$emit(Modal.EVENT_PROMPT, Math.random());
}
}
@@ -32,7 +33,7 @@ export default {
```
-How to use:
+Как использовать:
```ts
import {promptModal} from "jenesius-vue-modal"
const code = await promptModal(ModalCode);
@@ -41,20 +42,28 @@ What happened in this example:
- promptModal return Promise, which will be executed when the modal window is closed. It will also be passed the value, which is inside the modal window component.
- To describe the modal window, we implemented a simple input field that was concatenated with value (which is used as return value in the first step)
-This is the most elegant solution that I have found so far and often use in my projects.
+ This is the most elegant solution that I have found so far and often use in my projects.
+
+
+Что произошло в этом примере:
-## Provide Handle
-We can also pass a function to be called inside a modal window (Reminds me of the React component logic):
+- promptModal возвращает обещание, которое будет выполнено при закрытии модального окна. Результатом `promise` будет
+переданное в событие `Modal.EVENT_PROMPT` значение.
+- Чтобы описать модальное окно, мы реализовали простую передачу случайного значения по нажатию на кнопку.
+
+Это самое элегантное решение, которое я нашел для себя и часто использую в своих проектах.
+
+## Предоставить Handle
+Мы также можем передать функцию для вызова внутри модального окна (напоминает мне логику компонента React):
```ts
const modal = await openModal(Modal, {
handleRequest: (value) => {
- // do something
+ // Делаем что-то
}
})
```
-And then in the modal:
-
+И затем в модальном окне:
```vue
```
-## Emit value and closing
+## Передать значение и после этого закрыть окно
```vue
// modal.vue
@@ -76,7 +85,7 @@ And then in the modal:
```
-And when we open modal:
+И когда мы открываем окно:
```ts
const modal = await openModal(Modal)
modal.on('return', (value) => {
diff --git a/docs/ru/guide/integration-installation.md b/docs/ru/guide/integration-installation.md
index 9163d78..52c2687 100644
--- a/docs/ru/guide/integration-installation.md
+++ b/docs/ru/guide/integration-installation.md
@@ -1,21 +1,21 @@
-# Installation
+# Установка
-- Don't forget to [initialize](/guide/getting-started) Jenesius Vue Modal
-- When creating router add modal integration:
+- Не забудьте [проинициализировать](./getting-start) Jenesius Vue Modal
+- При создании роутера добавьте модальную интеграцию:
```ts
import { createWebHistory, createRouter} from "vue-router";
import {useModalRouter} from "jenesius-vue-modal";
const routes = [...];
const router = createRouter({
- history: createWebHistory(), // Or any other
+ history: createWebHistory(),
routes,
});
-useModalRouter.init(router);
+useModalRouter.init(router); // !
```
-Now the modal handler will react to navigation changes.
-- Add new route:
+Теперь модальный обработчик будет реагировать на изменения навигации.
+- Добавьте новый маршрут обёрнутый в `useModalRouter`:
```ts
import Modal from "Modal.vue"
@@ -26,5 +26,5 @@ const routes = [
}
]
```
-Now, when switching to **/any-route**, the window that was passed to
-**useModalRouter** will be shown modally
+Теперь при переключении на **/any-route** окно, переданное в
+**useModalRouter** будет отображаться модальное окно.
diff --git a/docs/ru/guide/integration-introduction.md b/docs/ru/guide/integration-introduction.md
index a4966db..b78fff3 100644
--- a/docs/ru/guide/integration-introduction.md
+++ b/docs/ru/guide/integration-introduction.md
@@ -1,13 +1,9 @@
-# Introduction
+# Введение
-Sometimes it becomes necessary to link vue-router to show a modal window. To
-do this, you need to write your own handler for router and integrate it with
-opening/closing a modal window. One in Jenesius Vue Modal already has it all,
-you just need to connect it.
+Иногда возникает необходимость связать vue-router для отображения модального окна. Чтобы сделать это, вам нужно написать
+собственный обработчик для маршрутизатора и интегрировать его с открытием/закрытием модального окна. В
+Jenesius Vue Modal уже есть все это, вам просто нужно подключить его.
-For example, a table of users was created, on the route **/users**. A modal handler
-has been added to the route **/users/:id**. Now, when switching to **/users/3**, a
-modal window will open into which the input parameters from route, available
-in props, will be passed.
-
-Go to example
+Например, была создана таблица пользователей по маршруту **/users**. Модальный обработчик
+был добавлен в маршрут **/users/:id**. Теперь при переключении на **/users/3**
+откроется модальное окно, в котором доступны входные параметры из маршрута. Они будут переданы в качестве `props`.
diff --git a/docs/ru/guide/integration-practical.md b/docs/ru/guide/integration-practical.md
index e4deac4..8d1a724 100644
--- a/docs/ru/guide/integration-practical.md
+++ b/docs/ru/guide/integration-practical.md
@@ -1,5 +1,5 @@
-# Particular Qualities
-You can use **props** to get input parameters.
+# Особые качества
+Вы можете использовать **props** для получения входных параметров.
```ts
// user/5
{
@@ -8,6 +8,7 @@ You can use **props** to get input parameters.
}
}
```
-Using **beforeRouteEnter** , **beforeRouteUpdate** , **beforeRouteLeave** is not
-possible at this stage. I will try to fix this problem shortly.
-BeforeModalClose can be used as a temporary solution.
+Использование **beforeRouteEnter** , **beforeRouteUpdate** , **beforeRouteLeave** не является
+возможно на данном этапе. Я постараюсь исправить эту проблему в ближайшее время.
+BeforeModalClose можно использовать как временное решение.
+
diff --git a/docs/ru/guide/modal-object.md b/docs/ru/guide/modal-object.md
index 7c7a851..1685ca9 100644
--- a/docs/ru/guide/modal-object.md
+++ b/docs/ru/guide/modal-object.md
@@ -1,15 +1,16 @@
# ModalObject
-The pushModal and openModal methods return an object of the following type:
+Методы pushModal и openModal возвращают объект, содержащий следующие свойства:
-- **id** - unique identifier of the modal window.
+- **id** - уникальный идентификатор модального окна.
-- **close** - a method that allows you to close the created modal window.
+- **close** - метод, позволяющий закрыть созданное модальное окно.
-- **onclose** is a function that is executed when an attempt is made to close a window. This function can be overridden to control the closing of the window. If **onclose** returns false, the modal will not be closed.
+- **onclose** - это функция, которая выполняется при попытке закрыть окно. Эту функцию можно переопределить для
+управления закрытием окна. Если **onclose** возвращает false, модальное окно не закроется.
-- **instance** - an instance of an open modal window. Allows you to access the properties and methods of the modal window.
+- **instance** - экземпляр открытого модального окна. Позволяет получить доступ к свойствам и методам модального окна.
-- **closed** - computed variable, true if the modal window is open.
+- **closed** - `computed` переменная. Имеет значение **true**, если модальное окно открыто.
```ts
import {openModal} from "jenesius-vue-modal";
@@ -19,9 +20,9 @@ const modal = await openModal(Modal, {
modal.onclose = () => false
modal.instance.message; // "Welcome"
-modal.closed.value; // true
+modal.closed.value; // false
-modal.close() // The modal will not be closed
+modal.close() // Модальное окно не закроется
```
```ts
const modal = await openModal(Modal);
@@ -34,7 +35,9 @@ modal.onclose = () => {
modal.close() // Close modal if the weather is rainy
```
-When using **onclose**, we can also access the internal fields and methods of the modal by passing a non-anonymous function as a parameter:
+При использовании **onclose** мы также можем получить доступ к внутренним полям и методам модального окна, передав
+неанонимную функцию в качестве параметра:
+
```vue
// ./modal.vue
{
@@ -55,6 +58,6 @@ modal.onclose = function(){
```
## Instance
-If you are tagging **instance** in your project together in `
diff --git a/examples/prompt-modal/README.md b/examples/prompt-modal/README.md
index b9c2dd6..602fa11 100644
--- a/examples/prompt-modal/README.md
+++ b/examples/prompt-modal/README.md
@@ -19,7 +19,7 @@ Let's see how it works step by step: