Initial TODO List #2

- ported pug based docs from vuelidate/vue-multiselect project (it feets well for us)
- having problems with integration test for example (plugin breaks, try to separate bar-chart in different vue file)

build/webpack.base.conf.js

@@ -19,7 +19,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.pug', '.js', '.vue', '.json'],
     modules: [
       resolve('src'),
       resolve('docs'),
@@ -30,7 +30,7 @@ module.exports = {
       'vue-vega': path.resolve(__dirname, '../src/index'), // for consistent docs
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../docs/assets'),
-      'examples': path.resolve(__dirname, '../docs/components')
+      'examples': path.resolve(__dirname, '../docs/partials/examples')
     }
   },
   module: {

build/webpack.dev.conf.js

@@ -15,8 +15,8 @@ module.exports = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },
-  // maybe it's slower but debug works only with that type
-  devtool: 'source-map',
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env
@@ -27,7 +27,7 @@ module.exports = merge(baseWebpackConfig, {
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: 'index.html',
+      template: './docs/index.pug',
       inject: true
     }),
     new FriendlyErrorsPlugin()

build/webpack.docs.conf.js

@@ -15,7 +15,7 @@ var env = process.env.NODE_ENV === 'testing'
 var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({
-      sourceMap: config.docs.productionSourceMap,
+      sourceMap: false,
       extract: true
     })
   },
@@ -42,19 +42,15 @@ var webpackConfig = merge(baseWebpackConfig, {
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: {
-        safe: true
-      }
-    }),
+    new OptimizeCSSPlugin(),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: process.env.NODE_ENV === 'testing'
         ? 'index.html'
         : config.docs.index,
-      template: 'index.html',
+      template: 'docs/index.pug',
       inject: true,
       minify: {
         removeComments: true,

docs/LangSwitcher.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+  div.tabs
+    a.tabs__link(
+      v-for="lang in langs"
+      v-bind:class="{'tabs__link--active': lang === current}"
+      @click="select(lang)"
+    ) {{lang}}
+</template>
+
+<script>
+export default {
+  props: ['langs', 'current'],
+  methods: {
+    select (lang) {
+      this.$emit('select', lang)
+    }
+  }
+}
+</script>

docs/_mixins.pug

@@ -0,0 +1,62 @@
+- function hyphenate (path) {
+-  return path
+-   .replace(/^[A-Z]/, x => x.toLowerCase())
+-   .replace(/[A-Z ]/g, x => '-' + x.toLowerCase())
+-   .replace(/[^A-Za-z]/g, '-')
+-   .replace(/(^-+|-+$)/g, '')
+-   .replace(/-{2,}/g, '-')
+- }
+- const toc = [];
+
+mixin renderToc()
+  - const tocSwapBuffer = pug_html;
+  - pug_html = '';
+  for s in toc
+    +tocSection(s.name)
+    for sub in s.subs
+      +tocSubsection(sub)
+  - pug_html = tocSwapBuffer.replace('%%_TOC_%%', pug_html);
+
+mixin tocSection(name)
+  li.list__heading
+    a.link.blank__link(href="#" + hyphenate(name))=name
+
+mixin tocSubsection(name)
+  - var customClass = "{ 'list__link--active': currentPosition === 'sub-" + hyphenate(name) + "' }"
+  li.list__element
+    a.link.list__link(:class=customClass, href="#sub-" + hyphenate(name))=name
+
+
+mixin section(name)
+  - toc.push({name: name, subs: []})
+  .grid__row
+    .grid__column
+      section(id=hyphenate(name))
+        h1.typo__h1=name
+        hr.typo__hr
+        if block
+          block
+
+mixin subsection(name)
+  - toc[toc.length - 1].subs.push(name)
+  .grid__row
+    .grid__column
+      h2.typo__h2(id='sub-' + hyphenate(name) data-section)=name
+      if block
+        block
+
+mixin example(path)
+  .example.grid__row
+    if block
+      block
+    .grid__column.grid__unit--md-5
+      #{hyphenate(path)}
+    .grid__column.grid__unit--md-7
+      label.typo__label Code sample
+      div
+        pre(v-pre).language-javascript
+          code=require('!!raw-loader!vue-loader/lib/selector?type=script!examples/' + path + '.vue').replace(/^[\/\n]*/m,'')
+      lang-switcher(v-bind:langs="markupLangs" v-bind:current="markupLanguage" v-on:select="selectLanguage")
+      div(v-show="markupLanguage === 'html'")
+        pre(v-pre).language-html
+          code=require('!!pug-loader?pretty!vue-loader/lib/selector?type=template!examples/' + path + '.vue')()

docs/assets/_functions.sass

@@ -0,0 +1,53 @@
+@function no-unit($value)
+  @return $value / ($value * 0 + 1)
+
+@function to-rem($rem, $base-size: 16px)
+  $rem: no-unit($rem) / no-unit($base-size) * 1rem
+  @if ($rem == 0rem)
+    $rem: 0
+  @return $rem
+
+@function rem($values)
+  $values-list: length($values)
+
+  @if $values-list == 1
+    @return to-rem($values)
+
+  $rem-list: ()
+
+  @for $i from 1 through $values-list
+    $rem-list: append($rem-list, to-rem(nth($values, $i)))
+
+  @return $rem-list
+
+@mixin spinner($size: 16px, $color: #333, $border-width: 2px)
+  width: rem($size)
+
+  &:before,
+  &:after
+    position: absolute
+    content: ''
+    top: 50%
+    left: 50%
+    margin: rem($size / -2 0 0 $size / -2)
+    width: rem($size)
+    height: rem($size)
+    border-radius: 100%
+    border-color: $color transparent transparent
+    border-style: solid
+    border-width: $border-width
+    box-shadow: 0 0 0 1px transparent
+
+  &:before
+    animation: spinning 1.8s cubic-bezier(0.41, 0.26, 0.2, 0.62)
+    animation-iteration-count: infinite
+
+  &:after
+    animation: spinning 1.8s cubic-bezier(0.51, 0.09, 0.21, 0.8)
+    animation-iteration-count: infinite
+
+@keyframes spinning
+  0%
+    transform: rotate3d(0, 0, 1, 0)
+  100%
+    transform: rotate3d(0, 0, 1, 720deg)

docs/assets/base/_animations.sass

@@ -0,0 +1,5 @@
+@keyframes spinning
+  0%
+    transform: rotate3d(0, 0, 1, 0)
+  100%
+    transform: rotate3d(0, 0, 1, 720deg)

docs/assets/base/_functions.sass

@@ -0,0 +1,21 @@
+@function no-unit($value)
+  @return $value / ($value * 0 + 1)
+
+@function to-rem($rem, $base-size: $global-font-size)
+  $rem: no-unit($rem) / no-unit($base-size) * 1rem
+  @if ($rem == 0rem)
+    $rem: 0
+  @return $rem
+
+@function rem($values)
+  $values-list: length($values)
+
+  @if $values-list == 1
+    @return to-rem($values)
+
+  $rem-list: ()
+
+  @for $i from 1 through $values-list
+    $rem-list: append($rem-list, to-rem(nth($values, $i)))
+
+  @return $rem-list

docs/assets/base/_global.sass

@@ -0,0 +1,38 @@
+$primary-color: #41B883
+
+$secondary-color: #374853
+$secondary-lighten-color: #939EA5
+$tertiary-color: #F3F3F3
+$quaternary-color: #bbb
+
+$bright-grey-color: #E8E8E8
+
+$error-color: #f04124
+$success-color: #43AC6A
+$alert-color: #f08a24
+$info-color: #5fadd6
+
+$global-radius: 5px
+
+// z-index stack concept
+// Please go to utils/_z-stack.scss for easy config
+// .sass syntax lacks multiline list declarations ;(
+
+
+// global
+$global-font-size: 16px
+$global-font: 'Lato', sans-serif
+$global-font-secondary: 'Dosis', sans-serif
+$global-font-weight-light: 300
+$global-font-weight: 300
+$global-font-weight-bold: 700
+$global-font-weight-black: 700
+$global-font-color: $secondary-color
+$global-font-inverted: #fff
+$global-background: #fff
+$global-support-background: #fafafa
+$global-grid-columns: 12
+$global-page-width: 1400px
+$global-gutter: 40px
+$global-v-gutter: 30px
+$global-topbar-height: 70px

docs/assets/base/_media.sass

@@ -0,0 +1,23 @@
+$screen: "only screen" !default
+
+$small: 640px
+$medium: 1024px
+$large: 1440px
+$xlarge: 1920px
+
+$landscape: "#{$screen} and (orientation: landscape)"
+$portrait: "#{$screen} and (orientation: portrait)"
+
+$small-up: $screen !default
+$small-only: "#{$screen} and (max-width: #{$small})" !default
+
+$medium-up: "#{$screen} and (min-width: #{$small})" !default
+$medium-only: "#{$screen} and (min-width: #{$small}) and (max-width: #{$medium})" !default
+
+$large-up: "#{$screen} and (min-width: #{$medium})" !default
+$large-only: "#{$screen} and (min-width: #{$medium}) and (max-width: #{$large})" !default
+
+$xlarge-up: "#{$screen} and (min-width: #{$large})" !default
+$xlarge-only: "#{$screen} and (min-width: #{$large}) and (max-width: #{$xlarge})" !default
+
+$xxlarge-up: "#{$screen} and (min-width: #{$xlarge})" !default

docs/assets/base/_mixins.sass

@@ -0,0 +1,33 @@
+@mixin clearfix
+  &:before,
+  &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+
+@mixin spinner($size: 16px, $color: #333, $border-width: 2px)
+  width: rem($size)
+
+  &:before,
+  &:after
+    position: absolute
+    content: ''
+    top: 50%
+    left: 50%
+    margin: rem($size / -2 0 0 $size / -2)
+    width: rem($size)
+    height: rem($size)
+    border-radius: 100%
+    border-color: $color transparent transparent
+    border-style: solid
+    border-width: $border-width
+    box-shadow: 0 0 0 1px transparent
+
+  &:before
+    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62)
+    animation-iteration-count: infinite
+
+  &:after
+    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8)
+    animation-iteration-count: infinite