vueless 0.0.492 → 0.0.494

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

@@ -6,24 +6,23 @@ export const UDatePickerRange = "UDatePickerRange";
 
 export const DATE_PICKER_BUTTON_TYPE = "button";
 export const DATE_PICKER_INPUT_TYPE = "input";
+export const INPUT_RANGE_FORMAT = "d.m.Y";
 
-export const INPUT_RANGE_TYPE = {
-  start: "start",
-  end: "end",
-};
-
-export const PERIOD = {
-  week: "week",
-  month: "month",
-  quarter: "quarter",
-  year: "year",
-  ownRange: "ownRange",
-  custom: "custom",
-};
+export enum InputRangeType {
+  Start = "start",
+  End = "end",
+}
 
-export const INPUT_RANGE_FORMAT = "d.m.Y";
+export enum Period {
+  Week = "week",
+  Month = "month",
+  Quarter = "quarter",
+  Year = "year",
+  OwnRange = "ownRange",
+  Custom = "custom",
+}
 
-export const SHIFT_ACTION = {
-  prev: "prev",
-  next: "next",
-};
+export enum ShiftAction {
+  Prev = "prev",
+  Next = "next",
+}

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } 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 />

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

@@ -0,0 +1,237 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UDatePickerRange from "../UDatePickerRange.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UButton from "../../ui.button/UButton.vue";
+
+import { addDays } from "../../ui.form-calendar/utilDate.ts";
+
+import { UDatePickerRange as UDatePickerRangeName } from "../constants.ts";
+
+import type { UDatePickerRangeProps } from "../types.ts";
+
+interface DefaultUDatePickerRangeArgs extends UDatePickerRangeProps<unknown> {
+  slotTemplate?: string;
+}
+
+interface EnumUDatePickerRangeArgs extends UDatePickerRangeProps<unknown> {
+  slotTemplate?: string;
+  enum: "size" | "variant";
+}
+
+/**
+ * The `UDatePickerRange` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-date-picker-range)
+ */
+export default {
+  id: "3180",
+  title: "Form Inputs & Controls / Date Picker Range",
+  component: UDatePickerRange,
+  args: {
+    modelValue: {
+      from: new Date(2022, 1, 14),
+      to: new Date(2022, 2, 20),
+    },
+  },
+  argTypes: {
+    ...getArgTypes(UDatePickerRangeName),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "620px",
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<DefaultUDatePickerRangeArgs> = (
+  args: DefaultUDatePickerRangeArgs,
+) => ({
+  components: { UDatePickerRange, UIcon, UButton },
+  setup() {
+    const slots = getSlotNames(UDatePickerRangeName);
+
+    return { args, slots };
+  },
+  template: `
+    <UDatePickerRange open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UDatePickerRange>
+
+    <div class="mt-4">
+      {{ args.modelValue }}
+    </div>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<EnumUDatePickerRangeArgs> = (
+  args: EnumUDatePickerRangeArgs,
+  { argTypes },
+) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDatePickerRange
+        v-for="(option, index) in options"
+        :key="index"
+        open-direction-y="bottom"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+      />
+    </URow>
+  `,
+});
+
+const OpenDirectionTemplate: StoryFn<DefaultUDatePickerRangeArgs> = (
+  args: DefaultUDatePickerRangeArgs,
+) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Left"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Right"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Bottom Left"
+      />
+      <UDatePickerRange
+        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 = {};
+
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant" };
+
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = {};
+
+export const Disabled = EnumVariantTemplate.bind({});
+Disabled.args = { enum: "variant", disabled: true };
+
+export const Label = DefaultTemplate.bind({});
+Label.args = { variant: "input", label: "some label" };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { variant: "input", description: "some description" };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { variant: "input", error: "some error" };
+
+export const MinMax = DefaultTemplate.bind({});
+MinMax.args = {
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  modelValue: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
+};
+
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = {
+  dateFormat: "d.m.Y",
+  userDateFormat: "d.m.Y",
+  modelValue: { from: "28.06.2024", to: "30.06.2024" },
+};
+
+export const CustomRangeButton = DefaultTemplate.bind({});
+CustomRangeButton.args = {
+  customRangeButton: {
+    range: {
+      from: new Date(),
+      to: addDays(new Date(), 2),
+    },
+    label: "Next 2 days",
+    description: "Some description",
+  },
+  modelValue: { from: null, to: null },
+};
+
+export const LeftIcon = DefaultTemplate.bind({});
+LeftIcon.args = { leftIcon: "star", variant: "input" };
+
+export const RightIcon = DefaultTemplate.bind({});
+RightIcon.args = { rightIcon: "star", variant: "input" };
+
+export const LeftIconSlot = DefaultTemplate.bind({});
+LeftIconSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const RightIconSlot = DefaultTemplate.bind({});
+RightIconSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const LeftSlot = DefaultTemplate.bind({});
+LeftSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #left>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+    </template>
+  `,
+};
+
+export const RightSlot = DefaultTemplate.bind({});
+RightSlot.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #right>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+    </template>
+  `,
+};

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

@@ -0,0 +1,193 @@
+import defaultConfig from "./config.ts";
+import { ShiftAction } from "./constants.ts";
+
+import type { UnknownObject } from "../types.ts";
+import type { DatePeriodRange } from "./utilDateRange.ts";
+import type { Ref } from "vue";
+
+export type Locale = typeof defaultConfig.i18n;
+export type Config = Partial<typeof defaultConfig>;
+export type IsDatePeriodOutOfRange = (datePeriod: DatePeriodRange) => boolean;
+export type ShiftActions = `${ShiftAction}`;
+
+export interface SortedLocale extends Omit<Locale, "weekdays" | "months"> {
+  months: {
+    shorthand: string[];
+    longhand: string[];
+  };
+  weekdays: {
+    shorthand: string[];
+    longhand: string[];
+  };
+}
+
+export interface IsPeriod {
+  week: boolean;
+  month: boolean;
+  quarter: boolean;
+  year: boolean;
+  ownRange: boolean;
+  custom: boolean;
+}
+
+export interface UDatePickerRangePeriodMenuAttrs {
+  periodRowAttrs: Ref<UnknownObject>;
+  periodButtonAttrs: Ref<UnknownObject>;
+  periodButtonActiveAttrs: Ref<UnknownObject>;
+  periodDateAttrs: Ref<UnknownObject>;
+  periodDateCurrentAttrs: Ref<UnknownObject>;
+  periodDateSelectedAttrs: Ref<UnknownObject>;
+  periodDateCurrentSelectedAttrs: Ref<UnknownObject>;
+  periodDateListAttrs: Ref<UnknownObject>;
+  rangeSwitchButtonAttrs: Ref<UnknownObject>;
+  rangeSwitchTitleAttrs: Ref<UnknownObject>;
+  rangeSwitchWrapperAttrs: Ref<UnknownObject>;
+  customRangeDescriptionAttrs: Ref<UnknownObject>;
+}
+
+export interface UDatePickerRangePeriodMenuProps {
+  locale: SortedLocale;
+  dateFormat: string | undefined;
+  isPeriod: IsPeriod;
+  maxDate: string | Date | undefined;
+  minDate: string | Date | undefined;
+  customRangeButton: CustomRangeButton;
+  config: Config;
+  attrs: UDatePickerRangePeriodMenuAttrs;
+}
+
+export interface UDatePickerRangeInputsAttrs {
+  rangeInputFirstAttrs: Ref<UnknownObject>;
+  rangeInputLastAttrs: Ref<UnknownObject>;
+}
+
+export interface UDatePickerRangeInputsProps {
+  locale: SortedLocale;
+  dateFormat: string | undefined;
+  rangeInputName: string;
+  maxDate: string | Date | undefined;
+  minDate: string | Date | undefined;
+  config: Config;
+  attrs: UDatePickerRangeInputsAttrs;
+}
+
+export interface CustomRangeButton {
+  range: {
+    from: Date | null;
+    to: Date | null;
+  };
+  label?: string;
+  description?: string;
+}
+
+export interface UDatePickerRangeProps<TModelValue> {
+  /**
+   * Datepicker range value (JavaScript Date objects or strings formatted in given `dateFormat`).
+   */
+  modelValue: TModelValue;
+
+  /**
+   * Custom range button.
+   */
+  customRangeButton?: CustomRangeButton;
+
+  /**
+   * Datepicker open direction on x-axis.
+   */
+  openDirectionX?: "auto" | "left" | "right";
+
+  /**
+   * Datepicker open direction on y-axis.
+   */
+  openDirectionY?: "auto" | "top" | "bottom";
+
+  /**
+   * The variant of the date picker.
+   */
+  variant?: "button" | "input";
+
+  /**
+   * 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;
+
+  /**
+   * 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;
+
+  /**
+   * Datepicker size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Datepicker label.
+   */
+  label?: string;
+
+  /**
+   * Datepicker label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Datepicker placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Datepicker description.
+   */
+  description?: string;
+
+  /**
+   * Datepicker error message.
+   */
+  error?: 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-range/{useAttrs.js → useAttrs.ts}

@@ -6,7 +6,22 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.ts";
 
-export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod }) {
+import type { Ref } from "vue";
+import type { UseAttrs } from "../types.ts";
+import type { UDatePickerRangeProps, Config, IsPeriod } from "./types.ts";
+import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
+
+export interface DatePickerRangeState {
+  isShownMenu: Ref<boolean>;
+  isTop: Ref<boolean>;
+  isRight: Ref<boolean>;
+  isPeriod: Ref<IsPeriod>;
+}
+
+export default function useAttrs(
+  props: UDatePickerRangeProps<unknown>,
+  { isShownMenu, isTop, isRight, isPeriod }: DatePickerRangeState,
+): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
@@ -35,6 +50,7 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
     mutatedProps,
   );
 
+  // TODO: Declare types for getKeysAttrs return value, this could be implemented using generic;
   const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
     buttonWrapper: {
       extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonWrapperActive.value]),
@@ -82,16 +98,16 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
 
   /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
   watchEffect(() => {
-    const calendarConfig = keysAttrs.calendarAttrs.value.config || {};
+    const calendarAttrs = keysAttrs.calendarAttrs as Ref<{ config: UCalendarConfig }>;
+    const calendarConfig = calendarAttrs.value.config || {};
 
-    if (!calendarConfig.i18n || props.config.i18n) {
-      keysAttrs.calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
+    if (!calendarConfig.i18n || props.config?.i18n) {
+      calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
     }
   });
 
   return {
     config,
-    keysAttrs,
     ...keysAttrs,
     hasSlotContent,
   };

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

@@ -0,0 +1,65 @@
+import { merge } from "lodash-es";
+import { computed } from "vue";
+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 defaultConfig from "./config.ts";
+
+import type { Locale, UDatePickerRangeProps } from "./types.ts";
+
+export function useLocale(props: UDatePickerRangeProps<unknown>) {
+  const { tm } = useGlobalLocale();
+
+  const i18nGlobal = tm<Locale>(UDatePickerRange);
+
+  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config?.i18n));
+
+  const locale = computed(() => {
+    const { months, weekdays } = currentLocale.value;
+
+    // formatted locale
+    return {
+      ...currentLocale.value,
+      months: {
+        shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
+        longhand: getSortedLocale(months.longhand, LocaleType.Month),
+      },
+      weekdays: {
+        shorthand: getSortedLocale(weekdays.shorthand, LocaleType.Day),
+        longhand: getSortedLocale(weekdays.longhand, LocaleType.Day),
+      },
+    };
+  });
+
+  const userFormatLocale = computed(() => {
+    const { months, weekdays } = currentLocale.value;
+
+    const monthsLonghand =
+      Boolean(props.config?.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
+        ? months.userFormat
+        : months.longhand;
+
+    const weekdaysLonghand =
+      Boolean(props.config?.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
+        ? weekdays.userFormat
+        : weekdays.longhand;
+
+    // formatted locale
+    return {
+      ...currentLocale.value,
+      months: {
+        shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
+        longhand: getSortedLocale(monthsLonghand, LocaleType.Month),
+      },
+      weekdays: {
+        shorthand: getSortedLocale(weekdays.shorthand, LocaleType.Day),
+        longhand: getSortedLocale(weekdaysLonghand, LocaleType.Day),
+      },
+    };
+  });
+
+  return { userFormatLocale, locale };
+}

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

@@ -1,9 +1,20 @@
 import { computed } from "vue";
 
 import { isSameMonth } from "../ui.form-calendar/utilDate.ts";
-import { formatDate } from "../ui.form-calendar/utilCalendar.ts";
-
-export function useUserFormat(localValue, userFormatLocale, isPeriod, locale, userDateFormat) {
+import { formatDate, parseDate } from "../ui.form-calendar/utilCalendar.ts";
+
+import type { Ref } from "vue";
+import type { IsPeriod, SortedLocale } from "./types.ts";
+import type { RangeDate } from "../ui.form-calendar/types.ts";
+
+export function useUserFormat(
+  localValue: Ref<RangeDate>,
+  userFormatLocale: Ref<SortedLocale>,
+  dateFormat: string,
+  isPeriod: Ref<IsPeriod>,
+  locale: Ref<SortedLocale | undefined>,
+  userDateFormat: string,
+) {
   const userFormatDate = computed(() => {
     if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 
@@ -11,13 +22,16 @@ export function useUserFormat(localValue, userFormatLocale, isPeriod, locale, us
 
     const isDefaultTitle = isPeriod.value.week || isPeriod.value.custom || isPeriod.value.ownRange;
 
-    const from = localValue.value.from;
-    const to = localValue.value.to !== null ? localValue.value.to : null;
+    const from = parseDate(localValue.value.from, dateFormat, locale.value);
+    const to =
+      localValue.value.to !== null
+        ? parseDate(localValue.value.to, dateFormat, locale.value)
+        : null;
 
-    if (isDefaultTitle) {
+    if (isDefaultTitle && from && to) {
       let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
-      let endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
-      let endYear = to?.getFullYear();
+      const endMonthName = userFormatLocale.value.months.longhand[to.getMonth()];
+      const endYear = String(to.getFullYear());
 
       if (startMonthName === endMonthName && endMonthName === endYear) {
         startMonthName = "";