vueless 0.0.255 → 0.0.257

package/composable.autoPosition/index.js

@@ -1,4 +1,4 @@
-import { computed, toValue } from "vue";
+import { computed, toValue, ref } from "vue";
 
 export const POSITION = {
   left: "left",
@@ -14,10 +14,8 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
   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 preferredOpenDirectionY = ref(localPreferredPosition.value?.y || POSITION.bottom);
+  const preferredOpenDirectionX = ref(localPreferredPosition.value?.x || POSITION.left);
 
   const isTop = computed(() => {
     if (localPosition.value.y !== POSITION.auto) {
@@ -45,7 +43,7 @@ export function useAutoPosition(anchorElement, targetElement, position, preferre
 
   const isRight = computed(() => {
     if (localPosition.value.x !== POSITION.auto) {
-      return localPosition.value.y === POSITION.right;
+      return localPosition.value.x === POSITION.right;
     }
 
     return preferredOpenDirectionX.value === POSITION.right;

package/composable.ui/index.js

@@ -20,7 +20,7 @@ import {
 } from "../service.ui";
 
 import { cloneDeep } from "../service.helper";
-import { STRATEGY_TYPE, SYSTEM_CONFIG_KEY } from "../constants";
+import { STRATEGY_TYPE, CVA_CONFIG_KEY, SYSTEM_CONFIG_KEY } from "../constants";
 
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):
@@ -88,12 +88,15 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      // TODO: Uncomment and add into `cx` when getAttrs as a function will be resolved.
-      // const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
 
+      // TODO: remove `getBaseClasses(configKeyValue)` after migration to `setDynamicVars`
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([getBaseClasses(configKeyValue), toValue(options?.classes), attrClass]),
+        class: cx([
+          getBaseClasses(configKeyValue),
+          getBaseClasses(toValue(options?.classes)),
+          attrClass,
+        ]),
         ...((isObject && configAttrs) || {}),
       };
     }
@@ -106,6 +109,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     getAttrs,
     getColor,
     setColor,
+    isCVA,
     isSystemKey,
     hasSlotContent,
   };
@@ -404,6 +408,19 @@ function isSystemKey(key) {
   );
 }
 
+/**
+ Check is config contains default CVA keys.
+ @param { Object | String } config
+ @returns { Boolean }
+ */
+function isCVA(config) {
+  if (typeof config !== "object") return false;
+
+  return Object.values(CVA_CONFIG_KEY).some((value) =>
+    Object.keys(config).some((key) => key === value),
+  );
+}
+
 /**
   Check if slot defined, and have a content.
   @param slot

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
   const slots = useSlots();
-  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,22 +15,19 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-            square: props.loading || props.square,
-            iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
-            iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
-          }),
-          props.color,
-        );
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+          square: props.loading || props.square,
+          iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
+          iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.button-link/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 export default function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
-  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -16,19 +16,16 @@ export default function useAttrs(props, { isActive, isExactActive }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.button-toggle/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -14,15 +14,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props, { isSelected, separated, variant }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,10 +15,10 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           variant: toValue(variant),
           separated: toValue(separated),
@@ -26,7 +26,7 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

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

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: "absolute z-40 my-2",
     variants: {
       openDirectionX: {
-        left: "left-0",
-        right: "right-0",
+        left: "right-0",
+        right: "left-0",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

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

@@ -18,8 +18,8 @@ export default /*tw*/ {
     base: "absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
       openDirectionX: {
-        left: "left-0",
-        right: "right-0",
+        left: "right-0",
+        right: "left-0",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

package/web-types.json

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