vueless 0.0.386 → 0.0.388

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.386",
+  "version": "0.0.388",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.61",
+    "@vueless/plugin-vite": "^0.0.63",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.15",
     "autoprefixer": "^10.4.19",

package/ui.data-table/UTable.vue

@@ -7,7 +7,7 @@
       v-bind="stickyHeaderAttrs"
     >
       <template v-if="isShownActionsHeader">
-        <div v-bind="stickyHeaderCellAttrs()">
+        <div v-bind="stickyHeaderCellAttrs">
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
@@ -32,7 +32,7 @@
       </template>
 
       <template v-else>
-        <div v-bind="stickyHeaderCellAttrs()">
+        <div v-bind="stickyHeaderCellAttrs">
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
@@ -52,7 +52,8 @@
         <div
           v-for="(column, index) in columns"
           :key="index"
-          v-bind="stickyHeaderCellAttrs(column.thClass)"
+          v-bind="stickyHeaderCellAttrs"
+          :class="cx([stickyHeaderCellAttrs.class, column.thClass])"
         >
           <template v-if="hasSlotContent($slots[`header-${column.key}`])">
             <!--
@@ -90,7 +91,7 @@
             <td
               v-if="hasSlotContent($slots['before-header'])"
               :colspan="colsCount"
-              v-bind="headerCellAttrs()"
+              v-bind="headerCellBaseAttrs"
             >
               <!--
                 @slot Use it to add something before header row.
@@ -103,7 +104,7 @@
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
 
           <tr ref="headerRowRef" v-bind="headerRowAttrs">
-            <th v-if="selectable" v-bind="headerCellAttrs(config.headerCellCheckbox)">
+            <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
                 v-model="selectAll"
                 size="sm"
@@ -122,7 +123,8 @@
             <th
               v-for="(column, index) in normalizedColumns"
               :key="index"
-              v-bind="headerCellAttrs(column.thClass)"
+              v-bind="headerCellBaseAttrs"
+              :class="cx([headerCellBaseAttrs.class, column.thClass])"
             >
               <!--
                 @slot Use it to customise table column.
@@ -165,7 +167,11 @@
 
             <tr
               v-if="isShownDateSeparator(rowIndex) && row.date"
-              v-bind="bodyRowDateSeparatorAttrs(rowIndex)"
+              v-bind="
+                shouldDisplayDateSeparator(rowIndex)
+                  ? bodyRowDateSeparatorCheckedAttrs
+                  : bodyRowDateSeparatorAttrs
+              "
             >
               <td v-bind="bodyCellDateSeparatorAttrs(rowIndex)" :colspan="colsCount">
                 <UDivider
@@ -177,23 +183,14 @@
             </tr>
 
             <UTableRow
-              v-bind="bodyRowAttrs(getRowClasses(row))"
               v-model:selected-rows="selectedRows"
               :selectable="selectable"
               :data-test="`${dataTest}-row`"
               :row="row"
               :columns="columns"
               :config="config"
-              :attrs="{
-                bodyCellAttrs,
-                bodyCellSecondaryAttrs,
-                bodyCellSecondaryEmptyAttrs,
-                bodyCellNestedCollapseIconAttrs,
-                bodyCellNestedExpandIconAttrs,
-                bodyCellNestedAttrs,
-                bodyCellPrimaryAttrs,
-                bodyCheckboxAttrs,
-              }"
+              :attrs="keysAttrs"
+              v-bind="isRowSelected(row) ? bodyRowCheckedAttrs : bodyRowAttrs"
               @click="onClickRow"
               @toggle-row-visibility="onToggleRowVisibility"
             >
@@ -280,7 +277,7 @@ import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderTop from "../ui.loader-top/ULoaderTop.vue";
 import UTableRow from "./UTableRow.vue";
 
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault, cx } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
 import {
@@ -421,7 +418,7 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 const sortedRows = computed(() => {
   const headerKeys = props.columns.map((column) => column.key);
 
-  return props.rows.map((row) => {
+  return tableRows.value.map((row) => {
     const rowEntries = Object.entries(row);
 
     const sortedEntries = new Array(rowEntries.length);
@@ -501,6 +498,7 @@ const isSelectedAllRows = computed(() => {
 
 const {
   config,
+  keysAttrs,
   wrapperAttrs,
   stickyHeaderCellAttrs,
   stickyHeaderAttrs,
@@ -511,16 +509,16 @@ const {
   bodyRowBeforeAttrs,
   bodyRowBeforeCellAttrs,
   bodyRowAttrs,
+  bodyRowCheckedAttrs,
   footerAttrs,
   bodyRowDateSeparatorAttrs,
-  headerCellAttrs,
-  bodyCellAttrs,
+  bodyRowDateSeparatorCheckedAttrs,
+  headerCellBaseAttrs,
+  headerCellCheckboxAttrs,
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
   headerCounterAttrs,
-  bodyCellNestedCollapseIconAttrs,
-  bodyCellNestedExpandIconAttrs,
   bodyEmptyStateAttrs,
   bodyDateSeparatorAttrs,
   bodyCellDateSeparatorAttrs,
@@ -530,15 +528,10 @@ const {
   tableAttrs,
   headerLoaderAttrs,
   bodyAttrs,
-  bodyCellNestedAttrs,
-  bodyCellSecondaryAttrs,
-  bodyCellSecondaryEmptyAttrs,
   footerRowAttrs,
   stickyFooterRowAttrs,
   hasSlotContent,
   headerAttrs,
-  bodyCellPrimaryAttrs,
-  bodyCheckboxAttrs,
 } = useAttrs(props, {
   tableRows,
   isShownActionsHeader,
@@ -594,6 +587,18 @@ function getDateSeparatorLabel(separatorDate) {
     : separatorDate;
 }
 
+function shouldDisplayDateSeparator(rowIndex) {
+  const isPreviousRowChecked = tableRows.value[rowIndex - 1]?.isChecked;
+  const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
+  const isFirstRowAndNextChecked = rowIndex === 0 && isCheckedRowAfter;
+
+  return (isPreviousRowChecked && isCheckedRowAfter) || isFirstRowAndNextChecked;
+}
+
+function isRowSelected(row) {
+  return Boolean(selectedRows.value.includes(row.id));
+}
+
 function setFooterCellWidth(width) {
   const ZERO_WIDTH = 0;
 
@@ -664,10 +669,6 @@ function onClickRow(row) {
   emit("clickRow", row);
 }
 
-function getRowClasses(row) {
-  return selectedRows.value.includes(row.id) ? config.value.bodyRowChecked : "";
-}
-
 function onChangeSelectAll(selectAll) {
   if (selectAll && canSelectAll.value) {
     selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);

package/ui.data-table/UTableRow.vue

@@ -1,40 +1,33 @@
 <template>
   <tr v-bind="$attrs" @click="onClick(props.row)">
-    <td
-      v-if="selectable"
-      :style="getNestedCheckboxShift()"
-      v-bind="attrs.bodyCellAttrs(config.bodyCellCheckbox)"
-    >
+    <td v-if="selectable" :style="getNestedCheckboxShift()" v-bind="bodyCellCheckboxAttrs">
       <UCheckbox
         v-model="selectedRows"
         :data-id="row.id"
         :value="row.id"
         size="sm"
         :data-test="`${dataTest}-body-checkbox`"
-        v-bind="attrs.bodyCheckboxAttrs"
+        v-bind="bodyCheckboxAttrs"
       />
     </td>
 
     <td
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
-      v-bind="attrs.bodyCellAttrs(getCellClasses(key, row, index))"
+      v-bind="getCellAttrs(key, row, index)"
+      :class="cx([getCellAttrs(key, row, index).class, columns[index].tdClass])"
     >
       <div
         v-if="(row.row || nestedLevel) && index === 0"
         :style="getNestedShift()"
-        v-bind="attrs.bodyCellNestedAttrs"
+        v-bind="bodyCellNestedAttrs"
       >
         <UIcon
           v-if="row.row"
           size="xs"
           internal
           interactive
-          :name="
-            row?.row?.isHidden
-              ? config.defaults.bodyCellNestedExpandIcon
-              : config.defaults.bodyCellNestedCollapseIcon
-          "
+          :name="row?.row?.isHidden ? config.defaults.expandIcon : config.defaults.collapseIcon"
           color="brand"
           v-bind="toggleIconConfig"
           @click="onClickToggleRowChild(row.row.id)"
@@ -43,18 +36,14 @@
 
       <div v-if="value?.hasOwnProperty('secondary')">
         <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div
-            v-bind="attrs.bodyCellPrimaryAttrs"
-            ref="cellRef"
-            :data-test="`${dataTest}-${key}-cell`"
-          >
+          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
             {{ value.primary || HYPHEN_SYMBOL }}
           </div>
 
-          <div v-bind="attrs.bodyCellSecondaryAttrs">
+          <div v-bind="bodyCellSecondaryAttrs">
             <template v-if="Array.isArray(value.secondary)">
               <div v-for="(secondary, idx) in value.secondary" ref="cellRef" :key="idx">
-                <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
+                <span v-bind="bodyCellSecondaryEmptyAttrs">
                   {{ secondary }}
                 </span>
               </div>
@@ -69,11 +58,7 @@
 
       <template v-else>
         <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div
-            v-bind="attrs.bodyCellPrimaryAttrs"
-            ref="cellRef"
-            :data-test="`${dataTest}-${key}-cell`"
-          >
+          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
             {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
           </div>
         </slot>
@@ -99,6 +84,7 @@
 
 <script setup>
 import { computed, onMounted, ref } from "vue";
+import { cx } from "../utils/utilUI.js";
 
 import { HYPHEN_SYMBOL } from "../constants.js";
 import { getFilteredRow } from "./utilTable.js";
@@ -158,10 +144,21 @@ const cellRef = ref([]);
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
+const {
+  bodyCellPrimaryAttrs,
+  bodyCellSecondaryAttrs,
+  bodyCellSecondaryEmptyAttrs,
+  bodyCellCheckboxAttrs,
+  bodyCheckboxAttrs,
+  bodyCellNestedAttrs,
+  bodyCellNestedExpandIconAttrs,
+  bodyCellNestedCollapseIconAttrs,
+  bodyCellNestedRowAttrs,
+  bodyCellBaseAttrs,
+} = props.attrs;
+
 const toggleIconConfig = computed(() =>
-  props.row?.row?.isHidden
-    ? props.attrs.bodyCellNestedExpandIconAttrs
-    : props.attrs.bodyCellNestedCollapseIconAttrs,
+  props.row?.row?.isHidden ? bodyCellNestedExpandIconAttrs : bodyCellNestedCollapseIconAttrs,
 );
 
 const shift = computed(() => (props.row.row ? 1.5 : 2));
@@ -170,10 +167,10 @@ onMounted(() => {
   cellRef.value.forEach(setElementTitle);
 });
 
-function getCellClasses(key, row, cellIndex) {
-  const isNestedRow = (row.row || props.nestedLevel) && cellIndex === 0;
+function getCellAttrs(key, row, cellIndex) {
+  const isNestedRow = (row.row || props.nestedLevel > 0) && cellIndex === 0;
 
-  return [props.columns.find((column) => column.key === key)?.tdClass, isNestedRow && "flex"];
+  return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;
 }
 
 function getNestedShift() {

package/ui.data-table/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: "relative",
-  headerCellGeneral: {
+  headerCellBase: {
     base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
     variants: {
       compact: {
@@ -8,7 +8,7 @@ export default /*tw*/ {
       },
     },
   },
-  headerCounterGeneral: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
+  headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",
@@ -29,7 +29,6 @@ export default /*tw*/ {
   table: "min-w-full border-none text-sm w-full table-fixed",
   header: "border-b border-gray-200",
   headerRow: "",
-  headerCell: "",
   headerCellCheckbox: "w-10",
   headerCheckbox: "{UCheckbox}",
   headerCounter: {
@@ -49,7 +48,7 @@ export default /*tw*/ {
   bodyRowAfter: "!p-0",
   bodyRowAfterCell: "py-1",
   bodyRowDateSeparator: "",
-  bodyCell: {
+  bodyCellBase: {
     base: "p-[1.125rem] py-5 first:!p-5 truncate align-top last:p-5",
     variants: {
       compact: {
@@ -57,6 +56,7 @@ export default /*tw*/ {
       },
     },
   },
+  bodyCellNestedRow: "flex",
   bodyCellPrimary: "text-ellipsis overflow-hidden",
   bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
   bodyCellSecondaryEmpty: "inline-block",

package/ui.data-table/useAttrs.js

@@ -1,200 +1,83 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
+
 import defaultConfig from "./config.js";
-import { cva, cx } from "../utils/utilUI.js";
-import { computed } from "vue";
 
 export default function useAttrs(
   props,
   { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  const headerCellGeneralClasses = computed(() => {
-    return cva(config.value.headerCellGeneral)({
-      ...props,
-      compact: Boolean(props.compact),
-    });
-  });
 
-  const bodyCellClasses = computed(() => {
-    return cva(config.value.bodyCell)({
-      ...props,
-      compact: Boolean(props.compact),
-    });
+  const extendingKeys = [
+    "headerCounterBase",
+    "stickyHeaderActions",
+    "stickyHeaderRow",
+    "stickyFooter",
+  ];
+  const extendingKeysClasses = getExtendingKeysClasses([
+    ...extendingKeys,
+    "headerCellBase",
+    "bodyCellBase",
+    "bodyRowChecked",
+  ]);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    stickyHeader: {
+      extend: computed(() => [
+        isShownActionsHeader.value && extendingKeysClasses.stickyHeaderActions.value,
+        isShownActionsHeader.value &&
+          isHeaderSticky.value &&
+          extendingKeysClasses.stickyHeaderActions.value,
+        !isShownActionsHeader.value &&
+          isHeaderSticky.value &&
+          extendingKeysClasses.stickyHeaderRow.value,
+      ]),
+    },
+    stickyHeaderCell: {
+      base: computed(() => [extendingKeysClasses.headerCellBase.value]),
+    },
+    headerCounter: {
+      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
+    },
+    stickyHeaderCounter: {
+      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
+    },
+    stickyHeaderActionsCounter: {
+      base: computed(() => [extendingKeysClasses.headerCounterBase.value]),
+    },
+    headerCellCheckbox: {
+      base: computed(() => [extendingKeysClasses.headerCellBase.value]),
+    },
+    bodyCellNestedRow: {
+      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
+    },
+    bodyCellCheckbox: {
+      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
+    },
+    bodyRowBeforeCell: {
+      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
+    },
+    bodyRowAfterCell: {
+      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
+    },
+    footer: {
+      extend: computed(() => [isFooterSticky.value && extendingKeysClasses.stickyFooter.value]),
+    },
+    bodyRowBefore: {
+      extend: computed(() => [
+        tableRows.value[0]?.isChecked && extendingKeysClasses.bodyRowChecked.value,
+      ]),
+    },
   });
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          compact: Boolean(props.compact),
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "stickyHeader") {
-      const stickyHeaderAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => {
-        const actionHeaderClasses = cx([
-          stickyHeaderAttrs.value.class,
-          config.value.stickyHeaderActions,
-        ]);
-
-        const actionHeaderStickyClasses = cx([
-          config.value.stickyHeaderActions,
-          stickyHeaderAttrs.value.class,
-        ]);
-
-        const stickyHeaderRowClasses = cx([
-          stickyHeaderAttrs.value.class,
-          config.value.stickyHeaderRow,
-        ]);
-
-        return {
-          ...stickyHeaderAttrs.value,
-          class: cx([
-            isShownActionsHeader.value && actionHeaderClasses,
-            isShownActionsHeader.value && isHeaderSticky.value && actionHeaderStickyClasses,
-            !isShownActionsHeader.value && isHeaderSticky.value && stickyHeaderRowClasses,
-          ]),
-        };
-      });
-    }
-
-    if (key === "stickyHeaderCell") {
-      const stickyHeaderCellAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...stickyHeaderCellAttrs,
-        class: cx([headerCellGeneralClasses.value, stickyHeaderCellAttrs.value.class, classes]),
-      }));
-    }
-
-    if (key === "headerCounter") {
-      const headerCounterAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...headerCounterAttrs.value,
-        class: cx([config.value.headerCounterGeneral, headerCounterAttrs.value.class]),
-      }));
-    }
-
-    if (key === "stickyHeaderCounter") {
-      const stickyHeaderCounterAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...stickyHeaderCounterAttrs.value,
-        class: cx([config.value.headerCounterGeneral, stickyHeaderCounterAttrs.value.class]),
-      }));
-    }
-
-    if (key === "stickyHeaderActionsCounter") {
-      const stickyHeaderActionsCounterAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...stickyHeaderActionsCounterAttrs.value,
-        class: cx([config.value.headerCounterGeneral, stickyHeaderActionsCounterAttrs.value.class]),
-      }));
-    }
-
-    if (key === "headerCell") {
-      const headerCellAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...headerCellAttrs.value,
-        class: cx([headerCellGeneralClasses.value, headerCellAttrs.value.class, classes]),
-      }));
-    }
-
-    if (key === "bodyCell") {
-      const bodyCellAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...bodyCellAttrs.value,
-        class: cx([bodyCellClasses.value, bodyCellAttrs.value.class, classes]),
-      }));
-    }
-
-    if (key === "bodyRowBeforeCell") {
-      const bodyRowBeforeCellAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...bodyRowBeforeCellAttrs.value,
-        class: cx([bodyCellClasses.value, bodyRowBeforeCellAttrs.value.class]),
-      }));
-    }
-
-    if (key === "bodyRowAfterCell") {
-      const bodyRowAfterCellAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...bodyRowAfterCellAttrs.value,
-        class: cx([bodyCellClasses.value, bodyRowAfterCellAttrs.value.class]),
-      }));
-    }
-
-    if (key === "bodyRow") {
-      const bodyRowAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => (row) => ({
-        ...bodyRowAttrs.value,
-        class: cx([bodyRowAttrs.value.class, row]),
-      }));
-    }
-
-    if (key === "footer") {
-      const footerAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...footerAttrs.value,
-        class: cx([footerAttrs.value.class, isFooterSticky.value && config.value.stickyFooter]),
-      }));
-    }
-
-    if (key === "bodyRowBefore") {
-      const bodyRowBeforeAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...bodyRowBeforeAttrs.value,
-        class: cx([
-          bodyRowBeforeAttrs.value.class,
-          tableRows.value[0]?.isChecked ? config.value.bodyRowChecked : "",
-        ]),
-      }));
-    }
-
-    if (key === "bodyRowDateSeparator") {
-      attrs[`${key}Attrs`] = (rowIndex) => {
-        const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
-        const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
-
-        const activeClass =
-          (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
-            ? config.value.bodyRowChecked
-            : "";
-
-        return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
-      };
-    }
-  }
-
   return {
-    ...attrs,
     config,
+    keysAttrs,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-select/useAttrs.js

@@ -15,7 +15,7 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   }));
 
   const extendingKeys = ["caret", "wrapperActive", "labelWrapperActive", "labelWrapperTop"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
 
   const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
     wrapper: {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.386",
+  "version": "0.0.388",
   "contributions": {
     "html": {
       "description-markup": "markdown",