feat(lib): add wait plugin to manage loading state

CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-next.12](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.12) (2022-03-10)
+
+### Features
+
+- **lib:** add maz-picker component ([#197](https://github.com/LouisMazel/maz-ui/issues/197)) ([877515e](https://github.com/LouisMazel/maz-ui/commit/877515e585d1aa9a3febd83e222c12346e7401b5))
+- **lib:** add wait plugin to manage loading state ([e61d354](https://github.com/LouisMazel/maz-ui/commit/e61d3547dcd4247171c9469a8aa3d6d2659f2d25))
+- **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+- **lib:** export tailwind config ([#201](https://github.com/LouisMazel/maz-ui/issues/201)) ([94fddb9](https://github.com/LouisMazel/maz-ui/commit/94fddb9d35e91a6f649bcb18ae7105048d048584))
+- **lib:** MazInput - adding style color for autofill ([#208](https://github.com/LouisMazel/maz-ui/issues/208)) ([b3ae969](https://github.com/LouisMazel/maz-ui/commit/b3ae969584bda0e690179c1b6c9defdc1bbf0425))
+
 # [3.0.0-next.11](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.11) (2022-03-10)
 
 ### Bug Fixes

lerna.json

@@ -1,7 +1,7 @@
 {
   "packages": ["packages/*"],
   "loglevel": "verbose",
-  "version": "3.0.0-next.11",
+  "version": "3.0.0-next.12",
   "npmClientArgs": ["--production=false", "--no-progress"],
   "yes": true,
   "granularPathspec": false,

packages/docs/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-next.12](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.12) (2022-03-10)
+
+
+### Features
+
+* **lib:** add maz-picker component ([#197](https://github.com/LouisMazel/maz-ui/issues/197)) ([877515e](https://github.com/LouisMazel/maz-ui/commit/877515e585d1aa9a3febd83e222c12346e7401b5))
+* **lib:** add wait plugin to manage loading state ([e61d354](https://github.com/LouisMazel/maz-ui/commit/e61d3547dcd4247171c9469a8aa3d6d2659f2d25))
+* **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+* **lib:** export tailwind config ([#201](https://github.com/LouisMazel/maz-ui/issues/201)) ([94fddb9](https://github.com/LouisMazel/maz-ui/commit/94fddb9d35e91a6f649bcb18ae7105048d048584))
+
+
+
+
+
 # [3.0.0-next.11](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.11) (2022-03-10)
 
 

packages/docs/docs/.vuepress/clientAppEnhance.ts

@@ -5,7 +5,7 @@ const mazIconPath = process.env.NODE_ENV === 'production'
     ? '/maz-ui-3/icons'
     : '/icons'
 
-import { ToasterOptions, installToaster } from 'maz-ui'
+import { ToasterOptions, installToaster, installWait } from 'maz-ui'
 import components from 'maz-ui/components'
 
 export default defineClientAppEnhance(async ({ app }) => {
@@ -22,4 +22,5 @@ export default defineClientAppEnhance(async ({ app }) => {
   }
 
   app.use(installToaster, toasterOptions)
+  app.use(installWait)
 })

packages/docs/docs/.vuepress/config.ts

@@ -62,11 +62,15 @@ export default defineUserConfig<DefaultThemeOptions>({
     ],
     [
       'meta',
-      { name: 'og:title', content: 'Maz-UI - Vue.JS & Nuxt.JS library' },
+      { property: 'og:title', content: 'Maz-UI - Vue.JS & Nuxt.JS library' },
     ],
     [
       'meta',
-      { name: 'og:description', content: 'Library of standalone components and tools for Vue & Nuxt' },
+      { property: 'og:description', content: 'Library of standalone components and tools for Vue & Nuxt' },
+    ],
+    [
+      'meta',
+      { property: 'og:type', content: 'website' },
     ],
     [
       'meta',
@@ -76,6 +80,8 @@ export default defineUserConfig<DefaultThemeOptions>({
       'meta',
       { name: 'twitter:description', content: 'Library of standalone components and tools for Vue & Nuxt' },
     ],
+    ['meta', { property: 'og:image', content: getAssetBaseUrl('/img/maz-ui-preview.jpg') }],
+    ['meta', { name: 'twitter:image', content: getAssetBaseUrl('/img/maz-ui-preview.jpg') }],
     [
       'link',
       { rel: 'apple-touch-icon', href: getAssetBaseUrl('/img/icons/apple-touch-icon.png') },
@@ -84,10 +90,6 @@ export default defineUserConfig<DefaultThemeOptions>({
       'link',
       { property: 'og:site_name', content: 'Maz UI' },
     ],
-    [
-      'link',
-      { property: 'og:type', content: 'website' },
-    ],
     [
       'link',
       {
@@ -99,8 +101,6 @@ export default defineUserConfig<DefaultThemeOptions>({
     ['meta', { name: 'msapplication-TileColor', content: '#2d89ef' }],
     ['meta', { name: 'theme-color', content: '#ffffff' }],
     ['meta', { name: 'msapplication-TileImage', content: getAssetBaseUrl('/img/maz-ui-preview.jpg') }],
-    ['meta', { property: 'og:image', content: getAssetBaseUrl('/img/maz-ui-preview.jpg') }],
-    ['meta', { name: 'twitter:image', content: getAssetBaseUrl('/img/maz-ui-preview.jpg') }]
   ],
 
   // theme and its config
@@ -130,7 +130,7 @@ export default defineUserConfig<DefaultThemeOptions>({
       '@vuepress/plugin-google-analytics',
       {
         // we have multiple deployments, which would use different id
-        id: 'G-EM35TM23Z',
+        id: 'G-EM35TM23ZC',
       },
     ],
   ],

packages/docs/docs/.vuepress/configs/plugins.ts

@@ -2,5 +2,6 @@ export const plugins = {
   text: 'Plugins',
   children: [
     '/plugins/toaster.md',
+    '/plugins/wait.md',
   ]
 }

packages/docs/docs/README.md

@@ -19,14 +19,9 @@ features:
     details: This library is writing in typescript, so all types and declarations are directly availables
   - title: Dark and Light Theme
     details: All components supports the Dark and Light themes.
+  - title: Tools
+    details: Maz-ui provide some modules - plugins, directives, filters and helpers
 footer: Made by LouisMazel with ❤️
-
-head:
-  - - meta
-    - name: description
-      content: Build your amazing interfaces with Maz UI and its stand-alone components - Stand-alone components library for Vue.JS & Nuxt.JS
-    - name: twitter:description
-      content: Build your amazing interfaces with Maz UI and its stand-alone components - Stand-alone components library for Vue.JS & Nuxt.JS
 ---
 
 <!-- markdownlint-disable -->

packages/docs/docs/components/maz-avatar.md

@@ -1,6 +1,16 @@
 ---
 title: MazAvatar
 description: MazAvatar is a stand-alone component replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, includes icons. Support of router-link and nuxt-link
+head:
+  - - meta
+    - name: twitter:title
+      content: MazAvatar | Maz-UI
+    - name: twitter:description
+      content: MazAvatar is a stand-alone component replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, includes icons. Support of router-link and nuxt-link
+    - property: og:title
+      content: MazAvatar | Maz-UI
+    - property: og:description
+      content: MazAvatar is a stand-alone component replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, includes icons. Support of router-link and nuxt-link
 ---
 
 # MazAvatar

packages/docs/docs/plugins/toaster.md

@@ -1,11 +1,10 @@
 ---
-title: Toaster
 description: Display messages to your users in flexible toasts
 ---
 
-# Toaster
+# toaster
 
-> Display messages to your users in flexible toasts
+> Display messages to your users in flexibles toasts
 
 ## Basic usage
 
@@ -51,6 +50,7 @@ description: Display messages to your users in flexible toasts
 
 <script lang="ts" setup>
   import { inject } from 'vue'
+  import { ToasterHandler } from 'maz-ui'
 
   const toast = inject<ToasterHandler>('toast')
 
@@ -85,6 +85,8 @@ description: Display messages to your users in flexible toasts
 <script lang="ts" setup>
   import { inject } from 'vue'
 
+  import { ToasterHandler } from 'maz-ui'
+
   const toast = inject<ToasterHandler>('toast')
 
   function showInfo () {
@@ -114,6 +116,28 @@ description: Display messages to your users in flexible toasts
   }
 </script>
 
+## Install
+
+`main.ts` or `main.js`
+
+```ts
+import { createApp } from 'vue'
+import { installToaster, ToasterOptions } from 'maz-ui'
+
+const app = createApp(App)
+
+// DEFAULT OPTIONS
+const toasterOptions: ToasterOptions = {
+  position: 'bottom-right',
+  timeout: 10_000,
+  persistent: false,
+}
+
+app.use(installToaster, toasterOptions)
+
+app.mount('#app')
+```
+
 ## Options
 
 ### Positions
@@ -139,25 +163,3 @@ const persistent: boolean = false
 ```ts
 const timeout: number = 10000 // in ms
 ```
-
-## Install
-
-`main.ts` or `main.js`
-
-```ts
-import { createApp } from 'vue'
-import { installToaster, ToasterOptions } from 'maz-ui'
-
-const app = createApp(App)
-
-// DEFAULT OPTIONS
-const toasterOptions: ToasterOptions = {
-  position: 'bottom-right',
-  timeout: 10_000,
-  persistent: false,
-}
-
-app.use(installToaster, toasterOptions)
-
-app.mount('#app')
-```

packages/docs/docs/plugins/wait.md

@@ -0,0 +1,96 @@
+---
+description: Plugins to manage your loading states
+---
+
+# wait
+
+> Loading state handling
+
+## Basic usage
+
+<br />
+
+
+<MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')">
+  Submit Data
+</MazBtn>
+<br />
+<br />
+<div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-bg-light); border-radius: 10px;">
+  Data Submitted
+</div>
+
+```vue
+<template>
+  <MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')">
+    Submit Data
+  </MazBtn>
+
+  <div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-bg-light); border-radius: 10px;">
+    Data Submitted
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { inject, ref } from 'vue'
+  import { WaitHandler } from 'maz-ui'
+
+  const wait = inject<WaitHandler>('wait')
+
+  const submitted = ref(false)
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  const submitData = async () => {
+    try {
+      submitted.value = false
+      wait.start('DATA_SUBMITTING')
+      await sleep(2000)
+      submitted.value = true
+    } finally {
+      wait.stop('DATA_SUBMITTING')
+    }
+  }
+</script>
+```
+
+<script lang="ts" setup>
+  import { inject, ref } from 'vue'
+  import { WaitHandler } from 'maz-ui'
+
+  const wait = inject<WaitHandler>('wait')
+
+  const submitted = ref(false)
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  const submitData = async () => {
+    try {
+      submitted.value = false
+      wait.start('DATA_SUBMITTING')
+      await sleep(2000)
+      submitted.value = true
+    } finally {
+      wait.stop('DATA_SUBMITTING')
+    }
+  }
+</script>
+
+## Install
+
+`main.ts` or `main.js`
+
+```ts
+import { createApp } from 'vue'
+import { installWait } from 'maz-ui'
+
+const app = createApp(App)
+
+app.use(installWait)
+
+app.mount('#app')
+```