@carbon/vue 2.42.0 → 2.44.0

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

@@ -31,55 +31,52 @@
             </p>
           </div>
         </div>
-
         <div :class="`${carbonPrefix}--toolbar-content`">
           <div
             v-if="$listeners.search"
-            :class="{
-              [`${carbonPrefix}--toolbar-search-container-active`]: searchActive || searchValue.length > 0,
-              [`${carbonPrefix}--toolbar-search-container-persistent`]: !expandingSearch,
-              [`${carbonPrefix}--toolbar-search-container-expandable`]: expandingSearch,
-            }"
+            :aria-labelledby="`${uid}-search`"
+            :class="[
+              `${carbonPrefix}--search ${carbonPrefix}--search--xl`,
+              {
+                [`${carbonPrefix}--toolbar-search-container-active`]: searchActive || searchValue.length > 0,
+                [`${carbonPrefix}--toolbar-search-container-persistent`]: !expandingSearch,
+                [`${carbonPrefix}--toolbar-search-container-expandable`]: expandingSearch,
+              },
+            ]"
+            role="search"
             ref="searchContainer"
           >
-            <div data-search :class="`${carbonPrefix}--search ${carbonPrefix}--search--sm`" role="search">
-              <div
-                :class="`${carbonPrefix}--search-magnifier`"
-                tabindex="0"
-                @click="checkSearchExpand(true)"
-                @keydown.enter.prevent="checkSearchExpand(true)"
-                @keydown.space.prevent
-                @keyup.space.prevent="checkSearchExpand(true)"
-                ref="magnifier"
-              >
-                <Search16 :class="`${carbonPrefix}--toolbar-action__icon`" />
-              </div>
-              <label :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
-              <input
-                :class="`${carbonPrefix}--search-input`"
-                type="text"
-                :id="uid"
-                role="search"
-                :placeholder="searchPlaceholder"
-                :aria-labelledby="uid"
-                ref="search"
-                v-model="searchValue"
-                @input="onSearch"
-                @keydown.esc.prevent="checkSearchExpand(false)"
-              />
-              <button
-                :class="[
-                  `${carbonPrefix}--search-close`,
-                  { [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
-                ]"
-                :title="searchClearLabel"
-                :aria-label="searchClearLabel"
-                @click="onClearClick"
-                type="button"
-              >
-                <Close16 />
-              </button>
+            <div :class="`${carbonPrefix}--search-magnifier`" ref="magnifier">
+              <Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
             </div>
+            <label :id="`${uid}-search`" :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
+            <input
+              :class="`${carbonPrefix}--search-input`"
+              type="text"
+              :id="uid"
+              role="search"
+              :placeholder="searchPlaceholder"
+              :aria-labelledby="uid"
+              ref="search"
+              v-model="searchValue"
+              @input="onSearch"
+              @click="checkSearchExpand(true)"
+              @keydown.esc.prevent="checkSearchExpand(false)"
+              @focus="checkSearchExpand(true)"
+              @blur="checkSearchExpand(false)"
+            />
+            <button
+              :class="[
+                `${carbonPrefix}--search-close`,
+                { [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
+              ]"
+              :title="searchClearLabel"
+              :aria-label="searchClearLabel"
+              @click="onClearClick"
+              type="button"
+            >
+              <Close16 />
+            </button>
           </div>
           <slot name="actions" />
         </div>
@@ -196,6 +193,7 @@ import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
+import clickout from '../../directives/clickout';
 export default {
   name: 'CvDataTable',
   components: {
@@ -210,6 +208,7 @@ export default {
     Close16,
     ChevronRight16,
   },
+  directives: { clickout },
   mixins: [uidMixin, carbonPrefixMixin],
   props: {
     actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
@@ -363,6 +362,9 @@ export default {
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
+    onClickout(ev) {
+      this.checkSearchExpand(false);
+    },
     onCvMount(thing) {
       if (thing.$_CvDataTableHeading) {
         this.registeredHeadings = this.$children.filter(item => item.$_CvDataTableHeading);

package/src/components/cv-date-picker/plugins/monthSelectPlugin.js

@@ -21,7 +21,7 @@ const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ?
  */
 export default config => fp => {
   const setupElements = () => {
-    if (!fp.monthElements) {
+    if (!fp.monthElements || fp.monthElements.length < 1) {
       return;
     }
     fp.monthElements.forEach(elem => {

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

@@ -12,7 +12,6 @@
             [`${carbonPrefix}--btn--primary`]: kind === 'button',
           },
         ]"
-        role="button"
         tabindex="0"
         ref="focusTarget"
         @keydown.enter.prevent="onShow()"
@@ -148,6 +147,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 +213,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-modal/cv-modal.vue

@@ -149,15 +149,16 @@ export default {
   computed: {
     dialogAttrs() {
       const passive = !this.hasFooter;
-      const attrs = { role: 'dialog' };
-
+      const attrs = {};
+      attrs['aria-label'] = this.$slots.title[0].text;
       if (this.alert) {
         if (passive) {
           attrs.role = 'alert';
         } else {
           attrs.role = 'alertdialog';
-          attrs['aria-describedBy'] = this.uid;
         }
+      } else {
+        attrs.role = 'dialog';
       }
       return attrs;
     },

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

@@ -13,12 +13,13 @@
   >
     <label
       v-if="title"
-      :for="uid"
+      :id="`${uid}-label`"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       >{{ title }}</label
     >
 
     <div
+      :aria-labelledby="`${uid}-label`"
       role="listbox"
       tabindex="-1"
       :class="[
@@ -109,7 +110,13 @@
         </div>
       </div>
 
-      <div :id="uid" :class="`${carbonPrefix}--list-box__menu`" role="listbox" ref="list">
+      <div
+        :id="uid"
+        :aria-labelledby="`${uid}-label`"
+        :class="`${carbonPrefix}--list-box__menu`"
+        role="listbox"
+        ref="list"
+      >
         <div
           v-for="(item, index) in dataOptions"
           :key="`multi-select-${index}`"

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`,
         {
@@ -13,21 +12,13 @@
       ]"
       :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>
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <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
+      v-bind="wrapperAttrs"
       :class="[
         `${carbonPrefix}--search`,
         {
@@ -14,7 +15,22 @@
       role="search"
       ref="search"
     >
-      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <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 v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
 
       <input
         :id="uid"
@@ -23,24 +39,12 @@
         v-model="internalValue"
         v-on="inputListeners"
         type="text"
-        role="search"
         ref="input"
         :placeholder="placeholder"
         :aria-labelledby="uid"
         @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,9 +68,10 @@ 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: {
+    ariaLabel: String,
     clearAriaLabel: { type: String, default: 'Clear search input' },
     formItem: { type: Boolean, default: true },
     kind: { type: String, default: undefined },
@@ -110,6 +115,17 @@ export default {
     },
   },
   computed: {
+    wrapperAttrs() {
+      const attrs = {};
+      if (this.ariaLabel) {
+        attrs['aria-label'] = this.ariaLabel;
+      } else if (this.label) {
+        attrs['aria-labelledby'] = this.uid;
+      } else {
+        attrs['aria-label'] = 'Search box';
+      }
+      return attrs;
+    },
     // 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

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

@@ -1,6 +1,7 @@
 <template>
   <div :class="`cv-slider ${carbonPrefix}--form-item`">
     <label
+      v-show="label"
       :for="uid"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       :id="labelId"

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-tabs/cv-tabs.vue

@@ -44,8 +44,6 @@
             },
           ]"
           role="presentation"
-          :aria-selected="selectedId == tab.uid ? 'true' : 'false'"
-          :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <button
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"

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),
     },
   },
 };