release: 3.0.0-next.18

CHANGELOG.md

@@ -3,6 +3,25 @@
 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.18](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.18) (2022-03-20)
+
+### Bug Fixes
+
+- **docs:** aos implementation ([#218](https://github.com/LouisMazel/maz-ui/issues/218)) ([3849e05](https://github.com/LouisMazel/maz-ui/commit/3849e0566973906ae1a557d6dfa230429b550618))
+- **docs:** aos installation on client side ([#217](https://github.com/LouisMazel/maz-ui/issues/217)) ([6790515](https://github.com/LouisMazel/maz-ui/commit/67905153973581418b4f807e531b1ee4f01b1331))
+- **lib:** maz-input - support of model modifier ([b04be0a](https://github.com/LouisMazel/maz-ui/commit/b04be0a2fd69c77387ee0d52bf292b6f8ed100a8))
+- **lib:** maz-input - support of model modifier ([1b54be3](https://github.com/LouisMazel/maz-ui/commit/1b54be3759c1016de741eb1fa89d28718d9260e0))
+
+### Features
+
+- **docs:** theme handler - add documenation and demo ([812593d](https://github.com/LouisMazel/maz-ui/commit/812593d0b48b6cf46f6e3e7c54db59295c25cbd7))
+- **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 ([#214](https://github.com/LouisMazel/maz-ui/issues/214)) ([a6a1931](https://github.com/LouisMazel/maz-ui/commit/a6a1931ba7000c5e545cfc4808fe7205809629c4))
+- **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+- **lib:** aos - adding anchor option ([#219](https://github.com/LouisMazel/maz-ui/issues/219)) ([b1c8b02](https://github.com/LouisMazel/maz-ui/commit/b1c8b028286d2154b86c5bb52fa7208d0c347d3e))
+- **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.17](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.17) (2022-03-19)
 
 ### Bug Fixes

lerna.json

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

packages/docs/CHANGELOG.md

@@ -3,6 +3,28 @@
 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.18](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.18) (2022-03-20)
+
+
+### Bug Fixes
+
+* **docs:** aos implementation ([#218](https://github.com/LouisMazel/maz-ui/issues/218)) ([3849e05](https://github.com/LouisMazel/maz-ui/commit/3849e0566973906ae1a557d6dfa230429b550618))
+* **docs:** aos installation on client side ([#217](https://github.com/LouisMazel/maz-ui/issues/217)) ([6790515](https://github.com/LouisMazel/maz-ui/commit/67905153973581418b4f807e531b1ee4f01b1331))
+
+
+### Features
+
+* **docs:** theme handler - add documenation and demo ([812593d](https://github.com/LouisMazel/maz-ui/commit/812593d0b48b6cf46f6e3e7c54db59295c25cbd7))
+* **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 ([#214](https://github.com/LouisMazel/maz-ui/issues/214)) ([a6a1931](https://github.com/LouisMazel/maz-ui/commit/a6a1931ba7000c5e545cfc4808fe7205809629c4))
+* **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+* **lib:** aos - adding anchor option ([#219](https://github.com/LouisMazel/maz-ui/issues/219)) ([b1c8b02](https://github.com/LouisMazel/maz-ui/commit/b1c8b028286d2154b86c5bb52fa7208d0c347d3e))
+* **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.17](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.17) (2022-03-19)
 
 

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

@@ -133,6 +133,7 @@ export default defineUserConfig<DefaultThemeOptions>({
         id: 'G-EM35TM23ZC',
       },
     ],
+    ['vuepress-plugin-sitemap2']
   ],
 
   alias: {

packages/docs/docs/.vuepress/configs/guide.ts

@@ -0,0 +1,9 @@
+export const guide = {
+  text: 'Guide',
+  children: [
+    '/guide/getting-started.md',
+    '/guide/colors.md',
+    '/guide/theme.md',
+    '/guide/dark-theme.md'
+  ]
+}

packages/docs/docs/.vuepress/configs/helpers.ts

@@ -0,0 +1,6 @@
+export const helpers = {
+  text: 'Helpers',
+  children: [
+    '/helpers/theme-handler.md',
+  ]
+}

packages/docs/docs/.vuepress/configs/navbar.ts

@@ -1,24 +1,19 @@
 import type { NavbarConfig } from '@vuepress/theme-default'
-import { version } from './../../../../lib/package.json'
+import { version } from 'maz-ui/package.json'
+
+import { guide } from './guide'
 import { components } from './components'
 import { directives } from './directives'
 import { filters } from './filters'
+import { helpers } from './helpers'
 import { plugins } from './plugins'
 
 export const navbar: NavbarConfig = [
-  {
-    text: 'Guide',
-    children: [
-      '/guide/getting-started.md',
-      '/guide/colors.md',
-      '/guide/theme.md',
-      '/guide/dark-mode.md'
-    ]
-  },
+  guide,
   components,
   {
     text: 'Modules',
-    children: [plugins, filters, directives],
+    children: [plugins, directives, filters, helpers],
   },
   '/made-with-maz-ui',
   {

packages/docs/docs/.vuepress/configs/sidebar.ts

@@ -2,20 +2,15 @@ import type { SidebarConfig } from '@vuepress/theme-default'
 import { components } from './components'
 import { directives } from './directives'
 import { filters } from './filters'
+import { guide } from './guide'
+import { helpers } from './helpers'
 import { plugins } from './plugins'
 
 export const sidebar: SidebarConfig = [
-  {
-    text: 'Guide',
-    children: [
-      '/guide/getting-started.md',
-      '/guide/colors.md',
-      '/guide/theme.md',
-      '/guide/dark-mode.md',
-    ],
-  },
+  guide,
   components,
   plugins,
   directives,
   filters,
+  helpers,
 ]

packages/docs/docs/guide/dark-theme.md

@@ -0,0 +1,31 @@
+# Dark Theme
+
+## How it's works ?
+
+To enable the dark you have just to add `dark` class to the `<html />` of your page
+
+```html
+<!-- Dark mode not enabled -->
+<html>
+<body>
+  <!-- Will be white -->
+  <div id="app">
+    <!-- ... -->
+  </div>
+</body>
+</html>
+
+<!-- Dark mode enabled -->
+<html class="dark">
+<body>
+  <!-- Will be black -->
+  <div id="app">
+    <!-- ... -->
+  </div>
+</body>
+</html>
+```
+
+## How to manage theme ?
+
+Use the `theme-handler` composable: [theme-handler](/maz-ui-3/helpers/theme-handler.html)

packages/docs/docs/helpers/theme-handler.md

@@ -0,0 +1,100 @@
+---
+description: Vue composable to handling UI theme - Automatically set dark and light theme and switch between them
+---
+
+# theme-handler
+
+It's a Vue composable to handling UI theme: Automatically set dark and light theme and switch between them
+
+## Demo
+
+<br />
+
+<MazBtn type="button" @click="toggleTheme">
+  Toggle theme
+</MazBtn>
+
+## How to use it ?
+
+In your main Vue component (often App.vue - default layout for nuxt)
+
+`App.vue` or `layouts/default.vue`
+
+```vue
+<template>
+  <div
+    class="app"
+    :class="{
+      '--has-dark-theme': hasDarkTheme,
+      '--has-light-theme': hasLightTheme,
+    }"
+  >
+    <!-- Theme switching -->
+    <MazBtn type="button" @click="toggleTheme">
+      Toggle theme
+    </MazBtn>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+
+  import { useThemeHandler } from 'maz-ui'
+  import type { ThemeHandlerOptions } from 'maz-ui'
+  import MazBtn from 'maz-ui/components/MazBtn'
+
+  // optional
+  const options: ThemeHandlerOptions = {
+    /* should be "dark" to works with maz-ui */
+    darkClass: 'dark',
+    /* local storage preferences */
+    storageThemeKey: 'theme',
+    storageThemeValueDark: 'dark',
+    storageThemeValueLight: 'light',
+  }
+
+  const {
+    autoSetTheme,
+    toggleTheme,
+    theme,
+    hasDarkTheme,
+    hasLightTheme
+  } = useThemeHandler(options)
+
+  onMounted(() => {
+    /*
+    * will automatically set the theme according
+    * with the user preferences and class to <html /> element
+    */
+    autoSetTheme()
+  })
+</script>
+```
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+
+  import { useThemeHandler } from 'maz-ui'
+  import type { ThemeHandlerOptions } from 'maz-ui'
+  import MazBtn from 'maz-ui/components/MazBtn'
+
+  // optional
+  const options: ThemeHandlerOptions = {
+    darkClass: 'dark',
+    storageThemeKey: 'theme',
+    storageThemeValueDark: 'dark',
+    storageThemeValueLight: 'light',
+  }
+
+  const {
+    autoSetTheme,
+    toggleTheme,
+    theme,
+    hasDarkTheme,
+    hasLightTheme
+  } = useThemeHandler(options)
+
+  onMounted(() => {
+    autoSetTheme()
+  })
+</script>