vueless 1.5.4-beta.0 → 1.5.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.4-beta.0",
+  "version": "1.5.4-beta.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -59,7 +59,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.8.5",
+    "@vueless/storybook": "^1.8.6",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-tailwindcss": "^4.0.0-alpha.7",

package/ui.form-calendar/config.ts

@@ -30,7 +30,7 @@ export default /*tw*/ {
   anotherMonthDate: "text-muted",
   activeDate: "bg-primary/10",
   selectedDate: "",
-  currentDate: "border-2 border-primary",
+  currentDate: "",
   day: "{UButton} size-9 w-full",
   currentDay: "{>day} {>currentDate}",
   dayInRange: "{>day} {>dateInRange}",

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -299,7 +299,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           v-else-if="getDatePeriodState(date).isCurrentDate"
           size="sm"
           color="primary"
-          variant="outlined"
+          variant="ghost"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
           :label="String(date.title)"

package/ui.form-date-picker-range/config.ts

@@ -83,8 +83,8 @@ export default /*tw*/ {
   },
   periodDate: "w-full",
   periodDateSelected: "{>periodDate}",
-  periodDateCurrent: "{>periodDate} border-2 border-primary",
-  periodDateCurrentSelected: "{>periodDate} {>periodDateSelected} {>periodDateCurrent}",
+  periodDateCurrent: "{>periodDate}",
+  periodDateCurrentSelected: "{>periodDate} {>periodDateCurrent} {>periodDateSelected}",
   customRangeButton: {
     base: "{>periodButton}",
     variants: {

package/ui.image-icon/UIcon.vue

@@ -61,7 +61,7 @@ const dynamicComponent = computed(() => {
 
   /* Static import */
   if (src?.render) {
-    return src.render({}, {});
+    return src;
   }
 
   /* Dynamic import */

package/ui.image-icon/tests/UIcon.test.ts

@@ -2,6 +2,8 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
 import testIcon from "./assets/test-icon.svg?component";
+import multipathOutlineIcon from "./assets/test-icon-multipath-outline.svg?component";
+import multipathFilledIcon from "./assets/test-icon-multipath-filled.svg?component";
 
 import UIcon from "../UIcon.vue";
 import type { Props } from "../types";
@@ -34,6 +36,24 @@ describe("UIcon.vue", () => {
       expect(component.get("[vl-key='icon']")).toBeTruthy();
     });
 
+    it("Src – re-renders multi-path icon when src changes", async () => {
+      const component = mount(UIcon, {
+        props: {
+          src: multipathOutlineIcon,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.find("#outline").exists()).toBe(true);
+
+      await component.setProps({ src: multipathFilledIcon });
+
+      expect(component.findComponent(multipathFilledIcon!).exists()).toBe(true);
+      expect(component.find("#outline").exists()).toBe(false);
+      expect(component.find("#filled").exists()).toBe(true);
+    });
+
     it("Color – applies correct color classes", () => {
       const name = "check";
       const colors = [

package/ui.image-icon/tests/assets/test-icon-multipath-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 1h1"/><path d="M2 2h1"/><path d="M3 3h1"/><path d="M4 4h1"/><path d="M5 5h1"/><path id="filled" d="M6 6h1"/></svg>

package/ui.image-icon/tests/assets/test-icon-multipath-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 1h1"/><path d="M2 2h1"/><path d="M3 3h1"/><path d="M4 4h1"/><path d="M5 5h1"/><path id="outline" d="M6 6h1"/></svg>