feat: support dynamic rules for useV7d composable

packages/vue-v8n/src/composables/useV7d.ts

@@ -1,9 +1,9 @@
 import { computed, ref, toRef, watch } from 'vue'
-import type { MaybeRef } from 'vue'
+import type { MaybeRef, MaybeRefOrGetter } from 'vue'
 import type { RuleDefinition, UseV7dOptions } from '../types'
 import { createResult } from '../rule'
 
-export function useV7d<T>(value: MaybeRef<T>, rules: RuleDefinition[], options?: UseV7dOptions) {
+export function useV7d<T>(value: MaybeRef<T>, rules: MaybeRefOrGetter<RuleDefinition[]>, options?: UseV7dOptions) {
   const immediate = !!options?.immediate
 
   const el = ref<EventTarget | null>(null)
@@ -21,6 +21,8 @@ export function useV7d<T>(value: MaybeRef<T>, rules: RuleDefinition[], options?:
 
   watch(_value, validate, { immediate })
 
+  watch(_rules, validate)
+
   function touch() {
     const isAlreadyTouched = touched.value
 

playground/src/App.vue

@@ -1,22 +1,39 @@
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from 'vue'
+import { computed, ref, onMounted, getCurrentInstance } from 'vue'
 import { useV7d, required } from 'vue-v8n'
 
-const name = useV7d('', [required])
+const nameRuleOptions = ref([
+  { label: required.name, rule: required, selected: false }
+])
+const nameRules = computed(() => nameRuleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : []))
+const name = useV7d('', nameRules)
+
 const state = ref({
   name
 })
 
+function reset() {
+  name.reset()
+}
+
+function touch() {
+  name.touch()
+}
+
 onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProperties.vueV8n))
 </script>
 
 <template>
   <div class="panes">
+    <div class="pane pane-control">
+      <div class="control-items">
+        <button @click="reset">Reset all</button>
+        <button @click="touch">Touch all</button>
+      </div>
+    </div>
     <div class="pane pane-ui">
       <div :class="['form-item', name.hasError.value ? 'has-error' : '']">
-        <label class="form-label">
-          Name:
-        </label>
+        <label class="form-label">Name:</label>
         <input
           :ref="name.el"
           type="text"
@@ -25,6 +42,17 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
         >
         <p v-if="name.hasError" class="error-message">{{ name.errorMessage.value }}</p>
       </div>
+      <div class="control-items">
+        <p>Rules:</p>
+        <label v-for="ruleOption in nameRuleOptions">
+          <input type="checkbox" v-model="ruleOption.selected">
+          {{ ruleOption.label }}
+        </label>
+      </div>
+      <div class="control-items">
+        <button @click="name.reset">Reset</button>
+        <button @click="name.touch">Touch</button>
+      </div>
     </div>
     <div class="pane pane-state">
       <pre>{{ state }}</pre>
@@ -89,8 +117,9 @@ pre {
   border: 1px solid var(--app-color);
 }
 
-.locales {
+.control-items {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 2px 8px;
 }
 </style>

playground/src/style.css

@@ -1,3 +1,8 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
 :root {
   --app-color: rgba(255, 255, 255, 0.87);
 
@@ -14,3 +19,12 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  min-height: 100vh;
+}