@carbon/vue 1.0.2 → 1.1.3

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

@@ -1,6 +1,6 @@
 <template>
   <div class="cv-slider bx--form-item">
-    <label :for="uid" class="bx--label">{{ label }}</label>
+    <label :for="uid" class="bx--label" :class="{ 'bx--label--disabled': componentsX && disabled }">{{ label }}</label>
     <div class="bx--slider-container">
       <span class="bx--slider__range-label">{{ internalMinLabel }}</span>
       <div
@@ -10,10 +10,7 @@
         data-slider-input-box="#slider-input-box"
       >
         <div class="bx--slider__track" @click="onTrackClick" ref="track"></div>
-        <div
-          class="bx--slider__filled-track"
-          :style="`width: ${percentage};`"
-        ></div>
+        <div class="bx--slider__filled-track" :style="`width: ${percentage};`"></div>
         <div
           class="bx--slider__thumb"
           :class="{
@@ -26,15 +23,7 @@
           @keydown.down.left.prevent="onDown"
           @mousedown="onStartDrag"
         ></div>
-        <input
-          :id="uid"
-          class="bx--slider__input"
-          type="range"
-          :step="step"
-          :min="min"
-          :max="max"
-          ref="range"
-        />
+        <input :id="uid" class="bx--slider__input" type="range" :step="step" :min="min" :max="max" ref="range" />
       </div>
       <span class="bx--slider__range-label">{{ internalMaxLabel }}</span>
       <input
@@ -56,6 +45,7 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
 
 export default {
   name: 'CvSlider',
@@ -91,6 +81,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalValue: '',
       animateClick: false,
       isDragging: false,
@@ -115,8 +106,7 @@ export default {
   mounted() {
     this.$refs.range.value = this.value;
     this.internalValue = this.$refs.range.value;
-    this.percentage = `${((this.internalValue - this.getMin()) * 100) /
-      (this.getMax() - this.getMin())}%`;
+    this.percentage = `${((this.internalValue - this.getMin()) * 100) / (this.getMax() - this.getMin())}%`;
   },
   watch: {
     value(val) {
@@ -176,16 +166,13 @@ export default {
       this.$refs.range.value = newValue;
       this.internalValue = this.$refs.range.value;
 
-      this.percentage = `${((this.internalValue - this.getMin()) * 100) /
-        (this.getMax() - this.getMin())}%`;
+      this.percentage = `${((this.internalValue - this.getMin()) * 100) / (this.getMax() - this.getMin())}%`;
 
       this.$emit('modelEvent', this.$refs.range.value);
       this.$emit('change', this.$refs.range.value);
     },
     onChange() {
-      let newValue = this.internalValue.length
-        ? parseFloat(this.internalValue)
-        : this.getMin();
+      let newValue = this.internalValue.length ? parseFloat(this.internalValue) : this.getMin();
       this.setValue(newValue);
     },
     onStartDrag(ev) {
@@ -199,11 +186,9 @@ export default {
     onDrag(ev) {
       if (this.isDragging) {
         // percentage change
-        let newValue =
-          (ev.clientX - this.dragStartX) / this.$refs.track.offsetWidth;
+        let newValue = (ev.clientX - this.dragStartX) / this.$refs.track.offsetWidth;
         // uncapped new value
-        newValue =
-          this.dragStartValue + (this.getMax() - this.getMin()) * newValue;
+        newValue = this.dragStartValue + (this.getMax() - this.getMin()) * newValue;
 
         this.setValue(newValue, ev);
       }
@@ -229,27 +214,13 @@ export default {
       this.setValue(newValue, ev);
     },
     onUp(ev) {
-      let curValue =
-        ev.target.type === 'number'
-          ? parseFloat(ev.target.value)
-          : this.getValue();
-      let newValue =
-        curValue +
-        (ev.shiftKey
-          ? this.internalMultiplier * this.getStep()
-          : this.getStep());
+      let curValue = ev.target.type === 'number' ? parseFloat(ev.target.value) : this.getValue();
+      let newValue = curValue + (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
       this.setValue(newValue, ev);
     },
     onDown(ev) {
-      let curValue =
-        ev.target.type === 'number'
-          ? parseFloat(ev.target.value)
-          : this.getValue();
-      let newValue =
-        curValue -
-        (ev.shiftKey
-          ? this.internalMultiplier * this.getStep()
-          : this.getStep());
+      let curValue = ev.target.type === 'number' ? parseFloat(ev.target.value) : this.getValue();
+      let newValue = curValue - (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
       this.setValue(newValue, ev);
     },
   },

package/src/components/cv-structured-list/_cv-structured-list-item-selectable.vue

@@ -7,6 +7,7 @@
     tabindex="0"
   >
     <input
+      v-if="!componentsX"
       v-bind="$attrs"
       v-on="inputListeners"
       tabindex="-1"
@@ -17,12 +18,8 @@
       type="radio"
     />
     <div class="bx--structured-list-td">
-      <svg
-        class="bx--structured-list-svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-      >
+      <CheckmarkFilled16 v-if="componentsX" class="bx--structured-list-svg" />
+      <svg v-else class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
         <path
           d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
           fill-rule="evenodd"
@@ -30,16 +27,31 @@
       </svg>
     </div>
     <slot></slot>
+    <input
+      v-if="componentsX"
+      v-bind="$attrs"
+      v-on="inputListeners"
+      tabindex="-1"
+      :id="uid"
+      class="bx--structured-list-input"
+      :checked="isChecked"
+      :value="value"
+      type="radio"
+    />
   </label>
 </template>
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import radioMixin from '../../mixins/radio-mixin';
+import componentsX from '../../internal/feature-flags';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
 
 export default {
   name: 'CvStructuredListItemSelectable',
+  inheritAttrs: false,
   mixins: [uidMixin, radioMixin],
+  data: () => ({ componentsX }),
 };
 </script>
 

package/src/components/cv-structured-list/cv-structured-list-item.vue

@@ -32,9 +32,7 @@ export default {
   },
   computed: {
     tagType() {
-      return this.selectable
-        ? 'cv-structured-list-item-selectable'
-        : 'cv-structured-list-item-standard';
+      return this.selectable ? 'cv-structured-list-item-selectable' : 'cv-structured-list-item-standard';
     },
     selectable() {
       return this.$parent.selectable;

package/src/components/cv-structured-list/cv-structured-list.vue

@@ -10,15 +10,20 @@
   >
     <div class="bx--structured-list-thead">
       <div class="bx--structured-list-row bx--structured-list-row--header-row">
-        <div v-if="selectable" class="bx--structured-list-th"></div>
+        <div v-if="selectable && !componentsX" class="bx--structured-list-th"></div>
         <slot name="headings"></slot>
+        <div v-if="selectable && componentsX" class="bx--structured-list-th"></div>
       </div>
     </div>
-    <div class="bx--structured-list-tbody"><slot name="items"></slot></div>
+    <div class="bx--structured-list-tbody">
+      <slot name="items"></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+
 export default {
   name: 'CvStructuredList',
   props: {
@@ -26,6 +31,9 @@ export default {
     border: Boolean,
     condensed: Boolean,
   },
+  data() {
+    return { componentsX };
+  },
   mounted() {
     // pass on cv-structured-list-item change events
     this.$on('cv:change', val => this.$emit('change', val));

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

@@ -8,16 +8,11 @@
       @keydown.right.prevent="moveRight"
       @keydown.left.prevent="moveLeft"
     >
-      <div class="bx--tabs-trigger" tabindex="0">
-        <a
-          href="javascript:void(0)"
-          class="bx--tabs-trigger-text"
-          tabindex="-1"
-        ></a>
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
-        </svg>
-      </div>
+      <cv-dropdown class="bx--tabs-trigger" :value="`${selectedIndex}`" @change="onDropChange" :form-item="false">
+        <cv-dropdown-item v-for="(tab, index) in tabs" :key="`drop-${index}`" :value="`${index}`">
+          {{ tab.label }}
+        </cv-dropdown-item>
+      </cv-dropdown>
       <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
         <li
           v-for="(tab, index) in tabs"
@@ -42,13 +37,19 @@
         </li>
       </ul>
     </nav>
-    <div class="cv-tabs__panels"><slot></slot></div>
+    <div class="cv-tabs__panels">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import CvDropdown from '../cv-dropdown/cv-dropdown';
+import CvDropdownItem from '../cv-dropdown/cv-dropdown-item';
+
 export default {
   name: 'CvTabs',
+  components: { CvDropdown, CvDropdownItem },
   data() {
     return {
       tabs: [],
@@ -58,12 +59,13 @@ export default {
   created() {
     // add these on created otherwise cv:mounted is too early.
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
-    this.$on('cv:beforeDestory', srcComponent =>
-      this.onCvBeforeDestroy(srcComponent)
-    );
+    this.$on('cv:beforeDestory', srcComponent => this.onCvBeforeDestroy(srcComponent));
     this.$on('cv:selected', srcComponent => this.onCvSelected(srcComponent));
   },
   methods: {
+    onDropChange(val) {
+      this.onTabClick(parseInt(val));
+    },
     onCvMount(srcComponent) {
       this.tabs.push(srcComponent);
       this.checkSelected();
@@ -126,4 +128,18 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+@media screen and (max-width: 767px) {
+  .carbon .bx--dropdown.bx--tabs-trigger {
+    display: block;
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 41.95rem) {
+  .experimental .bx--dropdown.bx--tabs-trigger {
+    display: block;
+    padding: 0;
+  }
+}
+</style>

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

@@ -3,26 +3,36 @@
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+
+const components9Tags = [
+  'ibm',
+  'beta',
+  'third-party',
+  'local',
+  'dedicated',
+  'custom',
+  'experimental',
+  'community',
+  'private',
+  'deprecated',
+];
+const componentsXTags = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray'];
+
 export default {
   name: 'CvTag',
+  data: () => ({ componentsX }),
   props: {
     label: { type: String, required: true },
     kind: {
       type: String,
-      default: 'ibm',
+      default: componentsX ? componentsXTags[0] : components9Tags[0],
       validator(val) {
-        return [
-          'ibm',
-          'beta',
-          'third-party',
-          'local',
-          'dedicated',
-          'custom',
-          'experimental',
-          'community',
-          'private',
-          'deprecated',
-        ].includes(val);
+        if (componentsX) {
+          return componentsXTags.includes(val);
+        } else {
+          return components9Tags.includes(val);
+        }
       },
     },
   },

package/src/components/cv-text-area/cv-text-area.vue

@@ -5,8 +5,7 @@
       :class="[
         'bx--label',
         {
-          'bx--label--disabled':
-            $attrs.disabled !== undefined && $attrs.disabled,
+          'bx--label--disabled': $attrs.disabled !== undefined && $attrs.disabled,
         },
       ]"
       >{{ label }}</label
@@ -14,7 +13,19 @@
     <div class="bx--form__helper-text" v-if="isHelper">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
+    <div v-if="componentsX" class="bx--text-area__wrapper" :data-invalid="isInvalid">
+      <WarningFilled16 v-if="isInvalid" class="bx--text-area__invalid-icon" />
+      <textarea
+        :id="uid"
+        class="bx--text-area"
+        :class="{ 'bx--text-area--light': theme === 'light' }"
+        v-bind="$attrs"
+        :value="value"
+        v-on="inputListeners"
+      ></textarea>
+    </div>
     <textarea
+      v-else
       :id="uid"
       class="bx--text-area"
       :class="{ 'bx--text-area--light': theme === 'light' }"
@@ -32,11 +43,19 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import WarningFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
 
 export default {
   name: 'CvTextArea',
   mixins: [uidMixin, themeMixin],
   inheritAttrs: false,
+  components: { WarningFilled16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   props: {
     helperText: { type: String, default: null },
     invalidMessage: { type: String, default: null },
@@ -54,16 +73,10 @@ export default {
       };
     },
     isInvalid() {
-      return (
-        this.$slots['invalid-message'] ||
-        (this.invalidMessage && this.invalidMessage.length)
-      );
+      return this.$slots['invalid-message'] !== undefined || (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);
     },
   },
 };

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

@@ -5,8 +5,7 @@
       :class="[
         'bx--label',
         {
-          'bx--label--disabled':
-            $attrs.disabled !== undefined && $attrs.disabled,
+          'bx--label--disabled': $attrs.disabled !== undefined && $attrs.disabled,
         },
       ]"
       >{{ label }}</label
@@ -14,7 +13,22 @@
     <div class="bx--form__helper-text" v-if="isHelper">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
+    <div v-if="componentsX" class="bx--text-input__field-wrapper" :data-invalid="isInvalid">
+      <WarningFilled16 v-if="isInvalid" class="bx--text-input__invalid-icon" />
+      <input
+        :id="uid"
+        class="bx--text-input"
+        :class="{ 'bx--text-input--light': theme === 'light' }"
+        v-bind="$attrs"
+        :value="value"
+        v-on="inputListeners"
+        :data-toggle-password-visibility="isPassword"
+        :type="dataType"
+        ref="input"
+      />
+    </div>
     <input
+      v-else
       :id="uid"
       class="bx--text-input"
       :class="{ 'bx--text-input--light': theme === 'light' }"
@@ -22,7 +36,30 @@
       :value="value"
       v-on="inputListeners"
       :data-invalid="isInvalid"
+      :data-toggle-password-visibility="isPassword"
+      :type="dataType"
+      ref="input"
     />
+    <button
+      v-if="isPassword"
+      class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      @click="togglePasswordVisibility"
+    >
+      <svg v-if="isPasswordVisible" class="icon--visibility-off" width="16" height="16" viewBox="0 0 16 16">
+        <path
+          d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"
+        ></path>
+      </svg>
+      <svg v-else class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
+        <path
+          d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"
+        ></path>
+        <path
+          d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"
+        ></path>
+      </svg>
+    </button>
     <div class="bx--form-requirement" v-if="isInvalid">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
@@ -32,18 +69,40 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import WarningFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
 
 export default {
   name: 'CvTextInput',
+  components: { WarningFilled16 },
   mixins: [uidMixin, themeMixin],
   inheritAttrs: false,
   props: {
     helperText: { type: String, default: null },
     invalidMessage: { type: String, default: null },
     label: String,
+    passwordVisible: Boolean,
     theme: String,
+    type: String,
     value: String,
   },
+  data() {
+    return {
+      componentsX,
+      dataPasswordVisible: this.isPassword && this.passwordVisible,
+      dataType: this.type,
+    };
+  },
+  watch: {
+    passwordVisible() {
+      if (this.passwordVisible !== this.dataPasswordVisible) {
+        this.togglePasswordVisibility();
+      }
+    },
+    type() {
+      this.dataType = this.type;
+    },
+  },
   computed: {
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
@@ -55,16 +114,27 @@ export default {
       };
     },
     isInvalid() {
-      return (
-        this.$slots['invalid-message'] ||
-        (this.invalidMessage && this.invalidMessage.length)
-      );
+      return this.$slots['invalid-message'] !== undefined || (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);
+    },
+    isPassword() {
+      return this.type === 'password';
+    },
+    isPasswordVisible() {
+      return this.isPassword && this.dataPasswordVisible;
+    },
+  },
+  methods: {
+    togglePasswordVisibility() {
+      const currentValue = this.$refs.input.value;
+      this.dataPasswordVisible = !this.dataPasswordVisible;
+      this.dataType = this.dataPasswordVisible ? 'text' : 'password';
+
+      this.$nextTick(() => {
+        this.$refs.input.value = currentValue;
+      });
     },
   },
 };

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

@@ -1,9 +1,5 @@
 <template>
-  <a
-    data-tile="clickable"
-    class="cv-tile-clickable bx--tile--clickable"
-    tabindex="0"
-  >
+  <a data-tile="clickable" class="cv-tile-clickable bx--tile--clickable" tabindex="0">
     <slot></slot>
   </a>
 </template>

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

@@ -7,25 +7,18 @@
     :style="styleObject"
   >
     <button type="button" class="bx--tile__chevron" @click="toggle">
-      <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
+      <ChevronDown16 v-if="componentsX" />
+      <svg v-else width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
         <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
       </svg>
     </button>
     <div class="bx--tile-content">
-      <span
-        data-tile-atf
-        class="bx--tile-content__above-the-fold"
-        ref="aboveFold"
-      >
+      <span data-tile-atf class="bx--tile-content__above-the-fold" ref="aboveFold">
         <slot>
           <!-- Above the fold content here -->
         </slot>
       </span>
-      <span
-        class="bx--tile-content__below-the-fold"
-        ref="belowFold"
-        v-show="internalExpanded || initialized"
-      >
+      <span class="bx--tile-content__below-the-fold" ref="belowFold" v-show="internalExpanded || initialized">
         <slot name="below">
           <!-- Rest of the content here -->
         </slot>
@@ -35,13 +28,18 @@
 </template>
 
 <script>
+import { componentsX } from '../../internal/feature-flags';
+import ChevronDown16 from '@carbon/icons-vue/lib/chevron--down/16';
+
 export default {
   name: 'CvTileExpandable',
   props: {
     expanded: Boolean,
   },
+  components: { ChevronDown16 },
   data() {
     return {
+      componentsX,
       styleObject: {
         maxHeight: 'initial',
       },
@@ -66,11 +64,9 @@ export default {
 
       this.$nextTick(() => {
         const forceType = typeof force;
-        this.internalExpanded =
-          forceType === 'boolean' ? force : !this.internalExpanded;
+        this.internalExpanded = forceType === 'boolean' ? force : !this.internalExpanded;
 
-        const belowFoldHeight = this.$refs.belowFold.getBoundingClientRect()
-          .height;
+        const belowFoldHeight = this.$refs.belowFold.getBoundingClientRect().height;
 
         if (this.internalExpanded) {
           currentHeight += belowFoldHeight;