Merge pull request #7 from saintplay/1.0.0

1.0.0
saintplay · Mar 13, 2018 · f71767b · f71767b
2 parents a653202 + 7d71999
commit f71767b
Show file tree

Hide file tree

Showing 32 changed files with 7,253 additions and 3,708 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -7,6 +7,7 @@ function resolve (dir) {
 
 module.exports = (storybookBaseConfig, configType) => {
   const rules = storybookBaseConfig.module.rules
+  storybookBaseConfig.mode = 'development'
   storybookBaseConfig.resolve = {
     extensions: ['.js', '.vue', '.json'],
     alias: {

diff --git a/README.md b/README.md
@@ -73,6 +73,9 @@ With fewer options, the user experience will be improved
   <li>
     <a href="https://saintplay.github.io/vue-swatches/#sub-using-a-custom-trigger">Custom Trigger</a>
   </li>
+  <li>
+    <a href="https://saintplay.github.io/vue-swatches/#sub-fallback-input">Fallback Input</a>
+  </li>
 </ul>
 
 ## Install ##
@@ -136,6 +139,9 @@ This component has the same support than Vue itself
 However if you want to use this with IE9, you will probably need to work on the CSS styles.
 IE10 should be fine
 
+## Awsome Contributors ##
+
+* [Diego Jara (saintplay)](https://github.com/saintplay/)
 
 ## License
 

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -61,7 +61,10 @@ module.exports = {
       },
       {
         test: /\.pug$/,
-        use: 'pug-loader',
+        use: {
+          loader: 'pug-loader',
+          query: {} // Can be empty
+        },
         include: [resolve('src'), resolve('documentation')]
       },
       {

diff --git a/build/webpack.bundle.conf.js b/build/webpack.bundle.conf.js
@@ -17,6 +17,7 @@ baseWebpackConfig.entry = {
 }
 
 const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.bundle.productionSourceMap,
@@ -63,9 +64,7 @@ const webpackConfig = merge(baseWebpackConfig, {
         : { safe: true }
     }),
     // keep module.id stable when vender modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.HashedModuleIdsPlugin()
   ]
 })
 
@@ -87,4 +86,9 @@ if (config.bundle.productionGzip) {
   )
 }
 
+if (config.bundle.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
 module.exports = webpackConfig
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
@@ -12,6 +12,7 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },
@@ -42,8 +43,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
@@ -67,7 +66,7 @@ module.exports = new Promise((resolve, reject) => {
       // Add FriendlyErrorsPlugin
       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
         compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
         },
         onErrors: config.dev.notifyOnErrors
         ? utils.createNotifierCallback()

diff --git a/build/webpack.docs.conf.js b/build/webpack.docs.conf.js
@@ -16,6 +16,7 @@ const env = process.env.NODE_ENV === 'testing'
   : require('../config/bundle.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.bundle.productionSourceMap,
@@ -80,8 +81,6 @@ const webpackConfig = merge(baseWebpackConfig, {
     }),
     // keep module.id stable when vender modules does not change
     new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
     new CopyWebpackPlugin([
       {
         from: path.join(__dirname, '../static'),

diff --git a/config/index.js b/config/index.js
@@ -17,7 +17,7 @@ module.exports = {
     poll: false,
     useEslint: true,
     showEslintErrorsInOverlay: true,
-    devtool: 'eval-source-map',
+    devtool: '#source-map',
     cacheBusting: true,
     cssSourceMap: false,
   },

diff --git a/documentation/_api/_props.pug b/documentation/_api/_props.pug
@@ -37,7 +37,7 @@ h2.typo__h2#sub-props(data-section) Props
           tr.table__tr
             td.table__td: strong colors
             td.table__td #[kbd Array], #[kbd Object] or #[kbd String]
-            td.table__td: kbd '#basic'
+            td.table__td: kbd 'basic'
             td.table__td
               ul
                 li #[kbd 'material-light']
@@ -82,6 +82,56 @@ h2.typo__h2#sub-props(data-section) Props
                 li Use #[kbd 'disabled'] to disable the exceptions. User won't be able to pick the color.
                 li Use #[kbd 'hidden'] to hide the exceptions. User won't be able to see the color.
 
+          tr.table__tr
+            td.table__td: strong disabled
+            td.table__td #[kbd Boolean]
+            td.table__td: kbd false
+            td.table__td
+              ul
+                li: kbd true
+                li: kbd false
+            td.table__td
+              | Set it to #[kbd 'true'] to disable the swatch. It won't be possible to pick another color.
+
+          tr.table__tr
+            td.table__td: strong fallbackInputClass
+            td.table__td #[kbd Array], #[kbd Object] or #[kbd String]
+            td.table__td: kbd null
+            td.table__td
+              ul
+                li: kbd 'primary'
+                li: kbd 'is-primary'
+                li: kbd 'is-info'
+            td.table__td
+              | Sets the
+              a.typo__link(href="https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax")  class
+              |  for the fallback input
+
+          tr.table__tr
+            td.table__td: strong fallbackOkClass
+            td.table__td #[kbd Array], #[kbd Object] or #[kbd String]
+            td.table__td: kbd null
+            td.table__td
+              ul
+                li: kbd 'primary'
+                li: kbd 'is-primary'
+                li: kbd 'is-info'
+            td.table__td
+              | Sets the
+              a.typo__link(href="https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax")  class
+              |  for the fallback button
+
+          tr.table__tr
+            td.table__td: strong fallbackOkText
+            td.table__td #[kbd String]
+            td.table__td: kbd 'Ok'
+            td.table__td
+              ul
+                li: kbd 'Select'
+                li: kbd 'Save'
+                li: kbd 'OK'
+            td.table__td Sets the text for the fallback button
+
           tr.table__tr
             td.table__td: strong inline
             td.table__td #[kbd Boolean]
@@ -99,7 +149,7 @@ h2.typo__h2#sub-props(data-section) Props
           tr.table__tr
             td.table__td: strong max-height
             td.table__td #[kbd Number] or #[kbd String]
-            td.table__td: kbd false
+            td.table__td: kbd 300
             td.table__td
               ul
                 li: kbd '300'
@@ -157,6 +207,18 @@ h2.typo__h2#sub-props(data-section) Props
               | Whether the swatches should be showing borders or not.#[br]
               | Useful for making lighter colors more noticeable.
 
+          tr.table__tr
+            td.table__td: strong show-fallback
+            td.table__td #[kbd Boolean]
+            td.table__td: kbd false
+            td.table__td
+              ul
+                li: kbd true
+                li: kbd false
+            td.table__td
+              | Shows an input to change the color from there as well.#[br]
+              | Useful for custom color codes.
+
           tr.table__tr
             td.table__td: strong swatch-size
             td.table__td #[kbd Number] or #[kbd String]
@@ -171,7 +233,7 @@ h2.typo__h2#sub-props(data-section) Props
 
           tr.table__tr
             td.table__td: strong swatch-style
-            td.table__td #[kbd Object]
+            td.table__td #[kbd Object] or #[kbd Array]
             td.table__td: kbd {}
             td.table__td
               ul
@@ -185,7 +247,7 @@ h2.typo__h2#sub-props(data-section) Props
 
           tr.table__tr
             td.table__td: strong trigger-style
-            td.table__td #[kbd Object]
+            td.table__td #[kbd Object] or #[kbd Array]
             td.table__td: kbd {}
             td.table__td
               ul
@@ -199,7 +261,7 @@ h2.typo__h2#sub-props(data-section) Props
 
           tr.table__tr
             td.table__td: strong wrapper-style
-            td.table__td #[kbd Object]
+            td.table__td #[kbd Object] or #[kbd Array]
             td.table__td: kbd {}
             td.table__td
               ul
@@ -217,8 +279,9 @@ h2.typo__h2#sub-props(data-section) Props
             td.table__td: kbd null
             td.table__td
               ul
-                li: kbd 30
-                li: kbd '24'
-                li: kbd '36'
+                li: kbd '#1b22ee'
+                li: kbd ''
+                li: kbd '#fc2343'
+
             td.table__td
-              | Sets the selected color.
+              | Sets the selected color. Use `''` for transparent/no-color.
diff --git a/documentation/_examples/CustomColors.vue b/documentation/_examples/CustomColors.vue
@@ -4,7 +4,16 @@
       <strong>Please choose a color:</strong>
     </div>
     <div class="form__input">
-      <swatches v-model="color" :colors="colors" row-length="5" popover-to="left"></swatches>
+      <swatches
+        v-model="color"
+
+        :colors="colors"
+
+        row-length="6"
+        shapes="circles"
+        show-border
+        popover-to="left"
+      ></swatches>
     </div>
   </div>
 </template>
@@ -19,7 +28,7 @@ export default {
   data () {
     return {
       color: '#F64272',
-      colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5' ]
+      colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
     }
   }
 }

diff --git a/documentation/_examples/CustomTrigger.vue b/documentation/_examples/CustomTrigger.vue
@@ -2,7 +2,7 @@
   <div class="form__field">
     <div class="form__input">
       <swatches v-model="color">
-        <input slot="trigger" :value="color" readonly>
+        <input slot="trigger" :value="color" class="form__input__element" readonly>
       </swatches>
     </div>
   </div>

diff --git a/documentation/_examples/Exceptions.vue b/documentation/_examples/Exceptions.vue
@@ -7,8 +7,10 @@
       <swatches
         v-model="color"
         colors="text-basic"
+
         :exceptions="exceptions"
         exception-mode="disabled"
+
         row-length="4"
         show-border
         popover-to="left"

diff --git a/documentation/_examples/FallbackInput.vue b/documentation/_examples/FallbackInput.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="form__field">
+    <div class="form__label">
+      <strong>Please choose a color:</strong>
+    </div>
+    <div class="form__input">
+      <swatches
+        v-model="color"
+
+        show-fallback
+
+        popover-to="left"
+      ></swatches>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swatches from 'vue-swatches'
+
+export default {
+  components: {
+    Swatches
+  },
+  data () {
+    return {
+      color: '#A463BF',
+    }
+  }
+}
+</script>
diff --git a/documentation/_examples/_examples.pug b/documentation/_examples/_examples.pug
@@ -6,16 +6,18 @@
   +subsection('Using a Preset')
     :markdown-it
       Vue Swatches has a bunch of [presets](#presets) ready to use. Make sure to check it out!
-
     +example('PresetSimple')
 
   +subsection('Using a Custom Trigger')
     :markdown-it
       You can use your custom trigger. Useful to show `buttons`, `icons`, custom `inputs`!
-
     +example('CustomTrigger')
 
   +subsection('Custom Colors')
+    :markdown-it
+      Remeber to use always **6-digits** hexadecimal colors.
+
+      If you want to provide a **transparent/no-color** option you can use a empty string (`''`).
     +example('CustomColors', { showJavascript: true })
 
   +subsection('Nested Colors')
@@ -35,3 +37,8 @@
     :markdown-it
       You can hide or disable colors, using `exceptions` and `exception-mode`
     +example('Exceptions', { showJavascript: true })
+
+  +subsection('Fallback Input')
+    :markdown-it
+      If your user wants to use its own color you can use a fallback input and customizing it with `fallback-input-class`, `fallback-ok-class` and '`fallback-ok-text`'
+    +example('FallbackInput')
diff --git a/documentation/_examples/index.js b/documentation/_examples/index.js
@@ -6,6 +6,7 @@ import CustomTrigger from './CustomTrigger'
 import InlineSimple from './InlineSimple'
 import InlineAdvanced from './InlineAdvanced'
 import Exceptions from './Exceptions'
+import FallbackInput from './FallbackInput'
 
 export {
   Simple,
@@ -15,5 +16,6 @@ export {
   CustomTrigger,
   InlineSimple,
   InlineAdvanced,
-  Exceptions
+  Exceptions,
+  FallbackInput
 }