feat(rules): promote from labs

Author: J-Sek

packages/docs/src/pages/en/features/rules.md

@@ -1,4 +1,5 @@
 ---
+emphasized: true
 meta:
   nav: Validation rules
   title: Validation rules composable
@@ -8,7 +9,7 @@ related:
   - /components/forms/
   - /features/internationalization/
 features:
-  github: /labs/rules/
+  github: /composables/rules/
   label: 'E: rules'
   report: true
 ---
@@ -27,8 +28,7 @@ To use the Rules plugin, you'll need to import and register it with your Vuetify
 
 ```js
 import { createVue } from 'vue'
-import { createVuetify } from 'vuetify'
-import { createRulesPlugin } from 'vuetify/labs/rules'
+import { createRulesPlugin, createVuetify } from 'vuetify'
 
 const app = createVue()
 const vuetify = createVuetify()
@@ -41,7 +41,7 @@ This will make the rules system available throughout your application. The plugi
 Inside of components, you can now import and utilize the rules composable:
 
 ```js
-import { useRules } from 'vuetify/labs/rules'
+import { useRules } from 'vuetify'
 
 const rules = useRules()
 ```
@@ -65,7 +65,7 @@ Existing rules' error messages can also be customized on the fly, to fit specifi
 </template>
 
 <script setup>
-  import { useRules } from 'vuetify/labs/rules'
+  import { useRules } from 'vuetify'
 
   const rules = useRules()
 
@@ -135,10 +135,9 @@ In this case, error message can be redefined as second parameter:
 </v-form>
 ```
 
-<!--
 ## Aliases
 
-Rules can also be used in inputs using the alias names syntax:
+Rather than importing `useRules` and calling builders by hand, any rule can be referenced directly in the `rules` prop by its **alias** — a string prefixed with `$` that resolves to the matching builder. This keeps templates terse and lets you skip a component-level `useRules()` call entirely:
 
 ```html { resource="src/App.vue" }
 <v-form>
@@ -149,29 +148,50 @@ Rules can also be used in inputs using the alias names syntax:
 </v-form>
 ```
 
-RuleBuilders parameters can also be passed using an Array:
+The example above is shorthand for `[rules.required()]`.
+
+::: info
+
+Aliases are resolved by the rules plugin, so they only take effect when [`createRulesPlugin`](#installation) is registered. Without it, the string is passed through as-is and treated as a literal error message.
+
+:::
+
+### Passing options
+
+For rules that accept options, use an array where the first item is the alias and the remaining items are the builder's arguments. The last argument can still be a custom error message:
 
 ```html { resource="src/App.vue" }
 <v-form>
   <v-text-field
     label="Username"
     :rules="[
       ['$required', 'This field is mandatory'],
-      ['$maxLength', 10, 'You can\'t write over 10 characters']
+      ['$maxLength', 10, 'You can\'t write over 10 characters'],
     ]"
   ></v-text-field>
 </v-form>
 ```
--->
+
+Each array maps to its builder call — `['$maxLength', 10, '…']` resolves to `rules.maxLength(10, '…')`.
+
+### Custom aliases
+
+Because aliases reference the same builders registered through `createRulesPlugin`, your own [custom rules](#custom-rules) can be used by name too:
+
+```html { resource="src/App.vue" }
+<v-text-field
+  label="PIN"
+  :rules="['$pinCode']"
+></v-text-field>
+```
 
 ## Custom rules
 
 Vuetify comes with an existing set of validation rules but you can overwrite them or add yours.
 
 ```js { resource="src/plugins/vuetify.js" }
 import { createVue } from 'vue'
-import { createVuetify } from 'vuetify'
-import { createRulesPlugin } from 'vuetify/labs/rules'
+import { createRulesPlugin, createVuetify } from 'vuetify'
 
 const app = createVue()
 const vuetify = createVuetify()

packages/docs/src/pages/en/introduction/roadmap.md

@@ -74,8 +74,7 @@ The following are the already released **minor** and **major** version updates.
   - VDataTable - programatic control over groups state with `v-model:opened`
   - VSparkline - hover interactivity, markers and tooltips
   - VOtpInputs - grouping fields into segments, a11y and emojis
-  - Introduced [validation rules](/features/rules/) to the main framework from Labs
-  - Introduced 5 new components to the main framework from Labs:
+  - Introduced 7 new components to the main framework from Labs:
     - [v-icon-btn](/components/icon-buttons/)
     - [v-stepper-vertical](/components/vertical-steppers/)
     - [v-pull-to-refresh](/components/pull-to-refresh/)

packages/vuetify/src/composables/index.ts

@@ -12,3 +12,4 @@ export { useLocale, useRtl } from './locale'
 export { useTheme } from './theme'
 export { useHotkey } from './hotkey'
 export { useMask } from './mask'
+export { createRulesPlugin, useRules } from './rules'

packages/vuetify/src/composables/rules/index.ts

@@ -0,0 +1,2 @@
+export * from './rules'
+export * from './plugin'

packages/vuetify/src/labs/rules/plugin.ts …/vuetify/src/composables/rules/plugin.tspackages/vuetify/src/labs/rules/plugin.ts renamed to packages/vuetify/src/composables/rules/plugin.ts packages/vuetify/src/labs/rules/plugin.ts renamed to packages/vuetify/src/composables/rules/plugin.ts

@@ -2,16 +2,16 @@
 import { makeFocusProps } from '@/composables/focus'
 import { useForm } from '@/composables/form'
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useRules } from '@/composables/rules'
 import { useToggleScope } from '@/composables/toggleScope'
-import { useRules } from '@/labs/rules'
 
 // Utilities
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, useId, watch } from 'vue'
 import { getCurrentInstance, getCurrentInstanceName, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { ValidationAlias } from '@/labs/rules'
+import type { ValidationAlias } from '@/composables/rules'
 import type { EventProp, MaybeRef } from '@/util'
 
 export type ValidationResult = string | boolean

packages/vuetify/src/labs/rules/rules.ts …s/vuetify/src/composables/rules/rules.tspackages/vuetify/src/labs/rules/rules.ts renamed to packages/vuetify/src/composables/rules/rules.ts packages/vuetify/src/labs/rules/rules.ts renamed to packages/vuetify/src/composables/rules/rules.ts

@@ -1,2 +1,3 @@
-export * from './rules'
-export * from './plugin'
+// Promoted to the core framework in v4.1.2
+// This re-export is kept for backwards compatibility and will be removed in v4.2.0
+export * from '@/composables/rules'