{"id":18387335,"url":"https://github.com/terryz/v-dialogs","last_synced_at":"2025-04-06T04:10:31.787Z","repository":{"id":37686621,"uuid":"129669629","full_name":"TerryZ/v-dialogs","owner":"TerryZ","description":"A simple style useful dialog component collection for Vue","archived":false,"fork":false,"pushed_at":"2024-08-12T02:22:09.000Z","size":1523,"stargazers_count":129,"open_issues_count":11,"forks_count":27,"subscribers_count":9,"default_branch":"dev","last_synced_at":"2024-09-22T09:09:12.552Z","etag":null,"topics":["alert","dialog","es6","javascript","mask","modals","toast","vue"],"latest_commit_sha":null,"homepage":"https://terryz.github.io/docs-vue3/dialog/","language":"JavaScript","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/TerryZ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-CN.md","contributing":null,"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}},"created_at":"2018-04-16T01:49:51.000Z","updated_at":"2024-09-08T07:19:11.000Z","dependencies_parsed_at":"2024-01-02T23:29:46.148Z","dependency_job_id":"b8e069dc-3163-4bd9-a53b-fb89cd493b1d","html_url":"https://github.com/TerryZ/v-dialogs","commit_stats":{"total_commits":113,"total_committers":4,"mean_commits":28.25,"dds":"0.026548672566371723","last_synced_commit":"6a9b305ee86404968c625902abeb985817afba9d"},"previous_names":["terryz/v-dialog"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryZ%2Fv-dialogs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryZ%2Fv-dialogs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryZ%2Fv-dialogs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryZ%2Fv-dialogs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TerryZ","download_url":"https://codeload.github.com/TerryZ/v-dialogs/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430870,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["alert","dialog","es6","javascript","mask","modals","toast","vue"],"created_at":"2024-11-06T01:25:44.900Z","updated_at":"2025-04-06T04:10:31.771Z","avatar_url":"https://github.com/TerryZ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [v-dialogs](https://terryz.github.io/docs-vue3/dialog/)\n\u003c!-- \u0026middot; --\u003e\n[![CircleCI](https://circleci.com/gh/TerryZ/v-dialogs/tree/master.svg?style=svg)](https://circleci.com/gh/TerryZ/v-dialogs/tree/master)\n[![code coverage](https://codecov.io/gh/TerryZ/v-dialogs/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-dialogs)\n[![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)\n[![npm](https://img.shields.io/npm/dy/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)\n\nA simple style useful dialog component collection for **Vue3**\n\n- **Alert** Interactive dialog boxes, for notifications that require explicit feedback from the user\n- **Modal** Modal container dialog, It is displayed at the center of the screen\n- **Drawer** Another modal container dialog, It is displayed at the edge of the screen, and it is the better choice for quickly viewing details\n- **Message** Silent message notification, displayed in the vertical center area of ​​the screen\n- **Toast** Silent message notification, displayed in the corner of the screen\n- **Mask** A screen mask that blocks user actions\n\nIf you are using vue 2.x version, please use [v-dialogs 2.x](https://github.com/TerryZ/v-dialogs/tree/dev-vue-2) version instead\n\n## Examples and Documentation\n\nDocumentation and examples please visit below sites\n\n- [Github pages](https://terryz.github.io/docs-vue3/dialog/)\n\n## Features\n\n- Simple style, makes it easier to apply in more UI\n- Provides 6 types of dialogs: **Modal**, **Drawer**, **Alert**, **Message**, **Mask** and **Toast**\n- Functional form of use\n- **Modal** and **Drawer** provide `DialogModalBox` and `DialogDrawerBox` component form\n- **Alert**, **Message** and **Toast** types provides message type quick access function\n- Built-in 4 languages: `Chinese`, `English`, `Japanese` and `Portuguese`\n- Globally instance(not recommended)\n\n## Installation\n\n```sh\n# npm\nnpm i v-dialogs\n# yarn\nyarn add v-dialogs\n# pnpm\npnpm add v-dialogs\n```\n\n## API\n\n```ts\ntype MessageContent = string | VNode\ntype ComponentResult = VNode | Component\ntype ComponentContent = ComponentResult | (() =\u003e ComponentResult)\n\nfunction DialogAlert(message?: MessageContent, callback?: Function, options?: AlertOptions): Function\nfunction DialogMessage(message?: MessageContent, callback?: Function, options?: MessageOptions): Function\nfunction DialogToast(message?: MessageContent, callback?: Function, options?: ToastOptions): Function\nfunction DialogMask(message?: MessageContent, callback?: Function, options?: MaskOptions): Function\nfunction DialogModal(component: ComponentContent, options?: ModalOptions): Function\nfunction DialogDrawer(component: ComponentContent, options?: DrawerOptions): Function\n```\n\n## Usage\n\n### Confirm and Message\n\n```ts\nimport { DialogAlert, DialogMessage } from 'v-dialogs'\n\nfunction deleteUser (userId) {\n  DialogAlert('Deleted data cannot be recovered, are you sure?', () =\u003e {\n    executeDeleteUser(userId).then(() =\u003e {\n      DialogMessage('Delete complete.', { messageType: 'success' })\n    })\n  }, { messageType: 'confirm' })\n}\n```\n\n### Modal dialog\n\n```ts\nimport { DialogModal, DialogAlert } from 'v-dialogs'\nimport UserProfile from './UserProfile.vue'\n\nDialogModal(UserProfile, {\n  width: 900,\n  height: 600,\n  title: 'User Profile',\n  params: {\n    userId: 1,\n    userName: 'Terry Zeng'\n  },\n  callback: data =\u003e {\n    DialogAlert(`Received message: ${data}`)\n  }\n})\n```\n\n### Component form\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cDialogDrawerBox v-model:visible=\"visible\" \u003e\n      \u003cUserProfile /\u003e\n    \u003c/DialogDrawerBox\u003e\n\n    \u003cbutton\n      type=\"button\"\n      @click=\"openDialog\"\n    \u003eOpen Drawer\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { DialogDrawerBox } from 'v-dialogs'\n\nimport UserProfile from './UserProfile.vue'\n\nconst visible = ref(false)\n\nfunction openDialog () {\n  visible.value = true\n}\n\u003c/script\u003e\n```\n\n### Fetch data\n\n```ts\nimport { DialogMask, DialogMessage, DialogAlert } from 'v-dialogs'\n\nfunction loadDataList () {\n  const destroy = DialogMask()\n\n  fetchData()\n    .then(data =\u003e {\n      list.value = data.list\n      // Dismiss mask overlay\n      destroy()\n      DialogMessage('Data loaded successfully', { messageType: 'success' })\n    })\n    .catch(() =\u003e {\n      DialogAlert('Data Load Failure', { messageType: 'error' })\n    })\n}\n```\n\n### Message type quick access\n\n**Alert**, **Message** and **Toast** types provides message type quick access function\n\n```ts\nimport {\n  DialogMessage\n  DialogMessageSuccess\n} from 'v-dialogs'\n\nDialogMessageSuccess('Saved successfully!')\n// Equivalent to\nDialogMessage('Saved successfully!', { messageType: 'success' })\n```\n\n## Globally instance\n\n`v-dialogs` also provides a globally instance to open dialogs, you can use it in any component\n\nThe default instance name is `$dlg`\n\n```js\nimport { createApp } from 'vue'\nimport dialogs from 'v-dialogs'\nimport App from 'App.vue'\n\ncreateApp(App).use(dialogs).mount('#app')\n```\n\n\u003e The global instance are only supported as a feature and are not recommended for use\n\n### Option API\n\n```js\nexport default {\n  mounted () {\n    this.$dlg.message('Saved successfully!')\n  }\n}\n```\n\n### Composition API\n\n```js\nimport { getCurrentInstance } from 'vue'\n\n// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg\nconst $dlg = getCurrentInstance().proxy.$dlg\n\n$dlg.message('Saved successfully!')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterryz%2Fv-dialogs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterryz%2Fv-dialogs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterryz%2Fv-dialogs/lists"}