vueless 0.0.493 → 0.0.495

package/ui.form-date-picker-range/{utilDateRange.js → utilDateRange.ts}

@@ -12,13 +12,19 @@ import {
   getStartOfYear,
 } from "../ui.form-calendar/utilDate.ts";
 
-export function getYearDateList(date) {
+export interface DatePeriodRange {
+  title: string | number;
+  startRange: Date;
+  endRange: Date;
+}
+
+export function getYearDateList(date: Date) {
   const NUMBER_ADDING_YEAR = 12;
 
   const year = date.getFullYear();
   const month = date.getMonth();
 
-  const years = [];
+  const years: DatePeriodRange[] = [];
 
   for (let i = 0; i < NUMBER_ADDING_YEAR; i++) {
     const currentYear = year + i;
@@ -33,13 +39,13 @@ export function getYearDateList(date) {
   return years;
 }
 
-export function getQuartersDateList(date, quarterLocales = "") {
+export function getQuartersDateList(date: Date, quarterLocales = "") {
   const QUARTER_NUMBER = 4;
   const monthIndex = 0;
   const day = 1;
   const year = date.getFullYear();
 
-  let quarters = [];
+  const quarters: DatePeriodRange[] = [];
 
   const firstQuarter = new Date(year, monthIndex, day);
 
@@ -57,7 +63,7 @@ export function getQuartersDateList(date, quarterLocales = "") {
   return quarters;
 }
 
-export function getMonthsDateList(date, monthLocales = []) {
+export function getMonthsDateList(date: Date, monthLocales: string[] = []) {
   const year = date.getFullYear();
 
   const months = monthLocales.map((item, index) => {
@@ -71,7 +77,7 @@ export function getMonthsDateList(date, monthLocales = []) {
   return months;
 }
 
-export function getWeekDateList(date, monthShortLocales = {}) {
+export function getWeekDateList(date: Date, monthShortLocales: string[] = []) {
   const month = date.getMonth();
   const year = date.getFullYear();
   const day = 1;
@@ -90,8 +96,8 @@ export function getWeekDateList(date, monthShortLocales = {}) {
     const isDayInPreviousMonth = week === 0 && firstDayOfWeek > 1;
     const isLastWeek = week + day === weeksInMonth;
 
-    let monthFirstDayOfWeek = "";
-    let monthLastDayOfWeek = endOfWeekDate.getMonth();
+    let monthFirstDayOfWeek = 0;
+    const monthLastDayOfWeek = endOfWeekDate.getMonth();
 
     if (isDayInPreviousMonth || isLastWeek) {
       monthFirstDayOfWeek = startOfWeekDate.getMonth();

package/ui.form-date-picker-range/{utilValidation.js → utilValidation.ts}

@@ -2,21 +2,21 @@ import { getDaysInMonth } from "../ui.form-calendar/utilDate.ts";
 
 const datePattern = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
 
-export function isWrongDateFormat(value) {
+export function isWrongDateFormat(value: string) {
   return !datePattern.test(value);
 }
 
-export function isWrongMonthNumber(value) {
+export function isWrongMonthNumber(value: string) {
   const splitDate = value.split(".");
   const month = splitDate[1];
 
   return !(Number(month) >= 1 && Number(month) <= 12);
 }
 
-export function isWrongDayNumber(value) {
+export function isWrongDayNumber(value: string) {
   const [day, month, year] = value.split(".");
 
-  const daysInMonth = getDaysInMonth(new Date(year, month - 1));
+  const daysInMonth = getDaysInMonth(new Date(Number(year), Number(month) - 1));
 
   return !(Number(day) >= 1 && Number(day) <= Number(daysInMonth));
 }

package/utils/theme.ts

@@ -139,6 +139,22 @@ export function setTheme(config: InternalThemeConfig = {}) {
   return rootVariables;
 }
 
+// todo: need to be reactive same like loader state
+export function getDarkMode() {
+  let isDarkMode = undefined;
+  let storedDarkMode = null;
+
+  if (isCSR) {
+    storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+  }
+
+  if (storedDarkMode !== null) {
+    isDarkMode = !!Number(storedDarkMode);
+  }
+
+  return isDarkMode;
+}
+
 function setDarkMode(config: InternalThemeConfig) {
   config?.darkMode === undefined
     ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.493",
+  "version": "0.0.495",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1074,7 +1074,7 @@
               "description": "Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).",
               "value": {
                 "kind": "expression",
-                "type": "DateValue"
+                "type": "TModelValue"
               }
             },
             {
@@ -1102,6 +1102,20 @@
               },
               "default": "false"
             },
+            {
+              "name": "tabindex",
+              "required": false,
+              "description": "Controls the keyboard “Tab” focus order of elements.",
+              "enum": [
+                "number",
+                "string"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "1"
+            },
             {
               "name": "timepicker",
               "required": false,
@@ -2773,13 +2787,9 @@
               "name": "modelValue",
               "required": true,
               "description": "Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).",
-              "enum": [
-                "Date",
-                "string"
-              ],
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "TModelValue"
               }
             },
             {
@@ -2968,7 +2978,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "getDefault<UDatePickerProps>(defaultConfig, UDatePicker).leftIcon"
+              "default": "getDefault<Props>(defaultConfig, UDatePicker).leftIcon"
             },
             {
               "name": "rightIcon",
@@ -3125,24 +3135,26 @@
           "attributes": [
             {
               "name": "modelValue",
+              "required": true,
               "description": "Datepicker range value (JavaScript Date objects or strings formatted in given `dateFormat`).",
               "value": {
                 "kind": "expression",
-                "type": "object"
-              },
-              "default": "{\n  from: null,\n  to: null\n}"
+                "type": "TModelValue"
+              }
             },
             {
               "name": "customRangeButton",
+              "required": false,
               "description": "Custom range button.",
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "CustomRangeButton"
               },
-              "default": "{\n  range: { from: null, to: null },\n  label: \"\",\n  description: \"\"\n}"
+              "default": "() => ({\n  range: { from: null, to: null },\n  label: \"\",\n  description: \"\",\n})"
             },
             {
               "name": "openDirectionX",
+              "required": false,
               "description": "Datepicker open direction on x-axis.",
               "enum": [
                 "auto",
@@ -3151,12 +3163,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "auto"
             },
             {
               "name": "openDirectionY",
+              "required": false,
               "description": "Datepicker open direction on y-axis.",
               "enum": [
                 "auto",
@@ -3165,12 +3178,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "auto"
             },
             {
               "name": "variant",
+              "required": false,
               "description": "The variant of the date picker.",
               "enum": [
                 "button",
@@ -3178,29 +3192,55 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "button"
             },
             {
               "name": "minDate",
+              "required": false,
               "description": "Min date (JavaScript Date object or string formatted in given `dateFormat`).",
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "date|string"
+                "type": "union"
               }
             },
             {
               "name": "maxDate",
+              "required": false,
               "description": "Max date (JavaScript Date object or string formatted in given `dateFormat`).",
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "date|string"
+                "type": "union"
               }
             },
             {
               "name": "dateFormat",
+              "required": false,
               "description": "Date string format.",
+              "enum": [
+                "string",
+                "undefined"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "dateTimeFormat",
+              "required": false,
+              "description": "Same as date format, but used when timepicker is enabled.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3208,6 +3248,7 @@
             },
             {
               "name": "userDateFormat",
+              "required": false,
               "description": "User-friendly date format (it will be shown in UI).",
               "value": {
                 "kind": "expression",
@@ -3217,6 +3258,7 @@
             },
             {
               "name": "size",
+              "required": false,
               "description": "Datepicker size.",
               "enum": [
                 "sm",
@@ -3225,21 +3267,23 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "md"
             },
             {
               "name": "leftIcon",
+              "required": false,
               "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "getDefault<Props>(defaultConfig, UDatePickerRange).leftIcon"
             },
             {
               "name": "rightIcon",
+              "required": false,
               "description": "Right icon name.",
               "value": {
                 "kind": "expression",
@@ -3249,16 +3293,18 @@
             },
             {
               "name": "label",
-              "description": "Label text for an input type.",
+              "required": false,
+              "description": "Datepicker label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "getDefault<Props>(defaultConfig, UDatePickerRange).label"
             },
             {
               "name": "labelAlign",
-              "description": "Label placement.",
+              "required": false,
+              "description": "Datepicker label placement.",
               "enum": [
                 "top",
                 "topInside",
@@ -3268,40 +3314,41 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "topInside"
             },
             {
               "name": "placeholder",
-              "description": "Input placeholder for an input type.",
+              "required": false,
+              "description": "Datepicker placeholder.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "description",
-              "description": "Datepicker description for an input type.",
+              "required": false,
+              "description": "Datepicker description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "error",
-              "description": "Error message for an input type.",
+              "required": false,
+              "description": "Datepicker error message.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "disabled",
-              "description": "Disable component.",
+              "required": false,
+              "description": "Make datepicker disabled.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3310,6 +3357,7 @@
             },
             {
               "name": "id",
+              "required": false,
               "description": "Unique element id.",
               "value": {
                 "kind": "expression",
@@ -3319,15 +3367,17 @@
             },
             {
               "name": "config",
+              "required": false,
               "description": "Component config object.",
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "Config"
               },
-              "default": "{}"
+              "default": "() => ({})"
             },
             {
               "name": "dataTest",
+              "required": false,
               "description": "Data-test attribute for automated testing.",
               "value": {
                 "kind": "expression",
@@ -3393,14 +3443,19 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "SortedLocale"
               }
             },
             {
               "name": "dateFormat",
+              "required": true,
+              "enum": [
+                "string",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "string|undefined"
+                "type": "union"
               }
             },
             {
@@ -3411,12 +3466,38 @@
                 "type": "string"
               }
             },
+            {
+              "name": "maxDate",
+              "required": true,
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
+            {
+              "name": "minDate",
+              "required": true,
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              }
+            },
             {
               "name": "config",
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "Config"
               }
             },
             {
@@ -3424,10 +3505,18 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "UDatePickerRangeInputsAttrs"
               }
             }
           ],
+          "exposes": [
+            {
+              "name": "rangeInputEndRef"
+            },
+            {
+              "name": "rangeInputStartRef"
+            }
+          ],
           "source": {
             "module": "./src/ui.form-date-picker-range/UDatePickerRangeInputs.vue",
             "symbol": "default"
@@ -3442,44 +3531,61 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "SortedLocale"
               }
             },
             {
-              "name": "isPeriod",
+              "name": "dateFormat",
               "required": true,
+              "enum": [
+                "string",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "union"
               }
             },
             {
-              "name": "customRangeButton",
+              "name": "isPeriod",
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "IsPeriod"
               }
             },
             {
-              "name": "dateFormat",
+              "name": "maxDate",
+              "required": true,
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "string|undefined"
+                "type": "union"
               }
             },
             {
               "name": "minDate",
+              "required": true,
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "string|date"
+                "type": "union"
               }
             },
             {
-              "name": "maxDate",
+              "name": "customRangeButton",
+              "required": true,
               "value": {
                 "kind": "expression",
-                "type": "string|date"
+                "type": "CustomRangeButton"
               }
             },
             {
@@ -3487,7 +3593,7 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "Config"
               }
             },
             {
@@ -3495,7 +3601,7 @@
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "UDatePickerRangePeriodMenuAttrs"
               }
             }
           ],

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

@@ -1,63 +0,0 @@
-import { computed } from "vue";
-import { useLocale as useGlobalLocale } from "../composables/useLocale.ts";
-
-import { merge } from "lodash-es";
-import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
-
-import { LOCALE_TYPE } from "../ui.form-calendar/constants.ts";
-import { UDatePickerRange } from "./constants.js";
-import defaultConfig from "./config.js";
-
-export function useLocale(props) {
-  const { tm } = useGlobalLocale();
-
-  const i18nGlobal = tm(UDatePickerRange);
-
-  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
-
-  const locale = computed(() => {
-    const { months, weekdays } = currentLocale.value;
-
-    // formatted locale
-    return {
-      ...currentLocale.value,
-      months: {
-        shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
-        longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
-      },
-      weekdays: {
-        shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
-        longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
-      },
-    };
-  });
-
-  const userFormatLocale = computed(() => {
-    const { months, weekdays } = currentLocale.value;
-
-    const monthsLonghand =
-      Boolean(props.config.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
-        ? months.userFormat
-        : months.longhand;
-
-    const weekdaysLonghand =
-      Boolean(props.config.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
-        ? weekdays.userFormat
-        : weekdays.longhand;
-
-    // formatted locale
-    return {
-      ...currentLocale,
-      months: {
-        shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
-        longhand: getSortedLocale(monthsLonghand, LOCALE_TYPE.month),
-      },
-      weekdays: {
-        shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
-        longhand: getSortedLocale(weekdaysLonghand, LOCALE_TYPE.day),
-      },
-    };
-  });
-
-  return { userFormatLocale, locale };
-}