main component & postcss (vuejs/vue#4332)

Author: qighliu29

package.json

@@ -16,6 +16,7 @@
   "author": "swatekh",
   "license": "MIT",
   "devDependencies": {
+    "autoprefixer": "^7.1.4",
     "babel-minify-webpack-plugin": "^0.2.0",
     "bootstrap-loader": "^2.2.0",
     "clean-webpack-plugin": "^0.1.16",
@@ -33,6 +34,7 @@
     "html-webpack-template-pug": "^1.1.1",
     "imports-loader": "^0.7.1",
     "node-sass": "4.0.0",
+    "postcss-loader": "^2.0.6",
     "pug": "^2.0.0-rc.4",
     "pug-loader": "^2.3.0",
     "resolve-url-loader": "^2.1.0",
@@ -56,6 +58,7 @@
   },
   "dependencies": {
     "bootstrap-sass": "^3.3.7",
+    "bourbon": "^4.3.4",
     "jquery": "^3.2.1",
     "vue": "^2.4.4"
   }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        // to edit target browsers: use "browserslist" field in package.json
+        autoprefixer: {},
+    },
+};
+

src/App.vue

@@ -1,11 +1,18 @@
 <template>
     <!-- <nav class="navbar navbar-default" :class="{'navbar-fixed-top': top}">
     </nav> -->
-    <wl-slide-out-menu v-bind="menu" :loc="'left'"></wl-slide-out-menu>
+    <div>
+        <wl-nav-menu v-bind="menu" :loc="'left'"></wl-nav-menu>
+        <wl-main-panel>
+            <wl-top-nav-bar slot="header"></wl-top-nav-bar>
+        </wl-main-panel>
+    </div>
 </template>
 
 <script>
-import WlSlideOutMenu from './components/SlideOutMenu.vue';
+import WlNavMenu from './components/NavMenu.vue';
+import WlMainPanel from './components/MainPanel.vue';
+import WlTopNavBar from './components/TopNavBar.vue';
 
 export default {
     props: ['top'],
@@ -30,7 +37,9 @@ export default {
         }
     }),
     components: {
-        WlSlideOutMenu
+        WlNavMenu,
+        WlMainPanel,
+        WlTopNavBar
     }
 }
 </script>

src/assets/style/resources.scss

@@ -1,13 +1 @@
-@mixin padding($top, $right, $bottom, $left) {
-    padding-bottom: $bottom;
-    padding-left: $left;
-    padding-right: $right;
-    padding-top: $top;
-}
-
-@mixin margin($top, $right, $bottom, $left) {
-    margin-bottom: $bottom;
-    margin-left: $left;
-    margin-right: $right;
-    margin-top: $top;
-}
+@import '~bourbon/app/assets/stylesheets/bourbon';

src/components/MainPanel.vue

@@ -0,0 +1,43 @@
+<template>
+    <main :class="{ 'shrink': shrink }">
+        <slot name="header" v-on:toggleShrink="slide()"></slot>
+        <slot name="content" @toggleShrink="slide()"></slot>
+        <slot name="footer" @toggleShrink="slide()"></slot>
+    </main>
+</template>
+
+<script>
+export default {
+    data: () => ({
+        shrink: false
+    }),
+    methods: {
+        slide() {
+            this.shrink = !this.shrink;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+main {
+    position: relative;
+    z-index: 1;
+    transition: transform 300ms;
+
+    width: 500px;
+    height: 500px;
+    background-color:cyan;
+
+    input {
+        position: absolute;
+        left: auto;
+        right: 10px;
+    }
+
+    &.shrink {
+        transform: translateX(-400px);
+    }
+}
+</style>
+

src/components/SlideOutMenu.vue renamed to src/components/NavMenu.vue

@@ -26,10 +26,10 @@ export default {
 <style lang="scss" scoped>
 nav {
     position: fixed;
+    z-index: 0;
 
     ul {
         list-style: none;
-        @include margin(1em, 0, 0, 0);
     }
 
     &.left {

src/components/TopNavBar.vue

@@ -0,0 +1,13 @@
+<template>
+    <input type="button" value="child toggle" @click="slide()" />
+</template>
+
+<script>
+export default {
+    methods: {
+        slide() {
+            this.$emit('toggleShrink');
+        }
+    }
+}
+</script>

webpack.config.js

@@ -44,6 +44,7 @@ const commonConfig = {
                         scss: [
                             'vue-style-loader',
                             'css-loader',
+                            'postcss-loader',
                             'sass-loader',
                             {
                                 loader: 'sass-resources-loader',

yarn.lock

@@ -268,7 +268,7 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^7.1.2:
+autoprefixer@^7.1.2, autoprefixer@^7.1.4:
   version "7.1.4"
   resolved "http://registry.npm.taobao.org/autoprefixer/download/autoprefixer-7.1.4.tgz#960847dbaa4016bc8e8e52ec891cbf8f1257a748"
   dependencies:
@@ -676,6 +676,10 @@ bootstrap-sass@^3.3.7:
   version "3.3.7"
   resolved "http://registry.npm.taobao.org/bootstrap-sass/download/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
+bourbon@^4.3.4:
+  version "4.3.4"
+  resolved "http://registry.npm.taobao.org/bourbon/download/bourbon-4.3.4.tgz#4da380029e92c0c8f9764c779451a134b11e7cc3"
+
 brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -3938,7 +3942,7 @@ postcss-less@^1.1.0:
   dependencies:
     postcss "^5.2.16"
 
-postcss-load-config@^1.1.0:
+postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "http://registry.npm.taobao.org/postcss-load-config/download/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
   dependencies:
@@ -3961,6 +3965,15 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
+postcss-loader@^2.0.6:
+  version "2.0.6"
+  resolved "http://registry.npm.taobao.org/postcss-loader/download/postcss-loader-2.0.6.tgz#8c7e0055a3df1889abc6bad52dd45b2f41bbc6fc"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.2"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.3.0"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "http://registry.npm.taobao.org/postcss-media-query-parser/download/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -4168,7 +4181,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.7, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.7, postcss@^6.0.8:
   version "6.0.12"
   resolved "http://registry.npm.taobao.org/postcss/download/postcss-6.0.12.tgz#6b0155089d2d212f7bd6a0cecd4c58c007403535"
   dependencies: