-
3 |
- {{ error }} 4 |
-
3 |
- 4 | {{ error }} 5 | 6 |
-
3 |
- 4 | {{ error }} 5 | 6 |
12 |
15 | -
4 |
- 5 | {{ error }} 6 | 7 |
-
4 |
- 5 | {{ error }} 6 | 7 |
3 |
11 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/packages/schemas/tsdown.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, type UserConfig } from 'tsdown';
2 | import { defaultExternals, defaultOptions, outExtensions } from '../../tsdown.common.build.ts';
3 |
4 | const sharedOptions: UserConfig = {
5 | ...defaultOptions,
6 | entry: { 'regle-schemas': 'src/index.ts' },
7 | external: [...defaultExternals, '@regle/core'],
8 | };
9 |
10 | export default defineConfig([
11 | sharedOptions,
12 | {
13 | ...sharedOptions,
14 | minify: true,
15 | dts: false,
16 | outExtensions: outExtensions(true),
17 | },
18 | ]);
19 |
--------------------------------------------------------------------------------
/playground/vue3/src/components/useForm.ts:
--------------------------------------------------------------------------------
1 | import { type RegleRoot } from '@regle/core';
2 |
3 | type FormComposable = {
4 | r$?: RegleRoot-
4 |
- 5 | {{ error }} 6 | 7 |
-
5 |
- 6 | {{ error }} 7 | 8 |
-
5 |
- 6 | {{ error }} 7 | 8 |
3 |
9 |
15 |
16 |
17 |
27 |
--------------------------------------------------------------------------------
/packages/rules/src/helpers/tests/withTooltip.spec.ts:
--------------------------------------------------------------------------------
1 | import { required } from '../../rules';
2 | import { withTooltip } from '../withTooltip';
3 |
4 | describe('withTooltip', () => {
5 | it('should register tooltips to an inline rule', () => {
6 | const inlineRule = withTooltip((_value) => true, 'Hello tooltip');
7 | expect(inlineRule.tooltip?.({} as any)).toBe('Hello tooltip');
8 | expect(inlineRule._tooltip).toBe('Hello tooltip');
9 | });
10 |
11 | it('should register tooltips to an rule definition', () => {
12 | const inlineRule = withTooltip(required, 'Hello tooltip');
13 | expect(inlineRule.tooltip?.({} as any)).toBe('Hello tooltip');
14 | expect(inlineRule._tooltip).toBe('Hello tooltip');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/playground/vue3/src/components/nested-collection/Compo3.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
10 |
- 11 | {{ error }} 12 | 13 |
-
5 |
- 6 | {{ error }} 7 | 8 |
3 |
20 |
21 |
22 |
28 |
--------------------------------------------------------------------------------
/packages-private/regle-playground/src/icons/GitHub.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: npm-publish
2 |
3 | permissions:
4 | contents: read
5 | id-token: write
6 |
7 | on:
8 | push:
9 | tags:
10 | - "v*"
11 | workflow_dispatch:
12 | jobs:
13 | build:
14 | runs-on: ubuntu-latest
15 | steps:
16 | - uses: actions/checkout@v4
17 | - uses: actions/setup-node@v4
18 | with:
19 | node-version: "22.x"
20 | registry-url: "https://registry.npmjs.org"
21 |
22 | - uses: pnpm/action-setup@v4
23 | - name: Update npm
24 | run: npm install -g npm@latest
25 | - name: Install dependencies
26 | run: pnpm i
27 | - name: Build
28 | run: pnpm run build
29 | - name: Publish
30 | run: pnpm run npm:publish
31 | env:
32 | NPM_CONFIG_PROVENANCE: true
33 |
--------------------------------------------------------------------------------
/packages/nuxt/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | node_modules
3 |
4 | # Logs
5 | *.log*
6 |
7 | # Temp directories
8 | .temp
9 | .tmp
10 | .cache
11 |
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 |
16 | # Generated dirs
17 | dist
18 |
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .data
23 | .vercel_build_output
24 | .build-*
25 | .netlify
26 |
27 | # Env
28 | .env
29 |
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 |
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 |
44 | # Intellij idea
45 | *.iml
46 | .idea
47 |
48 | # OSX
49 | .DS_Store
50 | .AppleDouble
51 | .LSOverride
52 | .AppleDB
53 | .AppleDesktop
54 | Network Trash Folder
55 | Temporary Items
56 | .apdisk
57 |
--------------------------------------------------------------------------------
/packages/rules/src/rules/tests/startsWith.spec.ts:
--------------------------------------------------------------------------------
1 | import { startsWith } from '../startsWith';
2 |
3 | describe('startsWith validator', () => {
4 | it('should not validate different values', () => {
5 | expect(startsWith('ar').exec('bar')).toBe(false);
6 | });
7 |
8 | it('should not validate undefined values', () => {
9 | expect(startsWith(undefined).exec(undefined)).toBe(true);
10 | });
11 |
12 | it('should not validate undefined param', () => {
13 | expect(startsWith(undefined).exec('any')).toBe(true);
14 | });
15 |
16 | it('should validate undefined value', () => {
17 | expect(startsWith('any').exec(undefined)).toBe(true);
18 | });
19 |
20 | it('should validate a value containing parameter', () => {
21 | expect(startsWith('fir').exec('first')).toBe(true);
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/docs/src/parts/components/scoped-validation/basic-scope/Child1.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
12 |
13 |
14 | -
15 |
- 16 | {{ error }} 17 | 18 |
3 |
20 |
21 |
22 |
28 |
--------------------------------------------------------------------------------
/packages/nuxt/src/runtime/defineRegleNuxtPlugin.d.ts:
--------------------------------------------------------------------------------
1 | import type { useCollectScope as defaultUseCollectScope } from '@regle/core';
2 | import {
3 | type useRegleFn,
4 | type inferRulesFn,
5 | type AllRulesDeclarations,
6 | type RegleShortcutDefinition,
7 | } from '@regle/core';
8 |
9 | export declare function defineRegleNuxtPlugin<
10 | TCustomRules extends Partial
4 |
12 |
13 |
14 | -
15 |
- 16 | {{ error }} 17 | 18 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/docs/src/parts/DisplayingErrors.md:
--------------------------------------------------------------------------------
1 | ```vue [App.vue]
2 |
3 |
11 |
12 | -
13 |
- 14 | {{ error }} 15 | 16 |
3 |
4 |
5 |
6 |
7 |
38 |
--------------------------------------------------------------------------------
/docs/src/advanced-usage/merge-regles.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Merge multiple Regles
3 | ---
4 |
5 | # Merge multiple Regles
6 |
7 | If you need to combine multiple Regle instances into one, it's possible with the `mergeRegles` helper.
8 |
9 | it will return an output similar to the main `r$`, while still being able to call `$touch` or `$validate`.
10 |
11 | All types are preserved.
12 |
13 |
14 | ```ts twoslash
15 | import {required, numeric, email} from '@regle/rules';
16 | // ---cut---
17 | // @noErrors
18 | import { mergeRegles, useRegle } from '@regle/core';
19 |
20 |
21 | const { r$ } = useRegle({email: ''}, {
22 | email: { required, email },
23 | });
24 |
25 | const { r$: otherR$ } = useRegle({firstName: ''}, {
26 | firstName: { required },
27 | });
28 |
29 | const r$Merged = mergeRegles({ r$, otherR$ });
30 |
31 | r$Merged.$value.otherR$.
32 | // ^|
33 |
34 |
35 | ```
--------------------------------------------------------------------------------
/playground/advanced-example/src/validations/regle.global.config.ts:
--------------------------------------------------------------------------------
1 | import { defineRegleConfig } from '@regle/core';
2 | import { required, withMessage } from '@regle/rules';
3 | import { checkPseudo } from './custom-rules/check-pseudo.rule';
4 | import { strongPassword } from './custom-rules/strong-password.rule';
5 |
6 | export const { useRegle: useCustomRegle } = defineRegleConfig({
7 | rules: () => ({
8 | /** Customizing default message */
9 | required: withMessage(required, 'You need to provide a value'),
10 | /** Registering custom rules */
11 | checkPseudo,
12 | strongPassword,
13 | }),
14 | /** Registering custom properties */
15 | shortcuts: {
16 | fields: {
17 | $isRequired: (field) => field.$rules.required?.$active ?? false,
18 | },
19 | nested: {
20 | $isEmpty: (nest) => Object.keys(nest.$fields).length === 0,
21 | },
22 | },
23 | });
24 |
--------------------------------------------------------------------------------
/tests/unit/useRegle/properties/$silentValue.spec.ts:
--------------------------------------------------------------------------------
1 | import { simpleNestedStateWithMixedValidation } from '../../../fixtures';
2 | import { createRegleComponent } from '../../../utils/test.utils';
3 | import { shouldBeInvalidField, shouldBePristineField } from '../../../utils/validations.utils';
4 |
5 | it('should update the source value', async () => {
6 | const { vm } = await createRegleComponent(simpleNestedStateWithMixedValidation);
7 |
8 | vm.r$.$silentValue = {
9 | user: {
10 | firstName: 'foo',
11 | lastName: 'foo',
12 | },
13 | email: 'foo',
14 | contacts: [{ name: 'foo' }],
15 | };
16 | await vm.$nextTick();
17 |
18 | shouldBeInvalidField(vm.r$);
19 | shouldBeInvalidField(vm.r$.email);
20 | shouldBePristineField(vm.r$.user.firstName);
21 | shouldBePristineField(vm.r$.user.lastName);
22 | shouldBePristineField(vm.r$.contacts.$each[0].name);
23 | });
24 |
--------------------------------------------------------------------------------
/packages/core/src/utils/validationGroups.utils.ts:
--------------------------------------------------------------------------------
1 | import type { RegleValidationGroupEntry } from '../types';
2 |
3 | export function mergeBooleanGroupProperties(
4 | entries: RegleValidationGroupEntry[],
5 | property?: Extract<
6 | keyof NonNullable
3 |
15 |
16 |
17 |
29 |
--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from '@playwright/test';
2 |
3 | const appPortForTests = 9130;
4 |
5 | export default defineConfig({
6 | testDir: './ui-tests/specs',
7 | testMatch: /.*\.uispec\.ts/,
8 | fullyParallel: false,
9 | forbidOnly: !!process.env.CI,
10 | retries: process.env.CI ? 1 : 0,
11 | workers: 1,
12 | reporter: 'html',
13 | timeout: 30000,
14 | use: {
15 | screenshot: 'only-on-failure',
16 | trace: 'on-first-retry',
17 | baseURL: `http://localhost:${appPortForTests}`,
18 | },
19 | projects: [
20 | {
21 | name: 'chromium',
22 | use: {
23 | ...devices['Desktop Chrome'],
24 | viewport: { width: 1280, height: 800 },
25 | },
26 | },
27 | ],
28 | webServer: [
29 | {
30 | command: 'pnpm run ui-tests:server',
31 | url: `http://localhost:${appPortForTests}`,
32 | },
33 | ],
34 | });
35 |
--------------------------------------------------------------------------------
/docs/src/examples/server-validation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Server Validation
3 | aside: false
4 | ---
5 |
6 | # Server Validation Demo
7 |
8 | This example demonstrates how to apply server-side validation to a form.
9 |
10 |
11 |
4 |
9 |
10 |
11 |
12 |
14 |
3 |
14 |
4 |
5 |
6 |
7 |
8 | -
9 |
- 10 | {{ error }} 11 | 12 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/playground/advanced-example/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/shared/tests/isEmpty.spec.ts:
--------------------------------------------------------------------------------
1 | import { isEmpty } from '../utils';
2 |
3 | const emptyFile = new File([''], 'empty.png');
4 | Object.defineProperty(emptyFile, 'size', { value: 0, configurable: true });
5 |
6 | const normalFile = new File([''], 'normal.png');
7 | Object.defineProperty(normalFile, 'size', { value: 1024 * 1024, configurable: true });
8 |
9 | describe('test the isEmpty helper', () => {
10 | it.each([
11 | [[], false, false],
12 | [[], true],
13 | [[1], false],
14 | [undefined, true],
15 | [null, true],
16 | [false, false],
17 | [new Date(), false],
18 | [emptyFile, true],
19 | [normalFile, false],
20 | [{}, true],
21 | [{ a: 1 }, false],
22 | [1, false],
23 | ['asd', false],
24 | ['', true],
25 | ])('isEmpty(%s) should be %s', (a, expected, considerEmptyArrayInvalid = true) => {
26 | expect(isEmpty(a, considerEmptyArrayInvalid)).toBe(expected);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/packages/nuxt/test/fixtures/app/components/MyTextArea.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 | Checking...
10 |
16 |
17 |
18 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/rules/src/rules/checked.ts:
--------------------------------------------------------------------------------
1 | import type { MaybeInput, RegleRuleDefinition } from '@regle/core';
2 | import { createRule } from '@regle/core';
3 | import { isFilled } from '../helpers';
4 |
5 | /**
6 | * Requires a boolean value to be `true`. This is useful for checkbox inputs like "accept terms".
7 | *
8 | * @example
9 | * ```ts
10 | * import { checked } from '@regle/rules';
11 | *
12 | * const { r$ } = useRegle({ confirm: false }, {
13 | * confirm: { checked },
14 | * })
15 | * ```
16 | *
17 | * @see {@link https://reglejs.dev/core-concepts/rules/built-in-rules#checked Documentation}
18 | */
19 | export const checked: RegleRuleDefinition-
11 |
- 12 | {{ error }} 13 | 14 |
3 |
4 |
9 | Checking...
10 |
16 |
17 |
18 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/docs/.vitepress/blog.data.ts:
--------------------------------------------------------------------------------
1 | import { createContentLoader } from 'vitepress';
2 |
3 | interface Post {
4 | title: string;
5 | url: string;
6 | date: {
7 | time: number;
8 | string: string;
9 | };
10 | }
11 |
12 | declare const data: Post[];
13 | export { data };
14 |
15 | export default createContentLoader('blog/*.md', {
16 | // excerpt: true,
17 | transform(raw): Post[] {
18 | return raw
19 | .map(({ url, frontmatter }) => ({
20 | title: frontmatter.title,
21 | url,
22 | date: formatDate(frontmatter.date),
23 | }))
24 | .sort((a, b) => b.date.time - a.date.time);
25 | },
26 | });
27 |
28 | function formatDate(raw: string): Post['date'] {
29 | const date = new Date(raw);
30 | date.setUTCHours(12);
31 | return {
32 | time: +date,
33 | string: date.toLocaleDateString('en-US', {
34 | year: 'numeric',
35 | month: 'long',
36 | day: 'numeric',
37 | }),
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/packages/core/tsdown.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, type UserConfig } from 'tsdown';
2 | import { defaultOptions, outExtensions, defaultExternals } from '../../tsdown.common.build.ts';
3 | import { replacePlugin } from 'rolldown/plugins';
4 |
5 | const sharedOptions: UserConfig = {
6 | ...defaultOptions,
7 | entry: { 'regle-core': 'src/index.ts' },
8 | external: [...defaultExternals, '@vue/devtools-api'],
9 | };
10 |
11 | export default defineConfig([
12 | {
13 | ...sharedOptions,
14 | plugins: [
15 | replacePlugin({
16 | __USE_DEVTOOLS__: 'true',
17 | }),
18 | ],
19 | },
20 | {
21 | ...sharedOptions,
22 | minify: true,
23 | dts: false,
24 | outExtensions: outExtensions(true),
25 | treeshake: {
26 | moduleSideEffects: false,
27 | annotations: true,
28 | },
29 | plugins: [
30 | replacePlugin({
31 | __USE_DEVTOOLS__: 'false',
32 | }),
33 | ],
34 | },
35 | ]);
36 |
--------------------------------------------------------------------------------
/docs/src/examples/conditional-rules.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Conditional Rules
3 | aside: false
4 | ---
5 |
6 | # Conditional Rules Demo
7 |
8 | It is often necessary to add a rule only when a certain condition is met. This can be done by using the `applyIf` modifier.
9 |
10 |
11 | -
11 |
- 12 | {{ error }} 13 | 14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/tests/unit/schemas/global-config/fixtures/zod.fixture.ts:
--------------------------------------------------------------------------------
1 | import { defineRegleSchemaConfig } from '@regle/schemas';
2 | import { ref } from 'vue';
3 | import z from 'zod/v3';
4 |
5 | export function zodGlobalConfigFixture() {
6 | const { useRegleSchema } = defineRegleSchemaConfig({});
7 |
8 | const condition = ref(true);
9 | const form = ref({
10 | level0: '',
11 | level1: {
12 | level2: {
13 | child: '',
14 | },
15 | },
16 | collection: [{ name: '' }],
17 | });
18 |
19 | return {
20 | condition,
21 | ...useRegleSchema(
22 | form,
23 | z.object({
24 | level0: z.string().nonempty(),
25 | level1: z.object({
26 | level2: z.object({
27 | child: z.string().nonempty(),
28 | }),
29 | }),
30 | collection: z.array(
31 | z.object({
32 | name: z.string().nonempty(),
33 | })
34 | ),
35 | })
36 | ),
37 | };
38 | }
39 |
--------------------------------------------------------------------------------
/tests/unit/schemas/global-config/fixtures/zod4.fixture.ts:
--------------------------------------------------------------------------------
1 | import { defineRegleSchemaConfig } from '@regle/schemas';
2 | import { ref } from 'vue';
3 | import z from 'zod/v4';
4 |
5 | export function zod4GlobalConfigFixture() {
6 | const { useRegleSchema } = defineRegleSchemaConfig({});
7 |
8 | const condition = ref(true);
9 | const form = ref({
10 | level0: '',
11 | level1: {
12 | level2: {
13 | child: '',
14 | },
15 | },
16 | collection: [{ name: '' }],
17 | });
18 |
19 | return {
20 | condition,
21 | ...useRegleSchema(
22 | form,
23 | z.object({
24 | level0: z.string().nonempty(),
25 | level1: z.object({
26 | level2: z.object({
27 | child: z.string().nonempty(),
28 | }),
29 | }),
30 | collection: z.array(
31 | z.object({
32 | name: z.string().nonempty(),
33 | })
34 | ),
35 | })
36 | ),
37 | };
38 | }
39 |
--------------------------------------------------------------------------------
/docs/src/parts/components/typing-props/Parent.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
28 |
--------------------------------------------------------------------------------
/packages/core/src/core/index.ts:
--------------------------------------------------------------------------------
1 | export { createRule, unwrapRuleParameters } from './createRule';
2 | export {
3 | useRegle,
4 | inferRules,
5 | useRootStorage,
6 | flatErrors,
7 | type useRegleFn,
8 | type inferRulesFn,
9 | markStatic,
10 | } from './useRegle';
11 | export { defineRegleConfig, extendRegleConfig } from './defineRegleConfig';
12 | export type { DefaultValidators, CommonComparisonOptions, CommonAlphaOptions } from './defaultValidators';
13 | export { mergeRegles, type MergedRegles, type MergedScopedRegles } from './mergeRegles';
14 | export {
15 | createScopedUseRegle,
16 | useCollectScope,
17 | useScopedRegle,
18 | type CreateScopedUseRegleOptions,
19 | type UseScopedRegleOptions,
20 | type useCollectScopeFn,
21 | } from './createScopedUseRegle';
22 | export { createVariant, narrowVariant, variantToRef } from './variants';
23 | export { defineRules, refineRules } from './refineRules';
24 | export { useRules, type useRulesFn } from './useRegle/useRules';
25 |
--------------------------------------------------------------------------------
/packages-private/regle-playground/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
3 |
21 |
22 |
23 |
34 |
--------------------------------------------------------------------------------
/.github/workflows/commit-lint.yml:
--------------------------------------------------------------------------------
1 | name: Commit lint
2 |
3 | on: [push, pull_request]
4 |
5 | permissions:
6 | contents: read
7 |
8 | jobs:
9 | commitlint:
10 | runs-on: ubuntu-latest
11 | strategy:
12 | matrix:
13 | node-version: [22.x]
14 | steps:
15 | - uses: actions/checkout@v4
16 | with:
17 | fetch-depth: 0
18 | - name: Use Node.js ${{ matrix.node-version }}
19 | uses: actions/setup-node@v1
20 | with:
21 | node-version: ${{ matrix.node-version }}
22 | - uses: pnpm/action-setup@v4
23 | - run: pnpm i
24 | - name: Validate current commit (last commit) with commitlint
25 | if: github.event_name == 'push'
26 | run: pnpx commitlint --last --verbose
27 |
28 | - name: Validate PR commits with commitlint
29 | if: github.event_name == 'pull_request'
30 | run: pnpx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
31 |
--------------------------------------------------------------------------------
/docs/src/parts/components/valibot/QuickUsage.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
9 |
10 |
11 |
12 |
14 |
15 | -
16 |
- 17 | {{ error }} 18 | 19 |
3 |
21 |
22 |
23 |
34 |
--------------------------------------------------------------------------------
/tests/unit/schemas/global-config/fixtures/valibot.fixture.ts:
--------------------------------------------------------------------------------
1 | import { defineRegleSchemaConfig } from '@regle/schemas';
2 | import * as v from 'valibot';
3 | import { ref } from 'vue';
4 |
5 | export function valibotGlobalConfigFixture() {
6 | const { useRegleSchema } = defineRegleSchemaConfig({});
7 |
8 | const condition = ref(true);
9 | const form = ref({
10 | level0: '',
11 | level1: {
12 | level2: {
13 | child: '',
14 | },
15 | },
16 | collection: [{ name: '' }],
17 | });
18 |
19 | return {
20 | condition,
21 | ...useRegleSchema(
22 | form,
23 | v.object({
24 | level0: v.pipe(v.string(), v.nonEmpty()),
25 | level1: v.object({
26 | level2: v.object({
27 | child: v.pipe(v.string(), v.nonEmpty()),
28 | }),
29 | }),
30 | collection: v.array(
31 | v.object({
32 | name: v.pipe(v.string(), v.nonEmpty()),
33 | })
34 | ),
35 | })
36 | ),
37 | };
38 | }
39 |
--------------------------------------------------------------------------------
/packages/rules/src/rules/tests/literal.spec.ts:
--------------------------------------------------------------------------------
1 | import { literal } from '../literal';
2 | import type { RegleRuleDefinition, MaybeInput } from '@regle/core';
3 |
4 | describe('literal validator', () => {
5 | it('should not validate invalid value', () => {
6 | expect(literal('ONE').exec(5)).toBe(false);
7 | });
8 |
9 | it('should validate valid string', () => {
10 | expect(literal('Two').exec('Two')).toBe(true);
11 | });
12 |
13 | it('should validate the valid number', () => {
14 | expect(literal(4).exec(4)).toBe(true);
15 | });
16 |
17 | it('should validate undefined value', () => {
18 | expect(literal('ONE').exec(undefined)).toBe(true);
19 | });
20 |
21 | it('should validate undefined option', () => {
22 | expect(literal(undefined as any).exec(5)).toBe(true);
23 | });
24 |
25 | const literalRule = literal('Foo');
26 | expectTypeOf(literalRule).toEqualTypeOf<
27 | RegleRuleDefinition<'Foo', [literal: 'Foo'], false, boolean, MaybeInput<'Foo'>, string | number>
28 | >();
29 | });
30 |
--------------------------------------------------------------------------------
/tests/unit/schemas/issues/fixtures/arktype.fixture.ts:
--------------------------------------------------------------------------------
1 | import { useRegleSchema } from '@regle/schemas';
2 | import { type } from 'arktype';
3 | import { reactive } from 'vue';
4 |
5 | export function arktypeFixture() {
6 | const form = reactive({
7 | level0: 0,
8 | level1: {
9 | child: 1,
10 | level2: {
11 | child: 2,
12 | },
13 | collection: [{ name: 0 as number | undefined }],
14 | },
15 | });
16 |
17 | const arkIsEven = type('number').narrow((data, ctx) => {
18 | return data % 2 === 0 ? true : ctx.reject({ message: 'Custom error' });
19 | });
20 |
21 | const schema = type({
22 | 'level0?': arkIsEven,
23 | level1: type({
24 | 'child?': arkIsEven,
25 | level2: type({
26 | 'child?': arkIsEven,
27 | }),
28 | collection: type({ name: arkIsEven })
29 | .array()
30 | .configure({ message: () => 'Array must contain at least 3 element(s)' }),
31 | }),
32 | });
33 |
34 | return useRegleSchema(form, schema);
35 | }
36 |
--------------------------------------------------------------------------------
/packages/rules/src/rules/decimal.ts:
--------------------------------------------------------------------------------
1 | import type { RegleRuleDefinition, MaybeInput } from '@regle/core';
2 | import { createRule } from '@regle/core';
3 | import { matchRegex, isEmpty } from '../helpers';
4 |
5 | const decimalRegex = /^[-]?\d*(\.\d+)?$/;
6 |
7 | /**
8 | * Allows positive and negative decimal numbers.
9 | *
10 | * @example
11 | * ```ts
12 | * import { decimal } from '@regle/rules';
13 | *
14 | * const { r$ } = useRegle({ price: 0 }, {
15 | * price: { decimal },
16 | * })
17 | * ```
18 | *
19 | * @see {@link https://reglejs.dev/core-concepts/rules/built-in-rules#decimal Documentation}
20 | */
21 | export const decimal: RegleRuleDefinition<
22 | string | number,
23 | [],
24 | false,
25 | boolean,
26 | MaybeInput
4 |
9 |
10 |
11 |
12 |
14 |
15 | -
16 |
- 17 | {{ error }} 18 | 19 |
-
11 |
-
12 |
13 | 14 | 18 |
19 |
3 |
22 |
23 |
24 |
35 |
--------------------------------------------------------------------------------
/packages/core/src/core/useRegle/root/common/common-types.ts:
--------------------------------------------------------------------------------
1 | import type { ComputedRef } from 'vue';
2 | import type {
3 | $InternalRegleShortcutDefinition,
4 | CustomRulesDeclarationTree,
5 | ResolvedRegleBehaviourOptions,
6 | } from '../../../../types';
7 | import type { RegleStorage } from '../../../useStorage';
8 |
9 | export type StateWithId = unknown & { $id?: string };
10 |
11 | export interface CommonResolverOptions {
12 | customMessages: CustomRulesDeclarationTree | undefined;
13 | path: string;
14 | cachePath: string;
15 | index?: number;
16 | storage: RegleStorage;
17 | options: ResolvedRegleBehaviourOptions;
18 | fieldName: string | undefined;
19 | shortcuts: $InternalRegleShortcutDefinition | undefined;
20 | }
21 |
22 | export interface CommonResolverScopedState {
23 | $anyDirty: ComputedRef
4 |
9 |
14 |
15 |
16 | -
17 |
- 18 | {{ error }} 19 | 20 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/docs/src/public/regle-playground-button.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
1 | name: 'New feature proposal 🚀'
2 | description: Suggest an idea for Regle
3 | labels: ['feature request']
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: |
8 | Thanks for your interest in the project and taking the time to fill out this feature report!
9 | - type: textarea
10 | id: feature-description
11 | attributes:
12 | label: What problem is this solving
13 | description: 'A clear and concise description of what the problem is. Ex. when using the function X we cannot do Y.'
14 | validations:
15 | required: true
16 | - type: textarea
17 | id: proposed-solution
18 | attributes:
19 | label: Proposed solution
20 | description: 'A clear and concise description of what you want to happen with an API proposal when applicable'
21 | validations:
22 | required: true
23 | - type: textarea
24 | id: alternative
25 | attributes:
26 | label: Describe alternatives you've considered
27 | description: A clear and concise description of any alternative solutions or features you've considered.
28 |
--------------------------------------------------------------------------------
/docs/src/examples/custom-rules.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom Rules
3 | aside: false
4 | ---
5 |
6 | # Custom Rules Demo
7 |
8 | You can create your own custom rules either by using an inline function or the `createRule` utility. It is recommended to create custom rules using the `createRule` function rather than an inline function because it automatically tracks reactive dependencies and enables you to add custom `active` behavior to the rule.
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/tests/unit/schemas/issues/fixtures/valibot.fixture.ts:
--------------------------------------------------------------------------------
1 | import { useRegleSchema } from '@regle/schemas';
2 | import * as v from 'valibot';
3 | import { reactive } from 'vue';
4 |
5 | export function valibotFixture() {
6 | const form = reactive({
7 | level0: 0,
8 | level1: {
9 | child: 1,
10 | level2: {
11 | child: 2,
12 | },
13 | collection: [{ name: 0 as number | undefined }],
14 | },
15 | });
16 |
17 | const valibotIsEven = v.pipe(
18 | v.number('This field is required'),
19 | v.check((value) => {
20 | return value % 2 === 0;
21 | }, 'Custom error')
22 | );
23 |
24 | return useRegleSchema(
25 | form,
26 | v.object({
27 | level0: v.optional(valibotIsEven),
28 | level1: v.object({
29 | child: v.optional(valibotIsEven),
30 | level2: v.object({
31 | child: v.optional(valibotIsEven),
32 | }),
33 | collection: v.pipe(
34 | v.array(v.object({ name: valibotIsEven })),
35 | v.minLength(3, 'Array must contain at least 3 element(s)')
36 | ),
37 | }),
38 | })
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/docs/src/parts/components/operators/OperatorOr.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
18 |
34 |
--------------------------------------------------------------------------------
/ui-tests/fixtures/ui-vue3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ui-vue3",
3 | "private": true,
4 | "type": "module",
5 | "scripts": {
6 | "dev": "vite --port=9130",
7 | "build": "run-p type-check \"build-only {@}\" --",
8 | "preview": "vite preview",
9 | "build-only": "vite build",
10 | "typecheck": "vue-tsc --noEmit --project ./tsconfig.app.json"
11 | },
12 | "dependencies": {
13 | "@regle/core": "workspace:*",
14 | "@regle/rules": "workspace:*",
15 | "@regle/schemas": "workspace:*",
16 | "check-password-strength": "catalog:",
17 | "pinia": "catalog:",
18 | "sass": "1.86.0",
19 | "vue": "catalog:",
20 | "vue-router": "catalog:"
21 | },
22 | "devDependencies": {
23 | "@tsconfig/node22": "22.0.2",
24 | "@types/node": "catalog:",
25 | "@vitejs/plugin-vue": "catalog:",
26 | "@vue/tsconfig": "0.8.1",
27 | "autoprefixer": "10.4.21",
28 | "npm-run-all2": "8.0.4",
29 | "postcss": "8.5.3",
30 | "prettier": "catalog:",
31 | "tailwindcss": "catalog:",
32 | "typescript": "catalog:",
33 | "vite": "catalog:",
34 | "vue-tsc": "catalog:"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Victor Garcia
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/src/parts/components/DisplayingErrors.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
9 |
10 | -
11 |
- 12 | {{ error }} 13 | 14 |
3 |
26 |
27 |
28 |
39 |
--------------------------------------------------------------------------------
/playground/vue3/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
4 |
12 |
13 |
18 |
19 |
20 | -
21 |
- 22 | {{ error }} 23 | 24 |