coreui · xidedix · Oct 3, 2018 · Oct 3, 2018 · Oct 3, 2018 · Oct 3, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,22 @@
+### [@coreui/vue](https://coreui.io/) changelog
+
+##### v2.0.1
+- fix(SidebarNav): dirty fix for `rtl` ps scrolling issue
+- refactor(SidebarMinimizer): extract `togglePs` mixin
+- update `@vue/test-utils` to `^1.0.0-beta.25`
+- update `babel-eslint` to `^10.0.1`
+- update `babel-jest` to `^23.6.0`
+- update `eslint` to `^5.6.1`
+- update `eslint-config-prettier` to `^3.1.0`
+- update `eslint-plugin-html` to `^4.0.6`
+- update `eslint-plugin-jest` to `^21.24.1`
+- update `eslint-plugin-prettier` to `^3.0.0`
+- update `husky` to `^1.1.0`
+- update `jest` to `^23.6.0`
+- update `lint-staged` to `^7.3.0`
+- update `lodash` to `^4.17.11`
+- update `prettier` to `^1.14.3`
+- update `rollup-plugin-filesize` to `^4.0.1`
+- update `rollup-plugin-json` to `^3.1.0`
+- update `rollup-plugin-node-resolve` to `^3.4.0`
+- update `vue-loader` to `^15.4.2`
diff --git a/README.md b/README.md
@@ -3,8 +3,8 @@
 [![Npm badge](https://img.shields.io/npm/v/@coreui/vue.svg)][npm]
 [![NPM downloads][npm-download]][npm]
 ![Rollup badge](https://img.shields.io/badge/Rollup-^0.59.4-ff69b4.svg)
-![Jest](https://img.shields.io/badge/Jest-^22.4.4-blue.svg)
-![Vue](https://img.shields.io/badge/Vue-^2.5.16-brightgreen.svg)
+![Jest](https://img.shields.io/badge/Jest-^23.6.0-blue.svg)
+![Vue](https://img.shields.io/badge/Vue-^2.5.17-brightgreen.svg)
 
 [npm]: https://www.npmjs.com/package/@coreui/vue
 [npm-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "CoreUI Vue Bootstrap 4 layout components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
   "module": "dist/coreui-vue.esm.js",
@@ -63,49 +63,52 @@
     "vue-perfect-scrollbar": "^0.1.0"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.24",
+    "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
     "babel-plugin-dynamic-import-node": "^2.1.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-preset-vue-app": "^2.0.0",
-    "eslint": "^5.4.0",
-    "eslint-config-prettier": "^3.0.1",
+    "eslint": "^5.6.1",
+    "eslint-config-prettier": "^3.1.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-html": "^4.0.5",
+    "eslint-plugin-html": "^4.0.6",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-prettier": "^2.6.2",
+    "eslint-plugin-jest": "^21.24.1",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
-    "husky": "^0.14.3",
-    "jest": "^23.5.0",
+    "husky": "^1.1.0",
+    "jest": "^23.6.0",
     "jest-serializer-html": "^5.0.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-vue-preprocessor": "^1.4.0",
-    "lint-staged": "^7.2.2",
-    "lodash": "^4.17.10",
+    "lint-staged": "^7.3.0",
+    "lodash": "^4.17.11",
     "node-sass": "^4.9.3",
-    "prettier": "^1.14.2",
+    "prettier": "^1.14.3",
     "rollup": "^0.59.4",
     "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-filesize": "^1.5.0",
-    "rollup-plugin-json": "^3.0.0",
+    "rollup-plugin-commonjs": "^9.1.8",
+    "rollup-plugin-filesize": "^4.0.1",
+    "rollup-plugin-json": "^3.1.0",
     "rollup-plugin-license": "^0.7.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
     "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.1.0",
     "uglify-es": "^3.3.9",
     "vue": "^2.5.17",
     "vue-jest": "^2.6.0",
-    "vue-loader": "^15.4.1",
+    "vue-loader": "^15.4.2",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.17",
     "vue-template-compiler": "^2.5.17"
   },
+  "peerDependencies": {
+    "@coreui/coreui": "^2.0.14"
+  },
   "lint-staged": {
     "*.{js,vue}": [
       "eslint --fix",

diff --git a/src/components/Sidebar/SidebarMinimizer.vue b/src/components/Sidebar/SidebarMinimizer.vue
@@ -2,17 +2,24 @@
   <button class="sidebar-minimizer" type="button" @click="onClick()"></button>
 </template>
 <script>
+import { togglePs } from '../../mixins/togglePs'
 
 export default {
   name: 'sidebar-minimizer',
+  mixins: [ togglePs ],
+  mounted: function () {
+    const isMinimized = document.body.classList.contains('sidebar-minimized')
+    this.togglePs(!isMinimized)
+  },
   methods: {
     onClick () {
       this.sidebarMinimize()
       this.brandMinimize()
     },
     sidebarMinimize () {
-      document.body.classList.toggle('sidebar-minimized')
-      document.querySelector('.sidebar-nav section').classList.toggle('ps')
+      const isMinimized = document.body.classList.toggle('sidebar-minimized')
+      this.$emit('cui-sidebar-minimize', isMinimized)
+      this.togglePs(!isMinimized)
     },
     brandMinimize () {
       document.body.classList.toggle('brand-minimized')

diff --git a/src/components/Sidebar/SidebarNav.vue b/src/components/Sidebar/SidebarNav.vue
@@ -1,47 +1,47 @@
 <template>
   <nav class="sidebar-nav">
     <VuePerfectScrollbar class="scroll-area" :settings="psSettings" @ps-scroll-y="scrollHandle">
-    <ul class="nav">
-      <template v-for="(item, index) in navItems">
-        <template v-if="item.title">
-          <SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
-        </template>
-        <template v-else-if="item.divider">
-          <SidebarNavDivider :key="index" :classes="item.class"/>
-        </template>
-        <template v-else-if="item.label">
-          <SidebarNavLabel :key="index" :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
-        </template>
-        <template v-else>
-          <template v-if="item.children">
-            <!-- First level dropdown -->
-            <SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
-              <template v-for="(childL1, index1) in item.children">
-                <template v-if="childL1.children">
-                  <!-- Second level dropdown -->
-                  <SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
-                    <li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
-                      <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
-                    </li>
-                  </SidebarNavDropdown>
-                </template>
-                <template v-else>
-                  <SidebarNavItem :key="index1" :classes="item.class">
-                    <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
-                  </SidebarNavItem>
-                </template>
-              </template>
-            </SidebarNavDropdown>
+      <ul class="nav">
+        <template v-for="(item, index) in navItems">
+          <template v-if="item.title">
+            <SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
+          </template>
+          <template v-else-if="item.divider">
+            <SidebarNavDivider :key="index" :classes="item.class"/>
+          </template>
+          <template v-else-if="item.label">
+            <SidebarNavLabel :key="index" :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
           </template>
           <template v-else>
-            <SidebarNavItem :key="index" :classes="item.class">
-              <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
-            </SidebarNavItem>
+            <template v-if="item.children">
+              <!-- First level dropdown -->
+              <SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
+                <template v-for="(childL1, index1) in item.children">
+                  <template v-if="childL1.children">
+                    <!-- Second level dropdown -->
+                    <SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
+                      <li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
+                      </li>
+                    </SidebarNavDropdown>
+                  </template>
+                  <template v-else>
+                    <SidebarNavItem :key="index1" :classes="item.class">
+                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
+                    </SidebarNavItem>
+                  </template>
+                </template>
+              </SidebarNavDropdown>
+            </template>
+            <template v-else>
+              <SidebarNavItem :key="index" :classes="item.class">
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
+              </SidebarNavItem>
+            </template>
           </template>
         </template>
-      </template>
-    </ul>
-    <slot></slot>
+      </ul>
+      <slot></slot>
     </VuePerfectScrollbar>
   </nav>
 </template>
@@ -74,11 +74,15 @@ export default {
     VuePerfectScrollbar
   },
   data () {
-    return {
-      psSettings: {
+    return {}
+  },
+  computed: {
+    psSettings: () => {
+      // ToDo: find better rtl fix
+      return {
         maxScrollbarLength: 200,
         minScrollbarLength: 40,
-        suppressScrollX: true,
+        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
         wheelPropagation: false,
         interceptRailY: styles => ({ ...styles, height: 0 })
       }

diff --git a/src/mixins/togglePs.js b/src/mixins/togglePs.js
@@ -0,0 +1,19 @@
+const togglePs = {
+  methods: {
+    togglePs(toggle) {
+      const sidebar = document.querySelector('.sidebar-nav section')
+      if (sidebar) {
+        // sidebar.classList.toggle('ps', toggle);
+        // sidebar.classList.toggle('ps-container', toggle);
+        // sidebar.classList.toggle('ps--active-y', toggle);
+        if (toggle) {
+          sidebar.classList.add('ps', 'ps-container', 'ps--active-y')
+        } else {
+          sidebar.classList.remove('ps', 'ps-container', 'ps--active-y')
+        }
+      }
+    }
+  }
+}
+
+export { togglePs }