Updated dependencies and replaced vue-strap with uiv

Author: mtorromeo

.babelrc

@@ -1,17 +1,17 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false,
       "targets": {
         "browsers": ["last 2 major versions", "not ie <= 10"]
       }
     }]
   ],
   "plugins": [
-    "transform-regenerator",
-    "transform-runtime",
-    "syntax-async-functions",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread"
+    "@babel/plugin-transform-regenerator",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-transform-async-to-generator",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }

CHANGELOG.md

@@ -1,16 +1,24 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
-## [0.0.16]
+## [0.0.17] - 2018-10-19
+### Added
+- Added `pf-dropdown` component with is a very small functional wrapper around uiv's dropdown, to provide DRYer dropdown for the most common usage pattern.
+
+### Changed
+- **BACKWARD INCOMPATIBLE CHANGE**: Removed vue-strap, which is unmantained and deprecated and replace it with uiv.
+- **BACKWARD INCOMPATIBLE CHANGE**: Bootstrap components are now registered without the `bs-` prefix to stay consistent with uiv's own documentation.
+
+## [0.0.16] - 2018-04-13
 ### Fixed
 - Fixed flex layout.
 
-## [0.0.15]
+## [0.0.15] - 2018-04-13
 ### Fixed
 - Prevent custom layout distruption when not `pf-layout` is disabled.
 - Removed bottom padding on `pf-table`.
 
-## [0.0.14]
+## [0.0.14] - 2018-04-13
 ### Added
 - Implemented `pf-menu-item` as a functional component with vue-router integration.
 - Implemented secondary and tertiary vertical navigation.
@@ -33,7 +41,7 @@ All notable changes to this project will be documented in this file.
 - Fixed href property of `pf-launcher-item`s.
 - Fixed various linting errors/warnings.
 
-## [0.0.13]
+## [0.0.13] - 2017-09-11
 ### Added
 - Implemented `v-model` on the page property `pf-paginate-control` components.
 - Implemented two-way syncing of `sort-by` and `sort-direction` properties in `pf-table` and `pf-toolbar`.
@@ -166,7 +174,8 @@ disabled, as per PatternFly design guidelines.
 - `pf-toolbar` component
 - `pf-utilization-bar-chart` component
 
-[Unreleased]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.16...HEAD
+[Unreleased]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.17...HEAD
+[0.0.17]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.16...v0.0.17
 [0.0.16]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.15...v0.0.16
 [0.0.15]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.14...v0.0.15
 [0.0.14]: https://github.com/mtorromeo/vue-patternfly/compare/v0.0.13...v0.0.14

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-patternfly",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "PatternFly components for Vue.js 2",
   "main": "dist/vue-patternfly.min.js",
   "directories": {
@@ -11,7 +11,7 @@
     "compile": "webpack --mode production --progress && mv dist/vue-patternfly.js dist/vue-patternfly.min.js && webpack --mode development --progress",
     "dev": "webpack --mode development -w --progress",
     "build": "npm run purge && npm run compile",
-    "lint": "eslint src/*.js test/*",
+    "lint": "eslint src/*.js",
     "prepublish": "npm run lint && npm run build"
   },
   "files": [
@@ -37,24 +37,26 @@
   },
   "dependencies": {
     "c3": "^0.4.11",
+    "es6-promise": "^4.2.5",
     "patternfly": "^3.14.0",
     "tether-tooltip": "^1.2.0",
-    "vue": "^2.5.13",
-    "vue-strap": "yuche/vue-strap#v2"
+    "uiv": "^0.27.0",
+    "vue": "^2.5.13"
   },
   "devDependencies": {
-    "babel-core": "^6.22.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-syntax-async-functions": "^6.13.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.0",
-    "eslint": "^4.6.1",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "@babel/plugin-transform-destructuring": "^7.1.3",
+    "@babel/plugin-transform-regenerator": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/runtime": "^7.1.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.0",
+    "eslint": "^5.7.0",
     "eslint-friendly-formatter": "^4.0.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-import": "^2.2.0",
@@ -66,12 +68,12 @@
     "mini-css-extract-plugin": "^0.4.0",
     "portal-vue": "^1.3.0",
     "resize-observer-polyfill": "^1.5.0",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.23.1",
     "vue-functional-data-merge": "^2.0.6",
-    "vue-loader": "^14.2.2",
+    "vue-loader": "^15.4.2",
     "vue-portal": "^1.0.0",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^4.5.0",
-    "webpack-cli": "^2.0.14"
+    "webpack-cli": "^3.1.2"
   }
 }

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {};

src/components/C3Chart.vue

@@ -11,7 +11,7 @@
 
 <script>
 import c3 from 'c3';
-const patternfly = require('imports-loader?patternfly=>{}!exports-loader?patternfly!patternfly/dist/js/patternfly-settings-colors.js');
+const patternfly = require('imports-loader?window=>{patternfly:{}}!exports-loader?window.patternfly!patternfly/dist/js/patternfly-settings-colors.js');
 const palette = [
   patternfly.pfPaletteColors.red,
   patternfly.pfPaletteColors.blue,

src/components/Card.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="card-pf" :class="{'card-pf-accented': accented}">
   <div v-if="showHeader" :class="{'card-pf-heading': showTitlesSeparator, 'card-pf-heading-no-bottom': !showTitlesSeparator}">
-    <dropdown v-if="showFilterInHeader" class="card-pf-time-frame-filter pull-right" :text="currentFilter.label">
+    <pf-dropdown v-if="showFilterInHeader" class="card-pf-time-frame-filter pull-right" :text="currentFilter.label">
       <li
         v-for="(item, i) in filter.filters"
         :key="i"
@@ -11,7 +11,7 @@
           {{item.label}}
         </a>
       </li>
-    </dropdown>
+    </pf-dropdown>
     <h2 class="card-pf-title">{{title}}</h2>
   </div>
 
@@ -22,7 +22,7 @@
   </div>
 
   <div v-if="showFooter || showFilterInFooter" class="card-pf-footer">
-    <dropdown v-if="showFilterInFooter" class="card-pf-time-frame-filter pull-right" :text="currentFilter.label">
+    <pf-dropdown v-if="showFilterInFooter" class="card-pf-time-frame-filter pull-right" :text="currentFilter.label">
       <li
         v-for="(item, i) in filter.filters"
         :key="i"
@@ -32,7 +32,7 @@
           {{item.label}}
         </a>
       </li>
-    </dropdown>
+    </pf-dropdown>
     <p v-if="showFooter">
       <a v-if="footHref" :href="footHref" :class="{'card-pf-link-with-icon': footIcon, 'card-pf-link': !footIcon}">
         <pf-icon v-if="footIcon" :name="footIcon" class="cart-pf-footer-text"/>
@@ -48,13 +48,13 @@
 </template>
 
 <script>
-import VueStrap from '../vue-strap';
+import PfDropdown from './Dropdown.vue';
 
 export default {
   name: 'pf-card',
 
   components: {
-    dropdown: VueStrap.dropdown,
+    PfDropdown,
   },
 
   props: {

src/components/ColumnPicker.vue

@@ -1,32 +1,28 @@
 <template>
-  <bs-popover class="column-picker" effect="fade" placement="bottom">
-    <button type="button" class="btn btn-link">
+  <popover class="column-picker" placement="bottom">
+    <button ref="popover-trigger" type="button" class="btn btn-link">
       <pf-icon name="fa-columns"/>
     </button>
 
-    <div
-      slot="content"
-      v-for="(column, i) in columns"
-      :key="i"
-      class="checkbox"
-      @click.stop
-    >
-      <label>
-        <input type="checkbox" :value="columnValue(column, i)" v-model="iValue" @change="setValue">
-        {{column}}
-      </label>
-    </div>
-  </bs-popover>
+    <template slot="popover">
+      <div class="column-picker checkbox" v-for="(column, i) in columns" :key="i">
+        <label>
+          <input type="checkbox" :value="columnValue(column, i)" v-model="iValue" @change="setValue">
+          {{column}}
+        </label>
+      </div>
+    </template>
+  </popover>
 </template>
 
 <script>
-import VueStrap from '../vue-strap';
+import {Popover} from 'uiv';
 
 export default {
   name: 'pf-column-picker',
 
   components: {
-    BsPopover: VueStrap.popover,
+    Popover,
   },
 
   props: {
@@ -81,7 +77,7 @@ export default {
 </script>
 
 <style>
-.column-picker .popover-content .checkbox {
+.column-picker.checkbox {
   margin: 0;
 }
 </style>

src/components/DrawerNotification.vue

@@ -3,27 +3,25 @@
   class="drawer-pf-notification"
   :class="{unread, 'expanded-notification': $parent.$parent.expanded}"
 >
-  <bs-dropdown v-if="showDropdown" class="pull-right dropdown-kebab-pf" type="link">
-    <slot name="dropdown" :actions="actions">
-      <li
-        v-for="action in actions"
-        :key="action.name"
-        :role="isSeparator(action) ? 'separator' : 'menuitem'"
-        :class="{
-          divider: isSeparator(action),
-          disabled: action.disabled === true,
-        }"
+  <pf-dropdown v-if="showDropdown" class="pull-right dropdown-kebab-pf" type="link">
+    <li
+      v-for="action in actions"
+      :key="action.name"
+      :role="isSeparator(action) ? 'separator' : 'menuitem'"
+      :class="{
+        divider: isSeparator(action),
+        disabled: action.disabled === true,
+      }"
+    >
+      <a v-if="!isSeparator(action)"
+        class="secondary-action"
+        :title="action.title"
+        @click="triggered(action)"
       >
-        <a v-if="!isSeparator(action)"
-          class="secondary-action"
-          :title="action.title"
-          @click="triggered(action)"
-        >
-          {{action.name}}
-        </a>
-      </li>
-    </slot>
-  </bs-dropdown>
+        {{action.name}}
+      </a>
+    </li>
+  </pf-dropdown>
 
   <button
     type="button"
@@ -50,13 +48,13 @@
 </template>
 
 <script>
-import VueStrap from '../vue-strap';
+import PfDropdown from './Dropdown.vue';
 
 export default {
   name: 'pf-drawer-notification',
 
   components: {
-    BsDropdown: VueStrap.dropdown,
+    PfDropdown,
   },
 
   props: {

src/components/Dropdown.vue

@@ -0,0 +1,33 @@
+<template functional>
+  <dropdown v-bind="data.attrs" v-on="listeners" :class="[data.staticClass]">
+    <button role="button" aria-haspopup="true" type="button" class="btn dropdown-toggle" :class="[props.type ? `btn-${props.type}` : '', props.btnClass]">
+      <slot name="text">
+        <span class="dropdown-title">{{props.text}}</span>
+      </slot> <span class="caret"></span>
+    </button>
+    <template slot="dropdown">
+      <slot/>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import {Dropdown} from 'uiv';
+
+export default {
+  name: 'pf-dropdown',
+
+  components: {
+    Dropdown,
+  },
+
+  props: {
+    text: String,
+    type: {
+      type: String,
+      default: 'default',
+    },
+    btnClass: String,
+  },
+};
+</script>

src/components/FilterFields.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="filter-pf filter-fields form-group toolbar-pf-filter">
   <div class="input-group">
-    <bs-dropdown :text="current.label" class="input-group-btn">
+    <pf-dropdown :text="current.label" class="input-group-btn">
       <li v-for="(item, name) in normFields" :key="name">
         <a class="filter-field" role="menuitem" tabindex="-1" @click="selected = name">
           {{item.label}}
         </a>
       </li>
-    </bs-dropdown>
+    </pf-dropdown>
     <pf-select close-on-select class="filter-select" v-if="isSelect" :placeholder="current.placeholder">
       <pf-option :checked-value="item" v-for="(item, i) in current.values" :key="i" @input="set">{{item}}</pf-option>
     </pf-select>
@@ -28,13 +28,13 @@
 <script>
 import PfSelect from './Select.vue';
 import PfOption from './Option.vue';
-import VueStrap from '../vue-strap';
+import PfDropdown from './Dropdown.vue';
 
 export default {
   name: 'pf-filter-fields',
 
   components: {
-    BsDropdown: VueStrap.dropdown,
+    PfDropdown,
     PfSelect,
     PfOption,
   },