maz-ui 3.9.0 → 3.10.0

package/nuxt/index.ts

@@ -0,0 +1,130 @@
+import { defineNuxtModule, addPlugin, createResolver, addImports, addComponent } from '@nuxt/kit'
+import { defu } from 'defu'
+import { componentList } from '../components/component-list'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export interface MazUiNuxtOptions {
+  /**
+   * Install the toaster plugin and enable auto import of toaster composable
+   */
+  injectToaster?: boolean
+  /**
+   * Enable auto import of useCurrency composable
+   */
+  injectUseCurrency?: boolean
+  /**
+   * Enable auto import of useTheme composable
+   */
+  injectUseTheme?: boolean
+  /**
+   * install global of v-fullscreen-img directive
+   */
+  installFullscreenImgDirective?: boolean
+  /**
+   * Enable auto import of all components
+   * @default true
+   */
+  injectComponents?: boolean
+  /**
+   * Enable Nuxt Devtools integration
+   * @default true
+   */
+  devtools?: boolean
+}
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    mazUi?: MazUiNuxtOptions
+  }
+  interface NuxtConfig {
+    mazUi?: MazUiNuxtOptions
+  }
+  interface NuxtOptions {
+    mazUi?: MazUiNuxtOptions
+  }
+}
+
+const _dirname = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtModule<MazUiNuxtOptions>({
+  meta: {
+    name: 'maz-ui/nuxt',
+    configKey: 'mazUi',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  defaults: {
+    devtools: true,
+    injectComponents: true,
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+
+    const moduleOptions = defu(nuxt.options.runtimeConfig.public.mazUi, options)
+
+    nuxt.options.runtimeConfig.public.mazUi = moduleOptions
+
+    if (moduleOptions.injectComponents) {
+      for (const componentName of componentList) {
+        addComponent({
+          name: componentName,
+          filePath:
+            process.env.NODE_ENV === 'prodution'
+              ? `maz-ui/components/${componentName}`
+              : `maz-ui/components/${componentName}.vue`,
+        })
+      }
+    }
+
+    if (moduleOptions.injectToaster) {
+      addPlugin(resolver.resolve(_dirname, './runtime/plugins/toaster'))
+
+      addImports({
+        from: resolver.resolve(_dirname, './runtime/composables/use-toast'),
+        name: 'useToast',
+        as: 'useToast',
+      })
+    }
+
+    if (moduleOptions.injectUseCurrency) {
+      addImports({
+        from: 'maz-ui',
+        name: 'useCurrency',
+        as: 'useCurrency',
+      })
+    }
+
+    if (moduleOptions.injectUseTheme) {
+      addImports({
+        from: 'maz-ui',
+        name: 'useTheme',
+        as: 'useTheme',
+      })
+    }
+
+    if (moduleOptions.installFullscreenImgDirective) {
+      addPlugin(resolver.resolve(_dirname, './runtime/plugins/v-fullscreen-img'))
+    }
+
+    if (options.devtools) {
+      // @ts-expect-error - private API
+      nuxt.hook('devtools:customTabs', (iframeTabs) => {
+        iframeTabs.push({
+          // unique identifier
+          name: 'maz-ui',
+          // title to display in the tab
+          title: 'maz-ui',
+          // any icon from Iconify, or a URL to an image
+          icon: 'https://louismazel.github.io/maz-ui-3/img/icons/android-chrome-512x512.png',
+          // iframe view
+          view: {
+            type: 'iframe',
+            src: 'https://louismazel.github.io/maz-ui-3',
+          },
+        })
+      })
+    }
+  },
+})

package/nuxt/runtime/composables/use-toast.ts

@@ -0,0 +1,8 @@
+import type { ToasterHandler } from './../../../modules'
+import { useNuxtApp } from 'nuxt/app'
+
+export function useToast() {
+  const { $toast } = useNuxtApp()
+
+  return $toast as ToasterHandler
+}

package/nuxt/runtime/plugins/toaster.ts

@@ -0,0 +1,26 @@
+import { ToasterHandler } from './../../../modules'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const instance = new ToasterHandler(vueApp, {
+    position: 'top',
+    timeout: 10_000,
+    persistent: false,
+  })
+
+  /* eslint-disable @typescript-eslint/no-empty-function */
+  const toasterServer = {
+    show: () => {},
+    success: () => {},
+    error: () => {},
+    warning: () => {},
+    info: () => {},
+  } as unknown as ToasterHandler
+  /* eslint-enable @typescript-eslint/no-empty-function */
+
+  return {
+    provide: {
+      toast: (process.client ? instance : toasterServer) as ToasterHandler,
+    },
+  }
+})

package/package.json

@@ -1,19 +1,27 @@
 {
   "name": "maz-ui",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
-  "main": "modules/maz-ui.umd.js",
-  "module": "modules/maz-ui.mjs",
-  "types": "maz-ui.d.ts",
+  "main": "./modules/index.mjs",
+  "module": "./modules/index.mjs",
+  "types": "./modules/index.d.ts",
+  "exports": {
+    ".": {
+      "default": "./modules/index.mjs",
+      "types": "./modules/index.d.ts"
+    },
+    "./*": "./*",
+    "./components": "./components/index.mjs",
+    "./components/*": "./components/*",
+    "./nuxt": "./nuxt/index.ts"
+  },
   "files": [
     "components",
     "modules",
     "css",
-    "maz-ui.d.ts",
-    "tailwindcss/tailwind.config.js",
-    "tailwindcss/utils",
-    "tailwindcss/variables"
+    "tailwindcss",
+    "nuxt"
   ],
   "lint-staged": {
     "*": "prettier -w -u",
@@ -21,10 +29,13 @@
     "*.{vue,css,scss,postcss,pcss}": "stylelint --fix"
   },
   "peerDependencies": {
+    "@nuxt/kit": "^3.4.0",
     "chart.js": "^4.0.0",
     "dayjs": "^1.1.0",
+    "defu": "^6.0.0",
     "dropzone": "^5.9.3",
     "libphonenumber-js": "^1.9.44",
+    "nuxt": "^3.4.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
@@ -43,82 +54,96 @@
     },
     "dayjs": {
       "optional": true
+    },
+    "nuxt": {
+      "optional": true
+    },
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "defu": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-typescript": "^7.22.11",
+    "@nuxt/kit": "^3.7.0",
+    "@nuxt/schema": "^3.7.0",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@types/dropzone": "^5.7.4",
-    "@types/google.maps": "^3.52.6",
-    "@types/node": "^18.16.0",
+    "@types/google.maps": "^3.54.0",
+    "@types/node": "^20.5.8",
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vitest/coverage-c8": "^0.30.1",
-    "@vue/compiler-sfc": "^3.2.39",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.1",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/tsconfig": "^0.3.2",
-    "autoprefixer": "^10.4.14",
-    "c8": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitest/coverage-v8": "^0.34.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.15",
+    "c8": "^8.0.1",
     "chalk": "^4.1.2",
-    "chart.js": "^4.2.1",
+    "chart.js": "^4.4.0",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.9",
+    "defu": "^6.1.2",
     "dropzone": "^5.9.3",
-    "eslint": "^8.39.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint": "^8.48.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-sonarjs": "^0.21.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-vue": "^9.17.0",
     "fs": "0.0.2",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.1.0",
     "json-templater": "^1.2.0",
-    "libphonenumber-js": "^1.10.28",
-    "lint-staged": "^13.2.1",
+    "libphonenumber-js": "^1.10.43",
+    "lint-staged": "^14.0.1",
     "minimist": "^1.2.8",
+    "nuxt": "^3.7.0",
     "onchange": "^7.1.0",
     "path": "^0.12.7",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.29",
     "postcss-html": "^1.5.0",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.0",
     "postcss-simple-vars": "^7.0.1",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.7",
-    "replace-in-file": "^6.3.5",
-    "rimraf": "^5.0.0",
-    "rollup": "^3.21.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "replace-in-file": "^7.0.1",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.28.1",
+    "rollup-plugin-dts": "^6.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.62.0",
-    "semver": "^7.5.0",
-    "stylelint": "^15.6.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
+    "sass": "^1.66.1",
+    "semver": "^7.5.4",
+    "sirv": "^2.0.3",
+    "stylelint": "^15.10.3",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-config-tailwindcss": "^0.0.7",
     "tailwind-css-variables": "^3.0.1",
-    "tailwindcss": "^3.3.1",
-    "terser": "^5.17.1",
+    "tailwindcss": "^3.3.3",
+    "terser": "^5.19.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.1",
-    "vite-plugin-css-injected-by-js": "^3.1.0",
-    "vite-plugin-static-copy": "^0.14.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-static-copy": "^0.17.0",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.30.1",
-    "vitest-canvas-mock": "^0.2.2",
-    "vue": "^3.2.45",
+    "vitest": "^0.34.3",
+    "vitest-canvas-mock": "^0.3.3",
+    "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
-    "vue-loader": "^17.0.1",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.4.4",
+    "vue-loader": "^17.2.2",
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.8.8",
     "vuedraggable": "^2.24.3"
   },
   "engines": {
@@ -136,7 +161,11 @@
     "vue-component",
     "framework",
     "library",
-    "ui"
+    "ui",
+    "nuxt",
+    "nuxt3",
+    "module",
+    "nuxt-module"
   ],
   "repository": {
     "type": "git",
@@ -144,7 +173,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "lint": "npm run lint:js && npm run lint:style",
+    "lint": "pnpm lint:js && pnpm lint:style",
     "lint:nofix": "cross-env NODE_ENV=production eslint --ext .ts,.js,.vue .",
     "lint:js": "cross-env NODE_ENV=production eslint --fix --ext .ts,.js,.vue .",
     "lint:style": "stylelint --fix \"./**/*.{vue,css,scss,postcss,pcss}\"",

package/tailwindcss/{tailwind.config.js → tailwind.config.ts}

@@ -1,24 +1,28 @@
 // @ts-check
 
 // Tailwind CSS configuration (https://tailwindcss.com/docs/configuration)
-const plugin = require('tailwindcss/plugin')
+import plugin from 'tailwindcss/plugin'
+import type { Config } from 'tailwindcss'
 
-const { utilities } = require('./variables/utilities')
-const { screens } = require('./variables/breakpoints')
-const { zIndex } = require('./variables/z-indexes')
-const { colors } = require('./utils/colors')
+import { utilities } from './variables/utilities'
+import { screens } from './variables/breakpoints'
+import { zIndex } from './variables/z-indexes'
+import { getColors } from './utils/colors'
 
-module.exports = {
+import tailwindCSSVariable from 'tailwind-css-variables'
+
+export default <Config>{
   darkMode: 'class',
+  content: [],
   theme: {
     extend: {
-      backgroundColor: ['even', 'odd'],
+      // backgroundColor: ['even', 'odd'],
       fontFamily: {
         base: 'var(--maz-font-family)',
       },
       zIndex,
       screens,
-      colors: colors(),
+      colors: getColors(),
       borderWidth: {
         0: '0',
         1: '1px',
@@ -34,7 +38,7 @@ module.exports = {
     },
   },
   plugins: [
-    require('tailwind-css-variables')({
+    tailwindCSSVariable({
       colors: false,
       screens: 'screen',
       fontFamily: false,

package/tailwindcss/tailwind.css

@@ -0,0 +1,4 @@
+@import './../modules/css/index.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwindcss/utils/colors.ts

@@ -0,0 +1,20 @@
+/* eslint-disable unicorn/prefer-module */
+import { baseColors, variations, variatingColors } from '../variables/colors'
+
+export function getColors() {
+  const colors = {
+    ...baseColors,
+  }
+
+  for (const color of Object.keys(variatingColors)) {
+    colors[color] = variations.reduce((colorVariations, variation) => {
+      colorVariations[variation] =
+        variation === 'DEFAULT'
+          ? `var(--maz-color-${color})`
+          : `var(--maz-color-${color}-${variation})`
+      return colorVariations
+    }, {})
+  }
+
+  return colors
+}

package/tailwindcss/variables/{breakpoints.js → breakpoints.ts}

@@ -1,4 +1,4 @@
-exports.screens = {
+export const screens = {
   'mob-s': '320px',
   'mob-m': '425px',
   'mob-l': '576px',

package/tailwindcss/variables/colors.ts

@@ -0,0 +1,44 @@
+/* eslint-disable unicorn/prefer-module */
+export const baseColors = {
+  transparent: 'transparent',
+  black: 'var(--maz-color-black)',
+  'black-contrast': 'var(--maz-color-black-contrast)',
+  white: 'var(--maz-color-white)',
+  'white-contrast': 'var(--maz-color-white-contrast)',
+  current: 'currentColor',
+  normal: 'var(--maz-color-text)',
+  color: 'var(--maz-color-bg)',
+  'color-light': 'var(--maz-color-bg-light)',
+  'color-lighter': 'var(--maz-color-bg-lighter)',
+  'bg-dark': 'var(--maz-bg-color-dark)',
+  'bg-light': 'var(--maz-bg-color-light)',
+  light: 'var(--maz-color-text-light)',
+  dark: 'var(--maz-color-text-dark)',
+  muted: 'var(--maz-color-muted)',
+  overlay: 'var(--maz-bg-overlay)',
+}
+
+export const variations = [
+  'DEFAULT',
+  50,
+  100,
+  200,
+  300,
+  400,
+  600,
+  700,
+  800,
+  900,
+  'contrast',
+  'alpha',
+  'alpha-20',
+]
+
+export const variatingColors = {
+  primary: true,
+  secondary: true,
+  info: true,
+  success: true,
+  warning: true,
+  danger: true,
+}

package/tailwindcss/variables/{utilities.js → utilities.ts}

@@ -1,4 +1,4 @@
-exports.utilities = {
+export const utilities = {
   '.padded-container': {
     width: '100%',
     'padding-left': 'var(--maz-container-padding)',

package/tailwindcss/variables/{z-indexes.js → z-indexes.ts}

@@ -1,5 +1,5 @@
 /* eslint-disable unicorn/prefer-module */
-exports.zIndex = {
+export const zIndex = {
   1: '1',
   2: '2',
   3: '3',