vueless 1.0.2-beta.2 → 1.0.2-beta.20

package/README.md

@@ -13,6 +13,7 @@ Vueless is simple enough for everyday use and powerful enough for advanced scena
 ### Key features
 
 - 🧩 65+ UI components (including range date picker, multi-selects, and nested table)
+- 🪄 Automatic on-demand component import (as you use them)
 - 📘 Built-in Storybook support
 - 🌈 Beautiful, modern default UI theme
 - 🌗 Light and dark mode support
@@ -66,12 +67,13 @@ createApp(App).use(vueless).mount('#app');
 4. Add Vite plugins.
 
 ```javascript
-import { Vueless, UnpluginComponents } from "vueless/plugin-vite";
+import { Vueless, TailwindCSS, UnpluginComponents } from "vueless/plugin-vite";
 
 export default defineConfig({
   plugins: [
     ...
     Vueless(),
+    TailwindCSS(),
     UnpluginComponents(),
   ],
   ...

package/composables/useUI.ts

@@ -2,7 +2,6 @@ import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue
 import { isEqual } from "lodash-es";
 
 import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
-import { isCSR } from "../utils/helper.ts";
 import {
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
@@ -141,7 +140,7 @@ export default function useUI<T>(
         keyConfig = config.value[configKey] as NestedComponent;
       }
 
-      const isDev = isCSR && import.meta.env?.DEV;
+      const isDev = import.meta.env?.DEV;
       const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
       const extendsClasses = getExtendsClasses(configKey);

package/icons/internal/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M222.15-182.15h143.78v-251.92h228.14v251.92h143.78v-386.89L480-762.37 222.15-568.96v386.81Zm-68.13 68.13v-489.09L480-847.65l326.22 244.54v489.09H528.57v-254.55h-97.14v254.55H154.02ZM480-472.76Z"/></svg>

package/icons/storybook/account_balance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M206.5-239.09v-339H272v339h-65.5Zm244.87 0v-339h65.26v339h-65.26ZM74.02-116.46v-68.13h812.2v68.13H74.02ZM688-239.09v-339h65.5v339H688ZM74.02-632.59v-63.04L480-926.5l406.22 230.87v63.04H74.02Zm149.31-68.37h513.34-513.34Zm0 0h513.34L480-848.17 223.33-700.96Z"/></svg>

package/icons/storybook/credit_card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M886.22-737.85v515.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-675.7q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-515.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h675.7q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03ZM142.15-631.48h675.7v-106.37h-675.7v106.37Zm0 129v280.33h675.7v-280.33h-675.7Zm0 280.33v-515.7 515.7Z"/></svg>

package/icons/storybook/description.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/icons/storybook/directions_bike.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M193.44-74.02q-80.29 0-136.86-56.41Q0-186.84 0-267.24q0-80.39 56.55-136.91 56.55-56.52 136.78-56.52 80.52 0 137.04 56.55 56.52 56.55 56.52 136.78 0 80.51-56.58 136.92-56.59 56.4-136.87 56.4Zm-.09-66.46q53.63 0 90.36-36.59 36.72-36.58 36.72-90.14 0-53.55-36.68-90.28-36.69-36.73-90.31-36.73-53.63 0-90.3 36.64-36.68 36.64-36.68 90.26 0 53.62 36.63 90.23 36.64 36.61 90.26 36.61Zm253.54-55.24v-201.67l-133.8-118.28q-11.48-9.48-16.84-22.86-5.36-13.37-5.36-28.13 0-14.54 5.74-27.31t15.98-23.25l120.9-120.66q11.01-11.01 24.91-16.49 13.9-5.48 29.15-5.48 15.63 0 29.84 5.24 14.22 5.24 25.46 16.48l79.02 79.02q29.46 29.46 67.09 47.22 37.64 17.76 79.45 17.76v66.46q-55.61 0-105.78-22.12t-89.41-61.36l-38.81-38.81L426.3-540.83l87.05 93.57v251.54h-66.46Zm175.54-557.32q-30.8 0-52.78-21.82t-21.98-52.82q0-30.99 21.9-52.97t52.82-21.98q30.91 0 52.89 21.87t21.98 52.93q0 31.07-21.88 52.93-21.87 21.86-52.95 21.86ZM766.67-74.02q-80.52 0-136.92-56.41-56.4-56.41-56.4-136.81 0-80.39 56.41-136.91 56.41-56.52 136.8-56.52 80.4 0 136.92 56.55Q960-347.57 960-267.34q0 80.51-56.55 136.92-56.55 56.4-136.78 56.4Zm-.14-66.46q53.56 0 90.29-36.59 36.72-36.58 36.72-90.14 0-53.55-36.63-90.28-36.64-36.73-90.26-36.73-53.63 0-90.24 36.64-36.61 36.64-36.61 90.26 0 53.62 36.59 90.23 36.59 36.61 90.14 36.61Z"/></svg>

package/icons/storybook/directions_car.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M200.48-198.02v48.5q0 15.09-10.42 25.29-10.42 10.21-25.56 10.21H150q-15.14 0-25.56-10.42-10.42-10.42-10.42-25.56v-325.26l85.24-256.65q5.48-15.92 18.61-25.11 13.13-9.2 30.13-9.2h464q17 0 30.13 9.2 13.13 9.19 18.61 25.11l85.48 256.65V-150q0 15.14-10.59 25.56-10.58 10.42-25.63 10.42h-15.5q-15.39 0-25.18-10.21-9.8-10.2-9.8-25.29v-48.5H200.48ZM205.63-534h548.98l-54.28-163.85H259.67L205.63-534Zm-23.48 60v207.85V-474Zm104.81 158.8q23 0 38.62-15.75 15.62-15.75 15.62-38.25 0-23.33-15.87-39.66-15.87-16.34-38.13-16.34-23.58 0-39.79 16.27-16.21 16.26-16.21 39.5 0 23.23 16.14 38.73 16.15 15.5 39.62 15.5Zm387.08 0q23.34 0 39.67-15.75 16.33-15.75 16.33-38.25 0-23.33-16.26-39.66-16.27-16.34-39.5-16.34-23.24 0-38.74 16.27-15.5 16.26-15.5 39.5 0 23.23 15.75 38.73 15.75 15.5 38.25 15.5Zm-491.89 49.05h595.7V-474h-595.7v207.85Z"/></svg>

package/icons/storybook/done_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M294.24-230.52 64.5-460.26 113-509l181 181 48.74 48.74-48.5 48.74ZM464-236.26 234.02-466.48l48.98-48.5 181 181L847.76-717.5l48.98 48.5L464-236.26Zm0-175.98-48.5-48.74 257-257 48.5 48.74-257 257Z"/></svg>

package/icons/storybook/east.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m600-193.78-47.74-47.98 204.41-204.17H74.26v-68.14h682.41L552.02-718.48 600-766.22 886.22-480 600-193.78Z"/></svg>

package/icons/storybook/handyman.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M771.65-67.33q-6.72 0-12.55-2.35-5.84-2.36-11.32-7.84L502.2-323.11q-5.48-5.48-7.84-11.31-2.36-5.84-2.36-12.56 0-6.72 2.36-12.67 2.36-5.96 7.84-11.44l85.47-85.48q5.48-5.47 11.32-7.95 5.84-2.48 12.79-2.48 6.72 0 12.56 2.48 5.83 2.48 11.31 7.95l245.59 245.83q5.48 5.48 7.96 11.2 2.47 5.71 2.47 12.67 0 6.72-2.59 12.67-2.6 5.96-7.84 11.2l-85.48 85.48q-5.48 5.48-11.31 7.84-5.84 2.35-12.8 2.35Zm.24-77.97 41.57-41.57-201.92-202.15-41.56 41.56L771.89-145.3Zm-584.3 77.74q-6.72 0-13.06-2.24-6.33-2.24-11.81-7.72L78.24-162q-5.48-5.24-7.72-11.46-2.24-6.21-2.24-13.17 0-6.72 2.24-12.67 2.24-5.96 7.72-11.44L308.74-441h87.15l37.28-37.28L255.3-656.15h-58.43L66.85-786.17l104.5-104.5 130.02 130.02v58.43l177.87 177.87 130.72-130.72-68.2-68.19 56-55.76h-113l-20.15-20.39 134.22-134.46 20.39 20.63v112.76l56-56 174.02 174.26q15.48 15.72 24.46 35.94 8.97 20.21 8.97 42.93 0 21.44-7.45 41.25-7.46 19.82-20.42 35.77l-87.15-87.15-57.43 57.44-53.2-53.2-215.06 215.07v86.39L211.46-77.52q-5.48 5.48-11.2 7.72-5.72 2.24-12.67 2.24Zm0-77.74 202.39-202.16v-41.56h-41.57L146.02-186.87l41.57 41.57Zm0 0-41.57-41.57 21.28 20.28 20.29 21.29Zm584.3 0 41.57-41.57-41.57 41.57Z"/></svg>

package/icons/storybook/phone_iphone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M262.39-34.02q-28.45 0-48.41-19.89-19.96-19.89-19.96-48.24v-755.7q0-27.7 20.34-48.03 20.33-20.34 48.03-20.34h433.22q28.45 0 48.41 19.96 19.96 19.96 19.96 48.41v144.65q18 4.05 30.12 18.6 12.12 14.55 12.12 32.7v73.7q0 19.48-12.12 34.2-12.12 14.72-30.12 18.69v433.16q0 28.35-19.96 48.24t-48.41 19.89H262.39Zm-.24-67.89h433.7v-756.18h-433.7v756.18Zm0 0v-756.18 756.18Zm110.48-83.59h212.98q14.37 0 24.1-9.87 9.72-9.87 9.72-24.55 0-14.68-9.65-24.19-9.66-9.52-24.17-9.52H372.63q-14.48 0-24.27 9.87t-9.79 24.41q0 14.53 9.82 24.19 9.82 9.66 24.24 9.66Z"/></svg>

package/icons/storybook/question_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M428.13-330.96q1-75.58 17.46-110.74 16.45-35.15 60.17-72.95 41.28-36.33 62.83-68.26 21.54-31.92 21.54-68.63 0-43.57-28.92-72.49-28.93-28.93-80.54-28.93-50.56 0-78.8 28.67-28.24 28.66-41.48 62.81l-92.61-40.59q23.2-62.58 77.49-105.28 54.3-42.69 135.35-42.69 102.2 0 157.4 57.09t55.2 137.65q0 50.87-20.62 91.42-20.62 40.55-65.86 82.84-48.28 45.32-58.52 70.44-10.24 25.12-11 79.64H428.13ZM480.62-73.3q-31.34 0-53.39-22.06-22.06-22.05-22.06-53.32t22.04-53.33q22.03-22.06 53.44-22.06 31.42 0 53.47 22.06 22.05 22.06 22.05 53.33t-22.1 53.32Q511.96-73.3 480.62-73.3Z"/></svg>

package/icons/storybook/schedule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m624.37-286.04 49.06-48.59-157.8-158.86v-198.55h-65.26v224.89l174 181.11ZM480.03-74.02q-83.46 0-157.51-31.95-74.05-31.94-129.32-87.21-55.28-55.26-87.23-129.3-31.95-74.03-31.95-157.49 0-83.46 32-157.54 32-74.07 87.2-129.27 55.2-55.2 129.25-87.32 74.05-32.12 157.53-32.12t157.53 32.12q74.05 32.12 129.25 87.32 55.2 55.2 87.32 129.25 32.12 74.05 32.12 157.53T854.1-322.47q-32.12 74.05-87.32 129.25-55.2 55.2-129.24 87.2t-157.51 32ZM480-480Zm-.12 337.85q139.16 0 238.57-99.17 99.4-99.16 99.4-238.56t-99.37-238.69Q619.11-817.85 480-817.85q-139.28 0-238.57 99.26-99.28 99.25-99.28 238.59 0 139.52 99.28 238.68 99.28 99.17 238.45 99.17Z"/></svg>

package/icons/storybook/straighten.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.63-235.46q-27.6 0-47.86-20.33-20.27-20.34-20.27-48.04v-352.34q0-26.7 20.27-47.54 20.26-20.83 47.86-20.83h674.74q27.6 0 47.86 20.83 20.27 20.84 20.27 47.54v352.34q0 27.7-20.27 48.04-20.26 20.33-47.86 20.33H142.63Zm0-68.37h674.74v-352.34H690V-480h-60v-176.17H510V-480h-60v-176.17H330V-480h-60v-176.17H142.63v352.34ZM270-480h60-60Zm180 0h60-60Zm180 0h60-60Zm-150 0Z"/></svg>

package/icons/storybook/trending_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m122.76-234.74-48.74-48.74 298.94-297.69 167 167 231.91-232.4H647.02v-68.36h239.2v239.19h-67.37v-121.09L538.96-316.7l-167-167-249.2 248.96Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.2",
+  "version": "1.0.2-beta.20",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -30,13 +30,13 @@
   "scripts": {
     "pre:start": "npx node .scripts/icons",
     "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "dev": "storybook dev -p 6006 --no-open",
     "build": "storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish",
+    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
     "lint": "eslint --no-fix src/ .storybook/",
@@ -75,7 +75,7 @@
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.0.0",
+    "@vueless/storybook": "^1.0.1-beta.1",
     "eslint": "^9.27.0",
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^10.1.0",

package/ui.boilerplate/UBoilerplate.vue

@@ -35,5 +35,5 @@ const { wrapperAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs">Boilerplate</div>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">Boilerplate</div>
 </template>

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

@@ -0,0 +1,60 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UBoilerplate from "../UBoilerplate.vue";
+import defaultConfig from "../config.ts";
+
+describe("UBoilerplate.vue", () => {
+  // Props tests
+  describe("Props", () => {
+    // DataTest prop
+    it("accepts the dataTest prop", () => {
+      const dataTest = "test-boilerplate";
+
+      const component = mount(UBoilerplate, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+
+    // Config prop
+    it("applies custom config when provided", () => {
+      const customClass = "custom-class";
+      const config = {
+        wrapper: customClass,
+      };
+
+      const component = mount(UBoilerplate, {
+        props: {
+          config,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(customClass);
+      // The default config is merged with the custom config, not replaced
+      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.button/tests/UButton.test.ts

@@ -12,6 +12,7 @@ describe("UButton.vue", () => {
   describe("Props", () => {
     // Variant prop
     it("applies the correct variant class", async () => {
+      const color = "primary";
       const variants = {
         solid: "text-inverted bg-primary",
         outlined: "text-primary border-primary",
@@ -24,7 +25,7 @@ describe("UButton.vue", () => {
         const component = mount(UButton, {
           props: {
             variant: variant as Props["variant"],
-            color: "primary",
+            color,
           },
         });
 

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

@@ -0,0 +1,248 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UAccordion from "../UAccordion.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+
+import type { Props } from "../types.ts";
+
+describe("UAccordion", () => {
+  // Props
+  describe("Props", () => {
+    // Title prop
+    it("renders with title prop", () => {
+      const title = "Accordion Title";
+
+      const component = mount(UAccordion, {
+        props: {
+          title,
+        },
+      });
+
+      expect(component.find("[vl-key='title']").text()).toContain(title);
+    });
+
+    // Description prop
+    it("renders with description prop", () => {
+      const description = "Accordion Description";
+
+      const component = mount(UAccordion, {
+        props: {
+          description,
+        },
+      });
+
+      expect(component.find("[vl-key='description']").text()).toBe(description);
+    });
+
+    // Size prop
+    it("applies correct size classes", () => {
+      const sizeClasses = {
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      };
+
+      Object.entries(sizeClasses).forEach(([size, classes]) => {
+        const component = mount(UAccordion, {
+          props: {
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.find("[vl-key='title']").classes()).toContain(classes);
+      });
+    });
+
+    // ToggleIcon prop
+    it("applies correct toggle icon behavior", () => {
+      const toggleIconTests = [
+        { toggleIcon: true, exists: true, iconName: "keyboard_arrow_down" },
+        { toggleIcon: "custom_icon", exists: true, iconName: "custom_icon" },
+        { toggleIcon: false, exists: false, iconName: undefined },
+      ];
+
+      toggleIconTests.forEach(({ toggleIcon, exists, iconName }) => {
+        const component = mount(UAccordion, {
+          props: {
+            toggleIcon: toggleIcon as Props["toggleIcon"],
+          },
+        });
+
+        const icon = component.findComponent(UIcon);
+
+        expect(icon.exists()).toBe(exists);
+
+        if (exists) {
+          expect(icon.props("name")).toBe(iconName);
+        }
+      });
+    });
+
+    // ID prop
+    it("uses provided id prop", () => {
+      const id = "custom-id";
+
+      const component = mount(UAccordion, {
+        props: {
+          id,
+        },
+      });
+
+      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+    });
+
+    // DataTest prop
+    it("applies data-test attribute", () => {
+      const dataTest = "accordion-test";
+
+      const component = mount(UAccordion, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  // Slots
+  describe("Slots", () => {
+    // Toggle slot
+    it("renders default toggle icon when toggle slot is not provided", () => {
+      const toggleIcon = true;
+
+      const component = mount(UAccordion, {
+        props: {
+          toggleIcon,
+        },
+      });
+
+      const icon = component.findComponent(UIcon);
+
+      expect(icon.exists()).toBe(true);
+    });
+
+    // Custom toggle slot
+    it("renders custom content in toggle slot", () => {
+      const toggleIcon = true;
+      const slotClass = "custom-toggle";
+      const slotContent = "Custom Toggle";
+
+      const component = mount(UAccordion, {
+        props: {
+          toggleIcon,
+        },
+        slots: {
+          toggle: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+      expect(component.findComponent(UIcon).exists()).toBe(false);
+    });
+
+    // Toggle slot bindings
+    it("provides icon-name and opened bindings to toggle slot", async () => {
+      const toggleIcon = true;
+      const toggleClass = "custom-toggle";
+      const defaultIconName = "keyboard_arrow_down";
+
+      const component = mount(UAccordion, {
+        props: {
+          toggleIcon,
+        },
+        slots: {
+          toggle: `
+            <template #default="{ iconName, opened }">
+              <div class="${toggleClass}" :data-icon="iconName" :data-opened="opened"></div>
+            </template>
+          `,
+        },
+      });
+
+      const toggleElement = component.find(`.${toggleClass}`);
+
+      expect(toggleElement.exists()).toBe(true);
+      expect(toggleElement.attributes("data-icon")).toBe(defaultIconName);
+      expect(toggleElement.attributes("data-opened")).toBe("false");
+
+      // Click to toggle
+      await component.trigger("click");
+
+      expect(toggleElement.attributes("data-opened")).toBe("true");
+    });
+  });
+
+  // Events
+  describe("Events", () => {
+    // Click event
+    it("emits click event with id and opened state when clicked", async () => {
+      const id = "test-id";
+
+      const component = mount(UAccordion, {
+        props: {
+          id,
+        },
+      });
+
+      await component.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeTruthy();
+      expect(emitted?.[0]).toEqual([id, true]);
+
+      // Click again to toggle back
+      await component.trigger("click");
+
+      const emittedAgain = component.emitted("click");
+
+      expect(emittedAgain?.[1]).toEqual([id, false]);
+    });
+  });
+
+  // Exposed refs
+  describe("Exposed refs", () => {
+    // WrapperRef
+    it("exposes wrapperRef", () => {
+      const component = mount(UAccordion);
+
+      expect(component.vm.wrapperRef).toBeDefined();
+      expect(component.vm.wrapperRef instanceof HTMLDivElement).toBe(true);
+    });
+  });
+
+  // Component behavior
+  describe("Component behavior", () => {
+    // Toggle behavior
+    it("toggles opened state when clicked", async () => {
+      const description = "Test Description";
+      const openedClass = "opacity-100";
+
+      const component = mount(UAccordion, {
+        props: {
+          description,
+        },
+      });
+
+      const descriptionElement = component.find("[id^='description-']");
+
+      // Initially not opened
+      expect(descriptionElement.classes()).not.toContain(openedClass);
+
+      // Click to open
+      await component.trigger("click");
+
+      // Should be opened
+      expect(descriptionElement.classes()).toContain(openedClass);
+
+      // Click to close
+      await component.trigger("click");
+
+      // Should be closed again
+      expect(descriptionElement.classes()).not.toContain(openedClass);
+    });
+  });
+});