@carbon/vue 1.0.2 → 1.1.3

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

@@ -0,0 +1,97 @@
+<template>
+  <li class="cv-progress-step bx--progress-step" :class="stateClass" :aria-disabled="disabled">
+    <cv-wrapper v-if="componentsX">
+      <svg v-if="isCurrent">
+        <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
+      </svg>
+      <Warning16 v-else-if="!isComplete && invalid" class="bx--progress__warning" />
+      <svg v-else-if="!isComplete">
+        <path
+          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+        ></path>
+      </svg>
+      <CheckmarkOutline16 v-else-if="isComplete" />
+    </cv-wrapper>
+    <cv-wrapper v-else>
+      <cv-progress-step-complete v-if="isComplete" />
+      <cv-progress-step-incomplete v-if="!isComplete" :is-current="isCurrent" />
+    </cv-wrapper>
+    <cv-tooltip v-show="componentsX" direction="bottom" :tip="label">
+      <p class="bx--progress-label">{{ label }}</p>
+    </cv-tooltip>
+    <p v-if="!componentsX" class="bx--progress-label">{{ label }}</p>
+
+    <p class="bx--progress-optional" v-if="componentsX && additionalInfo">{{ additionalInfo }}</p>
+    <span class="bx--progress-line"></span>
+  </li>
+</template>
+
+<script>
+import CvProgressStepComplete from './_cv-progress-step-complete';
+import CvProgressStepIncomplete from './_cv-progress-step-incomplete';
+import { componentsX } from '../../internal/feature-flags';
+import CvTooltip from '../cv-tooltip/cv-tooltip';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
+import CheckmarkOutline16 from '@carbon/icons-vue/lib/checkmark--outline/16';
+import Warning16 from '@carbon/icons-vue/lib/warning/16';
+
+const states = ['incomplete', 'current', 'complete'];
+
+export default {
+  name: 'CvProgressStep',
+  components: {
+    CvProgressStepComplete,
+    CvProgressStepIncomplete,
+    CvTooltip,
+    CvWrapper,
+    CheckmarkOutline16,
+    Warning16,
+  },
+  props: {
+    additionalInfo: String,
+    disabled: Boolean,
+    invalid: Boolean,
+    label: String,
+    complete: Boolean,
+  },
+  data() {
+    return {
+      componentsX,
+      state: -1,
+    };
+  },
+  mounted() {
+    this.$_CvProgressStep = true; // for use by parent with $children
+    this.$parent.$emit('cv:mounted');
+  },
+  beforeDestroy() {
+    this.$parent.$emit('cv:beforeDestroy');
+  },
+  watch: {
+    complete() {
+      this.$parent.$emit('cv:completed');
+    },
+  },
+  computed: {
+    internalState: {
+      get() {
+        return this.state;
+      },
+      set(val) {
+        this.state = Math.sign(val);
+      },
+    },
+    isComplete() {
+      return this.state > 0;
+    },
+    isCurrent() {
+      return this.state === 0;
+    },
+    stateClass() {
+      const disabledClass = this.disabled ? ' bx--progress-step--disabled' : '';
+      const invalidClass = this.invalid ? ' bx--progress-step--invalid' : '';
+      return `bx--progress-step--${states[this.state + 1]}${disabledClass}${invalidClass}`;
+    },
+  },
+};
+</script>

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

@@ -1,17 +1,19 @@
 <template>
   <ul data-progress data-progress-current class="cv-progress bx--progress">
-    <cv-progress-step
-      v-for="(step, index) in steps"
-      :key="index"
-      :label="step"
-      :state="state(index)"
-      ref="steps"
-    />
+    <slot>
+      <cv-progress-step
+        v-for="(step, index) in steps"
+        :key="`step:${index}`"
+        :label="step"
+        :complete="initialStep > index"
+        ref="steps"
+      />
+    </slot>
   </ul>
 </template>
 
 <script>
-import CvProgressStep from './_cv-progress-step';
+import CvProgressStep from './cv-progress-step';
 
 export default {
   name: 'CvProgress',
@@ -20,26 +22,41 @@ export default {
   },
   props: {
     initialStep: { type: Number, default: 0 },
-    steps: { type: Array, required: true },
+    steps: Array,
   },
   data() {
     return {
       // TODO: Manage current step or leave this to user?
       // NOTE: Decision impacts on whether or not methods are useful
-      currentStep: 0,
+      currentStep: -1,
     };
   },
+  created() {
+    // add these on created otherwise cv:mounted is too late.
+    this.$on('cv:completed', srcComponent => this.onCvCompleted(srcComponent));
+    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
+    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
+  },
   mounted() {
     this.currentStep = this.initialStep;
   },
   watch: {
-    initialStep() {
-      this.currentStep = this.initialStep;
-    },
+    // initialStep() {
+    //   if (!this.$slots.default) {
+    //     // only works if no slot passed
+    //     // this.currentStep = this.initialStep;
+    //     this.processState();
+    //   }
+    // },
   },
   computed: {
     state() {
       return step => {
+        if (this.componentsX) {
+          console.warn('CvProgress: method deprecated');
+          return;
+        }
+
         if (step > this.currentStep) {
           return 'incomplete';
         } else {
@@ -49,10 +66,43 @@ export default {
     },
   },
   methods: {
+    onCvMount() {
+      this.processState();
+    },
+    onCvBeforeDestroy() {
+      this.processState();
+    },
+    onCvCompleted() {
+      console.log('completed');
+      this.processState();
+    },
+    processState() {
+      const steps = this.$children.filter(child => child.$_CvProgressStep);
+      let newCurrentStep = -1;
+      for (let i = 0; i < steps.length; i++) {
+        if (!steps[i].complete && newCurrentStep < 0) {
+          newCurrentStep = i;
+          steps[i].internalState = 0;
+        } else {
+          steps[i].internalState = newCurrentStep < 0 ? 1 : -1;
+        }
+      }
+      this.currentStep = newCurrentStep;
+    },
     getCurrent() {
+      if (this.componentsX) {
+        console.warn('CvProgress: method deprecated');
+        return;
+      }
+
       return { order: current + 1, component: this.$refs.steps[current] };
     },
     getSteps() {
+      if (this.componentsX) {
+        console.warn('CvProgress: method deprecated');
+        return;
+      }
+
       let index = 1;
       const steps = [];
       for (let step of this.$refs.steps) {
@@ -62,6 +112,11 @@ export default {
       return steps;
     },
     setCurrent(step) {
+      if (this.componentsX) {
+        console.warn('CvProgress: method deprecated');
+        return;
+      }
+
       if (step > this.steps.length) {
         this.currentStep = this.steps.length - 1;
       } else {

package/src/components/cv-radio-button/cv-radio-button.vue

@@ -24,6 +24,7 @@ import radioMixin from '../../mixins/radio-mixin';
 
 export default {
   name: 'CvRadioButton',
+  inheritAttrs: false,
   mixins: [uidMixin, radioMixin],
 };
 </script>

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

@@ -1,30 +1,159 @@
 <template>
-  <component
-    :is="tagType"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :value="value"
-    class="cv-search"
-  >
-    <slot></slot>
-  </component>
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-search bx--form-item">
+    <div class="bx--search" :class="[searchClasses, { 'cv-search': !formItem }]" role="search" ref="search">
+      <label :for="uid" class="bx--label">{{ label }}</label>
+
+      <input
+        :id="uid"
+        class="bx--search-input"
+        v-bind="$attrs"
+        v-model="internalValue"
+        v-on="inputListeners"
+        type="text"
+        role="search"
+        ref="input"
+        :placeholder="placeholder"
+        :aria-labelledby="uid"
+        @focusout="checkFocus"
+      />
+
+      <button
+        type="button"
+        v-if="isToolbarKind"
+        class="bx--toolbar-search__btn"
+        aria-label="Toolbar search"
+        @click="toggleActive(true)"
+        @focusout="checkFocus"
+      >
+        <Search16 v-if="componentsX" class="bx--search-magnifier" />
+        <svg v-else class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+          <path
+            d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+            fill-rule="nonzero"
+          ></path>
+        </svg>
+      </button>
+      <Search16 v-if="componentsX" class="bx--search-magnifier" />
+      <svg
+        v-if="!componentsX && !isToolbarKind"
+        class="bx--search-magnifier"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+          fill-rule="nonzero"
+        ></path>
+      </svg>
+
+      <button
+        type="button"
+        class="bx--search-close"
+        :class="{ 'bx--search-close--hidden': !clearVisible }"
+        title="Clear search input"
+        aria-label="Clear search input"
+        @click="onClearClick"
+      >
+        <Close16 v-if="componentsX" />
+        <svg v-else width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+            fill-rule="evenodd"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </cv-wrapper>
 </template>
 
 <script>
-import CvSearchInnerFormItem from './_cv-search-inner-form-item';
-import CvSearchInner from './_cv-search-inner';
+import uidMixin from '../../mixins/uid-mixin';
+import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import Search16 from '@carbon/icons-vue/lib/search/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
 export default {
   name: 'CvSearch',
-  components: { CvSearchInnerFormItem, CvSearchInner },
+  mixins: [uidMixin, themeMixin],
+  components: { Close16, Search16, CvWrapper },
   inheritAttrs: false,
   props: {
-    value: String,
     formItem: { type: Boolean, default: true },
+    kind: { type: String, default: null },
+    label: String,
+    large: Boolean,
+    value: String,
+    placeholder: { type: String, default: 'Search' },
+  },
+  data() {
+    return {
+      componentsX,
+      clearVisible: this.value ? this.value.length : false,
+      internalValue: this.value,
+      toolbarActive: false,
+    };
+  },
+  watch: {
+    value() {
+      this.clearVisible = this.value ? this.value.length : false;
+      this.internalValue = this.value;
+    },
   },
   computed: {
-    tagType() {
-      return this.formItem ? 'cv-search-inner-form-item' : 'cv-search-inner';
+    // Bind listeners at the component level to the embedded input element and
+    // add our own input listener to service the v-model. See:
+    // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: this.onInput,
+      };
+    },
+    searchClasses() {
+      const themeClass = this.theme.length ? `bx--search--${this.theme}` : '';
+      const sizeClass = `bx--search--${this.large ? 'lg' : 'sm'}`;
+      let toolbarClasses = '';
+      if (this.isToolbarKind) {
+        toolbarClasses = this.toolbarActive ? 'bx--toolbar-search bx--toolbar-search--active' : 'bx--toolbar-search';
+      }
+      return `${themeClass} ${sizeClass} ${toolbarClasses}`;
+    },
+    closeHiddenClass() {
+      return this.clearVisible ? '' : 'bx--search-close--hidden';
+    },
+    isToolbarKind() {
+      return this.kind === 'toolbar';
+    },
+  },
+  methods: {
+    onClearClick() {
+      this.internalValue = '';
+      this.clearVisible = false;
+      this.$emit('input', this.internalValue);
+    },
+    onInput() {
+      this.clearVisible = this.internalValue.length > 0;
+      return this.$emit('input', this.internalValue);
+    },
+    toggleActive(force) {
+      if (typeof force === 'boolean') {
+        this.toolbarActive = force;
+      } else {
+        this.toolbarActive = !this.toolbarActive;
+      }
+      if (this.toolbarActive) {
+        this.$refs.input.focus();
+      }
+    },
+    checkFocus(ev) {
+      if (this.isToolbarKind) {
+        if (!this.$el.contains(ev.relatedTarget)) {
+          this.toolbarActive = false;
+        }
+      }
     },
   },
 };

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

@@ -1,5 +1,7 @@
 <template>
-  <option class="cv-select-option bx--select-option"> <slot></slot> </option>
+  <option class="cv-select-option bx--select-option">
+    <slot></slot>
+  </option>
 </template>
 
 <script>

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

@@ -1,30 +1,162 @@
 <template>
-  <component
-    :is="tagType"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :value="value"
-    class="cv-select"
-  >
-    <slot></slot>
-  </component>
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-select bx--form-item">
+    <div
+      class="bx--select"
+      :class="{
+        'cv-select': !formItem,
+        'bx--select--inline': inline,
+        'bx--select--light': theme === 'light',
+        'bx--select--invalid': isInvalid,
+        'bx--select--disabled': $attrs.disabled,
+      }"
+    >
+      <label
+        :for="uid"
+        class="bx--label"
+        :class="{ 'bx--visually-hidden': hideLabel, 'bx--label--disabled': $attrs.disabled }"
+        >{{ label }}</label
+      >
+
+      <div v-if="!inline && isHelper" class="bx--form__helper-text">
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+
+      <cv-wrapper :tag-type="inline && componentsX ? 'div' : ''" class="bx--select-input--inline__wrapper">
+        <div v-if="componentsX" class="bx--select-input__wrapper" :data-invalid="isInvalid">
+          <select
+            v-bind="$attrs"
+            :id="uid"
+            class="bx--select-input"
+            v-on="inputListeners"
+            ref="select"
+            :value="internalValue"
+          >
+            <slot></slot>
+          </select>
+          <chevron-down-glyph v-if="componentsX" class="bx--select__arrow" />
+          <warning-filled-16 v-if="componentsX && isInvalid" class="bx--select__invalid-icon" />
+        </div>
+
+        <div v-if="componentsX && isInvalid" class="bx--form-requirement">
+          <slot name="invalid-message">{{ invalidMessage }}</slot>
+        </div>
+        <!-- cv-wrapper div bx--select-input--inline__wrapper -->
+      </cv-wrapper>
+
+      <!-- NOTE componentsX -->
+      <select
+        v-if="!componentsX"
+        v-bind="$attrs"
+        :id="uid"
+        class="bx--select-input"
+        v-on="inputListeners"
+        ref="select"
+        :value="value"
+        :data-invalid="isInvalid"
+      >
+        <slot></slot>
+      </select>
+      <svg v-if="!componentsX" class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
+      </svg>
+
+      <div v-if="inline && isHelper" class="bx--form__helper-text">
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+
+      <div v-if="!componentsX && isInvalid" class="bx--form-requirement">
+        <slot name="invalid-message">{{ invalidMessage }}</slot>
+      </div>
+    </div>
+    <!-- cv-wrapper div bx--form-item -->
+  </cv-wrapper>
 </template>
 
 <script>
-import CvSelectInnerFormItem from './_cv-select-inner-form-item';
-import CvSelectInner from './_cv-select-inner';
+import uidMixin from '../../mixins/uid-mixin';
+import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
+import ChevronDownGlyph from '@carbon/icons-vue/lib/chevron--down/index';
+import WarningFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
 
 export default {
   name: 'CvSelect',
-  components: { CvSelectInnerFormItem, CvSelectInner },
   inheritAttrs: false,
+  components: { CvWrapper, ChevronDownGlyph, WarningFilled16 },
+  mixins: [uidMixin, themeMixin],
   props: {
-    value: String,
+    inline: Boolean,
+    invalidMessage: { type: String, default: null },
+    helperText: { type: String, default: null },
     formItem: { type: Boolean, default: true },
+    hideLabel: Boolean,
+    label: { type: String, required: true },
+    // *********************
+    // declare here to prevent the following from being added to the select
+    // *********************
+    // multiple does not work with styling from carbon-components 9.20
+    multiple: {
+      type: String,
+      validator: () => {
+        console.warn('property multiple not supported in CvSelect');
+        return false;
+      },
+    },
+    value: { type: String, default: null },
+  },
+  beforeCreate() {
+    // *********************
+    // delete here to prevent the following from being added to the select
+    // *********************
+    // multiple does not work with styling from carbon-components 9.20
+    delete this.$attrs.multiple;
+  },
+  data() {
+    return { componentsX, dataValue: null };
+  },
+  mounted() {
+    // this is needed to ensure selected for an option when no value is supplied
+    if (this.value === null) {
+      let options = this.$el.querySelectorAll('option');
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].attributes.selected) {
+          this.dataValue = options[i].value;
+        }
+      }
+    }
+  },
+  watch: {
+    value() {
+      // this is needed to ensure selected for an option when no value is supplied
+      if (this.value === null) {
+        let options = this.$el.querySelectorAll('option');
+        for (let i = 0; i < options.length; i++) {
+          if (options[i].attributes.selected) {
+            this.dataValue = options[i].value;
+          }
+        }
+      }
+    },
   },
   computed: {
-    tagType() {
-      return this.formItem ? 'cv-select-inner-form-item' : 'cv-select-inner';
+    // Bind listeners at the component level to the embedded input element and
+    // add our own input listener to service the v-model. See:
+    // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: event => this.$emit('input', event.target.value),
+      };
+    },
+    isInvalid() {
+      return this.$slots['invalid-message'] !== undefined || (this.invalidMessage && this.invalidMessage.length);
+    },
+    isHelper() {
+      return this.$slots['helper-text'] !== undefined || (this.helperText && this.helperText.length);
+    },
+    internalValue() {
+      return this.dataValue ? this.dataValue : this.value;
     },
   },
 };