vueless 0.0.3 → 0.0.5

package/{ui.dropdown-list → src/ui.dropdown-list}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UDropdownList from "vueless/ui.dropdown-list";
-import URow from "vueless/ui.container-row";
+import UDropdownList from "../ui.dropdown-list";
+import URow from "../ui.container-row";
 
 export default {
   id: "2050",

package/{ui.dropdown-list → src/ui.dropdown-list}/index.vue

@@ -30,7 +30,11 @@
           <slot :option="option" name="before-option" />
 
           <slot name="option" :option="option" :index="index">
-            <span :style="getMarginForSubCategory(option.level)" v-text="option[labelKey]" />
+            <span
+              :style="getMarginForSubCategory(option.level)"
+              v-bind="optionContentAttrs"
+              v-text="option[labelKey]"
+            />
           </slot>
 
           <!-- @slot Use it to add something after option. -->
@@ -61,7 +65,7 @@
         :empty-styles="optionClasses"
       >
         <span v-bind="optionAttrs()">
-          <span>{{ i18n.noDataToShow }}</span>
+          <span v-text="config.i18n.noDataToShow" />
         </span>
       </slot>
 
@@ -69,7 +73,7 @@
       <template v-if="addOption">
         <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
           <div v-bind="addTitleAttrs">
-            {{ i18n.add }}
+            {{ config.i18n.add }}
             <span v-bind="addTitleHotkeyAttrs" v-text="addOptionKeyCombination" />
           </div>
         </div>
@@ -87,8 +91,7 @@ import { computed, ref } from "vue";
 import usePointer from "./composables/usePointer";
 import useAttrs from "./composables/attrs.composable";
 
-import I18nServiceDefault from "@vueless/services/i18n";
-import UIService, { getRandomId, isMac } from "vueless/service.ui";
+import UIService, { getRandomId, isMac } from "../service.ui";
 
 import defaultConfig from "./configs/default.config.js";
 
@@ -205,7 +208,6 @@ const wrapperRef = ref(null);
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
   usePointer(props.options, props.optionHeight, wrapperRef);
-const { getTranslation } = new I18nServiceDefault();
 
 const {
   config,
@@ -222,17 +224,11 @@ const {
   subGroupLabelAttrs,
   groupLabelAttrs,
   optionClasses,
+  optionContentAttrs,
 } = useAttrs(props);
 
 defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
 
-const i18n = computed(() => {
-  return {
-    noDataToShow: getTranslation("noDataToShow"),
-    add: getTranslation("add"),
-  };
-});
-
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
@@ -284,15 +280,3 @@ function addPointerElement({ key } = "Enter") {
   pointerReset();
 }
 </script>
-
-<i18n>
-en:
-  noDataToShow: "No data to show."
-  add: Add
-ru:
-  noDataToShow: "Нет данных."
-  add: Добавить
-ua:
-  noDataToShow: "Дані відсутні."
-  add: Додати
-</i18n>

package/{ui.form-calendar → src/ui.form-calendar}/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
-import { getSource } from "vueless/service.storybook";
+import { getSource } from "../service.storybook";
 
 import * as stories from "./index.stories";
 import defaultConfig from "./configs/default.config?raw"
@@ -49,4 +49,4 @@ Each character in the table below can be used in `dateFormat` and `userFormat` o
 ## Escaping Formatting Tokens
 You may escape formatting tokens using \\\\.
 
-<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />
+<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/{ui.form-calendar → src/ui.form-calendar}/components/DayView.vue

@@ -40,6 +40,11 @@ const props = defineProps({
     required: true,
   },
 
+  selectedDateTo: {
+    type: [Date, null],
+    default: undefined,
+  },
+
   activeDate: {
     type: [Date, null],
     required: true,
@@ -60,6 +65,11 @@ const props = defineProps({
     required: true,
   },
 
+  range: {
+    type: Boolean,
+    default: false,
+  },
+
   maxDate: {
     type: [Date, String],
     default: undefined,
@@ -88,6 +98,9 @@ const {
   currentDayAttrs,
   anotherMonthDayAttrs,
   dayAttrs,
+  inRangeFirstDayAttrs,
+  inRangeLastDayAttrs,
+  inRangeDayAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -201,6 +214,23 @@ function getDayClasses(day) {
     return [currentDayAttrs.value.class];
   }
 
+  if (props.range && isSelectedDay(day)) {
+    return [inRangeFirstDayAttrs.value.class];
+  }
+
+  if (props.range && isSelectedToDay(day)) {
+    return [inRangeLastDayAttrs.value.class];
+  }
+
+  if (
+    props.range &&
+    localSelectedDate.value &&
+    props.selectedDateTo &&
+    !dateIsOutOfRange(day, props.selectedDate, props.selectedDateTo, props.locale, props.dateFormat)
+  ) {
+    return [inRangeDayAttrs.value.class];
+  }
+
   if (isSelectedDay(day)) {
     return [selectedDayAttrs.value.class];
   }
@@ -218,8 +248,16 @@ function isSelectedDay(day) {
   return isSameDay(day, localSelectedDate.value);
 }
 
+function isSelectedToDay(day) {
+  return isSameDay(day, props.selectedDateTo);
+}
+
 function onClickDay(day) {
-  if (isSelectedDay(day) && props.selectedDate !== null) {
+  const isSameDay = isSelectedDay(day) && props.selectedDate !== null;
+  const isSameDayInRange =
+    isSelectedDay(day) && props.selectedDate !== null && props.selectedDateTo && props.range;
+
+  if (isSameDay || isSameDayInRange) {
     emit("input", null);
 
     return;

package/{ui.form-calendar → src/ui.form-calendar}/composables/attrs.composable.js

@@ -1,9 +1,21 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import { computed } from "vue";
 
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { nextPrevWrapper } = config.value;
+
+  const cvaNextPrevWrapper = cva({
+    base: nextPrevWrapper.base,
+    variants: nextPrevWrapper.variants,
+    compoundVariants: nextPrevWrapper.compoundVariants,
+  });
+
+  const optionClasses = computed(() => cvaNextPrevWrapper({ range: props.range }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const navigationAttrs = getAttrs("navigation");
@@ -21,6 +33,9 @@ export default function useAttrs(props) {
   const activeDayAttrs = getAttrs("activeDay");
   const selectedDayAttrs = getAttrs("selectedDay");
   const currentDayAttrs = getAttrs("currentDay");
+  const inRangeDayAttrs = getAttrs("inRangeDay");
+  const inRangeFirstDayAttrs = getAttrs("inRangeFirstDay");
+  const inRangeLastDayAttrs = getAttrs("inRangeLastDay");
   const anotherMonthDayAttrs = getAttrs("anotherMonthDay");
   const monthViewWrapperAttrs = getAttrs("monthViewWrapper");
   const selectedMonthAttrs = getAttrs("selectedMonth");
@@ -34,7 +49,8 @@ export default function useAttrs(props) {
   const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput");
   const timepickerRightInputAttrs = getAttrs("timepickerRightInput");
   const submitButtonAttrs = getAttrs("submitButton");
-  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper");
+
+  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses.value });
 
   const dayAttrs = (classes = []) => {
     return getAttrs("day", { classes }).value;
@@ -68,6 +84,9 @@ export default function useAttrs(props) {
     currentDayAttrs,
     anotherMonthDayAttrs,
     dayAttrs,
+    inRangeDayAttrs,
+    inRangeFirstDayAttrs,
+    inRangeLastDayAttrs,
     monthViewWrapperAttrs,
     selectedMonthAttrs,
     activeMonthAttrs,

package/{ui.form-calendar → src/ui.form-calendar}/configs/default.config.js

@@ -6,7 +6,14 @@ export default /*tw*/ {
   dayViewSwitchLabelMonth: "text-gray-900",
   dayViewSwitchLabelIcon: "",
   dayViewSwitchLabelIconName: "keyboard_arrow_right",
-  nextPrevWrapper: "flex",
+  nextPrevWrapper: {
+    base: "flex",
+    variants: {
+      range: {
+        true: "justify-between items-center w-full",
+      },
+    },
+  },
   nextPrevButton: "",
   nextIcon: "",
   nextIconName: "keyboard_arrow_right",
@@ -16,8 +23,11 @@ export default /*tw*/ {
   weekDaysWrapper: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   daysWrapper: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: "mx-auto w-full h-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-gray-100 hover:bg-gray-100",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900",
+  inRangeDay: "bg-gray-100 text-gray-900 hover:bg-gray-100 rounded-none",
   selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
   currentDay: "hover:bg-gray-100 border-2 border-gray-900",
   anotherMonthDay: "hover:bg-gray-100 text-gray-400",

package/{ui.form-calendar → src/ui.form-calendar}/constants/index.js

@@ -8,6 +8,8 @@ export const YEARS_PER_VIEW = 12;
 export const MONTHS_PER_VIEW = 12;
 export const START_WEEK = 1;
 export const DAYS_IN_WEEK = 7;
+export const SECONDS_IN_MINUTES = 60;
+export const MILLISECONDS_IN_MINUTE = 60_000;
 
 export const MAX_HOURS = 23;
 export const MIN_HOURS = 0;

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

@@ -1,6 +1,6 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UCalendar from "vueless/ui.form-calendar";
+import UCalendar from "../ui.form-calendar";
 
 export default {
   id: "3171",
@@ -40,6 +40,15 @@ const DefaultTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Range = DefaultTemplate.bind({});
+Range.args = {
+  range: true,
+  value: {
+    from: 1651813634,
+    to: 1654492034,
+  },
+};
+
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = { value: 1645653600, timepicker: true };
 

package/{ui.form-calendar → src/ui.form-calendar}/index.vue

@@ -1,33 +1,40 @@
 <template>
   <div ref="wrapperRef" tabindex="1" v-bind="wrapperAttrs" @keydown="onKeydown">
     <div v-bind="navigationAttrs">
-      <UButton
-        size="sm"
-        color="gray"
-        pill
-        square
-        variant="thirdary"
-        v-bind="navigationSwitchViewButtonAttrs"
-        @click="onClickViewSwitch"
-        @mousedown.prevent.capture
+      <Teleport
+        v-if="rangeSwitchViewContainerRef"
+        :to="rangeSwitchViewContainerRef"
+        :disabled="!range"
       >
-        <span v-if="isCurrentView.day" v-bind="dayViewSwitchLabelAttrs">
-          <span v-bind="dayViewSwitchLabelMonthAttrs" v-text="viewSwitchLabel.month" />
-          <span v-text="viewSwitchLabel.year" />
-        </span>
-        <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
-        <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
-
-        <template #right>
-          <UIcon
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.dayViewSwitchLabelIconName"
-            v-bind="dayViewSwitchLabelIconAttrs"
-          />
-        </template>
-      </UButton>
+        <UButton
+          size="sm"
+          color="gray"
+          pill
+          square
+          variant="thirdary"
+          v-bind="navigationSwitchViewButtonAttrs"
+          @click="onClickViewSwitch"
+          @mousedown.prevent.capture
+        >
+          <span v-if="isCurrentView.day" v-bind="dayViewSwitchLabelAttrs">
+            <span v-bind="dayViewSwitchLabelMonthAttrs" v-text="viewSwitchLabel.month" />
+            <span v-text="viewSwitchLabel.year" />
+          </span>
+          <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
+          <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
+
+          <template #right>
+            <UIcon
+              v-if="!range"
+              size="sm"
+              color="gray"
+              variant="light"
+              :name="config.dayViewSwitchLabelIconName"
+              v-bind="dayViewSwitchLabelIconAttrs"
+            />
+          </template>
+        </UButton>
+      </Teleport>
 
       <div v-bind="nextPrevWrapperAttrs">
         <UButton
@@ -48,6 +55,8 @@
           />
         </UButton>
 
+        <div ref="rangeSwitchViewContainerRef" />
+
         <UButton
           pill
           size="sm"
@@ -71,6 +80,8 @@
     <DayView
       v-if="isCurrentView.day"
       :selected-date="selectedDate"
+      :selected-date-to="selectedDateTo"
+      :range="range"
       :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
@@ -107,8 +118,8 @@
       @input="onInput"
     />
 
-    <div v-if="timepicker" v-bind="timepickerWrapperAttrs">
-      <span v-bind="timepickerLabelAttrs" v-text="localValue.timeLabel" />
+    <div v-if="isTimepickerEnabled" v-bind="timepickerWrapperAttrs">
+      <span v-bind="timepickerLabelAttrs" v-text="locale.timeLabel" />
 
       <div v-bind="timepickerInputWrapperAttrs">
         <input
@@ -153,7 +164,7 @@ import {
   addYears,
   getSortedLocale,
 } from "./services/date.service";
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import useAttrs from "./composables/attrs.composable";
 
@@ -184,7 +195,7 @@ const props = defineProps({
    * Calendar value (timestamp).
    */
   modelValue: {
-    type: Number,
+    type: [Number, Object],
     default: null,
   },
 
@@ -199,7 +210,6 @@ const props = defineProps({
 
   /**
    * Enable range selection.
-   * TODO: Make it work
    */
   range: {
     type: Boolean,
@@ -296,15 +306,28 @@ const {
 const wrapperRef = ref(null);
 const hoursRef = ref(null);
 const minutesRef = ref(null);
+const rangeSwitchViewContainerRef = ref(null);
 
 const activeDate = ref(null);
 const activeMonth = ref(null);
 
 defineExpose({ wrapperRef });
 
-const currentView = computed({
-  get: () => props.view,
-  set: (value) => emit("update:view", value),
+const currentView = ref(props.view);
+
+watch(
+  () => props.view,
+  () => {
+    if (props.view !== currentView.value) {
+      currentView.value = props.view;
+    }
+  },
+);
+
+watch(currentView, () => {
+  if (props.view !== currentView.value) {
+    emit("update:view", currentView.value);
+  }
 });
 
 const isCurrentView = computed(() => ({
@@ -330,17 +353,46 @@ const locale = computed(() => {
   return formattedLocale;
 });
 
+const isTimepickerEnabled = computed(() => {
+  return props.timepicker && !props.range;
+});
+
+const isModelRangeType = computed(() => {
+  return (
+    props.modelValue !== null &&
+    !isNumeric(props.modelValue) &&
+    typeof props.modelValue === "object"
+  );
+});
+
 const localValue = computed({
-  get: () => props.modelValue,
+  get: () => {
+    if (props.range) {
+      const from = isModelRangeType.value ? props.modelValue.from : props.modelValue || null;
+
+      const to = isModelRangeType.value ? props.modelValue.to : null;
+
+      return { from, to };
+    }
+
+    return isModelRangeType.value ? props.modelValue.from : props.modelValue;
+  },
   set(value) {
-    const parsedDate = parseDate(value, props.dateFormat, locale.value);
+    value = getCurrentValueType(value);
+
+    const parsedDate = parseDate(props.range ? value.from : value, props.dateFormat, locale.value);
+    const parsedDateTo =
+      isModelRangeType.value && props.range
+        ? parseDate(value.to, props.dateFormat, locale.value)
+        : undefined;
 
-    if (parsedDate && props.timepicker) {
+    if (parsedDate && isTimepickerEnabled.value) {
       parsedDate.setHours(Number(hoursRef.value.value));
       parsedDate.setMinutes(Number(minutesRef.value.value));
     }
 
     const timestamp = parsedDate ? getUnixTimestampFromDate(parsedDate) : null;
+    const timestampTo = parsedDateTo ? getUnixTimestampFromDate(parsedDateTo) : null;
 
     const isOutOfRange = dateIsOutOfRange(
       parsedDate || new Date(),
@@ -354,9 +406,9 @@ const localValue = computed({
       return;
     }
 
-    emit("update:modelValue", timestamp);
+    emit("update:modelValue", props.range ? { from: timestamp, to: timestampTo } : timestamp);
 
-    if (parsedDate === null && props.timepicker) {
+    if (parsedDate === null && isTimepickerEnabled.value) {
       const currentDate = new Date();
 
       hoursRef.value.value = String(currentDate.getHours()).padStart(2, "0");
@@ -366,7 +418,15 @@ const localValue = computed({
 });
 
 const selectedDate = computed(() => {
-  return parseDate(props.modelValue, props.dateFormat, locale.value);
+  return parseDate(
+    props.range ? localValue.value.from : localValue.value,
+    props.dateFormat,
+    locale.value,
+  );
+});
+
+const selectedDateTo = computed(() => {
+  return props.range ? parseDate(localValue.value.to, props.dateFormat, locale.value) : undefined;
 });
 
 const formattedDate = computed(() => {
@@ -374,6 +434,8 @@ const formattedDate = computed(() => {
 });
 
 const formattedTime = computed(() => {
+  if (!isTimepickerEnabled.value) return undefined;
+
   const hours = String(selectedDate.value?.getHours()).padStart(2, "0");
   const minutes = String(selectedDate.value?.getMinutes()).padStart(2, "0");
 
@@ -382,10 +444,15 @@ const formattedTime = computed(() => {
 
 const userFormattedDate = computed(() => {
   const date = formatDate(selectedDate.value, props.userFormat, locale.value);
+  const dateTo = props.range
+    ? formatDate(selectedDateTo.value, props.userFormat, locale.value)
+    : undefined;
+
+  if (isTimepickerEnabled.value && selectedDate.value) {
+    return `${date} ${SEPARATOR} ${formattedTime.value}`;
+  }
 
-  return props.timepicker && selectedDate.value
-    ? `${date} ${SEPARATOR} ${formattedTime.value}`
-    : date;
+  return props.range ? `${date} ${SEPARATOR} ${dateTo}` : date;
 });
 
 const viewSwitchLabel = computed(() => {
@@ -407,8 +474,18 @@ watch(formattedDate, () => {
   emit("formattedDateChange", userFormattedDate.value);
 });
 
+// This watcher force updates value when range props changed
+watch(
+  () => props.range,
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      localValue.value = getCurrentValueType(localValue.value);
+    }
+  },
+);
+
 onMounted(() => {
-  if (selectedDate.value && props.timepicker) {
+  if (selectedDate.value && isTimepickerEnabled.value) {
     hoursRef.value.value = String(selectedDate.value.getHours()).padStart(2, "0");
     minutesRef.value.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
   }
@@ -417,6 +494,22 @@ onMounted(() => {
   emit("formattedDateChange", userFormattedDate.value);
 });
 
+function getCurrentValueType(value) {
+  if (props.range && value === null) {
+    value = { from: null, to: null };
+  }
+
+  if (isModelRangeType.value && !props.range) {
+    value = value.from || value;
+  }
+
+  if (typeof value !== "object" && value !== null && props.range) {
+    value = { from: value, to: null };
+  }
+
+  return value;
+}
+
 function onInputDate(newDate) {
   if (newDate === null) {
     localValue.value = newDate;
@@ -431,7 +524,18 @@ function onInputDate(newDate) {
 
   const date = new Date(newDate.valueOf());
 
-  localValue.value = date;
+  if (props.range) {
+    const isFullReset =
+      localValue.value.to ||
+      !localValue.value.from ||
+      getUnixTimestampFromDate(date) <= localValue.value.from;
+
+    localValue.value = isFullReset
+      ? { from: date, to: null }
+      : { from: localValue.value.from, to: date };
+  } else {
+    localValue.value = date;
+  }
 
   activeDate.value = null;
   activeMonth.value = null;
@@ -442,6 +546,12 @@ function onInputDate(newDate) {
 }
 
 function onKeydown(event) {
+  if (props.range) {
+    emit("keydown", event);
+
+    return;
+  }
+
   if ([KEY_CODE.left, KEY_CODE.up, KEY_CODE.right, KEY_CODE.down].includes(event.keyCode)) {
     arrowKeyHandler(event);
 

package/{ui.form-calendar → src/ui.form-calendar}/services/calendar.service.js

@@ -155,25 +155,13 @@ export function dayIsPartOfTheConditions(day, condition, dateParser, dateFormat)
 }
 
 export function dateIsOutOfRange(date, min, max, locale, dateFormat = null) {
-  if (!dateFormat) {
+  if ((!dateFormat && typeof min === "string") || (!dateFormat && typeof max === "string")) {
     throw new Error("strings needs a date format");
   }
 
-  let minDate;
+  const minDate = typeof min === "string" ? parseDate(min, dateFormat, locale) : min;
 
-  if (typeof min === "string" || min instanceof String) {
-    minDate = parseDate(min, dateFormat, locale);
-  } else {
-    minDate = min;
-  }
-
-  let maxDate;
-
-  if (typeof max === "string" || max instanceof String) {
-    maxDate = parseDate(max, dateFormat, locale);
-  } else {
-    maxDate = max;
-  }
+  const maxDate = typeof max === "string" ? parseDate(max, dateFormat, locale) : max;
 
   const time = date.getTime();