vueless 0.0.224 → 0.0.225

package/composable.ui/index.js

@@ -92,7 +92,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     watch(config, updateVuelessAttrs, { immediate: true });
     watch(props, updateVuelessAttrs);
-    options?.classes && watch(options?.classes, updateVuelessAttrs);
+    options?.classes?.value && watch(options?.classes, updateVuelessAttrs);
 
     function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];

package/package.json

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

package/ui.button-toggle/configs/default.config.js

@@ -1,4 +1,13 @@
 export default /*tw*/ {
+  label: {
+    component: "{ULabel}",
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
   items: {
     base: "flex flex-wrap",
     variants: {
@@ -13,8 +22,8 @@ export default /*tw*/ {
       separated: {
         false: `
           flex-nowrap -space-x-px gap-0
-          [&>:first-child]:rounded-l-lg  [&>:last-child]:rounded-r-lg
-          [&>:first-child>*>*]:rounded-l-lg  [&>:last-child>*>*]:rounded-r-lg
+          [&>:first-child]:rounded-l-lg [&>:last-child]:rounded-r-lg
+          [&>:first-child>*>*]:rounded-l-lg [&>:last-child>*>*]:rounded-r-lg
         `,
       },
     },
@@ -23,14 +32,6 @@ export default /*tw*/ {
       { separated: false, multiple: true, class: "space-x-px" },
     ],
   },
-  label: {
-    base: "{ULabel} flex flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   item: "{UToggleItem}",
   defaultVariants: {
     variant: "primary",

package/ui.button-toggle/index.vue

@@ -5,8 +5,9 @@
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
-    :data-cy="dataCy"
+    centred
     v-bind="labelAttrs"
+    :data-cy="dataCy"
   >
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->

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

@@ -9,12 +9,10 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
     () => props.config,
   );
 
-  const skipKeys = ["selected"];
-
   const attrs = {};
 
   for (const key in defaultConfig) {
-    if (isSystemKey(key) || skipKeys.includes(key)) continue;
+    if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
       const value = config.value[key];

package/ui.button-toggle-item/configs/default.config.js

@@ -1,7 +1,8 @@
 export default /*tw*/ {
   button: {
+    component: "{UButton}",
     base: `
-      {UButton} border-gray-300 font-normal
+      border-gray-300 font-normal
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
       focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-600 focus-within:ring-brand-600
       active:text-brand-700 active:border-brand-700 active:relative active:z-10

package/ui.form-calendar/composables/attrs.composable.js

@@ -45,6 +45,7 @@ export default function useAttrs(props) {
     }
 
     // TODO: Need to find other solution
+    // classes is not reactive here, which may cause problems in styling by `config` prop
     if (key === "day") {
       attrs[`${key}Attrs`] = (classes) => {
         return getAttrs("day", { classes }).value;

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

@@ -1,5 +1,5 @@
 import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import { cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
@@ -18,6 +18,8 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
       if (value.variants || value.compoundVariants) {
         return cva(value)({
           ...props,
+          openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+          openDirectionX: isRight.value ? POSITION.right : POSITION.left,
         });
       }
 
@@ -31,24 +33,14 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...inputAttrs.value,
-        class: cx([inputAttrs.value.class, isShownCalendar.value && config.value.inputFocus]),
+        config: {
+          ...inputAttrs.value.config,
+          ...(isShownCalendar.value ? config.value.inputFocused : {}),
+        },
       }));
     }
 
     if (key === "calendar") {
-      const calendarAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...calendarAttrs.value,
-        class: cx([
-          cva(config.value.calendar.wrapper)({
-            openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-            openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-          }),
-          calendarAttrs.value.class,
-        ]),
-      }));
-
       // This watcher rewrites default calendar locales with datepicker range locales
       // Watcher will not rewrite custom calendar locales
       watchEffect(() => {

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

@@ -1,20 +1,20 @@
 export default /*tw*/ {
   wrapper: "relative",
-  input: "",
-  inputFocus: {
+  input: "{UInput}",
+  inputFocused: {
+    component: "{UInput}",
     block: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
   },
   calendar: {
-    wrapper: {
-      base: "{UCalendar} absolute z-40 my-2",
-      variants: {
-        openDirectionX: {
-          left: "left-0",
-          right: "right-0",
-        },
-        openDirectionY: {
-          top: "bottom-full mt-0",
-        },
+    component: "{UCalendar}",
+    base: "absolute z-40 my-2",
+    variants: {
+      openDirectionX: {
+        left: "left-0",
+        right: "right-0",
+      },
+      openDirectionY: {
+        top: "bottom-full mt-0",
       },
     },
   },

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

@@ -251,14 +251,8 @@ const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
   calendarWrapperRef,
-  {
-    x: props.openDirectionX,
-    y: props.openDirectionY,
-  },
-  {
-    x: "left",
-    y: "bottom",
-  },
+  { x: props.openDirectionX, y: props.openDirectionY },
+  { x: "left", y: "bottom" },
 );
 
 defineExpose({

package/ui.form-input-search/configs/default.config.js

@@ -1,7 +1,8 @@
 export default /*tw*/ {
   input: {
+    component: "{UInput}",
     wrapper: "relative flex items-center justify-between w-full rounded-lg bg-gray-900 bg-opacity-5",
-    input: "{UInput} w-full",
+    input: "w-full",
     label: "w-full",
     rightSlot: "pr-0",
     leftSlot: "pl-0",

package/web-types.json

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