diff --git a/packages/docs-next/documentation/customisation.md b/packages/docs-next/documentation/customisation.md index 7104bb2d1..1b1509b0b 100644 --- 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 index df70ffcd4..7a27c5806 100644 --- 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 index 96773357e..e4c9eae74 100644 --- 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; - data: Record; - computed: Record; -}; +export type ComponentProps = Record; 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 index 9ec5b56c5..49bd2551f 100644 --- 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