vueless 0.0.455 → 0.0.456

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.455",
+  "version": "0.0.456",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-calendar/UCalendar.vue

@@ -312,12 +312,6 @@ const emit = defineEmits([
    * @property {string} value
    */
   "userDateChange",
-
-  /**
-   * Triggers when the date format applied to the input changes.
-   * @property {string} value
-   */
-  "formattedDateChange",
 ]);
 
 const { tm } = useLocale();
@@ -519,10 +513,6 @@ const selectedDateTo = computed(() => {
     : undefined;
 });
 
-const formattedDate = computed(() => {
-  return formatDate(selectedDate.value, actualDateFormat.value, locale.value);
-});
-
 const userFormattedDate = computed(() => {
   const date = formatDate(selectedDate.value, actualUserFormat.value, userFormatLocale.value);
   const dateTo = props.range
@@ -547,10 +537,6 @@ watch(userFormattedDate, () => {
   emit("userDateChange", userFormattedDate.value);
 });
 
-watch(formattedDate, () => {
-  emit("formattedDateChange", userFormattedDate.value);
-});
-
 // This watcher force updates value when range props changed
 watch(
   () => props.range,
@@ -573,7 +559,6 @@ const unwatchInit = watch(
       minutesRef.value.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
       secondsRef.value.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
 
-      emit("formattedDateChange", userFormattedDate.value);
       emit("userDateChange", userFormattedDate.value);
 
       isInit = true;

package/ui.form-calendar/config.js

@@ -6,7 +6,14 @@ export default /*tw*/ {
   dayView: "",
   weekDays: "grid grid-cols-7 justify-items-center gap-1",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
-  days: "grid grid-cols-7 justify-items-center gap-1",
+  days: {
+    base: "grid grid-cols-7 justify-items-center gap-1",
+    variants: {
+      range: {
+        true: "gap-0 gap-y-0.5",
+      },
+    },
+  },
   dateInRange: "bg-brand/15 font-semibold !text-brand-900 hover:bg-brand/30 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
@@ -20,9 +27,9 @@ export default /*tw*/ {
   dayInRange: "",
   currentDayInRange: "",
   anotherMonthDay: "",
-  firstDayInRange: "",
+  firstDayInRange: "font-semibold",
   anotherMonthFirstDayInRange: "",
-  lastDayInRange: "",
+  lastDayInRange: "font-semibold",
   currentLastDayInRange: "",
   currentFirstDayInRange: "",
   anotherMonthLastDayInRange: "",

package/ui.form-date-picker/UDatePicker.vue

@@ -65,7 +65,6 @@
         v-bind="calendarAttrs"
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
-        @formatted-date-change="onFormattedDateChange"
         @input="onInput"
         @blur="onBlur"
         @submit="onSubmit"
@@ -355,10 +354,6 @@ function onUserFormatDateChange(value) {
   userFormatDate.value = formatUserDate(value) || "";
 }
 
-function onFormattedDateChange(value) {
-  formattedDate.value = value || "";
-}
-
 function onSubmit() {
   deactivate();
 }
@@ -402,7 +397,6 @@ function onInput() {
     calendarRef.value?.wrapperRef?.blur();
     emit("input", {
       value: localValue.value,
-      formattedDate: formattedDate.value,
       userFormatDate: formatUserDate(userFormatDate.value),
     });
   });

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

@@ -279,6 +279,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePickerRange).dateFormat,
   },
 
+  /**
+   * User-friendly date format (it will be shown in UI).
+   */
+  userDateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePickerRange).userDateFormat,
+  },
+
   /**
    * Datepicker size.
    * @values sm, md, lg
@@ -498,7 +506,13 @@ const clickOutsideOptions = computed(() => {
   };
 });
 
-const { userFormatDate } = useUserFormat(localValue, userFormatLocale, isPeriod, isVariant);
+const { userFormatDate } = useUserFormat(
+  localValue,
+  userFormatLocale,
+  isPeriod,
+  locale,
+  props.userDateFormat,
+);
 
 watch(
   calendarValue,

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

@@ -3,7 +3,14 @@ export default /*tw*/ {
   input: "{UInput}",
   activeInput: {
     component: "{UInput}",
-    wrapper: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+    wrapper: {
+      base: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      variants: {
+        error: {
+          true: "ring-red-500/15",
+        },
+      },
+    },
   },
   buttonWrapper: `
     flex rounded-dynamic max-md:justify-between
@@ -96,7 +103,6 @@ export default /*tw*/ {
     component: "{UCalendar}",
     wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
     navigation: "pb-0 mb-0 border-none",
-    days: "gap-0 gap-y-0.5",
     day: "w-full",
   },
   i18n: {
@@ -185,6 +191,7 @@ export default /*tw*/ {
     },
   },
   defaults: {
+    userDateFormat: "j F Y",
     size: "md",
     variant: "button",
     labelAlign: "topInside",

package/ui.form-date-picker-range/useUserFormat.js

@@ -1,12 +1,9 @@
 import { computed } from "vue";
 
-import useBreakpoint from "../composables/useBreakpoint.js";
-
 import { isSameMonth } from "../ui.form-calendar/utilDate.js";
+import { formatDate } from "../ui.form-calendar/utilCalendar.js";
 
-export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant) {
-  const { isMobileBreakpoint } = useBreakpoint();
-
+export function useUserFormat(localValue, userFormatLocale, isPeriod, locale, userDateFormat) {
   const userFormatDate = computed(() => {
     if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 
@@ -19,7 +16,6 @@ export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant)
 
     if (isDefaultTitle) {
       let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      let startYear = from.getFullYear();
       let endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
       let endYear = to?.getFullYear();
 
@@ -27,54 +23,34 @@ export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant)
         startMonthName = "";
       }
 
-      if (startYear.year === endYear) {
-        startYear = "";
-      }
+      const isDateToSameMonth = isSameMonth(from, to);
+      const isDateToSameYear = from.getFullYear() === to.getFullYear();
 
-      const isDatesToSameMonth = isSameMonth(from, to);
-      const isDatesToSameYear = from.getFullYear() === to.getFullYear();
+      let fromFormat = userDateFormat;
 
-      let fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
-
-      if (isDatesToSameMonth && isDatesToSameYear) {
-        fromTitle = from.getDate();
+      if (isDateToSameMonth && isDateToSameYear) {
+        fromFormat = fromFormat.replace(/[YyMmFnU]/g, "");
       }
 
-      if (!isDatesToSameMonth && isDatesToSameYear) {
-        fromTitle = `${from.getDate()} ${startMonthName}`;
+      if (!isDateToSameMonth && isDateToSameYear) {
+        fromFormat = fromFormat.replace(/[Yy]/g, "");
       }
 
-      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
+      const fromTitle = from ? formatDate(from, fromFormat, locale.value) : "";
+      const toTitle = to ? formatDate(to, userDateFormat, locale.value) : "";
 
       title = `${fromTitle} – ${toTitle}`;
     }
 
     if (isPeriod.value.month) {
-      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      const startYear = from.getFullYear();
-
-      title = `${startMonthName} ${startYear}`;
+      title = formatDate(from, "F Y", locale.value);
     }
 
     if (isPeriod.value.quarter || isPeriod.value.year) {
-      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      const endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
-      const endYear = to?.getFullYear();
-
-      const fromTitle = `${from.getDate()} ${startMonthName}`;
-      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
-
-      title = `${fromTitle} – ${toTitle}`;
-    }
-
-    if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
-      const startDay = String(from.getDate()).padStart(2, "0");
-      const endDay = String(to?.getDate())?.padStart(2, "0");
-      const startMonth = String(from.getMonth()).padStart(2, "0");
-      const endMonth = String(to?.getMonth())?.padStart(2, "0");
+      const fromFormat = userDateFormat.replace(/[Yy]/g, "");
 
-      const fromTitle = `${startDay}.${startMonth}`;
-      const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear()}` : "";
+      const fromTitle = from ? formatDate(from, fromFormat, locale.value) : "";
+      const toTitle = to ? formatDate(to, userDateFormat, locale.value) : "";
 
       title = `${fromTitle} – ${toTitle}`;
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.455",
+  "version": "0.0.456",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1058,18 +1058,6 @@
                   "name": "value"
                 }
               ]
-            },
-            {
-              "name": "formattedDateChange",
-              "description": "Triggers when the date format applied to the input changes.",
-              "properties": [
-                {
-                  "type": [
-                    "string"
-                  ],
-                  "name": "value"
-                }
-              ]
             }
           ],
           "exposes": [
@@ -2683,6 +2671,15 @@
                 "type": "string"
               }
             },
+            {
+              "name": "userDateFormat",
+              "description": "User-friendly date format (it will be shown in UI).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F Y"
+            },
             {
               "name": "size",
               "description": "Datepicker size.",