vueless 0.0.10 → 0.0.12

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -0,0 +1,100 @@
+import useUI from "../../composable.ui";
+import { cx } from "../../service.ui";
+
+import { computed, watchEffect } from "vue";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props, { isShownMenu }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
+  const buttonAttrsRaw = getAttrs("button");
+  const shiftRangeButtonAttrs = getAttrs("shiftRangeButton");
+  const calendarAttrs = getAttrs("calendar", { isComponent: true });
+  const inputBlurAttrs = getAttrs("input", { isComponent: true });
+  const inputActiveAttrs = getAttrs("inputActive");
+  const rangeInputAttrs = getAttrs("rangeInput", { isComponent: true });
+  const rangeInputWrapperAttrs = getAttrs("rangeInputWrapper");
+  const inputRangeErrorAttrs = getAttrs("inputRangeError");
+
+  // This watcher rewrites default calendar locales with datepicker range locales
+  // Watcher will not rewrite custom calendar locales
+  watchEffect(() => {
+    if (!calendarAttrs.value.config) {
+      calendarAttrs.value.config = {};
+    }
+
+    if (calendarAttrs.value.config.i18n) {
+      return;
+    }
+
+    calendarAttrs.value.config.i18n = {
+      weekdays: {
+        shorthand: { ...config.value.i18n.weekdays.shorthand },
+        longhand: { ...config.value.i18n.weekdays.longhand },
+      },
+      months: {
+        shorthand: { ...config.value.i18n.months.shorthand },
+        longhand: { ...config.value.i18n.months.longhand },
+      },
+    };
+  });
+
+  const inputAttrs = computed(() => {
+    return isShownMenu.value ? inputActiveAttrs.value : inputBlurAttrs.value;
+  });
+
+  const menuAttrs = getAttrs("menu");
+  const periodsRowAttrs = getAttrs("periodsRow");
+  const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
+  const nextIconAttrs = getAttrs("nextIcon");
+  const prevIconAttrs = getAttrs("prevIcon");
+  const rangeSwitchTitleAttrs = getAttrs("rangeSwitchTitle");
+
+  const periodButtonAttrs = (classes = []) => {
+    return getAttrs("periodButton", { classes }).value;
+  };
+
+  const periodDateListAttrs = (classes = []) => {
+    return getAttrs("periodDateList", { classes }).value;
+  };
+
+  const periodDateAttrs = (classes = []) => {
+    return getAttrs("periodDate", { classes }).value;
+  };
+
+  const buttonWrapperAttrs = computed(() => ({
+    ...buttonWrapperAttrsRaw.value,
+    class: cx([
+      buttonWrapperAttrsRaw.value.class,
+      isShownMenu.value && config.value.buttonWrapperActive,
+    ]),
+  }));
+
+  const buttonAttrs = computed(() => ({
+    ...buttonAttrsRaw.value,
+    class: cx([buttonAttrsRaw.value.class, isShownMenu.value && config.value.buttonActive]),
+  }));
+
+  return {
+    config,
+    calendarAttrs,
+    inputAttrs,
+    menuAttrs,
+    periodsRowAttrs,
+    periodButtonAttrs,
+    rangeSwitchWrapperAttrs,
+    nextIconAttrs,
+    prevIconAttrs,
+    periodDateAttrs,
+    periodDateListAttrs,
+    rangeSwitchTitleAttrs,
+    buttonWrapperAttrs,
+    buttonAttrs,
+    shiftRangeButtonAttrs,
+    rangeInputAttrs,
+    rangeInputWrapperAttrs,
+    inputRangeErrorAttrs,
+  };
+}

package/ui.form-date-picker-range/configs/default.config.js

@@ -0,0 +1,172 @@
+export default /*tw*/ {
+  input: "",
+  inputActive: {
+    block: {
+      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+    },
+  },
+  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
+  button: `
+    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none 
+  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15] 
+  active:bg-zinc-200 disabled:cursor-not-allowed
+  `,
+  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
+  buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
+  shiftRangeButton: `
+    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none 
+    hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
+    disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
+  `,
+  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-gray-300 bg-white p-2 shadow focus:outline-none",
+  menuTransition: {
+    enterFromClass: "opacity-0 scale-95",
+    enterActiveClass: "transition transform ease-out duration-100",
+    enterToClass: "opacity-100 scale-100",
+    leaveFromClass: "opacity-100 scale-100",
+    leaveActiveClass: "transition transform ease-in duration-75",
+    leaveToClass: "opacity-0 scale-95",
+  },
+  periodsRow: "mb-1 flex min-w-64 gap-1",
+  periodButton: `
+    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100 
+    px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
+    [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
+  `,
+  periodButtonActive: "bg-zinc-200",
+  rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
+  rangeSwitchTitle: "font-medium text-sm",
+  nextIcon: "",
+  nextIconName: "keyboard_arrow_right",
+  prevIcon: "",
+  prevIconName: "keyboard_arrow_left",
+  periodDateList: "",
+  periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
+  periodDateWeekList: "",
+  periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
+  periodDateQuarterList: "",
+  periodDate: `
+    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-gray-50
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
+  periodDateActive: "bg-zinc-100",
+  rangeInputWrapper: "flex mt-4",
+  rangeInput: {
+    wrapper: "ml-0 group/range-input-wrapper",
+    block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
+    label: {
+      description: "hidden",
+    },
+    input: {
+      base: "text-sm border-gray-100 px-4 py-2.5",
+      variants: {
+        size: {
+          md: "pt-2.5 pb-2.5",
+        },
+      },
+    },
+  },
+  inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
+  calendar: {
+    wrapper: "p-0 mt-2 w-full border-none shadow-none",
+    dayViewWrapper: "p-0 w-full",
+    monthViewWrapper: "p-0 w-full",
+    yearViewWrapper: "p-0 w-full",
+    dayViewSwitchLabel: "font-medium text-gray-900",
+    nextPrevButton: "p-0 py-2 hover:bg-transparent",
+    navigation: "px-0 w-full",
+    nextIcon: {
+      defaultVariants: {
+        variant: "dark",
+      },
+    },
+    prevIcon: {
+      defaultVariants: {
+        variant: "dark",
+      },
+    },
+    day: "font-medium w-full h-10 text-sm",
+    weekDay: "text-sm size-10",
+    month: "font-medium",
+    selectedMonth: "bg-zinc-100 text-gray-900 hover:text-white",
+    year: "font-medium",
+    selectedYear: "bg-zinc-100 text-gray-900 hover:text-white",
+  },
+  i18n: {
+    lastThirtyDays: "Last 30 days <span> and 2 next two weeks </span>",
+    ownRange: "Own range",
+    week: "Week",
+    month: "Month",
+    quarter: "Quarter",
+    year: "Year",
+    dateFormatWithDot: "Date should be in format 'dd.mm.yyyy'.",
+    notCorrectMonthNumber: "Wrong month number.",
+    notCorrectDayNumber: "Wrong day in month.",
+    weekdays: {
+      shorthand: {
+        sunday: "Sun",
+        monday: "Mon",
+        tuesday: "Tue",
+        wednesday: "Wed",
+        thursday: "Thu",
+        friday: "Fri",
+        saturday: "Sat",
+      },
+      longhand: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
+    },
+    months: {
+      shorthand: {
+        january: "Jan",
+        february: "Feb",
+        march: "Mar",
+        april: "Apr",
+        may: "May",
+        june: "Jun",
+        july: "Jul",
+        august: "Aug",
+        september: "Sep",
+        october: "Oct",
+        november: "Nov",
+        december: "Dec",
+      },
+      longhand: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "button",
+    customRangeButton: {
+      range: {
+        from: 0,
+        to: 0,
+      },
+      label: "",
+      description: "",
+    },
+    timepicker: false,
+    disabled: false,
+    maxDate: undefined,
+    minDate: undefined,
+  },
+};

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

@@ -0,0 +1,23 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UDatePickerRange = "UDatePickerRange";
+
+export const DATE_PICKER_BUTTON_TYPE = "button";
+export const DATE_PICKER_INPUT_TYPE = "input";
+export const RANGE_INPUT_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",
+  lastThirtyDays: "lastThirtyDays",
+};

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

@@ -0,0 +1,135 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UDatePickerRange from "../ui.form-date-picker-range";
+import URow from "../ui.container-row";
+
+import { addDays } from "../ui.form-calendar/services/date.service";
+
+export default {
+  id: "3180",
+  title: "Form Inputs & Controls / Date Picker Range",
+  component: UDatePickerRange,
+  args: {
+    value: {
+      from: 1651813634,
+      to: 1654492034,
+    },
+  },
+  argTypes: {
+    ...getArgTypes(UDatePickerRange.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "580px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDatePickerRange },
+  setup() {
+    const slots = getSlotNames(UDatePickerRange.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDatePickerRange v-bind="args" v-model="args.value">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UDatePickerRange>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDatePickerRange },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDatePickerRange v-bind="args" v-model="args.value">
+      ${args.slotTemplate}
+    </UDatePickerRange>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDatePickerRange
+        v-for="(variant, index) in variants"
+        :variant="variant"
+        v-bind="args"
+        v-model="args.value"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const variants = VariantsTemplate.bind({});
+variants.args = {};
+
+export const disabled = VariantsTemplate.bind({});
+disabled.args = { 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: "22.02.2022",
+  maxDate: "26.02.2022",
+  value: { from: 1645653600, to: null },
+};
+
+export const customRangeButton = DefaultTemplate.bind({});
+customRangeButton.args = {
+  customRangeButton: {
+    range: {
+      from: new Date(),
+      to: addDays(new Date(), 2),
+    },
+    label: "Next 2 days",
+    description: "Some description",
+  },
+  value: { from: null, to: null },
+};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #left>
+      🤘
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  variant: "input",
+  slotTemplate: `
+    <template #right>
+      🤘
+    </template>
+  `,
+};