@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,173 +0,0 @@
-<template>
-  <div
-    :class="[
-      `cv-text-input`,
-      `${carbonPrefix}--form-item`,
-      `${carbonPrefix}--text-input-wrapper`,
-      { [`${carbonPrefix}--password-input-wrapper`]: isPassword },
-    ]"
-  >
-    <label
-      :for="uid"
-      :class="[
-        `${carbonPrefix}--label`,
-        {
-          [`${carbonPrefix}--label--disabled`]: $attrs.disabled !== undefined && $attrs.disabled,
-        },
-      ]"
-      >{{ label }}</label
-    >
-    <div
-      :class="[
-        `${carbonPrefix}--text-input__field-wrapper`,
-        { [`${carbonPrefix}--text-input__field-wrapper--warning`]: !isInvalid && isWarn },
-      ]"
-      :data-invalid="isInvalid"
-    >
-      <WarningFilled16 v-if="isInvalid" :class="`${carbonPrefix}--text-input__invalid-icon`" />
-      <WarningAltFilled16
-        v-if="isWarn"
-        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
-      />
-
-      <input
-        :id="uid"
-        :class="[
-          `${carbonPrefix}--text-input`,
-          {
-            [`${carbonPrefix}--text-input--light`]: isLight,
-            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
-            [`${carbonPrefix}--text-input--warning`]: isWarn,
-            [`${carbonPrefix}--password-input`]: isPassword,
-          },
-        ]"
-        v-bind="$attrs"
-        :value="value"
-        v-on="inputListeners"
-        :data-toggle-password-visibility="isPassword"
-        :type="dataType"
-        ref="input"
-      />
-      <button
-        v-if="isPassword"
-        :class="[
-          `${carbonPrefix}--btn`,
-          `${carbonPrefix}--text-input--password__visibility__toggle`,
-          `${carbonPrefix}--tooltip__trigger`,
-          `${carbonPrefix}--tooltip--a11y`,
-          `${carbonPrefix}--tooltip--bottom`,
-          `${carbonPrefix}--tooltip--align-center`,
-        ]"
-        @click="togglePasswordVisibility"
-        type="button"
-      >
-        <span :class="`${carbonPrefix}--assistive-text`">{{ passwordHideShowLabel }}</span>
-        <ViewOff16 v-if="isPasswordVisible" :class="`${carbonPrefix}--icon-visibility-off`" />
-        <View16 v-else :class="`${carbonPrefix}--icon-visibility-off`" />
-      </button>
-    </div>
-    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
-      <slot name="invalid-message">{{ invalidMessage }}</slot>
-    </div>
-    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
-      <slot name="warn-text">{{ warnText }}</slot>
-    </div>
-    <div
-      v-if="isHelper"
-      :class="[
-        `${carbonPrefix}--form__helper-text`,
-        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
-      ]"
-    >
-      <slot name="helper-text">{{ helperText }}</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, themeMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
-import { WarningFilled16, WarningAltFilled16, View16, ViewOff16 } from '@carbon/icons-vue';
-
-export default {
-  name: 'CvTextInput',
-  components: { WarningFilled16, WarningAltFilled16, View16, ViewOff16 },
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  props: {
-    helperText: { type: String, default: undefined },
-    invalidMessage: { type: String, default: undefined },
-    label: String,
-    passwordHideLabel: { type: String, default: 'Hide password' },
-    passwordShowLabel: { type: String, default: 'Show password' },
-    passwordVisible: Boolean,
-    type: String,
-    value: String,
-    warnText: { type: String, default: undefined },
-  },
-  data() {
-    return {
-      dataPasswordVisible: this.isPassword && this.passwordVisible,
-      dataType: this.type,
-      isHelper: false,
-      isInvalid: false,
-      isWarn: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  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:
-    // 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),
-      };
-    },
-    isPassword() {
-      return this.type === 'password';
-    },
-    isPasswordVisible() {
-      return this.isPassword && this.dataPasswordVisible;
-    },
-    passwordHideShowLabel() {
-      return this.isPasswordVisible ? this.passwordHideLabel : this.passwordShowLabel;
-    },
-  },
-  methods: {
-    checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on updated
-      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
-      this.isWarn = !this.isInvalid && !!(this.$slots['warn-text'] || (this.warnText && this.warnText.length));
-      this.isHelper =
-        !this.isInvalid &&
-        !this.isWarn &&
-        !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
-    },
-    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-text-input/index.js

@@ -1,2 +0,0 @@
-import CvTextInput from './cv-text-input';
-export { CvTextInput };

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

@@ -1,22 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    ref="target"
-    data-tile="clickable"
-    :class="`cv-tile-clickable ${carbonPrefix}--tile--clickable`"
-    tabindex="0"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvTileClickable',
-  mixins: [linkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
-};
-</script>

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

@@ -1,92 +0,0 @@
-<template>
-  <button
-    type="button"
-    :style="styleObject"
-    @click="toggle"
-    :class="[
-      `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
-      { [`${carbonPrefix}--tile--is-expanded`]: internalExpanded },
-    ]"
-  >
-    <div :class="`${carbonPrefix}--tile-content`">
-      <span data-tile-atf :class="`${carbonPrefix}--tile-content__above-the-fold`" ref="aboveFold">
-        <slot>
-          <!-- Above the fold content here -->
-        </slot>
-      </span>
-      <div :class="`${carbonPrefix}--tile__chevron`">
-        <span>{{ chevronLabel }}</span>
-        <ChevronDown16 />
-      </div>
-      <span
-        :class="`${carbonPrefix}--tile-content__below-the-fold`"
-        ref="belowFold"
-        v-show="internalExpanded || initialized"
-      >
-        <slot name="below">
-          <!-- Rest of the content here -->
-        </slot>
-      </span>
-    </div>
-  </button>
-</template>
-
-<script>
-import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import { carbonPrefixMixin, methodsMixin } from '../../mixins';
-
-export default {
-  name: 'CvTileExpandable',
-  mixins: [carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
-  props: {
-    expanded: Boolean,
-    tileCollapsedLabel: String,
-    tileExpandedLabel: String,
-  },
-  components: { ChevronDown16 },
-  data() {
-    return {
-      styleObject: {
-        maxHeight: 'initial',
-      },
-      initialized: false,
-      internalExpanded: this.expanded,
-    };
-  },
-  watch: {
-    expanded(val) {
-      if (val !== this.internalExpanded) {
-        this.toggle(val);
-      }
-    },
-  },
-  computed: {
-    chevronLabel() {
-      return this.internalExpanded ? this.tileExpandedLabel : this.tileCollapsedLabel;
-    },
-  },
-  methods: {
-    toggle(force) {
-      let currentHeight = this.$el.getBoundingClientRect().height;
-      if (!this.initialized) {
-        this.styleObject.maxHeight = `${currentHeight}px`;
-        this.initialized = true;
-      }
-
-      this.$nextTick(() => {
-        const forceType = typeof force;
-        this.internalExpanded = forceType === 'boolean' ? force : !this.internalExpanded;
-
-        const belowFoldHeight = this.$refs.belowFold.getBoundingClientRect().height;
-
-        if (this.internalExpanded) {
-          currentHeight += belowFoldHeight;
-        } else {
-          currentHeight -= belowFoldHeight;
-        }
-        this.styleObject.maxHeight = `${currentHeight}px`;
-      });
-    },
-  },
-};
-</script>

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

@@ -1,48 +0,0 @@
-<template>
-  <label
-    :for="uid"
-    :aria-label="ariaLabel"
-    :class="[
-      `cv-tile-selectable ${carbonPrefix}--tile--selectable`,
-      { [`${carbonPrefix}--tile--is-selected`]: isChecked },
-    ]"
-    data-tile="selectable"
-    tabindex="0"
-    :data-contained-checkbox-state="isChecked"
-    ref="target"
-  >
-    <input
-      tabindex="-1"
-      data-tile-input
-      :id="uid"
-      type="checkbox"
-      :checked="isChecked"
-      :class="`${carbonPrefix}--tile-input`"
-      v-bind="$attrs"
-      v-on="inputListeners"
-    />
-    <div :class="`${carbonPrefix}--tile__checkmark`">
-      <CheckmarkFilled16 />
-    </div>
-    <div :class="`${carbonPrefix}--tile-content`">
-      <slot>
-        <!-- Tile content here -->
-      </slot>
-    </div>
-  </label>
-</template>
-
-<script>
-import { uidMixin, checkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
-
-export default {
-  name: 'CvTileSelectable',
-  mixins: [uidMixin, checkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
-  components: { CheckmarkFilled16 },
-  inheritAttrs: false,
-  props: {
-    ariaLabel: { type: String, default: 'tile' },
-  },
-};
-</script>

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

@@ -1,11 +0,0 @@
-<template>
-  <div class="cv-tile-standard">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CvTileStandard',
-};
-</script>

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

@@ -1,83 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: isLight }]"
-    :checked="selected"
-    :expanded="expanded"
-    :tileCollapsedLabel="tileCollapsedLabel"
-    :tileExpandedLabel="tileExpandedLabel"
-    v-bind="$attrs"
-    v-on="$listeners"
-    ref="tile"
-  >
-    <!-- can i now click on this -->
-    <template>
-      <slot></slot>
-    </template>
-    <template slot="below">
-      <slot name="below"></slot>
-    </template>
-  </component>
-</template>
-
-<script>
-import { themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-import CvTileClickable from './_cv-tile-clickable';
-import CvTileExpandable from './_cv-tile-expandable';
-import CvTileSelectable from './_cv-tile-selectable';
-import CvTileStandard from './_cv-tile-standard';
-
-export default {
-  name: 'CvTile',
-  inheritAttrs: false,
-  model: {
-    // required for selectable kind
-    prop: 'modelValue',
-    event: 'modelEvent',
-  },
-  mixins: [themeMixin, carbonPrefixMixin, methodsMixin({ tile: ['blur', 'focus'] })],
-  components: {
-    CvTileClickable,
-    CvTileExpandable,
-    CvTileSelectable,
-    CvTileStandard,
-  },
-  props: {
-    expanded: Boolean,
-    selected: Boolean,
-    tileCollapsedLabel: { type: String, default: 'Tile collapsed' },
-    tileExpandedLabel: { type: String, default: 'Tile expanded' },
-    kind: {
-      type: String,
-      default: '',
-      validator: value => ['clickable', 'expandable', 'selectable', 'standard', ''].includes(value),
-    },
-  },
-  computed: {
-    tagType() {
-      switch (this.kind) {
-        case 'clickable':
-          return 'cv-tile-clickable';
-        case 'selectable':
-          return 'cv-tile-selectable';
-        case 'expandable':
-          return 'cv-tile-expandable';
-        default:
-          return 'cv-tile-standard';
-      }
-    },
-  },
-  // methods: {
-  //   focus() {
-  //     if (this.$children[0].focus) {
-  //       this.$children[0].focus();
-  //     }
-  //   },
-  //   blur() {
-  //     if (this.$children[0].blur) {
-  //       this.$children[0].blur();
-  //     }
-  //   },
-  // },
-};
-</script>

package/src/components/cv-tile/index.js

@@ -1,2 +0,0 @@
-import CvTile from './cv-tile';
-export { CvTile };

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

@@ -1,138 +0,0 @@
-<template>
-  <div :class="`cv-time-picker ${carbonPrefix}--form-item`">
-    <div
-      :class="[`${carbonPrefix}--time-picker`, { [`${carbonPrefix}--time-picker--light`]: isLight }]"
-      :data-invalid="isInvalid"
-    >
-      <div :class="`${carbonPrefix}--time-picker__input`">
-        <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
-        <input
-          ref="input"
-          :id="uid"
-          type="text"
-          :class="[
-            `${carbonPrefix}--time-picker__input-field ${carbonPrefix}--text-input`,
-            { [`${carbonPrefix}--text-input--light`]: isLight },
-          ]"
-          :pattern="pattern"
-          v-bind="$attrs"
-          :placeholder="placeholder"
-          :maxlength="placeholder.length"
-          :value="time"
-          :disabled="disabled"
-          @input="$emit('update:time', $event.target.value)"
-        />
-      </div>
-      <cv-select
-        v-if="ampm !== '24'"
-        :class="`${carbonPrefix}--time-picker__select`"
-        :form-item="false"
-        hide-label
-        :label="ampmSelectLabel"
-        @change="$emit('update:ampm', $event)"
-        :value="ampm"
-        :disabled="disabled"
-      >
-        <cv-select-option :class="`${carbonPrefix}--select-option`" value="AM">AM</cv-select-option>
-        <cv-select-option :class="`${carbonPrefix}--select-option`" value="PM">PM</cv-select-option>
-      </cv-select>
-      <div v-else v-html="`&nbsp;`"></div>
-
-      <cv-select
-        :class="`${carbonPrefix}--time-picker__select`"
-        :form-item="false"
-        hide-label
-        :label="timezonesSelectLabel"
-        v-if="timezones.length > 0"
-        :value="validTimezone"
-        @change="$emit('update:timezone', $event)"
-        :disabled="disabled"
-      >
-        <cv-select-option
-          :class="`${carbonPrefix}--select-option`"
-          v-for="item in timezones"
-          :key="item.value"
-          :value="item.value"
-          >{{ item.label }}</cv-select-option
-        >
-      </cv-select>
-    </div>
-    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
-      <slot name="invalid-message">{{ invalidMessage }}</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
-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, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  inheritAttrs: false,
-  props: {
-    ampm: {
-      type: String,
-      default: 'AM',
-    },
-    ampmSelectLabel: { type: String, default: 'Select AM/PM' },
-    disabled: Boolean,
-    invalidMessage: { type: String, default: undefined },
-    label: { type: String, default: 'Select a time' },
-    pattern: { type: String, default: '([01][0-9]:[0-6][0-9])' },
-    placeholder: { type: String, default: 'hh:mm' },
-    time: String,
-    timezone: String,
-    timezones: { type: Array, default: () => [] },
-    timezonesSelectLabel: { type: String, default: 'Select time zone' },
-  },
-  data() {
-    return {
-      isInvalid: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  computed: {
-    validAmpm() {
-      let result = this.ampm;
-      if (!['AM', 'PM', '24'].includes(this.ampm)) {
-        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);
-      }
-      return result;
-    },
-    validTimezone() {
-      // Validate timezone setting
-      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.`);
-          // set to first valid value
-          result = this.timezones[0].value;
-          this.$emit('update:timezone', result);
-        }
-      }
-      return result;
-    },
-  },
-  methods: {
-    checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on updated
-      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
-    },
-  },
-};
-</script>

package/src/components/cv-time-picker/index.js

@@ -1,2 +0,0 @@
-import CvTimePicker from './cv-time-picker';
-export { CvTimePicker };

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

@@ -1,72 +0,0 @@
-<template>
-  <div
-    data-notification
-    :class="[
-      `cv-notification ${carbonPrefix}--toast-notification`,
-      `${carbonPrefix}--toast-notification--${kind.toLowerCase()}`,
-      { [`${carbonPrefix}--toast-notification--low-contrast`]: lowContrast },
-    ]"
-    v-on="$listeners"
-    :role="isAlert ? 'alert' : undefined"
-    :aria-live="!isAlert ? 'polite' : false"
-  >
-    <component :is="icon" :class="`${carbonPrefix}--toast-notification__icon`" />
-    <div :class="`${carbonPrefix}--toast-notification__details`">
-      <h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
-      <p :class="`${carbonPrefix}--toast-notification__subtitle`" v-html="subTitle"></p>
-      <p :class="`${carbonPrefix}--toast-notification__caption`" v-html="caption"></p>
-    </div>
-    <button
-      v-if="!hideCloseButton"
-      :aria-label="closeAriaLabel"
-      type="button"
-      data-notification-btn
-      :class="`${carbonPrefix}--toast-notification__close-button`"
-      @click="$emit('close')"
-    >
-      <Close20 :class="`${carbonPrefix}--toast-notification__close-icon`" />
-    </button>
-  </div>
-</template>
-
-<script>
-import { notificationMixin, carbonPrefixMixin } from '../../mixins';
-import ErrorFilled20 from '@carbon/icons-vue/es/error--filled/20';
-import CheckmarkFilled20 from '@carbon/icons-vue/es/checkmark--filled/20';
-import WarningFilled20 from '@carbon/icons-vue/es/warning--filled/20';
-import Close20 from '@carbon/icons-vue/es/close/20';
-import InformationFilled20 from '@carbon/icons-vue/es/information--filled/20';
-
-export default {
-  name: 'CvToastNotification',
-  components: { Close20 },
-  mixins: [notificationMixin, carbonPrefixMixin],
-  props: {
-    caption: String,
-    closeAriaLabel: { type: String, default: 'Dismiss notification' },
-    hideCloseButton: Boolean,
-    kind: {
-      type: String,
-      default: 'info',
-      validator: val => ['error', 'info', 'warning', 'success'].includes(val),
-    },
-    lowContrast: Boolean,
-  },
-  computed: {
-    icon() {
-      switch (this.kind) {
-        case 'error':
-          return ErrorFilled20;
-        case 'warning':
-          return WarningFilled20;
-        case 'success':
-          return CheckmarkFilled20;
-        case 'info':
-          return InformationFilled20;
-        default:
-          return '';
-      }
-    },
-  },
-};
-</script>

package/src/components/cv-toast-notification/index.js

@@ -1,2 +0,0 @@
-import CvToastNotification from './cv-toast-notification';
-export { CvToastNotification };

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

@@ -1,25 +0,0 @@
-<template>
-  <div :class="`cv-toggle ${carbonPrefix}--form-item`" :id="uid">
-    <label
-      :class="`${carbonPrefix}--toggle__label ${carbonPrefix}--skeleton`"
-      :for="uid"
-      :aria-label="label ? 'Toggle is loading' : label"
-    >
-      <span :class="`${carbonPrefix}--toggle__label-text`" />
-      <span :class="`${carbonPrefix}--toggle__text--left`" />
-      <span :class="`${carbonPrefix}--toggle__appearance`" />
-      <span :class="`${carbonPrefix}--toggle__text--right`" />
-    </label>
-  </div>
-</template>
-
-<script>
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvToggleSkeleton',
-  mixins: [uidMixin, carbonPrefixMixin],
-  props: {
-    label: { type: String, default: 'Toggle is loading' },
-  },
-};
-</script>