style: reformat code via eslint

docs/.vitepress/config.ts

@@ -3,13 +3,13 @@ import { defineConfig } from 'vitepress'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
  base: '/native-modal/',
- title: "NativeModal",
- description: "Tiny wrapper over <dialog />",
+ title: 'NativeModal',
+ description: 'Tiny wrapper over <dialog />',
  themeConfig: {
  // https://vitepress.dev/reference/default-theme-config
  nav: [
  { text: 'Home', link: '/' },
- { text: 'Demos', link: '/demos' }
+ { text: 'Demos', link: '/demos' },
  ],
 
  sidebar: [
@@ -18,19 +18,19 @@ export default defineConfig({
  items: [
  { text: 'Introduction', link: '/introduction' },
  { text: 'Quick start', link: '/quick-start' },
- ]
+ ],
  },
  {
  text: 'API',
  items: [
  { text: 'Props', link: '/api/props' },
  { text: 'Themes', link: '/api/themes' },
- ]
- }
+ ],
+ },
  ],
 
  socialLinks: [
- { icon: 'github', link: 'https://github.com/azabroflovski/native-modal' }
- ]
- }
+ { icon: 'github', link: 'https://github.com/azabroflovski/native-modal' },
+ ],
+ },
 })

docs/.vitepress/theme/index.ts

@@ -13,5 +13,5 @@ export default {
  },
  enhanceApp({ app, router, siteData }) {
  // ...
- }
+ },
 } satisfies Theme

src/lib/helpers/index.ts

@@ -3,8 +3,8 @@
  * @param selector {string}
  */
 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
+ // 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
 }

src/lib/index.ts

@@ -3,101 +3,103 @@ import './styles/default.css'
 import { getDialogElement } from './helpers'
 
 export function initNativeModal() {
- // SSR FRIENDLY
- if (typeof document === 'undefined' || typeof window === 'undefined') {
- return
+ // 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)
 
- 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
- }
- });
- }
- }
+ if (dialog.hasAttribute('show-delay')) {
+ setTimeout(() => {
+ openDialog(dialog)
+ }, +dialog.getAttribute('show-delay')!)
+ }
+ else {
+ openDialog(dialog)
+ }
 
- return
+ 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()
- }
+ // 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()
  }
- return
+ })
+ }
+ else {
+ targetDialog.close()
  }
- })
+ }
+ }
+ })
 }
 
 export class Modal {
-  constructor() {
-  }
+ constructor() {
+ }
 }