vueless 1.1.1-beta.13 → 1.1.1-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.13",
+  "version": "1.1.1-beta.15",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -81,7 +81,8 @@ export const Vueless = function (options = {}) {
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     if (isInternalEnv || isStorybookEnv) {
-      await showHiddenStories(vuelessSrcDir);
+      // TODO: Fix it later
+      // await showHiddenStories(vuelessSrcDir);
       await removeCustomPropTypes(vuelessSrcDir);
     }
 
@@ -116,7 +117,7 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: ["vueless/directives/**/*.ts"],
+        include: ["vueless/directives/**/*.ts", "vueless/constants.js"],
       },
     }),
 

package/ui.data-table/UTable.vue

@@ -531,11 +531,15 @@ const {
           :data-test="getDataTest('select-all')"
         />
 
-        <div
-          v-if="localSelectedRows.length"
-          v-bind="stickyHeaderCounterAttrs"
-          v-text="localSelectedRows.length"
-        />
+        <div v-if="localSelectedRows.length" v-bind="stickyHeaderCounterAttrs">
+          <!--
+            @slot Use it to customize header counter.
+            @binding {number} total
+          -->
+          <slot name="header-counter" :total="localSelectedRows.length">
+            {{ localSelectedRows.length }}
+          </slot>
+        </div>
       </div>
 
       <!-- TODO: Remove any when key attrs are typed-->
@@ -657,11 +661,15 @@ const {
                 :data-test="getDataTest('select-all')"
               />
 
-              <div
-                v-if="localSelectedRows.length"
-                v-bind="headerCounterAttrs"
-                v-text="localSelectedRows.length"
-              />
+              <div v-if="localSelectedRows.length" v-bind="headerCounterAttrs">
+                <!--
+                  @slot Use it to customize header counter.
+                  @binding {number} total
+                -->
+                <slot name="header-counter" :total="localSelectedRows.length">
+                  {{ localSelectedRows.length }}
+                </slot>
+              </div>
             </th>
 
             <th

package/ui.data-table/storybook/stories.ts

@@ -474,6 +474,17 @@ DateDividerCustomLabel.parameters = {
   },
 };
 
+export const HeaderCounterSlot = DefaultTemplate.bind({});
+HeaderCounterSlot.args = {
+  selectable: true,
+  config: { headerCellCheckbox: "w-20" },
+  slotTemplate: `
+    <template #header-counter="{ total }">
+      Total: {{ total }}
+    </template>
+  `,
+};
+
 export const HeaderKeySlot = DefaultTemplate.bind({});
 HeaderKeySlot.args = {
   slotTemplate: `

package/ui.data-table/tests/UTable.test.ts

@@ -294,6 +294,24 @@ describe("UTable.vue", () => {
   });
 
   describe("Slots", () => {
+    it("Header Counter Slot – renders custom header counter content", () => {
+      const customHeaderCounterContent = "Custom Header Counter";
+
+      const component = mountUTable(
+        getDefaultProps({
+          selectable: true,
+          selectedRows: [defaultRows[0]],
+        }),
+        {
+          slots: {
+            "header-counter": customHeaderCounterContent,
+          },
+        },
+      );
+
+      expect(component.text()).toContain(customHeaderCounterContent);
+    });
+
     it("Header Slot – renders custom header content", () => {
       const customHeaderContent = "Custom Name Header";