vueless 1.0.2-beta.1 → 1.0.2-beta.10

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/storybook/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-445.93H194.02v-68.14h251.91v-252.15h68.14v252.15h252.15v68.14H514.07v251.91h-68.14v-251.91Z"/></svg>

package/icons/storybook/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m326.37-249.79 153.64-91.89 153.64 92.9-41.28-173.94L727.5-540.33l-178.17-15.52L480-720.02l-69.33 163.41-178.17 15.28 135.22 117.38-41.35 174.16ZM224.15-107.56l67.39-291.29L65.41-594.78l298.43-25.67L480-895.3l116.16 274.85 298.43 25.67-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56ZM480-474.52Z"/></svg>

package/icons/storybook/timer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M354.5-860v-65.5h251v65.5h-251Zm92.87 452.02h65.26v-230.48h-65.26v230.48ZM479.94-70q-75.49 0-142.05-28.94-66.56-28.94-116.36-78.7-49.79-49.75-78.65-116.29-28.86-66.54-28.86-142.01 0-75.47 28.88-142.04 28.88-66.56 78.68-116.4 49.79-49.84 116.35-78.83Q404.5-802.2 480-802.2q67.48 0 127.08 22.5 59.59 22.5 105.83 62.74l53.16-53.15 46.3 46.07-53.15 53.15q36.24 40.48 61.62 97.96 25.38 57.47 25.38 136.95 0 75.52-28.96 142.11-28.95 66.59-78.78 116.31T622.04-98.92Q555.43-70 479.94-70Zm.02-68.37q124.32 0 211.11-86.62 86.78-86.62 86.78-210.95 0-124.32-86.74-211.1-86.75-86.79-211.07-86.79t-211.11 86.75q-86.78 86.74-86.78 211.06 0 124.32 86.74 210.99 86.75 86.66 211.07 86.66Zm.04-296.61Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.1",
+  "version": "1.0.2-beta.10",
   "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.button/tests/UButton.test.ts

@@ -8,6 +8,7 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types.ts";
 
 describe("UButton.vue", () => {
+  // Props tests
   describe("Props", () => {
     // Variant prop
     it("applies the correct variant class", async () => {

package/ui.button-link/tests/ULink.test.ts

@@ -0,0 +1,365 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import { createRouter, createWebHistory } from "vue-router";
+
+import ULink from "../ULink.vue";
+
+import type { Props } from "../types.ts";
+
+// Create a mock router for testing router-link functionality
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/", name: "home", component: { template: "<div>Home</div>" } },
+    { path: "/about", name: "about", component: { template: "<div>About</div>" } },
+  ],
+});
+
+describe("ULink.vue", () => {
+  // Props tests
+  describe("Props", () => {
+    // Size prop
+    it("applies the correct size class", async () => {
+      const size = {
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      };
+
+      Object.entries(size).forEach(([size, classes]) => {
+        const component = mount(ULink, {
+          props: {
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    // Color prop
+    it("applies the correct color class", async () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+        "inherit",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(ULink, {
+          props: {
+            color: color as Props["color"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(color);
+      });
+    });
+
+    // Label prop
+    it("renders the correct label text", () => {
+      const label = "Link Text";
+
+      const component = mount(ULink, {
+        props: {
+          label,
+        },
+      });
+
+      expect(component.text()).toBe(label);
+    });
+
+    // Href prop
+    it("renders the correct href attribute", () => {
+      const href = "https://example.com";
+
+      const component = mount(ULink, {
+        props: {
+          href,
+        },
+      });
+
+      expect(component.attributes("href")).toBe(href);
+    });
+
+    // Type prop
+    it("applies the correct href prefix based on type", () => {
+      const types = {
+        phone: { href: "1234567890", expected: "tel:1234567890" },
+        email: { href: "test@example.com", expected: "mailto:test@example.com" },
+        link: { href: "https://example.com", expected: "https://example.com" },
+      };
+
+      Object.entries(types).forEach(([type, { href, expected }]) => {
+        const component = mount(ULink, {
+          props: {
+            type: type as Props["type"],
+            href,
+          },
+        });
+
+        expect(component.attributes("href")).toBe(expected);
+      });
+    });
+
+    // To prop
+    it("renders as router-link when to prop is provided", async () => {
+      const to = "/about";
+
+      const component = mount(ULink, {
+        props: {
+          to,
+        },
+        global: {
+          plugins: [router],
+        },
+      });
+
+      // Check if it's a router-link by looking for the to attribute
+      expect(component.findComponent({ name: "RouterLink" }).exists()).toBe(true);
+    });
+
+    // Target prop
+    it("applies the correct target attribute", () => {
+      const targets = ["_blank", "_self", "_parent", "_top"];
+
+      targets.forEach((target) => {
+        const component = mount(ULink, {
+          props: {
+            target: target as Props["target"],
+            href: "https://example.com",
+          },
+        });
+
+        expect(component.attributes("target")).toBe(target);
+      });
+    });
+
+    // Rel prop
+    it("applies the correct rel attribute", () => {
+      const rel = "noopener noreferrer";
+
+      const component = mount(ULink, {
+        props: {
+          rel,
+          href: "https://example.com",
+        },
+      });
+
+      expect(component.attributes("rel")).toBe(rel);
+    });
+
+    // Underlined prop
+    it("applies underlined class when underlined prop is true", () => {
+      const underlined = {
+        true: "underline",
+        false: "no-underline",
+        undefined: "hover:underline",
+      };
+
+      Object.entries(underlined).forEach(([value, expectedClass]) => {
+        const component = mount(ULink, {
+          props: {
+            underlined: value === "undefined" ? undefined : value === "true",
+          },
+        });
+
+        expect(component.attributes("class")).toContain(expectedClass);
+      });
+    });
+
+    // Dashed prop
+    it("applies dashed class when dashed prop is true", () => {
+      const dashed = true;
+      const dashedClass = "decoration-dashed";
+
+      const component = mount(ULink, {
+        props: {
+          dashed,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(dashedClass);
+    });
+
+    // Dotted prop
+    it("applies dotted class when dotted prop is true", () => {
+      const dotted = true;
+      const dottedClass = "decoration-dotted";
+
+      const component = mount(ULink, {
+        props: {
+          dotted,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(dottedClass);
+    });
+
+    // Disabled prop
+    it("applies disabled class when disabled prop is true", () => {
+      const disabled = true;
+
+      const component = mount(ULink, {
+        props: {
+          disabled,
+        },
+      });
+
+      expect(component.attributes("class")).toContain("cursor-not-allowed");
+    });
+
+    // Block prop
+    it("applies block class when block prop is true", () => {
+      const block = true;
+      const blockClass = "w-full";
+
+      const component = mount(ULink, {
+        props: {
+          block,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(blockClass);
+    });
+
+    // DataTest prop
+    it("applies the correct data-test attribute", () => {
+      const dataTest = "test-link";
+
+      const component = mount(ULink, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  // Slots tests
+  describe("Slots", () => {
+    // Default slot
+    it("renders content from default slot", () => {
+      const slotContent = "Custom Content";
+      const label = "Link";
+
+      const component = mount(ULink, {
+        props: {
+          label,
+        },
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      expect(component.text()).not.toContain(label);
+      expect(component.text()).toContain(slotContent);
+    });
+
+    // Default slot with router-link
+    it("renders content from default slot with router-link", () => {
+      const slotContent = "Custom Content";
+      const label = "Link";
+
+      const component = mount(ULink, {
+        props: {
+          label,
+          to: "/about",
+        },
+        slots: {
+          default: slotContent,
+        },
+        global: {
+          plugins: [router],
+        },
+      });
+
+      expect(component.text()).not.toContain(label);
+      expect(component.text()).toContain(slotContent);
+    });
+
+    // Default slot with bindings
+    it("provides isActive and isExactActive bindings to default slot with router-link", () => {
+      const component = mount(ULink, {
+        props: {
+          to: "/about",
+        },
+        slots: {
+          default: `
+            <template #default="{ isActive, isExactActive }">
+              <span class="active-status">{{ isActive }}</span>
+              <span class="exact-active-status">{{ isExactActive }}</span>
+            </template>
+          `,
+        },
+        global: {
+          plugins: [router],
+        },
+      });
+
+      expect(component.find(".active-status").exists()).toBe(true);
+      expect(component.find(".exact-active-status").exists()).toBe(true);
+    });
+  });
+
+  // Events tests
+  describe("Events", () => {
+    // Click event
+    it("emits click event when clicked", async () => {
+      const component = mount(ULink, {});
+
+      await component.trigger("click");
+      expect(component.emitted("click")).toBeTruthy();
+    });
+
+    // Mouseover event
+    it("emits mouseover event when hovered", async () => {
+      const component = mount(ULink, {});
+
+      await component.trigger("mouseover");
+      expect(component.emitted("mouseover")).toBeTruthy();
+    });
+
+    // Focus event
+    it("emits focus event when focused", async () => {
+      const component = mount(ULink, {});
+
+      await component.trigger("focus");
+      expect(component.emitted("focus")).toBeTruthy();
+    });
+
+    // Blur event
+    it("emits blur event when blurred", async () => {
+      const component = mount(ULink, {});
+
+      await component.trigger("blur");
+      expect(component.emitted("blur")).toBeTruthy();
+    });
+
+    // Keydown event
+    it("emits keydown event when key is pressed", async () => {
+      const component = mount(ULink, {});
+
+      await component.trigger("keydown");
+      expect(component.emitted("keydown")).toBeTruthy();
+    });
+  });
+
+  // Exposed refs tests
+  describe("Exposed refs", () => {
+    // linkRef
+    it("exposes linkRef", () => {
+      const component = mount(ULink, {});
+
+      expect(component.vm.linkRef).toBeDefined();
+    });
+  });
+});

package/ui.button-toggle/UToggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -27,6 +27,7 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
+const elementId = props.id || useId();
 const optionsRef = useTemplateRef<HTMLDivElement>("options");
 
 const hoveredItem = ref();
@@ -106,7 +107,7 @@ const {
 </script>
 
 <template>
-  <div ref="options" v-bind="optionsAttrs">
+  <div :id="elementId" ref="options" v-bind="optionsAttrs" :data-test="getDataTest()">
     <template v-for="(option, index) in options" :key="index">
       <UButton
         :label="option.label"

package/ui.button-toggle/storybook/stories.ts

@@ -57,16 +57,7 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
 
 const EnumTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes }) => ({
   components: { UToggle, URow },
-  setup() {
-    const values = ref(argTypes.size?.options);
-
-    return {
-      args,
-      values,
-      argTypes,
-      getArgs,
-    };
-  },
+  setup: () => ({ args, argTypes, getArgs, values: ref(argTypes.size?.options) }),
   template: `
     <URow>
       <UToggle
@@ -110,15 +101,10 @@ Square.args = {
   name: "square",
   square: true,
   options: [
-    { value: "11", label: "star" },
-    { value: "12", label: "add" },
-    { value: "13", label: "timer" },
+    { value: "11", icon: "star" },
+    { value: "12", icon: "add" },
+    { value: "13", icon: "timer" },
   ],
-  slotTemplate: `
-    <template #option="{ label, index }">
-      <UIcon :name="label" color="inherit" />
-    </template>
-  `,
 };
 
 export const Disabled = DefaultTemplate.bind({});