vueless 0.0.153 → 0.0.155

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

@@ -1,13 +1,17 @@
 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 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,
@@ -15,7 +19,10 @@ export default function useAttrs(props, { isShownCalendar }) {
   });
 
   const calendarWrapperClasses = computed(() =>
-    cvaCalendarWrapper({ openDirection: props.openDirection }),
+    cvaCalendarWrapper({
+      openDirectionY: openDirectionY.value,
+      openDirectionX: openDirectionX.value,
+    }),
   );
 
   const calendarAttrs = getAttrs("calendar", {

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

@@ -8,12 +8,15 @@ export default /*tw*/ {
   },
   calendar: {
     wrapper: {
-      base: "absolute z-40 mt-2",
+      base: "absolute z-40 my-2",
       variants: {
-        openDirection: {
+        openDirectionX: {
           left: "left-0",
           right: "right-0",
         },
+        openDirectionY: {
+          top: "bottom-full mt-0",
+        },
       },
     },
   },
@@ -109,7 +112,8 @@ export default /*tw*/ {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
-    openDirection: "left",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     maxDate: undefined,

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

@@ -76,11 +76,29 @@ const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
     <URow class="!flex-col">
       <UDatePicker
         class="w-full"
-        v-for="(direction, index) in directions"
-        :open-direction="direction"
+        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"
-        :key="index"
       />
     </URow>
   `,

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";
@@ -102,12 +103,21 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker open direction.
-   * @values left, right
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
    */
-  openDirection: {
+  openDirectionX: {
     type: String,
-    default: UIService.get(defaultConfig, UDatePicker).default.openDirection,
+    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,
   },
 
   /**
@@ -220,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,
@@ -233,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/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -4,18 +4,24 @@ 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({ openDirection: props.openDirection }));
+  const menuClasses = computed(() =>
+    cvaMenu({ openDirectionY: openDirectionY.value, openDirectionX: openDirectionX.value }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");

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

@@ -20,12 +20,15 @@ export default /*tw*/ {
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
   menu: {
-    base: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    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: {
-      openDirection: {
+      openDirectionX: {
         left: "left-0",
         right: "right-0",
       },
+      openDirectionY: {
+        top: "bottom-full mt-0",
+      },
     },
   },
   menuTransition: {
@@ -193,7 +196,8 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     variant: "button",
-    openDirection: "left",
+    openDirectionX: "auto",
+    openDirectionY: "auto",
     timepicker: false,
     disabled: false,
     dateFormat: "d.m.Y",

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

@@ -91,11 +91,29 @@ const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
     <URow class="!flex-col">
       <UDatePickerRange
         class="w-full"
-        v-for="(direction, index) in directions"
-        :open-direction="direction"
+        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"
-        :key="index"
       />
     </URow>
   `,

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 {
@@ -273,12 +274,21 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker open direction.
-   * @values left, right
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
    */
-  openDirection: {
+  openDirectionX: {
     type: String,
-    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirection,
+    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,
   },
 
   /**
@@ -392,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,
@@ -414,7 +441,7 @@ const {
   rangeInputAttrs,
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
-} = useAttrs(props, { isShownMenu });
+} = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
@@ -422,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,
@@ -444,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));
 
@@ -602,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}`;
   }
@@ -791,7 +814,12 @@ function getPeriodDateListClasses() {
 function activate() {
   isShownMenu.value = true;
 
-  nextTick(() => menuRef.value.focus());
+  nextTick(() => {
+    adjustPositionY();
+    adjustPositionX();
+
+    menuRef.value.focus();
+  });
 }
 
 function deactivate() {

package/ui.form-input/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-file/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-money/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-number/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-rating/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-search/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-label/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-radio/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-radio-card/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-radio-group/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-select/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-switch/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-textarea/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-avatar/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-icon/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-logo/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader-rendering/Docs.mdx

@@ -41,3 +41,6 @@ loaderRenderingOn();
 // hide loader
 loaderRenderingOff();
 `} language="jsx" dark />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader-top/Docs.mdx

@@ -12,9 +12,6 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
-<Source code={getSource(defaultConfig)} language="jsx" dark />
-
 ## Control loader
 You can control loader state using *useLoaderRendering* composable.
 
@@ -29,9 +26,12 @@ const {
 } = useLoaderTop();
 `} language="jsx" dark />
 
-## Control outside of component
-You can control loader state outside of vue components using following methods.
+## Control outside a component
+You can control loader state outside vue components using the following methods.
 
 <Source code={`
 import { loaderTopOn, loaderTopOff } from "vueless";
 `} language="jsx" dark />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-pagination/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-progress/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-stepper/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-tab/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-tabs/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.other-dot/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-alert/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-badge/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-block/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />