feat: update input and input demos

packages/ui/src/components/va-input/VaInput.stories.ts

@@ -1,12 +1,48 @@
 import { defineComponent } from 'vue'
-import VaInput from './VaInput.demo.vue'
+import VaInputDemo from './VaInput.demo.vue'
+import { VaInput } from './'
+import { expect } from '@storybook/jest'
+import type { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaInput',
   component: VaInput,
 }
 
 export const Default = defineComponent({
+  components: { VaInputDemo },
+  template: '<VaInputDemo />',
+})
+
+export const Disabled: StoryFn = () => ({
+  components: { VaInput },
+  template: '<VaInput disabled/>',
+})
+Disabled.play = async ({ canvasElement, step }) => {
+  const input = canvasElement.querySelector('input')
+
+  expect(input).toHaveAttribute('disabled')
+  const vaInput = canvasElement.querySelector('.va-input')
+
+  expect(vaInput).toHaveClass('va-input-wrapper--disabled')
+}
+
+export const Placeholder: StoryFn = () => ({
   components: { VaInput },
-  template: '<VaInput/>',
+  template: '<VaInput placeholder="Placeholder"/>',
 })
+Placeholder.play = async ({ canvasElement, step }) => {
+  const input = canvasElement.querySelector('input')
+
+  expect(input).toHaveAttribute('placeholder', 'Placeholder')
+}
+
+export const Autofocus: StoryFn = () => ({
+  components: { VaInput },
+  template: '<VaInput autofocus />',
+})
+Autofocus.play = async ({ canvasElement }) => {
+  const input = canvasElement.querySelector('input')
+
+  expect(input).toHaveFocus()
+}

packages/ui/src/components/va-input/VaInput.vue

@@ -68,15 +68,14 @@ import {
   useClearable, useClearableProps, useClearableEmits,
   useTranslation,
   useStateful, useStatefulProps, useStatefulEmits, useDeprecatedCondition,
+  useFocusable, useFocusableProps,
 } from '../../composables'
 import { useCleave, useCleaveProps } from './hooks/useCleave'
 
 import type { AnyStringPropType } from '../../utils/types/prop-type'
 
 import { VaInputWrapper } from '../va-input-wrapper'
 import { VaIcon } from '../va-icon'
-import { focusElement, blurElement } from '../../utils/focus'
-import { unwrapEl } from '../../utils/unwrapEl'
 import { combineFunctions } from '../../utils/combine-functions'
 
 const VaInputWrapperProps = extractComponentProps(VaInputWrapper)
@@ -101,6 +100,7 @@ export default defineComponent({
   props: {
     ...VaInputWrapperProps,
     ...useFormFieldProps,
+    ...useFocusableProps,
     ...useValidationProps as ValidationProps<string>,
     ...useClearableProps,
     ...useCleaveProps,
@@ -147,13 +147,7 @@ export default defineComponent({
       resetValidation()
     })
 
-    const focus = () => {
-      focusElement(unwrapEl(input.value))
-    }
-
-    const blur = () => {
-      blurElement(unwrapEl(input.value))
-    }
+    const { focus, blur } = useFocusable(input, props)
 
     const filterSlots = computed(() => {
       const iconSlot = ['icon']