vueless 1.3.4-beta.2 → 1.3.4-beta.4

package/README.md

@@ -2,7 +2,7 @@
 
 # Vueless UI
 
-A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [Storybook v9](https://storybook.js.org) and [Tailwind CSS v4](https://tailwindcss.com).
+A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [Storybook v10](https://storybook.js.org) and [Tailwind CSS v4](https://tailwindcss.com).
 
 **With Vueless UI, you’re free to:**
 - 🪄️ Customize any component
@@ -10,13 +10,14 @@ A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [
 - 🧱 Build your own from scratch
 - 📕 Document it all seamlessly in Storybook
 
-[Documentation](https://docs.vueless.com/) | [UI Components](https://ui.vueless.com/) | [Website](http://vueless.com/)
+[Documentation](https://docs.vueless.com/) | [UI Components](https://ui.vueless.com/) | [Theme Builder](https://my.vueless.com/theme) | [About](http://vueless.com/)
 
 ### Key features
 
 - 🧩 65+ crafted UI components (including range date picker, multi-select, and nested table)
 - ✨ Open Architecture lets you customize, copy, extend, and create your own components
 - 📕 Built-in Storybook support
+- 🪩 Theme Builder for runtime theme customization
 - 🌈 Beautiful default UI theme
 - 🌀 Unstyled mode
 - 🌗 Light and dark mode
@@ -30,6 +31,22 @@ A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [
 - 🧪️ 1300+ unit tests ensuring consistent logic
 - 🛡️ Full TypeScript support with type safety
 
+## Built-In Storybook
+
+No setup, no hacks — just a fully functional Storybook preset ready to test your Vueless UI design system out of the box.
+
+[Demo](https://ui.vueless.com) | [Package](https://www.npmjs.com/package/@vueless/storybook) | [Docs](https://docs.vueless.com/installation/storybook)
+
+![storybook.png](public/images/storybook.png)
+
+## Theme Builder
+
+Customize colors, rounding, and typography at runtime, generate full palettes, and export a ready-to-use theme to your project.
+
+[Try Vueless UI Theme Builder](https://my.vueless.com/theme) 🚀
+
+![theme-builder.png](public/images/theme-builder.png)
+
 ## Quick Start (Vue)
 
 ### New project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.4-beta.2",
+  "version": "1.3.4-beta.4",
   "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.form-calendar/UCalendar.vue

@@ -38,7 +38,7 @@ import {
 
 import defaultConfig from "./config";
 
-import type { Props, DateValue, RangeDate, Locale, Config } from "./types";
+import type { Props, DateValue, Locale, Config } from "./types";
 import type { DateLocale } from "./utilFormatting";
 import type { ComponentExposed } from "../types";
 
@@ -189,21 +189,14 @@ const userFormatLocale = computed(() => {
 const localValue = computed({
   get: () => {
     if (props.range) {
-      const isModelValueRangeType =
-        props.modelValue &&
-        typeof props.modelValue === "object" &&
-        !(props.modelValue instanceof Date);
+      if (tempRangeValue.value) return tempRangeValue.value;
 
-      const modelValue = isModelValueRangeType
-        ? (props.modelValue as RangeDate)
-        : (props.modelValue as string | Date);
-
-      const from = isRangeDate(modelValue) ? modelValue.from : modelValue || null;
-      const to = isRangeDate(modelValue) ? modelValue.to : null;
+      const from = isRangeDate(props.modelValue) ? props.modelValue.from : null;
+      const to = isRangeDate(props.modelValue) ? props.modelValue.to : null;
 
       return {
-        from: parseDate(from || null, actualDateFormat.value, locale.value),
-        to: parseDate(to || null, actualDateFormat.value, locale.value),
+        from: parseDate(from, actualDateFormat.value, locale.value),
+        to: parseDate(to, actualDateFormat.value, locale.value),
       };
     }
 
@@ -256,7 +249,14 @@ const localValue = computed({
 
     const newRangeDate = { from: newDate, to: newDateTo };
 
-    emit("update:modelValue", props.range ? (newRangeDate as RangeDate) : newDate);
+    if (props.range) {
+      if (newDate && newDateTo) {
+        tempRangeValue.value = null;
+        emit("update:modelValue", newRangeDate);
+      }
+    } else {
+      emit("update:modelValue", newDate);
+    }
 
     if (parsedDate === null && isTimepickerEnabled.value && isInputRefs.value) {
       const currentDate = new Date();
@@ -269,6 +269,7 @@ const localValue = computed({
 });
 
 const activeDate = ref();
+const tempRangeValue = ref<TModelValue | null>(null);
 
 if (isRangeDate(localValue.value)) {
   activeDate.value = localValue.value.from || getDateWithoutTime();
@@ -452,18 +453,28 @@ function onInputDate(newDate: Date | null) {
   }
 
   if (props.range && isRangeDate(localValue.value)) {
-    const isFullReset =
-      (localValue.value.from && newDate < localValue.value.from) ||
-      (localValue.value.to && localValue.value.from);
+    const localFromTime =
+      localValue.value?.from instanceof Date ? localValue.value?.from.getTime() : 0;
 
-    const updatedValue =
-      isFullReset || !localValue.value.from
-        ? { from: newDate, to: null }
-        : { from: localValue.value.from, to: newDate };
+    const isSameAsFrom = newDate.getTime() === localFromTime;
+    const isNewDateLessFromDate = localValue.value.from && newDate < localValue.value.from;
+    const areToAndFromDateExists = localValue.value.to && localValue.value.from;
+    const hasFrom = localValue.value.from;
 
-    localValue.value = updatedValue;
+    const isFullReset = isSameAsFrom || isNewDateLessFromDate || areToAndFromDateExists || !hasFrom;
 
-    emit("input", updatedValue);
+    const updatedValue = isFullReset
+      ? { from: newDate, to: null }
+      : { from: localValue.value.from, to: newDate };
+
+    if (updatedValue.from && updatedValue.to) {
+      tempRangeValue.value = null;
+      localValue.value = updatedValue;
+
+      emit("input", updatedValue);
+    } else {
+      tempRangeValue.value = updatedValue;
+    }
   } else {
     localValue.value = newDate;
 

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -117,18 +117,18 @@ describe("UCalendar.vue", () => {
       const days = dayView.findAll('[vl-key="day"]');
 
       await days[0].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+
       await days[3].trigger("click");
 
       expect(component.emitted("update:modelValue")).toBeTruthy();
+      expect(component.emitted("update:modelValue")).toHaveLength(1);
 
-      const firstUpdate = component.emitted("update:modelValue")![0][0] as RangeDate;
-      const secondUpdate = component.emitted("update:modelValue")![1][0] as RangeDate;
-
-      expect(firstUpdate.from).not.toBeNull();
-      expect(firstUpdate.to).toBeNull();
+      const rangeUpdate = component.emitted("update:modelValue")![0][0] as RangeDate;
 
-      expect(secondUpdate.from).not.toBeNull();
-      expect(secondUpdate.to).not.toBeNull();
+      expect(rangeUpdate.from).not.toBeNull();
+      expect(rangeUpdate.to).not.toBeNull();
     });
 
     it("Timepicker – shows timepicker when enabled", () => {
@@ -248,28 +248,22 @@ describe("UCalendar.vue", () => {
         props: {
           range: true,
           modelValue: {
-            from: "2023-12-02",
-            to: "2023-12-31",
+            from: null,
+            to: null,
           },
           dateFormat: "Y-m-d",
         },
       });
 
-      await component.setProps({
-        "onUpdate:modelValue": (value: RangeDate) => {
-          component.setProps({ modelValue: value });
-        },
-      });
-
       const dayView = component.findComponent(DayView);
       const days = dayView.findAll("button");
 
       await days[0].trigger("click");
       await days[3].trigger("click");
 
-      expect(component.emitted("update:modelValue")).toHaveLength(3);
+      expect(component.emitted("update:modelValue")).toHaveLength(2);
 
-      const updatedValue = component.emitted("update:modelValue")![2][0] as RangeDate;
+      const updatedValue = component.emitted("update:modelValue")![1][0] as RangeDate;
 
       expect(updatedValue.from).toMatch(dateFormatRegex);
       expect(updatedValue.to).toMatch(dateFormatRegex);

package/ui.form-date-picker-range/tests/UDatePickerRange.test.ts

@@ -42,7 +42,11 @@ describe("UDatePickerRange.vue", () => {
       const input = component.findComponent(UInput).get("input");
 
       await input.trigger("focus");
-      await component.get("[vl-key='day']").trigger("click");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
 
       expect(component.emitted("update:modelValue")).toBeTruthy();
     });

package/utils/theme.ts

@@ -35,6 +35,7 @@ import {
   DEFAULT_DISABLED_OPACITY,
   LETTER_SPACING,
   DEFAULT_LETTER_SPACING,
+  THEME_TOKENS,
   LIGHT_THEME,
   DARK_THEME,
   SPACING,
@@ -898,12 +899,11 @@ function setCSSVariables(
   `;
 
   if (isCSR) {
-    const vuelessStyleId = "vueless-theme-tokens";
-    let style = document.getElementById(vuelessStyleId) as HTMLStyleElement | null;
+    let style = document.getElementById(THEME_TOKENS) as HTMLStyleElement | null;
 
     if (!style) {
       style = document.createElement("style");
-      style.id = vuelessStyleId;
+      style.id = THEME_TOKENS;
 
       const firstStyleOrLink = document.querySelector("link[rel='stylesheet'], style");