// TextField.vue
import { defineComponent, computed } from 'vue';
import AtxFieldHelperText from '../field-helper-text/FieldHelperText.vue';
import AtxIcon from '../icon/Icon.vue';
import { formField, id, aria, fieldHelperText } from '../../composables';
const { useAria } = aria;
const { useFormField } = formField;
const { useFieldHelperText } = fieldHelperText;
const { useId } = id;
export default defineComponent({
 name: 'TextField',
 components: {
 AtxFieldHelperText,
 AtxIcon,
 },
 emits: [...formField.emits],
 props: {
 ...aria.props,
 ...formField.props,
 ...fieldHelperText.props,
 ...id.props,
 },
 setup(props, context) {
 // Component Identifier
 useId();
 // Form Field
 const { fieldValue, isFilled } = useFormField(props, context);
 // ARIA and Accessibility
 const { resolveAriaLabel } = useAria();
 const resolvedAriaLabel = computed(() => {
 return resolveAriaLabel(props.label);
 });
 // Helper Text
 const { resolvedFieldHelperText } = useFieldHelperText(props);
 return {
 isFilled,
 resolvedAriaLabel,
 fieldValue,
 resolvedFieldHelperText,
 };
 },
 methods: {
 // This method cannot be defined in `useFormField()`, because it requires access to template refs.
 onClickLabel: formField.methods.onClickLabel.bind(this)
 },
 mounted() {
 // The mounted hook cannot be defined in `useFormField()`, because it references `this` when assigning an `id` attribute to the root element.
 id.mounted.bind(this)()
 },
});

// composables/form-field.js
import { defineProps, defineEmits, onMounted, ref, computed, watch } from 'vue';
export const formField = {
 props: {
 label: {
 type: String,
 required: true
 },
 modelValue: {
 type: String,
 },
 placeholder: {
 type: String
 },
 disabled: {
 type: Boolean
 },
 },
 emits: [
 'update:modelValue',
 'input'
 ],
 useFormField(props, { emit }) {
 const fieldValue = ref('');
 
 const isFilled = computed(() => {
 return fieldValue.value.length > 0
 });
 watch(fieldValue, (newValue) => {
 emit('update:modelValue', newValue);
 emit('input', newValue);
 });
 
 return {
 fieldValue,
 isFilled
 };
 },
 methods: {
 // This method cannot be defined in `useFormField()`, because it requires access to template refs.
 onClickLabel($event) {
 $event.preventDefault();
 if (this.disabled) return;
 if (this.$refs.input) {
 this.$refs.input.focus();
 }
 }
 }
}