vueless 0.0.3 → 0.0.4

package/src/ui.form-checkbox/composables/attrs.composable.js

@@ -0,0 +1,57 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { checkbox, iconWrapper } = config.value;
+
+  const cvaCheckbox = cva({
+    base: checkbox.base,
+    variants: checkbox.variants,
+    compoundVariants: checkbox.compoundVariants,
+  });
+
+  const cvaIconWrapper = cva({
+    base: iconWrapper.base,
+    variants: iconWrapper.variants,
+    compoundVariants: iconWrapper.compoundVariants,
+  });
+
+  const checkboxClasses = computed(() =>
+    setColor(
+      cvaCheckbox({
+        size: props.size,
+        label: Boolean(props.label),
+        color: props.color,
+        disabled: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconWrapperClasses = computed(() =>
+    setColor(
+      cvaIconWrapper({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const iconWrapperCellAttrs = getAttrs("iconWrapper", { classes: iconWrapperClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const checkboxAttrs = getAttrs("checkbox", { classes: checkboxClasses });
+
+  return {
+    config,
+    checkboxAttrs,
+    iconWrapperCellAttrs,
+    labelAttrs,
+    iconAttrs,
+  };
+}

package/src/ui.form-checkbox/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <ULabel
+    :for="id"
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <input
+      :id="id"
+      type="checkbox"
+      :value="checkboxValue"
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :name="checkboxName"
+      :checked="isChecked"
+      :disabled="disabled"
+      v-bind="checkboxAttrs"
+      @change="onChange"
+    />
+
+    <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
+      <UIcon :name="iconName" :size="iconSize" color="white" v-bind="iconAttrs" />
+    </label>
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </ULabel>
+</template>
+
+<script setup>
+import { inject, ref, onMounted, computed } from "vue";
+import { isEqual } from "lodash-es";
+
+import UIService, { getRandomId } from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UCheckbox } from "./constants";
+
+import UIcon from "../ui.image-icon";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UCheckbox", inheritAttrs: false });
+
+const checkboxGroupName = inject("checkboxGroupName", null);
+const checkboxGroupCheckedItems = inject("checkboxGroupCheckedItems", null);
+const setCheckboxGroupCheckedItems = inject("setCheckboxGroupCheckedItems", null);
+
+const props = defineProps({
+  /**
+   * Checkbox value.
+   */
+  modelValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: false,
+  },
+
+  /**
+   * Native value attribute.
+   */
+  value: {
+    type: [Boolean, String, Number, Array, Object],
+    default: "",
+  },
+
+  /**
+   * Own value for checkbox checked state.
+   */
+  trueValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: true,
+  },
+
+  /**
+   * Own value for checkbox unchecked state.
+   */
+  falseValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: false,
+  },
+
+  /**
+   * Checkbox name.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox label description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.labelAlign,
+  },
+
+  /**
+   * Checkbox color.
+   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.color,
+  },
+
+  /**
+   * Checkbox size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.size,
+  },
+
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.disabled,
+  },
+
+  /**
+   * Make checkbox partially checked (change the checked tick to a minus).
+   */
+  partial: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.partial,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "input"]);
+
+const checkboxName = ref("");
+
+const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
+
+const iconName = computed(() => {
+  return props.partial ? config.value.partialIconName : config.value.selectedIconName;
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const isBinary = computed(() => !Array.isArray(props.modelValue));
+const isCheckboxInGroup = computed(() => Boolean(checkboxGroupName));
+
+const isChecked = computed(() => {
+  return isBinary.value && !isCheckboxInGroup.value
+    ? isEqual(props.modelValue, props.trueValue)
+    : currentValue.value.findIndex((item) => isEqual(item, checkboxValue.value)) !== -1;
+});
+
+const checkboxValue = computed(() => {
+  return props.value === "" ? "on" : props.value;
+});
+
+const currentValue = computed(() => {
+  return isCheckboxInGroup.value ? checkboxGroupCheckedItems.value : props.modelValue;
+});
+
+onMounted(() => {
+  checkboxName.value = isCheckboxInGroup.value ? checkboxGroupName : props.name;
+});
+
+function onChange() {
+  let newModelValue;
+
+  if (isBinary.value) {
+    newModelValue = isChecked.value ? props.falseValue : props.trueValue;
+  }
+
+  if (!isBinary.value || isCheckboxInGroup.value) {
+    newModelValue = !isChecked.value
+      ? [...currentValue.value, checkboxValue.value]
+      : currentValue.value.filter((item) => !isEqual(checkboxValue.value, item));
+  }
+
+  if (isCheckboxInGroup.value && setCheckboxGroupCheckedItems) {
+    setCheckboxGroupCheckedItems(newModelValue);
+  }
+
+  emit("update:modelValue", newModelValue);
+  emit("input", newModelValue);
+}
+</script>

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);
+}