vueless 1.2.5-beta.4 → 1.2.5-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.5-beta.4",
+  "version": "1.2.5-beta.5",
   "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.container-accordion/tests/UAccordion.test.ts

@@ -73,14 +73,14 @@ describe("UAccordion", () => {
 
       const firstItem = component.findAllComponents(UAccordionItem)[0];
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
 
       const updates = component.emitted("update:modelValue");
 
       expect(updates).toBeTruthy();
       expect(updates?.[0]).toEqual(["a"]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[1]).toEqual([null]);
@@ -103,14 +103,14 @@ describe("UAccordion", () => {
 
       const [firstItem, secondItem] = component.findAllComponents(UAccordionItem);
 
-      await firstItem.trigger("click");
-      await secondItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
+      await secondItem.find("[vl-child-key='title']").trigger("click");
       const updates = component.emitted("update:modelValue");
 
       expect(updates?.[0]).toEqual([["a"]]);
       expect(updates?.[1]).toEqual([["a", "b"]]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[2]).toEqual([["b"]]);

package/ui.container-accordion-item/UAccordionItem.vue

@@ -42,8 +42,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
-const descriptionRef = useTemplateRef<HTMLDivElement>("description");
-const contentRef = useTemplateRef<HTMLDivElement>("content");
+const titleRef = useTemplateRef<HTMLDivElement>("title");
 
 const accordionSize = ref(toValue(getAccordionSize) || props.size);
 const accordionDisabled = ref(toValue(getAccordionDisabled) || props.disabled);
@@ -79,10 +78,9 @@ const toggleIconName = computed(() => {
 });
 
 function onClickItem(event: MouseEvent) {
-  const clickedInsideContent = contentRef.value?.contains(event.target as Node);
-  const clickedDescription = descriptionRef.value?.contains(event.target as Node);
+  const clickedOnTitle = titleRef.value?.contains(event.target as Node);
 
-  if (props.disabled || clickedDescription || clickedInsideContent) return;
+  if (!clickedOnTitle || props.disabled) return;
 
   emit("click", elementId, !isOpened.value);
 
@@ -123,7 +121,7 @@ const {
 <template>
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
-      <div v-bind="titleAttrs">
+      <div v-bind="titleAttrs" ref="title">
         {{ title }}
         <!--
           @slot Use it to add something instead of the toggle icon.
@@ -144,12 +142,11 @@ const {
       <div
         v-if="description"
         :id="`description-${elementId}`"
-        ref="description"
         v-bind="descriptionAttrs"
         v-text="description"
       />
 
-      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
+      <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->
         <slot />
       </div>

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -171,7 +171,7 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("false");
 
       // Click to toggle
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
@@ -190,12 +190,12 @@ describe("UAccordionItem", () => {
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
     });
@@ -217,7 +217,7 @@ describe("UAccordionItem", () => {
     it("does not render content wrapper when default slot is empty", async () => {
       const component = mount(UAccordionItem, { props: { name: "test" } });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
@@ -235,7 +235,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emitted = component.emitted("click");
 
@@ -243,7 +243,7 @@ describe("UAccordionItem", () => {
       expect(emitted?.[0]).toEqual([id, true]);
 
       // Click again to toggle back
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emittedAgain = component.emitted("click");
 
@@ -281,13 +281,13 @@ describe("UAccordionItem", () => {
       expect(descriptionElement.classes()).not.toContain(openedClass);
 
       // Click to open
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be opened
       expect(descriptionElement.classes()).toContain(openedClass);
 
       // Click to close
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be closed again
       expect(descriptionElement.classes()).not.toContain(openedClass);