From 0ee61a86a81743ba89f5259763c4975e766b0ad6 Mon Sep 17 00:00:00 2001
From: Nozomu Ikuta <16436160+NozomuIkuta@users.noreply.github.com>
Date: Tue, 9 Jan 2024 01:12:15 +0900
Subject: [PATCH] feat: add `useV7dObject` composable

---
 .../vue-v8n/src/composables/useV7dObject.ts   | 173 ++++++++++++++++++
 packages/vue-v8n/src/index.ts                 |   1 +
 playground/src/App.vue                        |   1 +
 playground/src/components/DemoView.vue        |  40 ++--
 playground/src/pages/NumberDemo.vue           |  34 +++-
 playground/src/pages/ObjectDemo.vue           |  94 ++++++++++
 playground/src/pages/PasswordDemo.vue         |  34 +++-
 playground/src/pages/StringDemo.vue           |  34 +++-
 playground/src/router.ts                      |   2 +
 playground/src/utils.ts                       |  23 ---
 10 files changed, 378 insertions(+), 58 deletions(-)
 create mode 100644 packages/vue-v8n/src/composables/useV7dObject.ts
 create mode 100644 playground/src/pages/ObjectDemo.vue
 delete mode 100644 playground/src/utils.ts

diff --git a/packages/vue-v8n/src/composables/useV7dObject.ts b/packages/vue-v8n/src/composables/useV7dObject.ts
new file mode 100644
index 0000000..f572540
--- /dev/null
+++ b/packages/vue-v8n/src/composables/useV7dObject.ts
@@ -0,0 +1,173 @@
+import { computed, reactive } from 'vue'
+import type { MaybeRefOrGetter, UnwrapRef } from 'vue'
+import type { RuleDefinition, UseV7dOptions } from '../types'
+import { useV7d } from './useV7d'
+
+export function useV7dObject<T extends Record<string, unknown>>(
+  values: T,
+  rules: Partial<Record<keyof T, MaybeRefOrGetter<RuleDefinition[]>>>,
+  options?: Partial<Record<keyof T, UseV7dOptions>>
+) {
+  type InitialValues = Record<keyof T, T[keyof T]>
+  type Values = Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['value']['value']>
+
+  const _initialValues = {} as InitialValues
+  const _values = reactive({} as Values)
+  const $els = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$el']>
+  const _touched = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$touched']>
+  const _error = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$error']>
+  const _errors = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$errors']>
+  const _touchFns = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$touch']>
+  const _validateFns = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$validate']>
+  const _resetFns = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$reset']>
+  const _resetWithInitialValueFns = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$resetWithInitialValue']>
+  const _resetWithFn = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$resetWith']>
+
+  const _keys = Object.keys(values)
+
+  for (const key of _keys) {
+    const _key = key as keyof T
+    const {
+      value,
+      $el,
+      $touched,
+      $error,
+      $errors,
+      $touch,
+      $validate,
+      $reset,
+      $resetWithInitialValue,
+      $resetWith
+    } = useV7d(values[_key], rules[_key] ?? [], options?.[_key] ?? {})
+
+    _initialValues[_key] = values[_key]
+    ;(_values as Values)[_key] = value.value
+    $els[_key] = $el
+    _touched[_key] = $touched
+    _error[_key] = $error
+    _errors[_key] = $errors
+    _touchFns[_key] = $touch
+    _validateFns[_key] = $validate
+    _resetFns[_key] = $reset
+    _resetWithInitialValueFns[_key] = $resetWithInitialValue
+    _resetWithFn[_key] = $resetWith
+  }
+
+  const $touchedAny = computed(() => {
+    for (const key of _keys) {
+      const _key = key as keyof T
+
+      if (_touched[_key].value) {
+        return true
+      }
+    }
+
+    return false
+  })
+
+  const $touched = computed(() => {
+    const _$touched = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$touched']['value']>
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      _$touched[_key] = _touched[_key].value
+    }
+
+    return _$touched
+  })
+
+  const $error = computed(() => {
+    const _$error = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$error']['value']>
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      _$error[_key] = _error[_key].value
+    }
+
+    return _$error
+  })
+
+  const $errors = computed(() => {
+    const _$errors = {} as Record<keyof T, ReturnType<typeof useV7d<T[keyof T]>>['$errors']['value']>
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      _$errors[_key] = _errors[_key as keyof T].value
+    }
+
+    return _$errors
+  })
+
+  function $touch(key?: keyof T) {
+    if (typeof key === 'string') {
+      _touchFns[key]()
+      return
+    }
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      _touchFns[_key]()
+    }
+  }
+
+  function $validate(key?: keyof T) {
+    if (typeof key === 'string') {
+      return _validateFns[key]()
+    }
+
+    const results = {} as Record<keyof T, ReturnType<ReturnType<typeof useV7d<T[keyof T]>>['$validate']>>
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      results[_key] = _validateFns[_key]()
+    }
+
+    return results
+  }
+
+  function $reset(key?: keyof T) {
+    if (typeof key === 'string') {
+      _resetFns[key]()
+      return
+    }
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      _resetFns[_key]()
+    }
+  }
+
+  function $resetWithInitialValue(key?: keyof T) {
+    if (typeof key === 'string') {
+      $reset(key)
+      ;(_values as any)[key] = _initialValues[key]
+      return
+    }
+
+    $reset()
+
+    for (const key of _keys) {
+      const _key = key as keyof T
+      ;(_values as any)[_key] = _initialValues[_key]
+    }
+  }
+
+  function $resetWith(key: keyof T, newValue: UnwrapRef<T[keyof T]>) {
+    $reset(key)
+    ;(_values as Values)[key] = newValue
+  }
+
+  return {
+    values: _values,
+    $els,
+    $touchedAny,
+    $touched,
+    $error,
+    $errors,
+    $touch,
+    $validate,
+    $reset,
+    $resetWithInitialValue,
+    $resetWith
+  }
+}
diff --git a/packages/vue-v8n/src/index.ts b/packages/vue-v8n/src/index.ts
index b5cb89b..12fdf9d 100644
--- a/packages/vue-v8n/src/index.ts
+++ b/packages/vue-v8n/src/index.ts
@@ -1,4 +1,5 @@
 export { useV7d } from './composables/useV7d'
+export { useV7dObject } from './composables/useV7dObject'
 export { max } from './rules/max'
 export { min } from './rules/min'
 export { required } from './rules/required'
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 71f6b27..1235092 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 
 const menuItems = computed(() => [
   { label: 'Number', to: '/number' },
+  { label: 'Object', to: '/object' },
   { label: 'Password', to: '/password' },
   { label: 'String', to: '/string' }
 ])
diff --git a/playground/src/components/DemoView.vue b/playground/src/components/DemoView.vue
index dad4721..da83acb 100644
--- a/playground/src/components/DemoView.vue
+++ b/playground/src/components/DemoView.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import type { RuleDefinition } from 'vue-v8n'
 
+export interface ControlItemGroup {
+  label: string
+  items: ControlItem[]
+}
+
 export interface ControlItem {
   label: string
   fn: (...args: unknown[]) => unknown
 }
 
+export interface RuleOptionGroup {
+  label: string
+  rules: RuleOption[]
+}
+
 export interface RuleOption {
   label: string
   selected: boolean
@@ -13,12 +23,12 @@ export interface RuleOption {
 }
 
 const props = defineProps<{
-  controlItems: ControlItem[]
+  controlItemGroups: ControlItemGroup[]
   state: unknown
   result: unknown
 }>()
 
-const ruleOptions = defineModel<RuleOption[]>({ required: true })
+const ruleOptionGroups = defineModel<RuleOptionGroup[]>({ required: true })
 </script>
 
 <template>
@@ -27,17 +37,21 @@ const ruleOptions = defineModel<RuleOption[]>({ required: true })
       <slot />
     </div>
     <div class="pane">
-      <p>Rules:</p>
-      <div class="rule-options">
-        <label v-for="ruleOption in ruleOptions">
-          <input type="checkbox" v-model="ruleOption.selected">
-          {{ ruleOption.label }}
-        </label>
-      </div>
-      <p>Functions:</p>
-      <div class="control-items">
-        <button v-for="{ label, fn } in props.controlItems" @click="fn">{{ label }}</button>
-      </div>
+      <template v-for="{ label, rules } in ruleOptionGroups">
+        <p>Rules for "{{ label }}":</p>
+        <div class="rule-options">
+          <label v-for="rule in rules" :key="label">
+            <input type="checkbox" v-model="rule.selected">
+            {{ rule.label }}
+          </label>
+        </div>
+      </template>
+      <template v-for="controlItemGroup in props.controlItemGroups">
+        <p>Functions for "{{ controlItemGroup.label }}":</p>
+        <div class="control-items">
+          <button v-for="{ label, fn } in controlItemGroup.items" @click="fn">{{ label }}</button>
+        </div>
+      </template>
       <p>State:</p>
       <div class="content-box">
         <pre class="content">{{ props.state }}</pre>
diff --git a/playground/src/pages/NumberDemo.vue b/playground/src/pages/NumberDemo.vue
index 2604294..1db58f5 100644
--- a/playground/src/pages/NumberDemo.vue
+++ b/playground/src/pages/NumberDemo.vue
@@ -1,24 +1,44 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useV7d } from 'vue-v8n'
+import { max, min, required, useV7d } from 'vue-v8n'
 import DemoView from '../components/DemoView.vue'
-import { getControlItemsRef, getRuleOptionsRef } from '../utils'
+import type { ControlItemGroup, RuleOptionGroup } from '../components/DemoView.vue'
 
-const ruleOptions = getRuleOptionsRef()
+const ruleOptionGroups = ref<RuleOptionGroup[]>([
+  {
+    label: 'Count',
+    rules: [
+      { label: 'required', rule: required, selected: false },
+      { label: 'min(5)', rule: min(5), selected: false },
+      { label: 'max(10)', rule: max(10), selected: false }
+    ]
+  }
+])
 
-const rules = computed(() => ruleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : []))
+const rules = computed(() => ruleOptionGroups.value[0].rules.flatMap(({ selected, rule }) => selected ? [rule] : []))
 
 const state = useV7d(0, rules)
 
 const result = ref<typeof state.value.value | Error>(state.value.value)
 
-const controlItems = getControlItemsRef(state, result, 0)
+const controlItemGroups = ref<ControlItemGroup[]>([
+  {
+    label: 'Name',
+    items: [
+      { label: 'Touch', fn: state.$touch },
+      { label: 'Validate', fn: () => result.value = state.$validate() },
+      { label: 'Reset', fn: state.$reset },
+      { label: 'Reset with initial value', fn: state.$resetWithInitialValue },
+      { label: 'Reset with 0', fn: () => state.$resetWith(0) }
+    ]
+  }
+])
 </script>
 
 <template>
   <DemoView
-    v-model="ruleOptions"
-    :control-items="controlItems"
+    v-model="ruleOptionGroups"
+    :control-item-groups="controlItemGroups"
     :state="state"
     :result="result"
   >
diff --git a/playground/src/pages/ObjectDemo.vue b/playground/src/pages/ObjectDemo.vue
new file mode 100644
index 0000000..7474638
--- /dev/null
+++ b/playground/src/pages/ObjectDemo.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { max, min, required, useV7dObject } from 'vue-v8n'
+import DemoView from '../components/DemoView.vue'
+import type { ControlItemGroup, RuleOptionGroup } from '../components/DemoView.vue'
+
+const ruleOptionGroups = ref<RuleOptionGroup[]>([
+  {
+    label: 'First name',
+    rules: [
+      { label: 'required', rule: required, selected: false },
+      { label: 'min(5)', rule: min(5), selected: false },
+      { label: 'max(10)', rule: max(10), selected: false }
+    ]
+  },
+  {
+    label: 'Last name',
+    rules: [
+      { label: 'required', rule: required, selected: false },
+      { label: 'min(5)', rule: min(5), selected: false },
+      { label: 'max(10)', rule: max(10), selected: false }
+    ]
+  }
+])
+
+const firstNameRules = computed(() => ruleOptionGroups.value[0].rules.flatMap(({ selected, rule }) => selected ? [rule] : []))
+const lastNameRules = computed(() => ruleOptionGroups.value[1].rules.flatMap(({ selected, rule }) => selected ? [rule] : []))
+
+const state = useV7dObject({
+  firstName: '',
+  lastName: ''
+}, {
+  firstName: firstNameRules,
+  lastName: lastNameRules
+})
+
+const result = ref<Record<string, string | Error>>({
+  firstName: '',
+  lastName: ''
+})
+
+const controlItemGroups = ref<ControlItemGroup[]>([
+  {
+    label: 'First name',
+    items: [
+      { label: 'Touch', fn: () => state.$touch('firstName') },
+      { label: 'Validate', fn: () => result.value.firstName = state.$validate('firstName') as string | Error },
+      { label: 'Reset', fn: () => state.$reset('firstName') },
+      { label: 'Reset with initial value', fn: () => state.$resetWithInitialValue('firstName') },
+      { label: 'Reset with "John"', fn: () => state.$resetWith('firstName', 'John') }
+    ]
+  },
+  {
+    label: 'Last name',
+    items: [
+      { label: 'Touch', fn: () => state.$touch('lastName') },
+      { label: 'Validate', fn: () => result.value.lastName = state.$validate('lastName') as string | Error },
+      { label: 'Reset', fn: () => state.$reset('lastName') },
+      { label: 'Reset with initial value', fn: () => state.$resetWithInitialValue('lastName') },
+      { label: 'Reset with "John"', fn: () => state.$resetWith('lastName', 'Doe') }
+    ]
+  }
+])
+</script>
+
+<template>
+  <DemoView
+    v-model="ruleOptionGroups"
+    :control-item-groups="controlItemGroups"
+    :state="state"
+    :result="result"
+  >
+    <div class="form-item" :class="[state.$errors.value.firstName.length ? 'has-error' : '']">
+      <label class="form-label">First name:</label>
+      <input
+        :ref="state.$els.firstName"
+        type="text"
+        v-model="state.values.firstName"
+        class="form-input"
+      >
+      <p v-if="state.$error.value.firstName" class="error-message">{{ state.$error.value.firstName }}</p>
+    </div>
+    <div class="form-item" :class="[state.$errors.value.lastName.length ? 'has-error' : '']">
+      <label class="form-label">Last name:</label>
+      <input
+        :ref="state.$els.lastName"
+        type="text"
+        v-model="state.values.lastName"
+        class="form-input"
+      >
+      <p v-if="state.$error.value.lastName" class="error-message">{{ state.$error.value.lastName }}</p>
+    </div>
+  </DemoView>
+</template>
diff --git a/playground/src/pages/PasswordDemo.vue b/playground/src/pages/PasswordDemo.vue
index cc79697..7897259 100644
--- a/playground/src/pages/PasswordDemo.vue
+++ b/playground/src/pages/PasswordDemo.vue
@@ -2,37 +2,55 @@
 import { computed, ref } from 'vue'
 import { sameAs, useV7d } from 'vue-v8n'
 import DemoView from '../components/DemoView.vue'
-import { getControlItemsRef, getRuleOptionsRef } from '../utils'
+import type { ControlItemGroup, RuleOptionGroup } from '../components/DemoView.vue'
 
 const password = ref('')
 
-const ruleOptions = getRuleOptionsRef([
-  { label: 'sameAs(password)', rule: sameAs(password), selected: false }
+const ruleOptionGroups = ref<RuleOptionGroup[]>([
+  {
+    label: 'Password (Confirmation)',
+    rules: [
+      { label: 'sameAs(password)', rule: sameAs(password), selected: false }
+    ]
+  }
 ])
 
-const rules = computed(() => ruleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : []))
+const rules = computed(() => ruleOptionGroups.value[0].rules.flatMap(({ selected, rule }) => selected ? [rule] : []))
 
 const state = useV7d('', rules)
 
 const result = ref<typeof state.value.value | Error>(state.value.value)
 
-const controlItems = getControlItemsRef(state, result, 'mypassword')
+const controlItemGroups = ref<ControlItemGroup[]>([
+  {
+    label: 'Name',
+    items: [
+      { label: 'Touch', fn: state.$touch },
+      { label: 'Validate', fn: () => result.value = state.$validate() },
+      { label: 'Reset', fn: state.$reset },
+      { label: 'Reset with initial value', fn: state.$resetWithInitialValue },
+      { label: 'Reset with "mypassword"', fn: () => state.$resetWith('mypassword') }
+    ]
+  }
+])
 </script>
 
 <template>
   <DemoView
-    v-model="ruleOptions"
-    :control-items="controlItems"
+    v-model="ruleOptionGroups"
+    :control-item-groups="controlItemGroups"
     :state="state"
     :result="result"
   >
-    <div class="form-item" :class="[state.$hasError.value ? 'has-error' : '']">
+    <div class="form-item">
       <label class="form-label">Password:</label>
       <input
         type="password"
         v-model="password"
         class="form-input"
       >
+    </div>
+    <div class="form-item" :class="[state.$hasError.value ? 'has-error' : '']">
       <label class="form-label">Password (confirmation):</label>
       <input
         :ref="state.$el"
diff --git a/playground/src/pages/StringDemo.vue b/playground/src/pages/StringDemo.vue
index e2de8c4..bdfd06e 100644
--- a/playground/src/pages/StringDemo.vue
+++ b/playground/src/pages/StringDemo.vue
@@ -1,24 +1,44 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useV7d } from 'vue-v8n'
+import { max, min, required, useV7d } from 'vue-v8n'
 import DemoView from '../components/DemoView.vue'
-import { getControlItemsRef, getRuleOptionsRef } from '../utils'
+import type { ControlItemGroup, RuleOptionGroup } from '../components/DemoView.vue'
 
-const ruleOptions = getRuleOptionsRef()
+const ruleOptionGroups = ref<RuleOptionGroup[]>([
+  {
+    label: 'Name',
+    rules: [
+      { label: 'required', rule: required, selected: false },
+      { label: 'min(5)', rule: min(5), selected: false },
+      { label: 'max(10)', rule: max(10), selected: false }
+    ]
+  }
+])
 
-const rules = computed(() => ruleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : []))
+const rules = computed(() => ruleOptionGroups.value[0].rules.flatMap(({ selected, rule }) => selected ? [rule] : []))
 
 const state = useV7d('', rules)
 
 const result = ref<typeof state.value.value | Error>(state.value.value)
 
-const controlItems = getControlItemsRef(state, result, 'John Doe')
+const controlItemGroups = ref<ControlItemGroup[]>([
+  {
+    label: 'Name',
+    items: [
+      { label: 'Touch', fn: state.$touch },
+      { label: 'Validate', fn: () => result.value = state.$validate() },
+      { label: 'Reset', fn: state.$reset },
+      { label: 'Reset with initial value', fn: state.$resetWithInitialValue },
+      { label: 'Reset with "John Doe"', fn: () => state.$resetWith('John Doe') }
+    ]
+  }
+])
 </script>
 
 <template>
   <DemoView
-    v-model="ruleOptions"
-    :control-items="controlItems"
+    v-model="ruleOptionGroups"
+    :control-item-groups="controlItemGroups"
     :state="state"
     :result="result"
   >
diff --git a/playground/src/router.ts b/playground/src/router.ts
index c7ee2d7..47b1456 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import NumberDemo from './pages/NumberDemo.vue'
+import ObjectDemo from './pages/ObjectDemo.vue'
 import PasswordDemo from './pages/PasswordDemo.vue'
 import StringDemo from './pages/StringDemo.vue'
 
@@ -7,6 +8,7 @@ export const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: '/number', component: NumberDemo },
+    { path: '/object', component: ObjectDemo },
     { path: '/password', component: PasswordDemo },
     { path: '/string', component: StringDemo }
   ],
diff --git a/playground/src/utils.ts b/playground/src/utils.ts
deleted file mode 100644
index e730f7b..0000000
--- a/playground/src/utils.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ref } from 'vue'
-import type { Ref } from 'vue'
-import { max, min, required, useV7d } from 'vue-v8n'
-import type { ControlItem, RuleOption } from './components/DemoView.vue'
-
-export function getControlItemsRef (state: ReturnType<typeof useV7d<any>>, result: Ref<any>, initialValue: unknown) {
-  return ref<ControlItem[]>([
-    { label: 'Touch', fn: state.$touch },
-    { label: 'Validate', fn: () => result.value = state.$validate() },
-    { label: 'Reset', fn: state.$reset },
-    { label: 'Reset with initial value', fn: state.$resetWithInitialValue },
-    { label: `Reset with \`${initialValue}\``, fn: () => state.$resetWith(initialValue) },
-  ])
-}
-
-export function getRuleOptionsRef (additionalRuleOptions: RuleOption[] = []): Ref<RuleOption[]> {
-  return ref<RuleOption[]>([
-    { label: 'required', rule: required, selected: false },
-    { label: 'min(5)', rule: min(5), selected: false },
-    { label: 'max(10)', rule: max(10), selected: false },
-    ...additionalRuleOptions
-  ])
-}