vueless 0.0.152 → 0.0.154

package/composable.adjustElementPosition/index.js

@@ -0,0 +1,98 @@
+import { ref, computed, toValue } from "vue";
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  auto: "auto",
+};
+
+export function useAdjustElementPosition(
+  anchorElement,
+  targetElement,
+  position,
+  preferredPosition,
+) {
+  const preferredOpenDirectionY = ref(preferredPosition?.y || POSITION.bottom);
+  const preferredOpenDirectionX = ref(preferredPosition?.x || POSITION.left);
+
+  const localAnchorElement = computed(() => toValue(anchorElement));
+  const localTargetElement = computed(() => toValue(targetElement));
+  const localPosition = computed(() => toValue(position));
+  const localPreferredPosition = computed(() => toValue(preferredPosition));
+
+  const isTop = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.top;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.top;
+  });
+
+  const isLeft = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.x === POSITION.left;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  const isBottom = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.bottom;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.bottom;
+  });
+
+  const isRight = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.y === POSITION.right;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  function adjustPositionY() {
+    if (typeof window === "undefined") return;
+
+    const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
+    const spaceBelow = window.innerHeight - localAnchorElement.value.getBoundingClientRect().bottom;
+    const hasEnoughSpaceBelow =
+      spaceBelow > localTargetElement.value.getBoundingClientRect().height;
+    const hasEnoughSpaceAbove =
+      spaceAbove > localTargetElement.value.getBoundingClientRect().height;
+
+    if (localPreferredPosition.value.y === POSITION.top) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? POSITION.bottom : POSITION.top;
+    }
+
+    if (localPreferredPosition.value.y === POSITION.bottom) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? POSITION.top : POSITION.bottom;
+    }
+  }
+
+  function adjustPositionX() {
+    if (typeof window === "undefined") return;
+
+    const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
+    const spaceLeft = window.innerWidth - localAnchorElement.value.getBoundingClientRect().left;
+    const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
+    const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
+
+    if (localPreferredPosition.value.x === POSITION.left) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceRight || spaceRight > spaceLeft ? POSITION.right : POSITION.left;
+    }
+
+    if (localPreferredPosition.value.x === POSITION.right) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceLeft || spaceLeft > spaceRight ? POSITION.left : POSITION.right;
+    }
+  }
+
+  return { isTop, isRight, isBottom, isLeft, adjustPositionY, adjustPositionX };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.152",
+  "version": "0.0.154",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -1,12 +1,34 @@
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { computed, watchEffect } from "vue";
+import { POSITION } from "../../composable.adjustElementPosition";
 
-export default function useAttrs(props, { isShownCalendar }) {
+export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { calendar } = config.value;
 
-  const calendarAttrs = getAttrs("calendar");
+  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
+  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
+
+  const cvaCalendarWrapper = cva({
+    base: calendar.wrapper.base,
+    variants: calendar.wrapper.variants,
+    compoundVariants: calendar.wrapper.compoundVariants,
+  });
+
+  const calendarWrapperClasses = computed(() =>
+    cvaCalendarWrapper({
+      openDirectionY: openDirectionY.value,
+      openDirectionX: openDirectionX.value,
+    }),
+  );
+
+  const calendarAttrs = getAttrs("calendar", {
+    isComponent: true,
+    classes: calendarWrapperClasses,
+  });
   const inputBlurAttrs = getAttrs("input");
   const inputActiveAttrs = getAttrs("inputActive");
   const wrapperAttrs = getAttrs("wrapper");

package/ui.form-date-picker/configs/default.config.js

@@ -6,7 +6,20 @@ export default /*tw*/ {
       base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
-  calendar: "absolute z-40 mt-2",
+  calendar: {
+    wrapper: {
+      base: "absolute z-40 my-2",
+      variants: {
+        openDirectionX: {
+          left: "left-0",
+          right: "right-0",
+        },
+        openDirectionY: {
+          top: "bottom-full mt-0",
+        },
+      },
+    },
+  },
   calendarTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -99,6 +112,8 @@ export default /*tw*/ {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     maxDate: undefined,

package/ui.form-date-picker/index.stories.js

@@ -64,6 +64,46 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+      directions: argTypes.openDirection.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePicker
+        class="w-full"
+        open-direction-y="top"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.value"
+      />
+    </URow>
+  `,
+});
+
 const SlotTemplate = (args) => ({
   components: { UDatePicker, UIcon },
   setup() {
@@ -82,6 +122,9 @@ Default.args = { date: 1645653600 };
 export const sizes = SizesTemplate.bind({});
 sizes.args = { label: "" };
 
+export const openDirection = OpenDirectionTemplate.bind({});
+openDirection.args = {};
+
 export const description = DefaultTemplate.bind({});
 description.args = { description: "some description" };
 

package/ui.form-date-picker/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" ref="wrapperRef">
     <UInput
       :id="id"
       :key="isShownCalendar"
@@ -69,6 +69,7 @@ import {
 
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
+import { useAdjustElementPosition } from "../composable.adjustElementPosition";
 
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
@@ -101,6 +102,24 @@ const props = defineProps({
     default: null,
   },
 
+  /**
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
+   */
+  openDirectionX: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePicker).default.openDirectionX,
+  },
+
+  /**
+   * Datepicker open direction on y-axis.
+   * @values auto, top, bottom
+   */
+  openDirectionY: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePicker).default.openDirectionY,
+  },
+
   /**
    * Min date in format date string or Date.
    */
@@ -211,8 +230,24 @@ const userFormatDate = ref("");
 const formattedDate = ref("");
 const customView = ref(VIEW.day);
 
+const wrapperRef = ref(null);
 const calendarRef = ref(null);
 
+const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
+
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+  wrapperRef,
+  calendarWrapperRef,
+  {
+    x: props.openDirectionX,
+    y: props.openDirectionY,
+  },
+  {
+    x: "left",
+    y: "bottom",
+  },
+);
+
 defineExpose({
   calendarRef,
   userFormatDate,
@@ -224,12 +259,21 @@ const localValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, { isShownCalendar });
+const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
+  isShownCalendar,
+  isTop,
+  isRight,
+});
 
 function activate() {
   isShownCalendar.value = true;
 
-  nextTick(() => calendarRef.value?.wrapperRef?.focus());
+  nextTick(() => {
+    adjustPositionY();
+    adjustPositionX();
+
+    calendarRef.value.wrapperRef.focus();
+  });
 }
 
 function deactivate() {

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

@@ -1,12 +1,27 @@
 import useUI from "../../composable.ui";
-import { cx } from "../../service.ui";
+import { cx, cva } from "../../service.ui";
 
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
+import { POSITION } from "../../composable.adjustElementPosition";
 
-export default function useAttrs(props, { isShownMenu }) {
+export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { menu } = config.value;
+
+  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
+  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
+
+  const cvaMenu = cva({
+    base: menu.base,
+    variants: menu.variants,
+    compoundVariants: menu.compoundVariants,
+  });
+
+  const menuClasses = computed(() =>
+    cvaMenu({ openDirectionY: openDirectionY.value, openDirectionX: openDirectionX.value }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
@@ -57,7 +72,7 @@ export default function useAttrs(props, { isShownMenu }) {
     return isShownMenu.value ? inputActiveAttrs.value : inputBlurAttrs.value;
   });
 
-  const menuAttrs = getAttrs("menu");
+  const menuAttrs = getAttrs("menu", { classes: menuClasses });
   const periodsRowAttrs = getAttrs("periodsRow");
   const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
   const nextIconAttrs = getAttrs("nextIcon");

package/ui.form-date-picker-range/configs/default.config.js

@@ -19,7 +19,18 @@ export default /*tw*/ {
     hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-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-brand-300 bg-white p-2 shadow focus:outline-none",
+  menu: {
+    base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    variants: {
+      openDirectionX: {
+        left: "left-0",
+        right: "right-0",
+      },
+      openDirectionY: {
+        top: "bottom-full mt-0",
+      },
+    },
+  },
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -185,6 +196,8 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     variant: "button",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     dateFormat: "d.m.Y",

package/ui.form-date-picker-range/constants/index.js

@@ -18,5 +18,5 @@ export const PERIOD = {
   quarter: "quarter",
   year: "year",
   ownRange: "ownRange",
-  lastThirtyDays: "lastThirtyDays",
+  custom: "custom",
 };

package/ui.form-date-picker-range/index.stories.js

@@ -79,12 +79,55 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return {
+      args,
+      directions: argTypes.openDirection.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="top"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        v-bind="args"
+        v-model="args.value"
+      />
+      <UDatePickerRange
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.value"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const variants = VariantsTemplate.bind({});
 variants.args = {};
 
+export const openDirection = OpenDirectionTemplate.bind({});
+openDirection.args = {};
+
 export const disabled = VariantsTemplate.bind({});
 disabled.args = { disabled: true };
 

package/ui.form-date-picker-range/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" ref="wrapperRef">
     <UInput
       v-if="isVariant.input"
       :id="id"
@@ -235,6 +235,7 @@ import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/va
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
+import { useAdjustElementPosition } from "../composable.adjustElementPosition";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -272,6 +273,24 @@ const props = defineProps({
     }),
   },
 
+  /**
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
+   */
+  openDirectionX: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirectionX,
+  },
+
+  /**
+   * Datepicker open direction on y-axis.
+   * @values auto, top, bottom
+   */
+  openDirectionY: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirectionY,
+  },
+
   /**
    * The variant of the date picker.
    * @values button, input
@@ -383,6 +402,23 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownMenu = ref(false);
+const wrapperRef = ref(null);
+const menuRef = ref(null);
+const rangeInputStartRef = ref(null);
+const rangeInputEndRef = ref(null);
+
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+  wrapperRef,
+  menuRef,
+  {
+    x: props.openDirectionX,
+    y: props.openDirectionY,
+  },
+  {
+    x: "left",
+    y: "bottom",
+  },
+);
 
 const {
   config,
@@ -405,7 +441,7 @@ const {
   rangeInputAttrs,
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
-} = useAttrs(props, { isShownMenu });
+} = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
@@ -413,16 +449,15 @@ const activeDate = ref(
   props.modelValue.from !== null ? getDateFromUnixTimestamp(props.modelValue.from) : new Date(),
 );
 const period = ref(PERIOD.ownRange);
-const periodDateList = ref(null);
 const rangeStart = ref("");
 const rangeEnd = ref("");
 const inputRangeStartError = ref("");
 const inputRangeEndError = ref("");
 const isHoverEvent = ref(false);
+const periodDateList = ref(null);
 
-const menuRef = ref(null);
-const rangeInputStartRef = ref(null);
-const rangeInputEndRef = ref(null);
+const { isMobileBreakpoint } = useBreakpoint();
+const i18nGlobal = tm(UDatePickerRange);
 
 const localValue = computed({
   get: () => props.modelValue,
@@ -435,9 +470,6 @@ const localValue = computed({
   },
 });
 
-const { isMobileBreakpoint } = useBreakpoint();
-const i18nGlobal = tm(UDatePickerRange);
-
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
@@ -593,7 +625,7 @@ const userFormatDate = computed(() => {
     const endMonth = String(to?.getMonth())?.padStart(2, "0");
 
     const fromTitle = `${startDay}.${startMonth}`;
-    const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear}` : "";
+    const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear()}` : "";
 
     title = `${fromTitle} – ${toTitle}`;
   }
@@ -782,7 +814,12 @@ function getPeriodDateListClasses() {
 function activate() {
   isShownMenu.value = true;
 
-  nextTick(() => menuRef.value.focus());
+  nextTick(() => {
+    adjustPositionY();
+    adjustPositionX();
+
+    menuRef.value.focus();
+  });
 }
 
 function deactivate() {
@@ -860,8 +897,11 @@ function onInputRangeInput(value, type) {
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
-  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
-  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
+  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
+  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
+
+  const customFrom = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.from));
+  const customTo = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.to));
 
   const isWeekPeriod =
     String(from) === String(getStartOfWeek(from, { weekStartsOn: 1 })) &&
@@ -874,6 +914,7 @@ function setDefaultPeriodForButton() {
     String(from) === String(getStartOfQuarter(from)) && String(to) === String(getEndOfQuarter(to));
   const isYearPeriod =
     String(from) === String(getStartOfYear(from)) && String(to) === String(getEndOfYear(to));
+  const isCustomPeriod = String(from) === String(customFrom) && String(to) === String(customTo);
 
   if (!props.modelValue.from && !props.modelValue.to) {
     period.value = PERIOD.ownRange;
@@ -885,6 +926,8 @@ function setDefaultPeriodForButton() {
     period.value = PERIOD.quarter;
   } else if (isWeekPeriod) {
     period.value = PERIOD.week;
+  } else if (isCustomPeriod) {
+    period.value = PERIOD.custom;
   } else {
     period.value = PERIOD.ownRange;
   }

package/ui.form-date-picker-range/services/dateRange.service.js

@@ -93,12 +93,10 @@ export function getWeekDateList(date, monthShortLocales = {}) {
     const isLastWeek = week + day === weeksInMonth;
 
     let monthFirstDayOfWeek = "";
-    let monthLastDayOfWeek = endOfWeekDate.toLocaleString("en-us", { month: "long" }).toLowerCase();
+    let monthLastDayOfWeek = endOfWeekDate.getMonth();
 
     if (isDayInPreviousMonth || isLastWeek) {
-      monthFirstDayOfWeek = startOfWeekDate
-        .toLocaleString("en-us", { month: "long" })
-        .toLowerCase();
+      monthFirstDayOfWeek = startOfWeekDate.getMonth();
     }
 
     const title = `${firstDayOfWeek} ${

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.152",
+  "version": "0.0.154",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1530,6 +1530,24 @@
               },
               "default": "null"
             },
+            {
+              "name": "openDirectionX",
+              "description": "Datepicker open direction on x-axis.",
+              "value": {
+                "kind": "expression",
+                "type": "'auto' | 'left' | 'right'"
+              },
+              "default": "auto"
+            },
+            {
+              "name": "openDirectionY",
+              "description": "Datepicker open direction on y-axis.",
+              "value": {
+                "kind": "expression",
+                "type": "'auto' | 'top' | 'bottom'"
+              },
+              "default": "auto"
+            },
             {
               "name": "minDate",
               "description": "Min date in format date string or Date.",
@@ -1683,6 +1701,24 @@
               },
               "default": "{\n  range: { from: 0, to: 0 },\n  label: \"\",\n  description: \"\"\n}"
             },
+            {
+              "name": "openDirectionX",
+              "description": "Datepicker open direction on x-axis.",
+              "value": {
+                "kind": "expression",
+                "type": "'auto' | 'left' | 'right'"
+              },
+              "default": "auto"
+            },
+            {
+              "name": "openDirectionY",
+              "description": "Datepicker open direction on y-axis.",
+              "value": {
+                "kind": "expression",
+                "type": "'auto' | 'top' | 'bottom'"
+              },
+              "default": "auto"
+            },
             {
               "name": "variant",
               "description": "The variant of the date picker.",