vueless 0.0.488 → 0.0.490

package/package.json

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

package/plugin-vite.js

@@ -36,7 +36,7 @@ export const Vueless = function (options = {}) {
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     /* remove dynamically copied icons */
-    await removeIcons({ debug, isNuxt });
+    await removeIcons({ debug });
 
     /* clear tailwind safelist */
     clearTailwindSafelist(debug);
@@ -63,22 +63,22 @@ export const Vueless = function (options = {}) {
       }
 
       if (config.command === "build") {
-        await removeIcons({ debug, isNuxt });
+        await removeIcons({ debug });
 
         /* dynamically copy used icons before build */
         await copyIcons({ mode: "vuelessIcons", env, debug, targetFiles });
-        await copyIcons({ mode, env, debug, targetFiles, isNuxt });
+        await copyIcons({ mode, env, debug, targetFiles });
       }
 
       if (config.command === "dev" || config.command === "serve") {
         /* remove dynamically copied icons on dev server start */
-        await removeIcons({ debug, isNuxt });
+        await removeIcons({ debug });
       }
     },
 
     /* remove dynamically copied icons after build */
     buildEnd: async () => {
-      await removeIcons({ debug, isNuxt });
+      await removeIcons({ debug });
     },
 
     /* load SVG images as a Vue components */

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.ts";
+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 />