Skip to content

Commit

Permalink
feat: rename native-modal => tiny-dialogue
Browse files Browse the repository at this point in the history
  • Loading branch information
azabroflovski committed May 4, 2024
1 parent e0ccb2e commit 9d1a2b3
Show file tree
Hide file tree
Showing 14 changed files with 154 additions and 161 deletions.
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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!
Expand All @@ -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
})
Expand Down
6 changes: 3 additions & 3 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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' },
],
},
})
20 changes: 6 additions & 14 deletions docs/.vitepress/theme/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}

Expand Down
6 changes: 3 additions & 3 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -15,7 +15,7 @@ hero:
link: /demos
image:
src: /logo.png
alt: NativeModal
alt: Dialogue

features:
- title: 0.1 kb
Expand Down
8 changes: 4 additions & 4 deletions docs/introduction.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
Binary file modified docs/public/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 12 additions & 12 deletions docs/quick-start.md
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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!
Expand All @@ -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
})
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 8 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 3 additions & 1 deletion src/lib/helpers/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import type { HTMLDialogueElement } from '../types.ts'

/**
* Function to retrieve a dialog element based on a CSS selector.
* @param selector {string}
Expand All @@ -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
}
Loading

0 comments on commit 9d1a2b3

Please sign in to comment.