vueless 0.0.487 → 0.0.489

package/adatper.locale/locales/en.ts

@@ -4,7 +4,7 @@ import inputFileConfig from "../../ui.form-input-file/config.js";
 import dropdownListConfig from "../../ui.dropdown-list/config.js";
 import modalConfirmConfig from "../../ui.container-modal-confirm/config.js";
 import tableConfig from "../../ui.data-table/config.js";
-import calendarConfig from "../../ui.form-calendar/config.js";
+import calendarConfig from "../../ui.form-calendar/config.ts";
 import datepickerConfig from "../../ui.form-date-picker/config.js";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/config.js";
 import dataListConfig from "../../ui.data-list/config.js";

package/package.json

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

package/types.ts

@@ -5,6 +5,7 @@ import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
+import UDatePickerConfig from "./ui.form-date-picker/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -115,6 +116,7 @@ export interface Components {
   UButton?: Partial<typeof UButtonDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
   UCalendar?: Partial<typeof UCalendarDefaultConfig>;
+  UDatePicker?: Partial<typeof UDatePickerConfig>;
 }
 
 export interface Directives {

package/ui.form-calendar/UCalendar.vue

@@ -110,7 +110,7 @@ const {
   timepickerSubmitButtonAttrs,
 } = useAttrs(props);
 
-const wrapperRef = useTemplateRef<HTMLInputElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const hoursRef = useTemplateRef<HTMLInputElement>("hours-input");
 const minutesRef = useTemplateRef<HTMLInputElement>("minutes-input");
 const secondsRef = useTemplateRef<HTMLInputElement>("seconds-input");

package/ui.form-calendar/constants.ts

@@ -55,12 +55,6 @@ export const LOCALE_TYPE = {
   month: "month",
 };
 
-export const VIEW = {
-  day: "day",
-  month: "month",
-  year: "year",
-};
-
 export const ARROW_KEYS: string[] = [
   KeyCode.ArrowLeft,
   KeyCode.ArrowUp,

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

@@ -1,90 +1,16 @@
-<template>
-  <div v-bind="wrapperAttrs" ref="wrapperRef">
-    <UInput
-      :id="elementId"
-      :key="isShownCalendar"
-      v-model="userFormatDate"
-      :label-align="labelAlign"
-      :label="label"
-      :placeholder="placeholder"
-      :error="error"
-      :description="description"
-      readonly
-      :disabled="disabled"
-      :size="size"
-      :left-icon="leftIcon"
-      :right-icon="rightIcon"
-      v-bind="isShownCalendar ? activeInputAttrs : inputAttrs"
-      @focus="activate"
-    >
-      <template #left>
-        <!-- @slot Use it add something before the date. -->
-        <slot name="left" />
-      </template>
-
-      <template #left-icon="{ iconName, iconSize }">
-        <!--
-          @slot Use it add an icon before the date.
-          @binding {string} icon-name
-          @binding {string} icon-nize
-        -->
-        <slot name="left-icon" :icon-name="iconName" :icon-size="iconSize" />
-      </template>
-
-      <template #right-icon="{ iconName, iconSize }">
-        <!--
-          @slot Use it add an icon after the date.
-          @binding {string} icon-name
-          @binding {string} icon-size
-        -->
-        <slot name="right-icon" :icon-name="iconName" :icon-size="iconSize">
-          <UIcon :name="iconName" :size="iconSize" color="gray" />
-        </slot>
-      </template>
-
-      <template #right>
-        <!-- @slot Use it add something after the date. -->
-        <slot name="right" />
-      </template>
-    </UInput>
-
-    <Transition v-bind="config.calendarTransition">
-      <UCalendar
-        v-show="isShownCalendar"
-        ref="calendarRef"
-        v-model="localValue"
-        v-model:view="customView"
-        tabindex="-1"
-        :timepicker="timepicker"
-        :date-format="dateFormat"
-        :date-time-format="dateTimeFormat"
-        :user-date-format="userDateFormat"
-        :user-date-time-format="userDateTimeFormat"
-        :max-date="maxDate"
-        :min-date="minDate"
-        v-bind="calendarAttrs"
-        @keydown.esc="deactivate"
-        @user-date-change="onUserFormatDateChange"
-        @input="onInput"
-        @blur="onBlur"
-        @submit="onSubmit"
-      />
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { computed, nextTick, ref, useId } from "vue";
+<script setup lang="ts">
+import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
-import { VIEW, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
+import { View, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
 
 import { getDefault } from "../utils/ui.ts";
 
-import { addDays, isSameDay } from "../ui.form-calendar/utilDate.ts";
+import { addDays, isSameDay } from "../ui.form-calendar/utilDate.js";
+import { parseDate } from "../ui.form-calendar/utilCalendar.ts";
 
 import useAttrs from "./useAttrs.js";
 import { useLocale } from "../composables/useLocale.ts";
@@ -93,188 +19,25 @@ import { useAutoPosition } from "../composables/useAutoPosition.ts";
 import defaultConfig from "./config.js";
 import { UDatePicker } from "./constants.js";
 
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Datepicker value (JavaScript Date object or string formatted in given `dateFormat`).
-   */
-  modelValue: {
-    type: [Date, String],
-    default: null,
-  },
-
-  /**
-   * Datepicker label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker label placement.
-   * @values top, topInside, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).labelAlign,
-  },
-
-  /**
-   * Datepicker placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).size,
-  },
-
-  /**
-   * Datepicker open direction on x-axis.
-   * @values auto, left, right
-   */
-  openDirectionX: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).openDirectionX,
-  },
-
-  /**
-   * Datepicker open direction on y-axis.
-   * @values auto, top, bottom
-   */
-  openDirectionY: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).openDirectionY,
-  },
-
-  /**
-   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
-   */
-  minDate: {
-    type: [Date, String],
-    default: getDefault(defaultConfig, UDatePicker).minDate,
-  },
-
-  /**
-   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
-   */
-  maxDate: {
-    type: [Date, String],
-    default: getDefault(defaultConfig, UDatePicker).maxDate,
-  },
-
-  /**
-   * Date string format.
-   */
-  dateFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).dateFormat,
-  },
-
-  /**
-   * Same as date format, but used when timepicker is enabled.
-   */
-  dateTimeFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).dateTimeFormat,
-  },
-
-  /**
-   * User-friendly date format (it will be shown in UI).
-   */
-  userDateFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).userDateFormat,
-  },
+import type { UDatePickerProps } from "./types.ts";
 
-  /**
-   * Same as user format, but used when timepicker is enabled.
-   */
-  userDateTimeFormat: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).userDateTimeFormat,
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: getDefault(defaultConfig, UDatePicker).rightIcon,
-  },
-
-  /**
-   * Make datepicker disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDatePicker).disabled,
-  },
-
-  /**
-   * Show timepicker.
-   */
-  timepicker: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDatePicker).timepicker,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UDatePickerProps>(), {
+  labelAlign: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).labelAlign,
+  size: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).size,
+  openDirectionX: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).openDirectionX,
+  openDirectionY: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).openDirectionY,
+  timepicker: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).timepicker,
+  dateFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).dateFormat,
+  dateTimeFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).dateTimeFormat,
+  userDateFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).userDateFormat,
+  userDateTimeFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).userDateTimeFormat,
+  leftIcon: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).leftIcon,
+  rightIcon: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).rightIcon,
+  disabled: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).disabled,
+  dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -298,12 +61,12 @@ const i18nGlobal = tm(UDatePicker);
 const isShownCalendar = ref(false);
 const userFormatDate = ref("");
 const formattedDate = ref("");
-const customView = ref(VIEW.day);
+const customView = ref(View.Day);
 
-const wrapperRef = ref(null);
-const calendarRef = ref(null);
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const calendarRef = useTemplateRef<InstanceType<typeof UCalendar>>("calendar");
 
-const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
+const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef || null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAutoPosition(
   wrapperRef,
@@ -322,7 +85,6 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 const elementId = props.id || useId();
 
 const { config, inputAttrs, activeInputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
-  isShownCalendar,
   isTop,
   isRight,
 });
@@ -334,17 +96,17 @@ function activate() {
     adjustPositionY();
     adjustPositionX();
 
-    calendarRef.value.wrapperRef.focus();
+    calendarRef.value?.wrapperRef?.focus();
   });
 }
 
 function deactivate() {
   isShownCalendar.value = false;
 
-  customView.value = VIEW.day;
+  customView.value = View.Day;
 }
 
-function onUserFormatDateChange(value) {
+function onUserFormatDateChange(value: string) {
   userFormatDate.value = formatUserDate(value) || "";
 }
 
@@ -352,13 +114,13 @@ function onSubmit() {
   deactivate();
 }
 
-function onBlur(event) {
+function onBlur(event: FocusEvent) {
   const { relatedTarget } = event;
 
-  if (!calendarRef?.value?.wrapperRef?.contains(relatedTarget)) deactivate();
+  if (!calendarRef?.value?.wrapperRef?.contains(relatedTarget as HTMLElement)) deactivate();
 }
 
-function formatUserDate(data) {
+function formatUserDate(data: string) {
   if (props.userDateFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
 
   let prefix = "";
@@ -367,9 +129,10 @@ function formatUserDate(data) {
 
   const today = new Date();
 
-  const isToday = isSameDay(today, localValue.value);
-  const isYesterday = isSameDay(addDays(today, -1), localValue.value);
-  const isTomorrow = isSameDay(addDays(today, 1), localValue.value);
+  const parsedLocalDate = parseDate(localValue.value, props.dateFormat, currentLocale.value);
+  const isToday = parsedLocalDate && isSameDay(today, parsedLocalDate);
+  const isYesterday = parsedLocalDate && isSameDay(addDays(today, -1), parsedLocalDate);
+  const isTomorrow = parsedLocalDate && isSameDay(addDays(today, 1), parsedLocalDate);
 
   if (isToday) {
     prefix = currentLocale.value.today;
@@ -413,3 +176,78 @@ defineExpose({
   formattedDate,
 });
 </script>
+
+<template>
+  <div v-bind="wrapperAttrs" ref="wrapper">
+    <UInput
+      :id="elementId"
+      :key="String(isShownCalendar)"
+      v-model="userFormatDate"
+      :label-align="labelAlign"
+      :label="label"
+      :placeholder="placeholder"
+      :error="error"
+      :description="description"
+      readonly
+      :disabled="disabled"
+      :size="size"
+      :left-icon="leftIcon"
+      :right-icon="rightIcon"
+      v-bind="isShownCalendar ? activeInputAttrs : inputAttrs"
+      @focus="activate"
+    >
+      <template #left>
+        <!-- @slot Use it add something before the date. -->
+        <slot name="left" />
+      </template>
+
+      <template #left-icon="{ iconName, iconSize }">
+        <!--
+          @slot Use it add an icon before the date.
+          @binding {string} icon-name
+          @binding {string} icon-nize
+        -->
+        <slot name="left-icon" :icon-name="iconName" :icon-size="iconSize" />
+      </template>
+
+      <template #right-icon="{ iconName, iconSize }">
+        <!--
+          @slot Use it add an icon after the date.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="right-icon" :icon-name="iconName" :icon-size="iconSize">
+          <UIcon :name="iconName" :size="iconSize" color="gray" />
+        </slot>
+      </template>
+
+      <template #right>
+        <!-- @slot Use it add something after the date. -->
+        <slot name="right" />
+      </template>
+    </UInput>
+
+    <Transition v-bind="config.calendarTransition">
+      <UCalendar
+        v-show="isShownCalendar"
+        ref="calendarRef"
+        v-model="localValue"
+        v-model:view="customView"
+        tabindex="-1"
+        :timepicker="timepicker"
+        :date-format="dateFormat"
+        :date-time-format="dateTimeFormat"
+        :user-date-format="userDateFormat"
+        :user-date-time-format="userDateTimeFormat"
+        :max-date="maxDate"
+        :min-date="minDate"
+        v-bind="calendarAttrs"
+        @keydown.esc="deactivate"
+        @user-date-change="onUserFormatDateChange"
+        @input="onInput"
+        @blur="onBlur"
+        @submit="onSubmit"
+      />
+    </Transition>
+  </div>
+</template>

package/ui.form-date-picker/storybook/Docs.mdx

@@ -0,0 +1,53 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Formatting tokens
+Each character in the table below can be used in `dateFormat` / `dateTimeFormat` and `userDateFormat` / `userDateTimeFormat` options
+to achieve the format you need.
+
+<Markdown>
+{`
+| Token | Description                                               | Example                                                       |
+| ----- | --------------------------------------------------------- | ------------------------------------------------------------- |
+| d     | Day of the month, 2 digits with leading zeros             | 01 to 31                                                      |
+| D     | A textual representation of a day                         | Mon through Sun                                               |
+| l     | A full textual representation of the day of the week      | Sunday through Saturday                                       |
+| j     | Day of the month without leading zeros                    | 1 to 31                                                       |
+| J     | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st                                             |
+| w     | Numeric representation of the day of the week             | 0 (for Sunday) through 6 (for Saturday)                       |
+| W     | Numeric representation of the week                        | 0 (first week of the year) through 52 (last week of the year) |
+| F     | A full textual representation of a month                  | January through December                                      |
+| m     | Numeric representation of a month, with leading zero      | 01 through 12                                                 |
+| n     | Numeric representation of a month, without leading zeros  | 1 through 12                                                  |
+| M     | A short textual representation of a month                 | Jan through Dec                                               |
+| U     | A short textual representation of a month                 | 1413704993                                                    |
+| y     | A two-digit representation of a year                      | 99 or 03                                                      |
+| Y     | A full numeric representation of a year, 4 digits         | 1999 or 2003                                                  |
+| Z     | ISO Date format                                           | 2017-03-04T01:23:43.000Z                                      |
+| H     | Hours (24 hours)                                          | 00 to 23                                                      |
+| h     | Hours                                                     | 1 to 12                                                       |
+| G     | Hours, 2 digits with leading zeros                        | 1 to 12                                                       |
+| i     | Minutes                                                   | 00 to 59                                                      |
+| S     | Seconds, 2 digits                                         | 00 to 59                                                      |
+| s     | Seconds                                                   | 0, 1 to 59                                                    |
+`}
+</Markdown>
+
+## Escaping Formatting Tokens
+You may escape formatting tokens using `\\`.
+
+<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/ui.form-date-picker/storybook/stories.ts

@@ -0,0 +1,200 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+
+import type { UDatePickerProps } from "../types.ts";
+
+interface DefaultUDatePickerArgs extends UDatePickerProps {
+  slotTemplate?: string;
+}
+
+interface EnumUDatePickerArgs extends UDatePickerProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+/**
+ * The `UDatePicker` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-date-picker)
+ */
+export default {
+  id: "3170",
+  title: "Form Inputs & Controls / Date Picker",
+  component: UDatePicker,
+  args: {
+    label: "Label",
+    modelValue: null,
+  },
+  argTypes: {
+    ...getArgTypes(UDatePicker.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "480px",
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, UIcon },
+  setup() {
+    const slots = getSlotNames(UDatePicker.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDatePicker open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UDatePicker>
+
+    <div class="mt-4">
+      {{ args.modelValue }}
+    </div>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<EnumUDatePickerArgs> = (
+  args: EnumUDatePickerArgs,
+  { argTypes },
+) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDatePicker
+        v-for="(option, index) in options"
+        open-direction-y="bottom"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
+  `,
+});
+
+const OpenDirectionTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePicker
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Left"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Right"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Bottom Left"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Bottom Right"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = { modelValue: new Date() };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", label: "" };
+
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = {};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "some description" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "some error" };
+
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "some placeholder" };
+
+export const DateFormat = DefaultTemplate.bind({});
+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),
+  userDateFormat: "j F, Y - H:i:S",
+};
+
+export const MinMax = DefaultTemplate.bind({});
+MinMax.args = {
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  modelValue: new Date(2022, 2, 24),
+};
+
+export const LeftIcon = DefaultTemplate.bind({});
+LeftIcon.args = {
+  leftIcon: "star",
+};
+
+export const RightIcon = DefaultTemplate.bind({});
+RightIcon.args = {
+  rightIcon: "star",
+};
+
+export const LeftIconSlot = DefaultTemplate.bind({});
+LeftIconSlot.args = {
+  slotTemplate: `
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const RightIconSlot = DefaultTemplate.bind({});
+RightIconSlot.args = {
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};

package/ui.form-date-picker/types.ts

@@ -0,0 +1,119 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDatePickerProps {
+  /**
+   * Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).
+   */
+  modelValue: Date | string;
+
+  /**
+   * Datepicker label.
+   */
+  label?: string;
+
+  /**
+   * Datepicker label placement.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Datepicker placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Datepicker description.
+   */
+  description?: string;
+
+  /**
+   * Datepicker error message.
+   */
+  error?: string;
+
+  /**
+   * Datepicker size.
+   * @values sm, md, lg
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
+   */
+  openDirectionX?: "auto" | "left" | "right";
+
+  /**
+   * Datepicker open direction on y-axis.
+   * @values auto, top, bottom
+   */
+  openDirectionY?: "auto" | "top" | "bottom";
+
+  /**
+   * Show timepicker.
+   */
+  timepicker?: boolean;
+
+  /**
+   * Date string format.
+   */
+  dateFormat?: string | undefined;
+
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat?: string;
+
+  /**
+   * User-friendly date format (it will be shown in UI).
+   */
+  userDateFormat?: string;
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat?: string;
+
+  /**
+   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
+   */
+  minDate?: string | Date | undefined;
+
+  /**
+   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
+   */
+  maxDate?: string | Date | undefined;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Make datepicker disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-date-picker/useAttrs.ts

@@ -0,0 +1,47 @@
+import { computed, watchEffect, type Ref } from "vue";
+import { merge } from "lodash-es";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+import { Direction } from "../composables/useAutoPosition.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UDatePickerProps, Config } from "./types.ts";
+import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
+
+interface DatePickerState {
+  isTop: Ref<boolean>;
+  isRight: Ref<boolean>;
+}
+
+export default function useAttrs(
+  props: UDatePickerProps,
+  { isTop, isRight }: DatePickerState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
+    openDirectionX: isRight.value ? Direction.Right : Direction.Left,
+    error: Boolean(props.error),
+    description: Boolean(props.description),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
+
+  /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
+  watchEffect(() => {
+    const calendarAttrs = keysAttrs.calendarAttrs as Ref<{ config: UCalendarConfig }>;
+    const calendarConfig = calendarAttrs.value.config || {};
+
+    if (!calendarConfig.i18n || props.config?.i18n) {
+      calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
+    }
+  });
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

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

@@ -4,7 +4,7 @@ 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.js";
+import { LOCALE_TYPE } from "../ui.form-calendar/constants.ts";
 import { UDatePickerRange } from "./constants.js";
 import defaultConfig from "./config.js";
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.487",
+  "version": "0.0.489",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2771,24 +2771,29 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Datepicker value (JavaScript Date object or string formatted in given `dateFormat`).",
+              "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": "date|string"
-              },
-              "default": "null"
+                "type": "union"
+              }
             },
             {
               "name": "label",
+              "required": false,
               "description": "Datepicker label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "labelAlign",
+              "required": false,
               "description": "Datepicker label placement.",
               "enum": [
                 "top",
@@ -2799,39 +2804,40 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "topInside"
             },
             {
               "name": "placeholder",
+              "required": false,
               "description": "Datepicker placeholder.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "description",
+              "required": false,
               "description": "Datepicker description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "error",
+              "required": false,
               "description": "Datepicker error message.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "size",
+              "required": false,
               "description": "Datepicker size.",
               "enum": [
                 "sm",
@@ -2840,12 +2846,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "md"
             },
             {
               "name": "openDirectionX",
+              "required": false,
               "description": "Datepicker open direction on x-axis.",
               "enum": [
                 "auto",
@@ -2854,12 +2861,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "auto"
             },
             {
               "name": "openDirectionY",
+              "required": false,
               "description": "Datepicker open direction on y-axis.",
               "enum": [
                 "auto",
@@ -2868,36 +2876,36 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "auto"
             },
             {
-              "name": "minDate",
-              "description": "Min date (JavaScript Date object or string formatted in given `dateFormat`).",
-              "value": {
-                "kind": "expression",
-                "type": "date|string"
-              }
-            },
-            {
-              "name": "maxDate",
-              "description": "Max date (JavaScript Date object or string formatted in given `dateFormat`).",
+              "name": "timepicker",
+              "required": false,
+              "description": "Show timepicker.",
               "value": {
                 "kind": "expression",
-                "type": "date|string"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "dateFormat",
+              "required": false,
               "description": "Date string format.",
+              "enum": [
+                "string",
+                "undefined"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               }
             },
             {
               "name": "dateTimeFormat",
+              "required": false,
               "description": "Same as date format, but used when timepicker is enabled.",
               "value": {
                 "kind": "expression",
@@ -2906,6 +2914,7 @@
             },
             {
               "name": "userDateFormat",
+              "required": false,
               "description": "User-friendly date format (it will be shown in UI).",
               "value": {
                 "kind": "expression",
@@ -2915,6 +2924,7 @@
             },
             {
               "name": "userDateTimeFormat",
+              "required": false,
               "description": "Same as user format, but used when timepicker is enabled.",
               "value": {
                 "kind": "expression",
@@ -2922,17 +2932,47 @@
               },
               "default": "j F, Y - H:i:S"
             },
+            {
+              "name": "minDate",
+              "required": false,
+              "description": "Min date (JavaScript Date object or string formatted in given `dateFormat`).",
+              "enum": [
+                "string",
+                "Date",
+                "undefined"
+              ],
+              "value": {
+                "kind": "expression",
+                "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": "union"
+              }
+            },
             {
               "name": "leftIcon",
+              "required": false,
               "description": "Left icon name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "getDefault<UDatePickerProps>(defaultConfig, UDatePicker).leftIcon"
             },
             {
               "name": "rightIcon",
+              "required": false,
               "description": "Right icon name.",
               "value": {
                 "kind": "expression",
@@ -2942,6 +2982,7 @@
             },
             {
               "name": "disabled",
+              "required": false,
               "description": "Make datepicker disabled.",
               "value": {
                 "kind": "expression",
@@ -2949,35 +2990,28 @@
               },
               "default": "false"
             },
-            {
-              "name": "timepicker",
-              "description": "Show timepicker.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "id",
+              "required": false,
               "description": "Unique element id.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "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",

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

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UDatePicker = "UDatePicker";

package/ui.form-date-picker/useAttrs.js

@@ -1,34 +0,0 @@
-import { computed, watchEffect } from "vue";
-import { merge } from "lodash-es";
-import useUI from "../composables/useUI.ts";
-
-import defaultConfig from "./config.js";
-import { POSITION } from "../composables/useAutoPosition.ts";
-
-export default function useAttrs(props, { isTop, isRight }) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-
-  const mutatedProps = computed(() => ({
-    openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-    openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-    error: Boolean(props.error),
-    description: Boolean(props.description),
-  }));
-
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
-  watchEffect(() => {
-    const calendarConfig = keysAttrs.calendarAttrs.value.config || {};
-
-    if (!calendarConfig.i18n || props.config.i18n) {
-      keysAttrs.calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
-    }
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
-}