{"_id":"@daviduo/vue-bottom-sheet","_rev":"5-0e831f2bff5fbe0489b91c0daa9f5953","name":"@daviduo/vue-bottom-sheet","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@daviduo/vue-bottom-sheet","version":"1.0.0","keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-bottom-sheet@1.0.0","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"dist":{"shasum":"07ff00c543176fbc9ffa2c9defc3c4f64ae8e273","tarball":"https://registry.npmjs.org/@daviduo/vue-bottom-sheet/-/vue-bottom-sheet-1.0.0.tgz","fileCount":6,"integrity":"sha512-otn9VPMv/5oJFXQSf6MBNoO1yz0mFXDjkD3thBfmAMw2PDiQTVGY6VfwTJEnb5v/q+joKqZFTvz6pzjHS+uacQ==","signatures":[{"sig":"MEQCIGzCHy4tinP0ubrd+VWjkTYI5GZMLrUT3FfAPn6zF5SKAiBsnjMXkxLIRDu/4Z0gWWdiKG/jQAI+riy1CiInaN6bpQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38083},"main":"./dist/vue-bottom-sheet.umd.js","type":"module","module":"./dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"}},"gitHead":"edafcf45ae0ced19ed06b0db3b56fffbf79a735c","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","vue-router":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.0_1746524619623_0.822251834903716","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@daviduo/vue-bottom-sheet","version":"1.0.2","keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-bottom-sheet@1.0.2","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"dist":{"shasum":"2d2eab97d9b2685f2e2ffddce3185ddab1d5d2fe","tarball":"https://registry.npmjs.org/@daviduo/vue-bottom-sheet/-/vue-bottom-sheet-1.0.2.tgz","fileCount":7,"integrity":"sha512-c/iDSlwSKqeL/lj9OCoy/Smp7+3Y9CxMSEtd7SwseR24Et5inkOQxqXFWgxLVD1XFT/2c2QLNtq94twFQ1R3+g==","signatures":[{"sig":"MEQCIHizfsMi+AohTpE8S+HMNl6DDTXbAKS8LZSFTeYIchsdAiA5OqI2jla5i0VgUMl09q5YLrSSYrCU/UfIn1ngrsB6cQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38287},"main":"./dist/vue-bottom-sheet.umd.js","type":"module","module":"./dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"}},"gitHead":"645f27c353c23a7c7e75af0df5d15f4ee0dedba8","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","vue-router":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.2_1746525342795_0.24726151023960807","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@daviduo/vue-bottom-sheet","version":"1.0.3","keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-bottom-sheet@1.0.3","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"dist":{"shasum":"b51becbbd07fdfbbdbf9c1cb026e2d7cc9fd4ee6","tarball":"https://registry.npmjs.org/@daviduo/vue-bottom-sheet/-/vue-bottom-sheet-1.0.3.tgz","fileCount":7,"integrity":"sha512-U/GxUrXbTTYDljXQn3A+O2t855+k2/RIoy35VWlLl2Mn3uUnHAtzHdUTSKqV3uma+7RWr6IHTkDZ4+VeJNVWCQ==","signatures":[{"sig":"MEYCIQCdjPWidmxRYXccCqMxzQFzLB/Jp10YX244WEewTyK8IQIhAOmi3y9LPxVv5O/aijvl/t4NtYfLD3n0sVRWNs2BcRyU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39327},"main":"./dist/vue-bottom-sheet.umd.js","type":"module","module":"./dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"}},"gitHead":"c87f7c933bb84f78ca07dd3176a94411876a4b90","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","vue-router":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.3_1746527530408_0.2892861784486658","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@daviduo/vue-bottom-sheet","version":"1.0.4","keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-bottom-sheet@1.0.4","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"dist":{"shasum":"c401aa3484c18db22a37adae44cf437eae0aa201","tarball":"https://registry.npmjs.org/@daviduo/vue-bottom-sheet/-/vue-bottom-sheet-1.0.4.tgz","fileCount":7,"integrity":"sha512-tC5l+aUeqoY/vkl+S4Pfc6gG+aHWEpy0PuwV+am8sA5AMOPkNebFp8zIW0Yl6XwuF2uTi07IfYSr08Elueji6w==","signatures":[{"sig":"MEUCIFz5IDhSzrz+Sz8UjtbSyl3Vii3GW5Cfb7V5SeVdoi7iAiEA+YGP3mAYPylxLlYBBI/+mrKnStYdbSR7W5jfAfb7ODs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39218},"main":"./dist/vue-bottom-sheet.umd.js","type":"module","module":"./dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"}},"gitHead":"9b5f1f29a370605c38b585efeeffe1a096020d2e","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","vue-router":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.4_1746528268786_0.4712009128320913","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@daviduo/vue-bottom-sheet","version":"1.0.5","description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","type":"module","main":"./dist/vue-bottom-sheet.umd.js","module":"./dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"}},"scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"vue":"^3.2.0","vue-router":"^4.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","vite":"^5.0.0","vue":"^3.3.0"},"keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git"},"bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","gitHead":"23494bcf7a86367f3ca8a2d91c9bb1b82552adcd","_id":"@daviduo/vue-bottom-sheet@1.0.5","_nodeVersion":"18.19.1","_npmVersion":"9.2.0","dist":{"integrity":"sha512-vUicTML5SbYnzAmN4z4GIXXH1fdm+yBeYMptRZRE3g6SERzlqfFbY1Ezhcy3jtfHDThfnIIhay7Vi3druXyEFQ==","shasum":"4c329b3dc6baafb4cb304b3794da30a4097ff1cc","tarball":"https://registry.npmjs.org/@daviduo/vue-bottom-sheet/-/vue-bottom-sheet-1.0.5.tgz","fileCount":7,"unpackedSize":40251,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICc6App+fTRuQtddbxLDBcwtSMtWv2AVKgu8YCCJb4S3AiEA8OkDICTv2/qHzZLESs/qPc/QBDgAz+3Sr10UC1JShso="}]},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"directories":{},"maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-bottom-sheet_1.0.5_1746529288113_0.6594574337443184"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-06T09:43:39.512Z","modified":"2025-05-06T11:01:28.500Z","1.0.0":"2025-05-06T09:43:39.837Z","1.0.2":"2025-05-06T09:55:42.971Z","1.0.3":"2025-05-06T10:32:10.594Z","1.0.4":"2025-05-06T10:44:28.962Z","1.0.5":"2025-05-06T11:01:28.326Z"},"bugs":{"url":"https://github.com/0Daviduo0/bottomsheet-pkg/issues"},"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","homepage":"https://github.com/0Daviduo0/bottomsheet-pkg#readme","keywords":["vue","vue3","component","bottom-sheet","draggable","sheet","ui","mobile"],"repository":{"type":"git","url":"git+https://github.com/0Daviduo0/bottomsheet-pkg.git"},"description":"Un componente Vue 3 BottomSheet trascinabile e reattivo","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"readme":"# Vue Bottom Sheet Component ([@daviduo/vue-bottom-sheet])\n\nUn componente Vue 3 altamente configurabile per creare \"bottom sheet\" (pannelli a comparsa dal basso) interattivi e trascinabili, comunemente usati nelle interfacce mobile. Supporta stati di snap (peek, middle, full), gestione del trascinamento, e l'inclusione di link rapidi nello stato \"peek\".\n\nQuesto componente è progettato per integrarsi in progetti che utilizzano **Tailwind CSS**.\n\n## Caratteristiche\n\n* **Tre stati di snap:** Completamente chiuso (peek), parzialmente aperto (middle), e completamente aperto (full).\n* **Altezza Peek Dinamica:** L'altezza dello stato \"peek\" si adatta automaticamente per mostrare l'handle e, opzionalmente, una sezione di \"Quick Links\".\n* **Interazione Intuitiva:** Supporta il trascinamento per cambiare stato e il click sull'handle o sull'overlay.\n* **Sincronizzazione v-model:** Controlla lo stato aperto/chiuso del pannello.\n* **Quick Links:** Mostra una sezione di link rapidi personalizzabili quando il pannello è nello stato \"peek\".\n* **Eventi Dettagliati:** Emette eventi per cambiamenti di stato e interazioni.\n* **Slot per Contenuto:** Permette di inserire contenuto personalizzato nel corpo del pannello.\n* **Design Responsivo:** Nasconde il componente su schermi grandi (`lg:` e superiori) per impostazione predefinita (tramite classi Tailwind).\n\n## Prerequisiti\n\n* Vue 3.x\n* Vue Router 4.x (utilizzato internamente per `useRoute` e per i `router-link` nei quick links)\n* **Tailwind CSS:** Il componente utilizza classi di utilità Tailwind per lo stile. Assicurati che Tailwind CSS sia installato e configurato nel tuo progetto.\n\n## Installazione\n\nPuoi installare il pacchetto usando npm o yarn:\n\n```bash\nnpm install @daviduo/vue-bottom-sheet\n# oppure\nyarn add @daviduo/vue-bottom-sheet\n```\n\n## Utilizzo\n\nPuoi registrare il componente globalmente come plugin Vue o importarlo direttamente nei tuoi componenti.\n\n### 1. Registrazione Globale (Plugin)\n\nNel tuo file `main.js` (o `main.ts`):\n\n```javascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport BottomSheetPlugin from '@daviduo/vue-bottom-sheet';\n\nconst app = createApp(App);\n\napp.use(BottomSheetPlugin);\n// Puoi anche passare opzioni, ad esempio per un nome componente personalizzato:\n// app.use(BottomSheetPlugin, { componentName: 'MyCustomSheet' });\n\napp.mount('#app');\n```\n\nOra puoi usare `<BottomSheet>` (o `<MyCustomSheet>`) in qualsiasi template del tuo progetto.\n\n**Nota importante per utenti CommonJS/UMD:**\n\nA causa della coesistenza di esportazioni nominate (`BottomSheet`) e di una esportazione default (il plugin stesso) nel pacchetto, quando si utilizza `require()` o si carica il pacchetto tramite un tag `<script>` (UMD), l'oggetto plugin necessario per `app.use()` **deve essere accessibile tramite la proprietà `.default`**.\n\nQuindi, per registrare il plugin globalmente in questi ambienti, dovresti fare così:\n\n* **Con `require` (CommonJS):**\n\n    ```javascript\n    const { createApp } = require('vue'); \n    const App = require('./App.vue');     \n    const BottomSheetPlugin = require('@daviduo/vue-bottom-sheet').default; // <-- .default\n\n    const app = createApp(App);\n    app.use(BottomSheetPlugin);\n    app.mount('#app');\n    ```\n\n* **Con UMD:**\n\n    ```javascript\n    const app = Vue.createApp(App);\n    app.use(window.VueBottomSheet.default); // <-- .default\n    app.mount('#app');\n    ```\n\n### 2. Importazione Diretta\n\nPuoi importare il componente `BottomSheet` direttamente dove ti serve:\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BottomSheet } from '@daviduo/vue-bottom-sheet'; // O il nome del tuo pacchetto\n// Se il tuo pacchetto esporta anche CSS separato:\n// import '@daviduo/vue-bottom-sheet/dist/style.css';\n\nconst isSheetOpen = ref(false);\nconst myQuickLinks = ref({\n  section1: {\n    items: [\n      { name: 'Home', to: { name: 'home' }, icon: 'HomeIconComponent', current: true },\n      { name: 'External', href: 'https://example.com', icon: 'LinkIconComponent' },\n    ]\n  }\n});\n\nconst handleSheetStateChange = (newState, position) => {\n  console.log(`Sheet state changed to: ${newState} at ${position}vh`);\n};\n</script>\n\n<template>\n  <div>\n    <button @click=\"isSheetOpen = !isSheetOpen\">\n      {{ isSheetOpen ? 'Chiudi Sheet' : 'Apri Sheet' }}\n    </button>\n\n    <BottomSheet\n      v-model=\"isSheetOpen\"\n      :middle-y=\"40\"\n      :full-y=\"10\"\n      :quick-links=\"myQuickLinks\"\n      @state-change=\"handleSheetStateChange\"\n      @handle-click=\"() => console.log('Handle cliccato!')\"\n    >\n      <div class=\"p-4\">\n        <h2>Contenuto del Bottom Sheet</h2>\n        <p>Questo è il contenuto che appare quando il pannello è aperto (middle o full).</p>\n        <p>Puoi mettere qui qualsiasi markup Vue.</p>\n        <div style=\"height: 500px; background: #eee; margin-top: 20px; padding: 10px;\">\n          Contenuto scrollabile...\n        </div>\n      </div>\n    </BottomSheet>\n  </div>\n</template>\n```\n\n**Nota sugli Icon Component:**\nNei `quickLinks`, la proprietà `icon` si aspetta un componente Vue importato e registrato (o una stringa che Vue può risolvere in un componente globale). Assicurati che questi componenti icona siano disponibili nel contesto del tuo progetto. Se usi librerie come Heroicons, dovrai importarle.\n\nEsempio con Heroicons (ipotetico `HomeIconComponent`):\n\n```javascript\n// Potrebbe essere nel tuo <script setup> o importato globalmente\nimport { HomeIcon as HomeIconComponent } from '@heroicons/vue/24/outline';\n```\n\n## API\n\n### Props\n\n| Prop         | Tipo    | Default | Descrizione                                                                                                                                                              |\n| :----------- | :------ | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `modelValue` | Boolean | `false` | Controlla lo stato aperto (true = `middleY` o `fullY`) o chiuso (false = `peekTranslateY`) del pannello. Usato con `v-model`.                                                 |\n| `middleY`    | Number  | `50`    | La posizione verticale (in % `vh` dalla cima dello schermo) per lo stato \"middle\". Un valore più basso significa più in alto.                                                |\n| `fullY`      | Number  | `5`     | La posizione verticale (in % `vh` dalla cima dello schermo) per lo stato \"full\". Un valore più basso significa più in alto.                                                  |\n| `quickLinks` | Object  | `null`  | Un oggetto che definisce i link da mostrare nello stato \"peek\". Vedi la struttura dell'oggetto qui sotto. Se `null` o vuoto, la sezione quick links non viene renderizzata. |\n\n#### Struttura dell'Oggetto `quickLinks`\n\nL'oggetto `quickLinks` è strutturato per sezioni, ognuna contenente item.\n\n```javascript\n{\n  // Chiave della sezione (es. 'section1', 'navigation', etc.)\n  \"uniqueSectionKey\": {\n    \"items\": [\n      {\n        // \"name\": \"Label (non usato nel template attuale, ma utile per debug)\",\n        \"href\": \"https://external.url\", // Per link esterni <a href=\"...\">\n        \"icon\": YourIconComponent, // Componente Vue per l'icona\n        \"iconProps\": { class: \"custom-icon-class\" }, // Props opzionali da passare al componente icona\n        \"current\": false // Flag per stile attivo (se applicabile dal tuo CSS e dal componente icona)\n      },\n      {\n        // \"name\": \"Internal Page\",\n        \"to\": { name: \"routeName\" }, // o \"/path\", per vue-router <router-link>\n        \"icon\": AnotherIconComponent,\n        // \"iconProps\": { ... },\n        // \"current\": true // Gestito automaticamente da <router-link> se non specificato qui\n      }\n      // ... altri item\n    ]\n  }\n  // ... altre sezioni\n}\n```\n\n### Eventi\n\n| Evento              | Payload                                 | Descrizione                                                                                                                                                             |\n| :------------------ | :-------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `update:modelValue` | `Boolean (isOpen)`                      | Emesso quando lo stato del pannello (aperto/chiuso) cambia a seguito di interazione utente, per supportare `v-model`.                                                      |\n| `state-change`      | `String (newStateName), Number (newY)`  | Emesso quando il pannello transita a un nuovo stato (`peek`, `middle`, `full`). Il payload include il nome del nuovo stato e la sua posizione `translateY` in `vh`.         |\n| `handle-click`      | `void`                                  | Emesso quando l'handle viene cliccato (non trascinato). Tipicamente, questo apre il pannello allo stato `middleY` se era in stato `peek`.                               |\n\n### Slot\n\n| Nome    | Descrizione                                                                                                                                         |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |\n| default | Il contenuto principale del bottom sheet, visualizzato quando il pannello è negli stati `middle` o `full`. Questo slot riceve lo spazio rimanente. |\n\n## Dipendenza da Tailwind CSS\n\nQuesto componente **richiede che Tailwind CSS sia installato e configurato nel progetto che lo utilizza.** Le classi di utilità di Tailwind (`fixed`, `bg-white`, `rounded-t-xl`, `flex`, `lg:hidden`, ecc.) sono usate direttamente nel template del componente. Senza Tailwind, il componente non avrà lo stile corretto.\n\nAssicurati che il `content` path nel tuo `tailwind.config.js` includa i file del componente se lo stai importando dai `node_modules` (questo è particolarmente rilevante se le classi Tailwind non vengono rilevate correttamente):\n\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n    \"./node_modules/@daviduo/vue-bottom-sheet/dist/*.{js,vue}\", \n    // ...\n  ],\n  // ...\n};\n```\n\n## Peer Dependencies\n\nQuesto pacchetto elenca `vue` (>=3.2.0) e `vue-router` (>=4.0.0) come `peerDependencies`. Ciò significa che sei responsabile di installare queste dipendenze nel tuo progetto.\n\n```bash\nnpm install vue@^3.2.0 vue-router@^4.0.0\n# oppure\nyarn add vue@^3.2.0 vue-router@^4.0.0\n```\n\n## Contribuire\n\nI contributi sono benvenuti! Si prega di aprire una issue o una pull request nel repository GitHub.\n\n## Licenza\n\n[MIT](LICENSE)","readmeFilename":"readme"}