vueless 0.0.568 → 0.0.570

package/package.json

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

package/types.ts

@@ -46,6 +46,13 @@ import URadioGroupConfig from "./ui.form-radio-group/config.ts";
 import USwitchConfig from "./ui.form-switch/config.ts";
 import UTextareaConfig from "./ui.form-textarea/config.ts";
 import ULabelConfig from "./ui.form-label/config.ts";
+import UColorPickerConfig from "./ui.form-color-picker/config.ts";
+import UInputConfig from "./ui.form-input/config.ts";
+import UInputNumberConfig from "./ui.form-input-number/config.ts";
+import UInputRatingConfig from "./ui.form-input-rating/config.ts";
+import UInputSearchConfig from "./ui.form-input-search/config.ts";
+import UInputFileConfig from "./ui.form-input-file/config.ts";
+import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
@@ -209,6 +216,13 @@ export interface Components {
   USwitch?: Partial<typeof USwitchConfig>;
   UTextarea?: Partial<typeof UTextareaConfig>;
   ULabel?: Partial<typeof ULabelConfig>;
+  UColorPicker?: Partial<typeof UColorPickerConfig>;
+  UInput?: Partial<typeof UInputConfig>;
+  UInputNumber?: Partial<typeof UInputNumberConfig>;
+  UInputRating?: Partial<typeof UInputRatingConfig>;
+  UInputSearch?: Partial<typeof UInputSearchConfig>;
+  UInputFile?: Partial<typeof UInputFileConfig>;
+  UInputMoney?: Partial<typeof UInputMoneyConfig>;
   UDataList?: Partial<typeof UDataListConfig>;
 }
 

package/ui.container-accordion/UAccordion.vue

@@ -9,7 +9,7 @@ import { UAccordion } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 
-import type { UAccordionProps } from "./types.ts";
+import type { UAccordionProps, DividerSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -52,7 +52,7 @@ const dividerSize = computed(() => {
     lg: "xl",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as DividerSize;
 });
 
 function onClickItem() {

package/ui.container-accordion/types.ts

@@ -2,6 +2,7 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type DividerSize = "md" | "lg" | "xl";
 export interface UAccordionProps {
   /**
    * Accordion title.

package/ui.container-modal/UModal.vue

@@ -16,9 +16,6 @@ import useAttrs from "./useAttrs.ts";
 import type { UModalProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
-const slots = useSlots();
-
-const wrapperRef = ref(null);
 
 const props = withDefaults(defineProps<UModalProps>(), {
   size: getDefault<UModalProps>(defaultConfig, UModal).size,
@@ -29,6 +26,7 @@ const props = withDefaults(defineProps<UModalProps>(), {
   noDivider: getDefault<UModalProps>(defaultConfig, UModal).noDivider,
   mobileStickBottom: getDefault<UModalProps>(defaultConfig, UModal).mobileStickBottom,
   dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -69,6 +67,10 @@ const {
   footerRightAttrs,
 } = useAttrs(props);
 
+const slots = useSlots();
+
+const wrapperRef = ref<HTMLElement | null>(null);
+
 const isShownModal = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -94,14 +96,19 @@ const isExistFooter = computed(() => {
 
 watch(() => isShownModal.value, preventOverlayFromScrolling);
 
-function preventOverlayFromScrolling(newValue) {
+function preventOverlayFromScrolling(newValue: boolean) {
   // focus wrapper to be able to close modal on esc
   setTimeout(() => wrapperRef.value?.focus(), 0);
 
   if (newValue) {
     document.body.style.overflow = "hidden";
   } else {
-    document.getElementById(`${elementId}`).style.overflow = "hidden";
+    const element = document.getElementById(`${elementId}`);
+
+    if (element) {
+      element.style.overflow = "hidden";
+    }
+
     document.body.style.overflow = "auto";
   }
 }
@@ -166,7 +173,7 @@ function closeModal() {
                         internal
                         size="xs"
                         color="gray"
-                        :name="config.defaults.backIcon"
+                        :name="config.defaults?.backIcon"
                         v-bind="backLinkIconAttrs"
                       />
                     </template>
@@ -191,12 +198,12 @@ function closeModal() {
                 @slot Use it to add something instead of the close button.
                 @binding {string} icon-name
               -->
-              <slot name="close-button" :icon-name="config.defaults.closeIcon">
+              <slot name="close-button" :icon-name="config.defaults?.closeIcon">
                 <UIcon
                   internal
                   interactive
                   size="sm"
-                  :name="config.defaults.closeIcon"
+                  :name="config.defaults?.closeIcon"
                   v-bind="closeIconAttrs"
                   :data-test="`${dataTest}-close`"
                   @click="onClickCloseModal"

package/ui.container-page/UPage.vue

@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<UPageProps>(), {
   gray: getDefault<UPageProps>(defaultConfig, UPage).gray,
   fixedRounding: getDefault<UPageProps>(defaultConfig, UPage).fixedRounding,
   dataTest: "",
+  config: () => ({}),
 });
 
 const { isMobileBreakpoint } = useBreakpoint();
@@ -68,11 +69,14 @@ const isShownArrowButton = computed(() => {
 });
 
 onMounted(() => {
-  const classes = props.gray
-    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
-    : [];
-
-  document.querySelector("body").classList.add(...classes);
+  const classes =
+    props.gray && config.value?.htmlBody
+      ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
+      : "";
+
+  if (document.body) {
+    document.body.classList.add(...classes);
+  }
 });
 </script>
 
@@ -104,7 +108,7 @@ onMounted(() => {
                     internal
                     size="2xs"
                     color="gray"
-                    :name="config.defaults.backIcon"
+                    :name="config.defaults?.backIcon"
                     v-bind="backLinkIconAttrs"
                   />
                 </template>

package/ui.form-calendar/UCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
-import { computed, ref, watch, useTemplateRef } from "vue";
+import { computed, ref, watch, useTemplateRef, onMounted } from "vue";
 import { merge } from "lodash-es";
 
 import UButton from "../ui.button/UButton.vue";
@@ -195,7 +195,7 @@ const userFormatLocale = computed(() => {
 
   // formatted locale
   return {
-    ...currentLocale,
+    ...currentLocale.value,
     months: {
       shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
       longhand: getSortedLocale(monthsLonghand, LocaleType.Month),
@@ -333,31 +333,19 @@ watch(
   },
 );
 
-let isInit = false;
-
-const unwatchInit = watch(
-  () => selectedDate.value,
-  () => {
-    if (isInit) unwatchInit();
-
-    if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
-      hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
-      minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
-      secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
+onMounted(() => {
+  if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
+    hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
+    minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
+    secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
 
-      emit("userDateChange", userFormattedDate.value);
-
-      isInit = true;
-    }
-
-    if (selectedDate.value) {
-      emit("userDateChange", userFormattedDate.value);
+    emit("userDateChange", userFormattedDate.value);
+  }
 
-      isInit = true;
-    }
-  },
-  { deep: true, immediate: true },
-);
+  if (selectedDate.value) {
+    emit("userDateChange", userFormattedDate.value);
+  }
+});
 
 function getCurrentValueType(value: DateValue): DateValue {
   if (props.range && value === null) {
@@ -543,6 +531,7 @@ function enterKeyHandler() {
     activeMonth.value = null;
 
     emit("input", localValue.value);
+    emit("submit");
   }
 
   if (isCurrentView.value.month) currentView.value = View.Day;

package/ui.form-calendar/config.ts

@@ -70,6 +70,9 @@ export default /*tw*/ {
   timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
+    today: "Today,",
+    yesterday: "Yesterday,",
+    tomorrow: "Tomorrow,",
     weekdays: {
       shorthand: {
         sunday: "Sun",

package/ui.form-calendar/constants.ts

@@ -4,8 +4,6 @@
  */
 export const UCalendar = "UCalendar";
 
-export const STANDARD_USER_FORMAT = "j F, Y";
-
 export const YEARS_PER_VIEW = 12;
 export const MONTHS_PER_VIEW = 12;
 export const START_WEEK = 1;

package/ui.form-calendar/useAttrs.ts

@@ -1,6 +1,6 @@
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
 import type { UseAttrs } from "../types.ts";
 import type { UCalendarProps, Config } from "./types.ts";

package/ui.form-calendar/utilCalendar.ts

@@ -49,7 +49,7 @@ export function isNumeric(char: string | number) {
   return /^\d+$/.test(String(char));
 }
 
-export function parseDate<TLocale>(
+export function parseDate<TLocale extends DateLocale>(
   date: Date | string | null,
   format: string = "Y-m-d H:i:S",
   locale: TLocale,
@@ -96,7 +96,7 @@ export function parseDate<TLocale>(
   return parsedDate;
 }
 
-export function parseStringDate<TLocale>(
+export function parseStringDate<TLocale extends DateLocale>(
   dateString: string,
   format = "Y-m-d H:i:S",
   locale: TLocale,
@@ -108,6 +108,14 @@ export function parseStringDate<TLocale>(
   } else {
     let parsedDate = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0);
 
+    const isRelativeDay = [locale.tomorrow, locale.today, locale.tomorrow].some((word) => {
+      return dateString.toLowerCase().includes(word.toLowerCase());
+    });
+
+    if (!isRelativeDay) {
+      format = format.replaceAll("r", "").trim();
+    }
+
     let matched;
     const operations: Operation[] = [];
 
@@ -130,20 +138,19 @@ export function parseStringDate<TLocale>(
       } else if (!isBackSlash) {
         regexStr += ".";
       }
+    }
 
-      operations.forEach((op) => {
-        const { fn } = op;
-        const { val } = op;
+    operations.forEach((operation) => {
+      const { fn, val } = operation;
 
-        parsedDate = (fn(parsedDate, String(val), locale as DateLocale) || parsedDate) as Date;
-      });
-    }
+      parsedDate = (fn(parsedDate, String(val), locale as DateLocale) || parsedDate) as Date;
+    });
 
     return matched ? parsedDate : undefined;
   }
 }
 
-export function dateIsOutOfRange<TLocale>(
+export function dateIsOutOfRange<TLocale extends DateLocale>(
   date: Date,
   min: Date | string | undefined,
   max: Date | string | undefined,

package/ui.form-calendar/utilFormatting.ts

@@ -1,3 +1,5 @@
+import { addDays, isSameDay } from "./utilDate";
+
 export interface DateLocale {
   weekdays: {
     shorthand: string[];
@@ -9,6 +11,9 @@ export interface DateLocale {
     longhand: string[];
     userFormat?: unknown;
   };
+  today: string;
+  tomorrow: string;
+  yesterday: string;
 }
 
 const pad = (number: number, length = 2) => `000${number}`.slice(length * -1);
@@ -21,27 +26,41 @@ export const monthToStr = (monthNumber: number, shorthand: boolean, locale: Date
 
 export const revFormat = {
   D: doNothing,
-  F(dateObj: Date, monthName: string, locale: DateLocale) {
-    dateObj.setMonth(locale.months.longhand.indexOf(monthName));
+
+  F: (dateObj: Date, monthName: string, locale: DateLocale) => {
+    const monthIndex = locale.months.longhand.findIndex((longMonth) => {
+      return longMonth.toLowerCase().trim() === monthName.toLowerCase().trim();
+    });
+
+    dateObj.setMonth(monthIndex);
   },
+
   G: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   H: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   J: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
-  M(dateObj: Date, shortMonth: string, locale: DateLocale) {
-    dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
+
+  M: (dateObj: Date, monthName: string, locale: DateLocale) => {
+    const monthIndex = locale.months.shorthand.findIndex((shortMonth) => {
+      return shortMonth.toLowerCase().trim() === monthName.toLowerCase().trim();
+    });
+
+    dateObj.setMonth(monthIndex);
   },
   S: (dateObj: Date, seconds: number | string) => {
     dateObj.setSeconds(parseFloat(String(seconds)));
   },
+
   U: (_: unknown, unixSeconds: string | number) => new Date(parseFloat(String(unixSeconds)) * 1000),
 
-  W(dateObj: Date, weekNum: number | string) {
+  W: (dateObj: Date, weekNum: number | string) => {
     const weekNumber = parseInt(String(weekNum), 10);
     const date = new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
 
@@ -49,6 +68,7 @@ export const revFormat = {
 
     return date;
   },
+
   Y: (dateObj: Date, year: number | string) => {
     dateObj.setFullYear(parseFloat(String(year)));
   },
@@ -57,31 +77,42 @@ export const revFormat = {
   d: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
+
   h: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   i: (dateObj: Date, minutes: number | string) => {
     dateObj.setMinutes(parseFloat(String(minutes)));
   },
+
   j: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
+
   l: doNothing,
+
   m: (dateObj: Date, month: number | string) => {
     dateObj.setMonth(parseFloat(String(month)) - 1);
   },
+
   n: (dateObj: Date, month: number | string) => {
     dateObj.setMonth(parseFloat(String(month)) - 1);
   },
+
   s: (dateObj: Date, seconds: number | string) => {
     dateObj.setSeconds(parseFloat(String(seconds)));
   },
+
   u: (_: unknown, unixMillSeconds: number | string) =>
     new Date(parseFloat(String(unixMillSeconds))),
   w: doNothing,
+
   y: (dateObj: Date, year: number | string) => {
     dateObj.setFullYear(2000 + parseFloat(String(year)));
   },
+
+  r: doNothing,
 };
 
 export const formats = {
@@ -89,17 +120,17 @@ export const formats = {
   Z: (date: Date) => date.toISOString(),
 
   // weekday name, short, e.g. Thu
-  D(date: Date, locale: DateLocale) {
+  D: (date: Date, locale: DateLocale) => {
     return locale.weekdays.shorthand[formats.w(date)];
   },
 
   // full month name e.g. January
-  F(date: Date, locale: DateLocale) {
+  F: (date: Date, locale: DateLocale) => {
     return monthToStr(formats.n(date) - 1, false, locale);
   },
 
   // padded hour 1-12
-  G(date: Date) {
+  G: (date: Date) => {
     return pad(formats.h(date));
   },
 
@@ -107,7 +138,7 @@ export const formats = {
   H: (date: Date) => pad(date.getHours()),
 
   // shorthand month e.g. Jan, Sep, Oct, etc
-  M(date: Date, locale: DateLocale) {
+  M: (date: Date, locale: DateLocale) => {
     return monthToStr(date.getMonth(), true, locale);
   },
 
@@ -117,7 +148,7 @@ export const formats = {
   // unix timestamp
   U: (date: Date) => date.getTime() / 1000,
 
-  W(date: Date) {
+  W: (date: Date) => {
     // return options.getWeek(date);
     const localDate = new Date(date.getTime());
 
@@ -154,7 +185,7 @@ export const formats = {
   j: (date: Date) => date.getDate(),
 
   // weekday name, full, e.g. Thursday
-  l(date: Date, locale: DateLocale) {
+  l: (date: Date, locale: DateLocale) => {
     return locale.weekdays.longhand[date.getDay()];
   },
 
@@ -175,4 +206,25 @@ export const formats = {
 
   // last two digits of year e.g. 16 for 2016
   y: (date: Date) => String(date.getFullYear()).substring(2),
+
+  r: (date: Date, locale: DateLocale) => {
+    const today = new Date();
+    const isToday = isSameDay(today, date);
+    const isYesterday = isSameDay(addDays(today, -1), date);
+    const isTomorrow = isSameDay(addDays(today, 1), date);
+
+    if (isToday) {
+      return `${locale.today}`;
+    }
+
+    if (isYesterday) {
+      return `${locale.yesterday}`;
+    }
+
+    if (isTomorrow) {
+      return `${locale.tomorrow}`;
+    }
+
+    return "";
+  },
 };

package/ui.form-checkbox/types.ts

@@ -6,6 +6,13 @@ export type Config = Partial<typeof defaultConfig>;
 
 export type IconSize = "2xs" | "xs" | "sm";
 
+export interface UCheckboxOption {
+  value?: unknown;
+  label?: string;
+  icon?: string;
+  description?: string;
+}
+
 export interface UCheckboxProps {
   /**
    * Checkbox value.

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -79,7 +79,7 @@ function onChangeCheckedItems() {
       <slot>
         <UCheckbox
           v-for="(option, index) in options"
-          :key="option.value"
+          :key="option.id"
           :model-value="modelValue"
           :value="option.value"
           :true-value="option.trueValue"

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -9,6 +9,7 @@ import { UCheckboxMultiState } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
 
 import type { UCheckboxMultiStateProps } from "./types.ts";
+import type { UCheckboxOption } from "../ui.form-checkbox/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,7 +32,9 @@ const emit = defineEmits([
 const index = ref(0);
 const isChecked = ref(false);
 
-const selected = computed(() => props?.options?.[index.value] || { icon: undefined });
+const selected = computed<UCheckboxOption>(() => {
+  return props.options?.[index.value] || { icon: undefined };
+});
 
 const { multiStateCheckboxAttrs } = useAttrs(props, { selected });