@carbon/vue 2.42.0 → 2.43.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,9 +64,9 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.41.0",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
-    "carbon-components": "10.46.0",
+    "@carbon/icons-vue": "10.49.1",
+    "@carbon/telemetry": "^0.1.0",
+    "carbon-components": "10.56.0",
     "flatpickr": "4.6.9",
     "vue": "^2.6.14"
   },
@@ -75,5 +75,5 @@
     "eslint-plugin-prettier": "^3.3.1",
     "vue-template-compiler": "^2.6.14"
   },
-  "gitHead": "ab0c2e9ac8f61f208d73291274108ce5c25cb527"
+  "gitHead": "fead16d4b7d1f363f99c49aaeb614749ddf128ec"
 }

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

@@ -31,7 +31,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

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

@@ -23,7 +23,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

package/src/components/cv-aspect-ratio/cv-aspect-ratio.vue

@@ -4,6 +4,8 @@
 
 <script>
 import { carbonPrefixMixin } from '../../mixins';
+
+export const ratios = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
 export default {
   name: 'CvAspectRatio',
   mixins: [carbonPrefixMixin],
@@ -11,8 +13,7 @@ export default {
     ratio: {
       type: String,
       validator: val => {
-        const options = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
-        const result = options.includes(val);
+        const result = ratios.includes(val);
         if (!result) {
           console.warn(`Invalid options supplied to "CvAspectRation"-"${val}".`);
         }

package/src/components/cv-aspect-ratio/index.js

@@ -1,2 +1,2 @@
-import CvAspectRatio from './cv-aspect-ratio';
-export { CvAspectRatio };
+import CvAspectRatio, { ratios } from './cv-aspect-ratio';
+export { CvAspectRatio, ratios };

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

@@ -1,5 +1,11 @@
 <template>
-  <nav :class="`${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`" :aria-label="ariaLabel">
+  <nav
+    :class="[
+      `${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
+    ]"
+    :aria-label="ariaLabel"
+  >
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
@@ -18,6 +24,7 @@ export default {
   },
   props: {
     ariaLabel: { type: String, default: 'breadcrumb' },
+    noTrailingSlash: Boolean,
   },
 };
 </script>

package/src/components/cv-button/button-mixin.js

@@ -13,6 +13,7 @@ export default {
       },
     },
     iconHref: {
+      deprecated: true,
       type: String,
       default: undefined,
       validator(val) {
@@ -29,6 +30,7 @@ export default {
         ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--ghost', 'danger--tertiary'].includes(val),
     },
     small: {
+      deprecated: true,
       type: Boolean,
       default: undefined,
       validator(val) {
@@ -56,7 +58,8 @@ export default {
     buttonClassOpts() {
       return (opts = {}) => {
         const classes = [`${carbonSettings.prefix}--btn`];
-        const lowerCaseKind = this.kind.toLowerCase();
+        // ensure lower case and default to primary
+        const _kind = this.kind ? this.kind.toLowerCase() : 'primary';
 
         if (opts.skeleton) {
           classes.push(`${carbonSettings.prefix}--skeleton`);
@@ -64,13 +67,13 @@ export default {
 
         if (opts.iconOnly) {
           classes.push(`${carbonSettings.prefix}--btn--icon-only`);
-          if (this.selected && lowerCaseKind === 'ghost') {
+          if (this.selected && _kind === 'ghost') {
             classes.push(`${carbonSettings.prefix}--btn--selected`);
           }
         }
 
-        if (this.kind && !opts.skeleton) {
-          classes.push(`${carbonSettings.prefix}--btn--${lowerCaseKind}`);
+        if (_kind && !opts.skeleton) {
+          classes.push(`${carbonSettings.prefix}--btn--${_kind}`);
         }
 
         let size = this.size ? this.size : this.small && 'sm';

package/src/components/cv-button/consts.js

@@ -0,0 +1,14 @@
+export const buttonKinds = [
+  '',
+  'primary',
+  'secondary',
+  'tertiary',
+  'ghost',
+  'danger',
+  'danger--ghost',
+  'danger--tertiary',
+];
+export const buttonSizes = ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'];
+
+const CvButtonConsts = { buttonKinds, buttonSizes };
+export default CvButtonConsts;

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

@@ -29,12 +29,12 @@ export default {
   mixins: [buttonMixin, carbonPrefixMixin],
   components: { CvSvg },
   props: {
-    label: { type: String, required: true },
+    label: { type: String, default: undefined },
     selected: Boolean,
     tipPosition: {
       type: String,
       default: 'bottom',
-      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
     },
     tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },

package/src/components/cv-code-snippet/cv-code-snippet-skeleton.vue

@@ -19,7 +19,7 @@ export default {
   name: 'CvCodeSnippetSkeleton',
   mixins: [carbonPrefixMixin],
   props: {
-    kind: { type: String, default: 'oneline' },
+    kind: { type: String, default: 'oneline', validator: val => ['multiline', 'oneline'].includes(val) },
   },
   computed: {
     multi() {

package/src/components/cv-code-snippet/cv-code-snippet.vue

@@ -14,7 +14,7 @@
     <!-- textarea cannot be fully hidden for clipboard to work -->
     <textarea
       class="cv-code-snippet__clippy"
-      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"
+      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
       aria-hidden="true"
       ref="clippy"
     ></textarea>

package/src/components/cv-data-table/cv-data-table-heading.vue

@@ -28,7 +28,7 @@
 
 <script>
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
-import Arrows16 from '@carbon/icons-vue/es/arrows/16';
+import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
 

package/src/components/cv-data-table/cv-data-table-skeleton.vue

@@ -1,6 +1,6 @@
 <template>
   <cv-data-table skeleton :data="data" :columns="cols" v-on="$listeners" v-bind="$attrs">
-    <template v-if="hasBatchActions" slot="helper-text">
+    <template v-if="hasHelperText" slot="helper-text">
       <slot name="helper-text" />
     </template>
 
@@ -29,7 +29,6 @@ export default {
   },
   props: {
     columns: { type: [Array, Number], default: DEFAULTS.COLS },
-    hasExpandables: Boolean,
     rows: { type: Number, default: DEFAULTS.ROWS },
   },
   data() {

package/src/components/cv-feedback-button/_cv-feedback-button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    aria-label="ariaLabel"
+    :aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -148,6 +148,7 @@ export default {
     buttonLabel: {
       type: String,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvFileUploader: button-label prop deprecated in favour of drop-target-label');
@@ -213,20 +214,30 @@ export default {
     },
     addFiles(files) {
       for (const file of files) {
-        const internalFile = {
-          state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
-          file,
-          invalidMessageTitle: '',
-          invalidMessage: '',
-        };
+        const internalFile = this.internalFiles.find(item => item.file.name === file.name);
 
-        if (file.messageBundle) {
-          internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
-          internalFile.invalidMessage = file.messageBundle.invalidMessage;
-          delete file.messageBundle;
+        if (internalFile) {
+          internalFile.state = this.initialStateUploading ? STATES.UPLOADING : STATES.NONE;
+          internalFile.invalidMessageTitle = '';
+          internalFile.invalidMessage = '';
+        } else {
+          const internalFile = {
+            state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
+            file,
+            invalidMessageTitle: '',
+            invalidMessage: '',
+          };
+
+          if (file.messageBundle) {
+            internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
+            internalFile.invalidMessage = file.messageBundle.invalidMessage;
+            delete file.messageBundle;
+          }
+          this.internalFiles.push(internalFile);
         }
-        this.internalFiles.push(internalFile);
       }
+      // clear input we do not need to maintain it
+      this.$refs['file-input'].value = '';
       this.$emit('change', this.internalFiles);
     },
     onChange(ev) {

package/src/components/cv-inline-loading/cv-inline-loading.vue

@@ -40,6 +40,7 @@ export default {
     active: {
       type: Boolean,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvInlineLoading: active prop deprecated in favour of state prop');

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

@@ -4,7 +4,13 @@
     v-on="$listeners"
     v-bind="linkProps"
     class="cv-link"
-    :class="[`${carbonPrefix}--link`, { [`${carbonPrefix}--link--inline`]: inline }]"
+    :class="[
+      `${carbonPrefix}--link`,
+      {
+        [`${carbonPrefix}--link--disabled`]: disabled,
+        [`${carbonPrefix}--link--inline`]: inline,
+      },
+    ]"
   >
     <slot></slot>
   </component>
@@ -17,6 +23,7 @@ export default {
   name: 'CvLink',
   mixins: [linkMixin, carbonPrefixMixin],
   props: {
+    disabled: Boolean,
     inline: Boolean,
   },
 };

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

@@ -5,7 +5,7 @@
       :class="{
         'cv-loading': !overlay,
         [`${carbonPrefix}--loading`]: active || stopping,
-        [`${carbonPrefix}--loading--stop`]: !active && stopping,
+        [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
         [`${carbonPrefix}--loading--small`]: small,
       }"
       ref="loading"
@@ -55,6 +55,7 @@ export default {
   },
   data() {
     return {
+      stopped: false,
       stopping: false,
     };
   },
@@ -69,10 +70,12 @@ export default {
         this.$refs.loading.removeEventListener('animationend', this.onEnd);
 
         this.stopping = false;
+        this.stopped = true;
         this.$emit('loading-end');
       }
     },
     onActiveUpdate(newValue) {
+      this.stopped = false;
       this.stopping = !newValue;
       if (!newValue) {
         this.$refs.loading.addEventListener('animationend', this.onEnd);

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

@@ -1,7 +1,6 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input" :class="`${carbonPrefix}--form-item`">
     <div
-      data-numberinput
       :class="[
         `${carbonPrefix}--number`,
         {
@@ -14,20 +13,12 @@
       :data-invalid="isInvalid"
     >
       <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
-      <div :class="`${carbonPrefix}--form__helper-text`" v-if="isHelper && mobile">
-        <slot name="helper-text">{{ helperText }}</slot>
-      </div>
-      <div :class="`${carbonPrefix}--number__input-wrapper`">
-        <button
-          v-if="mobile"
-          :class="`${carbonPrefix}--number__control-btn down-icon`"
-          @click="doDown"
-          type="button"
-          :aria-label="ariaLabelForDownButton"
-          :disabled="disabled"
-        >
-          <Subtract16 />
-        </button>
+      <div
+        :class="[
+          `${carbonPrefix}--number__input-wrapper`,
+          { [`${carbonPrefix}--number__input-wrapper--warning`]: isWarn },
+        ]"
+      >
         <input
           :data-invalid="isInvalid"
           :id="uid"
@@ -41,8 +32,9 @@
           :max="max"
           ref="input"
         />
-        <WarningFilled16 v-if="isInvalid && !mobile" :class="`${carbonPrefix}--number__invalid`" />
-        <div :class="`${carbonPrefix}--number__controls`" v-if="!mobile">
+        <WarningFilled16 v-if="isInvalid" :class="iconClasses" />
+        <WarningAltFilled16 v-if="isWarn && !isInvalid" :class="iconClasses" />
+        <div :class="`${carbonPrefix}--number__controls`">
           <button
             :class="`${carbonPrefix}--number__control-btn down-icon`"
             @click="doDown"
@@ -68,21 +60,14 @@
           </button>
           <div :class="`${carbonPrefix}--number__rule-divider`" />
         </div>
-        <button
-          v-else
-          :class="`${carbonPrefix}--number__control-btn up-icon`"
-          @click="doUp"
-          type="button"
-          :aria-label="ariaLabelForUpButton"
-          :disabled="disabled"
-        >
-          <Add16 />
-        </button>
       </div>
       <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
         <slot name="invalid-message">{{ invalidMessage }}</slot>
       </div>
-      <div :class="`${carbonPrefix}--form__helper-text`" v-if="!isInvalid && isHelper && !mobile">
+      <div :class="`${carbonPrefix}--form-requirement`" v-if="isWarn && !isInvalid">
+        <slot name="warn-text">{{ warnText }}</slot>
+      </div>
+      <div :class="`${carbonPrefix}--form__helper-text`" v-if="!(isInvalid || isWarn) && isHelper">
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
     </div>
@@ -94,12 +79,13 @@ import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mix
 import Add16 from '@carbon/icons-vue/es/add/16';
 import Subtract16 from '@carbon/icons-vue/es/subtract/16';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/es/warning--alt--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
 export default {
   name: 'CvNumberInput',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Add16, Subtract16, WarningFilled16, CvWrapper },
+  components: { Add16, Subtract16, WarningFilled16, WarningAltFilled16, CvWrapper },
   inheritAttrs: false,
   props: {
     disabled: Boolean,
@@ -111,6 +97,7 @@ export default {
     invalid: /* deprecate */ {
       type: Boolean,
       default: undefined,
+      deprecated: true,
       validator(val) {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvNumberInput: invalid prop deprecated in favour of invalidMessage');
@@ -123,13 +110,25 @@ export default {
     min: { type: [String, Number], default: undefined },
     max: { type: [String, Number], default: undefined },
     step: { type: [String, Number], default: undefined },
-    mobile: Boolean,
+    mobile: /* deprecate */ {
+      type: Boolean,
+      default: undefined,
+      deprecated: true,
+      validator(val) {
+        if (val !== undefined) {
+          console.warn('CvNumberInput: mobile prop deprecated as no longer different to standard number input.');
+        }
+        return true;
+      },
+    },
+    warnText: { type: String, default: undefined },
   },
   data() {
     return {
       internalValue: 0,
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
     };
   },
   mounted() {
@@ -159,6 +158,14 @@ export default {
         input: ev => this.onInput(ev.target.value),
       });
     },
+    iconClasses() {
+      const classes = [];
+      (this.isInvalid || this.isWarn) && classes.push(`${this.carbonPrefix}--number__invalid`);
+      this.isWarn && !this.isInvalid && classes.push(`${this.carbonPrefix}--number__invalid--warning`);
+      this.readOnly && classes.push(`${this.carbonPrefix}--number__readonly-icon`);
+
+      return classes.join(' ');
+    },
   },
   methods: {
     onInput(val) {
@@ -168,6 +175,7 @@ export default {
     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.$slots['warn-text'] || (this.warnText && this.warnText.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     doUp() {

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -48,7 +48,7 @@
         class="cv-overflow-menu__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"
       />
       <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
@@ -58,7 +58,7 @@
         class="cv-overflow-menu__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>
@@ -87,7 +87,7 @@ export default {
     tipPosition: {
       type: String,
       default: 'right',
-      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
     },
     tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },

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

@@ -1,6 +1,7 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-search ${carbonPrefix}--form-item`">
     <div
+      :aria-labelledby="uid"
       :class="[
         `${carbonPrefix}--search`,
         {
@@ -14,6 +15,21 @@
       role="search"
       ref="search"
     >
+      <button
+        type="button"
+        v-if="isToolbarKind"
+        :class="`${carbonPrefix}--toolbar-search__btn`"
+        :aria-label="toolbarAriaLabel"
+        @click="toggleActive(true)"
+        @blur="checkFocus"
+      >
+        <component :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
+      </button>
+
+      <div v-if="!isToolbarKind" :class="`${carbonPrefix}--search-magnifier`">
+        <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
+      </div>
+
       <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
 
       <input
@@ -30,17 +46,6 @@
         @blur="checkFocus"
       />
 
-      <button
-        type="button"
-        v-if="isToolbarKind"
-        :class="`${carbonPrefix}--toolbar-search__btn`"
-        :aria-label="toolbarAriaLabel"
-        @click="toggleActive(true)"
-        @blur="checkFocus"
-      >
-        <component :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
-      </button>
-      <component v-if="!isToolbarKind" :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
       <button
         type="button"
         :class="[`${carbonPrefix}--search-close`, { [`${carbonPrefix}--search-close--hidden`]: !clearVisible }]"
@@ -64,7 +69,7 @@ import CvWrapper from '../cv-wrapper/_cv-wrapper';
 export default {
   name: 'CvSearch',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Close16, CvWrapper },
+  components: { Close16, CvWrapper, Search20 },
   inheritAttrs: false,
   props: {
     clearAriaLabel: { type: String, default: 'Clear search input' },

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

@@ -1,23 +1,8 @@
 <template>
-  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton`">
-    <div :class="`${carbonPrefix}--tabs-trigger`">
-      <div :class="`${carbonPrefix}--tabs-trigger-text`">&nbsp;</div>
-      <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z" />
-      </svg>
-    </div>
-    <ul :class="`${carbonPrefix}--tabs__nav ${carbonPrefix}--tabs__nav--hidden`">
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item ${carbonPrefix}--tabs__nav-item--selected`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
+  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton ${carbonPrefix}--tabs--scrollable`">
+    <ul :class="`${carbonPrefix}--tabs--scrollable__nav`">
+      <li v-for="index in tabCount" :key="index" :class="`${carbonPrefix}--tabs--scrollable__nav-item`">
+        <div :class="`${carbonPrefix}--tabs__nav-link`"><span></span></div>
       </li>
     </ul>
   </div>
@@ -28,5 +13,8 @@ import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvTabsSkeleton',
   mixins: [carbonPrefixMixin],
+  props: {
+    tabCount: { type: Number, default: 5 },
+  },
 };
 </script>

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

@@ -12,9 +12,7 @@ export default {
   props: {
     size: {
       type: String,
-      validator(val) {
-        return !val || val == 'sm';
-      },
+      validator: val => ['sm', ''].includes(val),
     },
   },
 };