vueless 0.0.9 → 0.0.10

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

@@ -1,100 +0,0 @@
-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/src/ui.form-date-picker-range/configs/default.config.js

@@ -1,172 +0,0 @@
-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/src/ui.form-date-picker-range/constants/index.js

@@ -1,23 +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 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/src/ui.form-date-picker-range/index.stories.js

@@ -1,135 +0,0 @@
-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>
-  `,
-};