vueless 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.4.10",
+    "@vueless/storybook": "^1.4.11",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.button-link/ULink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, useSlots, useTemplateRef } from "vue";
-import { RouterLink, useRoute, useRouter } from "vue-router";
+import { computed, inject, useSlots, useTemplateRef } from "vue";
+import { RouterLink, routerKey, routeLocationKey } from "vue-router";
 
 import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
@@ -49,11 +49,12 @@ const emit = defineEmits([
 const slots = useSlots();
 
 const linkRef = useTemplateRef<HTMLLinkElement>("link");
-const route = useRoute();
-const router = useRouter();
+
+const router = inject(routerKey, undefined);
+const route = inject(routeLocationKey, undefined);
 
 const isPresentRoute = computed(() => {
-  return typeof props.to === "string" || typeof props.to === "object";
+  return (typeof props.to === "string" || typeof props.to === "object") && router !== undefined;
 });
 
 const safeTo = computed(() => {
@@ -61,7 +62,7 @@ const safeTo = computed(() => {
 });
 
 const isActive = computed(() => {
-  if (!isPresentRoute.value) return false;
+  if (!isPresentRoute.value || !router || !route) return false;
 
   try {
     const resolved = router.resolve(safeTo.value);

package/ui.dropdown/UDropdown.vue

@@ -28,7 +28,7 @@ const emit = defineEmits([
    * Triggers on a dropdown option click.
    * @property {string} value
    */
-  "clickOption",
+  "click-option",
 
   /**
    * Triggers when an option is selected.
@@ -51,7 +51,7 @@ const emit = defineEmits([
    * Triggers when the search value is changed.
    * @property {string} query
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search v-model updates.
@@ -128,13 +128,13 @@ const fullLabel = computed(() => {
 });
 
 function onSearchChange(query: string) {
-  emit("searchChange", query);
+  emit("search-change", query);
 }
 
 function onClickOption(option: Option) {
   isClickingOption.value = true;
 
-  emit("clickOption", option);
+  emit("click-option", option);
 
   if (props.closeOnSelect) {
     hide();

package/ui.dropdown/tests/UDropdown.test.ts

@@ -455,7 +455,7 @@ describe("UDropdown.vue", () => {
       expect(component.emitted("close")).toBeTruthy();
     });
 
-    it("ClickOption – emits clickOption event when an option is clicked", async () => {
+    it("ClickOption – emits click-option event when an option is clicked", async () => {
       const component = mount(UDropdown, {
         props: {
           options: defaultOptions,
@@ -472,10 +472,10 @@ describe("UDropdown.vue", () => {
 
       await listbox.vm.$emit("click-option", defaultOptions[0]);
 
-      expect(component.emitted("clickOption")).toBeTruthy();
+      expect(component.emitted("click-option")).toBeTruthy();
     });
 
-    it("SearchChange – emits searchChange event when search value changes", async () => {
+    it("SearchChange – emits search-change event when search value changes", async () => {
       const component = mount(UDropdown, {
         props: {
           searchable: true,
@@ -493,8 +493,8 @@ describe("UDropdown.vue", () => {
 
       await listbox.vm.$emit("search-change", "test query");
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")![0][0]).toBe("test query");
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")![0][0]).toBe("test query");
     });
 
     it("Update:search – emits update:search event when search value updates", async () => {

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -27,7 +27,7 @@ const emit = defineEmits([
    * Triggers on a dropdown option click.
    * @property {string} value
    */
-  "clickOption",
+  "click-option",
 
   /**
    * Triggers when an option is selected.
@@ -50,7 +50,7 @@ const emit = defineEmits([
    * Triggers when the search value is changed.
    * @property {string} query
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search v-model updates.
@@ -127,10 +127,10 @@ const { getDataTest, config, toggleBadgeAttrs, dropdownBadgeAttrs, toggleIconAtt
     :close-on-select="closeOnSelect"
     v-bind="dropdownBadgeAttrs"
     :data-test="dataTest"
-    @click-option="(option) => emit('clickOption', option)"
+    @click-option="(option) => emit('click-option', option)"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @update:search="(value) => emit('update:search', value)"
-    @search-change="(query) => emit('searchChange', query)"
+    @search-change="(query) => emit('search-change', query)"
     @open="emit('open')"
     @close="emit('close')"
   >

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -630,7 +630,7 @@ describe("UDropdownBadge.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]);
     });
 
-    it("clickOption – emits clickOption event when an option is clicked", async () => {
+    it("click-option – emits click-option event when an option is clicked", async () => {
       const component = mount(UDropdownBadge, {
         props: {
           options: defaultOptions,
@@ -643,12 +643,12 @@ describe("UDropdownBadge.vue", () => {
       // Find the listbox component
       const listbox = component.findComponent(UListbox);
 
-      // Simulate clicking an option by emitting clickOption from the listbox
-      listbox.vm.$emit("clickOption", defaultOptions[1]);
+      // Simulate clicking an option by emitting click-option from the listbox
+      listbox.vm.$emit("click-option", defaultOptions[1]);
 
       // Check if the event was emitted with the correct value
-      expect(component.emitted("clickOption")).toBeTruthy();
-      expect(component.emitted("clickOption")?.[0]).toEqual([defaultOptions[1]]);
+      expect(component.emitted("click-option")).toBeTruthy();
+      expect(component.emitted("click-option")?.[0]).toEqual([defaultOptions[1]]);
     });
 
     it("Close – closes dropdown when clicking outside", async () => {
@@ -698,7 +698,7 @@ describe("UDropdownBadge.vue", () => {
       expect(component.emitted("close")).toBeTruthy();
     });
 
-    it("SearchChange – emits searchChange event when search value changes", async () => {
+    it("SearchChange – emits search-change event when search value changes", async () => {
       const component = mount(UDropdownBadge, {
         props: {
           searchable: true,
@@ -710,10 +710,10 @@ describe("UDropdownBadge.vue", () => {
 
       const dropdown = component.findComponent({ name: "UDropdown" });
 
-      dropdown.vm.$emit("searchChange", "test query");
+      dropdown.vm.$emit("search-change", "test query");
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")?.[0]).toEqual(["test query"]);
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")?.[0]).toEqual(["test query"]);
     });
 
     it("Update:search – emits update:search event when search value updates", async () => {

package/ui.dropdown-button/UDropdownButton.vue

@@ -27,7 +27,7 @@ const emit = defineEmits([
    * Triggers on a dropdown option click.
    * @property {string} value
    */
-  "clickOption",
+  "click-option",
 
   /**
    * Triggers when an option is selected.
@@ -50,7 +50,7 @@ const emit = defineEmits([
    * Triggers when the search value is changed.
    * @property {string} query
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search v-model updates.
@@ -126,10 +126,10 @@ const { getDataTest, config, toggleButtonAttrs, dropdownButtonAttrs, toggleIconA
     :close-on-select="closeOnSelect"
     v-bind="dropdownButtonAttrs"
     :data-test="dataTest"
-    @click-option="(option) => emit('clickOption', option)"
+    @click-option="(option) => emit('click-option', option)"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @update:search="(value) => emit('update:search', value)"
-    @search-change="(query) => emit('searchChange', query)"
+    @search-change="(query) => emit('search-change', query)"
     @open="emit('open')"
     @close="emit('close')"
   >

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

@@ -652,7 +652,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]);
     });
 
-    it("clickOption – emits clickOption event when an option is clicked", async () => {
+    it("click-option – emits click-option event when an option is clicked", async () => {
       const component = mount(UDropdownButton, {
         props: {
           options: defaultOptions,
@@ -665,12 +665,12 @@ describe("UDropdownButton.vue", () => {
       // Find the listbox component
       const listbox = component.findComponent(UListbox);
 
-      // Simulate clicking an option by emitting clickOption from the listbox
-      listbox.vm.$emit("clickOption", defaultOptions[1]);
+      // Simulate clicking an option by emitting click-option from the listbox
+      listbox.vm.$emit("click-option", defaultOptions[1]);
 
       // Check if the event was emitted with the correct value
-      expect(component.emitted("clickOption")).toBeTruthy();
-      expect(component.emitted("clickOption")?.[0]).toEqual([defaultOptions[1]]);
+      expect(component.emitted("click-option")).toBeTruthy();
+      expect(component.emitted("click-option")?.[0]).toEqual([defaultOptions[1]]);
     });
 
     it("Close – closes dropdown when clicking outside", async () => {
@@ -720,7 +720,7 @@ describe("UDropdownButton.vue", () => {
       expect(component.emitted("close")).toBeTruthy();
     });
 
-    it("SearchChange – emits searchChange event when search value changes", async () => {
+    it("SearchChange – emits search-change event when search value changes", async () => {
       const component = mount(UDropdownButton, {
         props: {
           searchable: true,
@@ -732,10 +732,10 @@ describe("UDropdownButton.vue", () => {
 
       const dropdown = component.findComponent({ name: "UDropdown" });
 
-      dropdown.vm.$emit("searchChange", "test query");
+      dropdown.vm.$emit("search-change", "test query");
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")?.[0]).toEqual(["test query"]);
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")?.[0]).toEqual(["test query"]);
     });
 
     it("Update:search – emits update:search event when search value updates", async () => {

package/ui.dropdown-link/UDropdownLink.vue

@@ -27,7 +27,7 @@ const emit = defineEmits([
    * Triggers on a dropdown option click.
    * @property {string} value
    */
-  "clickOption",
+  "click-option",
 
   /**
    * Triggers when an option is selected.
@@ -50,7 +50,7 @@ const emit = defineEmits([
    * Triggers when the search value is changed.
    * @property {string} query
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search v-model updates.
@@ -130,10 +130,10 @@ const { config, getDataTest, dropdownLinkAttrs, toggleLinkAttrs, toggleIconAttrs
     :close-on-select="closeOnSelect"
     v-bind="dropdownLinkAttrs"
     :data-test="dataTest"
-    @click-option="(option) => emit('clickOption', option)"
+    @click-option="(option) => emit('click-option', option)"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @update:search="(value) => emit('update:search', value)"
-    @search-change="(query) => emit('searchChange', query)"
+    @search-change="(query) => emit('search-change', query)"
     @open="emit('open')"
     @close="emit('close')"
   >

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -628,7 +628,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]);
     });
 
-    it("clickOption – emits clickOption event when an option is clicked", async () => {
+    it("click-option – emits click-option event when an option is clicked", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -641,14 +641,14 @@ describe("UDropdownLink.vue", () => {
       // Find the listbox component
       const listbox = component.findComponent(UListbox);
 
-      // Simulate clicking an option by emitting clickOption from the listbox
+      // Simulate clicking an option by emitting click-option from the listbox
       const option = defaultOptions[1];
 
-      listbox.vm.$emit("clickOption", option);
+      listbox.vm.$emit("click-option", option);
 
       // Check if the event was emitted with the correct value
-      expect(component.emitted("clickOption")).toBeTruthy();
-      expect(component.emitted("clickOption")?.[0]).toEqual([option]);
+      expect(component.emitted("click-option")).toBeTruthy();
+      expect(component.emitted("click-option")?.[0]).toEqual([option]);
     });
 
     it("Close – closes dropdown when clicking outside", async () => {
@@ -716,7 +716,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.emitted("close")).toBeTruthy();
     });
 
-    it("SearchChange – emits searchChange event when search value changes", async () => {
+    it("SearchChange – emits search-change event when search value changes", async () => {
       const component = mount(UDropdownLink, {
         props: {
           searchable: true,
@@ -728,10 +728,10 @@ describe("UDropdownLink.vue", () => {
 
       const dropdown = component.findComponent({ name: "UDropdown" });
 
-      dropdown.vm.$emit("searchChange", "test query");
+      dropdown.vm.$emit("search-change", "test query");
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")?.[0]).toEqual(["test query"]);
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")?.[0]).toEqual(["test query"]);
     });
 
     it("Update:search – emits update:search event when search value updates", async () => {

package/ui.form-listbox/UListbox.vue

@@ -45,18 +45,18 @@ const emit = defineEmits([
   /**
    * Triggers on click option.
    */
-  "clickOption",
+  "click-option",
 
   /**
    * Triggers when the search input value changes.
    * @property {string} value
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search input loses focus.
    */
-  "searchBlur",
+  "search-blur",
 
   /**
    * Triggers when the search v-model updates.
@@ -246,7 +246,7 @@ function onClickAddOption() {
 }
 
 function onSearchChange(value: string) {
-  emit("searchChange", value);
+  emit("search-change", value);
 }
 
 function onKeydownUp() {
@@ -341,11 +341,11 @@ function onClickOption(rawOption: Option) {
     rawOption.onClick(option);
   }
 
-  emit("clickOption", option);
+  emit("click-option", option);
 }
 
 function onInputSearchBlur(event: FocusEvent) {
-  emit("searchBlur", event);
+  emit("search-blur", event);
 }
 
 defineExpose({

package/ui.form-listbox/tests/UListbox.test.ts

@@ -474,7 +474,7 @@ describe("UListbox.vue", () => {
       expect(options[0].text()).toBe(targetValue);
     });
 
-    it("Search – emits searchChange event on input", async () => {
+    it("Search – emits search-change event on input", async () => {
       const targetValue = "test";
 
       const component = mount(UListbox, {
@@ -488,11 +488,11 @@ describe("UListbox.vue", () => {
 
       await searchInput.setValue(targetValue);
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")![0][0]).toBe(targetValue);
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")![0][0]).toBe(targetValue);
     });
 
-    it("Search – emits searchBlur event on blur", async () => {
+    it("Search – emits search-blur event on blur", async () => {
       const component = mount(UListbox, {
         props: {
           searchable: true,
@@ -504,7 +504,7 @@ describe("UListbox.vue", () => {
 
       await searchInput.trigger("blur");
 
-      expect(component.emitted("searchBlur")).toBeTruthy();
+      expect(component.emitted("search-blur")).toBeTruthy();
     });
 
     it("Keyboard Navigation – moves pointer down with arrow down", async () => {
@@ -719,8 +719,8 @@ describe("UListbox.vue", () => {
 
       await firstOption.trigger("click");
 
-      expect(component.emitted("clickOption")).toBeTruthy();
-      expect(component.emitted("clickOption")![0][0]).toEqual(defaultOptions[0]);
+      expect(component.emitted("click-option")).toBeTruthy();
+      expect(component.emitted("click-option")![0][0]).toEqual(defaultOptions[0]);
     });
 
     it("Search Change – emits when search input changes", async () => {
@@ -737,8 +737,8 @@ describe("UListbox.vue", () => {
 
       await searchInput.setValue("test");
 
-      expect(component.emitted("searchChange")).toBeTruthy();
-      expect(component.emitted("searchChange")![0][0]).toBe(expectedValue);
+      expect(component.emitted("search-change")).toBeTruthy();
+      expect(component.emitted("search-change")![0][0]).toBe(expectedValue);
     });
 
     it("Search Blur – emits when search input loses focus", async () => {
@@ -753,7 +753,7 @@ describe("UListbox.vue", () => {
 
       await searchInput.get("input").trigger("blur");
 
-      expect(component.emitted("searchBlur")).toBeTruthy();
+      expect(component.emitted("search-blur")).toBeTruthy();
     });
   });
 

package/ui.form-select/USelect.vue

@@ -55,7 +55,7 @@ const emit = defineEmits([
    * Triggers when the search value is changed.
    * @property {string} query
    */
-  "searchChange",
+  "search-change",
 
   /**
    * Triggers when the search v-model updates.
@@ -251,7 +251,7 @@ onMounted(() => {
 });
 
 function onSearchChange(query: string) {
-  emit("searchChange", query);
+  emit("search-change", query);
 }
 
 function onSearchUpdate(query: string) {

package/ui.form-select/tests/USelect.test.ts

@@ -848,8 +848,8 @@ describe("USelect.vue", () => {
 
       vi.advanceTimersByTime(300); // Simulate debounce delay
 
-      expect(component.emitted("searchChange")).toBeDefined();
-      expect(component.emitted("searchChange")![0][0]).toBe(testValue);
+      expect(component.emitted("search-change")).toBeDefined();
+      expect(component.emitted("search-change")![0][0]).toBe(testValue);
 
       vi.useRealTimers();
     });