vueless 1.1.1-beta.2 → 1.1.1-beta.4

package/adapter.locale/vue-i18n.ts

@@ -1,10 +1,11 @@
 import type { I18n } from "vue-i18n";
+import type { LocaleInstance } from "../types.ts";
 
-export default function createVueI18nAdapter(i18n: I18n) {
+export function createVueI18nAdapter(i18n: I18n): LocaleInstance {
   return {
     name: "vue-i18n",
     locale: i18n.global.locale,
-    fallback: i18n.global.fallbackLocale,
+    fallback: i18n.global.fallbackLocale as string,
     messages: i18n.global.messages,
     // @ts-expect-error Type instantiation is excessively deep and possibly infinite
     t: (key: string, ...params: unknown[]) => i18n.global.t(key, params),

package/adapter.locale/vueless.ts

@@ -4,33 +4,12 @@ import { merge } from "lodash-es";
 import en from "./locales/en.ts";
 
 import type { Ref } from "vue";
-import type { UnknownObject } from "../types.ts";
 import type { VueMessageType } from "vue-i18n";
-
-export interface LocaleMessages {
-  [key: string]: LocaleMessages | string;
-}
-
-export interface LocaleOptions {
-  messages?: LocaleMessages;
-  locale?: string;
-  fallback?: string;
-  adapter?: LocaleInstance;
-}
-
-export interface LocaleInstance {
-  name: string;
-  messages: Ref<LocaleMessages>;
-  locale: Ref<string>;
-  fallback: Ref<string>;
-  t: (key: string, ...params: unknown[]) => string;
-  n: (value: number) => string;
-  tm: <TMassages>(key: string) => Partial<TMassages>;
-}
+import type { UnknownObject, LocaleOptions, LocaleMessages, LocaleInstance } from "../types.ts";
 
 const FALLBACK_LOCALE_CODE = "en";
 
-export default function createVuelessAdapter(options?: LocaleOptions): LocaleInstance {
+export function createVuelessAdapter(options?: LocaleOptions): LocaleInstance {
   const current = shallowRef(options?.locale ?? FALLBACK_LOCALE_CODE);
   const fallback = shallowRef(options?.fallback ?? FALLBACK_LOCALE_CODE);
 

package/composables/useLocale.ts

@@ -1,8 +1,8 @@
 import { inject } from "vue";
-import createVuelessAdapter from "../adapter.locale/vueless.ts";
+import { createVuelessAdapter } from "../adapter.locale/vueless.ts";
 
-import type { LocaleInstance, LocaleOptions } from "../adapter.locale/vueless.ts";
 import type { InjectionKey } from "vue";
+import type { LocaleInstance, LocaleOptions } from "../types.ts";
 
 export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
 

package/index.d.ts

@@ -12,7 +12,8 @@ export {
 } from "./utils/helper.ts";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource } from "./utils/storybook.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVuelessAdapter } from "./adapter.locale/vueless.ts";
 export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
 export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";

package/index.ts

@@ -13,7 +13,8 @@ export { cx, cva, compose, getDefaults } from "./utils/ui.ts";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook.ts";
 export { isSSR, isCSR, getRandomId, setTitle, createDebounce, hasSlotContent } from "./utils/helper.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVuelessAdapter } from "./adapter.locale/vueless.ts";
 export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
 export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.2",
+  "version": "1.1.1-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -45,7 +45,6 @@
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
     "@material-symbols/svg-500": "^0.33.0",
     "@release-it/bumper": "^7.0.5",
     "@tsconfig/node20": "^20.1.6",

package/types.ts

@@ -61,7 +61,6 @@ import UListboxConfig from "./ui.form-listbox/config.ts";
 import type { Props } from "tippy.js";
 import type { Config as TailwindConfig } from "tailwindcss";
 import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
-import type { LocaleOptions } from "./adapter.locale/vueless.ts";
 
 export enum ColorMode {
   Dark = "dark",
@@ -366,6 +365,27 @@ export interface CreateVuelessOptions extends Config {
   config?: Config;
 }
 
+export interface LocaleOptions {
+  messages?: LocaleMessages;
+  locale?: string;
+  fallback?: string;
+  adapter?: LocaleInstance;
+}
+
+export interface LocaleInstance {
+  name: string;
+  messages: LocaleMessages | Ref<LocaleMessages>;
+  locale: string | Ref<string>;
+  fallback: string | Ref<string>;
+  t: (key: string, ...params: unknown[]) => string;
+  n: (value: number) => string;
+  tm: <TMassages>(key: string) => Partial<TMassages>;
+}
+
+export interface LocaleMessages {
+  [key: string]: LocaleMessages | string;
+}
+
 export interface VuelessCssVariables {
   /* Outline size CSS variables */
   "--vl-outline-sm": string;

package/ui.boilerplate/tests/UBoilerplate.test.ts

@@ -5,10 +5,8 @@ import UBoilerplate from "../UBoilerplate.vue";
 import defaultConfig from "../config.ts";
 
 describe("UBoilerplate.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // DataTest prop
-    it("accepts the dataTest prop", () => {
+    it("Data Test – accepts the dataTest prop", () => {
       const dataTest = "test-boilerplate";
 
       const component = mount(UBoilerplate, {
@@ -20,8 +18,7 @@ describe("UBoilerplate.vue", () => {
       expect(component.attributes("data-test")).toBe(dataTest);
     });
 
-    // Config prop
-    it("applies custom config when provided", () => {
+    it("Config – applies custom config when provided", () => {
       const customClass = "custom-class";
       const config = {
         wrapper: customClass,
@@ -38,23 +35,4 @@ describe("UBoilerplate.vue", () => {
       expect(component.attributes("class")).toContain(defaultConfig.wrapper);
     });
   });
-
-  /*
-  // Slots tests
-  describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
-      const slotContent = "Custom Content";
-
-      const component = mount(UBoilerplate, {
-        slots: {
-          default: slotContent,
-        },
-      });
-
-      expect(component.text()).not.toBe("Boilerplate");
-      expect(component.text()).toBe(slotContent);
-    });
-  });
-  */
 });

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

@@ -225,7 +225,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.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.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.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";