@carbon/vue 1.0.2 → 1.1.3

package/src/assets/styles/_carbon-helpers.scss

@@ -1,8 +0,0 @@
-//---------------------------------------------------------------------------
-// Carbon SCSS vars, mixins, functions, etc. for @import'ing into components.
-//---------------------------------------------------------------------------
-
-@import '~carbon-components/scss/globals/scss/colors';
-@import '~carbon-components/scss/globals/scss/layer';
-@import '~carbon-components/scss/globals/scss/typography';
-@import '~carbon-components/scss/globals/scss/vars';

package/src/components/cv-checkbox/_cv-checkbox-inner-form-item.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="bx--form-item">
-    <cv-checkbox-inner v-bind="$attrs" v-on="$listeners">
-      <slot />
-    </cv-checkbox-inner>
-  </div>
-</template>
-
-<script>
-import CvCheckboxInner from './_cv-checkbox-inner';
-
-export default {
-  name: 'CvSelectInnerFormItem',
-  components: { CvCheckboxInner },
-  inheritAttrs: false,
-};
-</script>
-
-<style lang="scss"></style>

package/src/components/cv-checkbox/_cv-checkbox-inner.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
-    <label
-      :class="[
-        'bx--checkbox-label',
-        {
-          'bx--label--disabled':
-            $attrs.disabled !== undefined && $attrs.disabled,
-          'bx--checkbox-label__focus': hasFocus,
-        },
-      ]"
-      :data-contained-checkbox-state="isChecked"
-    >
-      <input
-        ref="input"
-        v-bind="$attrs"
-        v-on="inputListeners"
-        class="bx--checkbox"
-        type="checkbox"
-        :checked="isChecked === true"
-        :aria-checked="`${isChecked}`"
-        @focus="onFocus"
-        @blur="onBlur"
-        :value="value"
-      />
-      {{ label }}
-    </label>
-  </div>
-</template>
-
-<script>
-import checkMixin from '../../mixins/check-mixin';
-
-export default {
-  name: 'CvCheckboxInner',
-  mixins: [checkMixin],
-  inheritAttrs: false,
-  props: {
-    label: String,
-    mixed: Boolean,
-  },
-  data() {
-    return {
-      dataMixed: this.mixed,
-      hasFocus: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.hasFocus = true;
-    },
-    onBlur() {
-      this.hasFocus = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss"></style>

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

@@ -1,51 +0,0 @@
-<template>
-  <li class="cv-progress-step bx--progress-step" :class="stateClass">
-    <cv-progress-step-complete v-if="isComplete" />
-    <cv-progress-step-incomplete v-if="!isComplete" :is-current="isCurrent" />
-    <p class="bx--progress-label">{{ label }}</p>
-    <span class="bx--progress-line"></span>
-  </li>
-</template>
-
-<script>
-import CvProgressStepComplete from './_cv-progress-step-complete';
-import CvProgressStepIncomplete from './_cv-progress-step-incomplete';
-
-const states = {
-  incomplete: 'incomplete',
-  current: 'current',
-  complete: 'complete',
-};
-
-export default {
-  name: 'CvProgressStep',
-  components: {
-    CvProgressStepComplete,
-    CvProgressStepIncomplete,
-  },
-  props: {
-    label: String,
-    state: {
-      type: String,
-      validator(val) {
-        return states[val] !== undefined;
-      },
-    },
-  },
-  computed: {
-    isComplete() {
-      return this.state === states.complete;
-    },
-    isCurrent() {
-      return this.state === states.current;
-    },
-    stateClass() {
-      if (this.state === states.incmoplete) {
-        return '';
-      } else {
-        return `bx--progress-step--${this.state}`;
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-search/_cv-search-inner-form-item.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="bx--form-item">
-    <cv-search-inner v-bind="$attrs" v-on="$listeners" :value="value">
-      <slot></slot>
-    </cv-search-inner>
-  </div>
-</template>
-
-<script>
-import CvSearchInner from './_cv-search-inner';
-
-export default {
-  name: 'CvSearchInnerFormItem',
-  components: { CvSearchInner },
-  inheritAttrs: false,
-  props: {
-    value: String,
-  },
-};
-</script>
-
-<style lang="scss"></style>

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

@@ -1,162 +0,0 @@
-<template>
-  <div class="bx--search" :class="searchClasses" role="search" ref="search">
-    <label :id="uid" class="bx--label" for="search__input-1">{{ 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"
-    >
-      <svg
-        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>
-    <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
-      type="button"
-      class="bx--search-close"
-      :class="{ 'bx--search-close--hidden': !clearVisible }"
-      title="Clear search input"
-      aria-label="Clear search input"
-      @click="onClearClick"
-    >
-      <svg
-        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>
-</template>
-
-<script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
-
-export default {
-  name: 'CvSearchInner',
-  mixins: [uidMixin, themeMixin],
-  inheritAttrs: false,
-  props: {
-    kind: { type: String, default: null },
-    label: String,
-    large: Boolean,
-    value: String,
-    placeholder: { type: String, default: 'Search' },
-  },
-  data() {
-    return {
-      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: {
-    // 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;
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss"></style>

package/src/components/cv-select/_cv-select-inner-form-item.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="bx--form-item">
-    <cv-select-inner v-bind="$attrs" v-on="$listeners" :value="value">
-      <slot></slot>
-    </cv-select-inner>
-  </div>
-</template>
-
-<script>
-import CvSelectInner from './_cv-select-inner';
-
-export default {
-  name: 'CvSelectInnerFormItem',
-  components: { CvSelectInner },
-  inheritAttrs: false,
-  props: {
-    value: String,
-  },
-};
-</script>
-
-<style lang="scss"></style>

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

@@ -1,78 +0,0 @@
-<template>
-  <!-- <div class="cv-select bx--form-item" :is="formItem ? 'div' : 'span'"> -->
-  <div
-    class="bx--select"
-    :class="{
-      'bx--select--inline': inline,
-      'bx--select--light': theme === 'light',
-    }"
-  >
-    <select
-      v-bind="$attrs"
-      :id="uid"
-      class="bx--select-input"
-      v-on="inputListeners"
-      ref="select"
-      :value="value"
-    >
-      <slot></slot>
-    </select>
-    <svg 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>
-    <label
-      :for="uid"
-      class="bx--label"
-      :class="{ 'bx--visually-hidden': hideLabel }"
-      >{{ label }}</label
-    >
-  </div>
-</template>
-
-<script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
-
-export default {
-  name: 'CvSelectInner',
-  inheritAttrs: false,
-  mixins: [uidMixin, themeMixin],
-  props: {
-    inline: Boolean,
-    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 },
-  },
-  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;
-  },
-  computed: {
-    // 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),
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss"></style>