vueless 1.1.1-beta.6 → 1.1.1-beta.8

package/composables/tests/useUI.test.ts

@@ -2,14 +2,15 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { computed, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 
+import type { ComponentInternalInstance } from "vue";
+
 // TODO: Autogenerated, need to be reviewed
 
 // Mock the ui utils
 vi.mock("../../utils/ui.ts", () => ({
   cx: vi.fn((classes) => (Array.isArray(classes) ? classes.filter(Boolean).join(" ") : classes)),
   cva: vi.fn((config) => {
-    // Return a spy function that can be called and tracked
-    const cvaSpy = vi.fn((props) => {
+    return vi.fn((props) => {
       if (!config.variants) return config.base || "";
 
       let classes = config.base || "";
@@ -17,16 +18,15 @@ vi.mock("../../utils/ui.ts", () => ({
       // Apply variants
       Object.entries(config.variants).forEach(([key, variants]) => {
         const value = props[key];
+        const variantsRecord = variants as UnknownObject;
 
-        if (value && variants[value]) {
-          classes += ` ${variants[value]}`;
+        if (variantsRecord?.[value]) {
+          classes += ` ${variantsRecord[value]}`;
         }
       });
 
       return classes.trim();
     });
-
-    return cvaSpy;
   }),
   setColor: vi.fn((classes, color) => classes?.replace(/{color}/g, color)),
   vuelessConfig: { components: {}, unstyled: false },
@@ -56,10 +56,25 @@ vi.mock("vue", async () => {
 import useUI from "../useUI.ts";
 import * as uiUtils from "../../utils/ui.ts";
 import { getCurrentInstance, useAttrs } from "vue";
+import type { UnknownObject } from "../../types.ts";
 
 // Test component for integration testing
 const TestComponent = {
   template: '<div :data-test="getDataTest()" v-bind="bodyAttrs">Test</div>',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+    dataTest: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+  },
   setup() {
     const defaultConfig = {
       body: {
@@ -97,7 +112,7 @@ describe("useUI", () => {
       type: { __name: "TestComponent" },
       props: { dataTest: "test", color: "primary", config: {} },
       parent: null,
-    });
+    } as unknown as ComponentInternalInstance);
 
     vi.mocked(useAttrs).mockReturnValue({
       class: "",
@@ -148,7 +163,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { config: propsConfig, dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Call useUI to trigger the config merging
       useUI(defaultConfig);
@@ -201,7 +216,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { color: "blue", dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Test the setColor function directly
       expect(uiUtils.setColor).toBeDefined();
@@ -247,7 +262,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: {},
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
       const dataTest = result.getDataTest();
@@ -336,7 +351,7 @@ describe("useUI", () => {
         type: { __name: "UButton" },
         props: { dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 
@@ -349,8 +364,8 @@ describe("useUI", () => {
         props: { dataTest: "test" },
         parent: {
           type: { __name: "UButton" },
-        },
-      });
+        } as UnknownObject,
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 

package/composables/useComponentLocaleMassages.ts

@@ -17,9 +17,12 @@ export function useComponentLocaleMessages<TLocale>(
 
   const globalComponentMassages = ref(recursiveRt(tm(componentName) as VueMessageType));
 
-  watch(locale, () => {
-    globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
-  });
+  watch(
+    () => locale,
+    () => {
+      globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
+    },
+  );
 
   const localeMessages = computed(
     () => merge({}, defaultLocale, globalComponentMassages.value, propsLocale) as TLocale,

package/package.json

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

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.