Skip to content

Commit

Permalink
chore!: add $ prefix to composable properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@nozomuikuta
nozomuikuta committed Jan 3, 2024
1 parent 233d3f6 commit 7c4fa6a
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 51 deletions.
38 changes: 19 additions & 19 deletions packages/vue-v8n/src/composables/useV7d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@ import type { RuleDefinition, UseV7dOptions } from '../types'
export function useV7d<T>(value: MaybeRef<T>, rules: MaybeRefOrGetter<RuleDefinition[]>, options?: UseV7dOptions) {
const immediate = !!options?.immediate

const el = ref<EventTarget>()
const $el = ref<EventTarget>()
const _value = toRef(value)
const _rules = toRef(rules)
const _touched = ref(immediate)
const _error = ref('')
const _errors = ref<string[]>([])

watch(el, () => {
el.value?.removeEventListener('focus', touch)
el.value?.addEventListener('focus', touch)
watch($el, () => {
$el.value?.removeEventListener('focus', $touch)
$el.value?.addEventListener('focus', $touch)
}, { immediate: true })

watch(_value, validate, { immediate })
watch(_value, $validate, { immediate })

watch(_rules, validate)
watch(_rules, $validate)

function touch() {
function $touch() {
const isAlreadyTouched = _touched.value

_touched.value = true

if (!isAlreadyTouched) {
el.value?.removeEventListener('blur', validate)
el.value?.addEventListener('blur', validate, { once: true })
$el.value?.removeEventListener('blur', $validate)
$el.value?.addEventListener('blur', $validate, { once: true })
}
}

function validate() {
function $validate() {
if (!_touched.value) {
return new Error('[vue-v8n] not yet touched')
}
Expand All @@ -58,21 +58,21 @@ export function useV7d<T>(value: MaybeRef<T>, rules: MaybeRefOrGetter<RuleDefini
return _value.value as T
}

function reset() {
function $reset() {
_touched.value = false
_errors.value = []
_error.value = ''
}

return {
value: _value,
el,
touched: computed(() => _touched.value),
error: computed(() => _error.value),
errors: computed(() => _errors.value),
hasError: computed(() => !!_errors.value.length),
touch,
validate,
reset
$el,
$touched: computed(() => _touched.value),
$error: computed(() => _error.value),
$errors: computed(() => _errors.value),
$hasError: computed(() => !!_errors.value.length),
$touch,
$validate,
$reset
}
}
64 changes: 32 additions & 32 deletions playground/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const nameRuleOptions = ref([
])
const name = useV7d('', computed(() => nameRuleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : [])))
watch(nameRuleOptions, () => validatedValues.name = name.validate(), { deep: true })
watch(nameRuleOptions, () => validatedValues.name = name.$validate(), { deep: true })
const countRuleOptions = ref([
{ label: 'required', rule: required, selected: false },
Expand All @@ -18,17 +18,17 @@ const countRuleOptions = ref([
])
const count = useV7d(0, computed(() => countRuleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : [])))
watch(countRuleOptions, () => validatedValues.count = count.validate(), { deep: true })
watch(countRuleOptions, () => validatedValues.count = count.$validate(), { deep: true })
const password = ref('')
const passwordConfirmationRuleOptions = ref([
{ label: 'sameAs(password)', rule: sameAs(password), selected: false }
])
const passwordConfirmation = useV7d('', computed(() => passwordConfirmationRuleOptions.value.flatMap(({ selected, rule }) => selected ? [rule] : [])))
watch(password, () => validatedValues.passwordConfirmation = passwordConfirmation.validate())
watch(passwordConfirmation.value, () => validatedValues.passwordConfirmation = passwordConfirmation.validate())
watch(passwordConfirmationRuleOptions, () => validatedValues.passwordConfirmation = passwordConfirmation.validate(), { deep: true })
watch(password, () => validatedValues.passwordConfirmation = passwordConfirmation.$validate())
watch(passwordConfirmation.value, () => validatedValues.passwordConfirmation = passwordConfirmation.$validate())
watch(passwordConfirmationRuleOptions, () => validatedValues.passwordConfirmation = passwordConfirmation.$validate(), { deep: true })
const state = reactive({
name,
Expand All @@ -42,21 +42,21 @@ const validatedValues = reactive({} as {
})
function validate() {
validatedValues.name = name.validate()
validatedValues.count = count.validate()
validatedValues.passwordConfirmation = passwordConfirmation.validate()
validatedValues.name = name.$validate()
validatedValues.count = count.$validate()
validatedValues.passwordConfirmation = passwordConfirmation.$validate()
}
function touch() {
name.touch()
count.touch()
passwordConfirmation.touch()
name.$touch()
count.$touch()
passwordConfirmation.$touch()
}
function reset() {
name.reset()
count.reset()
passwordConfirmation.reset()
name.$reset()
count.$reset()
passwordConfirmation.$reset()
}
onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProperties.vueV8n))
Expand All @@ -72,15 +72,15 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
</div>
</div>
<div class="pane pane-ui">
<div :class="['form-item', name.hasError.value ? 'has-error' : '']">
<div :class="['form-item', name.$hasError.value ? 'has-error' : '']">
<label class="form-label">Name:</label>
<input
:ref="name.el"
:ref="name.$el"
type="text"
v-model="name.value.value"
class="form-input"
>
<p v-if="name.hasError.value" class="error-message">{{ name.error.value }}</p>
<p v-if="name.$hasError.value" class="error-message">{{ name.$error.value }}</p>
<div class="control-items">
<p>Rules:</p>
<label v-for="ruleOption in nameRuleOptions">
Expand All @@ -89,20 +89,20 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
</label>
</div>
<div class="control-items">
<button @click="validatedValues.name = name.validate()">Validate</button>
<button @click="name.touch">Touch</button>
<button @click="name.reset">Reset</button>
<button @click="validatedValues.name = name.$validate()">Validate</button>
<button @click="name.$touch">Touch</button>
<button @click="name.$reset">Reset</button>
</div>
</div>
<div :class="['form-item', count.hasError.value ? 'has-error' : '']">
<div :class="['form-item', count.$hasError.value ? 'has-error' : '']">
<label class="form-label">Count:</label>
<input
:ref="count.el"
:ref="count.$el"
type="number"
v-model="count.value.value"
class="form-input"
>
<p v-if="count.hasError.value" class="error-message">{{ count.error.value }}</p>
<p v-if="count.$hasError.value" class="error-message">{{ count.$error.value }}</p>
<div class="control-items">
<p>Rules:</p>
<label v-for="ruleOption in countRuleOptions">
Expand All @@ -111,12 +111,12 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
</label>
</div>
<div class="control-items">
<button @click="validatedValues.count = count.validate()">Validate</button>
<button @click="count.touch">Touch</button>
<button @click="count.reset">Reset</button>
<button @click="validatedValues.count = count.$validate()">Validate</button>
<button @click="count.$touch">Touch</button>
<button @click="count.$reset">Reset</button>
</div>
</div>
<div :class="['form-item', passwordConfirmation.hasError.value ? 'has-error' : '']">
<div :class="['form-item', passwordConfirmation.$hasError.value ? 'has-error' : '']">
<label class="form-label">Password:</label>
<input
type="input"
Expand All @@ -125,12 +125,12 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
>
<label class="form-label">Password (confirmation):</label>
<input
:ref="passwordConfirmation.el"
:ref="passwordConfirmation.$el"
type="input"
v-model="passwordConfirmation.value.value"
class="form-input"
>
<p v-if="passwordConfirmation.hasError.value" class="error-message">{{ passwordConfirmation.error.value }}</p>
<p v-if="passwordConfirmation.$hasError.value" class="error-message">{{ passwordConfirmation.$error.value }}</p>
<div class="control-items">
<p>Rules:</p>
<label v-for="ruleOption in passwordConfirmationRuleOptions">
Expand All @@ -139,9 +139,9 @@ onMounted(() => console.log(getCurrentInstance()?.appContext.config.globalProper
</label>
</div>
<div class="control-items">
<button @click="validatedValues.passwordConfirmation = passwordConfirmation.validate()">Validate</button>
<button @click="passwordConfirmation.touch">Touch</button>
<button @click="passwordConfirmation.reset">Reset</button>
<button @click="validatedValues.passwordConfirmation = passwordConfirmation.$validate()">Validate</button>
<button @click="passwordConfirmation.$touch">Touch</button>
<button @click="passwordConfirmation.$reset">Reset</button>
</div>
</div>
</div>
Expand Down

0 comments on commit 7c4fa6a

Please sign in to comment.