vueless 0.0.166 → 0.0.167

package/package.json

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

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

@@ -31,8 +31,9 @@ export function useAttrs(
   const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
     classes: stickyHeaderCellClasses,
   });
-  const stickyHeaderCounterAttrs = getAttrs("stickyHeaderCounter");
-  const stickyHeaderActionsCounterAttrs = getAttrs("stickyHeaderActionsCounter");
+  const headerCounterAttrsRaw = getAttrs("headerCounter");
+  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter");
+  const stickyHeaderActionsCounterAttrsRaw = getAttrs("stickyHeaderActionsCounter");
   const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
     isComponent: true,
   });
@@ -84,7 +85,22 @@ export function useAttrs(
 
   const headerCellAttrs = computed(() => (classes) => ({
     ...headerCellAttrsRaw.value,
-    class: cx([headerCellAttrsRaw.value.class, classes]),
+    class: cx([config.value.headerCellGeneral, headerCellAttrsRaw.value.class, classes]),
+  }));
+
+  const stickyHeaderActionsCounterAttrs = computed(() => ({
+    ...stickyHeaderActionsCounterAttrsRaw.value,
+    class: cx([config.value.headerCounterGeneral, stickyHeaderActionsCounterAttrsRaw.value.class]),
+  }));
+
+  const stickyHeaderCounterAttrs = computed(() => ({
+    ...stickyHeaderCounterAttrsRaw.value,
+    class: cx([config.value.headerCounterGeneral, stickyHeaderCounterAttrsRaw.value.class]),
+  }));
+
+  const headerCounterAttrs = computed(() => ({
+    ...headerCounterAttrsRaw.value,
+    class: cx([config.value.headerCounterGeneral, headerCounterAttrsRaw.value.class]),
   }));
 
   const bodyRowBeforeAttrs = computed(() => ({
@@ -135,7 +151,7 @@ export function useAttrs(
 
   const stickyHeaderCellAttrs = computed(() => (classes) => ({
     ...stickyHeaderCellAttrsRaw.value,
-    class: cx([stickyHeaderCellAttrsRaw.value.class, classes]),
+    class: cx([config.value.headerCellGeneral, stickyHeaderCellAttrsRaw.value.class, classes]),
   }));
 
   const bodyRowDateSeparatorAttrs = (rowIndex) => {
@@ -175,6 +191,7 @@ export function useAttrs(
     footerCellAttrs,
     stickyHeaderCounterAttrs,
     stickyHeaderActionsCounterAttrs,
+    headerCounterAttrs,
     headerCheckboxAttrs,
     bodyCheckboxAttrs,
     bodyCellNestedCollapseIconAttrs,

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

@@ -1,21 +1,24 @@
 export default /*tw*/ {
   wrapper: "relative",
+  headerCellGeneral: "p-4 text-sm font-normal text-gray-500 text-left",
+  headerCounterGeneral: "mr-3 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 text-sm text-gray-500 p-4 whitespace-nowrap",
+  stickyHeaderCell: "flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "",
-  stickyHeaderCounter: "absolute top-4 left-11 pr-3 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
+  stickyHeaderCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
   stickyHeaderLoader: "",
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
   stickyHeaderActionsCheckbox: "",
-  stickyHeaderActionsCounter: "-ml-2.5 mr-3 font-medium text-sm text-gray-900", // style dupliactions
+  stickyHeaderActionsCounter: "-ml-2",
   tableWrapper: "border border-gray-200 rounded-lg bg-white",
   table: "min-w-full border-none text-sm w-full",
   header: "border-b border-gray-200",
   headerRow: "",
-  headerCell: "p-4 text-sm font-normal text-gray-500 text-left", // style dupliactions
+  headerCell: "",
   headerCellCheckbox: "w-10",
   headerCheckbox: "",
+  headerCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80% mt-px ml-px",
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
@@ -28,7 +31,7 @@ export default /*tw*/ {
   bodyCell: "",
   bodyCellSecondary: "mt-1 text-xs text-gray-500",
   bodyCellSecondaryEmpty: "inline-block",
-  bodyCellCheckbox: "!px-4", // try to remove important
+  bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateSeparator: "",
   bodyCellNestedWrapper: "flex items-center",
   bodyCellNested: "flex relative -top-px",
@@ -48,13 +51,10 @@ export default /*tw*/ {
     collapse group-[]/footer-fixed:[visibility:inherit]
   `,
   i18n: {
-    noItems: "There is no data in the table yet.",
-    noResultsForFilters: "No results were found for the specified filters.",
-    today: "today",
-    tomorrow: "tomorrow",
+    noData: "There is no data in the table.",
   },
   defaultVariants: {
-    nesting: null,
+    nesting: false,
     compact: false,
     selectable: false,
     stickyHeader: false,

package/ui.data-table/index.vue

@@ -98,6 +98,12 @@
                 :data-cy="`${dataCy}-select-all`"
                 v-bind="headerCheckboxAttrs"
               />
+
+              <div
+                v-if="selectedRows.length"
+                v-bind="headerCounterAttrs"
+                v-text="selectedRows.length"
+              />
             </th>
 
             <th
@@ -169,7 +175,7 @@
                   :data-id="row.id"
                   :value="row.id"
                   size="sm"
-                  :data-cy="`${dataCy}-table-body-checkbox`"
+                  :data-cy="`${dataCy}-body-checkbox`"
                   v-bind="bodyCheckboxAttrs"
                   @click.stop
                 />
@@ -181,8 +187,9 @@
                 :compact="compact"
                 v-bind="bodyCellAttrs(getCellClasses(key))"
               >
-                <template v-if="Boolean($slots[`cell-${key}`])">
+                <template v-if="hasSlotContent($slots[`cell-${key}`])">
                   <div
+                    v-if="isNesting"
                     :style="getNestedShift(row.nestedLevel)"
                     v-bind="bodyCellNestedWrapperAttrs(index)"
                     @click="onClickNestedWrapper(row)"
@@ -207,9 +214,10 @@
                         v-bind="bodyCellNestedCollapseIconAttrs"
                       />
                     </div>
-                    <!-- @slot Use it to customise table cell item (in whole column). -->
-                    <slot :name="`cell-${key}`" :value="value" :row="row" />
                   </div>
+
+                  <!-- @slot Use it to customise table cell item (in whole column). -->
+                  <slot :name="`cell-${key}`" :value="value" :row="row" />
                 </template>
 
                 <template v-else-if="value?.hasOwnProperty('secondary')">
@@ -242,7 +250,7 @@
 
             <tr v-if="rowIndex === lastRow" v-bind="bodyRowAfterAttrs">
               <UTableCell
-                v-if="hasSlotContent(slots['after-last-row'])"
+                v-if="hasSlotContent($slots['after-last-row'])"
                 :compact="compact"
                 :colspan="colsCount"
                 v-bind="bodyRowAfterCellAttrs"
@@ -263,7 +271,7 @@
               <slot name="empty-state">
                 <UEmpty
                   size="sm"
-                  :description="emptyTableMsg"
+                  :description="currentLocale.noData"
                   :data-cy="`${dataCy}-empty`"
                   v-bind="bodyEmptyStateAttrs"
                 />
@@ -387,18 +395,10 @@ const props = defineProps({
    * Sets the nesting level from which folding button need to be shown.
    */
   nesting: {
-    type: Number,
+    type: [Number, Boolean],
     default: UIService.get(defaultConfig, UTable).default.nesting,
   },
 
-  /**
-   * Indicate if filters applied.
-   */
-  filters: {
-    type: Boolean,
-    default: false,
-  },
-
   /**
    * Set loader resource name to activate table top loader exact for that resource.
    */
@@ -502,12 +502,8 @@ const hasSlotContentBeforeFirstRow = computed(() => {
     : false;
 });
 
-const emptyTableMsg = computed(() => {
-  return props.filters ? currentLocale.value.noResultsForFilters : currentLocale.value.noItems;
-});
-
 const isNesting = computed(() => {
-  return !isNaN(props.nesting) && props.nesting !== null;
+  return Boolean(props.nesting) || props.nesting === 0;
 });
 
 const {
@@ -531,6 +527,7 @@ const {
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
+  headerCounterAttrs,
   bodyCheckboxAttrs,
   bodyCellNestedCollapseIconAttrs,
   bodyCellNestedExpandIconAttrs,
@@ -605,8 +602,9 @@ function onWindowResize() {
 }
 
 function isShownNestedIcon({ index, row }) {
+  const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
+  const isWithinNestingLevel = row.nestedLevel >= nestedLevel;
   const isChildren = row.childrenIds?.length > 0;
-  const isWithinNestingLevel = row.nestedLevel >= props.nesting;
 
   const isFirstRow = index === 0;
 
@@ -626,8 +624,10 @@ function onClickNestedWrapper(row) {
   if (row.isHidden && row.childrenIds.length) {
     hiddenIds.value.push(...row.childrenIds);
   } else {
+    const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
+
     hiddenIds.value =
-      row.nestedLevel === props.nesting
+      row.nestedLevel === nestedLevel
         ? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
         : hiddenIds.value.filter((item) => item !== firstElement);
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.166",
+  "version": "0.0.167",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6597,15 +6597,7 @@
               "description": "Sets the nesting level from which folding button need to be shown.",
               "value": {
                 "kind": "expression",
-                "type": "number"
-              }
-            },
-            {
-              "name": "filters",
-              "description": "Indicate if filters applied.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
+                "type": "number|boolean"
               },
               "default": "false"
             },