{"id":50103635,"url":"https://github.com/osameh15/input-dialog","last_synced_at":"2026-05-23T09:03:03.555Z","repository":{"id":354651189,"uuid":"1223755356","full_name":"osameh15/input-dialog","owner":"osameh15","description":"A beautiful, zero-dependency input dialog module for Nuxt 3 and Nuxt 4 — no Vuetify or icon-font required. Drop it in, call useInputDialog().promptText(...), await the typed value.","archived":false,"fork":false,"pushed_at":"2026-05-21T21:23:02.000Z","size":4404,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T06:52:40.358Z","etag":null,"topics":["front-end","inputdialog","modern-design","nuxt","nuxt3","nuxt4","nuxtjs","typescript","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nuxt-input-dialog","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/osameh15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-28T16:13:46.000Z","updated_at":"2026-05-21T21:23:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/osameh15/input-dialog","commit_stats":null,"previous_names":["osameh15/input-dialog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/osameh15/input-dialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osameh15%2Finput-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osameh15%2Finput-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osameh15%2Finput-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osameh15%2Finput-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osameh15","download_url":"https://codeload.github.com/osameh15/input-dialog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osameh15%2Finput-dialog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33389229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","inputdialog","modern-design","nuxt","nuxt3","nuxt4","nuxtjs","typescript","vue","vue3","vuejs"],"created_at":"2026-05-23T09:02:52.784Z","updated_at":"2026-05-23T09:03:03.547Z","avatar_url":"https://github.com/osameh15.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuxt-input-dialog\n\n[![CI](https://github.com/osameh15/input-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/osameh15/input-dialog/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)\n\nA beautiful, zero-dependency input dialog module for **Nuxt 3 and Nuxt 4** — no Vuetify or icon-font required. Drop it in, call `useInputDialog().promptText(...)`, await the typed value.\n\n![Rename file dialog with a single text input — floating label inside the input box, OK / Cancel buttons](https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/text.png)\n\n- 🎨 **Polished look** — dark radial gradient, colored borders per type, decorative top icon, blurred backdrop\n- 🧩 **Standalone** — no Vuetify, no MDI, no extra CSS framework\n- ⚡️ **Auto-mounted** — no boilerplate, just call `useInputDialog().promptText('Rename', 'New name')`\n- 🎯 **Promise-based API** — `await dialog.promptText(...)` returns the value or `null`; `show()` returns `{ action, values }`\n- 🧠 **Fully typed** — written in TypeScript with full IntelliSense\n- 📝 **7 field types** — `text`, `password`, `email`, `number`, `textarea`, `select`, `autocomplete`\n- ✅ **Validation rules** — `(value) =\u003e true | string`, runs on blur and on submit\n- 🔍 **Smart autocomplete** — type a value not in the list to \"Create new\", with optional path-formatting (auto trailing slash) or custom formatter\n- 🔘 **1 / 2 / 3 button layouts** — default Cancel/Submit or custom buttons with named actions\n- ⌨️ **Keyboard friendly** — `Enter` submits, `Esc` cancels, focus moves to first field on open and is restored on close\n- 🔤 **Modern typography** — bundled **Shabnam** for Persian/Arabic + **Inter** for Latin (both opt-out)\n- 🌐 **Auto RTL** — dialogs containing Arabic/Persian script switch to `dir=\"rtl\"` automatically (detection runs across title, message, warning, and every field's label/placeholder/hint)\n- ♿ **Accessible** — `role=\"alertdialog\"`, `aria-modal`, `aria-labelledby`\n\n---\n\n## Table of contents\n\n- [Installation](#installation)\n- [Quick start](#quick-start)\n- [Module options](#module-options)\n- [Composable API — `useInputDialog()`](#composable-api--useinputdialog)\n- [Field types](#field-types)\n- [Validation rules](#validation-rules)\n- [Autocomplete with create-new](#autocomplete-with-create-new)\n- [Custom buttons](#custom-buttons)\n- [Component API](#component-api)\n- [Theme](#theme)\n- [Customization](#customization)\n- [TypeScript](#typescript)\n- [Development](#development)\n- [License](#license)\n\nFor deeper technical reference (architecture, design rationale, contributing), see [`docs/`](./docs/README.md).\n\n---\n\n## Installation\n\n```bash\nnpm install nuxt-input-dialog\n# or\npnpm add nuxt-input-dialog\n# or\nyarn add nuxt-input-dialog\n```\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-input-dialog'],\n})\n```\n\nThat's it — `useInputDialog()` is auto-imported and an `\u003cInputDialogContainer\u003e` is mounted automatically on the client.\n\n---\n\n## Quick start\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst dialog = useInputDialog()\n\nconst onRename = async () =\u003e {\n  const newName = await dialog.promptText('Rename file', 'New file name', {\n    defaultValue: 'untitled',\n    rules: [v =\u003e (typeof v === 'string' \u0026\u0026 v.length \u003e 0) || 'Name is required'],\n  })\n  if (newName !== null) await api.rename(newName)\n}\n\nconst onSaveAs = async () =\u003e {\n  const result = await dialog.promptSaveAs('document', {\n    extensions: ['.txt', '.md', '.json'],\n    defaultExtension: '.md',\n  })\n  if (result) await api.save(result.fullName)  // 'document.md'\n}\n\nconst onSignup = async () =\u003e {\n  const values = await dialog.promptForm('Create account', [\n    { key: 'username', type: 'text',     label: 'Username', rules: [v =\u003e /^[a-z0-9_]{3,20}$/.test(String(v)) || 'Invalid'] },\n    { key: 'email',    type: 'email',    label: 'Email',    rules: [v =\u003e /\\S+@\\S+\\.\\S+/.test(String(v)) || 'Invalid email'] },\n    { key: 'password', type: 'password', label: 'Password', rules: [v =\u003e String(v).length \u003e= 8 || 'At least 8 chars'] },\n    { key: 'role',     type: 'select',   label: 'Role',     items: ['Member', 'Admin'], defaultValue: 'Member' },\n  ])\n  if (values) await api.signup(values)\n}\n\u003c/script\u003e\n```\n\nThe bundled playground exercises every feature — convenience methods, custom `show()`, validation, autocomplete with create-new, multi-field forms, and Persian RTL:\n\n![Quick demo page with the six convenience-method buttons and the custom show() controls](https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/QuickDemo.png)\n\n---\n\n## Module options\n\nConfigure under the `inputDialog` key in `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-input-dialog'],\n  inputDialog: {\n    autoMount: true,\n    closeOnBackdropClick: false,\n    escapeToCancel: true,\n    prefix: 'Input',\n    loadShabnamFont: true,\n    loadInterFont: true,\n  },\n})\n```\n\n| Option                 | Type      | Default     | Description |\n| ---------------------- | --------- | ----------- | ----------- |\n| `autoMount`            | `boolean` | `true`      | Mounts an `\u003cInputDialogContainer\u003e` automatically on the client. |\n| `closeOnBackdropClick` | `boolean` | `false`     | Backdrop click cancels. Default off so a misclick doesn't lose typed data. |\n| `escapeToCancel`       | `boolean` | `true`      | Escape key cancels. |\n| `prefix`               | `string`  | `'Input'`   | Component name prefix. With the default, components are `\u003cInputDialog\u003e` and `\u003cInputDialogContainer\u003e`. |\n| `theme`                | `'dark' \\| 'light'` | `'dark'` | Initial visual theme. Switch at runtime with `useInputDialog().setTheme(...)` or override per-container with the `theme` prop. |\n| `loadShabnamFont`      | `boolean` | `true`      | Inject the bundled Persian \"Shabnam\" font (gated by `unicode-range`). |\n| `loadInterFont`        | `boolean` | `true`      | Add Inter (Google Fonts) via a `\u003clink\u003e` in the head. |\n\n---\n\n## Composable API — `useInputDialog()`\n\n```ts\nconst dialog = useInputDialog()\n```\n\n### `show(options)`\n\nOpen a dialog. Returns `Promise\u003c{ action, values }\u003e`. Always resolves, never rejects.\n\n```ts\nconst { action, values } = await dialog.show({\n  title: 'Rename',\n  fields: [{ key: 'name', type: 'text', label: 'New name' }],\n})\nif (action === 'confirm') console.log(values.name)\n```\n\n| Option         | Type                                            | Default       |\n| -------------- | ----------------------------------------------- | ------------- |\n| `type`         | `'success' \\| 'warning' \\| 'error' \\| 'info'`   | `'info'`      |\n| `title`        | `string`                                        | required      |\n| `message`      | `string \\| null`                                | `null`        |\n| `fields`       | `InputField[]`                                  | required      |\n| `initialValues`| `Record\u003cstring, unknown\u003e`                       | `{}`          |\n| `warningText`  | `string \\| null`                                | `null`        |\n| `confirmText`  | `string`                                        | `'Submit'`    |\n| `cancelText`   | `string`                                        | `'Cancel'`    |\n| `buttons`      | `InputDialogButton[] \\| null`                   | `null`        |\n\n### Convenience methods\n\nAll return primitive values (or `null` on cancel) — no boilerplate to extract from `values`:\n\n```ts\nconst name:    string       | null = await dialog.promptText('Title', 'Label')\nconst pwd:     string       | null = await dialog.promptPassword('Authenticate')\nconst qty:     number       | null = await dialog.promptNumber('Quantity', 'How many?')\nconst color:   string       | null = await dialog.promptSelect('Color', 'Pick', ['red', 'green', 'blue'])\nconst file = await dialog.promptSaveAs('document', { extensions: ['.md', '.txt'] })\n//        ↑ { fileName, extension?, fullName? } | null\n\nconst values: Record\u003cstring, unknown\u003e | null = await dialog.promptForm('Title', [...fields])\n```\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003epromptSaveAs\u003c/strong\u003e (file name + extension select)\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003epromptForm\u003c/strong\u003e (multi-field form)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/SaveAs.png\" alt=\"Save As dialog with File Name 'document' and File Type '.md' selected\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/Form.png\" alt=\"Edit profile form with Full name, Email, Bio textarea, and Role select fields\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## Field types\n\n```ts\ninterface InputField {\n  key: string\n  type: 'text' | 'password' | 'email' | 'number' | 'textarea' | 'select' | 'autocomplete'\n  label: string\n  placeholder?: string\n  hint?: string | null\n  rules?: InputFieldRule[]\n  defaultValue?: unknown\n  // for textarea\n  rows?: number\n  // for select / autocomplete\n  items?: unknown[]\n  // for autocomplete\n  createNew?: false | 'path' | ((rawValue: string) =\u003e string)\n}\n```\n\n| Type          | Renders            | Notes                                           |\n| ------------- | ------------------ | ----------------------------------------------- |\n| `text`        | `\u003cinput type=text\u003e` | Pressing Enter submits the form                |\n| `password`    | `\u003cinput type=password\u003e` |                                            |\n| `email`       | `\u003cinput type=email\u003e` | Use the `@` validation rule of your choice    |\n| `number`      | `\u003cinput type=number\u003e` |                                              |\n| `textarea`    | `\u003ctextarea\u003e`       | `rows` controls initial height                  |\n| `select`      | Custom dropdown    | Single-select from `items` array                |\n| `autocomplete`| Custom search-box  | Filter `items`, optionally suggest a new value  |\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003epassword\u003c/strong\u003e (required-rule error)\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003enumber\u003c/strong\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/password.png\" alt=\"Password field with red 'Password is required' error\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/number.png\" alt=\"Number field — Quantity dialog with default value 1\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003etextarea\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cstrong\u003eselect\u003c/strong\u003e (open dropdown)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/textArea.png\" alt=\"Textarea field with multi-line input area\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/select.png\" alt=\"Select field with the dropdown open showing four theme colors\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## Validation rules\n\nA rule is a function that takes the value and returns `true` (valid) or a `string` (error message). Multiple rules per field run in order.\n\n```ts\n{\n  key: 'username',\n  type: 'text',\n  label: 'Username',\n  hint: '3–20 chars, lowercase letters, numbers, underscores only',\n  rules: [\n    v =\u003e (typeof v === 'string' \u0026\u0026 v.length \u003e= 3) || 'At least 3 chars',\n    v =\u003e (typeof v === 'string' \u0026\u0026 v.length \u003c= 20) || 'At most 20 chars',\n    v =\u003e /^[a-z0-9_]+$/.test(String(v)) || 'Only lowercase letters, numbers, and underscores',\n  ],\n}\n```\n\nRules run **on blur** (after the first interaction) and **on submit** (all fields). Field-level errors render below each field; a form-level error appears under the form when any rules fail on submit.\n\n![Username dialog showing the hint \"3-20 chars, lowercase letters, numbers, underscores only\" below the input](https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/withHint.png)\n\n---\n\n## Autocomplete with create-new\n\nAutocomplete fields can suggest creating a new value when the typed text isn't in `items`. Three modes via the `createNew` option:\n\n```ts\n// Mode 1 — disabled (filter-only autocomplete; default)\n{ key: 'country', type: 'autocomplete', label: 'Country', items: [...], createNew: false }\n\n// Mode 2 — 'path' formatter (built-in: appends a trailing slash if missing)\n{ key: 'folder', type: 'autocomplete', label: 'Folder', items: ['/var/log/'], createNew: 'path' }\n//   typing  '/etc'  →  Create \"/etc/\"\n\n// Mode 3 — custom formatter function\n{\n  key: 'name',\n  type: 'autocomplete',\n  label: 'Constant',\n  items: ['MAX_RETRIES'],\n  createNew: (raw: string) =\u003e raw.toUpperCase().replace(/\\s+/g, '_'),\n}\n//   typing  'min retries'  →  Create \"MIN_RETRIES\"\n```\n\nWhen create-new mode is on, an extra \"Create\" item appears at the top of the dropdown with a `+` icon and a \"New\" badge. Press **Enter** in the input to commit the typed (formatted) value, or click the suggestion.\n\n![Autocomplete folder picker with \"G\" typed and a \"Create G/\" suggestion at the top of the dropdown with a NEW badge, followed by /var/log/ and /var/log/nginx/](https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/autocomplete.png)\n\n---\n\n## Custom buttons\n\nPass a `buttons` array to override the default Cancel/Submit pair. Supports 1, 2, or 3 buttons.\n\n```ts\nawait dialog.show({\n  title: 'Save changes?',\n  message: 'You have unsaved edits.',\n  fields: [{ key: 'note', type: 'textarea', label: 'Note (optional)' }],\n  buttons: [\n    { text: 'Cancel',  action: 'cancel',  variant: 'outlined', color: 'default' },\n    { text: 'Discard', action: 'discard', variant: 'flat',     color: 'default' },\n    { text: 'Save',    action: 'save',    variant: 'flat',     color: 'info' },\n  ],\n})\n// resolves with action: 'cancel' | 'discard' | 'save'\n```\n\n| Field      | Type                                                          | Default                                |\n| ---------- | ------------------------------------------------------------- | -------------------------------------- |\n| `text`     | `string`                                                      | required                               |\n| `action`   | `string`                                                      | `'confirm'`                            |\n| `variant`  | `'flat' \\| 'outlined'`                                        | `'outlined'` for cancel, else `'flat'` |\n| `color`    | `'success' \\| 'warning' \\| 'error' \\| 'info' \\| 'default'`    | dialog `type` for confirm              |\n| `disabled` | `boolean`                                                     | `false`                                |\n\n---\n\n## Component API\n\n### `\u003cInputDialogContainer\u003e`\n\nThe container that renders the active dialog. Auto-mounted by default — only use this directly if `autoMount: false`.\n\n| Prop                   | Type      | Default | Description |\n| ---------------------- | --------- | ------- | ----------- |\n| `teleport`             | `boolean` | `true`  | Render into `document.body` via `\u003cTeleport\u003e` so the overlay always covers the viewport. |\n| `closeOnBackdropClick` | `boolean` | `false` | Backdrop click cancels. |\n| `escapeToCancel`       | `boolean` | `true`  | Escape key cancels. |\n\n### `\u003cInputDialog\u003e`\n\nThe single-dialog component. You normally don't render this directly — `useInputDialog()` and `\u003cInputDialogContainer\u003e` handle it. Exposed for static / non-composable usage with `v-model`.\n\nEmits: `update:modelValue`, `confirm` (with values), `cancel`, `action` (with name + values).\n\n---\n\n## Theme\n\nShips with a **dark** theme (default) and a **light** theme. Switch globally at runtime, or override per-container.\n\n```ts\n// nuxt.config.ts — initial theme\ninputDialog: { theme: 'light' }\n```\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst dialog = useInputDialog()\n\nconsole.log(dialog.theme.value) // 'dark' or 'light'\n\ndialog.setTheme('light')\n\n// Optional: follow the user's system preference\nconst sync = () =\u003e dialog.setTheme(\n  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',\n)\nsync()\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', sync)\n\u003c/script\u003e\n```\n\nPer-container override:\n\n```vue\n\u003cInputDialogContainer theme=\"light\" /\u003e\n```\n\nThe `theme` prop, when set, takes precedence over `useInputDialog().theme`. Type-color borders (`#30e0a1` / `#FFD700` / `#DC143C` / `#00FFFF`) stay constant in both themes — only the card, overlay backdrop, input field colors, dropdown panel, and outlined-button neutrals swap.\n\n---\n\n## Customization\n\nThe auto-mounted container lives at `#nuxt-input-dialog-root`. Override styles globally by targeting that root:\n\n```css\n/* assets/css/main.css */\n#nuxt-input-dialog-root .dialog-card {\n  max-width: 600px;\n  border-radius: 16px;\n}\n\n#nuxt-input-dialog-root .dialog-input {\n  font-family: ui-monospace, monospace;\n}\n```\n\n### Fonts\n\nTwo fonts loaded by default:\n\n- **Inter** (English / Latin) — Google Fonts via `\u003clink\u003e`. Disable with `loadInterFont: false`.\n- **Shabnam** (Persian / Arabic) — bundled woff2 (5 weights), gated by `unicode-range`. Disable with `loadShabnamFont: false`.\n\n### Right-to-left support\n\nWhen the title, message, warning text, or any field's label/placeholder/hint contains Arabic / Persian script, the dialog auto-switches to `dir=\"rtl\"`. Detection is per-instance — you can mix LTR and RTL dialogs in the same app without configuration.\n\n![Persian \"تغییر نام فایل\" rename dialog — RTL layout with ذخیره (Save) and انصراف (Cancel) buttons reversed and Shabnam font rendering](https://raw.githubusercontent.com/osameh15/input-dialog/main/docs/images/rtl.png)\n\n### Manual mounting\n\n```ts\n// nuxt.config.ts\ninputDialog: { autoMount: false }\n```\n\n```vue\n\u003c!-- app.vue --\u003e\n\u003ctemplate\u003e\n  \u003cNuxtLayout\u003e\u003cNuxtPage /\u003e\u003c/NuxtLayout\u003e\n  \u003cInputDialogContainer /\u003e\n\u003c/template\u003e\n```\n\nThe state is global — only one dialog is active at a time, by design. If you mount a container inside an element with `backdrop-filter`, `transform`, `filter`, `perspective`, `will-change`, or `contain`, `\u003cTeleport to=\"body\"\u003e` ensures the overlay still covers the viewport.\n\n---\n\n## TypeScript\n\n```ts\nimport type {\n  InputDialogType,         // 'success' | 'warning' | 'error' | 'info'\n  InputFieldType,          // 'text' | 'password' | 'email' | 'number' | 'textarea' | 'select' | 'autocomplete'\n  InputField,              // single field definition\n  InputFieldRule,          // (value) =\u003e true | string\n  InputDialogButton,       // { text, action?, variant?, color?, disabled?, loading? }\n  InputDialogOptions,      // arg to show()\n  InputDialogResult,       // { action, values }\n  InputDialogInstance,     // shape of currentDialog.value\n} from 'nuxt-input-dialog'\n```\n\n`ModuleOptions` is also exported.\n\n---\n\n## Development\n\n```bash\nnpm install\nnpm run dev:prepare\nnpm run dev            # playground at http://localhost:3000\n\nnpm run lint\nnpm run test\nnpm run prepack        # build dist/\n```\n\nThe playground at `playground/` exercises every field type, every validation pattern, real-world forms (sign-up, server config, save-as), the autocomplete with create-new, and Persian / RTL.\n\n### CI\n\nGitHub Actions runs lint (Node 22) and tests + build (Node 20 and 22) on every push and PR against `main`.\n\n---\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosameh15%2Finput-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosameh15%2Finput-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosameh15%2Finput-dialog/lists"}