https://github.com/pxls00/vue-message-plugin-ts
Vue message plugin base on Vue 3 + Typescript + Pinia, Docs page⬇️
https://github.com/pxls00/vue-message-plugin-ts
composition-api jest modular-architecture npm-package pinia ts-jest typescript unit-testing vue vue-test-utils
Last synced: 6 months ago
JSON representation
Vue message plugin base on Vue 3 + Typescript + Pinia, Docs page⬇️
- Host: GitHub
- URL: https://github.com/pxls00/vue-message-plugin-ts
- Owner: pxls00
- License: mit
- Created: 2023-03-27T09:08:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T17:52:54.000Z (over 2 years ago)
- Last Synced: 2024-03-30T00:03:26.259Z (over 1 year ago)
- Topics: composition-api, jest, modular-architecture, npm-package, pinia, ts-jest, typescript, unit-testing, vue, vue-test-utils
- Language: TypeScript
- Homepage: https://vue-message-plugin-205f7.web.app/
- Size: 465 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-message-plugin-ts
A message plugin base on Vue with Typescript support
> supports only Vue 3
[Docs page | Live Demo](https://vue-message-plugin-205f7.web.app/)
## Installation
you can install the package yarn:
```bash
yarn add vue-message-plugin-ts
```
or npm:
```bash
npm i vue-message-plugin-ts
```
## Register Plugin
```js
import { createApp, h } from 'vue'
import Message from 'vue-message-plugin-ts'
import 'vue-message-plugin-ts/dist/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(Message)
// or
app.use(Message, options?: { position?: IMessagesOption } as IMessagesOption)
app.mount('#app')
```
## Usage
```js
// App.vue
```
Usage in components
```js
// Component.vue
import { inject } from 'vue'
const message = inject('message')
function errorAction () {
message.addNewMessage({
title: 'Action error',
type: 'error',
duration: 5000,
})
}
function startWait () {
message.startWait()
}
function stopWait () {
message.stopWait()
}
```
## Messages API
### MessagesOption
| Attribute | Descripttion | Type | Optional value | Default |
| --- | --- | --- | --- | --- |
| position | Messages display position | string | ‘top-left’, ‘top-center’, ‘top-right’, ‘right-center’, ‘bottom-right’, ‘botom-center’, ‘bottom-left’, ‘left-center’ | ‘top-right’ |
### Messages
| Attribute | Descripttion | Type | Optional value | Default |
| --- | --- | --- | --- | --- |
| addNewMessage | Adding a new message | (message: IMessageItem) ⇒ void | IMessageItem | — |
| removeMessage | Remove message by id | (id: TMessageId) ⇒ void | TMessageId | — |
| startWait | Wait loader message | (message?: IMessageItem) ⇒ void | IMessageItem | |
| stopWait | Stop wait loader message | (id?: TMessageId) ⇒ void | TMessageId | |
### Message for create (Message)
| Attribute | Descripttion | Type | Optional value | Default | required |
| --- | --- | --- | --- | --- | --- |
| body | Body of message | TMessageField | — | — | — | true |
| duration | Duration of message, if you don't add duration then you have to remove it yourself | number | — | — | false |
| type | Type of message | TMessageTypes | ‘error’, ‘success’, ‘warning’, ‘custom’, ‘wait’ | — | true |
| img | Icon image of message | TMessageField | — | — | false |
| class | Class of message | TMessageClass | — | — | false |
| key?: string | Key of message | string | — | — | false |
### Types List
- type TMessageField = string | {value: string | any, class: TMessageClass}
- type TMessageTypes = ‘error’ | ‘success’ | ‘warning’ | ‘custom’ | ‘wait’
- type TMessageClass = string | string[]
- type TMessageId = number | string
### Template, Slot names
| Name | Descripttion | Value |
| --- | --- | --- |
| message__img-wait | Message slot name for wait messages icon image | IMessageItem |
| message__img-success | Message slot name for success messages icon image | IMessageItem |
| message__img-error | Message slot name for error messages icon image | IMessageItem |
| message__img-warning | Message slot name for warning messages icon image | IMessageItem |
| message__img-custom | Message slot name for custom messages icon image | IMessageItem |
| message__title-wait | Message slot name for wait messages title | IMessageItem |
| message__title-success | Message slot name for success messages title | IMessageItem |
| message__title-warning | Message slot name for warning messages title | IMessageItem |
| message__title-error | Message slot name for error messages title | IMessageItem |
| message__title-custom | Message slot name for custom messages title | IMessageItem |
### Tip !!
You can add wait message with method startWait and this method creates default message, if you want to add custom wait message you can use method addNewMessage() and then if you want to stop this custom message u can use stopWait agait but with argument id that has been given when created message so you can create default wait message also custom wait message
## License
Licensed as [MIT](https://github.com/pxls00/vue-message-plugin-ts/blob/master/LICENSE).