vueless 0.0.392 → 0.0.394

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.394",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.container-col/UCol.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 
   /**
-   * Nested items align (flex align-items).
+   * Items horizontal align (align-items).
    * @values start, end, center, stretch, baseline
    */
   align: {
@@ -34,7 +34,16 @@ const props = defineProps({
   },
 
   /**
-   * Nested items horizontally align (flex justify-content).
+   * Items horizontal align for multi-row flex containers (align-content).
+   * @values start, end, center, around, evenly, between, normal, stretch, baseline
+   */
+  content: {
+    type: String,
+    default: getDefault(defaultConfig, UCol).content,
+  },
+
+  /**
+   * Items vertical align (justify-content).
    * @values start, end, center, around, evenly, between
    */
   justify: {

package/ui.container-col/config.js

@@ -36,11 +36,23 @@ export default /*tw*/ {
         evenly: "justify-evenly",
         between: "justify-between",
       },
+      content: {
+        end: "content-end",
+        start: "content-start",
+        center: "content-center",
+        around: "content-around",
+        evenly: "content-evenly",
+        normal: "content-normal",
+        stretch: "content-stretch",
+        between: "content-between",
+        baseline: "content-baseline",
+      },
     },
   },
   defaults: {
     gap: "md",
     align: "start",
+    content: "start",
     justify: "start",
     wrap: false,
     reverse: false,

package/ui.container-row/URow.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 
   /**
-   * Nested items vertical align (flex align-items).
+   * Items vertical align (align-items).
    * @values start, end, center, stretch, baseline
    */
   align: {
@@ -34,7 +34,16 @@ const props = defineProps({
   },
 
   /**
-   * Nested items horizontally align (flex justify-content).
+   * Items vertical align for multi-row flex containers (align-content).
+   * @values start, end, center, around, evenly, between, normal, stretch, baseline
+   */
+  content: {
+    type: String,
+    default: getDefault(defaultConfig, URow).content,
+  },
+
+  /**
+   * Items horizontally align (justify-content).
    * @values start, end, center, around, evenly, between
    */
   justify: {

package/ui.container-row/config.js

@@ -37,11 +37,23 @@ export default /*tw*/ {
         evenly: "justify-evenly",
         between: "justify-between",
       },
+      content: {
+        end: "content-end",
+        start: "content-start",
+        center: "content-center",
+        around: "content-around",
+        evenly: "content-evenly",
+        normal: "content-normal",
+        stretch: "content-stretch",
+        between: "content-between",
+        baseline: "content-baseline",
+      },
     },
   },
   defaults: {
     gap: "md",
     align: "start",
+    content: "start",
     justify: "start",
     wrap: false,
     reverse: false,

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.394",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1852,16 +1852,25 @@
             },
             {
               "name": "align",
-              "description": "Nested items align (flex align-items).",
+              "description": "Items horizontal align (align-items).",
               "value": {
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
               },
               "default": "start"
             },
+            {
+              "name": "content",
+              "description": "Items horizontal align for multi-row flex containers (align-content).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'around' | 'evenly' | 'between' | 'normal' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "justify",
-              "description": "Nested items horizontally align (flex justify-content).",
+              "description": "Items vertical align (justify-content).",
               "value": {
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'around' | 'evenly' | 'between'"
@@ -7258,16 +7267,25 @@
             },
             {
               "name": "align",
-              "description": "Nested items vertical align (flex align-items).",
+              "description": "Items vertical align (align-items).",
               "value": {
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
               },
               "default": "start"
             },
+            {
+              "name": "content",
+              "description": "Items vertical align for multi-row flex containers (align-content).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'around' | 'evenly' | 'between' | 'normal' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "justify",
-              "description": "Nested items horizontally align (flex justify-content).",
+              "description": "Items horizontally align (justify-content).",
               "value": {
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'around' | 'evenly' | 'between'"