vueless 0.0.568 → 0.0.570

package/ui.form-color-picker/UColorPicker.vue

@@ -1,56 +1,4 @@
-<template>
-  <ULabel
-    :label="label"
-    :description="description"
-    :disabled="disabled"
-    :error="error"
-    :size="size"
-    align="topWithDesc"
-    v-bind="colorPickerLabelAttrs"
-    :data-test="dataTest"
-  >
-    <div v-bind="listAttrs">
-      <div v-bind="unselectedAttrs">
-        <URadio
-          :id="elementId"
-          :name="name"
-          :size="size"
-          color="gray"
-          :checked="selectedItem === ''"
-          :disabled="disabled"
-          v-bind="unselectedColorPickerRadioAttrs"
-          @update:model-value="onUpdateValue('')"
-        />
-
-        <label :for="elementId">
-          <UIcon
-            v-if="selectedItem === ''"
-            internal
-            :size="iconSize"
-            color="gray"
-            :name="config.defaults.unselectedIcon"
-            v-bind="unselectedIconAttrs"
-          />
-        </label>
-      </div>
-
-      <URadio
-        v-for="(color, index) in colorOptions"
-        :key="index"
-        :name="name"
-        :size="size"
-        :value="color"
-        :color="color"
-        :checked="selectedItem === color"
-        :disabled="disabled"
-        v-bind="colorPickerRadioAttrs"
-        @update:model-value="onUpdateValue(color)"
-      />
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -58,101 +6,21 @@ import URadio from "../ui.form-radio/URadio.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import { getDefault } from "../utils/ui.ts";
 
-import { UColorPicker } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { UColorPicker } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-defineOptions({ inheritAttrs: false });
+import type { UColorPickerProps, IconSize } from "./types.ts";
 
-const props = defineProps({
-  /**
-   * Color picker selected value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker name.
-   */
-  name: {
-    type: String,
-    default: getDefault(defaultConfig, UColorPicker).name,
-  },
-
-  /**
-   * Color picker label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UColorPicker).size,
-  },
-
-  /**
-   * Color picker color list.
-   */
-  colorOptions: {
-    type: Array,
-    default: () => getDefault(defaultConfig, UColorPicker).colorOptions,
-  },
-
-  /**
-   * Set color picker disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UColorPicker).disabled,
-  },
-
-  /**
-   * 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: "radio",
-  },
+const props = withDefaults(defineProps<UColorPickerProps>(), {
+  name: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).name,
+  size: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).size,
+  colorOptions: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).colorOptions,
+  disabled: getDefault<UColorPickerProps>(defaultConfig, UColorPicker).disabled,
+  dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -189,10 +57,62 @@ const iconSize = computed(() => {
     xl: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
-function onUpdateValue(value) {
+function onUpdateValue(value: string) {
   selectedItem.value = value;
 }
 </script>
+
+<template>
+  <ULabel
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    align="topWithDesc"
+    v-bind="colorPickerLabelAttrs"
+    :data-test="dataTest"
+  >
+    <div v-bind="listAttrs">
+      <div v-bind="unselectedAttrs">
+        <URadio
+          :id="elementId"
+          :name="name"
+          :size="size"
+          color="gray"
+          :checked="selectedItem === ''"
+          :disabled="disabled"
+          v-bind="unselectedColorPickerRadioAttrs"
+          @update:model-value="onUpdateValue('')"
+        />
+
+        <label :for="elementId">
+          <UIcon
+            v-if="selectedItem === ''"
+            internal
+            :size="iconSize"
+            color="gray"
+            :name="config.defaults?.unselectedIcon"
+            v-bind="unselectedIconAttrs"
+          />
+        </label>
+      </div>
+
+      <URadio
+        v-for="(color, index) in colorOptions"
+        :key="index"
+        :name="name"
+        :size="size"
+        :value="color"
+        :color="color"
+        :checked="selectedItem === color"
+        :disabled="disabled"
+        v-bind="colorPickerRadioAttrs"
+        @update:model-value="onUpdateValue(color)"
+      />
+    </div>
+  </ULabel>
+</template>

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

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-color-picker/storybook/{stories.js → stories.ts}

@@ -8,6 +8,14 @@ import {
 import UColorPicker from "../../ui.form-color-picker/UColorPicker.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UColorPickerProps } from "../types.ts";
+
+interface UColorPickerArgs extends UColorPickerProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 export default {
   id: "3210",
   title: "Form Inputs & Controls / Color Picker",
@@ -22,9 +30,9 @@ export default {
   parameters: {
     ...getDocsDescription(UColorPicker.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
   components: { UColorPicker },
   setup() {
     const slots = getSlotNames(UColorPicker.__name);
@@ -33,17 +41,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UColorPicker v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UColorPicker>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
   components: { UCol, UColorPicker },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

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

@@ -0,0 +1,64 @@
+import defaultConfig from "./config.ts";
+
+import type { BrandColors } from "../types.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "3xs" | "2xs" | "xs" | "sm" | "md";
+
+export interface UColorPickerProps {
+  /**
+   * Color picker selected value.
+   */
+  modelValue?: string;
+
+  /**
+   * Color picker name.
+   */
+  name?: string;
+
+  /**
+   * Color picker label.
+   */
+  label?: string;
+
+  /**
+   * Color picker description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Color picker size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Color picker color list.
+   */
+  colorOptions?: Array<BrandColors>;
+
+  /**
+   * Set color picker disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

@@ -0,0 +1,15 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UColorPickerProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UColorPickerProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  return {
+    config,
+    ...getKeysAttrs(),
+  };
+}

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

@@ -5,22 +5,25 @@ 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, LocaleType, ARROW_KEYS, TOKEN_REG_EXP } from "../ui.form-calendar/constants.ts";
 
 import { getDefault } from "../utils/ui.ts";
 
-import { addDays, isSameDay } from "../ui.form-calendar/utilDate.js";
-import { parseDate } from "../ui.form-calendar/utilCalendar.ts";
+import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
+import { formatDate, parseDate } from "../ui.form-calendar/utilCalendar.ts";
 
 import useAttrs from "./useAttrs.js";
 import { useLocale } from "../composables/useLocale.ts";
 import { useAutoPosition } from "../composables/useAutoPosition.ts";
 
-import defaultConfig from "./config.js";
-import { UDatePicker } from "./constants.js";
+import defaultConfig from "./config.ts";
+import { UDatePicker } from "./constants.ts";
+
+import { vClickOutside } from "../directives";
 
 import type { UDatePickerProps } from "./types.ts";
 import type { ComponentExposed } from "../types.ts";
+import type { DateLocale } from "../ui.form-calendar/utilFormatting.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -65,6 +68,7 @@ const userFormatDate = ref("");
 const formattedDate = ref("");
 const customView = ref(View.Day);
 
+const datepickerInputRef = useTemplateRef<typeof UInput>("input");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const calendarRef = useTemplateRef<ComponentExposed<typeof UCalendar>>("calendar");
 
@@ -84,6 +88,25 @@ const localValue = computed({
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const clickOutsideOptions = computed(() => ({ ignore: [datepickerInputRef.value?.inputRef] }));
+
+const locale = computed(() => {
+  const { months, weekdays } = currentLocale.value;
+
+  // formatted locale
+  return {
+    ...currentLocale.value,
+    months: {
+      shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
+      longhand: getSortedLocale(months.longhand, LocaleType.Month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(weekdays.shorthand, LocaleType.Day),
+      longhand: getSortedLocale(weekdays.longhand, LocaleType.Day),
+    },
+  } as DateLocale;
+});
+
 const elementId = props.id || useId();
 
 const { config, datepickerInputAttrs, datepickerInputActiveAttrs, calendarAttrs, wrapperAttrs } =
@@ -98,8 +121,6 @@ function activate() {
   nextTick(() => {
     adjustPositionY();
     adjustPositionX();
-
-    calendarRef.value?.wrapperRef?.focus();
   });
 }
 
@@ -110,53 +131,93 @@ function deactivate() {
 }
 
 function onUserFormatDateChange(value: string) {
-  userFormatDate.value = formatUserDate(value) || "";
+  userFormatDate.value = value.trim();
 }
 
 function onSubmit() {
   deactivate();
 }
 
-function onBlur(event: FocusEvent) {
-  const { relatedTarget } = event;
-
-  if (!calendarRef?.value?.wrapperRef?.contains(relatedTarget as HTMLElement)) deactivate();
+function onInput() {
+  nextTick(() => {
+    deactivate();
+    emit("input", localValue.value);
+  });
 }
 
-function formatUserDate(data: string) {
-  if (props.userDateFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
-
-  let prefix = "";
-  const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
-  const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();
-
-  const today = new Date();
-
-  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;
+function onTextInput() {
+  if (datepickerInputRef.value?.inputRef) {
+    datepickerInputRef.value.inputRef.value = userFormatDate.value;
   }
+}
 
-  if (isYesterday) {
-    prefix = currentLocale.value.yesterday;
+function onPaste(event: ClipboardEvent) {
+  try {
+    const pasteContent = event.clipboardData ? event.clipboardData.getData("text/plain") : "";
+    const userFormat = props.timepicker ? props.userDateTimeFormat : props.userDateFormat;
+    const relativeTokensAmount = Number(userFormat.match(/(?<!\\)r/g)?.length);
+
+    // Amount of tokens used in format string without decimeters.
+    const tokensAmount = userFormat
+      .split("")
+      .filter((char) => Object.keys(TOKEN_REG_EXP).includes(char)).length;
+
+    // Amount of substring that satisfies format tokens.
+    let pastedTokensAmount = pasteContent
+      .replace(/[^a-zA-Z0-9]/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+      .split(" ").length;
+
+    const isPastedRelativeDay = [
+      locale.value.tomorrow,
+      locale.value.today,
+      locale.value.tomorrow,
+    ].some((word) => {
+      return pasteContent.includes(word);
+    });
+
+    if (isPastedRelativeDay) {
+      pastedTokensAmount -= relativeTokensAmount;
+    }
+
+    if (pastedTokensAmount !== tokensAmount) return;
+
+    const parsedDate = parseDate(pasteContent, userFormat, locale.value);
+
+    if (parsedDate) {
+      localValue.value = (
+        props.dateFormat ? formatDate(parsedDate, props.dateFormat, locale.value) : parsedDate
+      ) as TModelValue;
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error);
   }
+}
 
-  if (isTomorrow) {
-    prefix = currentLocale.value.tomorrow;
+function onCopy(event: ClipboardEvent) {
+  const target = event.target as HTMLInputElement;
+
+  const cursorStart = target.selectionStart || 0;
+  const cursorEnd = target.selectionEnd || 0;
+
+  try {
+    if (cursorStart !== cursorEnd) {
+      navigator.clipboard.writeText(target.value.substring(cursorStart, cursorEnd));
+    } else {
+      navigator.clipboard.writeText(target.value);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
   }
-
-  return prefix ? `${prefix}, ${formattedDateWithoutDay}` : formattedDate;
 }
 
-function onInput() {
-  nextTick(() => {
-    calendarRef.value?.wrapperRef?.blur();
-    emit("input", localValue.value);
-  });
+function onTextInputKeyDown(event: KeyboardEvent) {
+  if (ARROW_KEYS.includes(event.code)) {
+    calendarRef.value?.wrapperRef?.focus();
+  }
 }
 
 defineExpose({
@@ -184,20 +245,25 @@ defineExpose({
   <div v-bind="wrapperAttrs" ref="wrapper">
     <UInput
       :id="elementId"
-      :key="String(isShownCalendar)"
-      v-model="userFormatDate"
+      :key="String(localValue)"
+      ref="input"
+      :model-value="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 ? datepickerInputActiveAttrs : datepickerInputAttrs"
+      @input="onTextInput"
       @focus="activate"
+      @paste="onPaste"
+      @copy="onCopy"
+      @keydown.esc="deactivate"
+      @keydown="onTextInputKeyDown"
     >
       <template #left>
         <!-- @slot Use it add something before the date. -->
@@ -236,6 +302,7 @@ defineExpose({
         ref="calendar"
         v-model="localValue"
         v-model:view="customView"
+        v-click-outside="[deactivate, clickOutsideOptions]"
         :tabindex="-1"
         :timepicker="timepicker"
         :date-format="dateFormat"
@@ -248,7 +315,6 @@ defineExpose({
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
         @input="onInput"
-        @blur="onBlur"
         @submit="onSubmit"
       />
     </Transition>

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

@@ -37,9 +37,9 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   i18n: {
-    today: "Today",
-    yesterday: "Yesterday",
-    tomorrow: "Tomorrow",
+    today: "Today,",
+    yesterday: "Yesterday,",
+    tomorrow: "Tomorrow,",
     weekdays: {
       shorthand: {
         sunday: "Sun",
@@ -117,8 +117,8 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userDateFormat: "j F, Y",
-    userDateTimeFormat: "j F, Y - H:i:S",
+    userDateFormat: "r j F, Y",
+    userDateTimeFormat: "r j F, Y - H:i:S",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",

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

@@ -3,7 +3,7 @@ import { merge } from "lodash-es";
 
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 import { Direction } from "../composables/useAutoPosition.ts";
 
 import type { Ref } from "vue";

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

@@ -4,7 +4,7 @@ import { useLocale as useGlobalLocale } from "../composables/useLocale.ts";
 
 import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
 import { LocaleType } from "../ui.form-calendar/constants.ts";
-import { UDatePickerRange } from "./constants.js";
+import { UDatePickerRange } from "./constants.ts";
 
 import defaultConfig from "./config.ts";