@carbon/vue 1.0.2 → 1.1.3

package/src/components/cv-tile/_cv-tile-selectable.vue

@@ -1,11 +1,12 @@
 <template>
   <label
+    :data-wibble="`${isChecked}`"
     :for="uid"
     aria-label="tile"
     class="cv-tile-selectable bx--tile--selectable"
+    :class="{ 'bx--tile--is-selected': isChecked }"
     data-tile="selectable"
     tabindex="0"
-    :class="[{ 'bx--tile--is-selected': isChecked }]"
     :data-contained-checkbox-state="isChecked"
   >
     <input
@@ -16,16 +17,20 @@
       :checked="isChecked"
       class="bx--tile-input"
       v-bind="$attrs"
+      v-on="inputListeners"
     />
     <div class="bx--tile__checkmark">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <CheckmarkFilled16 v-if="componentsX" />
+      <svg v-else width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
         <path
           d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"
         ></path>
       </svg>
     </div>
     <div class="bx--tile-content">
-      <slot> <!-- Tile content here --> </slot>
+      <slot>
+        <!-- Tile content here -->
+      </slot>
     </div>
   </label>
 </template>
@@ -33,11 +38,17 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import checkMixin from '../../mixins/check-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
 
 export default {
   name: 'CvTileSelectable',
   mixins: [uidMixin, checkMixin],
+  components: { CheckmarkFilled16 },
   inheritAttrs: false,
+  data() {
+    return { componentsX };
+  },
 };
 </script>
 

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

@@ -38,10 +38,7 @@ export default {
     kind: {
       type: String,
       default: '',
-      validator: value =>
-        ['clickable', 'expandable', 'selectable', 'standard', ''].includes(
-          value
-        ),
+      validator: value => ['clickable', 'expandable', 'selectable', 'standard', ''].includes(value),
     },
   },
   computed: {

package/src/components/cv-time-picker/cv-time-picker.vue

@@ -3,8 +3,10 @@
     <div
       class="bx--time-picker"
       :class="{ 'bx--time-picker--light': theme === 'light' }"
+      :data-invalid="isInvalid && componentsX"
     >
       <div class="bx--time-picker__input">
+        <label :for="uid" class="bx--label">{{ label }}</label>
         <input
           :id="uid"
           type="text"
@@ -13,19 +15,18 @@
           v-bind="$attrs"
           :placeholder="placeholder"
           :maxlength="placeholder.length"
-          :data-invalid="isInvalid"
+          :data-invalid="isInvalid && !componentsX"
           :value="time"
           :disabled="disabled"
           @input="$emit('update:time', $event.target.value)"
         />
-        <div class="bx--form-requirement" v-if="isInvalid">
+        <div class="bx--form-requirement" v-if="isInvalid && !componentsX">
           <slot name="invalid-message">{{ invalidMessage }}</slot>
         </div>
-        <label :for="uid" class="bx--label">{{ label }}</label>
       </div>
       <cv-select
         class="bx--time-picker__select"
-        inline
+        :inline="!componentsX"
         :form-item="false"
         hide-label
         :label="ampmSelectLabel"
@@ -33,17 +34,13 @@
         :value="ampm"
         :disabled="disabled"
       >
-        <cv-select-option class="bx--select-option" value="AM"
-          >AM</cv-select-option
-        >
-        <cv-select-option class="bx--select-option" value="PM"
-          >PM</cv-select-option
-        >
+        <cv-select-option class="bx--select-option" value="AM">AM</cv-select-option>
+        <cv-select-option class="bx--select-option" value="PM">PM</cv-select-option>
       </cv-select>
 
       <cv-select
         class="bx--time-picker__select"
-        inline
+        :inline="!componentsX"
         :form-item="false"
         hide-label
         :label="timezonesSelectLabel"
@@ -52,24 +49,30 @@
         @input="$emit('update:timezone', $event)"
         :disabled="disabled"
       >
-        <cv-select-option
-          class="bx--select-option"
-          v-for="item in timezones"
-          :key="item.value"
-          :value="item.value"
-          >{{ item.label }}</cv-select-option
-        >
+        <cv-select-option class="bx--select-option" v-for="item in timezones" :key="item.value" :value="item.value">
+          {{ item.label }}
+        </cv-select-option>
       </cv-select>
     </div>
+    <div class="bx--form-requirement" v-if="isInvalid && componentsX">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
   </div>
 </template>
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import CvSelect from '../cv-select/cv-select';
+import CvSelectOption from '../cv-select/cv-select-option';
 
 export default {
   name: 'CvTimePicker',
+  components: {
+    CvSelect,
+    CvSelectOption,
+  },
   mixins: [uidMixin, themeMixin],
   inheritAttrs: false,
   props: {
@@ -88,21 +91,20 @@ export default {
     timezones: { type: Array, default: () => [] },
     timezonesSelectLabel: { type: String, default: 'Select time zone' },
   },
+  data() {
+    return { componentsX };
+  },
   computed: {
     isInvalid() {
       return (
-        this.$slots['invalid-message'] ||
+        (this.$slots['invalid-message'] && this.$slots['invalid-message'].length) ||
         (this.invalidMessage && this.invalidMessage.length > 0)
       );
     },
     validAmpm() {
       let result = this.ampm;
       if (!['AM', 'PM'].includes(this.ampm)) {
-        console.error(
-          `CvTimePicker: invalid value '${
-            this.ampm
-          }' supplied for prop ampm. Default applied.`
-        );
+        console.error(`CvTimePicker: invalid value '${this.ampm}' supplied for prop ampm. Default applied.`);
         // set to valid value
         result = this.ampm[0].value;
         this.$emit('update:ampm', result);
@@ -114,11 +116,7 @@ export default {
       let result = this.timezone;
       if (this.timezones && this.timezones.length) {
         if (!this.timezones.find(item => item.value === this.timezone)) {
-          console.error(
-            `CvTimePicker: invalid value '${
-              this.timezone
-            }' supplied for prop timezone. Default applied.`
-          );
+          console.error(`CvTimePicker: invalid value '${this.timezone}' supplied for prop timezone. Default applied.`);
           // set to first valid value
           result = this.timezones[0].value;
           this.$emit('update:timezone', result);

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

@@ -7,18 +7,16 @@
     :aria-role="isAlert ? 'alert' : false"
     :aria-live="!isAlert ? 'polite' : false"
   >
+    <component v-if="componentsX" :is="icon" class="bx--toast-notification__icon" />
     <div class="bx--toast-notification__details">
       <h3 class="bx--toast-notification__title">{{ title }}</h3>
       <p class="bx--toast-notification__subtitle">{{ subTitle }}</p>
       <p class="bx--toast-notification__caption">{{ caption }}</p>
     </div>
-    <button
-      type="button"
-      data-notification-btn
-      class="bx--toast-notification__close-button"
-      @click="$emit('close')"
-    >
+    <button type="button" data-notification-btn class="bx--toast-notification__close-button" @click="$emit('close')">
+      <Close16 v-if="componentsX" class="bx--toast-notification__close-icon" />
       <svg
+        v-else
         class="bx--toast-notification-icon"
         aria-label="close"
         width="10"
@@ -37,9 +35,20 @@
 
 <script>
 import notificationMixin from '../../mixins/notification-mixin';
+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--alt--filled/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
 
 export default {
   name: 'CvToastNotification',
+  components: { Close16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   mixins: [notificationMixin],
   props: {
     caption: String,
@@ -49,6 +58,23 @@ export default {
       validator: val => ['error', 'info', 'warning', 'success'].includes(val),
     },
   },
+  computed: {
+    icon() {
+      if (this.componentsX) {
+        switch (this.kind) {
+          case 'error':
+            return ErrorFilled16;
+          case 'warning':
+            return WarningAltFilled16;
+          case 'success':
+            return CheckmarkFilled16;
+          default:
+            return null;
+        }
+      }
+      return null;
+    },
+  },
 };
 </script>
 

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

@@ -11,16 +11,12 @@
       :aria-checked="`${isChecked}`"
       :value="value"
     />
-    <label
-      class="bx--toggle__label"
-      :for="uid"
-      :data-contained-checkbox-state="isChecked"
-    >
-      <div class="bx--toggle__text--left" v-if="!small">
+    <label class="bx--toggle__label" :for="uid" :data-contained-checkbox-state="isChecked">
+      <div class="bx--toggle__text--left">
         <slot name="text-left">Off</slot>
       </div>
       <span class="bx--toggle__appearance"></span>
-      <div class="bx--toggle__text--right" v-if="!small">
+      <div class="bx--toggle__text--right">
         <slot name="text-right">On</slot>
       </div>
     </label>

package/src/components/cv-toolbar/cv-toolbar-option.vue

@@ -1,8 +1,5 @@
 <template>
-  <li
-    class="cv-toolbar-option bx--toolbar-menu__option"
-    @keydown.esc.prevent="$parent.$emit('cv:close')"
-  >
+  <li class="cv-toolbar-option bx--toolbar-menu__option" @keydown.esc.prevent="$parent.$emit('cv:close')">
     <slot></slot>
   </li>
 </template>

package/src/components/cv-toolbar/cv-toolbar-search.vue

@@ -10,8 +10,13 @@
 </template>
 
 <script>
+import CvSearch from '../cv-search/cv-search';
+
 export default {
   name: 'CvToolbarSearch',
+  components: {
+    CvSearch,
+  },
   inheritAttrs: false,
   props: {
     value: String,

package/src/components/cv-tooltip/cv-definition-tooltip.vue

@@ -20,9 +20,7 @@ export default {
         const validValues = ['top', 'bottom'];
         const valid = validValues.includes(val);
         if (!valid) {
-          console.warn(
-            `CVDefinitionTooltip.direction must be one of the following: ${validValues}`
-          );
+          console.warn(`CVDefinitionTooltip.direction must be one of the following: ${validValues}`);
         }
         return valid;
       },

package/src/components/cv-tooltip/cv-interactive-tooltip.vue

@@ -18,12 +18,8 @@
         @focusout="checkFocusOut"
       >
         <slot name="trigger">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
+          <Information16 v-if="componentsX" class="banana" />
+          <svg v-else width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <g fill-rule="evenodd">
               <path
                 d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
@@ -51,7 +47,7 @@
         class="cv-interactive-tooltip__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"
       />
       <span class="bx--tooltip__caret"></span>
@@ -60,7 +56,7 @@
         class="cv-interactive-tooltip__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>
@@ -69,10 +65,13 @@
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import Information16 from '@carbon/icons-vue/lib/information/16';
 
 export default {
   name: 'CvInteractiveTooltip',
   mixins: [uidMixin],
+  components: { Information16 },
   props: {
     direction: {
       type: String,
@@ -81,9 +80,7 @@ export default {
         const validValues = ['top', 'bottom', 'right', 'left'];
         const valid = validValues.includes(val);
         if (!valid) {
-          console.warn(
-            `CVInteractiveTooltip.direction must be one of the following: ${validValues}`
-          );
+          console.warn(`CVInteractiveTooltip.direction must be one of the following: ${validValues}`);
         }
         return valid;
       },
@@ -92,6 +89,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataVisible: false,
       left: -9999, // offscreen
       top: 0,
@@ -139,26 +137,15 @@ export default {
         if (this.direction === 'bottom') {
           this.top = menuPosition.bottom + 10 + window.scrollY;
         } else {
-          this.top =
-            menuPosition.top -
-            15 -
-            this.$refs.popup.offsetHeight +
-            window.scrollY;
+          this.top = menuPosition.top - 15 - this.$refs.popup.offsetHeight + window.scrollY;
         }
       } else {
         this.top =
           menuPosition.top +
-          (this.$refs.trigger.offsetHeight -
-            0.5 -
-            this.$refs.popup.offsetHeight) /
-            2 +
+          (this.$refs.trigger.offsetHeight - 0.5 - this.$refs.popup.offsetHeight) / 2 +
           window.scrollY;
         if (this.direction === 'left') {
-          this.left =
-            menuPosition.left -
-            10 -
-            this.$refs.popup.offsetWidth +
-            window.scrollX;
+          this.left = menuPosition.left - 10 - this.$refs.popup.offsetWidth + window.scrollX;
         } else {
           this.left = menuPosition.right + 15 + window.scrollX;
         }
@@ -198,9 +185,7 @@ export default {
       }
     },
     checkFocusOut(ev) {
-      this.dataVisible =
-        ev.relatedTarget === this.$refs.trigger ||
-        this.$refs.popup.contains(ev.relatedTarget);
+      this.dataVisible = ev.relatedTarget === this.$refs.trigger || this.$refs.popup.contains(ev.relatedTarget);
     },
     focusBeforeContent(ev) {
       if (this.contentAfter) {

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

@@ -1,18 +1,9 @@
 <template>
   <div class="cv-tooltip bx--tooltip--icon">
-    <div
-      tabindex="0"
-      class="bx--tooltip__trigger"
-      :class="`bx--tooltip--icon__${direction}`"
-      :aria-label="tip"
-    >
+    <div tabindex="0" class="bx--tooltip__trigger" :class="`bx--tooltip--icon__${direction}`" :aria-label="tip">
       <slot>
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <Information16 v-if="componentsX" />
+        <svg v-else width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <g fill-rule="evenodd">
             <path
               d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
@@ -28,8 +19,15 @@
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+import Information16 from '@carbon/icons-vue/lib/information/16';
+
 export default {
   name: 'CvTooltip',
+  components: { Information16 },
+  data() {
+    return { componentsX };
+  },
   props: {
     direction: {
       type: String,
@@ -38,9 +36,7 @@ export default {
         const validValues = ['top', 'bottom'];
         const valid = validValues.includes(val);
         if (!valid) {
-          console.warn(
-            `CVTooltip.direction must be one of the following: ${validValues}`
-          );
+          console.warn(`CVTooltip.direction must be one of the following: ${validValues}`);
         }
         return valid;
       },

package/src/components/cv-wrapper/_cv-wrapper.js

@@ -0,0 +1,33 @@
+/*
+ * This component optionally wraps slotted content with the specified tag-type.
+ *
+ * If no tag-type is supplied then the slotted content is unwrapped.
+ *
+ *  Unwrapped slots do not recieve class, style or attributes attached to the wrapper
+ *
+ * NOTE: If used at the top level of a component in the unwrapped case your component still needs to have a single root node.
+ *
+ */
+export default {
+  name: 'CvWrapper',
+  functional: true,
+  props: {
+    tagType: { type: String, default: null },
+  },
+  render(createElement, context) {
+    if (context.props.tagType) {
+      return createElement(
+        context.props.tagType,
+        {
+          attrs: context.data.attrs,
+          class: `${context.data.class || ''} ${context.data.staticClass || ''}`.trim(),
+          style: { ...context.data.staticStyle, ...context.data.style },
+          on: context.listeners,
+        },
+        context.slots().default
+      );
+    } else {
+      return context.slots().default;
+    }
+  },
+};

package/src/index-components-vue.js

@@ -2,6 +2,4 @@ console.error(
   'The built und and commonjs modules have been renamed from "carbon-components-vue..." to "carbon-vue..."'
 );
 
-alert(
-  `The built und and mommonjs modules have been renamed from "carbon-components-vue..." to "carbon-vue..."`
-);
+alert(`The built und and mommonjs modules have been renamed from "carbon-components-vue..." to "carbon-vue..."`);

package/src/index.js

@@ -1,8 +1,4 @@
-const ctx = require.context(
-  './components/',
-  true,
-  /^(?!.*(?:\/_|-story\.vue|-test\.vue)).*\.vue$/
-);
+const ctx = require.context('./components/', true, /^(?!.*(?:\/_|-story\.vue|-test\.vue)).*\.vue$/);
 const components = ctx.keys().map(ctx);
 
 export default {

package/src/{_internal/_feature-flags.js → internal/feature-flags.js}

@@ -20,9 +20,37 @@
 /**
  * Breaking changes for next release.
  */
-export const breakingChangesX = false;
+export let breakingChangesX;
 
 /**
  * Next gen of Carbon component design.
  */
-export const componentsX = false;
+export let componentsX;
+
+const defaults = {
+  componentsX: false,
+  breakingChangesX: false,
+};
+
+export const versions = (experimental = true) => {
+  const vers = [];
+  if (!defaults.componentsX) {
+    vers.push({ default: true });
+  }
+  if (experimental) {
+    vers.push({ experimental: true, default: defaults.componentsX });
+  }
+  return vers;
+};
+
+export const setVersion = val => {
+  if (val && val.experimental) {
+    breakingChangesX = true;
+    componentsX = true;
+  } else {
+    componentsX = defaults.componentsX;
+    breakingChangesX = defaults.breakingChangesX;
+  }
+};
+
+setVersion();