Skip to content

Commit 4a28f9c

Browse files
kevinkosterrkevinkosterr
committed
fix: hints not rendering for fields
1 parent f713eb3 commit 4a28f9c

File tree

10 files changed

+39
-27
lines changed

10 files changed

+39
-27
lines changed

‎src/fields/core/FieldCheckbox.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const props = defineProps(useFieldProps())
2828
const { field, model } = toRefs(props)
2929
3030
const { currentModelValue } = useFormModel(model.value, field.value)
31-
const { isRequired, isDisabled } = useFieldAttributes(model.value, field.value)
31+
const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
3232
const { errors, validate } = useFieldValidate(
3333
model.value,
3434
field.value,
@@ -48,4 +48,6 @@ const onFieldValueChanged = ({ target }) => {
4848
})
4949
emits('onInput', target.checked)
5050
}
51+
52+
defineExpose({ hint })
5153
</script>

‎src/fields/core/FieldColor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const maskOptions = {
5050
const { field, model } = toRefs(props)
5151
5252
const { currentModelValue } = useFormModel(model.value, field.value)
53-
const { isRequired, isVisible } = useFieldAttributes(model.value, field.value)
53+
const { isRequired, isVisible, hint } = useFieldAttributes(model.value, field.value)
5454
const { errors, validate } = useFieldValidate(
5555
model.value,
5656
field.value,
@@ -93,5 +93,5 @@ onBeforeMount(() => {
9393
}
9494
})
9595
96-
defineExpose({ isVisible, errors })
96+
defineExpose({ isVisible, errors, hint })
9797
</script>

‎src/fields/core/FieldMask.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const maskOptions: ComputedRef<MaskInputOptions> = computed(() => {
3838
})
3939
4040
const { currentModelValue } = useFormModel(model.value, field.value)
41-
const { isRequired, isDisabled } = useFieldAttributes(model.value, field.value)
41+
const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
4242
const { errors, validate } = useFieldValidate(
4343
model.value,
4444
field.value,
@@ -76,5 +76,5 @@ onBeforeMount(() => {
7676
}
7777
})
7878
79-
defineExpose({ unmaskedValue })
79+
defineExpose({ unmaskedValue, hint })
8080
</script>

‎src/fields/core/FieldNumber.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const emits = defineEmits(useFieldEmits())
3131
3232
const { field, model } = toRefs(props)
3333
34-
const { isDisabled, isRequired } = useFieldAttributes(model.value, field.value)
34+
const { isDisabled, isRequired, hint } = useFieldAttributes(model.value, field.value)
3535
const { currentModelValue } = useFormModel(model.value, field.value)
3636
const { errors, validate } = useFieldValidate(
3737
model.value,
@@ -58,4 +58,6 @@ const onFieldValueChanged = ({ target }) => {
5858
if (!isDecimalStep) return emits('onInput', parseInt(target.value))
5959
emits('onInput', parseFloat(target.value))
6060
}
61+
62+
defineExpose({ hint })
6163
</script>

‎src/fields/core/FieldPassword.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const props = defineProps(useFieldProps())
3232
const emits = defineEmits(useFieldEmits())
3333
3434
const { model, field } = toRefs(props)
35-
const { isRequired, isDisabled } = useFieldAttributes(model.value, field.value)
35+
const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
3636
const { currentModelValue } = useFormModel(model.value, field.value)
3737
3838
const { errors, validate } = useFieldValidate(
@@ -78,4 +78,6 @@ const onBlur = () => {
7878
)
7979
})
8080
}
81+
82+
defineExpose({ hint })
8183
</script>

‎src/fields/core/FieldRadio.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,14 @@ const props = defineProps(useFieldProps())
2828
const emits = defineEmits(useFieldEmits())
2929
3030
const { field, model } = toRefs(props)
31-
const { isRequired } = useFieldAttributes(model.value, field.value)
31+
const { isRequired, hint } = useFieldAttributes(model.value, field.value)
3232
const { currentModelValue } = useFormModel(model.value, field.value)
3333
3434
const getFieldId = (optionName) => `${field.value.name}_${optionName}`
3535
3636
const onFieldValueChanged = ({ target }) => {
3737
emits('onInput', target.value)
3838
}
39+
40+
defineExpose({ hint })
3941
</script>

‎src/fields/core/FieldSelect.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ import { useMagicKeys } from '@vueuse/core'
6969
import { onClickOutside as vOnClickOutside } from '@/directives/onClickOutside.ts'
7070
import { ref, toRefs, computed } from 'vue'
7171
import {
72+
useFieldAttributes,
7273
useFieldEmits,
7374
useFieldProps,
7475
useFormModel
@@ -80,6 +81,7 @@ const { controlLeft, metaLeft } = useMagicKeys()
8081
8182
const isOpened = ref(false)
8283
const { field, model } = toRefs(props)
84+
const { hint } = useFieldAttributes(model.value, field.value)
8385
8486
/** Names of the selected values */
8587
const selectedNames = computed(() => {
@@ -93,23 +95,19 @@ const selectedNames = computed(() => {
9395
9496
/** Whether the field has a value */
9597
const hasValue = computed(() => field.value.multiple ? currentModelValue.value.length : currentModelValue.value)
98+
/** Whether the user is pressing a modifier key (CMD or left CTRL) */
9699
const isPressingModifierKey = computed(() => metaLeft.value || controlLeft.value)
97100
98101
const { currentModelValue } = useFormModel(model.value, field.value)
99102
100-
function onClickInput () {
101-
if (isOpened.value) {
102-
isOpened.value = false
103-
return
104-
}
105-
isOpened.value = true
106-
}
107-
108-
function resetSelection () {
109-
emits('onInput', field.value.multiple ? [] : '')
110-
}
103+
/** Toggles the isOpened state when the input is clicked. */
104+
const onClickInput = () => isOpened.value = !isOpened.value
105+
/** Unselect all items. */
106+
const resetSelection = () => emits('onInput', field.value.multiple ? [] : '')
111107
108+
/** Determine whether an option is currently selected by the user */
112109
function isSelected (option) {
110+
if (!field.value.multiple) return currentModelValue.value === option.value
113111
return currentModelValue.value?.includes(option.value) ?? false
114112
}
115113
@@ -123,14 +121,14 @@ function handleClickOutside (event) {
123121
}
124122
125123
function selectOption (option) {
124+
const optionSelected = isSelected(option)
125+
126126
if (!field.value.multiple) {
127-
const isSelected = currentModelValue.value === option.value
128-
emits('onInput', isSelected ? '' : option.value)
127+
emits('onInput', optionSelected ? '' : option.value)
129128
} else {
130129
let selectedValues = [ ...currentModelValue.value ]
131-
const isSelected = selectedValues.includes(option.value)
132130
133-
if (isSelected) {
131+
if (optionSelected) {
134132
selectedValues = selectedValues.filter(o => o !== option.value)
135133
} else {
136134
selectedValues.push(option.value)
@@ -141,4 +139,6 @@ function selectOption (option) {
141139
}
142140
isOpened.value = false
143141
}
142+
143+
defineExpose({ hint })
144144
</script>

‎src/fields/core/FieldSelectNative.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const emits = defineEmits(useFieldEmits())
3333
3434
const { field, model } = toRefs(props)
3535
36-
const { isRequired, isDisabled } = useFieldAttributes(model.value, field.value)
36+
const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
3737
const { currentModelValue } = useFormModel(model.value, field.value)
3838
const { validate } = useFieldValidate(model.value, field.value)
3939
@@ -50,4 +50,6 @@ const onBlur = () => {
5050
const onFieldValueChanged = (event) => {
5151
emits('onInput', event.target.value)
5252
}
53+
54+
defineExpose({ hint })
5355
</script>

‎src/fields/core/FieldText.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const props = defineProps(useFieldProps())
2424
const { field, model } = toRefs(props)
2525
2626
const { currentModelValue } = useFormModel(model.value, field.value)
27-
const { isRequired, isDisabled } = useFieldAttributes(model.value, field.value)
27+
const { isRequired, isDisabled, hint } = useFieldAttributes(model.value, field.value)
2828
const { errors, validate } = useFieldValidate(
2929
model.value,
3030
field.value,
@@ -48,5 +48,5 @@ const onFieldValueChanged = ({ target }) => {
4848
emits('onInput', target.value)
4949
}
5050
51-
defineExpose({ errors })
51+
defineExpose({ errors, hint })
5252
</script>

‎src/fields/core/FieldTextarea.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const emits = defineEmits(useFieldEmits())
3232
3333
const { field, model } = toRefs(props)
3434
35-
const { isRequired, isDisabled, isReadonly } = useFieldAttributes(model.value, field.value)
35+
const { isRequired, isDisabled, isReadonly, hint } = useFieldAttributes(model.value, field.value)
3636
const { currentModelValue } = useFormModel(model.value, field.value)
3737
const { validate } = useFieldValidate(model.value, field.value)
3838
@@ -49,4 +49,6 @@ const onBlur = () => {
4949
const onFieldValueChanged = (event) => {
5050
emits('onInput', event.target.value)
5151
}
52+
53+
defineExpose({ hint })
5254
</script>

0 commit comments

Comments
 (0)