Validation rules aliases and auto-completion

[gotson]

Seeing the latest 4.2.0 is out with validation rules getting out of labs, i checked the documentation to migrate from labs to standard package, and found out about aliases prefixed with $: https://vuetifyjs.com/en/features/rules/#aliases

I am using IntelliJ and Typescript, and it seems that using the $ prefix will not work for auto-completion, while using useRules would handle auto-completion nicely (which is my current setup).

Question 1: Is it expected that there will be no auto-completion when using the $ prefix for aliases?

Another question I have is for custom rules, i have custom rules defined like this:

export const vuetifyRulesPlugin = createRulesPlugin(
  {
    aliases: {
      sameAs: (other?: string, err?: string) => {
        return (v: unknown) => other === v || err || 'Field must have the same value'
      },
      sameAsIgnoreCase: (other?: string, err?: string) => {
        return (v: unknown) =>
          other?.localeCompare(String(v), undefined, { sensitivity: 'accent' }) == 0 ||
          err ||
          'Field must have the same value'
      },
    },
  },
  vuetify.locale,
)

However, even when using the useRules composable, i cannot get auto-completion for the custom aliases. Thus i had to reset to using something like this:

:rules="[['sameAsIgnoreCase', validateTextEffective]]"

Question 2: Is there a way to get auto-completion for custom rules?

[J-Sek]

To achieve full auto-complete Vuetify would need to generate updated types somewhere (similar to Vue Router). It does not provide such functionality yet. If you think it is important, feel free to add/describe Feature Request.

Meanwhile, there are 2 arguments against it:

• additional TS complexity/magic (+ standard issue with generated types that are not immediately visible to TS engine until you rebuild or re-run specific task)
• the amount of aliases is usually pretty small

This is how I solve it (for useRules only):

import type {
  RuleAliases,
  ValidationRuleBuilderWithoutOptions,
} from 'vuetify/labs/rules'

export type MyRuleAliases = RuleAliases & {
  onlyFutureDate: ValidationRuleBuilderWithoutOptions
  onlyPastDate: ValidationRuleBuilderWithoutOptions
}

[J-Sek]

There is also a trick for rules passed to the prop directly

type RemoveIndexSignature<T> = {
  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K]
}
export type RuleKeys = (keyof RemoveIndexSignature<MyRuleAliases>)[]

[gotson]

Thanks @J-Sek i understand your position, and a workaround is enough i believe. It might be worth adding in the documentation for Typescript users.

With the help of Gemini i ended up with this:

const aliasesDefinition = {
  sameAs: (other?: string, err?: string) => {
    return (v: unknown) => other === v || err || 'Field must have the same value'
  },
  sameAsIgnoreCase: (other?: string, err?: string) => {
    return (v: unknown) =>
      other?.localeCompare(String(v), undefined, { sensitivity: 'accent' }) == 0 ||
      err ||
      'Field must have the same value'
  },
  isbn13: (err?: string) => {
    return (v: unknown) => {
      if (!v) return true
      return (typeof v === 'string' && isISBN(v, 13)) || err || 'Must be a valid ISBN 13'
    }
  },
}

export const vuetifyRulesPlugin = createRulesPlugin(
  {
    aliases: aliasesDefinition,
  },
  vuetify.locale,
)

export type CustomRulesMap = typeof aliasesDefinition

export type CustomRuleTuple = {
  [K in keyof CustomRulesMap]: Parameters<CustomRulesMap[K]> extends []
    ? K
    : [K, ...Parameters<CustomRulesMap[K]>]
}[keyof CustomRulesMap]

which i can then use directly in:

:rules="
            [
              [
                'isbn13',
                $formatMessage({
                  description: 'Form edit book: General - Error message if ISBN is invalid',
                  defaultMessage: 'Must be a valid ISBN 13',
                  id: 'TtH2LJ',
                }),
              ],
            ] satisfies CustomRuleTuple[]
          "