vueless 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/service.ui/index.js

@@ -44,11 +44,16 @@ export default class UIServiceDefault {
   HYPHEN_SYMBOL = "-";
 
   constructor() {
-    this.isMac = this.checkIsMac();
+    // Needed to avoid error in server context for ssr
+    // TODO: Find way call it in browser
+    // Possible solution: https://github.com/nuxt/nuxt/discussions/7878
+    const isBrowser = typeof window !== "undefined";
 
-    this.isPWA = this.checkIsPWA();
-    this.isIOS = this.checkIsIOS();
-    this.isAndroid = this.checkIsAndroid();
+    this.isMac = isBrowser && this.checkIsMac();
+
+    this.isPWA = isBrowser && this.checkIsPWA();
+    this.isIOS = isBrowser && this.checkIsIOS();
+    this.isAndroid = isBrowser && this.checkIsAndroid();
 
     this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
   }

package/ui.data-table/composables/attrs.composable.js

@@ -3,9 +3,19 @@ import defaultConfig from "../configs/default.config";
 import { cva, cx } from "../../service.ui";
 import { computed, useSlots } from "vue";
 
-export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky }) {
+export function useAttrs(
+  props,
+  {
+    tableRows,
+    selectedRows,
+    isNesting,
+    isHeaderSticky,
+    isFooterSticky,
+    hasSlotContentTheadActions,
+  },
+) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, customHeaderItem, headerCell } = config.value;
+  const { wrapper, stickyHeaderColumn, headerCell } = config.value;
 
   const slot = useSlots();
 
@@ -16,9 +26,9 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
   });
 
   const cvaCustomHeaderItem = cva({
-    base: customHeaderItem.base,
-    variants: customHeaderItem.variants,
-    compoundVariants: customHeaderItem.compoundVariants,
+    base: stickyHeaderColumn.base,
+    variants: stickyHeaderColumn.variants,
+    compoundVariants: stickyHeaderColumn.compoundVariants,
   });
 
   const cvaHeaderCell = cva({
@@ -34,12 +44,12 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const customHeaderItemAttrsRaw = getAttrs("customHeaderItem", {
+  const customHeaderItemAttrsRaw = getAttrs("stickyHeaderColumn", {
     classes: customHeaderItemClasses,
   });
   const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
   const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
-  const headerStickyLoaderAttrs = getAttrs("headerStickyLoader", { isComponent: true });
+  const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
   const tableAttrs = getAttrs("table");
   const headerAttrs = getAttrs("header");
   const headerRowAttrs = getAttrs("headerRow");
@@ -100,17 +110,23 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
   const headerRowCellAttrs = computed(() => ({
     class: cx([
       config.value.headerRow,
-      selectedRows.value.length && !isHeaderSticky.value && config.value.customHeaderHidden,
+      selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
     ]),
   }));
 
-  const customHeaderAttrs = computed(() => ({
-    class: cx([
-      config.value.customHeader,
-      selectedRows.value.length && config.value.customHeaderActions,
-      isHeaderSticky.value && props.stickyHeader && config.value.customHeaderSticky,
-    ]),
-  }));
+  const stickyHeaderAttrs = computed(() => {
+    // console.log("hasSlotContentTheadActions", hasSlotContentTheadActions.value);
+
+    return {
+      class: cx([
+        config.value.stickyHeader,
+        selectedRows.value.length &&
+          hasSlotContentTheadActions.value &&
+          config.value.stickyHeaderActions,
+        isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
+      ]),
+    };
+  });
 
   const footerClassesAttrs = computed(() => ({
     class: cx([config.value.footer, isFooterSticky.value && config.value.footerSticky]),
@@ -124,7 +140,7 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
     ]),
   }));
 
-  const customHeaderItemAttrs = computed(() => (thClass) => ({
+  const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
     ...customHeaderItemAttrsRaw.value,
     class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
   }));
@@ -142,14 +158,14 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
   };
 
   const toggleButtonWrapperAttrs = computed(() => (index) => ({
-    class: index === 0 && props.nesting ? config.value.toggleButtonWrapper : "",
+    class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
   }));
 
   return {
     config,
     wrapperAttrs,
-    customHeaderItemAttrs,
-    customHeaderAttrs,
+    stickyHeaderColumnAttrs,
+    stickyHeaderAttrs,
     tableWrapperAttrs,
     headerRowCellAttrs,
     bodyRowAttrs,
@@ -172,7 +188,7 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
     emptyAttrs,
     dateSeparatorAttrs,
     selectedRowsCountAttrs,
-    headerStickyLoaderAttrs,
+    stickyHeaderLoaderAttrs,
     tableAttrs,
     headerRowAttrs,
     tableLoaderAttrs,

package/ui.data-table/configs/default.config.js

@@ -1,17 +1,23 @@
 export default /*tw*/ {
   wrapper: {
-    base: "relative bg-white rounded-2xl",
+    base: "relative bg-white rounded-lg",
     variants: {
       compact: {
         true: "group/table-compact",
       },
     },
   },
-  customHeader: "flex items-center z-30 overflow-hidden",
-  customHeaderSticky: "fixed top-0 border border-t-0 border-gray-200 bg-white group/fixed-header",
-  customHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50 group-[]/fixed-header:!rounded-none",
-  customHeaderHidden: "relative -top-[3.75rem] collapse",
-  customHeaderItem: {
+  headerCheckboxWrapper: "w-[3.75rem]",
+  header: "border-b border-gray-200 ",
+  headerRow: "",
+  headerCell: "p-4 text-sm font-normal text-gray-500 text-left",
+  headerSelectAllCheckbox: "",
+  stickyHeader: "flex items-center z-30 overflow-hidden rounded-t-lg border border-gray-200 border-b-0",
+  stickyHeaderHidden: "relative -top-[3.75rem] collapse",
+  stickyHeaderLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
+  stickyHeaderActive: "fixed top-0 border  border-gray-200 bg-white rounded-none",
+  stickyHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50",
+  stickyHeaderColumn: {
     base: "flex-none text-sm font-normal text-gray-500 px-[1.125rem] py-4 [&:nth-child(2)]:pl-0",
     variants: {
       compact: {
@@ -19,27 +25,11 @@ export default /*tw*/ {
       },
     },
   },
-  selectedRowsCount: "flex items-center pr-4 font-medium text-gray-900",
+  selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  headerStickyLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
   innerWrapper: "overflow-auto rounded-lg border border-gray-200",
   innerWrapperSelected: "!rounded-t-none border-t-0",
-  table: "min-w-full border-none bg-white text-sm w-full",
-  headerCheckboxWrapper: "w-[3.75rem]",
-  header: "border-b border-solid border-gray-200",
-  headerRow: "",
-  headerCell: {
-    base: `
-      px-[1.125rem] py-4 text-sm font-normal text-gray-500
-      text-left first:p-4 last:p-4 [&:nth-child(2)]:pl-0
-    `,
-    variants: {
-      compact: {
-        true: "bg-white p-4 first:p-4 last:p-4",
-      },
-    },
-  },
-  headerSelectAllCheckbox: "",
+  table: "min-w-full border-none text-sm w-full",
   tableLoader: "absolute !top-auto",
   moreRow: "!px-0 !py-4 first:mx-auto",
   moreRowHidden: "!p-0",
@@ -78,8 +68,7 @@ export default /*tw*/ {
     tomorrow: "tomorrow",
   },
   defaultVariants: {
-    nestingFrom: 0,
-    nesting: false,
+    nesting: null,
     compact: false,
     selectable: false,
     stickyHeader: false,

package/ui.data-table/index.stories.js

@@ -8,17 +8,26 @@ import ULink from "../ui.button-link";
 import UMoney from "../ui.text-money";
 import UBadge from "../ui.text-badge";
 
+const STICKY_PARAMETERS = {
+  docs: {
+    story: {
+      inline: false,
+      iframeHeight: 450,
+    },
+  },
+};
+
 export default {
   id: "7010",
   title: "Data / Table",
   component: UTable,
   argTypes: {
     ...getArgTypes(UTable.name),
-    itemsRow: {
+    row: {
       description:
         "The row of the table. It's not a prop (it created for ease of work with storybook).",
     },
-    numberOfRow: {
+    numberOfRows: {
       description:
         "The number of table rows. It's not a prop (it created for ease of work with storybook).",
     },
@@ -30,8 +39,8 @@ export default {
       { key: "key_3", label: "title 3" },
       { key: "key_4", label: "title 4" },
     ],
-    itemsRow: {
-      id: "",
+    row: {
+      id: 1,
       isChecked: false,
       key_1: {
         primaryRow: "primaryRow",
@@ -49,12 +58,8 @@ export default {
         primaryRow: "primaryRow",
         secondaryRow: "secondaryRow",
       },
-      date: {
-        primaryRow: 1709046013,
-        separatorDate: new Date(1709046013 * 1000).toString(),
-      },
     },
-    numberOfRow: 5,
+    numberOfRows: 5,
   },
 };
 
@@ -76,8 +81,12 @@ const DefaultTemplate = (args) => ({
     itemsData() {
       let rows = [];
 
-      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
-      rows = rows.map((item) => (item.id = getRandomId()));
+      for (let i = 0; i < args.numberOfRows; i++) {
+        const newRow = { ...args.row };
+
+        newRow.id = getRandomId();
+        rows.push(newRow);
+      }
 
       return rows;
     },
@@ -113,81 +122,39 @@ const SlotTemplate = (args) => ({
     itemsData() {
       const rows = [];
 
-      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
+      for (let i = 0; i < args.numberOfRows; i++) rows.push(args.row);
 
       return rows;
     },
   },
 });
 
-// TODO: Find how to interrupt styles inside a component for UMoney.
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const defaultCells = SlotTemplate.bind({});
-defaultCells.args = {
-  columns: [
-    { key: "link", label: "link" },
-    { key: "money", label: "money", thClass: "text-right" },
-    { key: "email", label: "email" },
-    { key: "tags", label: "tags" },
-  ],
-  itemsRow: {
-    link: "some link",
-    money: {
-      sum: 10,
-      currencySymbol: "$",
-    },
-    email: "some@email.ua",
-    tags: {
-      tags: { label: "some tag" },
-      variant: "orange",
-    },
-  },
-
-  slotTemplate: `
-    <template #cell-link="{ value }">
-      <ULink :url="value" size="value" :label="value" />
-    </template>
-
-    <template #cell-money="{ value }">
-      <UMoney :sum="value.sum" :symbol="value.currencySymbol" />
-    </template>
-
-    <template #cell-email="{ value }">
-      <ULink :label="value" :url="value" type="email" size="sm" />
-    </template>
-
-    <template #cell-tags="{ value }">
-      <div>
-        <UBadge
-          v-for="item in value.tags"
-          :key="item"
-          :label="item"
-          :color="value.variant"
-        />
-      </div>
-    </template>
-  `,
-};
-
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 
 export const Filters = EmptyTemplate.bind({});
-Empty.args = { filters: true };
-
-export const Resource = DefaultTemplate.bind({});
-Resource.args = { resource: "/7010--resource" };
+Filters.args = { filters: true };
 
 export const selectable = DefaultTemplate.bind({});
 selectable.args = { selectable: true };
 
-// TODO: Don't work fixed footer. Find how to fix it.
-export const fixedFooter = SlotTemplate.bind({});
-fixedFooter.args = {
-  stickyFooter: true,
+export const stickyHeader = DefaultTemplate.bind({});
+stickyHeader.parameters = STICKY_PARAMETERS;
+stickyHeader.args = {
+  numberOfRows: 50,
   selectable: true,
+  stickyHeader: true,
+};
+
+export const stickyFooter = SlotTemplate.bind({});
+stickyFooter.parameters = STICKY_PARAMETERS;
+stickyFooter.args = {
+  numberOfRows: 50,
+  selectable: true,
+  stickyFooter: true,
   slotTemplate: `
     <template #tfoot>
       <UTableCell>
@@ -200,19 +167,14 @@ fixedFooter.args = {
   `,
 };
 
-export const stickyHeader = DefaultTemplate.bind({});
-stickyHeader.args = { stickyHeader: true };
-
 export const compact = DefaultTemplate.bind({});
 compact.args = { compact: true };
 
 export const DateDivider = DefaultTemplate.bind({});
-DateDivider.args = {
-  dateDivider: true,
-};
+DateDivider.args = { dateDivider: true };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
-DateDivider.args = {
+DateDividerCustomLabel.args = {
   dateDivider: [
     {
       date: new Date(1709046013 * 1000).toString(),
@@ -300,3 +262,48 @@ slotTfoot.args = {
     </template>
   `,
 };
+
+export const cellSlots = SlotTemplate.bind({});
+cellSlots.args = {
+  columns: [
+    { key: "link", label: "link" },
+    { key: "money", label: "money", thClass: "text-right" },
+    { key: "email", label: "email" },
+    { key: "tags", label: "tags" },
+  ],
+  row: {
+    link: "some link",
+    money: {
+      sum: 10,
+      currencySymbol: "$",
+    },
+    email: "some@email.ua",
+    tags: {
+      tags: { label: "some tag" },
+      variant: "orange",
+    },
+  },
+
+  slotTemplate: `
+    <template #cell-link="{ value }">
+      <ULink :url="value" :label="value" />
+    </template>
+
+    <template #cell-money="{ value }">
+      <UMoney :sum="value.sum" :symbol="value.currencySymbol" />
+    </template>
+
+    <template #cell-email="{ value }">
+      <ULink :label="value" :url="value" type="email" size="sm" />
+    </template>
+
+    <template #cell-tags="{ value }">
+      <UBadge
+        v-for="item in value.tags"
+        :key="item"
+        :label="item"
+        :color="value.variant"
+      />
+    </template>
+  `,
+};

package/ui.data-table/index.vue

@@ -4,7 +4,7 @@
       v-show="isShownStickyOrActionsHeader"
       ref="headerStickyRow"
       :style="tableRowWidthStyle"
-      v-bind="customHeaderAttrs"
+      v-bind="stickyHeaderAttrs"
     >
       <UCheckbox
         v-if="selectable"
@@ -15,18 +15,24 @@
         v-bind="selectAllCheckboxAttrs"
       />
 
-      <template v-if="selectedRows.length">
-        <div v-bind="selectedRowsCountAttrs" v-text="selectedRows.length" />
+      <div
+        v-if="selectedRows.length"
+        v-bind="selectedRowsCountAttrs"
+        v-text="selectedRows.length"
+      />
 
-        <!-- @slot Use it to add actions instead table head (it appears when you select rows in table). -->
-        <slot name="thead-actions" :selected-rows="selectedRows" />
-      </template>
+      <!-- @slot Use it to add actions instead table head (it appears when you select rows in table). -->
+      <slot
+        v-if="selectedRows.length && hasSlotContent($slots['thead-actions'])"
+        name="thead-actions"
+        :selected-rows="selectedRows"
+      />
 
       <template v-else>
         <div
           v-for="(column, index) in columns"
           :key="index"
-          v-bind="customHeaderItemAttrs(column.thClass)"
+          v-bind="stickyHeaderColumnAttrs(column.thClass)"
         >
           <template v-if="hasSlotContent($slots[`thead-${column.key}`])">
             <!-- @slot Use it to customise table column. -->
@@ -42,11 +48,10 @@
         </div>
       </template>
 
-      <!-- TODO: Change to loaders config after laoader refactoring -->
       <ULoaderTop
         v-if="resource && isHeaderSticky"
         :resource-names="resource"
-        v-bind="headerStickyLoaderAttrs"
+        v-bind="stickyHeaderLoaderAttrs"
       />
     </div>
 
@@ -87,7 +92,6 @@
             </th>
           </tr>
 
-          <!-- TODO: Change to loaders config after laoader refactoring -->
           <ULoaderTop v-if="resource" :resource-names="resource" v-bind="tableLoaderAttrs" />
         </thead>
 
@@ -347,20 +351,12 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UTable).default.stickyFooter,
   },
 
-  /**
-   * Enable nesting rows.
-   */
-  nesting: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTable).default.nesting,
-  },
-
   /**
    * Sets the nesting level from which folding button need to be shown.
    */
-  nestingFrom: {
+  nesting: {
     type: Number,
-    default: UIService.get(defaultConfig, UTable).default.nestingFrom,
+    default: UIService.get(defaultConfig, UTable).default.nesting,
   },
 
   /**
@@ -431,47 +427,6 @@ const isFooterSticky = computed(
     isCheckedMoreOneTableItems.value,
 );
 
-const {
-  config,
-  wrapperAttrs,
-  customHeaderItemAttrs,
-  customHeaderAttrs,
-  tableWrapperAttrs,
-  headerRowCellAttrs,
-  afterLastRowAttrs,
-  afterLastRowCellAttrs,
-  beforeFirstRowAttrs,
-  beforeFirstRowCellAttrs,
-  bodyRowAttrs,
-  footerClassesAttrs,
-  dateSeparatorRowAttrs,
-  toggleButtonWrapperAttrs,
-  headerCellAttrs,
-  bodyCellAttrs,
-  checkboxBodyWrapperCellAttrs,
-  footerCellAttrs,
-  selectAllCheckboxAttrs,
-  headerSelectAllCheckboxAttrs,
-  tableCheckboxAttrs,
-  collapseIconAttrs,
-  expandIconAttrs,
-  emptyAttrs,
-  dateSeparatorAttrs,
-  selectedRowsCountAttrs,
-  headerStickyLoaderAttrs,
-  tableAttrs,
-  headerRowAttrs,
-  tableLoaderAttrs,
-  bodyAttrs,
-  toggleItemButtonAttrs,
-  secondaryRowAttrs,
-  secondaryRowEmptyAttrs,
-  footerRowAttrs,
-  footerStickyRowAttrs,
-  hasSlotContent,
-  headerAttrs,
-} = useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky });
-
 const currentLocale = computed(() => merge(tm("UTable"), props.config.i18n));
 
 const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
@@ -511,16 +466,72 @@ const isCheckedMoreOneTableItems = computed(() => {
 
 const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
 
-const hasContentBeforeFirstRowSlot = computed(() => {
+const hasSlotContentBeforeFirstRow = computed(() => {
   return hasSlotContent(slots["before-first-row"])
     ? slots["before-first-row"]()?.some((item) => !!item.type?.render)
     : false;
 });
 
+const hasSlotContentTheadActions = computed(() => {
+  return hasSlotContent(slots["thead-actions"]);
+});
+
 const emptyTableMsg = computed(() => {
   return props.filters ? currentLocale.value.noResultsForFilters : currentLocale.value.noItems;
 });
 
+const isNesting = computed(() => {
+  return !isNaN(props.nesting) && props.nesting !== null;
+});
+
+const {
+  config,
+  wrapperAttrs,
+  stickyHeaderColumnAttrs,
+  stickyHeaderAttrs,
+  tableWrapperAttrs,
+  headerRowCellAttrs,
+  afterLastRowAttrs,
+  afterLastRowCellAttrs,
+  beforeFirstRowAttrs,
+  beforeFirstRowCellAttrs,
+  bodyRowAttrs,
+  footerClassesAttrs,
+  dateSeparatorRowAttrs,
+  toggleButtonWrapperAttrs,
+  headerCellAttrs,
+  bodyCellAttrs,
+  checkboxBodyWrapperCellAttrs,
+  footerCellAttrs,
+  selectAllCheckboxAttrs,
+  headerSelectAllCheckboxAttrs,
+  tableCheckboxAttrs,
+  collapseIconAttrs,
+  expandIconAttrs,
+  emptyAttrs,
+  dateSeparatorAttrs,
+  selectedRowsCountAttrs,
+  stickyHeaderLoaderAttrs,
+  tableAttrs,
+  headerRowAttrs,
+  tableLoaderAttrs,
+  bodyAttrs,
+  toggleItemButtonAttrs,
+  secondaryRowAttrs,
+  secondaryRowEmptyAttrs,
+  footerRowAttrs,
+  footerStickyRowAttrs,
+  hasSlotContent,
+  headerAttrs,
+} = useAttrs(props, {
+  tableRows,
+  selectedRows,
+  isNesting,
+  isHeaderSticky,
+  isFooterSticky,
+  hasSlotContentTheadActions,
+});
+
 watch(selectAll, onChangeSelectAll, { deep: true });
 watch(selectedRows, onChangeSelectedRows, { deep: true });
 watch(tableRows, () => emit("update:rows", tableRows), { deep: true });
@@ -569,11 +580,11 @@ function onWindowResizeSetWidth() {
 
 function isShownIcon({ index, row }) {
   const isChildren = row.childrenIds?.length > 0;
-  const isWithinNestingLevel = row.nestedLevel >= props.nestingFrom;
+  const isWithinNestingLevel = row.nestedLevel >= props.nesting;
 
   const isFirstRow = index === 0;
 
-  return isFirstRow && (isChildren || row.isNestingRow) && props.nesting && isWithinNestingLevel;
+  return isFirstRow && (isChildren || row.isNestingRow) && isNesting.value && isWithinNestingLevel;
 }
 
 function isIconActive(row) {
@@ -581,7 +592,7 @@ function isIconActive(row) {
 }
 
 function onClickShowItem(row) {
-  if (!props.nesting || !row.childrenIds.length) return;
+  if (!isNesting.value || !row.childrenIds.length) return;
   const [firstElement] = row.childrenIds;
 
   row.isHidden = !row.isHidden;
@@ -590,7 +601,7 @@ function onClickShowItem(row) {
     hiddenIds.value.push(...row.childrenIds);
   } else {
     hiddenIds.value =
-      row.nestedLevel === props.nestingFromLevel
+      row.nestedLevel === props.nesting
         ? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
         : hiddenIds.value.filter((item) => item !== firstElement);
   }
@@ -660,7 +671,7 @@ function synchronizeTableItemsWithProps() {
   tableRows.value = props.rows;
 
   tableRows.value.forEach((item) => {
-    if (props.nesting && item.isHidden && item.childrenIds?.length) {
+    if (isNesting.value && item.isHidden && item.childrenIds?.length) {
       hiddenIds.value.push(...item.childrenIds);
     }
   });
@@ -678,7 +689,7 @@ function isShownDateSeparator(rowIndex) {
   const currentItem = tableRows.value[rowIndex];
 
   if (rowIndex === 0) {
-    return hasContentBeforeFirstRowSlot.value;
+    return hasSlotContentBeforeFirstRow.value;
   }
 
   const isPrevSameDate = prevItem?.date?.primaryRow === currentItem?.date?.primaryRow;

package/ui.form-checkbox/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "w-auto max-w-max relative gap-0",
+  label: "w-auto max-w-max relative gap-3",
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {

package/ui.form-date-picker/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  input: "",
+  input: "relative",
   inputActive: {
     block: {
       base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",

package/ui.form-date-picker-range/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "",
+  wrapper: "relative",
   input: "",
   inputActive: {
     block: {
@@ -55,9 +55,9 @@ export default /*tw*/ {
   periodDateActive: "bg-zinc-100",
   rangeInputWrapper: "flex mt-4",
   rangeInput: {
-    wrapper: "ml-0 group/range-input-wrapper",
     block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
     label: {
+      wrapper: "group/range-input-wrapper",
       description: "hidden",
     },
     input: {

package/ui.form-select/composables/attrs.composable.js

@@ -92,8 +92,6 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
   const wrapperTopAttrs = getAttrs("wrapperTop");
   const leftSlotAttrs = getAttrs("leftSlot");
-  const beforeCaretSlotAttrs = getAttrs("beforeCaretSlot");
-  const afterCaretSlotAttrs = getAttrs("afterCaretSlot");
   const iconToggleAttrs = getAttrs("iconToggle", { isComponent: true });
   const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
   const selectedLabelsAttrs = getAttrs("selectedLabels");
@@ -136,6 +134,20 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
     class: cx([caretClearAttrsRaw.value.class, caretClasses.value]),
   }));
 
+  const beforeCaretSlotAttrsRaw = getAttrs("beforeCaretSlot");
+
+  const beforeCaretSlotAttrs = computed(() => ({
+    ...beforeCaretSlotAttrsRaw.value,
+    class: cx([beforeCaretSlotAttrsRaw.value.class, caretClasses.value]),
+  }));
+
+  const afterCaretSlotAttrsRaw = getAttrs("afterCaretSlot");
+
+  const afterCaretSlotAttrs = computed(() => ({
+    ...afterCaretSlotAttrsRaw.value,
+    class: cx([afterCaretSlotAttrsRaw.value.class, caretClasses.value]),
+  }));
+
   const searchAttrsRaw = getAttrs("search");
 
   const searchAttrs = computed(() => ({

package/ui.form-select/index.vue

@@ -68,7 +68,7 @@
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
-        <div v-if="multiple" v-bind="selectedLabelsAttrs">
+        <div v-if="multiple && localValue.length" v-bind="selectedLabelsAttrs">
           <span v-for="item in localValue" :key="item[valueKey]" v-bind="selectedLabelAttrs">
             <!-- @slot Use it to add selected value label. -->
             <slot

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6449,21 +6449,12 @@
             },
             {
               "name": "nesting",
-              "description": "Enable nesting rows.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "nestingFrom",
               "description": "Sets the nesting level from which folding button need to be shown.",
               "value": {
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "0"
+              "default": "[object Object]"
             },
             {
               "name": "filters",