feat: add flex component

Author: aibayanyu20

Diff for: package.json

@@ -33,19 +33,19 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.5.2",
     "@ant-design/icons-vue": "^7.0.1",
-    "ant-design-vue": "^4.0.1"
+    "@nuxt/kit": "^3.8.1",
+    "ant-design-vue": "^4.0.7"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.5.2",
-    "@nuxt/test-utils": "^3.5.1",
-    "@types/node": "^18",
-    "changelogen": "^0.5.3",
-    "eslint": "^8.41.0",
-    "nuxt": "^3.5.1",
-    "vitest": "^0.31.1"
+    "@nuxt/schema": "^3.8.1",
+    "@nuxt/test-utils": "^3.8.1",
+    "@types/node": "^18.18.9",
+    "changelogen": "^0.5.5",
+    "eslint": "^8.53.0",
+    "nuxt": "^3.8.1",
+    "vitest": "^0.31.4"
   }
 }

Diff for: playground/app.vue

@@ -54,17 +54,35 @@
           notification info
         </a-button>
       </a-space>
+      <a-flex gap="middle" vertical>
+    <a-radio-group v-model:value="value">
+      <a-radio value="horizontal">horizontal</a-radio>
+      <a-radio value="vertical">vertical</a-radio>
+    </a-radio-group>
+    <a-flex :vertical="value === 'vertical'">
+      <div
+        v-for="(item, index) in new Array(4)"
+        :key="item"
+        :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
+      />
+    </a-flex>
+  </a-flex>
     </div>
   </a-config-provider>
 </template>
 
 <script setup lang="ts">
 import { theme as antdTheme } from "ant-design-vue"
-import { reactive } from "#imports";
+import { reactive, ref} from "#imports";
 const theme = reactive({
   algorithm: antdTheme.defaultAlgorithm
 })
-
+import type { CSSProperties } from 'vue';
+const value = ref('horizontal');
+const baseStyle: CSSProperties = {
+  width: '25%',
+  height: '54px',
+};
 const color = reactive({
   bg:"#fff",
   color:"#000"