vueless 0.0.319 → 0.0.320

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.319",
+  "version": "0.0.320",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-calendar/configs/default.config.js

@@ -119,10 +119,12 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userFormat: "j F, Y",
+    userDateFormat: "j F, Y",
+    userDateTimeFormat: "j F, Y - H:i:S",
     range: false,
     timepicker: false,
     dateFormat: undefined,
+    dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
     /* icons */

package/ui.form-calendar/index.stories.js

@@ -68,4 +68,4 @@ MinMax.args = {
 };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };
+DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", value: "28.06.2024" };

package/ui.form-calendar/index.vue

@@ -60,7 +60,7 @@
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInputDate"
@@ -73,7 +73,7 @@
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInput"
@@ -86,7 +86,7 @@
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInput"
@@ -231,12 +231,28 @@ const props = defineProps({
     default: getDefault(defaultConfig, UCalendar).dateFormat,
   },
 
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).dateTimeFormat,
+  },
+
   /**
    * User friendly date format.
    */
-  userFormat: {
+  userDateFormat: {
     type: String,
-    default: getDefault(defaultConfig, UCalendar).userFormat,
+    default: getDefault(defaultConfig, UCalendar).userDateFormat,
+  },
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).userDateTimeFormat,
   },
 
   /**
@@ -386,6 +402,18 @@ const locale = computed(() => {
   };
 });
 
+const isTimepickerEnabled = computed(() => {
+  return props.timepicker && !props.range;
+});
+
+const actualDateFormat = computed(() => {
+  return isTimepickerEnabled.value ? props.dateTimeFormat : props.dateFormat;
+});
+
+const actualUserFormat = computed(() => {
+  return isTimepickerEnabled.value ? props.userDateTimeFormat : props.userDateFormat;
+});
+
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -413,10 +441,6 @@ const userFormatLocale = computed(() => {
   };
 });
 
-const isTimepickerEnabled = computed(() => {
-  return props.timepicker && !props.range;
-});
-
 const isModelRangeType = computed(() => {
   return (
     props.modelValue !== null &&
@@ -433,22 +457,26 @@ const localValue = computed({
       const to = isModelRangeType.value ? props.modelValue.to : null;
 
       return {
-        from: parseDate(from || null, props.dateFormat, locale.value),
-        to: parseDate(to || null, props.dateFormat, locale.value),
+        from: parseDate(from || null, actualDateFormat.value, locale.value),
+        to: parseDate(to || null, actualDateFormat.value, locale.value),
       };
     }
 
     return isModelRangeType.value
-      ? parseDate(props.modelValue.from || null, props.dateFormat, locale.value)
-      : parseDate(props.modelValue || null, props.dateFormat, locale.value);
+      ? parseDate(props.modelValue.from || null, actualDateFormat.value, locale.value)
+      : parseDate(props.modelValue || null, actualDateFormat.value, locale.value);
   },
   set(value) {
     value = getCurrentValueType(value);
 
-    const parsedDate = parseDate(props.range ? value.from : value, props.dateFormat, locale.value);
+    const parsedDate = parseDate(
+      props.range ? value.from : value,
+      actualDateFormat.value,
+      locale.value,
+    );
     const parsedDateTo =
       isModelRangeType.value && props.range
-        ? parseDate(value.to, props.dateFormat, locale.value)
+        ? parseDate(value.to, actualDateFormat.value, locale.value)
         : undefined;
 
     if (parsedDate && isTimepickerEnabled.value) {
@@ -462,19 +490,19 @@ const localValue = computed({
       props.minDate,
       props.maxDate,
       locale.value,
-      props.dateFormat,
+      actualDateFormat.value,
     );
 
     if (isOutOfRange) {
       return;
     }
 
-    const newDate = props.dateFormat
-      ? formatDate(parsedDate || null, props.dateFormat, locale.value)
+    const newDate = actualDateFormat.value
+      ? formatDate(parsedDate || null, actualDateFormat.value, locale.value)
       : parsedDate;
 
-    const newDateTo = props.dateFormat
-      ? formatDate(parsedDateTo || null, props.dateFormat, locale.value)
+    const newDateTo = actualDateFormat.value
+      ? formatDate(parsedDateTo || null, actualDateFormat.value, locale.value)
       : parsedDateTo;
 
     emit("update:modelValue", props.range ? { from: newDate, to: newDateTo } : newDate);
@@ -492,23 +520,25 @@ const localValue = computed({
 const selectedDate = computed(() => {
   return parseDate(
     props.range ? localValue.value.from : localValue.value,
-    props.dateFormat,
+    actualDateFormat.value,
     locale.value,
   );
 });
 
 const selectedDateTo = computed(() => {
-  return props.range ? parseDate(localValue.value.to, props.dateFormat, locale.value) : undefined;
+  return props.range
+    ? parseDate(localValue.value.to, actualDateFormat.value, locale.value)
+    : undefined;
 });
 
 const formattedDate = computed(() => {
-  return formatDate(selectedDate.value, props.dateFormat, locale.value);
+  return formatDate(selectedDate.value, actualDateFormat.value, locale.value);
 });
 
 const userFormattedDate = computed(() => {
-  const date = formatDate(selectedDate.value, props.userFormat, userFormatLocale.value);
+  const date = formatDate(selectedDate.value, actualUserFormat.value, userFormatLocale.value);
   const dateTo = props.range
-    ? formatDate(selectedDateTo.value, props.userFormat, userFormatLocale.value)
+    ? formatDate(selectedDateTo.value, actualUserFormat.value, userFormatLocale.value)
     : undefined;
 
   return props.range ? `${date} ${SEPARATOR} ${dateTo}` : date;
@@ -699,7 +729,7 @@ function arrowKeyHandler(event) {
     props.minDate,
     props.maxDate,
     locale.value,
-    props.dateFormat,
+    actualDateFormat.value,
   );
 
   if (newActiveDate && !isOutOfRange) {

package/ui.form-date-picker/configs/default.config.js

@@ -108,7 +108,8 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userFormat: "j F, Y",
+    userDateFormat: "j F, Y",
+    userDateTimeFormat: "j F, Y - H:i:S",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
@@ -116,6 +117,7 @@ export default /*tw*/ {
     timepicker: false,
     disabled: false,
     dateFormat: undefined,
+    dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker/index.stories.js

@@ -133,13 +133,13 @@ export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", modelValue: "28.06.2024" };
+DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", modelValue: "28.06.2024" };
 
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = {
   timepicker: true,
   modelValue: new Date(2024, 2, 14, 12, 24, 14),
-  userFormat: "j F, Y - H:i:S",
+  userDateFormat: "j F, Y - H:i:S",
 };
 
 export const MinMax = DefaultTemplate.bind({});

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

@@ -47,7 +47,9 @@
         tabindex="-1"
         :timepicker="timepicker"
         :date-format="dateFormat"
-        :user-format="userFormat"
+        :date-time-format="dateTimeFormat"
+        :user-date-format="userFormat"
+        :user-date-time-format="userDateTimeFormat"
         :max-date="maxDate"
         :min-date="minDate"
         v-bind="calendarAttrs"
@@ -217,12 +219,28 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePicker).dateFormat,
   },
 
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).dateTimeFormat,
+  },
+
   /**
    * User friendly date format.
    */
-  userFormat: {
+  userDateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePicker).userDateFormat,
+  },
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat: {
     type: String,
-    default: getDefault(defaultConfig, UDatePicker).userFormat,
+    default: getDefault(defaultConfig, UCalendar).userDateTimeFormat,
   },
 
   /**
@@ -341,7 +359,7 @@ function onBlur(event) {
 }
 
 function formatUserDate(data) {
-  if (props.userFormat !== STANDARD_USER_FORMAT) return data;
+  if (props.userFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
 
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);

package/ui.form-date-picker-range/index.stories.js

@@ -150,7 +150,7 @@ MinMax.args = {
 export const DateFormat = DefaultTemplate.bind({});
 DateFormat.args = {
   dateFormat: "d.m.Y",
-  userFormat: "d.m.Y",
+  userDateFormat: "d.m.Y",
   value: { from: "28.06.2024", to: "30.06.2024" },
 };
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.319",
+  "version": "0.0.320",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1204,7 +1204,15 @@
               }
             },
             {
-              "name": "userFormat",
+              "name": "dateTimeFormat",
+              "description": "Same as date format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "userDateFormat",
               "description": "User friendly date format.",
               "value": {
                 "kind": "expression",
@@ -1212,6 +1220,15 @@
               },
               "default": "j F, Y"
             },
+            {
+              "name": "userDateTimeFormat",
+              "description": "Same as user format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F, Y - H:i:S"
+            },
             {
               "name": "minDate",
               "description": "Min date in JS Date Object or Date String formatted in provided props.dateFormat.",
@@ -2423,7 +2440,15 @@
               }
             },
             {
-              "name": "userFormat",
+              "name": "dateTimeFormat",
+              "description": "Same as date format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "userDateFormat",
               "description": "User friendly date format.",
               "value": {
                 "kind": "expression",
@@ -2431,6 +2456,15 @@
               },
               "default": "j F, Y"
             },
+            {
+              "name": "userDateTimeFormat",
+              "description": "Same as user format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F, Y - H:i:S"
+            },
             {
               "name": "id",
               "description": "@ignore: Unique element id.",