@carbon/vue 1.0.2 → 1.1.3

package/src/components/cv-inline-notification/cv-inline-notification.vue

@@ -1,31 +1,24 @@
 <template>
   <div
-    data-inline-notification
+    data-notification
     class="cv-inline-notification bx--inline-notification"
     :class="`bx--inline-notification--${kind.toLowerCase()}`"
     v-on="$listeners"
-    :aria-role="isAlert ? 'alert' : false"
+    :role="isAlert ? 'alert' : false"
     :aria-live="!isAlert ? 'polite' : false"
   >
     <div class="bx--inline-notification__details">
-      <cv-icon
-        :href="`cv(${icon})`"
-        class="bx--inline-notification__icon"
-        width="16"
-        height="16"
-      ></cv-icon>
+      <component v-if="componentsX" :is="icon" class="bx--inline-notification__icon" />
+      <cv-icon v-else :href="`cv(${icon})`" class="bx--inline-notification__icon" width="16" height="16"></cv-icon>
       <div class="bx--inline-notification__text-wrapper">
         <p class="bx--inline-notification__title">{{ title }}</p>
         <p class="bx--inline-notification__subtitle">{{ subTitle }}.</p>
       </div>
     </div>
-    <button
-      type="button"
-      data-notification-btn
-      class="bx--inline-notification__close-button"
-      @click="$emit('close')"
-    >
+    <button type="button" data-notification-btn class="bx--inline-notification__close-button" @click="$emit('close')">
+      <Close16 v-if="componentsX" class="bx--inline-notification__close-icon" />
       <svg
+        v-else
         class="bx--inline-notification__close-icon"
         aria-label="close"
         width="10"
@@ -45,10 +38,20 @@
 <script>
 import notificationMixin from '../../mixins/notification-mixin';
 import CvIcon from '../cv-icon/_cv-icon';
+import { componentsX } from '../../internal/feature-flags';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
 
 export default {
   name: 'CvInlineNotification',
-  components: { CvIcon },
+  components: { CvIcon, Close16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   mixins: [notificationMixin],
   props: {
     kind: {
@@ -61,13 +64,13 @@ export default {
     icon() {
       switch (this.kind) {
         case 'error':
-          return 'icon--error--solid';
+          return componentsX ? ErrorFilled16 : 'icon--error--solid';
         case 'warning':
-          return 'icon--warning--solid';
+          return componentsX ? WarningAltFilled16 : 'icon--warning--solid';
         case 'success':
-          return 'icon--checkmark--solid';
+          return componentsX ? CheckmarkFilled16 : 'icon--checkmark--solid';
         default:
-          return 'icon--info--solid';
+          return componentsX ? null : 'icon--info--solid';
       }
     },
   },

package/src/components/cv-link/cv-link.vue

@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="tagType"
-    class="cv-link bx--link"
-    v-on="$listeners"
-    v-bind="$attrs"
-  >
+  <component :is="tagType" class="cv-link bx--link" v-on="$listeners" v-bind="$attrs">
     <slot></slot>
   </component>
 </template>

package/src/components/cv-loading/cv-loading.vue

@@ -11,13 +11,23 @@
     >
       <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
         <title>Loading</title>
-        <circle cx="0" cy="0" r="37.5"></circle>
+        <circle v-if="componentsX && small" class="bx--loading__background" cx="0" cy="0" r="37.5"></circle>
+        <circle
+          :class="{
+            'bx--loading__stroke': componentsX,
+          }"
+          cx="0"
+          cy="0"
+          r="37.5"
+        ></circle>
       </svg>
     </div>
   </div>
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+
 export default {
   name: 'CvLoading',
   props: {
@@ -29,13 +39,12 @@ export default {
     overlayClasses() {
       if (!this.overlay) return '';
 
-      return `bx--loading-overlay ${
-        this.stopped ? 'bx--loading-overlay--stop' : ''
-      }`;
+      return `bx--loading-overlay ${this.stopped ? 'bx--loading-overlay--stop' : ''}`;
     },
   },
   data() {
     return {
+      componentsX,
       stopped: false,
     };
   },

package/src/components/cv-modal/cv-modal.vue

@@ -16,7 +16,7 @@
         class="cv-modal__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusBeforeContent"
       />
       <div class="bx--modal-header">
@@ -27,21 +27,16 @@
           <slot name="title">Modal Title</slot>
         </h2>
         <button class="bx--modal-close" type="button" @click="hide" ref="close">
-          <cv-icon
-            class="bx--modal-close__icon"
-            href="cv(icon--close)"
-            height="10px"
-            width="10px"
-          ></cv-icon>
+          <Close16 v-if="componentsX" class="bx--modal-close__icon" />
+          <cv-icon v-else class="bx--modal-close__icon" href="cv(icon--close)" height="10px" width="10px"></cv-icon>
         </button>
       </div>
 
-      <div class="bx--modal-content">
+      <div class="bx--modal-content" ref="content">
         <slot name="content">
           <p>
-            Passive modal notifications should only appear if there is an action
-            the user needs to address immediately. Passive modal notifications
-            are persistent on the screen.
+            Passive modal notifications should only appear if there is an action the user needs to address immediately.
+            Passive modal notifications are persistent on the screen.
           </p>
         </slot>
       </div>
@@ -70,7 +65,7 @@
         class="cv-modal__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusAfterContent"
       />
     </div>
@@ -81,6 +76,8 @@
 import CvButton from '../cv-button/cv-button';
 import CvIcon from '../cv-icon/_cv-icon';
 import uidMixin from '../../mixins/uid-mixin';
+import Close16 from '@carbon/icons-vue/lib/close/16';
+import { componentsX } from '../../internal/feature-flags';
 
 export default {
   name: 'CvModal',
@@ -88,6 +85,7 @@ export default {
   components: {
     CvButton,
     CvIcon,
+    Close16,
   },
   props: {
     kind: {
@@ -99,6 +97,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataVisible: false,
     };
   },
@@ -119,14 +118,14 @@ export default {
   computed: {
     primaryKind() {
       if (this.kind === 'danger') {
-        return 'danger--primary';
+        return componentsX ? 'danger' : 'danger--primary';
       } else {
         return 'primary';
       }
     },
     secondaryKind() {
       if (this.kind === 'danger') {
-        return 'tertiary';
+        return componentsX ? 'secondary' : 'tertiary';
       } else {
         return 'secondary';
       }
@@ -149,7 +148,10 @@ export default {
       this.$refs.close.focus();
     },
     onShown() {
-      if (this.$slots['primary-button']) {
+      const focusEl = this.$refs.content.querySelector('[data-modal-primary-focus]');
+      if (focusEl) {
+        focusEl.focus();
+      } else if (this.$slots['primary-button']) {
         this.$refs.primary.$el.focus();
       } else if (this.$slots['secondary-button']) {
         this.$refs.secondary.$el.focus();

package/src/components/cv-number-input/cv-number-input.vue

@@ -1,41 +1,30 @@
 <template>
-  <div class="cv-number-input bx--form-item">
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input bx--form-item">
     <div
       data-numberinput
       class="bx--number"
       :class="{
         'bx--number--light': theme === 'light',
         'bx--number--helpertext': isHelper,
+        'cv-number-input': !formItem,
       }"
       :data-invalid="isInvalid"
     >
       <div class="bx--number__controls">
-        <button
-          class="bx--number__control-btn up-icon"
-          @click="doUp"
-          type="button"
-        >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+        <button class="bx--number__control-btn up-icon" @click="doUp" type="button">
+          <CaretUpGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 5L5 .002 10 5z" fill-rule="evenodd"></path>
           </svg>
         </button>
-        <button
-          class="bx--number__control-btn down-icon"
-          @click="doDown"
-          type="button"
-        >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+        <button class="bx--number__control-btn down-icon" @click="doDown" type="button">
+          <CaretDownGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
           </svg>
         </button>
       </div>
-      <input
-        :id="uid"
-        type="number"
-        v-model="internalValue"
-        v-bind="$attrs"
-        v-on="inputListeners"
-      />
+      <input :id="uid" type="number" v-model="internalValue" v-bind="$attrs" v-on="inputListeners" />
       <label :for="uid" class="bx--label">{{ label }}</label>
       <div class="bx--form-requirement" v-if="isInvalid">
         <slot name="invalid-message">{{ invalidMessage }}</slot>
@@ -44,18 +33,24 @@
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
     </div>
-  </div>
+  </cv-wrapper>
 </template>
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import CaretDownGlyph from '@carbon/icons-vue/lib/caret--down/index';
+import CaretUpGlyph from '@carbon/icons-vue/lib/caret--up/index';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
 export default {
   name: 'CvNumberInput',
   mixins: [uidMixin, themeMixin],
+  components: { CaretDownGlyph, CaretUpGlyph, CvWrapper },
   inheritAttrs: false,
   props: {
+    formItem: { type: Boolean, default: true },
     helperText: { type: String, default: null },
     invalidMessage: { type: String, default: null },
     label: String,
@@ -65,9 +60,7 @@ export default {
       default: undefined,
       validator(val) {
         if (val !== undefined) {
-          console.warn(
-            'CvNumberInput: invalid prop deprecated in favour of invalidMessage'
-          );
+          console.warn('CvNumberInput: invalid prop deprecated in favour of invalidMessage');
         }
         return true;
       },
@@ -75,6 +68,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalValue: this.value,
     };
   },
@@ -101,16 +95,10 @@ export default {
       return intVal;
     },
     isInvalid() {
-      return (
-        this.$slots['invalid-message'] ||
-        (this.invalidMessage && this.invalidMessage.length)
-      );
+      return this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length);
     },
     isHelper() {
-      return (
-        this.$slots['helper-text'] ||
-        (this.helperText && this.helperText.length)
-      );
+      return this.$slots['helper-text'] || (this.helperText && this.helperText.length);
     },
   },
   methods: {

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -13,12 +13,8 @@
     :class="{ 'bx--overflow-menu--open': open }"
   >
     <slot name="trigger">
-      <svg
-        class="bx--overflow-menu__icon"
-        width="3"
-        height="15"
-        viewBox="0 0 3 15"
-      >
+      <OverflowMenuVertical16 v-if="componentsX" class="bx--overflow-menu__icon" />
+      <svg v-else class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
         <g fill-rule="evenodd">
           <circle cx="1.5" cy="1.5" r="1.5"></circle>
           <circle cx="1.5" cy="7.5" r="1.5"></circle>
@@ -43,7 +39,7 @@
         class="cv-overflow-menu__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusBeforeContent"
       />
       <slot></slot>
@@ -51,7 +47,7 @@
         class="cv-overflow-menu__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusAfterContent"
       />
     </ul>
@@ -59,10 +55,13 @@
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+import OverflowMenuVertical16 from '@carbon/icons-vue/lib/overflow-menu--vertical/16';
 import uidMixin from '../../mixins/uid-mixin';
 
 export default {
   name: 'CvOverflowMenu',
+  components: { OverflowMenuVertical16 },
   mixins: [uidMixin],
   props: {
     label: String,
@@ -81,6 +80,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       open: false,
       left: -9999, // offscreen,
       top: 0,
@@ -103,10 +103,7 @@ export default {
       if (this.open) {
         if (
           ev.relatedTarget === null ||
-          !(
-            this.$el === ev.relatedTarget ||
-            this.$refs.popup.contains(ev.relatedTarget)
-          )
+          !(this.$el === ev.relatedTarget || this.$refs.popup.contains(ev.relatedTarget))
         ) {
           this.open = false;
           this.positionListen(false);
@@ -143,17 +140,14 @@ export default {
           if (this.flipMenu) {
             this.left =
               menuPosition.left +
-              20 +
+              (this.componentsX ? 0 : 20) +
               this.offsetLeft -
               this.$refs.popup.offsetWidth +
               this.$el.offsetWidth;
-            this.top =
-              menuPosition.bottom + 2 + this.offsetTop + window.scrollY;
+            this.top = menuPosition.bottom + 2 + this.offsetTop + window.scrollY;
           } else {
-            this.left =
-              menuPosition.left - 20 + this.offsetLeft + window.scrollX;
-            this.top =
-              menuPosition.bottom + 2 + this.offsetTop + window.scrollY;
+            this.left = menuPosition.left - (this.componentsX ? 0 : 20) + this.offsetLeft + window.scrollX;
+            this.top = menuPosition.bottom + 2 + this.offsetTop + window.scrollY;
           }
         });
       }

package/src/components/cv-pagination/cv-pagination.vue

@@ -2,6 +2,7 @@
   <div class="cv-pagination bx--pagination" data-pagination>
     <div class="bx--pagination__left">
       <cv-select
+        class="bx--select__item-count"
         :label="`${pageSizesLabel}`"
         inline
         ref="pageSizeSelect"
@@ -12,42 +13,34 @@
           v-for="(size, index) in pageSizes"
           :key="index"
           :value="`${size.value ? size.value : size}`"
-          >{{
-            size.label ? size.label : size.value ? size.value : size
-          }}</cv-select-option
+          >{{ size.label ? size.label : size.value ? size.value : size }}</cv-select-option
         >
       </cv-select>
 
       <span class="bx--pagination__text">
-        <span>|&nbsp;</span>
+        <span v-if="!componentsX">|&nbsp;</span>
         <span data-displayed-item-range>{{ rangeText }}</span>
       </span>
     </div>
 
-    <div class="bx--pagination__right bx--pagination--inline">
-      <span class="bx--pagination__text">{{ pageOfPages }}</span>
+    <div class="bx--pagination__right">
+      <span v-if="!componentsX" class="bx--pagination__text">{{ pageOfPages }}</span>
 
       <button
+        v-if="!componentsX"
         type="button"
         class="bx--pagination__button bx--pagination__button--backward"
         data-page-backward
         :aria-label="backwardText"
         @click="onPrevPage"
       >
-        <svg
-          class="bx--pagination__button-icon"
-          width="7"
-          height="12"
-          viewBox="0 0 7 12"
-        >
-          <path
-            fill-rule="nonzero"
-            d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"
-          ></path>
+        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"></path>
         </svg>
       </button>
 
       <cv-select
+        class="bx--select__page-number"
         :label="`${pageNumberLabel}:`"
         inline
         hideLabel
@@ -60,29 +53,39 @@
           v-for="pageNumber in pages"
           :key="pageNumber"
           :value="`${pageNumber}`"
+          :selected="pageValue === pageNumber"
           >{{ pageNumber }}</cv-select-option
         >
       </cv-select>
+      <span v-if="componentsX" class="bx--pagination__text">{{ pageOfPages }}</span>
+
       <span v-if="pages.length == 0">{{ pageValue }}</span>
 
+      <button
+        v-if="componentsX"
+        type="button"
+        class="bx--pagination__button bx--pagination__button--backward"
+        data-page-backward
+        :aria-label="backwardText"
+        @click="onPrevPage"
+        :disabled="noWayBack"
+        :class="{ 'bx--pagination__button--no-index': noWayBack }"
+      >
+        <CaretLeft16 class="bx--pagination__button-icon" />
+      </button>
+
       <button
         type="button"
         class="bx--pagination__button bx--pagination__button--forward"
         data-page-forward
         :aria-label="forwardText"
         @click="onNextPage"
-        :disabled="this.pageValue === this.pageCount"
+        :disabled="noWayForward"
+        :class="{ 'bx--pagination__button--no-index': noWayForward }"
       >
-        <svg
-          class="bx--pagination__button-icon"
-          width="7"
-          height="12"
-          viewBox="0 0 7 12"
-        >
-          <path
-            fill-rule="nonzero"
-            d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"
-          ></path>
+        <CaretRight16 v-if="componentsX" class="bx--pagination__button-icon" />
+        <svg v-else class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+          <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"></path>
         </svg>
       </button>
     </div>
@@ -90,6 +93,12 @@
 </template>
 
 <script>
+import CvSelect from '../cv-select/cv-select';
+import CvSelectOption from '../cv-select/cv-select-option';
+import { componentsX } from '../../internal/feature-flags';
+import CaretLeft16 from '@carbon/icons-vue/lib/caret--left/16';
+import CaretRight16 from '@carbon/icons-vue/lib/caret--right/16';
+
 const newPageValue = (page, lastPage) => {
   let result = 1;
   if (page && page > 0) {
@@ -128,22 +137,23 @@ const newPagesArray = pageCount => {
   return Array.from({ length: pageCount }, (val, key) => key + 1);
 };
 
-const newFirstItem = (pageValue, pageSizeValue) =>
-  1 + (pageValue - 1) * pageSizeValue;
+const newFirstItem = (pageValue, pageSizeValue) => 1 + (pageValue - 1) * pageSizeValue;
 
 export default {
   name: 'CvPagination',
+  components: { CvSelect, CvSelectOption, CaretLeft16, CaretRight16 },
   props: {
     backwardText: { type: String, default: 'Prev page' },
     forwardText: { type: String, default: 'Next page' },
     pageNumberLabel: { type: String, default: 'Page number:' },
-    pageSizesLabel: { type: String, default: 'Number of items per page:' },
+    pageSizesLabel: { type: String, default: 'Items per page:' },
     numberOfItems: { type: Number, default: Infinity },
     page: Number,
     pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
   },
   data() {
     return {
+      componentsX,
       firstItem: 1,
       pageValue: 1,
       pageSizeValue: 10,
@@ -157,16 +167,14 @@ export default {
     this.pageValue = newPageValue(this.page, this.pageCount);
     this.pages = newPagesArray(this.pageCount);
     this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
+    // console.log(this.pageValue);
   },
   watch: {
     numberOfItems() {
       this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
       this.pages = newPagesArray(this.pageCount);
-      this.pageValue = Math.min(
-        this.pageCount,
-        Math.ceil(this.firstItem / this.pageSizeValue)
-      );
-      this.firstItem = 1 + (this.pageValue - 1) * this.pageSizeValue;
+      this.pageValue = Math.max(this.pageCount, Math.ceil(this.firstItem / this.pageSizeValue));
+      this.firstItem = Math.max(0, 1 + (this.pageValue - 1) * this.pageSizeValue);
     },
     page() {
       this.pageValue = newPageValue(this.page, this.pageCount);
@@ -182,22 +190,29 @@ export default {
     },
   },
   computed: {
+    noWayBack() {
+      return this.pageValue === 1;
+    },
+    noWayForward() {
+      return this.pageValue === this.pageCount;
+    },
     pageOfPages() {
       // console.log(this.pageValue, this.pageCount);
       if (this.numberOfItems !== Infinity) {
-        return `${this.pageValue} of ${this.pageCount}`;
+        if (this.componentsX) {
+          return `of ${this.pageCount} pages`;
+        } else {
+          return `${this.pageValue} of ${this.pageCount}`;
+        }
       }
       return '';
     },
     rangeText() {
       const start = this.firstItem;
-      const end = Math.min(
-        start + parseInt(this.pageSizeValue, 10) - 1,
-        this.numberOfItems
-      );
+      const end = Math.min(start + parseInt(this.pageSizeValue, 10) - 1, this.numberOfItems);
 
       if (this.numberOfItems !== Infinity) {
-        return `${start}-${end} of ${this.numberOfItems}`;
+        return `${start}-${end} of ${this.numberOfItems} items`;
       } else {
         return `${start}-${end}`;
       }
@@ -243,4 +258,8 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.bx--pagination .bx--select .bx--select-input ~ .bx--select__arrow {
+  position: absolute;
+}
+</style>

package/src/components/cv-progress/_cv-progress-step-complete.vue

@@ -1,17 +1,8 @@
 <template functional>
-  <svg
-    class="cv-progress-step-complete"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-  >
+  <svg class="cv-progress-step-complete" width="16" height="16" viewBox="0 0 16 16">
     <g fill-rule="nonzero">
-      <path
-        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
-      ></path>
-      <path
-        d="M11.646 5.146l.708.708-5.604 5.603-3.104-3.103.708-.708 2.396 2.397z"
-      ></path>
+      <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+      <path d="M11.646 5.146l.708.708-5.604 5.603-3.104-3.103.708-.708 2.396 2.397z"></path>
     </g>
   </svg>
 </template>