feat: rebrand native-modal => tiny-dialogue

azabroflovski · May 4, 2024 · 8d47f99 · 8d47f99
1 parent e0ccb2e
commit 8d47f99
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 161 deletions.
diff --git a/README.md b/README.md
@@ -4,23 +4,23 @@
 
 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
 
 See simple usage with attribute based modals.
 
 ```typescript
-import { initNativeModal } from 'native-modal'
+import { initSimpleMode } from 'tiny-dialogue'
 
-initNativeModal() // register attrs handling
+initSimpleMode() // 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,9 +132,9 @@ 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 { Dialogue } from 'tiny-dialogue'
 
-const modal = new Modal('#modal')
+const modal = new Dialogue('#modal')
 
 modal.open() // Yeah, you open me!
 modal.close() // easy to close!
@@ -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 { Dialogue } 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
@@ -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/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -49,9 +49,9 @@
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);
 
- --vp-c-brand-1: var(--vp-c-indigo-1);
- --vp-c-brand-2: var(--vp-c-indigo-2);
- --vp-c-brand-3: var(--vp-c-indigo-3);
+ --vp-c-brand-1: #cc7cd3;
+ --vp-c-brand-2: #cc7cd3;
+ --vp-c-brand-3: #e28fe9;
  --vp-c-brand-soft: var(--vp-c-indigo-soft);
 
  --vp-c-tip-1: var(--vp-c-brand-1);
@@ -92,17 +92,9 @@
 
 :root {
  --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #bd34fe 30%,
- #41d1ff
- );
-
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #bd34fe 50%,
- #47caff 50%
- );
+ --vp-home-hero-name-background: linear-gradient(90deg, hsla(302, 82%, 76%, 1) 0%, hsla(258, 40%, 68%, 1) 100%);
+
+ --vp-home-hero-image-background-image: linear-gradient(90deg, hsla(302, 82%, 76%, 1) 0%, hsla(258, 40%, 68%, 1) 100%);
  --vp-home-hero-image-filter: blur(44px);
 }
 

diff --git a/docs/index.md b/docs/index.md
@@ -3,9 +3,9 @@
 layout: home
 
 hero:
- name: "NativeModal"
+ name: "Dialogue"
  text: "Tiny wrapper over the &lt;dialog /&gt;"
- tagline: No overhead scripts. Just modal.
+ tagline: Native, no overhead scripts, just dialog
  actions:
  - theme: brand
  text: Get started
@@ -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
@@ -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/public/logo.png b/docs/public/logo.png
diff --git 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 { initSimpleMode } from '../src/lib';
 
-initNativeModal();
+initSimpleMode();
 
 const { isDark } = useData();
 const dialogAttrs = computed(() => {
@@ -27,23 +27,23 @@ 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
 
 See simple usage with attribute based modals.
 
 ```typescript
-import { initNativeModal } from 'native-modal'
+import { initSimpleMode } from 'tiny-dialogue'
 
-initNativeModal() // register attrs handling
+initSimpleMode() // 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,9 +225,9 @@ 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 { Dialogue } from 'tiny-dialogue'
 
-const modal = new Modal('#modal')
+const modal = new Dialogue('#modal')
 
 modal.open() // Yeah, you open me!
 modal.close() // easy to close!
@@ -236,9 +236,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 { Dialogue } 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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,25 +1,28 @@
 {
- "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": "[email protected]"
  },
  "keywords": [
  "modal",
  "modals",
  "dialog",
  "dialogs",
+ "tiny dialogue",
+ "tiny",
+ "dialogue",
  "native-modal",
  "native-dialog",
  "native",

diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
@@ -1,3 +1,5 @@
+import type { HTMLDialogueElement } from '../types.ts'
+
 /**
  * Function to retrieve a dialog element based on a CSS selector.
  * @param selector {string}
@@ -6,5 +8,5 @@ export function getDialogElement(selector: string) {
  // The querySelector function is used to find the first element that matches the provided CSS selector.
  // The 'as HTMLDialogElement' part casts the result to an HTMLDialogElement type,
  // ensuring that the returned value is treated as a dialog element.
- return document.querySelector(selector) as HTMLDialogElement
+ return document.querySelector(selector) as HTMLDialogueElement
 }