maz-ui 2.3.13 → 2.4.2

package/tailwindcss/variables/z-indexes.js

@@ -0,0 +1,15 @@
+/* eslint-disable unicorn/prefer-module */
+module.exports = {
+  1: '1',
+  2: '2',
+  3: '3',
+  4: '4',
+  5: '5',
+  15: '15',
+  25: '25',
+  35: '35',
+  45: '45',
+  75: '75',
+  100: '100',
+  'default-backdrop': '1050',
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 LouisMazel
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,66 +0,0 @@
-# maz-ui
-
-[![license](https://img.shields.io/github/license/LouisMazel/maz-ui.svg?style=flat-square)](https://github.com/LouisMazel/maz-ui/blob/master/LICENSE)
-[![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org)
-[![npm](https://img.shields.io/npm/v/maz-ui.svg?style=flat-square)](https://www.npmjs.com/package/maz-ui)
-[![npm](https://img.shields.io/npm/dt/maz-ui.svg?style=flat-square)](https://www.npmjs.com/package/maz-ui)
-[![Codacy grade](https://img.shields.io/codacy/grade/3d15a7c11bfe47c69a2aed93cc67cc29.svg?style=flat-square)](https://www.codacy.com/app/LouisMazel/maz-ui)
-
-[![npm](https://nodei.co/npm/maz-ui.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/maz-ui)
-
-> [Maz-ui](https://louismazel.github.io/maz-ui/) is a stand-alone components library for [VueJS](https://vuejs.org) & [NuxtJS](https://nuxtjs.org/)
-
-## Documentation & Components
-
-[Documentation & Components](https://louismazel.github.io/maz-ui/)
-
-## Install
-
-[Get Started](https://louismazel.github.io/maz-ui/documentation/get-started)
-
-```shell
-npm install maz-ui
-
-# Or yarn add maz-ui
-```
-
-### On demande install
-
-To optimize your bundle size, it's recommanded to use the [on demand install](https://louismazel.github.io/maz-ui/documentation/get-started)
-
-```javascript
-import Vue from 'vue'
-import {
-  ...
-  MazBtn
-  MazInput
-  MazPicker
-  MazPhoneNumberInput
-  ...
-} from 'maz-ui'
-
-...
-Vue.use(MazBtn)
-Vue.use(MazInput)
-Vue.use(MazPicker)
-Vue.use(MazPhoneNumberInput)
-...
-```
-
-### Quick Start - Fully install (not recommanded)
-
-```javascript
-import Vue from "vue";
-import "maz-ui/lib/css/index.css";
-import MazUi from "maz-ui";
-
-Vue.use(MazUi);
-```
-
-## Contribute
-
-Read documentation of [CONTRIBUTING.md](./.github/CONTRIBUTING.md)
-
-## LICENSE
-
-[MIT](LICENSE)

package/bin/index.js

@@ -1,63 +0,0 @@
-#!/usr/bin/env node
-
-const chalk = require('chalk')
-const clear = require('clear')
-const figlet = require('figlet')
-const path = require('path')
-const { Command } = require('commander')
-
-const VERSION = require('../package').version
-const NAME = require('../package').name
-const PREFIX = 'maz-'
-const generateRootCss = require('./lib/index.js')
-
-const program = new Command()
-
-clear()
-console.log(
-  chalk.bold.keyword('dodgerblue')(
-    figlet.textSync(NAME, { horizontalLayout: 'full' })
-  )
-)
-console.log()
-console.log(chalk.bold.keyword('dodgerblue')(`${NAME} v${VERSION}`))
-console.log()
-
-program
-  .version(`${NAME} ${VERSION}`)
-  .usage('<command> [options]')
-
-program
-  .arguments('[command]')
-  .action((cmd) => {
-    program.outputHelp()
-    if (cmd) {
-      console.log()
-      console.log(
-        chalk.red(`  ⛔️ Unknown command ${chalk.bold.keyword('dodgerblue')(cmd)}.`)
-      )
-      console.log()
-    }
-  })
-
-program.on('--help', () => {
-  console.log()
-  console.log(`  Run ${chalk.bold.keyword('dodgerblue')('maz <command> --help')} for detailed usage of given command.`)
-  console.log()
-})
-
-program
-  .command('get-theme')
-  .option('-c, --config <path-to-config-file>', 'Optionnal: Provide path to config file - Ex: "./maz-ui.config.js"')
-  .description('Generate css variables')
-  .action(async (options) => {
-    const configPath = path.resolve(process.env.PWD, options.config ? options.config : './maz-ui.config.js')
-    const config = require(configPath)
-    const output = config.output
-    const colors = config.theme
-    delete config.output
-    generateRootCss(PREFIX, colors, output)
-    process.exit(0)
-  })
-
-program.parse(process.argv)

package/bin/lib/_constantes/default-colors.js

@@ -1,69 +0,0 @@
-module.exports = {
-  mainColors: {
-    primary: 'dodgerblue',
-    secondary: '#1CD1A1',
-    third: '#C41AF9',
-    danger: 'orangered',
-    success: 'yellowgreen',
-    info: '#17A2B8',
-    warning: '#FFA300',
-    light: '#EEEEEE',
-    dark: '#21222E',
-    grey: '#999999',
-    default: '#CCCCCC',
-    black: 'black',
-    white: 'white',
-    transparent: '#FFFFFF00',
-    disabled: '#F2F2F2'
-  },
-  typo: {
-    'base-font-size': '16px',
-    'base-font-family': 'system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif, \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\'',
-    'base-font-weight': '400',
-    'base-line-height': '1.5'
-  },
-  border: {
-    'border-width': '2px',
-    'border-radius': '8px'
-  },
-  light: {
-    typo: {
-      'text-color': '#212121',
-      'muted-color': 'rgba(0, 0, 0, .54)',
-      'placeholder-color': '#A7A7A7',
-      'icon-color': '#DEDEDE'
-    },
-    layout: {
-      'bg-color': 'white',
-      'bg-color-light': '#F2F2F2',
-      'overlay-color': 'rgba(86, 87, 117, .7)'
-    },
-    borderColor: {
-      'border-color': '#EEEEEE'
-    },
-    state: {
-      'hover-color': '#F2F2F2',
-      'disabled-color': '#F2F2F2'
-    }
-  },
-  dark: {
-    typo: {
-      'text-color': '#EEEEEE',
-      'muted-color': 'rgba(255, 255, 255, .54)',
-      'placeholder-color': 'rgba(255, 255, 255, .6)',
-      'icon-color': '#65678F'
-    },
-    layout: {
-      'bg-color': '#21222E',
-      'bg-color-light': '#303144',
-      'overlay-color': 'rgba(86, 87, 117, .7)'
-    },
-    borderColor: {
-      'border-color': '#3B3C53'
-    },
-    state: {
-      'hover-color': '#2E2F40',
-      'disabled-color': '#CCCCCC'
-    }
-  }
-}

package/bin/lib/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (color: object, output: string) => object
-export default _default

package/bin/lib/index.js

@@ -1,145 +0,0 @@
-const { isColorName, colorNameToHex, shadeColor, hexToRgba } = require('color-transformer-ui')
-const generateRootCss = require('./methods/generate-root-css')
-
-const getAlpha = (color, coef) => {
-  const alpha = color.length === 7 ? hexToRgba(color, coef) : 'transparent'
-
-  const outputCoef = coef * 100 < 10 ? `0${coef * 100}` : coef * 100
-
-  return {
-    alpha,
-    coef: outputCoef
-  }
-}
-
-const getMainVariants = (color) => {
-  if (isColorName(color)) color = colorNameToHex(color)
-  const darken = shadeColor(color, -20)
-  const alpha = getAlpha(color, 0.05)
-  const alpha5 = getAlpha(color, 0.5)
-  const alpha4 = getAlpha(color, 0.4)
-  const alpha6 = getAlpha(color, 0.6)
-
-  return [color, darken, [alpha, alpha4, alpha5, alpha6]]
-}
-
-const getLayoutVariants = (color) => {
-  if (isColorName(color)) color = colorNameToHex(color)
-  const darken = shadeColor(color, -10)
-
-  return [color, darken]
-}
-
-const getStateVariants = (color, dark) => {
-  if (isColorName(color)) color = colorNameToHex(color)
-  const darken = dark ? shadeColor(color, 15) : shadeColor(color, -10)
-
-  return [color, darken]
-}
-
-module.exports = (prefix, theme, output) => {
-  if (!prefix) throw new Error('The "prefix" should be defined')
-  if (!output) throw new Error('No "output" found in maz-ui.config.js - Ex: "output: ./assets/root-vars.css"')
-  if (!theme || !Object.keys(theme).length) throw new Error('No colors provided in maz-ui-config.js - Ex: "{ theme: { mainColors: { primary: "red" } } }"')
-
-  const results = {
-    light: {},
-    dark: {}
-  }
-
-  /**
-   * Main Colors
-   */
-  if (theme.main) {
-    Object.entries(theme.main).forEach((values) => {
-      const variants = getMainVariants(values[1])
-      results.light[`--${prefix}${values[0]}`] = variants[0]
-      results.light[`--${prefix}${values[0]}-darken`] = variants[1]
-      variants[2].forEach((v) => {
-        results.light[`--${prefix}${values[0]}-alpha-${v.coef}`] = v.alpha
-      })
-    })
-  }
-
-  /**
-   * Typo base
-   */
-  if (theme.typo) {
-    Object.entries(theme.typo).forEach((values) => {
-      results.light[`--${prefix}${values[0]}`] = values[1]
-    })
-  }
-
-  /**
-   * Border
-   */
-  if (theme.border) {
-    Object.entries(theme.border).forEach((values) => {
-      results.light[`--${prefix}${values[0]}`] = values[1]
-    })
-  }
-
-  /**
-   * Light
-   */
-  if (theme.light) {
-    if (theme.light.typo) {
-      Object.entries(theme.light.typo).forEach((values) => {
-        results.light[`--${prefix}${values[0]}`] = values[1]
-      })
-    }
-    if (theme.light.layout) {
-      Object.entries(theme.light.layout).forEach((values) => {
-        results.light[`--${prefix}${values[0]}`] = values[1]
-      })
-    }
-
-    if (theme.light.borderColor) {
-      Object.entries(theme.light.borderColor).forEach((values) => {
-        const variants = getLayoutVariants(values[1])
-        results.light[`--${prefix}${values[0]}`] = variants[0]
-        results.light[`--${prefix}${values[0]}-darken`] = variants[1]
-      })
-    }
-    if (theme.light.state) {
-      Object.entries(theme.light.state).forEach((values) => {
-        const variants = getStateVariants(values[1])
-        results.light[`--${prefix}${values[0]}`] = variants[0]
-        results.light[`--${prefix}${values[0]}-darken`] = variants[1]
-      })
-    }
-  }
-
-  /**
-   * Dark
-   */
-  if (theme.dark) {
-    if (theme.dark.typo) {
-      Object.entries(theme.dark.typo).forEach((values) => {
-        results.dark[`--${prefix}${values[0]}`] = values[1]
-      })
-    }
-    if (theme.dark.layout) {
-      Object.entries(theme.dark.layout).forEach((values) => {
-        results.dark[`--${prefix}${values[0]}`] = values[1]
-      })
-    }
-    if (theme.dark.borderColor) {
-      Object.entries(theme.dark.borderColor).forEach((values) => {
-        const variants = getLayoutVariants(values[1])
-        results.dark[`--${prefix}${values[0]}`] = variants[0]
-        results.dark[`--${prefix}${values[0]}-darken`] = variants[1]
-      })
-    }
-    if (theme.dark.state) {
-      Object.entries(theme.dark.state).forEach((values) => {
-        const variants = getStateVariants(values[1], true)
-        results.dark[`--${prefix}${values[0]}`] = variants[0]
-        results.dark[`--${prefix}${values[0]}-darken`] = variants[1]
-      })
-    }
-  }
-
-  generateRootCss(results, output)
-  return results
-}

package/bin/lib/methods/generate-root-css.js

@@ -1,49 +0,0 @@
-const fs = require('fs')
-const { EOL: endOfLine } = require('os')
-const render = require('json-templater/string')
-
-const LIGHT_TEMPLATE = `
-/* Automatically generated by 'maz-ui' */
-
-/* stylelint-disable */
-
-:root {
-{{light_include}}
-}`
-
-const DARK_TEMPLATE = `.maz-is-dark {
-{{dark_include}}
-}`
-
-const END_TEMPLATE = `
-/* stylelint-enable */`
-
-
-
-module.exports = (variables, output) => {
-  const lightProperties = Object.entries(variables.light)
-    .map((values) => `  ${values[0]}: ${values[1]};`)
-    .join(endOfLine)
-  const darkProperties = Object.entries(variables.dark)
-    .map((values) => `  ${values[0]}: ${values[1]};`)
-    .join(endOfLine)
-
-  const lightTemplate = render(LIGHT_TEMPLATE, {
-    light_include: lightProperties,
-    dark_include: darkProperties
-  })
-
-  const darkTemplate = render(DARK_TEMPLATE, {
-    light_include: lightProperties,
-    dark_include: darkProperties
-  })
-
-  const result = `
-  ${lightTemplate}
-  ${darkProperties ? darkTemplate : ''}
-  ${END_TEMPLATE}
-  `.trim()
-
-  fs.writeFileSync(output, result)
-  console.log('\x1B[32m', '[build root css file] DONE:', output)
-}

package/bin/lib/methods/get-theme-settings.js

@@ -1,58 +0,0 @@
-const defaultTheme = require('./../_constantes/default-colors')
-
-module.exports = (opts) => {
-  return {
-    mainColors: {
-      ...defaultTheme.mainColors,
-      ...opts.mainColors
-    },
-    typo: {
-      ...defaultTheme.typo,
-      ...opts.typo
-    },
-    border: {
-      ...defaultTheme.border,
-      ...opts.border
-    },
-    light: {
-      typo: {
-        ...defaultTheme.light.typo,
-        ...(opts.light ? opts.light.typo : {})
-      },
-      layout: {
-        ...defaultTheme.light.layout,
-        ...(opts.light ? opts.light.layout : {})
-      },
-      state: {
-        ...defaultTheme.light.state,
-        ...(opts.light ? opts.light.state : {})
-      },
-      borderColor: {
-        ...defaultTheme.light.borderColor,
-        ...(opts.light ? opts.light.borderColor : {})
-      }
-    },
-    dark: {
-      typo: {
-        ...defaultTheme.dark.typo,
-        ...(opts.dark ? opts.dark.typo : {})
-      },
-      layout: {
-        ...defaultTheme.dark.layout,
-        ...(opts.dark ? opts.dark.layout : {})
-      },
-      state: {
-        ...defaultTheme.dark.state,
-        ...(opts.dark ? opts.dark.state : {})
-      },
-      borderColor: {
-        ...defaultTheme.dark.borderColor,
-        ...(opts.dark ? opts.dark.borderColor : {})
-      }
-    },
-    breakpoints: {
-      ...defaultTheme.breakpoints,
-      ...opts.breakpoints
-    }
-  }
-}

package/bin/lib/methods/set-css-vars.js

@@ -1,11 +0,0 @@
-module.exports = (variables) => {
-  const root = document.documentElement.style
-
-  Object.entries(variables.light).forEach((values) => {
-    root.setProperty(values[0], values[1])
-  })
-
-  Object.entries(variables.dark).forEach((values) => {
-    root.setProperty(values[0], values[1])
-  })
-}