Extend properties

Regle offers a way to extend the default validation properties with defineRegleConfig.

For more information about global config check here

Extending field properties

import { defineRegleConfig } from '@regle/core';

const { useRegle } = defineRegleConfig({
  shortcuts: {
    fields: {
      $isRequired: (field) => field.$rules.required?.$active ?? false;
    }
  }
});

const { r$ } = useRegle({ name: '' }, {
  name: {
    required
  }
})

r$.name.$isR
e

Extending nested object properties

import { defineRegleConfig } from '@regle/core';

const { useRegle } = defineRegleConfig({
  shortcuts: {
    nested: {
      $isEmpty: (nest) => Object.keys(nest.$fields).length === 0;
    }
  }
});

const { r$ } = useRegle({ user: {} } as { user: { firstName?: string, lastName?: string } }, {
  user: {
    firstName: {required}
  }
})

r$.user.$is

Extending collections properties

import { defineRegleConfig } from '@regle/core';

const { useRegle } = defineRegleConfig({
  shortcuts: {
    collections: {
      $isArrayEmpty: (collection) => collection.$each.length === 0;
    }
  }
});

const { r$ } = useRegle({ projects: [{ name: '' }] }, {
  projects: {
    $each: {
      name: { required }
    }
  }
})

r$.projects.$is

Typing shortcuts in component props

When defining shortcuts, it can be hard to type props in common Input components. For this Regle provides a type helper that can ease the declaration of these props.

config.ts

import { defineRegleConfig } from '@regle/core';
export const { useRegle: useCustomRegle } = defineRegleConfig({
  shortcuts: {
    fields: {
      $test: () => true,
    },
  },
});

myInput.vue

<script lang='ts' setup>
import type { RegleCustomFieldStatus } from '@regle/core';
import {useCustomRegle} from './config'

const props = defineProps<{
  field: RegleCustomFieldStatus<typeof useCustomRegle, string, 'required'>;
  placeholder: string;
}>();

props.field.$test
</script>