vueless 0.0.239 → 0.0.240

package/{composable.adjustElementPosition → composable.autoPosition}/index.js

@@ -1,4 +1,4 @@
-import { ref, computed, toValue } from "vue";
+import { computed, toValue } from "vue";
 
 export const POSITION = {
   left: "left",
@@ -8,20 +8,17 @@ export const POSITION = {
   auto: "auto",
 };
 
-export function useAdjustElementPosition(
-  anchorElement,
-  targetElement,
-  position,
-  preferredPosition,
-) {
-  const preferredOpenDirectionY = ref(preferredPosition?.y || POSITION.bottom);
-  const preferredOpenDirectionX = ref(preferredPosition?.x || POSITION.left);
-
+export function useAutoPosition(anchorElement, targetElement, position, preferredPosition) {
   const localAnchorElement = computed(() => toValue(anchorElement));
   const localTargetElement = computed(() => toValue(targetElement));
   const localPosition = computed(() => toValue(position));
   const localPreferredPosition = computed(() => toValue(preferredPosition));
 
+  const preferredOpenDirectionY = computed(() => {
+    return localPreferredPosition.value?.y || POSITION.bottomi;
+  });
+  const preferredOpenDirectionX = computed(() => localPreferredPosition.value?.x || POSITION.left);
+
   const isTop = computed(() => {
     if (localPosition.value.y !== POSITION.auto) {
       return localPosition.value.y === POSITION.top;

package/package.json

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

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

@@ -3,7 +3,7 @@ import { cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { POSITION } from "../../composable.adjustElementPosition";
+import { POSITION } from "../../composable.autoPosition";
 
 export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
   const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);

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

@@ -111,6 +111,7 @@ export default /*tw*/ {
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
+    labelAlign: "topInside",
     timepicker: false,
     disabled: false,
     dateFormat: undefined,

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

@@ -4,6 +4,7 @@
       :id="id"
       :key="isShownCalendar"
       v-model="userFormatDate"
+      :label-align="labelAlign"
       :label="label"
       :placeholder="placeholder"
       :error="error"
@@ -68,7 +69,7 @@ import { addDays, isSameDay } from "../ui.form-calendar/services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
-import { useAdjustElementPosition } from "../composable.adjustElementPosition";
+import { useAutoPosition } from "../composable.autoPosition";
 
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
@@ -85,6 +86,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePicker).default.labelAlign,
+  },
+
   /**
    * Datepicker placeholder.
    */
@@ -248,10 +258,10 @@ const calendarRef = ref(null);
 
 const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
 
-const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAutoPosition(
   wrapperRef,
   calendarWrapperRef,
-  { x: props.openDirectionX, y: props.openDirectionY },
+  computed(() => ({ x: props.openDirectionX, y: props.openDirectionY })),
   { x: "left", y: "bottom" },
 );
 

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

@@ -4,7 +4,7 @@ import { cx, cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { POSITION } from "../../composable.adjustElementPosition";
+import { POSITION } from "../../composable.autoPosition";
 
 export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
   const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);

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

@@ -151,7 +151,7 @@ export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
-  value: { from: new Date(2022, 2, 24), to: null },
+  value: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
 };
 
 export const DateFormat = DefaultTemplate.bind({});

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

@@ -259,7 +259,7 @@ import {
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
-import { useAdjustElementPosition } from "../composable.adjustElementPosition";
+import { useAutoPosition } from "../composable.autoPosition";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -443,17 +443,11 @@ const buttonPrevRef = ref(null);
 const buttonNextRef = ref(null);
 const inputRef = ref(null);
 
-const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAutoPosition(
   wrapperRef,
   menuRef,
-  {
-    x: props.openDirectionX,
-    y: props.openDirectionY,
-  },
-  {
-    x: "left",
-    y: "bottom",
-  },
+  computed(() => ({ x: props.openDirectionX, y: props.openDirectionY })),
+  { x: "left", y: "bottom" },
 );
 
 const {

package/ui.form-input/index.stories.js

@@ -100,14 +100,12 @@ const LabelPlacementTemplate = (args) => ({
     <UCol gap="xl">
       <UInput
         v-bind="args"
-        label="top"
-        :label-outside="true"
+        label-align="top"
       />
 
       <UInput
         v-bind="args"
-        label="topInside"
-        :label-outside="false"
+        label-align="topInside"
       />
     </UCol>
   `,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.239",
+  "version": "0.0.240",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2059,6 +2059,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
+              },
+              "default": "topInside"
+            },
             {
               "name": "placeholder",
               "description": "Datepicker placeholder.",