vueless 0.0.392 → 0.0.393

package/composables/useAutoPosition.js

@@ -31,7 +31,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
       return localPosition.value.x === POSITION.left;
     }
 
-    return preferredOpenDirectionX.value === POSITION.right;
+    return preferredOpenDirectionX.value === POSITION.left;
   });
 
   const isBottom = computed(() => {
@@ -60,12 +60,12 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
     const hasEnoughSpaceAbove =
       spaceAbove > localTargetElement.value.getBoundingClientRect().height;
 
-    if (localPreferredPosition.value.y === POSITION.top) {
+    if (localPreferredPosition.value.y === POSITION.bottom) {
       preferredOpenDirectionY.value =
         hasEnoughSpaceBelow || spaceBelow > spaceAbove ? POSITION.bottom : POSITION.top;
     }
 
-    if (localPreferredPosition.value.y === POSITION.bottom) {
+    if (localPreferredPosition.value.y === POSITION.top) {
       preferredOpenDirectionY.value =
         hasEnoughSpaceAbove || spaceAbove > spaceBelow ? POSITION.top : POSITION.bottom;
     }
@@ -79,12 +79,12 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
     const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
     const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
 
-    if (localPreferredPosition.value.x === POSITION.left) {
+    if (localPreferredPosition.value.x === POSITION.right) {
       preferredOpenDirectionX.value =
         hasEnoughSpaceRight || spaceRight > spaceLeft ? POSITION.right : POSITION.left;
     }
 
-    if (localPreferredPosition.value.x === POSITION.right) {
+    if (localPreferredPosition.value.x === POSITION.left) {
       preferredOpenDirectionX.value =
         hasEnoughSpaceLeft || spaceLeft > spaceRight ? POSITION.left : POSITION.right;
     }

package/package.json

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

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

@@ -14,7 +14,7 @@
       :size="size"
       :left-icon="leftIcon"
       :right-icon="rightIcon"
-      v-bind="inputAttrs"
+      v-bind="isShownCalendar ? activeInputAttrs : inputAttrs"
       @focus="activate"
     >
       <template #left>
@@ -317,7 +317,7 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 
 const elementId = props.id || useId();
 
-const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
+const { config, inputAttrs, activeInputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
   isShownCalendar,
   isTop,
   isRight,

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

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: "relative",
   input: "{UInput}",
-  inputFocused: {
+  activeInput: {
     component: "{UInput}",
-    block: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+    block: "ring-dynamic rounded-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   },
   calendar: {
     component: "{UCalendar}",

package/ui.form-date-picker/useAttrs.js

@@ -5,11 +5,8 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
-export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+export default function useAttrs(props, { isTop, isRight }) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
@@ -18,14 +15,7 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
     description: Boolean(props.description),
   }));
 
-  const extendingKeys = ["inputFocused"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
-
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    input: {
-      extend: computed(() => [isShownCalendar.value && extendingKeysClasses.inputFocused.value]),
-    },
-  });
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
   watchEffect(() => {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.392",
+  "version": "0.0.393",
   "contributions": {
     "html": {
       "description-markup": "markdown",