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 ``` -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: