From 1aef89954325a730a82e118d006dd9919ad12aec Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 5 Sep 2023 20:41:46 +0300
Subject: [PATCH] feat: update input and input demos

---
 .../components/va-input/VaInput.stories.ts    | 40 ++++++++++++++++++-
 .../ui/src/components/va-input/VaInput.vue    | 12 ++----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/va-input/VaInput.stories.ts b/packages/ui/src/components/va-input/VaInput.stories.ts
index d4414ee58e..7b91d6ac1c 100644
--- a/packages/ui/src/components/va-input/VaInput.stories.ts
+++ b/packages/ui/src/components/va-input/VaInput.stories.ts
@@ -1,5 +1,8 @@
 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',
@@ -7,6 +10,39 @@ export default {
 }
 
 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()
+}
diff --git a/packages/ui/src/components/va-input/VaInput.vue b/packages/ui/src/components/va-input/VaInput.vue
index 57495d0fca..05b1377d22 100644
--- a/packages/ui/src/components/va-input/VaInput.vue
+++ b/packages/ui/src/components/va-input/VaInput.vue
@@ -68,6 +68,7 @@ import {
   useClearable, useClearableProps, useClearableEmits,
   useTranslation,
   useStateful, useStatefulProps, useStatefulEmits, useDeprecatedCondition,
+  useFocusable, useFocusableProps,
 } from '../../composables'
 import { useCleave, useCleaveProps } from './hooks/useCleave'
 
@@ -75,8 +76,6 @@ 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']