vueless 0.0.2 → 0.0.4

package/src/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/src/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/src/ui.form-date-picker-range/services/validation.service.js

@@ -0,0 +1,22 @@
+import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
+
+const DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
+
+export function wrongDateFormat(value) {
+  return !!value.match(DATE_WITH_DOT_FORMAT_REG_EXP);
+}
+
+export function wrongMonthNumber(value) {
+  const splitDate = value.split(".");
+  const month = splitDate[1];
+
+  return Number(month) >= 1 && Number(month) <= 12;
+}
+
+export function wrongDayNumber(value) {
+  const [day, month, year] = value.split(".");
+
+  const daysInMonth = getDaysInMonth(new Date(year, month - 1));
+
+  return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
+}

package/src/ui.form-input-rating/configs/default.config.js

@@ -0,0 +1,25 @@
+export default /*tw*/ {
+  rating: "flex flex-col",
+  label: "",
+  wrapper: "",
+  iconsContainer: "leading-none flex",
+  icons: "",
+  counter: {
+    base: "leading-none",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    modelValue: 0,
+    starsNumber: 5,
+    selectable: false,
+    noCounter: false,
+    labelOutside: false,
+  },
+};

package/{ui.form-input-rating → src/ui.form-input-rating}/index.stories.js

@@ -1,9 +1,10 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UInputRating from "vueless/ui.form-input-rating";
-import URow from "vueless/ui.container-row";
+import UInputRating from "../ui.form-input-rating";
+import URow from "../ui.container-row";
 
 export default {
+  id: "3060",
   title: "Form Inputs & Controls / Input Rating",
   component: UInputRating,
   args: {
@@ -50,7 +51,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputRating, URow },
   setup() {
     return {
@@ -62,9 +63,9 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UInputRating
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         :key="index"
-        v-bind="args"
       />
     </URow>
   `,

package/src/ui.form-input-rating/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div :data-cy="dataCy" v-bind="ratingAttrs">
+    <ULabel
+      :label="label"
+      :error="error"
+      :size="size"
+      :description="description"
+      :align="labelAlign"
+      v-bind="labelAttrs"
+    >
+      <div v-bind="wrapperAttrs">
+        <div v-if="!noCounter" v-bind="counterAttrs">
+          <!-- @slot Use it to add counter. -->
+          <slot name="counter">
+            {{ ratingCounter }}
+          </slot>
+        </div>
+
+        <div v-bind="iconsContainerAttrs">
+          <UIcon
+            v-for="star in starsNumber"
+            :key="star"
+            :data-cy="`${dataCy}-rating-star-${star}`"
+            :name="star <= ratingCounter ? 'star-fill' : 'star'"
+            :size="iconSize"
+            color="yellow"
+            :interactive="selectable"
+            v-bind="iconsAttrs"
+            @mouseover="onMouseHover(star)"
+            @mouseleave="onMouseHover()"
+            @click="onClickStar(star)"
+          />
+        </div>
+
+        <!-- @slot Use it to add something right. -->
+        <slot name="right" />
+      </div>
+    </ULabel>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UIService from "../service.ui";
+
+import { UInputRating } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputRating", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set input rating  label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set input rating value.
+   */
+  modelValue: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.modelValue,
+  },
+
+  /**
+   * Set the number of stars.
+   */
+  starsNumber: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputRating).default.starsNumber,
+  },
+
+  /**
+   * Set component size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.size,
+  },
+
+  /**
+   * Make stars selectable.
+   */
+  selectable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.selectable,
+  },
+
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, left, right
+   */
+  labelOutside: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputRating).default.placement,
+  },
+
+  /**
+   * Set error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set description text.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Hide / show counter.
+   */
+  noCounter: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.noCounter,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const hovered = ref(null);
+
+const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
+  useAttrs(props);
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const ratingCounter = computed(() => {
+  return hovered.value || props.modelValue;
+});
+
+function onClickStar(newValue) {
+  if (props.selectable) {
+    const selected = newValue !== props.modelValue ? newValue : 0;
+
+    hovered.value = null;
+
+    emit("update:modelValue", selected);
+  }
+}
+
+function onMouseHover(overStar) {
+  if (props.selectable) hovered.value = overStar;
+}
+</script>