vueless 0.0.223 → 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.223",
+  "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.stories.js

@@ -148,8 +148,15 @@ Default.args = {
   name: "Default",
 };
 
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+  name: "Disabled",
+  disabled: true,
+};
+
 export const label = DefaultTemplate.bind({});
 label.args = {
+  name: "Label",
   label: "Label",
   description: "description",
 };

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. -->
@@ -223,15 +224,15 @@ function updateSelectedValue(value, checked) {
   }
 }
 
-provide("toggleType", readonly(type));
-provide("togglePill", () => props.pill);
-provide("toggleName", () => props.name);
-provide("toggleSize", () => props.size);
-provide("toggleBlock", () => props.block);
-provide("toggleSquare", () => props.square);
-provide("toggleVariant", () => props.variant);
-provide("toggleDisabled", () => props.disabled);
-provide("toggleSeparated", () => props.separated);
+provide("getToggleName", () => props.name);
+provide("getToggleType", () => type.value);
+provide("getToggleSize", () => props.size);
+provide("getTogglePill", () => props.pill);
+provide("getToggleBlock", () => props.block);
+provide("getToggleSquare", () => props.square);
+provide("getToggleVariant", () => props.variant);
+provide("getToggleDisabled", () => props.disabled);
+provide("getToggleSeparated", () => props.separated);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),

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

@@ -1,20 +1,18 @@
 import { computed, toValue } from "vue";
 import useUI from "../../composable.ui";
-import { cx, cva } from "../../service.ui";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export default function useAttrs(props, { selectedValue, separated, variant }) {
+export default function useAttrs(props, { isSelected, separated, variant }) {
   const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
     defaultConfig,
     () => 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];
@@ -24,6 +22,7 @@ export default function useAttrs(props, { selectedValue, separated, variant }) {
           ...props,
           variant: toValue(variant),
           separated: toValue(separated),
+          selected: isSelected.value,
         });
       }
 
@@ -31,29 +30,6 @@ export default function useAttrs(props, { selectedValue, separated, variant }) {
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "button") {
-      const selectedClasses = computed(() =>
-        cva(config.value.selected)({
-          ...props,
-          variant: toValue(variant),
-          separated: toValue(separated),
-        }),
-      );
-
-      const buttonAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => {
-        const isSelected = Array.isArray(selectedValue?.value)
-          ? selectedValue?.value?.includes(props.value)
-          : selectedValue?.value === props.value;
-
-        return {
-          ...buttonAttrs.value,
-          class: cx([buttonAttrs.value.class, isSelected && selectedClasses.value]),
-        };
-      });
-    }
   }
 
   return {

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
@@ -21,18 +22,29 @@ export default /*tw*/ {
         `,
       },
     },
-  },
-  input: "p-0 m-0 size-0 invisible absolute",
-  selected: {
-    base: "relative disabled:z-10",
-    variants: {
-      variant: {
-        primary: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
-        secondary: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
-        thirdary: " bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+    compoundVariants: [
+      {
+        selected: true,
+        class: "relative disabled:z-10",
       },
-    },
+      {
+        selected: true,
+        variant: "primary",
+        class: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+      },
+      {
+        selected: true,
+        variant: "secondary",
+        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+      },
+      {
+        selected: true,
+        variant: "thirdary",
+        class: "bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+      },
+    ],
   },
+  input: "p-0 m-0 size-0 invisible absolute",
   defaultVariants: {
     variant: "primary",
     type: "radio",

package/ui.button-toggle-item/index.vue

@@ -5,11 +5,11 @@
     color="grayscale"
     variant="secondary"
     :label="label"
-    :size="toValue(size)"
-    :pill="toValue(pill)"
-    :block="toValue(block)"
-    :square="toValue(square)"
-    :disabled="toValue(disabled)"
+    :size="getToggleSize()"
+    :pill="getTogglePill()"
+    :block="getToggleBlock()"
+    :square="getToggleSquare()"
+    :disabled="getToggleDisabled()"
     v-bind="buttonAttrs"
     @click="onClickSetValue"
   >
@@ -22,12 +22,13 @@
       <input
         :id="id"
         v-model="selectedItem"
-        :name="name"
-        :type="type"
+        :name="getToggleName()"
+        :type="getToggleType()"
         :value="value"
-        :disabled="toValue(disabled)"
+        :disabled="getToggleDisabled()"
         v-bind="inputAttrs"
       />
+      {{ label }}
       <!-- @slot Use it to add something instead of the text. -->
       <slot name="default" />
     </template>
@@ -40,7 +41,7 @@
 </template>
 
 <script setup>
-import { inject, onMounted, ref, toValue } from "vue";
+import { computed, inject, onMounted, ref } from "vue";
 
 import UButton from "../ui.button";
 import UIService, { getRandomId } from "../service.ui";
@@ -121,37 +122,44 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const name = inject("toggleName", () => "toggle");
-const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
-const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
-const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
-const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
-const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
-const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
-const separated = inject("toggleSeparated", () => true);
-// eslint-disable-next-line vue/no-dupe-keys, prettier/prettier
-const disabled = inject("toggleDisabled", props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
+/* eslint-disable prettier/prettier, vue/max-len */
+const getToggleName = inject("getToggleName", () => "toggle");
+const getToggleType = inject("getToggleType", () => UIService.get(defaultConfig, UToggleItem).default.type);
+const getToggleSize = inject("getToggleSize", () => UIService.get(defaultConfig, UToggleItem).default.size);
+const getTogglePill = inject("getTogglePill", () => UIService.get(defaultConfig, UToggleItem).default.pill);
+const getToggleBlock = inject("getToggleBlock", () => UIService.get(defaultConfig, UToggleItem).default.block);
+const getToggleSquare = inject("getToggleSquare", () => UIService.get(defaultConfig, UToggleItem).default.square);
+const getToggleVariant = inject("getToggleVariant",() => UIService.get(defaultConfig, UToggleItem).default.variant);
+const getToggleSeparated = inject("getToggleSeparated", () => true);
+const getToggleDisabled = inject("getToggleDisabled", () => props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
+/* eslint-enaable prettier/prettier, vue/max-len */
 
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const selectedItem = ref("");
 
-const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant });
+const isSelected = computed(() => {
+  return Array.isArray(selectedValue?.value)
+    ? selectedValue?.value?.includes(props.value)
+    : selectedValue?.value === props.value;
+});
+
+const { buttonAttrs, inputAttrs } = useAttrs(props, {
+  isSelected,
+  separated: getToggleSeparated,
+  variant: getToggleVariant
+});
 
 onMounted(() => {
-  if (type.value === TYPE_RADIO) {
-    selectedItem.value = selectedValue ? selectedValue.value : selectedItem.value;
-  } else {
-    selectedItem.value = selectedValue
-      ? selectedValue.value.includes(props.value)
-      : selectedItem.value;
-  }
+  selectedItem.value = getToggleType() === TYPE_RADIO
+  ? selectedValue?.value || selectedItem.value
+  : selectedValue?.value?.includes(props.value) || selectedItem.value;
 });
 
 function onClickSetValue() {
-  if (type.value === TYPE_RADIO) {
-    selectedItem.value = props.value;
-  }
+  selectedItem.value = getToggleType() === TYPE_RADIO 
+  ? props.value 
+  : selectedValue?.value?.includes(props.value) || selectedItem.value;
 
   updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);
 

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.223",
+  "version": "0.0.225",
   "contributions": {
     "html": {
       "description-markup": "markdown",