vueless 1.1.1-beta.2 → 1.1.1-beta.20

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -82,10 +82,12 @@ describe("UAccordion", () => {
     // ID prop
     it("uses provided id prop", () => {
       const id = "custom-id";
+      const description = "some text";
 
       const component = mount(UAccordion, {
         props: {
           id,
+          description,
         },
       });
 
@@ -173,6 +175,50 @@ describe("UAccordion", () => {
 
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
+
+    // Default slot
+    it("renders default slot content when accordion is opened", async () => {
+      const slotContent = "Custom accordion content";
+      const slotClass = "custom-content";
+
+      const component = mount(UAccordion, {
+        slots: {
+          default: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+
+      await component.trigger("click");
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      await component.trigger("click");
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+    });
+
+    it("does not render default slot content when accordion is closed", () => {
+      const slotContent = "Custom accordion content";
+      const slotClass = "custom-content";
+
+      const component = mount(UAccordion, {
+        slots: {
+          default: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(false);
+    });
+
+    it("does not render content wrapper when default slot is empty", async () => {
+      const component = mount(UAccordion);
+
+      await component.trigger("click");
+
+      expect(component.find("[vl-key='content']").exists()).toBe(false);
+    });
   });
 
   // Events

package/ui.data-list/UDataList.vue

@@ -186,6 +186,7 @@ const {
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
+            <!-- @vue-ignore -->
             <template #label="slotProps: { item: DataListItem; crossed: boolean }">
               <!--
                 @slot Use it to modify label.
@@ -200,6 +201,7 @@ const {
               </slot>
             </template>
 
+            <!-- @vue-ignore -->
             <template #actions="slotProps: { item: DataListItem }">
               <!--
                 @slot Use it to add custom actions.

package/ui.data-table/UTable.vue

@@ -378,9 +378,7 @@ function onChangeLocalSelectedRows(selectedRows: Row[]) {
 
   selectAll.value = !!selectedRows.length;
 
-  if (!isEqual(localSelectedRows.value, props.selectedRows)) {
-    emit("update:selectedRows", localSelectedRows.value);
-  }
+  emit("update:selectedRows", localSelectedRows.value);
 }
 
 function clearSelectedItems() {
@@ -533,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-->
@@ -659,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";
 

package/ui.dropdown-button/UDropdownButton.vue

@@ -173,6 +173,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
       :label="buttonLabel"
       :size="size"
       :color="color"
+      :block="block"
       :round="round"
       :square="square"
       :variant="variant"

package/ui.dropdown-button/config.ts

@@ -1,5 +1,12 @@
 export default /*tw*/ {
-  wrapper: "relative inline-block h-max",
+  wrapper: {
+    base: "relative inline-block h-max",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
   dropdownButton: "{UButton} justify-between",
   toggleIcon: {
     base: "{UIcon} transition duration-300 -mr-1",
@@ -48,6 +55,7 @@ export default /*tw*/ {
     xPosition: "left",
     searchable: false,
     round: false,
+    block: false,
     square: false,
     disabled: false,
     multiple: false,

package/ui.dropdown-button/storybook/stories.ts

@@ -167,7 +167,7 @@ export const ListboxXPosition = EnumTemplate.bind({});
 ListboxXPosition.args = {
   enum: "xPosition",
   label: "{enumValue}",
-  class: "w-40",
+  block: true,
 };
 
 export const ListboxYPosition = EnumTemplate.bind({});

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -207,6 +207,22 @@ describe("UDropdownButton.vue", () => {
       expect(component.findComponent(UButton).props("disabled")).toBe(disabled);
     });
 
+    // Block prop
+    it("applies class when prop is true", () => {
+      const block = true;
+      const expectedClass = "w-full";
+
+      const component = mount(UDropdownButton, {
+        props: {
+          block,
+          options: defaultOptions,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClass);
+      expect(component.findComponent(UButton).attributes("class")).toContain(expectedClass);
+    });
+
     // ToggleIcon prop (boolean: true)
     it("shows default toggle icon when toggleIcon is true", () => {
       const toggleIcon = true;
@@ -225,7 +241,7 @@ describe("UDropdownButton.vue", () => {
     });
 
     // ToggleIcon prop (boolean: false)
-    it("shows default toggle icon when toggleIcon is true", () => {
+    it("shows default toggle icon when toggleIcon is false", () => {
       const toggleIcon = false;
 
       const component = mount(UDropdownButton, {

package/ui.dropdown-button/types.ts

@@ -75,6 +75,11 @@ export interface Props {
    */
   multiple?: boolean;
 
+  /**
+   * Make the dropdown button expand to fill the entire width of its container.
+   */
+  block?: boolean;
+
   /**
    * Set button corners rounded.
    */

package/ui.form-calendar/UCalendar.vue

@@ -232,13 +232,15 @@ const localValue = computed({
       parsedDate.setSeconds(Number(secondsRef.value?.value));
     }
 
-    const isOutOfRange = dateIsOutOfRange(
-      parsedDate || new Date(),
-      props.minDate,
-      props.maxDate,
-      locale.value,
-      actualDateFormat.value,
-    );
+    const isOutOfRange =
+      parsedDate !== null &&
+      dateIsOutOfRange(
+        parsedDate,
+        props.minDate,
+        props.maxDate,
+        locale.value,
+        actualDateFormat.value,
+      );
 
     if (isOutOfRange) {
       return;

package/ui.form-input/tests/UInput.test.ts

@@ -291,7 +291,7 @@ describe("UInput.vue", () => {
       expect(component.get("input").attributes("id")).toBe(idValue);
     });
 
-    it("DataTest – sets data-test attribute on input", () => {
+    it("Data Test – sets data-test attribute on input", () => {
       const dataTestValue = "test-input";
 
       const component = mount(UInput, {

package/ui.form-input-counter/tests/UInputCounter.test.ts

@@ -261,7 +261,7 @@ describe("UInputCounter.vue", () => {
           },
         });
 
-        component.get(`[data-test='test-${testCase}']`);
+        expect(component.get(`[data-test='test-${testCase}']`)).toBeTruthy();
       });
     });
   });

package/ui.form-input-file/tests/UInputFile.test.ts

@@ -250,7 +250,7 @@ describe("UInputFile.vue", () => {
           },
         });
 
-        component.get(`[data-test="${dataTestValue}-${key}"]`);
+        expect(component.get(`[data-test="${dataTestValue}-${key}"]`)).toBeTruthy();
       });
     });
   });

package/ui.form-input-password/tests/UInputPassword.test.ts

@@ -172,7 +172,7 @@ describe("UInputPassword.vue", () => {
 
       await flushPromises();
 
-      component.get(`[data-test='${dataTest}-password-icon']`);
+      expect(component.get(`[data-test='${dataTest}-password-icon']`)).toBeTruthy();
     });
   });
 
@@ -215,7 +215,7 @@ describe("UInputPassword.vue", () => {
         },
       });
 
-      component.get(`.${testClass}`);
+      expect(component.get(`.${testClass}`)).toBeTruthy();
     });
 
     it("Left – exposes leftIcon prop", () => {
@@ -242,7 +242,7 @@ describe("UInputPassword.vue", () => {
         },
       });
 
-      component.get(`.${testClass}`);
+      expect(component.get(`.${testClass}`)).toBeTruthy();
     });
 
     it("Right – exposes password visibility state", async () => {

package/ui.form-input-rating/tests/UInputRating.test.ts

@@ -18,8 +18,8 @@ describe("UInputRating.vue", () => {
 
       const icons = component.findAllComponents(UIcon);
 
-      expect(icons[2].props("name")).that.includes("star-fill");
-      expect(icons[3].props("name")).that.includes("star");
+      expect(icons[2].props("name")).toContain("star-fill");
+      expect(icons[3].props("name")).toContain("star");
     });
 
     it("Model Value – updates value on click", async () => {

package/ui.form-input-search/tests/UInputSearch.test.ts

@@ -227,7 +227,7 @@ describe("UInputSearch.vue", () => {
       expect(component.get("input").attributes("disabled")).toBeDefined();
     });
 
-    it("Data Test – applies the correct data-test attribute", async () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const testCases = [
         { testCase: "search-icon" },
         { testCase: "clear" },
@@ -248,7 +248,7 @@ describe("UInputSearch.vue", () => {
 
         await flushPromises();
 
-        component.get(`[data-test='${resolvedDataTest}']`);
+        expect(component.get(`[data-test='${resolvedDataTest}']`)).toBeTruthy();
       });
     });
   });

package/ui.form-listbox/UListbox.vue

@@ -471,7 +471,7 @@ const {
             <span
               :style="getMarginForSubCategory(option.level)"
               v-bind="optionContentAttrs"
-              :title="String(option.label)"
+              :title="String(option[labelKey])"
               v-text="option[labelKey]"
             />
           </slot>

package/ui.form-listbox/storybook/stories.ts

@@ -26,11 +26,11 @@ export default {
   component: UListbox,
   args: {
     options: [
-      { label: "New York", id: ["1"] },
-      { label: "Los Angeles", id: ["2"] },
-      { label: "Chicago", id: ["3"] },
-      { label: "Houston", id: ["4"] },
-      { label: "San Francisco", id: ["5"] },
+      { label: "New York", id: 1 },
+      { label: "Los Angeles", id: 2 },
+      { label: "Chicago", id: 3 },
+      { label: "Houston", id: 4 },
+      { label: "San Francisco", id: 5 },
     ],
   },
   argTypes: {

package/ui.form-select/config.ts

@@ -118,7 +118,7 @@ export default /*tw*/ {
   clear: "{>toggle}",
   clearIcon: "{UIcon} {>selectIcon}",
   placeholder: {
-    base: "flex items-center text-muted !leading-none",
+    base: "flex items-center text-muted !leading-none shrink-0",
     variants: {
       size: {
         sm: "text-small",

package/ui.form-select/storybook/stories.ts

@@ -38,11 +38,11 @@ export default {
     label: "Choose a city",
     modelValue: null,
     options: [
-      { label: "New York", id: "1" },
-      { label: "Los Angeles", id: "2" },
-      { label: "Chicago", id: "3" },
-      { label: "Houston", id: "4" },
-      { label: "San Francisco", id: "5" },
+      { label: "New York", id: 1 },
+      { label: "Los Angeles", id: 2 },
+      { label: "Chicago", id: 3 },
+      { label: "Houston", id: 4 },
+      { label: "San Francisco", id: 5 },
     ],
   },
   argTypes: {

package/ui.image-icon/tests/UIcon.test.ts

@@ -20,7 +20,7 @@ describe("UIcon.vue", () => {
 
       await flushPromises();
 
-      component.get("[vl-key='icon']");
+      expect(component.get("[vl-key='icon']")).toBeTruthy();
     });
 
     it("Src – renders icon based on provided src", async () => {
@@ -32,7 +32,7 @@ describe("UIcon.vue", () => {
 
       await flushPromises();
 
-      component.get("[vl-key='icon']");
+      expect(component.get("[vl-key='icon']")).toBeTruthy();
     });
 
     it("Color – applies correct color classes", () => {

package/ui.navigation-pagination/UPagination.vue

@@ -124,6 +124,7 @@ const {
   nextButtonAttrs,
   activeButtonAttrs,
   inactiveButtonAttrs,
+  ellipsisAttrs,
   lastIconAttrs,
   firstIconAttrs,
   prevIconAttrs,
@@ -181,13 +182,7 @@ const {
     </UButton>
 
     <template v-for="page in pageButtons" :key="page">
-      <UButton
-        v-if="!isFinite(page.number)"
-        square
-        disabled
-        variant="ghost"
-        v-bind="inactiveButtonAttrs"
-      >
+      <UButton v-if="!isFinite(page.number)" square disabled variant="ghost" v-bind="ellipsisAttrs">
         <!-- @slot Use it to add something instead of the ellipsis. -->
         <slot name="ellipsis">&hellip;</slot>
       </UButton>

package/ui.navigation-pagination/config.ts

@@ -19,6 +19,7 @@ export default /*tw*/ {
   nextButton: "{>paginationButton}",
   inactiveButton: "{>paginationButton}",
   activeButton: "{>paginationButton}",
+  ellipsis: "{>paginationButton} {>inactiveButton}",
   paginationIcon: {
     base: "{UIcon}",
     defaults: {

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -12,7 +12,7 @@ describe("UPagination.vue", () => {
   describe("Props", () => {
     // Variant prop
     it("applies the correct variant to buttons", async () => {
-      const variants = ["solid", "outlined", "soft", "ghost"];
+      const variants = ["solid", "outlined", "subtle", "soft", "ghost"];
 
       variants.forEach((variant) => {
         const component = mount(UPagination, {

package/ui.navigation-pagination/types.ts

@@ -27,7 +27,7 @@ export interface Props {
   /**
    * Pagination variant.
    */
-  variant?: "solid" | "outlined" | "soft" | "ghost";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "ghost";
 
   /**
    * Pagination size.

package/ui.text-notify/tests/UNotify.test.ts

@@ -6,7 +6,7 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import { NotificationType } from "../constants.ts";
 import { LocaleSymbol } from "../../composables/useLocale.ts";
-import createVuelessAdapter from "../../adapter.locale/vueless.ts";
+import { createVuelessAdapter } from "../../adapter.locale/vueless.ts";
 
 import type { Props, Notification } from "../types.ts";
 

package/utils/node/dynamicProps.js

@@ -2,9 +2,11 @@ import fs from "node:fs/promises";
 import { existsSync } from "node:fs";
 import path from "node:path";
 
+import { removeFolderIfEmpty } from "./helper.js";
 import { vuelessConfig } from "./vuelessConfig.js";
 
 import {
+  CACHE_DIR,
   COMPONENTS,
   GRAYSCALE_COLOR,
   INHERIT_COLOR,
@@ -74,9 +76,8 @@ export async function setCustomPropTypes(srcDir) {
     }
 
     const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
-    const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
 
-    if (isCustomProps && !isHiddenStories) {
+    if (isCustomProps) {
       await cacheComponentTypes(path.join(srcDir, componentDir));
       await modifyComponentTypes(path.join(srcDir, componentDir), componentGlobalConfig.props);
     }
@@ -91,26 +92,34 @@ export async function removeCustomPropTypes(srcDir) {
 }
 
 async function cacheComponentTypes(filePath) {
-  const cacheDir = path.join(filePath, ".cache");
+  const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(filePath, "types.ts");
   const destFile = path.join(cacheDir, "types.ts");
 
-  if (existsSync(cacheDir)) {
+  if (existsSync(destFile) || !existsSync(sourceFile)) {
     return;
   }
 
-  if (existsSync(sourceFile)) {
+  if (!existsSync(cacheDir)) {
     await fs.mkdir(cacheDir);
-    await fs.cp(sourceFile, destFile);
   }
+
+  await fs.cp(sourceFile, destFile);
 }
 
 async function clearComponentTypesCache(filePath) {
-  await fs.rm(path.join(filePath, ".cache"), { force: true, recursive: true });
+  const cacheDir = path.join(filePath, CACHE_DIR);
+  const sourceFile = path.join(cacheDir, "types.ts");
+
+  if (existsSync(sourceFile)) {
+    await fs.rm(sourceFile, { force: true });
+  }
+
+  await removeFolderIfEmpty(cacheDir);
 }
 
 async function restoreComponentTypes(filePath) {
-  const cacheDir = path.join(filePath, ".cache");
+  const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
   const destFile = path.join(filePath, "types.ts");
 

package/utils/node/helper.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
 import { existsSync, statSync } from "node:fs";
-import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
 import { vuelessConfig, getMergedConfig } from "./vuelessConfig.js";
 
@@ -157,6 +157,16 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
+export async function removeFolderIfEmpty(dirPath) {
+  if (existsSync(dirPath)) {
+    const files = await readdir(dirPath);
+
+    if (!files.length) {
+      await rmdir(dirPath);
+    }
+  }
+}
+
 export async function autoImportUserConfigs() {
   const vuelessConfigDir = path.join(cwd(), ".vueless");
 

package/utils/node/storybook.js

@@ -0,0 +1,52 @@
+import { getVuelessConfig } from "./vuelessConfig.js";
+import {
+  COMPONENTS,
+  INTERNAL_ENV,
+  VUELESS_LOCAL_DIR,
+  VUELESS_PACKAGE_DIR,
+} from "../../constants.js";
+
+/**
+ * Defines the config for Storybook.
+ *
+ * @param {Object} config - The config object.
+ * @return {Promise<Object>} A promise that resolves to the modified config object.
+ */
+export function defineConfigWithVueless(config) {
+  return (async () => ({
+    ...config,
+    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
+  }))();
+}
+
+/**
+ * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
+ *
+ * @param {string} vuelessEnv - The Vueless environment.
+ * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
+ */
+export async function getVuelessStoriesGlob(vuelessEnv) {
+  const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
+
+  const storiesGlob = [
+    `../${vuelessSrcDir}/directives/**/stories.{js,jsx,ts,tsx}`,
+    `../${vuelessSrcDir}/directives/**/docs.mdx`,
+  ];
+
+  const vuelessConfig = await getVuelessConfig();
+
+  for (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const isHiddenStoriesByComponent = componentGlobalConfig === false;
+    const isHiddenStoriesByKey = componentGlobalConfig?.storybook === false;
+
+    if (isHiddenStoriesByComponent || isHiddenStoriesByKey) {
+      continue;
+    }
+
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/stories.{js,jsx,ts,tsx}`);
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/docs.mdx`);
+  }
+
+  return storiesGlob;
+}