From 10cd049f109c94e6d31c15ad45c7dddd817d0c55 Mon Sep 17 00:00:00 2001
From: Hanmo <32361024+Hanmo123@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:28:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20Input=20=E5=92=8C=20TextAr?=
 =?UTF-8?q?ea=20=E7=9A=84=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD=20(#2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 新增输入框组件

* perf: 优化 storybook 组件配置

* feat: 新增 TextField 的 Filled 样式

* fix: 修复 type 始终为 text 的问题

* feat: 新增 TextField 的 Standard 样式

* feat: 准备分离 Input 子组件

* feat: 新增 Textarea 子组件

* feat: 新增 Textarea Outlined 样式

* perf: 移除 Standard Input 的无效样式
feat: 新增 Standard Textarea

* perf: 调整 Dom 结构
feat: 新增 Helper 插槽

* refactor: 重构 Textarea
feat: 新增最大行数限制

* perf: 优化焦点判断方法

* refactor: 合并 Input 和 Textarea 的样式

* perf: 优化累赘 CSS 规则

* feat: 新增下拉展示组件
feat: 新增 fade、fade-scale 动效

* fix: 修复当 slotClass 未提供时的报错问题

* fix: 修复全局 CSS 不生效问题

* feat: 新增出现时机控制字段

* feat: 新增 Standard Select

* feat: 新增 Outlined Select

* feat: 新增 Filled Select

* fix: 修复 Outlined Input 样式错误
fix: 修复 Input 点击外部不会自动聚焦
---
 packages/component-vue/.storybook/preview.ts  |   2 +
 .../components/ADropDown.stories.ts           |  26 +++
 .../component-vue/components/ADropDown.vue    |  49 +++++
 .../components/AInput.stories.ts              | 169 ++++++++++++++++++
 packages/component-vue/components/AInput.vue  | 112 ++++++++++++
 .../components/AInput/AInputDrop.vue          |  39 ++++
 .../components/AInput/AInputHelper.vue        |   9 +
 .../components/AInput/AInputInput.vue         |  19 ++
 .../components/AInput/AInputTextarea.vue      |  32 ++++
 packages/component-vue/components/main.ts     |  23 +--
 .../interfaces/IADropDownProps.ts             |  13 ++
 .../component-vue/interfaces/IAInputProps.ts  |  14 ++
 .../component-vue/interfaces/IATransition.ts  |   3 +
 .../interfaces/IModelModifiers.ts             |   5 +
 packages/component-vue/style/ACommon.css      |   1 +
 packages/component-vue/style/ATransition.css  |  22 +++
 .../style/components/ADropDown.css            |   7 +
 .../component-vue/style/components/AInput.css |   5 +
 .../style/components/AInput/AInputCommon.css  | 109 +++++++++++
 .../style/components/AInput/AInputDrop.css    |  37 ++++
 .../style/components/AInput/AInputHelper.css  |  15 ++
 21 files changed, 701 insertions(+), 10 deletions(-)
 create mode 100644 packages/component-vue/components/ADropDown.stories.ts
 create mode 100644 packages/component-vue/components/ADropDown.vue
 create mode 100644 packages/component-vue/components/AInput.stories.ts
 create mode 100644 packages/component-vue/components/AInput.vue
 create mode 100644 packages/component-vue/components/AInput/AInputDrop.vue
 create mode 100644 packages/component-vue/components/AInput/AInputHelper.vue
 create mode 100644 packages/component-vue/components/AInput/AInputInput.vue
 create mode 100644 packages/component-vue/components/AInput/AInputTextarea.vue
 create mode 100644 packages/component-vue/interfaces/IADropDownProps.ts
 create mode 100644 packages/component-vue/interfaces/IAInputProps.ts
 create mode 100644 packages/component-vue/interfaces/IATransition.ts
 create mode 100644 packages/component-vue/interfaces/IModelModifiers.ts
 create mode 100644 packages/component-vue/style/ACommon.css
 create mode 100644 packages/component-vue/style/ATransition.css
 create mode 100644 packages/component-vue/style/components/ADropDown.css
 create mode 100644 packages/component-vue/style/components/AInput.css
 create mode 100644 packages/component-vue/style/components/AInput/AInputCommon.css
 create mode 100644 packages/component-vue/style/components/AInput/AInputDrop.css
 create mode 100644 packages/component-vue/style/components/AInput/AInputHelper.css

diff --git a/packages/component-vue/.storybook/preview.ts b/packages/component-vue/.storybook/preview.ts
index 7d68ffc..49e42ce 100644
--- a/packages/component-vue/.storybook/preview.ts
+++ b/packages/component-vue/.storybook/preview.ts
@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/vue3'
 
+import '../style/ACommon.css';
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/packages/component-vue/components/ADropDown.stories.ts b/packages/component-vue/components/ADropDown.stories.ts
new file mode 100644
index 0000000..514e94c
--- /dev/null
+++ b/packages/component-vue/components/ADropDown.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import ADropDown from "./ADropDown.vue";
+import { ref } from "vue";
+
+const meta: Meta<typeof ADropDown> = {
+    title: 'Components/ADropDown',
+    component: ADropDown
+};
+
+const model = ref(false);
+const updateModel = (value: any) => model.value = value
+
+export default meta;
+type Story = StoryObj<typeof ADropDown>;
+
+export const Standard: Story = {
+    render: (args) => ({
+        components: { ADropDown },
+        setup: () => ({ args, model, updateModel }),
+        template: '<ADropDown v-bind="args" v-model="model"><template #visible>Visible Slot</template><template #hidden>Hidden Slot<br />Hidden Slot 2</template></ADropDown>'
+    }),
+    args: {
+        transition: 'fade-scale',
+        when: 'hover'
+    }
+};
\ No newline at end of file
diff --git a/packages/component-vue/components/ADropDown.vue b/packages/component-vue/components/ADropDown.vue
new file mode 100644
index 0000000..634086c
--- /dev/null
+++ b/packages/component-vue/components/ADropDown.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import '../style/components/ADropDown.css'
+
+import type { IADropDownProps } from '@/interfaces/IADropDownProps'
+import { onClickOutside, useElementHover, useVModel } from '@vueuse/core'
+import { ref, watch, type Ref } from 'vue'
+
+const props = withDefaults(defineProps<IADropDownProps>(), {
+  when: 'click'
+})
+const emits = defineEmits(['update:modelValue'])
+const active = useVModel(props, 'modelValue', emits)
+
+let onClick: () => void,
+  hidden: Ref<HTMLElement | undefined>,
+  dropdown: Ref<HTMLElement | undefined>
+
+if (props.when == 'click') {
+  hidden = ref()
+
+  onClick = () => (active.value = !active.value)
+  onClickOutside(hidden, (e: PointerEvent) => {
+    active.value = false
+    e.stopPropagation()
+  })
+} else {
+  dropdown = ref()
+
+  const hover = useElementHover(dropdown)
+
+  watch(
+    () => hover.value,
+    (v: boolean) => (active.value = v)
+  )
+}
+</script>
+
+<template>
+  <div class="a-dropdown" ref="dropdown">
+    <div @click="onClick" class="a-dropdown-visible" :class="props.slotClass?.visible">
+      <slot name="visible" />
+    </div>
+    <Transition :name="props.transition">
+      <div ref="hidden" v-if="active" class="a-dropdown-hidden" :class="props.slotClass?.hidden">
+        <slot name="hidden" />
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/packages/component-vue/components/AInput.stories.ts b/packages/component-vue/components/AInput.stories.ts
new file mode 100644
index 0000000..63dd5d1
--- /dev/null
+++ b/packages/component-vue/components/AInput.stories.ts
@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import AInput from "./AInput.vue";
+import { ref } from "vue";
+
+const meta: Meta<typeof AInput> = {
+    title: 'Components/AInput',
+    component: AInput
+};
+
+const model = ref('');
+const updateModel = (value: any) => model.value = value
+
+export default meta;
+type Story = StoryObj<typeof AInput>;
+
+export const Standard: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'text'
+    },
+};
+
+export const Outlined: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'password',
+        outlined: true
+    },
+};
+
+export const Filled: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'text',
+        filled: true
+    },
+};
+
+export const SelectStandard: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'select',
+        options: {
+            value1: 'label1',
+            value2: 'label2'
+        }
+    },
+};
+
+export const SelectOutlined: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'select',
+        options: {
+            value1: 'label1',
+            value2: 'label2'
+        },
+        outlined: true
+    },
+};
+
+export const SelectFilled: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'select',
+        options: {
+            value1: 'label1',
+            value2: 'label2'
+        },
+        filled: true
+    },
+};
+
+export const TextareaStandard: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '个人简介',
+        type: 'textarea'
+    },
+};
+
+export const TextareaOutlined: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '个人简介',
+        type: 'textarea',
+        outlined: true
+    },
+};
+
+export const TextareaFilled: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '个人简介',
+        type: 'textarea',
+        filled: true
+    },
+};
+
+export const MaxRow: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>{{ model }}</template></AInput>'
+    }),
+    args: {
+        label: '个人简介',
+        type: 'textarea',
+        maxrow: 4,
+        outlined: false,
+        filled: false
+    },
+};
+
+export const HelperText: Story = {
+    render: (args) => ({
+        components: { AInput },
+        setup: () => ({ args, model, updateModel }),
+        template: '<AInput v-bind="args" v-model="model"><template #helper>帮助文本</template></AInput>'
+    }),
+    args: {
+        label: '用户名',
+        type: 'text',
+        outlined: false,
+        filled: false
+    },
+};
\ No newline at end of file
diff --git a/packages/component-vue/components/AInput.vue b/packages/component-vue/components/AInput.vue
new file mode 100644
index 0000000..493ccb8
--- /dev/null
+++ b/packages/component-vue/components/AInput.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import '../style/components/AInput.css'
+
+import { computed, ref, watch } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import AInputInput from './AInput/AInputInput.vue'
+import type { IAInputProps } from '@/interfaces/IAInputProps'
+import AInputTextarea from './AInput/AInputTextarea.vue'
+import AInputHelper from './AInput/AInputHelper.vue'
+import AInputDrop from './AInput/AInputDrop.vue'
+
+const props = defineProps<IAInputProps>()
+const emits = defineEmits(['update:modelValue'])
+const target = ref<HTMLElement>()
+
+// 封装外部 v-model 的双向绑定
+const outerModel = computed({
+  get: () => props.modelValue,
+  set: (v: string) => emits('update:modelValue', v)
+})
+// 初始化内部 v-model 的值
+const innerModel = ref(props.modelValue)
+
+// 判断 Label 是否应该上浮
+const focused = ref(false)
+const triggerFocus = (v: boolean) => (focused.value = v)
+const active = computed(() => focused.value || !!innerModel.value)
+
+// 监听失去焦点
+// 在 click 时 focus 输入框会导致 focus-within 短暂变为 false 故使用此方法
+onClickOutside(target, () => triggerFocus(false))
+
+// 监听外部 v-model 的变化并同步
+watch(
+  () => outerModel.value,
+  (v: string) => (innerModel.value = v)
+)
+// v-model 正常更新模式 内部 model 变化时同步
+watch(
+  () => innerModel.value,
+  (v) => {
+    if (!props.modelModifiers?.lazy) outerModel.value = v
+  }
+)
+// v-model 懒更新模式 失去焦点事件时同步
+watch(
+  () => focused.value,
+  (v) => {
+    if (!v && props.modelModifiers?.lazy) outerModel.value = innerModel.value
+  }
+)
+
+// 判断组件类型
+const inputType = computed(
+  () =>
+    ({
+      text: 'input',
+      password: 'input',
+      textarea: 'textarea',
+      select: 'drop'
+    }[props.type])
+)
+// 判断组件样式类别
+const inputStyle = computed(
+  () =>
+    ({
+      input: 'common',
+      textarea: 'common',
+      drop: 'common'
+    }[inputType.value])
+)
+
+// 计算绑定的属性
+const status = computed(() => ({
+  ref: 'target',
+
+  [inputType.value]: '',
+  [inputStyle.value!]: '',
+  focused: focused.value ? '' : null,
+  active: active.value ? '' : null,
+  standard: props.filled || props.outlined ? null : '',
+  outlined: props.outlined ? '' : null,
+  filled: props.filled ? '' : null
+}))
+const binds = computed(() => ({
+  class: 'a-input-fields',
+
+  type: props.type,
+  label: props.label,
+  maxrow: props.maxrow,
+  options: props.options,
+
+  active: active.value,
+
+  focused: focused.value,
+  modelValue: innerModel.value,
+  'onUpdate:focused': (v: boolean) => (focused.value = v),
+  'onUpdate:modelValue': (v: string) => (innerModel.value = v)
+}))
+</script>
+
+<template>
+  <div v-bind="status" class="a-input" @click="triggerFocus(true)">
+    <AInputInput v-bind="binds" v-if="inputType == 'input'" />
+    <AInputTextarea v-bind="binds" v-else-if="inputType == 'textarea'" />
+    <AInputDrop v-bind="binds" v-else-if="inputType == 'drop'" />
+
+    <AInputHelper v-if="!!$slots?.helper">
+      <slot name="helper" />
+    </AInputHelper>
+  </div>
+</template>
diff --git a/packages/component-vue/components/AInput/AInputDrop.vue b/packages/component-vue/components/AInput/AInputDrop.vue
new file mode 100644
index 0000000..fbba54a
--- /dev/null
+++ b/packages/component-vue/components/AInput/AInputDrop.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import '../../style/components/AInput/AInputCommon.css'
+import '../../style/components/AInput/AInputDrop.css'
+
+import { useVModel } from '@vueuse/core'
+import ADropDown from '../ADropDown.vue'
+
+const props = defineProps(['label', 'type', 'options', 'focused', 'modelValue'])
+const emits = defineEmits(['update:focused', 'update:modelValue'])
+const model = useVModel(props, 'modelValue', emits)
+const focused = useVModel(props, 'focused', emits)
+</script>
+
+<template>
+  <ADropDown
+    v-model="focused"
+    transition="fade-scale"
+    :slot-class="{ hidden: ['a-input-options'] }"
+  >
+    <template #visible>
+      <label>{{ label }}</label>
+      <div class="a-input-value">
+        {{ options[model] }}
+      </div>
+      <select v-model="model" ref="input" hidden />
+    </template>
+    <template #hidden>
+      <div
+        v-for="(label, value) in options"
+        class="a-input-option"
+        :key="value"
+        :selected="model == value ? '' : null"
+        @click="model = value"
+      >
+        {{ label }}
+      </div>
+    </template>
+  </ADropDown>
+</template>
diff --git a/packages/component-vue/components/AInput/AInputHelper.vue b/packages/component-vue/components/AInput/AInputHelper.vue
new file mode 100644
index 0000000..05089be
--- /dev/null
+++ b/packages/component-vue/components/AInput/AInputHelper.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import '../../style/components/AInput/AInputHelper.css'
+</script>
+
+<template>
+  <div class="a-input-helper">
+    <slot />
+  </div>
+</template>
diff --git a/packages/component-vue/components/AInput/AInputInput.vue b/packages/component-vue/components/AInput/AInputInput.vue
new file mode 100644
index 0000000..a632d83
--- /dev/null
+++ b/packages/component-vue/components/AInput/AInputInput.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import '../../style/components/AInput/AInputCommon.css'
+
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps(['label', 'type', 'modelValue'])
+const emits = defineEmits(['update:modelValue'])
+const model = useVModel(props, 'modelValue', emits)
+
+const input = ref<HTMLElement>()
+</script>
+
+<template>
+  <div @click="input?.focus()">
+    <label>{{ label }}</label>
+    <input v-model="model" ref="input" :type="props.type" />
+  </div>
+</template>
diff --git a/packages/component-vue/components/AInput/AInputTextarea.vue b/packages/component-vue/components/AInput/AInputTextarea.vue
new file mode 100644
index 0000000..0321e60
--- /dev/null
+++ b/packages/component-vue/components/AInput/AInputTextarea.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import '../../style/components/AInput/AInputCommon.css'
+
+import { nextTick, ref, watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps(['label', 'maxrow', 'modelValue'])
+const emits = defineEmits(['update:modelValue'])
+const model = useVModel(props, 'modelValue', emits)
+
+const textarea = ref<HTMLElement>()
+const height = ref(24)
+
+// 计算 Textarea 行高
+watch(
+  () => model.value,
+  () => {
+    height.value = 0
+    nextTick(() => {
+      let line = textarea.value!.scrollHeight / 24
+      height.value = Math.min(line, props.maxrow ?? 2) * 24
+    })
+  }
+)
+</script>
+
+<template>
+  <div :style="{ height: height + 'px' }" @click="textarea?.focus()">
+    <label>{{ label }}</label>
+    <textarea v-model="model" ref="textarea" :style="{ height: height + 'px' }" />
+  </div>
+</template>
diff --git a/packages/component-vue/components/main.ts b/packages/component-vue/components/main.ts
index 42c903a..18e4e93 100644
--- a/packages/component-vue/components/main.ts
+++ b/packages/component-vue/components/main.ts
@@ -1,5 +1,8 @@
 import * as components from './components'
 import { type App } from 'vue'
+
+import '../style/ACommon.css';
+
 export * from './components'
 
 type ComponentName = keyof typeof components
@@ -26,15 +29,15 @@ export default {
     })
   },
   resolver: () =>
-    ({
-      type: 'component',
-      resolve: (componentName: string) => {
-        if (componentNames.includes(componentName as ComponentName)) {
-          return {
-            name: componentName,
-            from: '@all-in-material/component-vue'
-          } as ComponentInfo
-        }
+  ({
+    type: 'component',
+    resolve: (componentName: string) => {
+      if (componentNames.includes(componentName as ComponentName)) {
+        return {
+          name: componentName,
+          from: '@all-in-material/component-vue'
+        } as ComponentInfo
       }
-    } as ComponentResolverObject)
+    }
+  } as ComponentResolverObject)
 }
diff --git a/packages/component-vue/interfaces/IADropDownProps.ts b/packages/component-vue/interfaces/IADropDownProps.ts
new file mode 100644
index 0000000..a4c737d
--- /dev/null
+++ b/packages/component-vue/interfaces/IADropDownProps.ts
@@ -0,0 +1,13 @@
+import type { IATransition } from "./IATransition"
+
+interface IADropDownProps {
+    modelValue: boolean,
+    slotClass?: {
+        visible?: string[],
+        hidden?: string[]
+    },
+    transition: IATransition,
+    when?: 'hover' | 'click'
+}
+
+export type { IADropDownProps }
\ No newline at end of file
diff --git a/packages/component-vue/interfaces/IAInputProps.ts b/packages/component-vue/interfaces/IAInputProps.ts
new file mode 100644
index 0000000..8427bba
--- /dev/null
+++ b/packages/component-vue/interfaces/IAInputProps.ts
@@ -0,0 +1,14 @@
+import type { IModelModifiers } from "./IModelModifiers"
+
+interface IAInputProps {
+    type: 'text' | 'password' | 'textarea' | 'select'
+    label: string,
+    outlined?: boolean,
+    filled?: boolean,
+    modelValue: string,
+    modelModifiers?: IModelModifiers,
+    maxrow?: number,
+    options?: Record<string, string>
+}
+
+export type { IAInputProps }
\ No newline at end of file
diff --git a/packages/component-vue/interfaces/IATransition.ts b/packages/component-vue/interfaces/IATransition.ts
new file mode 100644
index 0000000..c61d2a8
--- /dev/null
+++ b/packages/component-vue/interfaces/IATransition.ts
@@ -0,0 +1,3 @@
+type IATransition = 'fade' | 'fade-scale'
+
+export type { IATransition };
\ No newline at end of file
diff --git a/packages/component-vue/interfaces/IModelModifiers.ts b/packages/component-vue/interfaces/IModelModifiers.ts
new file mode 100644
index 0000000..bc8a9f7
--- /dev/null
+++ b/packages/component-vue/interfaces/IModelModifiers.ts
@@ -0,0 +1,5 @@
+interface IModelModifiers {
+    lazy: boolean
+}
+
+export type { IModelModifiers }
\ No newline at end of file
diff --git a/packages/component-vue/style/ACommon.css b/packages/component-vue/style/ACommon.css
new file mode 100644
index 0000000..d9e2957
--- /dev/null
+++ b/packages/component-vue/style/ACommon.css
@@ -0,0 +1 @@
+@import 'ATransition.css'
\ No newline at end of file
diff --git a/packages/component-vue/style/ATransition.css b/packages/component-vue/style/ATransition.css
new file mode 100644
index 0000000..3f50514
--- /dev/null
+++ b/packages/component-vue/style/ATransition.css
@@ -0,0 +1,22 @@
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .25s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+    transition: transform .25s, opacity .25s;
+    transform-origin: top center;
+    transform: scale(1);
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+    transform: scale(.6);
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/packages/component-vue/style/components/ADropDown.css b/packages/component-vue/style/components/ADropDown.css
new file mode 100644
index 0000000..2a9fade
--- /dev/null
+++ b/packages/component-vue/style/components/ADropDown.css
@@ -0,0 +1,7 @@
+.a-dropdown .a-dropdown-visible {
+    cursor: pointer;
+}
+
+.a-dropdown .a-dropdown-hidden {
+    position: absolute;
+}
\ No newline at end of file
diff --git a/packages/component-vue/style/components/AInput.css b/packages/component-vue/style/components/AInput.css
new file mode 100644
index 0000000..b0cdca7
--- /dev/null
+++ b/packages/component-vue/style/components/AInput.css
@@ -0,0 +1,5 @@
+/* Base Style */
+.a-input label {
+    user-select: none;
+    pointer-events: none;
+}
\ No newline at end of file
diff --git a/packages/component-vue/style/components/AInput/AInputCommon.css b/packages/component-vue/style/components/AInput/AInputCommon.css
new file mode 100644
index 0000000..126ee6a
--- /dev/null
+++ b/packages/component-vue/style/components/AInput/AInputCommon.css
@@ -0,0 +1,109 @@
+/* Base Style */
+.a-input[common] .a-input-fields {
+    position: relative;
+    cursor: pointer;
+}
+
+.a-input[common] input,
+.a-input[common] textarea {
+    line-height: 24px;
+    width: 100%;
+    resize: none;
+    border: 0;
+    padding: 0;
+    font-size: 1rem;
+    background-color: transparent;
+}
+
+.a-input[common] .a-input-value {
+    line-height: 24px;
+    font-size: 1rem;
+    min-height: 24px;
+}
+
+.a-input[common] label {
+    position: absolute;
+    transform: none;
+}
+
+.a-input[common] input:focus-within,
+.a-input[common] textarea:focus-within {
+    outline: 0;
+}
+
+.a-input[common][standard] .a-input-fields::after,
+.a-input[common][filled] .a-input-fields::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -2px;
+    width: 0;
+    height: 2px;
+    background: #000;
+    transform: translateX(-50%);
+    transition: width .25s;
+}
+
+.a-input[common][standard][focused] .a-input-fields::after,
+.a-input[common][filled][focused] .a-input-fields::after {
+    width: 100%;
+}
+
+.a-input[common][standard] label,
+.a-input[common][filled] label {
+    transition: transform .3s, font-size .3s;
+}
+
+/* Standard Textarea Style */
+.a-input[common][standard] .a-input-fields {
+    padding: 22px 0 6px;
+    border-bottom: 1px solid #000;
+}
+
+.a-input[common][standard][active] label {
+    font-size: .75rem;
+    transform: translateY(-20px);
+}
+
+/* Outlined Textarea Style */
+.a-input[common][outlined] .a-input-fields {
+    padding: 14px 11px;
+    border: 1px solid #000;
+    border-radius: 4px;
+    outline: 0px solid #000000;
+    transition: outline-width .05s;
+}
+
+.a-input[common][outlined][focused] .a-input-fields {
+    outline: 1.5px solid #000;
+}
+
+.a-input[common][outlined] label {
+    background-color: #fff;
+    transition: transform .25s, font-size .25s;
+    margin-left: -5px;
+    padding: 0 5px;
+}
+
+.a-input[common][outlined][active] label {
+    font-size: .75rem;
+    transform: translateY(-23px);
+    background-color: #fff;
+}
+
+/* Filled Textarea Style */
+.a-input[common][filled] .a-input-fields {
+    padding: 23px 12px 5px;
+    border-bottom: 1px solid #000;
+    background-color: rgba(0, 0, 0, .06);
+    border-radius: 4px 4px 0 0;
+}
+
+.a-input[common][filled] label {
+    transform: translateY(-8px);
+}
+
+.a-input[common][filled][active] label {
+    font-size: .65rem;
+    transform: translateY(-18px);
+}
\ No newline at end of file
diff --git a/packages/component-vue/style/components/AInput/AInputDrop.css b/packages/component-vue/style/components/AInput/AInputDrop.css
new file mode 100644
index 0000000..042c516
--- /dev/null
+++ b/packages/component-vue/style/components/AInput/AInputDrop.css
@@ -0,0 +1,37 @@
+.a-input[drop] .a-input-options {
+    width: 100%;
+    background-color: #fff;
+}
+
+.a-input[drop] .a-input-options {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    border-radius: 4px;
+    padding: 8px 0;
+}
+
+.a-input[drop] .a-input-option {
+    padding: 8px 1rem;
+    transition: background-color .15s;
+}
+
+.a-input[drop] .a-input-option[selected] {
+    background-color: rgba(0, 0, 0, .075) !important;
+}
+
+.a-input[drop] .a-input-option:hover {
+    background-color: rgba(0, 0, 0, .04);
+}
+
+.a-input[drop][standard] .a-input-options {
+    margin-top: 8px;
+}
+
+.a-input[drop][outlined] .a-input-options {
+    margin-top: 16px;
+    margin-left: -11px;
+}
+
+.a-input[drop][filled] .a-input-options {
+    margin-top: 7px;
+    margin-left: -12px;
+}
\ No newline at end of file
diff --git a/packages/component-vue/style/components/AInput/AInputHelper.css b/packages/component-vue/style/components/AInput/AInputHelper.css
new file mode 100644
index 0000000..e7ed305
--- /dev/null
+++ b/packages/component-vue/style/components/AInput/AInputHelper.css
@@ -0,0 +1,15 @@
+.a-input .a-input-helper {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: .75rem;
+    margin-top: 4px;
+}
+
+.a-input[outlined] .a-input-helper {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
+.a-input[filled] .a-input-helper {
+    padding-left: 12px;
+    padding-right: 12px;
+}
\ No newline at end of file