fix: update ClassFunction second parameter from context to props (#743)

* update ComponentContext to ComponentProps
oruga-ui · Jan 25, 2024 · 035b619 · 035b619
1 parent aeba981
commit 035b619
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 38 deletions.
diff --git a/packages/docs-next/documentation/customisation.md b/packages/docs-next/documentation/customisation.md
@@ -90,19 +90,19 @@ createApp(...)
     });
 ```
 
-For a better customisation experience, this function accepts the component's `context` containing its read-only attributes (`props`, `data` and `computed`) as a second parameter. For example using [Bootstrap](https://getbootstrap.com/) you may want to apply variants to buttons only when the element is not outlined:
+For a better customisation experience, this function accepts the component's read-only `props` as a second parameter. For example using [Bootstrap](https://getbootstrap.com/) you may want to apply variants to buttons only when the element is not outlined:
 
 ```js
 createApp(...)
     .use(Oruga, {
         input: {
-            rootClass: (_, context) => {
-                if (context.computed.hasIconRight) {
+            rootClass: (_, props) => {
+                if (props.iconRight) {
                     return 'has-icons-right';
                 }
             },
-            variantClass: (variant, context) => {
-                if (!context.props.outlined) {
+            variantClass: (variant, props) => {
+                if (!props.outlined) {
                     return `btn-${variant}`;
                 }
             }

diff --git a/packages/oruga-next/src/composables/useComputedClass.ts b/packages/oruga-next/src/composables/useComputedClass.ts
@@ -1,10 +1,10 @@
 import { getCurrentInstance, type ComponentInternalInstance } from "vue";
 import { getOptions } from "@/utils/config";
-import { blankIfUndefined, endsWith, getValueByPath } from "@/utils/helpers";
+import { blankIfUndefined, getValueByPath } from "@/utils/helpers";
 
 import type {
     ClassDefinition,
-    ComponentContext,
+    ComponentProps,
     TransformFunction,
 } from "@/types";
 
@@ -16,11 +16,7 @@ const defaultSuffixProcessor = (input: string, suffix: string): string => {
         .join(" ");
 };
 
-const getContext = (vm: ComponentInternalInstance): ComponentContext => {
-    const computedNames = vm.proxy?.$options.computed
-        ? Object.keys(vm.proxy.$options.computed)
-        : [];
-
+const getProps = (vm: ComponentInternalInstance): ComponentProps => {
     let props = vm.proxy.$props;
 
     // get all props which ends with "Props", these are compressed parent props
@@ -29,18 +25,7 @@ const getContext = (vm: ComponentInternalInstance): ComponentContext => {
         .filter((key) => key.endsWith("Props"))
         .forEach((key) => (props = { ...props, ...props[key] }));
 
-    const computedProps = computedNames
-        .filter((e) => !endsWith(e, "Classes"))
-        .reduce((o, key) => {
-            o[key] = vm.proxy[key];
-            return o;
-        }, {});
-
-    return {
-        props: props,
-        data: vm.proxy.$data,
-        computed: computedProps,
-    };
+    return props;
 };
 
 /**
@@ -112,8 +97,8 @@ export function useComputedClass(
         currentClass = currentClass.join(" ");
     }
     if (typeof currentClass === "function") {
-        const context = getContext(vm);
-        currentClass = currentClass(suffix, context);
+        const props = getProps(vm);
+        currentClass = currentClass(suffix, props);
     } else {
         currentClass = defaultSuffixProcessor(currentClass as string, suffix);
     }
@@ -123,8 +108,8 @@ export function useComputedClass(
         globalClass = globalClass.join(" ");
     }
     if (typeof globalClass === "function") {
-        const context = getContext(vm);
-        globalClass = globalClass(suffix, context);
+        const props = getProps(vm);
+        globalClass = globalClass(suffix, props);
     } else {
         globalClass = defaultSuffixProcessor(globalClass as string, suffix);
     }

diff --git a/packages/oruga-next/src/types/config.ts b/packages/oruga-next/src/types/config.ts
@@ -2,15 +2,11 @@ import type { ValidatableFormElement } from "@/composables";
 import type { IconConfig } from "@/utils/icons";
 import type { DynamicComponent } from "./utils";
 
-export type ComponentContext = {
-    props: Record<string, any>;
-    data: Record<string, any>;
-    computed: Record<string, any>;
-};
+export type ComponentProps = Record<string, any>;
 
 export type ClassFunction = (
     suffix: string,
-    ctx: ComponentContext,
+    props: ComponentProps,
 ) => string | undefined;
 
 export type ClassObject = {

diff --git a/packages/oruga-next/src/utils/helpers.ts b/packages/oruga-next/src/utils/helpers.ts
@@ -211,10 +211,6 @@ export function escapeRegExpChars(value: string): string {
     return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 }
 
-export function endsWith(str: string, suffix: string): boolean {
-    return str.indexOf(suffix, str.length - suffix.length) !== -1;
-}
-
 export function toCssDimension(width: string | number): string | number {
     return width === undefined
         ? null