@carbon/vue 1.0.0 → 1.1.1

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

@@ -22,7 +22,42 @@
       :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>
@@ -41,9 +76,27 @@ export default {
     helperText: { type: String, default: null },
     invalidMessage: { type: String, default: null },
     label: String,
+    passwordVisible: Boolean,
     theme: String,
+    type: String,
     value: String,
   },
+  data() {
+    return {
+      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:
@@ -66,6 +119,23 @@ export default {
         (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;
+      });
+    },
   },
 };
 </script>

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

@@ -7,6 +7,11 @@
     :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>
@@ -18,7 +23,9 @@
       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 +44,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 +67,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-tooltip/cv-interactive-tooltip.vue

@@ -51,7 +51,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 +60,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>
@@ -168,10 +168,10 @@ export default {
       this.dataVisible = true;
       this.positionListen(true);
 
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.position();
         this.$refs.trigger.focus();
-      }, 1);
+      });
     },
     hide() {
       this.dataVisible = false;

package/src/data-viz/cv-bar-graph/cv-bar-graph.vue

@@ -399,10 +399,12 @@ $color-text: #5a6872;
 .cv-bar-graph__y-axis {
   font-family: 'ibm-plex-sans';
 
+  /* stylelint-disable-next-line selector-max-type */
   .tick line {
     stroke: $color-text;
   }
 
+  /* stylelint-disable-next-line selector-max-type */
   .tick text {
     fill: $color-text;
     font-size: 10px;
@@ -413,6 +415,7 @@ $color-text: #5a6872;
 .cv-bar-graph__y-axis {
   stroke-dasharray: 4;
 
+  /* stylelint-disable-next-line selector-max-type */
   path {
     display: none;
   }
@@ -474,12 +477,12 @@ $color-text: #5a6872;
   padding: 0.25rem 0.5rem;
   transform: translate(-50%, -100%);
   border: 1px solid $color__gray-1;
-  font-weight: 700;
   background-color: #fff;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  font-weight: 700;
   pointer-events: none;
 
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     top: 100%;
@@ -487,9 +490,9 @@ $color-text: #5a6872;
     width: 0;
     height: 0;
     transform: translateX(-50%);
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
     border-top: 5px solid #fff;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
   }
 }
 </style>

package/src/data-viz/cv-gauge/cv-gauge.vue

@@ -161,8 +161,8 @@ export default {
 
 <style lang="scss">
 .bx--graph-header {
-  font-weight: 300;
   font-size: 24px;
+  font-weight: 300;
 }
 
 .cv-gauge__container {

package/src/data-viz/cv-pie-chart/cv-pie-chart.vue

@@ -155,8 +155,8 @@ export default {
 
 <style lang="scss">
 .bx--graph-header {
-  font-weight: 300;
   font-size: 24px;
+  font-weight: 300;
 }
 
 .cv-pie-chart__container {
@@ -165,30 +165,31 @@ export default {
 }
 
 .cv-pie-chart__tooltip {
+  display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
   flex-direction: column;
   justify-content: center;
-  pointer-events: none;
   width: 100%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
 
+  /* stylelint-disable-next-line selector-max-type */
   p {
     text-align: center;
   }
 
   .cv-pie-chart__amount {
     font-size: 29px;
-    line-height: 1;
     font-weight: 300;
+    line-height: 1;
   }
 
   .cv-pie-chart__item {
-    font-weight: 400;
-    font-size: 14px;
     color: #5a6872;
+    font-size: 14px;
+    font-weight: 400;
   }
 }
 </style>