chore: migrate components to typescript setup (#55)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/forms/Checkbox.vue

@@ -26,88 +26,81 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  props: {
-    value: {
-      type: [String, Number, Boolean],
-      default: null
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Array],
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.checkbox.wrapper
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.checkbox.base
-    },
-    labelClass: {
-      type: String,
-      default: () => $ui.checkbox.label
-    },
-    requiredClass: {
-      type: String,
-      default: () => $ui.checkbox.required
-    },
-    helpClass: {
-      type: String,
-      default: () => $ui.checkbox.help
-    },
-    customClass: {
-      type: String,
-      default: null
-    }
+const props = defineProps({
+  value: {
+    type: [String, Number, Boolean],
+    default: null
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
-    const isChecked = computed({
-      get () {
-        return props.modelValue
-      },
-      set (value) {
-        emit('update:modelValue', value)
-      }
-    })
-
-    const inputClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        props.customClass
-      )
-    })
-
-    return {
-      isChecked,
-      inputClass
-    }
+  modelValue: {
+    type: [String, Number, Boolean, Array],
+    default: null
+  },
+  name: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  help: {
+    type: String,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.checkbox.wrapper
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.checkbox.base
+  },
+  labelClass: {
+    type: String,
+    default: () => $ui.checkbox.label
+  },
+  requiredClass: {
+    type: String,
+    default: () => $ui.checkbox.required
+  },
+  helpClass: {
+    type: String,
+    default: () => $ui.checkbox.help
+  },
+  customClass: {
+    type: String,
+    default: null
   }
-}
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const isChecked = computed({
+  get () {
+    return props.modelValue
+  },
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const inputClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    props.customClass
+  )
+})
 </script>

src/runtime/components/forms/FormGroup.vue

@@ -21,67 +21,65 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import $ui from '#build/ui'
 
-export default {
-  props: {
-    name: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    description: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    hint: {
-      type: String,
-      default: null
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.formGroup.wrapper
-    },
-    containerClass: {
-      type: String,
-      default: () => $ui.formGroup.container
-    },
-    labelClass: {
-      type: String,
-      default: () => $ui.formGroup.label
-    },
-    labelWrapperClass: {
-      type: String,
-      default: () => $ui.formGroup.labelWrapper
-    },
-    descriptionClass: {
-      type: String,
-      default: () => $ui.formGroup.description
-    },
-    requiredClass: {
-      type: String,
-      default: () => $ui.formGroup.required
-    },
-    hintClass: {
-      type: String,
-      default: () => $ui.formGroup.hint
-    },
-    helpClass: {
-      type: String,
-      default: () => $ui.formGroup.help
-    }
+defineProps({
+  name: {
+    type: String,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  description: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  help: {
+    type: String,
+    default: null
+  },
+  hint: {
+    type: String,
+    default: null
+  },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.formGroup.wrapper
+  },
+  containerClass: {
+    type: String,
+    default: () => $ui.formGroup.container
+  },
+  labelClass: {
+    type: String,
+    default: () => $ui.formGroup.label
+  },
+  labelWrapperClass: {
+    type: String,
+    default: () => $ui.formGroup.labelWrapper
+  },
+  descriptionClass: {
+    type: String,
+    default: () => $ui.formGroup.description
+  },
+  requiredClass: {
+    type: String,
+    default: () => $ui.formGroup.required
+  },
+  hintClass: {
+    type: String,
+    default: () => $ui.formGroup.hint
+  },
+  helpClass: {
+    type: String,
+    default: () => $ui.formGroup.help
   }
-}
+})
 </script>

src/runtime/components/forms/Input.vue

@@ -27,180 +27,164 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { Ref } from 'vue'
 import { ref, computed, onMounted } from 'vue'
 import Icon from '../elements/Icon'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  components: {
-    Icon
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
   },
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    type: {
-      type: String,
-      default: 'text'
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    spellcheck: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loadingIcon: {
-      type: String,
-      default: () => $ui.input.icon.loading
-    },
-    trailing: {
-      type: Boolean,
-      default: false
-    },
-    leading: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator (value) {
-        return Object.keys($ui.input.size).includes(value)
-      }
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.input.wrapper
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.input.base
-    },
-    iconBaseClass: {
-      type: String,
-      default: () => $ui.input.icon.base
-    },
-    customClass: {
-      type: String,
-      default: null
-    },
-    appearance: {
-      type: String,
-      default: 'default',
-      validator (value) {
-        return Object.keys($ui.input.appearance).includes(value)
-      }
-    },
-    loading: {
-      type: Boolean,
-      default: false
+  type: {
+    type: String,
+    default: 'text'
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  autocomplete: {
+    type: String,
+    default: null
+  },
+  spellcheck: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: String,
+    default: null
+  },
+  loadingIcon: {
+    type: String,
+    default: () => $ui.input.icon.loading
+  },
+  trailing: {
+    type: Boolean,
+    default: false
+  },
+  leading: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator (value: string) {
+      return Object.keys($ui.input.size).includes(value)
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
-    const input = ref(null)
-
-    const autoFocus = () => {
-      if (props.autofocus) {
-        input.value.focus()
-      }
+  wrapperClass: {
+    type: String,
+    default: () => $ui.input.wrapper
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.input.base
+  },
+  iconBaseClass: {
+    type: String,
+    default: () => $ui.input.icon.base
+  },
+  customClass: {
+    type: String,
+    default: null
+  },
+  appearance: {
+    type: String,
+    default: 'default',
+    validator (value: string) {
+      return Object.keys($ui.input.appearance).includes(value)
     }
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
 
-    const onInput = (value) => {
-      emit('update:modelValue', value)
-    }
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
 
-    onMounted(() => {
-      setTimeout(() => {
-        autoFocus()
-      }, 100)
-    })
+const input: Ref<HTMLInputElement> = ref(null)
 
-    const isLeading = computed(() => {
-      return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
-    })
-
-    const isTrailing = computed(() => {
-      return (props.icon && props.trailing) || (props.loading && props.trailing)
-    })
-
-    const inputClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        $ui.input.size[props.size],
-        $ui.input.spacing[props.size],
-        $ui.input.appearance[props.appearance],
-        isLeading.value && $ui.input.leading.spacing[props.size],
-        isTrailing.value && $ui.input.trailing.spacing[props.size],
-        props.customClass
-      )
-    })
-
-    const iconName = computed(() => {
-      if (props.loading) {
-        return props.loadingIcon
-      }
-
-      return props.icon
-    })
-
-    const iconClass = computed(() => {
-      return classNames(
-        props.iconBaseClass,
-        $ui.input.icon.size[props.size],
-        isLeading.value && $ui.input.icon.leading.spacing[props.size],
-        isTrailing.value && $ui.input.icon.trailing.spacing[props.size],
-        props.loading && 'animate-spin'
-      )
-    })
-
-    const iconLeadingWrapperClass = $ui.input.icon.leading.wrapper
-    const iconTrailingWrapperClass = $ui.input.icon.trailing.wrapper
-
-    return {
-      input,
-      onInput,
-      inputClass,
-      iconName,
-      iconClass,
-      iconLeadingWrapperClass,
-      iconTrailingWrapperClass,
-      isLeading,
-      isTrailing
-    }
+const autoFocus = () => {
+  if (props.autofocus) {
+    input.value.focus()
   }
 }
+
+const onInput = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, 100)
+})
+
+const isLeading = computed(() => {
+  return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
+})
+
+const isTrailing = computed(() => {
+  return (props.icon && props.trailing) || (props.loading && props.trailing)
+})
+
+const inputClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    $ui.input.size[props.size],
+    $ui.input.spacing[props.size],
+    $ui.input.appearance[props.appearance],
+    isLeading.value && $ui.input.leading.spacing[props.size],
+    isTrailing.value && $ui.input.trailing.spacing[props.size],
+    props.customClass
+  )
+})
+
+const iconName = computed(() => {
+  if (props.loading) {
+    return props.loadingIcon
+  }
+
+  return props.icon
+})
+
+const iconClass = computed(() => {
+  return classNames(
+    props.iconBaseClass,
+    $ui.input.icon.size[props.size],
+    isLeading.value && $ui.input.icon.leading.spacing[props.size],
+    isTrailing.value && $ui.input.icon.trailing.spacing[props.size],
+    props.loading && 'animate-spin'
+  )
+})
+
+const iconLeadingWrapperClass = $ui.input.icon.leading.wrapper
+const iconTrailingWrapperClass = $ui.input.icon.trailing.wrapper
 </script>

src/runtime/components/forms/Radio.vue

@@ -26,88 +26,81 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  props: {
-    value: {
-      type: [String, Number, Boolean],
-      default: null
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Object],
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.radio.wrapper
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.radio.base
-    },
-    labelClass: {
-      type: String,
-      default: () => $ui.radio.label
-    },
-    requiredClass: {
-      type: String,
-      default: () => $ui.radio.required
-    },
-    helpClass: {
-      type: String,
-      default: () => $ui.radio.help
-    },
-    customClass: {
-      type: String,
-      default: null
-    }
+const props = defineProps({
+  value: {
+    type: [String, Number, Boolean],
+    default: null
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
-    const isChecked = computed({
-      get () {
-        return props.modelValue
-      },
-      set (value) {
-        emit('update:modelValue', value)
-      }
-    })
-
-    const radioClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        props.customClass
-      )
-    })
-
-    return {
-      isChecked,
-      radioClass
-    }
+  modelValue: {
+    type: [String, Number, Boolean, Object],
+    default: null
+  },
+  name: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  help: {
+    type: String,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.radio.wrapper
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.radio.base
+  },
+  labelClass: {
+    type: String,
+    default: () => $ui.radio.label
+  },
+  requiredClass: {
+    type: String,
+    default: () => $ui.radio.required
+  },
+  helpClass: {
+    type: String,
+    default: () => $ui.radio.help
+  },
+  customClass: {
+    type: String,
+    default: null
   }
-}
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const isChecked = computed({
+  get () {
+    return props.modelValue
+  },
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const radioClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    props.customClass
+  )
+})
 </script>

src/runtime/components/forms/Select.vue

@@ -42,172 +42,151 @@
   </div>
 </template>
 
-<script>
-import { ref, computed } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { get } from 'lodash-es'
 import Icon from '../elements/Icon'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  components: {
-    Icon
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object],
+    default: ''
   },
-  props: {
-    modelValue: {
-      type: [String, Number, Object],
-      default: ''
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator (value) {
-        return Object.keys($ui.select.size).includes(value)
-      }
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.select.wrapper
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.select.base
-    },
-    iconBaseClass: {
-      type: String,
-      default: () => $ui.select.icon.base
-    },
-    customClass: {
-      type: String,
-      default: null
-    },
-    textAttribute: {
-      type: String,
-      default: 'text'
-    },
-    valueAttribute: {
-      type: String,
-      default: 'value'
-    },
-    icon: {
-      type: String,
-      default: null
+  name: {
+    type: String,
+    required: true
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator (value: string) {
+      return Object.keys($ui.select.size).includes(value)
     }
   },
-  emits: ['update:modelValue'],
-  setup (props, { emit }) {
-    const select = ref(null)
+  wrapperClass: {
+    type: String,
+    default: () => $ui.select.wrapper
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.select.base
+  },
+  iconBaseClass: {
+    type: String,
+    default: () => $ui.select.icon.base
+  },
+  customClass: {
+    type: String,
+    default: null
+  },
+  textAttribute: {
+    type: String,
+    default: 'text'
+  },
+  valueAttribute: {
+    type: String,
+    default: 'value'
+  },
+  icon: {
+    type: String,
+    default: null
+  }
+})
 
-    const onInput = (value) => {
-      emit('update:modelValue', value)
-    }
+const emit = defineEmits(['update:modelValue'])
 
-    const guessOptionValue = (option) => {
-      return get(option, props.valueAttribute, get(option, props.textAttribute))
-    }
+const onInput = (value: string) => {
+  emit('update:modelValue', value)
+}
 
-    const guessOptionText = (option) => {
-      return get(option, props.textAttribute, get(option, props.valueAttribute))
-    }
+const guessOptionValue = (option: any) => {
+  return get(option, props.valueAttribute, get(option, props.textAttribute))
+}
 
-    const normalizeOption = (option) => {
-      if (['string', 'number', 'boolean'].includes(typeof option)) {
-        return {
-          [props.valueAttribute]: option,
-          [props.textAttribute]: option
-        }
-      }
-
-      return {
-        ...option,
-        [props.valueAttribute]: guessOptionValue(option),
-        [props.textAttribute]: guessOptionText(option)
-      }
-    }
-
-    const normalizedOptions = computed(() => {
-      return props.options.map(option => normalizeOption(option))
-    })
-
-    const normalizedOptionsWithPlaceholder = computed(() => {
-      if (!props.placeholder) {
-        return normalizedOptions.value
-      }
-
-      return [
-        {
-          [props.valueAttribute]: '',
-          [props.textAttribute]: props.placeholder,
-          disabled: true
-        },
-        ...normalizedOptions.value
-      ]
-    })
-
-    const normalizedValue = computed(() => {
-      const foundOption = normalizedOptionsWithPlaceholder.value.find(option => option.value === props.modelValue)
-      if (!foundOption) {
-        return ''
-      }
-
-      return foundOption.value
-    })
-
-    const selectClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        $ui.select.size[props.size],
-        $ui.select.spacing[props.size],
-        $ui.select.appearance.default,
-        !!props.icon && $ui.select.leading.spacing[props.size],
-        $ui.select.trailing.spacing[props.size],
-        props.customClass
-      )
-    })
-
-    const iconClass = computed(() => {
-      return classNames(
-        props.iconBaseClass,
-        $ui.select.icon.size[props.size],
-        !!props.icon && $ui.select.icon.leading.spacing[props.size]
-      )
-    })
-
-    const iconWrapperClass = $ui.select.icon.leading.wrapper
+const guessOptionText = (option: any) => {
+  return get(option, props.textAttribute, get(option, props.valueAttribute))
+}
 
+const normalizeOption = (option: any) => {
+  if (['string', 'number', 'boolean'].includes(typeof option)) {
     return {
-      select,
-      onInput,
-      guessOptionValue,
-      guessOptionText,
-      normalizeOption,
-      normalizedOptions,
-      normalizedOptionsWithPlaceholder,
-      normalizedValue,
-      selectClass,
-      iconClass,
-      iconWrapperClass
+      [props.valueAttribute]: option,
+      [props.textAttribute]: option
     }
   }
+
+  return {
+    ...option,
+    [props.valueAttribute]: guessOptionValue(option),
+    [props.textAttribute]: guessOptionText(option)
+  }
 }
+
+const normalizedOptions = computed(() => {
+  return props.options.map(option => normalizeOption(option))
+})
+
+const normalizedOptionsWithPlaceholder = computed(() => {
+  if (!props.placeholder) {
+    return normalizedOptions.value
+  }
+
+  return [
+    {
+      [props.valueAttribute]: '',
+      [props.textAttribute]: props.placeholder,
+      disabled: true
+    },
+    ...normalizedOptions.value
+  ]
+})
+
+const normalizedValue = computed(() => {
+  const foundOption = normalizedOptionsWithPlaceholder.value.find(option => option.value === props.modelValue)
+  if (!foundOption) {
+    return ''
+  }
+
+  return foundOption.value
+})
+
+const selectClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    $ui.select.size[props.size],
+    $ui.select.spacing[props.size],
+    $ui.select.appearance.default,
+    !!props.icon && $ui.select.leading.spacing[props.size],
+    $ui.select.trailing.spacing[props.size],
+    props.customClass
+  )
+})
+
+const iconClass = computed(() => {
+  return classNames(
+    props.iconBaseClass,
+    $ui.select.icon.size[props.size],
+    !!props.icon && $ui.select.icon.leading.spacing[props.size]
+  )
+})
+
+const iconWrapperClass = $ui.select.icon.leading.wrapper
 </script>

src/runtime/components/forms/Textarea.vue

@@ -18,145 +18,138 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { Ref } from 'vue'
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
-export default {
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    rows: {
-      type: Number,
-      default: 3
-    },
-    autoresize: {
-      type: Boolean,
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    appearance: {
-      type: String,
-      default: 'default',
-      validator (value) {
-        return Object.keys($ui.textarea.appearance).includes(value)
-      }
-    },
-    resize: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator (value) {
-        return Object.keys($ui.textarea.size).includes(value)
-      }
-    },
-    wrapperClass: {
-      type: String,
-      default: () => $ui.textarea.wrapper
-    },
-    baseClass: {
-      type: String,
-      default: () => $ui.textarea.base
-    },
-    customClass: {
-      type: String,
-      default: null
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rows: {
+    type: Number,
+    default: 3
+  },
+  autoresize: {
+    type: Boolean,
+    default: false
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  autocomplete: {
+    type: String,
+    default: null
+  },
+  appearance: {
+    type: String,
+    default: 'default',
+    validator (value: string) {
+      return Object.keys($ui.textarea.appearance).includes(value)
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
-    const textarea = ref(null)
+  resize: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator (value: string) {
+      return Object.keys($ui.textarea.size).includes(value)
+    }
+  },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.textarea.wrapper
+  },
+  baseClass: {
+    type: String,
+    default: () => $ui.textarea.base
+  },
+  customClass: {
+    type: String,
+    default: null
+  }
+})
 
-    const autoFocus = () => {
-      if (props.autofocus) {
-        textarea.value.focus()
-      }
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const textarea: Ref<HTMLTextAreaElement> = ref(null)
+
+const autoFocus = () => {
+  if (props.autofocus) {
+    textarea.value.focus()
+  }
+}
+
+const autoResize = () => {
+  if (props.autoresize) {
+    if (!textarea.value) {
+      return
     }
 
-    const autoResize = () => {
-      if (props.autoresize) {
-        if (!textarea.value) {
-          return
-        }
+    textarea.value.rows = props.rows
 
-        textarea.value.rows = props.rows
+    const styles = window.getComputedStyle(textarea.value)
+    const paddingTop = parseInt(styles.paddingTop)
+    const paddingBottom = parseInt(styles.paddingBottom)
+    const padding = paddingTop + paddingBottom
+    const lineHeight = parseInt(styles.lineHeight)
+    const { scrollHeight } = textarea.value
+    const newRows = (scrollHeight - padding) / lineHeight
 
-        const styles = window.getComputedStyle(textarea.value)
-        const paddingTop = parseInt(styles.paddingTop)
-        const paddingBottom = parseInt(styles.paddingBottom)
-        const padding = paddingTop + paddingBottom
-        const lineHeight = parseInt(styles.lineHeight)
-        const { scrollHeight } = textarea.value
-        const newRows = (scrollHeight - padding) / lineHeight
-
-        if (newRows > props.rows) {
-          textarea.value.rows = newRows
-        }
-      }
-    }
-
-    const onInput = (value) => {
-      autoResize()
-
-      emit('update:modelValue', value)
-    }
-
-    watch(() => props.modelValue, () => {
-      nextTick(autoResize)
-    })
-
-    onMounted(() => {
-      setTimeout(() => {
-        autoFocus()
-        autoResize()
-      }, 100)
-    })
-
-    const textareaClass = computed(() => {
-      return classNames(
-        props.baseClass,
-        $ui.textarea.size[props.size],
-        $ui.textarea.spacing[props.size],
-        $ui.textarea.appearance[props.appearance],
-        !props.resize && 'resize-none',
-        props.customClass
-      )
-    })
-
-    return {
-      textarea,
-      onInput,
-      textareaClass
+    if (newRows > props.rows) {
+      textarea.value.rows = newRows
     }
   }
 }
+
+const onInput = (value: string) => {
+  autoResize()
+
+  emit('update:modelValue', value)
+}
+
+watch(() => props.modelValue, () => {
+  nextTick(autoResize)
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+    autoResize()
+  }, 100)
+})
+
+const textareaClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    $ui.textarea.size[props.size],
+    $ui.textarea.spacing[props.size],
+    $ui.textarea.appearance[props.appearance],
+    !props.resize && 'resize-none',
+    props.customClass
+  )
+})
 </script>