From b8e4bb9ab3f49cc4b2f2166eeec3781739c28208 Mon Sep 17 00:00:00 2001
From: azabroflovski <azabroflovski@gmail.com>
Date: Sat, 4 May 2024 22:35:01 +0500
Subject: [PATCH] feat: rename native-modal => tiny-dialogue

---
 README.md                 |  16 +++---
 docs/.vitepress/config.ts |   6 +--
 docs/index.md             |   4 +-
 docs/introduction.md      |   8 +--
 docs/quick-start.md       |  20 +++----
 package-lock.json         |   4 +-
 package.json              |  13 +++--
 src/lib/index.ts          | 106 +-------------------------------------
 src/lib/plain.ts          |  99 +++++++++++++++++++++++++++++++++++
 src/lib/types.ts          |   3 ++
 src/main.ts               |   4 +-
 11 files changed, 142 insertions(+), 141 deletions(-)
 create mode 100644 src/lib/plain.ts
 create mode 100644 src/lib/types.ts

diff --git a/README.md b/README.md
index 78a161d..aba214b 100644
--- a/README.md
+++ b/README.md
@@ -4,13 +4,13 @@
 
 Package is available on npm and can be installed from the command line.
 ```shell
-$ npm i native-modal
+$ npm i tiny-dialogue
 ```
 ### via CDN
 You can also download or link to the latest compiled version using the CDN.
 
 ```shell
-https://unpkg.com/native-modal/dist/native-modal.min.js
+https://unpkg.com/tiny-dialogue/dist/tiny-dialogue.min.js
 ```
 
 ## Usage
@@ -18,9 +18,9 @@ https://unpkg.com/native-modal/dist/native-modal.min.js
 See simple usage with attribute based modals.
 
 ```typescript
-import { initNativeModal } from 'native-modal'
+import { initSimpleDialogues } from 'tiny-dialogue'
 
-initNativeModal() // register attrs handling
+initSimpleDialogues() // enable simple mode (attrs handling)
 ```
 
 ```html
@@ -30,7 +30,7 @@ initNativeModal() // register attrs handling
 ... 
 
 <dialog>
-    <h2>NativeModal</h2>
+    <h2>Dialogue</h2>
     <p>Hello, click on OK to close modal.</p>
     <button data-modal-close>OK</button>
 </dialog>
@@ -132,7 +132,7 @@ First, we need to define the modal structure of the DOM
 
 Next, we need to create a Modal instance:
 ```typescript
-import { Modal } from 'native-modal'
+import { Modal } from 'tiny-dialogue'
 
 const modal = new Modal('#modal')
 
@@ -143,9 +143,9 @@ modal.close() // easy to close!
 Okay, how do I apply the parameters? Let's look at an example:
 
 ```typescript
-import { Modal } from 'native-modal'
+import { Modal } from 'tiny-dialogue'
 
-const modal = new Modal('#modal', {
+const modal = new Dialogue('#modal', {
     animation: true, // enable open/close animation
     disableEsc: true, // prevent esc closing
 })
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index cce23e2..216be51 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -2,8 +2,8 @@ import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  base: '/native-modal/',
-  title: 'NativeModal',
+  base: '/tiny-dialogue/',
+  title: 'Dialogue',
   description: 'Tiny wrapper over <dialog />',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -30,7 +30,7 @@ export default defineConfig({
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/azabroflovski/native-modal' },
+      { icon: 'github', link: 'https://github.com/azabroflovski/tiny-dialogue' },
     ],
   },
 })
diff --git a/docs/index.md b/docs/index.md
index 497222c..b557c92 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,7 +3,7 @@
 layout: home
 
 hero:
-  name: "NativeModal"
+  name: "Dialogue"
   text: "Tiny wrapper over the &lt;dialog /&gt;"
   tagline: No overhead scripts. Just modal.
   actions:
@@ -15,7 +15,7 @@ hero:
       link: /demos
   image:
     src: /logo.png
-    alt: NativeModal
+    alt: Dialogue
 
 features:
   - title: 0.1 kb
diff --git a/docs/introduction.md b/docs/introduction.md
index 9a15d48..1e9dd69 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -1,14 +1,14 @@
 # Introduction
 
-These are the core concepts you need to know about `native-modal` and its approach to modals management.
+These are the core concepts you need to know about `tiny-dialogue` and its approach to modals management.
 
-## What is NativeModal ?
+## What is Dialogue ?
 
-NativeModal is a streamlined and efficient library designed to provide 
+Dialogue is a streamlined and efficient library designed to provide 
 a simple and direct wrapper around the native HTML [`<dialog>`]() element,
 providing an effortless way to implement modals without the need for bulky scripts or complex dependencies.
 
-In summary, `native-modal` is an elegant, performance-oriented solution for implementing modals in web applications.
+In summary, `tiny-dialogue` is an elegant, performance-oriented solution for implementing modals in web applications.
 Its combination of minimal overhead, native browser integration, speed, broad 
 compatibility, framework flexibility, and strong typing makes it an excellent 
 choice for developers.
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 2e873d3..f043e55 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress';
 import { computed } from 'vue';
-import { initNativeModal } from '../src/lib';
+import { initSimpleDialogues } from '../src/lib';
 
-initNativeModal();
+initSimpleDialogues();
 
 const { isDark } = useData();
 const dialogAttrs = computed(() => {
@@ -27,13 +27,13 @@ The package is under **active development**, in this regard, there may be signif
 
 Package is available on npm and can be installed from the command line.
 ```shell
-$ npm i native-modal
+$ npm i tiny-dialogue
 ```
 ### via CDN
 You can also download or link to the latest compiled version using the CDN.
 
 ```shell
-https://unpkg.com/native-modal/dist/native-modal.min.js
+https://unpkg.com/tiny-dialogue/dist/tiny-dialogue.min.js
 ```
 
 ## Usage
@@ -41,9 +41,9 @@ https://unpkg.com/native-modal/dist/native-modal.min.js
 See simple usage with attribute based modals.
 
 ```typescript
-import { initNativeModal } from 'native-modal'
+import { initSimpleDialogues } from 'tiny-dialogue'
 
-initNativeModal() // register attrs handling
+initSimpleDialogues() // register attrs handling
 ```
 
 ```html
@@ -53,7 +53,7 @@ initNativeModal() // register attrs handling
 ... 
 
 <dialog>
-    <h2>NativeModal</h2>
+    <h2>Dialogue</h2>
     <p>Hello, click on OK to close modal.</p>
     <button data-modal-close>OK</button>
 </dialog>
@@ -64,7 +64,7 @@ initNativeModal() // register attrs handling
 <button class="VPButton medium brand" data-modal-open="dialog">Show modal</button>
 
 <dialog v-bind="dialogAttrs">
-    <h2>NativeModal</h2>
+    <h2>Dialogue</h2>
     <p>Hello, click on OK to close modal.</p>
     <button data-modal-close>OK</button>
 </dialog>
@@ -225,7 +225,7 @@ First, we need to define the modal structure of the DOM
 
 Next, we need to create a Modal instance: 
 ```typescript
-import { Modal } from 'native-modal'
+import { Modal } from 'tiny-dialogue'
 
 const modal = new Modal('#modal')
 
@@ -236,7 +236,7 @@ modal.close() // easy to close!
 Okay, how do I apply the parameters? Let's look at an example:
 
 ```typescript
-import { Modal } from 'native-modal'
+import { Modal } from 'tiny-dialogue'
 
 const modal = new Modal('#modal', {
     animation: true, // enable open/close animation
diff --git a/package-lock.json b/package-lock.json
index a0fc7b5..8fcb165 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "native-modal",
+  "name": "tiny-dialogue",
   "version": "0.0.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "native-modal",
+      "name": "tiny-dialogue",
       "version": "0.0.9",
       "license": "MIT",
       "devDependencies": {
diff --git a/package.json b/package.json
index 7ac1329..93a9d7c 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,18 @@
 {
-  "name": "native-modal",
+  "name": "tiny-dialogue",
   "private": false,
   "version": "0.0.9",
-  "description": "NativeModal - tiny wrapper over the <dialog />. No overhead scripts. Just modal.",
+  "description": "Dialogue - tiny wrapper over the <dialog />. No overhead scripts. Just dialog.",
   "type": "module",
   "author": "azabroflovski",
   "license": "MIT",
-  "homepage": "https://azabroflovski.github.io/native-modal/",
+  "homepage": "https://azabroflovski.github.io/tiny-dialogue",
   "repository": {
     "type": "git",
-    "url": "https://github.com/azabroflovski/native-modal"
+    "url": "https://github.com/azabroflovski/tiny-dialogue"
   },
   "bugs": {
-    "url": "https://github.com/azabroflovski/native-modal/issues",
+    "url": "https://github.com/azabroflovski/tiny-dialogue/issues",
     "email": "hi@azabroflovski.uz"
   },
   "keywords": [
@@ -20,6 +20,9 @@
     "modals",
     "dialog",
     "dialogs",
+    "tiny dialogue",
+    "tiny",
+    "dialogue",
     "native-modal",
     "native-dialog",
     "native",
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 9737b6a..2e9fe4e 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,105 +1 @@
-import './styles/main.css'
-import './styles/default.css'
-import { getDialogElement } from './helpers'
-
-export function initNativeModal() {
-  // SSR FRIENDLY
-  if (typeof document === 'undefined' || typeof window === 'undefined')
-    return
-
-  function openDialog(dialog: HTMLDialogElement) {
-    if (dialog.hasAttribute('once')) {
-      if (!dialog.opened) {
-        dialog.showModal()
-        dialog.opened = true
-      }
-    }
-    else {
-      dialog.showModal()
-    }
-  }
-
-  document.addEventListener('click', (event) => {
-    // The event.target property references the element that was clicked.
-    // The 'as Element' part casts the target to an Element type.
-    const target = event.target as Element
-
-    // Use the closest method to find the nearest ancestor of the clicked element
-    // (including the clicked element itself) that has the 'data-modal-open' attribute.
-    const openDialogElement = target.closest('[data-modal-open]')
-
-    // If an element with 'data-modal-open' was found...
-    if (openDialogElement) {
-      // Retrieve the value of the 'data-modal-open' attribute, which should correspond
-      // to the selector of the dialog to be opened.
-      const targetDialogSelector = openDialogElement?.getAttribute('data-modal-open')
-
-      // If the selector is not empty, use it to find and open the dialog.
-      if (targetDialogSelector) {
-        const dialog = getDialogElement(targetDialogSelector)
-
-        if (dialog.hasAttribute('once')) {
-
-        }
-
-        if (dialog.hasAttribute('show-delay')) {
-          setTimeout(() => {
-            openDialog(dialog)
-          }, +dialog.getAttribute('show-delay')!)
-        }
-        else {
-          openDialog(dialog)
-        }
-
-        if (dialog.hasAttribute('disable-esc')) {
-          dialog.addEventListener('keydown', (event) => {
-            if (event.key === 'Escape')
-              event.preventDefault() // Prevent the default action of closing the dialog
-          })
-        }
-      }
-
-      return
-    }
-
-    // Similar to the previous block, but for closing dialogs.
-    // It finds the nearest ancestor element with the 'data-modal-close' attribute.
-    const closeDialogElement = target.closest('[data-modal-close]')
-    if (closeDialogElement) {
-      // Retrieve the value of the 'data-modal-close' attribute, which should correspond
-      // to the selector of the dialog to be closed.
-      const targetDialogSelector = closeDialogElement?.getAttribute('data-modal-close')
-
-      // If the selector is provided, use it to find and close the dialog.
-      if (targetDialogSelector) {
-        getDialogElement(targetDialogSelector).close()
-      }
-      else {
-        // If no specific dialog selector is provided,
-        // find the closest dialog element to the clicked element and close it.
-        const targetDialog = closeDialogElement.closest('dialog')
-
-        if (!targetDialog)
-          return
-
-        if (targetDialog.hasAttribute('animation')) {
-          targetDialog.setAttribute('close', '')
-          targetDialog.addEventListener('animationend', () => {
-            if (targetDialog.hasAttribute('close')) {
-              targetDialog.removeAttribute('close')
-              targetDialog.close()
-            }
-          })
-        }
-        else {
-          targetDialog.close()
-        }
-      }
-    }
-  })
-}
-
-export class Modal {
-  constructor() {
-  }
-}
+export * from './plain.ts'
diff --git a/src/lib/plain.ts b/src/lib/plain.ts
new file mode 100644
index 0000000..088380f
--- /dev/null
+++ b/src/lib/plain.ts
@@ -0,0 +1,99 @@
+import { getDialogElement } from './helpers'
+import type { HTMLDialogueElement } from './types.ts'
+
+export function enableDialoguePlainMode() {
+  // SSR FRIENDLY
+  if (typeof document === 'undefined' || typeof window === 'undefined')
+    return
+
+  function openDialog(dialog: HTMLDialogueElement) {
+    if (dialog.hasAttribute('once')) {
+      if (!dialog.isOpen) {
+        dialog.showModal()
+        dialog.isOpen = true
+      }
+    }
+    else {
+      dialog.showModal()
+    }
+  }
+
+  document.addEventListener('click', (event) => {
+    // The event.target property references the element that was clicked.
+    // The 'as Element' part casts the target to an Element type.
+    const target = event.target as Element
+
+    // Use the closest method to find the nearest ancestor of the clicked element
+    // (including the clicked element itself) that has the 'data-modal-open' attribute.
+    const openDialogElement = target.closest('[data-modal-open]')
+
+    // If an element with 'data-modal-open' was found...
+    if (openDialogElement) {
+      // Retrieve the value of the 'data-modal-open' attribute, which should correspond
+      // to the selector of the dialog to be opened.
+      const targetDialogSelector = openDialogElement?.getAttribute('data-modal-open')
+
+      // If the selector is not empty, use it to find and open the dialog.
+      if (targetDialogSelector) {
+        const dialog = getDialogElement(targetDialogSelector) as HTMLDialogueElement
+
+        if (dialog.hasAttribute('once')) {
+
+        }
+
+        if (dialog.hasAttribute('show-delay')) {
+          setTimeout(() => {
+            openDialog(dialog)
+          }, +dialog.getAttribute('show-delay')!)
+        }
+        else {
+          openDialog(dialog)
+        }
+
+        if (dialog.hasAttribute('disable-esc')) {
+          dialog.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape')
+              event.preventDefault() // Prevent the default action of closing the dialog
+          })
+        }
+      }
+
+      return
+    }
+
+    // Similar to the previous block, but for closing dialogs.
+    // It finds the nearest ancestor element with the 'data-modal-close' attribute.
+    const closeDialogElement = target.closest('[data-modal-close]')
+    if (closeDialogElement) {
+      // Retrieve the value of the 'data-modal-close' attribute, which should correspond
+      // to the selector of the dialog to be closed.
+      const targetDialogSelector = closeDialogElement?.getAttribute('data-modal-close')
+
+      // If the selector is provided, use it to find and close the dialog.
+      if (targetDialogSelector) {
+        getDialogElement(targetDialogSelector).close()
+      }
+      else {
+        // If no specific dialog selector is provided,
+        // find the closest dialog element to the clicked element and close it.
+        const targetDialog = closeDialogElement.closest('dialog')
+
+        if (!targetDialog)
+          return
+
+        if (targetDialog.hasAttribute('animation')) {
+          targetDialog.setAttribute('close', '')
+          targetDialog.addEventListener('animationend', () => {
+            if (targetDialog.hasAttribute('close')) {
+              targetDialog.removeAttribute('close')
+              targetDialog.close()
+            }
+          })
+        }
+        else {
+          targetDialog.close()
+        }
+      }
+    }
+  })
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..b113153
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,3 @@
+export interface HTMLDialogueElement extends HTMLDialogElement {
+  isOpen: boolean
+}
diff --git a/src/main.ts b/src/main.ts
index 40d4d19..2fb0473 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,3 @@
-import { initNativeModal } from './lib'
+import { enableDialoguePlainMode } from './lib'
 
-initNativeModal()
+enableDialoguePlainMode()