npm - @carbon/vue - Versions diffs - 1.0.0 → 1.1.1 - Mend

@carbon/vue 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/dist/demo.html CHANGED Viewed

@@ -11,13 +11,13 @@
     />
     <link rel="stylesheet" href="./carbon-vue.css" />
     <style>
-      body {
+      .body {
         padding: 40px;
         background-color: #fff;
       }
     </style>
   </head>
-  <body>
+  <body class="body">
     <div id="app">Test</div>
     <script>

package/package.json CHANGED Viewed

@@ -1,8 +1,11 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=10.x"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
@@ -43,6 +46,10 @@
     {
       "name": "Oleksandr Sabov",
       "email": "sabov@de.ibm.com"
+    },
+    {
+      "name": "Conrad Schmidt",
+      "email": "conrad.schmidt@de.ibm.com"
     }
   ],
   "files": [
@@ -51,27 +58,32 @@
   ],
   "sideEffects": true,
   "scripts": {
+    "build": "npm run build:core && npm run build:data-viz",
+    "lint": "vue-cli-service lint ./src/index.js",
+    "build:core": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean",
+    "build:data-viz": "vue-cli-service build --target lib --name carbon-data-viz-vue ./src/index-data-viz.js --no-clean",
     "ci-check": "yarn format:diff",
     "format": "prettier --write \"**/*.{scss,css,js,md,vue}\"",
     "format:diff": "prettier --list-different \"**/*.{scss,css,js,md,vue}\"",
+    "format:staged": "prettier --write",
+    "lint:css": "stylelint 'src/**/*.{vue,scss}'",
     "lint:es": "eslint --ext .js,.vue src",
-    "lint:css": "stylelint 'src/**/*.vue'",
+    "lint:style": "vue-cli-service lint:style",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook-build": "build-storybook",
-    "build": "npm run build:core && npm run build:data-viz",
-    "build:core": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean",
-    "build:data-viz": "vue-cli-service build --target lib --name carbon-data-viz-vue ./src/index-data-viz.js --no-clean",
-    "lint": "vue-cli-service lint ./src/index.js",
     "test:unit": "vue-cli-service test:unit"
   },
   "peerDependencies": {},
   "dependencies": {
+    "@carbon/icon-helpers": "0.0.1-beta.0",
+    "@carbon/icons-vue": "0.0.1-beta.0",
     "carbon-components": "^9.48.1",
     "d3": "^5.7.0",
     "flatpickr": "4.5.1",
     "vue": "^2.5.21"
   },
   "devDependencies": {
+    "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.2",
     "@babel/core": "^7.2.2",
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
@@ -90,7 +102,8 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
     "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
+    "babel-plugin-transform-object-from-destructuring": "^1.0.3",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-vue": "^2.0.2",
     "eslint": "^5.10.0",
@@ -126,7 +139,7 @@
   },
   "lint-staged": {
     "*.{scss,css,js,md,vue}": [
-      "yarn format",
+      "yarn format:staged",
       "git add"
     ]
   },

package/src/_internal/_feature-flags.js ADDED Viewed

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * This file contains the list of the default values of compile-time feature flags.
+ *
+ * Build toolchain can replace variable here and/or the references
+ * in order to apply non-default values to those feature flags.
+ *
+ * @example <div v-if="aFeatureFlag">foo</div><div v-else>bar</div>
+ * import { aFeatureFlag } from '/path/to/_feagure-flags';
+ * ...
+ * data() { return { aFeatureFlag } }
+ */
+/**
+ * Breaking changes for next release.
+ */
+export let breakingChangesX;
+/**
+ * Next gen of Carbon component design.
+ */
+export let componentsX;
+export const override = val => {
+  if (val) {
+    breakingChangesX = val.breakingChangesX === true;
+    componentsX = val.componentsX === true;
+  }
+};
+export const reset = () => {
+  componentsX = false;
+  breakingChangesX = false;
+};
+reset();

package/src/components/cv-accordion/_cv-accordion-item-skeleton.vue CHANGED Viewed

@@ -4,7 +4,9 @@
     :class="{ 'bx--accordion__item--active': open }"
   >
     <button disabled type="button" class="bx--accordion__heading">
+      <ChevronRight16 v-if="componentsX" class="bx--accordion__arrow" />
       <svg
+        v-else
         class="bx--accordion__arrow"
         width="8"
         height="12"
@@ -23,15 +25,23 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
+import { componentsX } from '../../_internal/_feature-flags';
+import ChevronRight16 from '@carbon/icons-vue/lib/chevron--right/16';
 export default {
   name: 'CvAccordionItemSkeleton',
   components: {
+    ChevronRight16,
     CvSkeletonText,
   },
   props: {
     open: { type: Boolean, default: false },
   },
+  data() {
+    return {
+      componentsX,
+    };
+  },
 };
 </script>

package/src/components/cv-accordion/cv-accordion-item.vue CHANGED Viewed

@@ -18,7 +18,9 @@
       :aria-controls="uid"
       @click="toggle"
     >
+      <ChevronRight16 v-if="componentsX" class="bx--accordion__arrow" />
       <svg
+        v-else
         class="bx--accordion__arrow"
         width="8"
         height="12"
@@ -38,11 +40,14 @@
 </template>
 <script>
+import { componentsX } from '../../_internal/_feature-flags';
+import ChevronRight16 from '@carbon/icons-vue/lib/chevron--right/16';
 import uidMixin from '../../mixins/uid-mixin';
 export default {
   name: 'CvAccordionItem',
   mixins: [uidMixin],
+  components: { ChevronRight16 },
   props: {
     open: { type: Boolean, default: false },
   },
@@ -56,6 +61,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataOpen: false,
     };
   },

package/src/components/cv-button/cv-button.vue CHANGED Viewed

@@ -10,8 +10,14 @@
     role="button"
   >
     <slot></slot>
-    <svg v-if="iconHref" class="bx--btn__icon">
-      <use :href="iconHref"></use>
+    <component
+      v-if="typeof icon === 'object'"
+      :is="icon"
+      class="bx--btn__icon"
+    />
+    <svg v-if="typeof icon === 'string' || iconHref" class="bx--btn__icon">
+      <use :href="icon || iconHref"></use>
     </svg>
   </button>
 </template>
@@ -20,7 +26,30 @@
 export default {
   name: 'CvButton',
   props: {
-    iconHref: { type: String, default: null },
+    icon: {
+      type: [String, Object],
+      default: null,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
+        }
+        return val.render !== null;
+      },
+    },
+    iconHref: {
+      type: String,
+      default: null,
+      validator(val) {
+        if (process.env.NODE_ENV === 'development') {
+          if (val !== null) {
+            console.warn(
+              'CvButton: iconHref deprecated in favour of icon to be removed in future versions.'
+            );
+          }
+        }
+        return true;
+      },
+    },
     kind: {
       type: String,
       default: 'primary',

package/src/components/cv-checkbox/_cv-checkbox-inner-form-item.vue CHANGED Viewed

@@ -10,7 +10,7 @@
 import CvCheckboxInner from './_cv-checkbox-inner';
 export default {
-  name: 'CvSelectInnerFormItem',
+  name: 'CvCheckboxInnerFormItem',
   components: { CvCheckboxInner },
   inheritAttrs: false,
 };

package/src/components/cv-checkbox/_cv-checkbox-inner.vue CHANGED Viewed

@@ -10,6 +10,7 @@
         },
       ]"
       :data-contained-checkbox-state="isChecked"
+      :data-contained-checkbox-disabled="$attrs.disabled"
     >
       <input
         ref="input"

package/src/components/cv-checkbox/cv-checkbox-skeleton.vue ADDED Viewed

@@ -0,0 +1,13 @@
+<template>
+  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
+    <label class="bx--checkbox-label bx--skeleton"></label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CvCheckboxSkeleton',
+};
+</script>
+<style lang="scss"></style>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue CHANGED Viewed

@@ -14,7 +14,9 @@
       aria-label="Copy code"
       @click="$emit('copy-code')"
     >
+      <Copy16 v-if="componentsX" class="bx--snippet__icon" />
       <svg
+        v-else
         class="bx--snippet__icon"
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -36,7 +38,9 @@
       @click="toggleExpand"
     >
       <span class="bx--snippet-btn--text">{{ expandButtonText }}</span>
+      <ChevronDown16 v-if="componentsX" class="bx--icon-chevron--down" />
       <svg
+        v-else
         class="bx--icon-chevron--down"
         width="12"
         height="7"
@@ -55,11 +59,16 @@
 <script>
 import CvFeedbackButton from './_cv-feedback-button';
+import { componentsX } from '../../_internal/_feature-flags';
+import Copy16 from '@carbon/icons-vue/lib/copy/16';
+import ChevronDown16 from '@carbon/icons-vue/lib/chevron--down/16';
 export default {
   name: 'CvCodeSnippetMultiline',
   components: {
     CvFeedbackButton,
+    Copy16,
+    ChevronDown16,
   },
   props: {
     lessText: { type: String, default: 'Show less' },
@@ -67,6 +76,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       expanded: false,
     };
   },

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue CHANGED Viewed

@@ -10,7 +10,9 @@
       aria-label="Copy code"
       @click="$emit('copy-code')"
     >
+      <Copy16 v-if="componentsX" class="bx--snippet__icon" />
       <svg
+        v-else
         class="bx--snippet__icon"
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -28,11 +30,19 @@
 <script>
 import CvFeedbackButton from './_cv-feedback-button';
+import { componentsX } from '../../_internal/_feature-flags';
+import Copy16 from '@carbon/icons-vue/lib/copy/16';
 export default {
   name: 'CvCodeSnippetOneline',
   components: {
     CvFeedbackButton,
+    Copy16,
+  },
+  data() {
+    return {
+      componentsX,
+    };
   },
 };
 </script>

package/src/components/cv-code-snippet/cv-code-snippet-skeleton.vue ADDED Viewed

@@ -0,0 +1,29 @@
+<template>
+  <div class="bx--snippet bx--skeleton" :class="typeClass">
+    <div class="bx--snippet-container">
+      <span v-if="!multi" />
+      <span v-if="multi" />
+      <span v-if="multi" />
+      <span v-if="multi" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CvCodeSnippetSkeleton',
+  props: {
+    kind: { type: String, default: 'oneline' },
+  },
+  computed: {
+    typeClass() {
+      return `bx--snippet--${this.multi ? 'multi' : 'single'}`;
+    },
+    multi() {
+      return this.kind === 'multiline';
+    },
+  },
+};
+</script>
+<style lang="scss"></style>

package/src/components/cv-code-snippet/cv-code-snippet.vue CHANGED Viewed

@@ -9,7 +9,7 @@
     <!-- textarea cannot be fully hidden for clipboard to work -->
     <textarea
       class="cv-code-snippet__clippy"
-      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
+      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"
       aria-hidden="true"
       ref="clippy"
     ></textarea>

package/src/components/cv-content-switcher/cv-content-switcher-button.vue CHANGED Viewed

@@ -24,18 +24,44 @@
     :aria-selected="`${dataSelected}`"
     @click="open"
   >
-    <slot></slot>
+    <component
+      v-if="typeof icon === 'object'"
+      :is="icon"
+      class="bx--content-switcher__icon"
+    />
+    <svg
+      v-if="typeof icon === 'string'"
+      class="bx--content-switcher__icon"
+      height="16"
+      width="16"
+    >
+      <use :href="icon"></use>
+    </svg>
+    <span>
+      <slot></slot>
+    </span>
   </button>
 </template>
 <script>
 import uidMixin from '../../mixins/uid-mixin';
+import { componentsX } from '../../_internal/_feature-flags';
 export default {
   name: 'CvContentSwitcherButton',
   mixins: [uidMixin],
   props: {
     contentSelector: { type: String, default: undefined },
+    icon: {
+      type: [String, Object],
+      default: null,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
+        }
+        return val.render !== null;
+      },
+    },
     ownerId: { type: String, default: undefined },
     selected: Boolean,
   },
@@ -50,6 +76,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataSelected: false,
     };
   },

package/src/components/cv-content-switcher/cv-content-switcher.vue CHANGED Viewed

@@ -24,7 +24,7 @@ const toggleContent = (selector, on) => {
 export default {
   name: 'CvContentSwitcher',
   created() {
-    // add these on created otherwise cv:mounted is too early.
+    // add these on created otherwise cv:mounted is too late.
     this.$on('cv:open', srcComponent => this.onCvOpen(srcComponent));
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
     this.$on('cv:beforeDestroy', srcComponent =>

package/src/components/cv-data-table/cv-data-table.vue CHANGED Viewed

@@ -16,8 +16,8 @@
           </div>
           <div class="bx--batch-summary">
             <p class="bx--batch-summary__para">
-              <span data-items-selected>{{ rowChecks.length }}</span> items
-              selected
+              <span data-items-selected>{{ dataRowsSelected.length }}</span>
+              items selected
             </p>
             <button class="bx--batch-summary__cancel" @click="deselect">
               Cancel
@@ -70,7 +70,7 @@
               v-for="(row, rowIndex) in data"
               :key="`row:${rowIndex}`"
               :value="`${rowIndex}`"
-              ref="rowChecks"
+              ref="dataRowsSelected"
               :overflow-menu="overflowMenu"
             >
               <cv-data-table-cell
@@ -104,6 +104,8 @@ import CvDataTableHeadnig from './_cv-data-table-heading';
 import CvDataTableRow from './cv-data-table-row';
 import CvDataTableCell from './cv-data-table-cell';
+const rows = children => children.filter(child => child.isCvDataTableRow);
 export default {
   name: 'CvDataTable',
   components: {
@@ -131,6 +133,11 @@ export default {
     columns: { type: Array, required: true },
     data: { type: Array, requried: true },
     zebra: Boolean,
+    rowsSelected: { type: Array, default: () => [] },
+  },
+  model: {
+    prop: 'rows-selected',
+    event: 'row-select-changes',
   },
   data() {
     return {
@@ -142,7 +149,7 @@ export default {
         : this.columns,
       batchActive: false,
       headingChecked: false,
-      rowChecks: [],
+      dataRowsSelected: this.rowsSelected,
     };
   },
   watch: {
@@ -152,6 +159,9 @@ export default {
     columns() {
       this.watchColumns();
     },
+    rowsSelected() {
+      this.updateRowsSelected();
+    },
   },
   mounted() {
     console.warn(
@@ -159,6 +169,7 @@ export default {
         this.$vnode.componentOptions.Ctor.extendOptions.name
       } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
     );
+    this.updateRowsSelected();
   },
   computed: {
     hasBatchActions() {
@@ -190,10 +201,10 @@ export default {
       ) {
         return Math.min(
           this.internalPagination.numberOfItems,
-          this.data.length
+          rows(this.$children).length
         );
       } else {
-        return this.data.length;
+        return rows(this.$children).length;
       }
     },
     modifierClasses() {
@@ -213,41 +224,66 @@ export default {
       return index => this.columns[index].dataStyle;
     },
     selectedRows() {
-      return this.rowChecks.map(val => parseInt(val));
+      return this.dataRowsSelected;
     },
   },
   methods: {
-    onHeadingCheckChange() {
-      // check /uncheck all children
-      this.batchActive = this.headingChecked;
-      this.rowChecks = [];
+    updateRowsSelected() {
+      this.dataRowsSelected = [];
       for (const i in this.$children) {
         let child = this.$children[i];
         if (child.isCvDataTableRow) {
-          child.dataChecked = this.headingChecked;
+          child.dataChecked = this.rowsSelected.includes(child.value);
-          if (this.headingChecked) {
-            this.rowChecks.push(child.value);
+          if (child.dataChecked) {
+            this.dataRowsSelected.push(child.value);
           }
         }
       }
+      this.headingChecked =
+        this.dataRowsSelected.length ===
+        this.$children.filter(item => item.isCvDataTableRow).length;
+      this.batchActive = this.dataRowsSelected.length > 0;
+    },
+    onHeadingCheckChange() {
+      // check /uncheck all children
+      this.batchActive = this.headingChecked;
+      this.dataRowsSelected = [];
+      for (const child of rows(this.$children)) {
+        if (this.headingChecked) {
+          this.dataRowsSelected.push(child.value);
+        }
+        if (child.dataChecked !== this.headingChecked) {
+          child.dataChecked = this.headingChecked;
+          this.$emit('row-select-change', {
+            value: child.value,
+            selected: child.dataChecked,
+          });
+        }
+      }
+      this.$emit('row-select-changes', this.dataRowsSelected);
     },
     deselect() {
       this.headingChecked = false;
       this.onHeadingCheckChange();
     },
     onRowCheckChange(value, checked) {
-      let modelSet = new Set(this.rowChecks);
+      let modelSet = new Set(this.dataRowsSelected);
       if (!checked) {
         modelSet.delete(value);
       } else {
         modelSet.add(value);
       }
-      this.rowChecks = Array.from(modelSet);
+      this.dataRowsSelected = Array.from(modelSet);
+      this.headingChecked =
+        this.dataRowsSelected.length === rows(this.$children).length;
+      this.batchActive = this.dataRowsSelected.length > 0;
-      this.headingChecked = this.rowChecks.length === this.data.length;
-      this.batchActive = this.rowChecks.length > 0;
+      this.$emit('row-select-change', { value, selected: checked });
+      this.$emit('row-select-changes', this.dataRowsSelected);
     },
     onMenuItemClick(val) {
       this.$emit('overflow-menu-click', val);