@carbon/vue 2.27.0-canary.0 → 2.28.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.27.0-canary.0",
+  "version": "2.28.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,7 +59,7 @@
     "clean": "rimraf dist node_modules/.cache"
   },
   "engines": {
-    "node": ">=12.x"
+    "node": ">=10.x"
   },
   "sideEffects": true,
   "dependencies": {
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "11b31bcb052a77059e2b157a9400218860747093"
+  "gitHead": "e0141cdee45e0c910fbb10ac5c665b736712d99f"
 }

package/src/assets/images/example-icon-svg.js

@@ -0,0 +1,10 @@
+export default {
+  exampleSvgString: `
+    <?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd"  id="g">
+        <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+    </g>
+</svg>
+`,
+};

package/src/assets/images/example-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd"  id="g">
+        <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+    </g>
+</svg>

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

@@ -1,10 +1,10 @@
 <template>
-  <li class="bx--accordion__item" :class="{ 'bx--accordion__item--active': open }">
-    <button disabled type="button" class="bx--accordion__heading">
-      <ChevronRight16 class="bx--accordion__arrow" />
-      <cv-skeleton-text class="bx--accordion__title"></cv-skeleton-text>
+  <li :class="itemClasses">
+    <button disabled type="button" :class="`${carbonPrefix}--accordion__heading`">
+      <ChevronRight16 :class="`${carbonPrefix}--accordion__arrow`" />
+      <cv-skeleton-text :class="`${carbonPrefix}--accordion__title`"></cv-skeleton-text>
     </button>
-    <div class="bx--accordion__content">
+    <div :class="`${carbonPrefix}--accordion__content`">
       <slot></slot>
     </div>
   </li>
@@ -13,9 +13,11 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvAccordionItemSkeleton',
+  mixins: [carbonPrefixMixin],
   components: {
     ChevronRight16,
     CvSkeletonText,
@@ -23,5 +25,14 @@ export default {
   props: {
     open: { type: Boolean, default: false },
   },
+  computed: {
+    itemClasses() {
+      const classes = [`${this.carbonPrefix}--accordion__item`];
+      if (this.open) {
+        classes.push(`${this.carbonPrefix}--accordion__item--active`);
+      }
+      return classes.join(' ');
+    },
+  },
 };
 </script>

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

@@ -6,25 +6,20 @@
 -->
 
 <template>
-  <li
-    data-accordion-item
-    class="cv-accordion-item bx--accordion__item"
-    :class="itemClasses"
-    @animationend="onAnimationEnd"
-  >
+  <li data-accordion-item class="cv-accordion-item" :class="itemClasses" @animationend="onAnimationEnd">
     <button
       type="button"
-      class="bx--accordion__heading"
-      :aria-expanded="`${dataOpen}`"
+      :class="`${carbonPrefix}--accordion__heading`"
+      :aria-expanded="dataOpen ? 'true' : 'false'"
       :aria-controls="uid"
       @click="toggle"
     >
-      <ChevronRight16 class="bx--accordion__arrow" />
-      <p class="bx--accordion__title">
+      <ChevronRight16 :class="`${carbonPrefix}--accordion__arrow`" />
+      <p :class="`${carbonPrefix}--accordion__title`">
         <slot name="title"></slot>
       </p>
     </button>
-    <div :id="uid" class="bx--accordion__content">
+    <div :id="uid" :class="`${carbonPrefix}--accordion__content`">
       <slot name="content"></slot>
     </div>
   </li>
@@ -33,10 +28,11 @@
 <script>
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
 import uidMixin from '../../mixins/uid-mixin';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvAccordionItem',
-  mixins: [uidMixin],
+  mixins: [uidMixin, carbonPrefixMixin],
   components: { ChevronRight16 },
   props: {
     open: { type: Boolean, default: false },
@@ -75,12 +71,13 @@ export default {
   },
   computed: {
     itemClasses() {
-      const classes = [];
+      const classes = [`${this.carbonPrefix}--accordion__item`];
+
       if (this.dataOpen) {
-        classes.push('bx--accordion__item--active');
+        classes.push(`${this.carbonPrefix}--accordion__item--active`);
       }
       if (this.animation) {
-        classes.push(`bx--accordion__item--${this.animation}`);
+        classes.push(`${this.carbonPrefix}--accordion__item--${this.animation}`);
       }
       return classes.join(' ');
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <ul class="bx--accordion bx--skeleton">
+  <ul :class="`${carbonPrefix}--accordion ${carbonPrefix}--skeleton`">
     <cv-accordion-item-skeleton :open="true">
       <cv-skeleton-text width="90%"></cv-skeleton-text>
       <cv-skeleton-text width="80%"></cv-skeleton-text>
@@ -14,9 +14,11 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvAccordionSkeleton',
+  mixins: [carbonPrefixMixin],
   components: {
     CvSkeletonText,
     CvAccordionItemSkeleton,

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

@@ -1,12 +1,15 @@
 <template>
-  <ul data-accordion class="cv-accordion bx--accordion">
+  <ul data-accordion :class="`cv-accordion ${carbonPrefix}--accordion`">
     <slot></slot>
   </ul>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+
 export default {
   name: 'CvAccordion',
+  mixins: [carbonPrefixMixin],
   created() {
     this.$on('cv:change', srcComponent => this.onCvChange(srcComponent));
   },

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

@@ -1,11 +1,13 @@
 <template>
-  <div class="bx--breadcrumb-item">
-    <a class="bx--link">&nbsp;</a>
+  <div :class="`${carbonPrefix}--breadcrumb-item`">
+    <a :class="`${carbonPrefix}--link`">&nbsp;</a>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumbItemSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,16 +1,14 @@
 <template>
-  <div
-    class="cv-breadcrumb-item bx--breadcrumb-item"
-    :class="{ 'bx--breadcrumb-item--current': activePage }"
-    :aria-current="ariaCurrent"
-  >
+  <div :class="breadcrumbItemClasses" :aria-current="ariaCurrent">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumbItem',
+  mixins: [carbonPrefixMixin],
   props: {
     active: Boolean,
     ariaCurrent: String,
@@ -19,6 +17,13 @@ export default {
     activePage() {
       return this.active && this.ariaCurrent !== 'page';
     },
+    breadcrumbItemClasses() {
+      const classes = [`cv-breadcrumb-item ${this.carbonPrefix}--breadcrumb-item`];
+      if (this.activePage) {
+        classes.push(`${this.carbonPrefix}--breadcrumb-item--current`);
+      }
+      return classes.join(' ');
+    },
   },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bx--breadcrumb bx--skeleton" :aria-label="ariaLabel">
+  <nav :class="`${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`" :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>
@@ -8,9 +8,11 @@
 
 <script>
 import CvBreadcrumbItemSkeleton from './_cv-breadcrumb-item-skeleton';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvBreadcrumbSkeleton',
+  mixins: [carbonPrefixMixin],
   components: {
     CvBreadcrumbItemSkeleton,
   },

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

@@ -1,19 +1,26 @@
 <template>
-  <nav
-    class="cv-breadcrumb bx--breadcrumb"
-    :class="{ 'bx--breadcrumb--no-trailing-slash': noTrailingSlash }"
-    :aria-label="ariaLabel"
-  >
+  <nav class="cv-breadcrumb" :class="breadcrumbClasses" :aria-label="ariaLabel">
     <slot></slot>
   </nav>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumb',
+  mixins: [carbonPrefixMixin],
   props: {
     ariaLabel: { type: String, default: 'breadcrumb' },
     noTrailingSlash: Boolean,
   },
+  computed: {
+    breadcrumbClasses() {
+      let classes = [`${this.carbonPrefix}--breadcrumb`];
+      if (this.noTrailingSlash) {
+        classes.push(`${this.carbonPrefix}--breadcrumb--no-trailing-slash`);
+      }
+      return classes;
+    },
+  },
 };
 </script>

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

@@ -2,20 +2,19 @@
   <button class="cv-button" :class="buttonClasses" v-on="inputListeners" role="button">
     <slot></slot>
 
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--temp-fix" :class="`${carbonPrefix}--btn__icon`" />
-    <svg v-if="typeof icon === 'string' || iconHref" :class="`${carbonPrefix}--btn__icon`">
-      <use :href="icon || iconHref" />
-    </svg>
+    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
   </button>
 </template>
 
 <script>
 import buttonMixin from './button-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvButton',
   mixins: [buttonMixin, carbonPrefixMixin],
+  components: { CvSvg },
   computed: {
     buttonClasses() {
       return this.buttonClassOpts();

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

@@ -2,20 +2,19 @@
   <button class="cv-button" :class="buttonClasses" v-on="inputListeners" type="button">
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
 
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--temp-fix" :class="`${carbonPrefix}--btn__icon`" />
-    <svg v-if="typeof icon === 'string' || iconHref" :class="`${carbonPrefix}--btn__icon`">
-      <use :href="icon || iconHref" />
-    </svg>
+    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
   </button>
 </template>
 
 <script>
 import buttonMixin from './button-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvIconButton',
   mixins: [buttonMixin, carbonPrefixMixin],
+  components: { CvSvg },
   props: {
     label: { type: String, default: undefined },
     tipPosition: {

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

@@ -1,11 +1,13 @@
 <template>
-  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
-    <label class="bx--checkbox-label bx--skeleton"></label>
+  <div class="cv-checkbox" :class="`${carbonPrefix}--form-item ${carbonPrefix}--checkbox-wrapper`">
+    <label :class="`${carbonPrefix}--checkbox-label ${carbonPrefix}--skeleton`"></label>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvCheckboxSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="cv-checkbox bx--checkbox-wrapper" :class="{ 'bx--form-item': formItem }">
+  <div class="cv-checkbox" :class="formItemClasses">
     <input
       ref="input"
       v-bind="$attrs"
       v-on="inputListeners"
-      class="bx--checkbox"
+      :class="`${carbonPrefix}--checkbox`"
       type="checkbox"
       :checked="isChecked === true"
       :aria-checked="`${isChecked}`"
@@ -14,18 +14,12 @@
       :id="uid"
     />
     <label
-      :class="[
-        'bx--checkbox-label',
-        {
-          'bx--label--disabled': $attrs.disabled !== undefined && $attrs.disabled,
-          'bx--checkbox-label__focus': hasFocus,
-        },
-      ]"
+      :class="labelClasses"
       :data-contained-checkbox-state="isChecked"
       :data-contained-checkbox-disabled="$attrs.disabled"
       :for="uid"
     >
-      <span class="bx--checkbox-label-text" :class="{ 'bx--visually-hidden': hideLabel }">
+      <span :class="labelContentClasses">
         {{ label }}
       </span>
     </label>
@@ -35,10 +29,11 @@
 <script>
 import checkMixin from '../../mixins/check-mixin';
 import uidMixin from '../../mixins/uid-mixin';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvCheckbox',
-  mixins: [checkMixin, uidMixin],
+  mixins: [checkMixin, uidMixin, carbonPrefixMixin],
   inheritAttrs: false,
   props: {
     hideLabel: Boolean,
@@ -60,6 +55,32 @@ export default {
       dataMixed: this.mixed,
     };
   },
+  computed: {
+    formItemClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-wrapper`];
+      if (this.formItem) {
+        classes.push(`${this.carbonPrefix}--form-item`);
+      }
+      return classes;
+    },
+    labelClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-label`];
+      if (this.$attrs.disabled !== undefined && this.$attrs.disabled) {
+        classes.push(`${this.carbonPrefix}--label--disabled`);
+      }
+      if (this.hasFocus) {
+        classes.push(`${this.carbonPrefix}--checkbox-label__focus`);
+      }
+      return classes;
+    },
+    labelContentClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-label-text`];
+      if (this.hideLabel) {
+        classes.push(`${this.carbonPrefix}--visually-hidden`);
+      }
+      return classes;
+    },
+  },
   methods: {
     onFocus() {
       this.hasFocus = true;

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import themeMixin from '../../mixins/theme-mixin';
 
 export default {

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="cv-combo-box bx--list-box__wrapper" @focusout="onFocusOut">
-    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
-      {{ title }}
-    </label>
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{ title }}</label>
 
-    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }">
+    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': disabled }">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
 
@@ -16,7 +14,7 @@
         'bx--list-box--light': theme === 'light',
         'bx--combo-box--expanded': open,
         'bx--list-box--expanded': open,
-        'bx--combo-box--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--combo-box--disabled bx--list-box--disabled': disabled,
       }"
       :data-invalid="isInvalid"
       v-bind="$attrs"
@@ -30,7 +28,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -46,8 +44,10 @@
           :aria-controls="uid"
           aria-autocomplete="list"
           role="combobox"
-          :aria-expanded="open"
+          :aria-disabled="disabled"
+          :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
+          :disabled="disabled"
           :placeholder="label"
           v-model="filter"
           @input="onInput"
@@ -109,6 +109,7 @@ export default {
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
+    disabled: Boolean,
     invalidMessage: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
     title: String,
@@ -209,6 +210,7 @@ export default {
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     clearFilter() {
+      if (this.disabled) return;
       this.internalUpdateValue('');
       this.filter = '';
       this.$refs.input.focus();
@@ -280,6 +282,7 @@ export default {
       }
     },
     onInput() {
+      if (this.disabled) return;
       this.doOpen(true);
 
       this.updateOptions();
@@ -289,6 +292,7 @@ export default {
       this.open = newVal;
     },
     onDown() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       } else {
@@ -296,15 +300,18 @@ export default {
       }
     },
     onUp() {
+      if (this.disabled) return;
       if (this.open) {
         this.doMove(true);
       }
     },
     onEsc() {
+      if (this.disabled) return;
       this.doOpen(false);
       this.$el.focus();
     },
     onEnter() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (!this.open) {
         this.onItemClick(this.highlighted);
@@ -312,6 +319,7 @@ export default {
       }
     },
     onClick() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (this.open) {
         this.$refs.input.focus();
@@ -340,17 +348,20 @@ export default {
       }
     },
     onItemClick(val) {
+      if (this.disabled) return;
       this.internalUpdateValue(val);
       this.$refs.input.focus();
       this.open = false; // close after user makes a selection
       this.$emit('change', this.dataValue);
     },
     inputClick() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       }
     },
     inputFocus() {
+      if (this.disabled) return;
       this.doOpen(true);
     },
   },

package/src/components/cv-content-switcher/cv-content-switcher-button.vue

@@ -22,13 +22,10 @@
       },
     ]"
     :data-target="contentSelector"
-    :aria-selected="`${dataSelected}`"
+    :aria-selected="dataSelected ? 'true' : 'false'"
     @click="open"
   >
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--content-switcher__icon" />
-    <svg v-if="typeof icon === 'string'" class="bx--content-switcher__icon" height="16" width="16">
-      <use :href="icon" />
-    </svg>
+    <CvSvg v-if="icon" :svg="icon" class="bx--content-switcher__icon" height="16" width="16" />
     <span class="bx--content-switcher__label">
       <slot></slot>
     </span>
@@ -37,10 +34,12 @@
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvContentSwitcherButton',
   mixins: [uidMixin],
+  components: { CvSvg },
   props: {
     contentSelector: { type: String, default: undefined },
     icon: {

package/src/components/cv-data-table/_cv-data-table-row-inner.vue

@@ -22,9 +22,9 @@
     </td>
     <slot />
     <td v-if="hasOverflowMenu" class="bx--table-column-menu">
-      <cv-overflow-menu flip-menu>
+      <cv-overflow-menu v-bind="overflowMenuOptions">
         <cv-overflow-menu-item
-          v-for="(item, index) in overflowMenu"
+          v-for="(item, index) in overflowMenuButtons"
           :key="`${index}`"
           @click="
             onMenuItemClick({
@@ -97,6 +97,14 @@ export default {
     isChecked() {
       return this.dataChecked;
     },
+    overflowMenuButtons() {
+      return this.overflowMenu.filter(item => typeof item === 'string');
+    },
+    overflowMenuOptions() {
+      const incomingOptions = this.overflowMenu.find(item => typeof item === 'object') || {};
+      const defaultOptions = { flipMenu: true, label: 'Row overflow menu', tipPosition: 'left' };
+      return { ...defaultOptions, ...incomingOptions };
+    },
   },
   methods: {
     checkSlots() {

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

@@ -142,7 +142,7 @@
                 :key="`cell:${colIndex}:${rowIndex}`"
                 :style="dataStyle(colIndex)"
               >
-                <cv-wrapper :tag-type="skeleton && rowIndex < 1 ? 'span' : ''">{{ cell }}</cv-wrapper>
+                <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
               </cv-data-table-cell>
             </cv-data-table-row>
           </slot>