vueless 0.0.2 → 0.0.4

package/src/ui.form-calendar/services/date.service.js

@@ -0,0 +1,282 @@
+import {
+  LOCALE_TYPE,
+  DAYS_IN_WEEK,
+  SECONDS_IN_MINUTES,
+  MILLISECONDS_IN_MINUTE,
+} from "../constants";
+
+const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+const monthsMap = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+];
+
+export function minutesToSeconds(minutes) {
+  return Math.trunc(minutes * SECONDS_IN_MINUTES);
+}
+
+export function utcToGMT(date) {
+  return new Date(date.getTime() + date.getTimezoneOffset() * MILLISECONDS_IN_MINUTE);
+}
+
+export function getDaysInMonth(date) {
+  return new Date(new Date(date.valueOf()).setDate(0)).getDate();
+}
+
+export function getWeeksInMonth(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+
+  const monthIndex = date.getMonth() - 1;
+  const firstOfMonth = new Date(date.getFullYear(), monthIndex, 1);
+  const daysInMonth = getDaysInMonth(date);
+  const firstWeekDay = (firstOfMonth.getDay() - weekStartsOn + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+
+  return Math.ceil((firstWeekDay + daysInMonth) / DAYS_IN_WEEK);
+}
+
+export function getEndOfYear(date) {
+  const localDate = new Date(date.valueOf());
+  const year = localDate.getFullYear() + 1;
+
+  localDate.setFullYear(year, 0, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfYear(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setFullYear(localDate.getFullYear(), 0, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3) + 3;
+
+  localDate.setMonth(month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3);
+
+  localDate.setMonth(month, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getStartOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setDate(1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+  const month = localDate.getMonth() + 1;
+
+  localDate.setFullYear(localDate.getFullYear(), month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getEndOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+  const oneDay = 1;
+
+  const diff =
+    (day < weekStartsOn ? DAYS_IN_WEEK * -1 : 0) + DAYS_IN_WEEK - oneDay - (day - weekStartsOn);
+
+  localDate.setDate(localDate.getDate() + diff);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+
+  const diff = (day < weekStartsOn ? DAYS_IN_WEEK : 0) + day - weekStartsOn;
+
+  localDate.setDate(localDate.getDate() - diff);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function gmtToUTC(date) {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate(),
+      date.getUTCHours(),
+      date.getUTCMinutes(),
+      date.getUTCSeconds(),
+    ),
+  );
+}
+
+export function getSortedLocale(locale, type) {
+  const targetMap = type === LOCALE_TYPE.month ? monthsMap : daysMap;
+
+  const sortedDays = Object.entries(locale)
+    .map((entry) => {
+      entry[0] = targetMap.indexOf(entry[0]);
+
+      return entry;
+    })
+    .sort((entryA, entryB) => entryA[0] - entryB[0]);
+
+  return sortedDays.map((entry) => entry[1]);
+}
+
+export function getDateFromUnixTimestamp(timestamp) {
+  return new Date(timestamp * 1000);
+}
+
+export function getUnixTimestampFromDate(date) {
+  return date.getTime() / 1000;
+}
+
+export function getDatesDifference(dateOne, dateTwo, timeless = true) {
+  if (timeless !== false) {
+    return (
+      new Date(dateOne.getTime()).setHours(0, 0, 0, 0) -
+      new Date(dateTwo.getTime()).setHours(0, 0, 0, 0)
+    );
+  }
+
+  return dateOne.getTime() - dateTwo.getTime();
+}
+
+export function getDateWithoutTime(date = new Date()) {
+  date.setHours(0, 0, 0, 0);
+
+  return date;
+}
+
+export function isSameMonth(dateOne, dateTwo) {
+  return (
+    Boolean(dateOne) &&
+    Boolean(dateTwo) &&
+    dateOne.getFullYear() === dateTwo.getFullYear() &&
+    dateOne.getMonth() === dateTwo.getMonth()
+  );
+}
+
+export function isSameDay(dateOne, dateTwo) {
+  return isSameMonth(dateOne, dateTwo) && dateOne?.getDate() === dateTwo?.getDate();
+}
+
+export function isAnotherMothDay(day, activeMonth) {
+  return (
+    activeMonth.getFullYear() !== day.getFullYear() || activeMonth.getMonth() !== day.getMonth()
+  );
+}
+
+export function addDays(date, amount = 1) {
+  const result = new Date(date);
+
+  result.setDate(result.getDate() + amount);
+
+  return result;
+}
+
+export function addWeeks(date, amount = 1) {
+  const days = amount * DAYS_IN_WEEK;
+
+  return addDays(date, days);
+}
+
+export function addQuarters(date, amount = 1) {
+  const months = amount * 3;
+
+  return addMonths(date, months);
+}
+
+export function addMonths(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setMonth(date.getMonth() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function addYears(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setFullYear(date.getFullYear() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function isToday(date) {
+  return isSameDay(date, new Date());
+}
+
+export function getLastDayOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}

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/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UCheckbox = "UCheckbox";

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>