fix: convert useComputedClass to defineClass (#725)

* refactor useComputedClass to defineClass

* update PropBind type definition to ClassBind

* enhance button base example

* update docs dependencies

packages/docs-next/.vitepress/theme/examples/button/base.vue

@@ -1,11 +1,49 @@
 <script setup>
+import { reactive } from "vue";
+
 const clickMe = () => {
     alert("Clicked!");
 };
+
+const settings = reactive({
+    rounded: false,
+    tooltip: true,
+    variant: "warning",
+    size: "medium",
+});
 </script>
 
 <template>
     <section>
-        <o-button @click="clickMe">Click Me</o-button>
+        <o-field grouped>
+            <o-field>
+                <o-switch v-model="settings.rounded" label="Rounded" />
+            </o-field>
+            <o-field label="Size">
+                <o-select v-model="settings.size">
+                    <option value="small">small</option>
+                    <option value="default">default</option>
+                    <option value="medium">medium</option>
+                    <option value="large">large</option>
+                </o-select>
+            </o-field>
+            <o-field label="Variant">
+                <o-select v-model="settings.variant">
+                    <option value="default">default</option>
+                    <option value="primary">primary</option>
+                    <option value="success">success</option>
+                    <option value="info">info</option>
+                    <option value="warning">warning</option>
+                    <option value="danger">danger</option>
+                </o-select>
+            </o-field>
+        </o-field>
+        <o-button
+            :variant="settings.variant"
+            :size="settings.size"
+            :rounded="settings.rounded"
+            @click="clickMe">
+            Click Me
+        </o-button>
     </section>
 </template>

packages/docs-next/package.json

@@ -38,8 +38,8 @@
     "prettier": "^3.1.0",
     "sass": "^1.69.5",
     "typescript": "5.3.2",
-    "vitepress": "^1.0.0-rc.31",
-    "vue": "^3.3.10",
+    "vitepress": "^1.0.0-rc.40",
+    "vue": "^3.4.15",
     "vue-docgen-cli": "4.67.0",
     "vue-tsc": "^1.8.25"
   }

packages/oruga-next/src/components/autocomplete/Autocomplete.vue

@@ -22,14 +22,14 @@ import { getValueByPath } from "@/utils/helpers";
 import { isClient } from "@/utils/ssr";
 import {
     unrefElement,
-    useComputedClass,
+    defineClasses,
     useVModelBinding,
     useInputHandler,
     useDebounce,
     useEventListener,
 } from "@/composables";
 
-import type { ComponentClass, DynamicComponent, PropBind } from "@/types";
+import type { ComponentClass, DynamicComponent, ClassBind } from "@/types";
 
 /**
  * Extended input that provide suggestions while the user types
@@ -728,48 +728,39 @@ const inputBind = computed(() => ({
     ...props.inputClasses,
 }));
 
-const rootClasses = computed(() => [useComputedClass("rootClass", "o-acp")]);
+const rootClasses = defineClasses(["rootClass", "o-acp"]);
 
-const itemClasses = computed(() => [
-    useComputedClass("itemClass", "o-acp__item"),
-]);
+const itemClasses = defineClasses(["itemClass", "o-acp__item"]);
 
-const itemEmptyClasses = computed(() => [
-    ...itemClasses.value,
-    useComputedClass("itemEmptyClass", "o-acp__item--empty"),
+const itemEmptyClasses = defineClasses([
+    "itemEmptyClass",
+    "o-acp__item--empty",
 ]);
 
-const itemGroupClasses = computed(() => [
-    ...itemClasses.value,
-    useComputedClass("itemGroupTitleClass", "o-acp__item-group-title"),
+const itemGroupClasses = defineClasses([
+    "itemGroupTitleClass",
+    "o-acp__item-group-title",
 ]);
 
-const itemHeaderClasses = computed(() => [
-    ...itemClasses.value,
-    useComputedClass("itemHeaderClass", "o-acp__item-header"),
-    {
-        [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
-            headerHovered.value,
-    },
-]);
+const itemHeaderClasses = defineClasses(
+    ["itemHeaderClass", "o-acp__item-header"],
+    ["itemHoverClass", "o-acp__item--hover", null, headerHovered],
+);
 
-const itemFooterClasses = computed(() => [
-    ...itemClasses.value,
-    useComputedClass("itemFooterClass", "o-acp__item-footer"),
-    {
-        [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
-            footerHovered.value,
-    },
-]);
+const itemFooterClasses = defineClasses(
+    ["itemFooterClass", "o-acp__item-footer"],
+    ["itemHoverClass", "o-acp__item--hover", null, footerHovered],
+);
+
+function itemOptionClasses(option): ClassBind[] {
+    const optionClasses = defineClasses([
+        "itemHoverClass",
+        "o-acp__item--hover",
+        null,
+        toRaw(option) === toRaw(hoveredOption.value),
+    ]);
 
-function itemOptionClasses(option): PropBind {
-    return [
-        ...itemClasses.value,
-        {
-            [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
-                toRaw(option) === toRaw(hoveredOption.value),
-        },
-    ];
+    return [...itemClasses.value, ...optionClasses.value];
 }
 </script>
 
@@ -829,7 +820,7 @@ function itemOptionClasses(option): PropBind {
             :tag="itemTag"
             aria-role="button"
             :tabindex="0"
-            :class="itemHeaderClasses"
+            :class="[...itemClasses, ...itemHeaderClasses]"
             @click="(v, e) => selectHeaderOrFoterByClick(e, 'header')">
             <!--
                 @slot Define an additional header
@@ -842,7 +833,7 @@ function itemOptionClasses(option): PropBind {
                 v-if="element.group"
                 :key="groupindex + 'group'"
                 :tag="itemTag"
-                :class="itemGroupClasses">
+                :class="[...itemClasses, ...itemGroupClasses]">
                 <!--
                     @slot Override the option grpup
                     @binding {object} group - options group
@@ -888,7 +879,7 @@ function itemOptionClasses(option): PropBind {
         <o-dropdown-item
             v-if="isEmpty && $slots.empty"
             :tag="itemTag"
-            :class="itemEmptyClasses">
+            :class="[...itemClasses, ...itemEmptyClasses]">
             <!--
                 @slot Define content for empty state 
             -->
@@ -901,7 +892,7 @@ function itemOptionClasses(option): PropBind {
             :tag="itemTag"
             aria-role="button"
             :tabindex="0"
-            :class="itemFooterClasses"
+            :class="[...itemClasses, ...itemFooterClasses]"
             @click="(v, e) => selectHeaderOrFoterByClick(e, 'footer')">
             <!--
                 @slot Define an additional footer

packages/oruga-next/src/components/button/Button.vue

@@ -5,7 +5,7 @@ import OIcon from "../icon/Icon.vue";
 
 import { baseComponentProps } from "@/utils/SharedProps";
 import { getOption } from "@/utils/config";
-import { useComputedClass } from "@/composables";
+import { defineClasses } from "@/composables";
 
 import type { ComponentClass } from "@/types";
 
@@ -167,66 +167,59 @@ const computedDisabled = computed(() => (props.disabled ? true : null));
 
 // --- Computed Component Classes ---
 
-const rootClasses = computed(() => [
-    useComputedClass("rootClass", "o-btn"),
-    {
-        [useComputedClass("sizeClass", "o-btn--", props.size)]: props.size,
-    },
-    {
-        [useComputedClass("variantClass", "o-btn--", props.variant)]:
-            props.variant,
-    },
-    {
-        [useComputedClass("outlinedClass", "o-btn--outlined")]:
-            props.outlined && !props.variant,
-    },
-    {
-        [useComputedClass("invertedClass", "o-btn--inverted")]:
-            props.inverted && !props.variant,
-    },
-    {
-        [useComputedClass("outlinedClass", "o-btn--outlined-", props.variant)]:
-            props.outlined && props.variant,
-    },
-    {
-        [useComputedClass("invertedClass", "o-btn--inverted-", props.variant)]:
-            props.inverted && props.variant,
-    },
-    {
-        [useComputedClass("expandedClass", "o-btn--expanded")]: props.expanded,
-    },
-    {
-        [useComputedClass("loadingClass", "o-btn--loading")]: props.loading,
-    },
-    {
-        [useComputedClass("roundedClass", "o-btn--rounded")]: props.rounded,
-    },
-    {
-        [useComputedClass("disabledClass", "o-btn--disabled")]: props.disabled,
-    },
-]);
+const rootClasses = defineClasses(
+    ["rootClass", "o-btn"],
+    [
+        "sizeClass",
+        "o-btn--",
+        computed(() => props.size),
+        computed(() => !!props.size),
+    ],
+    [
+        "variantClass",
+        "o-btn--",
+        computed(() => props.variant),
+        computed(() => !!props.variant),
+    ],
+    [
+        "outlinedClass",
+        "o-btn--outlined",
+        null,
+        computed(() => props.outlined && !props.variant),
+    ],
+    [
+        "invertedClass",
+        "o-btn--inverted",
+        null,
+        computed(() => props.inverted && !props.variant),
+    ],
+    [
+        "outlinedClass",
+        "o-btn--outlined-",
+        computed(() => props.variant),
+        computed(() => props.outlined && !!props.variant),
+    ],
+    [
+        "invertedClass",
+        "o-btn--inverted-",
+        computed(() => props.variant),
+        computed(() => props.inverted && !!props.variant),
+    ],
+    ["expandedClass", "o-btn--expanded", null, computed(() => props.expanded)],
+    ["loadingClass", "o-btn--loading", null, computed(() => props.loading)],
+    ["roundedClass", "o-btn--rounded", null, computed(() => props.rounded)],
+    ["disabledClass", "o-btn--disabled", null, computed(() => props.disabled)],
+);
 
-const labelClasses = computed(() => [
-    useComputedClass("labelClass", "o-btn__label"),
-]);
+const labelClasses = defineClasses(["labelClass", "o-btn__label"]);
 
-const iconClasses = computed(() => [
-    useComputedClass("iconClass", "o-btn__icon"),
-]);
+const iconClasses = defineClasses(["iconClass", "o-btn__icon"]);
 
-const iconLeftClasses = computed(() => [
-    ...iconClasses.value,
-    useComputedClass("iconLeftClass", "o-btn__icon-left"),
-]);
+const iconLeftClasses = defineClasses(["iconLeftClass", "o-btn__icon-left"]);
 
-const iconRightClasses = computed(() => [
-    ...iconClasses.value,
-    useComputedClass("iconRightClass", "o-btn__icon-right"),
-]);
+const iconRightClasses = defineClasses(["iconRightClass", "o-btn__icon-right"]);
 
-const wrapperClasses = computed(() => [
-    useComputedClass("wrapperClass", "o-btn__wrapper"),
-]);
+const wrapperClasses = defineClasses(["wrapperClass", "o-btn__wrapper"]);
 </script>
 
 <template>
@@ -244,7 +237,7 @@ const wrapperClasses = computed(() => [
                 :icon="iconLeft"
                 :size="size"
                 :both="iconBoth"
-                :class="iconLeftClasses" />
+                :class="[...iconClasses, ...iconLeftClasses]" />
             <span v-if="label || $slots.default" :class="labelClasses">
                 <!--
                     @slot Override the label, default is label prop 
@@ -257,7 +250,7 @@ const wrapperClasses = computed(() => [
                 :icon="iconRight"
                 :size="size"
                 :both="iconBoth"
-                :class="iconRightClasses" />
+                :class="[...iconClasses, ...iconRightClasses]" />
         </span>
     </component>
 </template>