{"_id":"@azulejo-kit/modal","name":"@azulejo-kit/modal","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@azulejo-kit/modal","version":"1.1.0","type":"module","main":"./dist/index.umd.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","test":"vitest --run --passWithNoTests","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"devDependencies":{"@storybook/addon-essentials":"^7.0.0","@storybook/addon-interactions":"^7.0.0","@storybook/vue3":"^7.0.0","@storybook/vue3-vite":"^7.0.0","@tailwindcss/vite":"^4.0.0","storybook":"^7.0.0","tailwindcss":"^4.0.0","vue":"^3.3.4"},"peerDependencies":{"vue":">=3.0.0"},"gitHead":"a6711e085fc4b083654f8223f01f7a3462e0c66f","description":"A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action.","_id":"@azulejo-kit/modal@1.1.0","_nodeVersion":"20.20.1","_npmVersion":"lerna/6.6.2/node@v20.20.1+x64 (linux)","dist":{"integrity":"sha512-qXPzd2ZyiiOhc5iVd/zDcTWdpxxLZtLz8phssv2ve8xagwvzezSVXxQFUg3KdNixpoFCP0QMrJoCAQFNECE3Fw==","shasum":"4ebbcc9264b9f87fc8f91abd82eb589448b33258","tarball":"https://registry.npmjs.org/@azulejo-kit/modal/-/modal-1.1.0.tgz","fileCount":13,"unpackedSize":24113,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHc3uIVPHta92v9JEjNsBm8uTlyfGLOMzDtxN4EBt2QYAiEAsFfd/jh7CombqL6besmflmuHgw7VRRmVXd2xIQOjQ6A="}]},"_npmUser":{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"},"directories":{},"maintainers":[{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/modal_1.1.0_1773316206439_0.44741078433140613"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T11:50:06.313Z","1.1.0":"2026-03-12T11:50:06.591Z","modified":"2026-03-12T11:50:06.814Z"},"maintainers":[{"name":"apaneto_adeo123","email":"aparicio.neto@ext.leroymerlin.pt"}],"description":"A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action.","readme":"# Modal\n\nA modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action.\n\n## Installation\n\n```bash\nnpm install @azulejo-kit/modal\n# or\nyarn add @azulejo-kit/modal\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `open` | `boolean` | — | If `true`, display the modal. |\n| `title` | `string` | — | **Required.** Title of the modal. |\n| `description` | `string` | — | Description of the modal. |\n| `closable` | `boolean` | `true` | If `true`, display the close button. |\n| `size` | `\"s\"` \\| `\"m\"` \\| `\"l\"` | `\"m\"` | Size of the modal dialog. |\n| `scroll` | `boolean` | `false` | If `true`, the modal body becomes scrollable. |\n| `closeOnOverlay` | `boolean` | `false` | If `true`, close the modal when clicking the overlay. |\n\n## Emits\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:open` | `boolean` | Emitted when the modal display changes. |\n| `close` | — | Emitted when the modal closes. |\n\n## Slots\n\n| Name | Description |\n| --- | --- |\n| `icon` | Use this slot to insert an icon next to the title. |\n| `default` | Use this slot to insert the content of the modal. |\n| `link` | Use this slot to insert a link in the footer. |\n| `footer` | Use this slot to insert buttons in the footer. |\n\n## Basic Usage\n\n```vue\n<script setup>\nimport { ref } from 'vue'\nimport Modal from '@azulejo-kit/modal'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <button @click=\"isOpen = true\">Open Modal</button>\n  <Modal v-model:open=\"isOpen\" title=\"Confirm action\" description=\"Are you sure?\">\n    <template #footer>\n      <button @click=\"isOpen = false\">Cancel</button>\n      <button @click=\"isOpen = false\">Confirm</button>\n    </template>\n  </Modal>\n</template>\n```\n","readmeFilename":"README.md","_rev":"1-b93ddee78ab3fdba7edcef288c7f5c5c"}