{"_id":"st-dialog","_rev":"29-5c21d56c4df7946f96664700df6e6e69","name":"st-dialog","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"st-dialog","version":"0.1.0","description":"A simple dialog component for Vue 3","type":"module","main":"dist/st-dialog.umd.js","module":"dist/st-dialog.js","types":"dist/st-dialog.d.ts","exports":{"./dist/style.css":"./dist/style.css","./css":"./dist/style.css",".":{"import":"./dist/st-dialog.js","require":"./dist/st-dialog.umd.js"}},"author":{"name":"VirekE"},"license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@icon-park/vue-next":"^1.4.2","pinia":"^2.1.6","vue":"^3.3.4"},"devDependencies":{"@types/node":"^20.6.2","@vitejs/plugin-vue":"^4.2.3","path":"^0.12.7","sass":"^1.67.0","terser":"^5.20.0","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.5.4","vue-tsc":"^1.8.5"},"gitHead":"c531770d5adbc58ccb2b126e9e1bd89cc597f00f","_id":"st-dialog@0.1.0","_nodeVersion":"19.7.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-00fDAEBThwk5ki0Q13uKg3PSYGOR6B71lh1Y8EfXo4J8jx69qVXb0HosEf06bv8mPtEaXxKF4XQenKULL3R25w==","shasum":"835936b78e92382bce4c7bfbbbce36509df030e3","tarball":"https://registry.npmjs.org/st-dialog/-/st-dialog-0.1.0.tgz","fileCount":7,"unpackedSize":55036,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOPDYwAS0j2fYxZ9PKBiuqqguzNskMEkwbhEgqLiH6bQIgbRCDN+RWFGInYF8CChEaQTuFfLxqBx4DNRgecK/Owhs="}]},"_npmUser":{"name":"virek","email":"liushuntian@live.com"},"directories":{},"maintainers":[{"name":"virek","email":"liushuntian@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/st-dialog_0.1.0_1695720683968_0.2442302886000074"},"_hasShrinkwrap":false},"0.1.1":{"name":"st-dialog","version":"0.1.1","description":"A simple dialog component for Vue 3","type":"module","main":"dist/st-dialog.umd.js","module":"dist/st-dialog.js","types":"dist/st-dialog.d.ts","exports":{"./dist/style.css":"./dist/style.css","./css":"./dist/style.css",".":{"import":"./dist/st-dialog.js","require":"./dist/st-dialog.umd.js"}},"author":{"name":"VirekE"},"license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@icon-park/vue-next":"^1.4.2","crypto-js":"^4.1.1","pinia":"^2.1.6","vue":"^3.3.4"},"devDependencies":{"@types/crypto-js":"^4.1.2","@types/node":"^20.7.0","@vitejs/plugin-vue":"^4.3.4","path":"^0.12.7","sass":"^1.68.0","terser":"^5.20.0","typescript":"^5.2.2","vite":"^4.4.9","vite-plugin-dts":"^3.6.0","vue-tsc":"^1.8.15"},"gitHead":"15aafffff45faa9c394e9f6f23500152841876e6","_id":"st-dialog@0.1.1","_nodeVersion":"19.7.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-4FnNfJNsq9pO3aWyuTjTACuhsIL0ZjsCmk1NS5R9SQMK+bGEXlYU3NBb57sO9oZR1A2fcYGvx/vHoj3qP3R8wg==","shasum":"53174f878e5eb2c05ede12943eb291cea6a45357","tarball":"https://registry.npmjs.org/st-dialog/-/st-dialog-0.1.1.tgz","fileCount":7,"unpackedSize":93351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoU3NQgg79Oq6VxtUJFWYp62bO0ui5FhDO33lxDj+kLAiEA/XDdPEQY8rAapHQhTpfN4ii2V30RVxbtZCTKBTpxujM="}]},"_npmUser":{"name":"virek","email":"liushuntian@live.com"},"directories":{},"maintainers":[{"name":"virek","email":"liushuntian@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/st-dialog_0.1.1_1695804908896_0.30164428040414415"},"_hasShrinkwrap":false},"0.1.3":{"name":"st-dialog","version":"0.1.3","description":"A simple dialog component for Vue 3","type":"module","main":"dist/st-dialog.umd.js","module":"dist/st-dialog.js","types":"dist/st-dialog.d.ts","exports":{"./dist/style.css":"./dist/style.css","./css":"./dist/style.css",".":{"import":"./dist/st-dialog.js","require":"./dist/st-dialog.umd.js"}},"author":{"name":"VirekE"},"license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@icon-park/vue-next":"^1.4.2","crypto-js":"^4.1.1","pinia":"^2.1.6","vue":"^3.3.4"},"devDependencies":{"@types/crypto-js":"^4.1.2","@types/node":"^20.7.0","@vitejs/plugin-vue":"^4.3.4","path":"^0.12.7","sass":"^1.68.0","terser":"^5.20.0","typescript":"^5.2.2","vite":"^4.4.9","vite-plugin-dts":"^3.6.0","vue-tsc":"^1.8.15"},"gitHead":"b7d150646ec2719e036dbcb25de0b42382056bad","_id":"st-dialog@0.1.3","_nodeVersion":"19.7.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-n9PJVD4oDZD3+l0ntjeULgT/LZ2A8zs/b9tPIfVF9KEF8IyWD1HazudnIFYkg8GD09h4owI8ouwdZIlDPeNZUg==","shasum":"a86ff04c8a168ee5a402737d266f4fde5f1b47f9","tarball":"https://registry.npmjs.org/st-dialog/-/st-dialog-0.1.3.tgz","fileCount":7,"unpackedSize":101610,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwISO3tHJHJJvPw0FQeoRPS3NGvzczTUocsSMWGTKPQwIhAMNJ/1Iuf3DBSH19K02RKGti9VhVq0t01GX00t821XZV"}]},"_npmUser":{"name":"virek","email":"liushuntian@live.com"},"directories":{},"maintainers":[{"name":"virek","email":"liushuntian@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/st-dialog_0.1.3_1695872883513_0.682591590656153"},"_hasShrinkwrap":false},"0.1.4":{"name":"st-dialog","version":"0.1.4","description":"A simple dialog component for Vue 3","type":"module","repository":{"url":"git+https://github.com/VirekE/st-dialog.git"},"main":"dist/st-dialog.umd.js","module":"dist/st-dialog.js","types":"dist/st-dialog.d.ts","exports":{"./dist/style.css":"./dist/style.css","./css":"./dist/style.css",".":{"import":"./dist/st-dialog.js","require":"./dist/st-dialog.umd.js"}},"author":{"name":"VirekE"},"license":"MIT","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"@icon-park/vue-next":"^1.4.2","crypto-js":"^4.1.1","pinia":"^2.1.6","vue":"^3.3.4"},"devDependencies":{"@types/crypto-js":"^4.1.2","@types/node":"^20.7.0","@vitejs/plugin-vue":"^4.3.4","path":"^0.12.7","sass":"^1.68.0","terser":"^5.20.0","typescript":"^5.2.2","vite":"^4.4.9","vite-plugin-dts":"^3.6.0","vue-tsc":"^1.8.15"},"keywords":["vue-component","vue-dialog","dialog"],"gitHead":"a69e0a262d81dc3e3eb73374f6f3c3a51825da45","bugs":{"url":"https://github.com/VirekE/st-dialog/issues"},"homepage":"https://github.com/VirekE/st-dialog#readme","_id":"st-dialog@0.1.4","_nodeVersion":"19.7.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-XRVj3jif7KaPCSy3wP/w96U+vxQRm75tBp/VkOg9ZwOwcMAN+Nqdv2tnDbfRR5HSS0HLspNu+c5qmlPtR1589g==","shasum":"cc15014e5c2dd7ec772c11e8cd3528762920ec91","tarball":"https://registry.npmjs.org/st-dialog/-/st-dialog-0.1.4.tgz","fileCount":7,"unpackedSize":102532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzPDWqoGjZlB3LqvSAZdDWwfm2NBDub/affh7dSg+GgAIhAMAuyJfyI9lCwE54y9QYXEHHBPkIjvbEbf6AA8HGuCqP"}]},"_npmUser":{"name":"virek","email":"liushuntian@live.com"},"directories":{},"maintainers":[{"name":"virek","email":"liushuntian@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/st-dialog_0.1.4_1696735821389_0.8748315985781197"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-22T07:26:06.629Z","0.0.1":"2023-09-22T07:26:06.843Z","modified":"2023-10-08T03:30:21.767Z","0.0.2":"2023-09-22T08:53:19.992Z","0.0.3":"2023-09-22T08:56:34.066Z","0.0.4":"2023-09-22T08:57:25.999Z","0.0.6":"2023-09-22T09:15:24.147Z","0.0.7":"2023-09-22T10:24:07.026Z","0.0.9":"2023-09-26T01:19:32.234Z","0.0.10":"2023-09-26T01:31:14.417Z","0.0.11":"2023-09-26T02:21:25.411Z","0.0.14":"2023-09-26T03:29:40.331Z","0.0.15":"2023-09-26T08:30:21.630Z","0.0.16":"2023-09-26T08:49:16.718Z","0.1.0":"2023-09-26T09:31:24.149Z","0.1.1":"2023-09-27T08:55:09.193Z","0.1.2":"2023-09-28T03:11:53.999Z","0.1.3":"2023-09-28T03:48:03.708Z","0.1.4":"2023-10-08T03:30:21.580Z"},"maintainers":[{"name":"virek","email":"liushuntian@live.com"}],"description":"A simple dialog component for Vue 3","readme":"# ST-Dialog\n\nA simple dialog plugin with taskbar of Vue3.\n\n## Install\n\n```bash\nnpm install st-dialog\n```\n\n## Usage\n\n### Full Import\n\n```ts\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport StDialog from 'st-dialog'\nimport 'st-dialog/dist/st-dialog.css'\n\ncreateApp(App).use(StDialog).mount('#app')\n```\n\n### Composition API\n\nWhen using Vue's composition API, you can directly use the component in the file's `template` section.\n\n```ts\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, markRaw } from 'vue'\nimport { StTaskBar } from 'st-dialog'\nimport Test from '@/components/Test.vue'\n\nconst TestComponent = markRaw(Test)\nconst instance = getCurrentInstance()\n\nfunction addDialog() {\n   if (!instance) return\n   instance.appContext.config.globalProperties.$dialog.addDialog(TestComponent, {\n      title: 'test',\n      args: {\n         msg: 'hello world'\n      }\n   })\n}\n\n</script>\n<template>\n   <div class=\"container\">\n      <button @click=\"addDialog\">add dialog</button>\n   </div>\n   <StTaskBar>\n      <template v-slot:left>\n         <span>leftSide</span>\n      </template>\n      <template v-slot:right>\n         <span>rightSide</span>\n      </template>\n   </StTaskBar>\n</template>\n```\n\n### Options API\n\nWhen using Vue’s options API, the component must first be registered using the `components` property on the Vue instance.\n\n```ts\n<script lang=\"ts\">\nimport { StTaskBar } from 'st-dialog'\nexport default {\n  components: {\n    StTaskBar\n  },\n  methods: {\n      addDialog() {\n         this.$dialog.addDialog(TestComponent, {\n            title: 'test',\n            args: {\n               msg: 'hello world'\n            }\n         })\n      }\n  }\n}\n</script>\n<template>\n   <StTaskBar>\n      <template v-slot:left>\n         <span>leftSide</span>\n      </template>\n      <template v-slot:right>\n         <span>rightSide</span>\n      </template>\n   </StTaskBar>\n</template>\n```\n\n### Props of Dynamic Component\n\nPassing props to the dynamic component is done through the `args` property of the second parameter of the `addDialog` method.\n\n\n#### App.vue\n```ts\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, markRaw } from 'vue'\nimport { StTaskBar, methods } from 'st-dialog'\nimport ComponentInDialog from '@/components/ComponentInDialog.vue'\n\nconst TestComponent = markRaw(ComponentInDialog)\nconst instance = getCurrentInstance()\n\nfunction addDialog() {\n   const { addDialog } = methods\n   addDialog(TestComponent, {\n      title: 'test',\n      args: {\n         msg: 'hello world'\n      }\n   })\n}\n\n</script>\n<template>\n   <div class=\"container\">\n      <button @click=\"addDialog\">add dialog</button>\n   </div>\n   <StTaskBar>\n      <template v-slot:left>\n         <span>leftSide</span>\n      </template>\n      <template v-slot:right>\n         <span>rightSide</span>\n      </template>\n   </StTaskBar>\n</template>\n```\n#### ComponentInDialog.vue\n\n```ts\n<script lang=\"ts\" setup>\nconst props = defineProps < {\n  args?: Record<string, any>\n}>()\n</script>\n<template>\n  <div class=\"test\">{{props.args?.msg}}</div>\n</template>\n```\n\n\n### Resize Event\n\n```ts\n// ComponentInDialog.vue\n<script lang=\"ts\" setup>\nimport type { Dialog } from '@/dialog'\nimport type { Component } from 'vue'\n\nconst props = defineProps < {\n  args?: Record<string, any>\n}>()\n\nfunction onResize(dialog: Dialog<Component>) {\n  console.log('Resized', dialog)\n}\n\ndefineExpose({\n  onResize\n})\n\n</script>\n\n<template>\n  <div class=\"test\">{{props.args?.msg}}</div>\n</template>\n<style scoped lang=\"sass\">\n.test\n  width: 100%\n  height: 100%\n  background: #000\n  color: #FFF\n</style>\n```","readmeFilename":"README.md","author":{"name":"VirekE"},"license":"MIT","homepage":"https://github.com/VirekE/st-dialog#readme","keywords":["vue-component","vue-dialog","dialog"],"repository":{"url":"git+https://github.com/VirekE/st-dialog.git"},"bugs":{"url":"https://github.com/VirekE/st-dialog/issues"}}