feat: 添加 FaSelect 组件的定位模式支持

Co-authored-by: Copilot <copilot@github.com>

apps/example/src/views/component_example/select/_demo4.vue

@@ -1,40 +1,25 @@
 <script setup lang="ts">
-const modal = shallowRef(false)
-const cityInFaModal = shallowRef('shanghai')
+const popperValue = ref('2')
+const itemAlignedValue = ref('2')
 
 const options = [
-  { label: 'Beijing', value: 'beijing' },
-  { label: 'Shanghai', value: 'shanghai' },
-  { label: 'Shenzhen', value: 'shenzhen' },
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
 ]
 </script>
 
 <template>
-  <div>
-    <div class="flex gap-2">
-      <FaButton @click="modal = true">
-        打开 FaModal
-      </FaButton>
-    </div>
-    <FaModal
-      v-model="modal"
-      title="FaModal 中的选择器"
-      description="在模态框内容区内使用 FaSelect"
-      :footer="false"
-      class="sm:max-w-lg"
-      content-class="min-h-auto"
-    >
-      <div class="py-4 flex flex-col gap-4">
-        <FaSelect
-          v-model="cityInFaModal"
-          :options="options"
-          placeholder="请选择城市"
-          class="w-full"
-        />
-        <div class="text-sm text-muted-foreground">
-          当前值：{{ cityInFaModal }}
-        </div>
-      </div>
-    </FaModal>
+  <div class="space-y-2">
+    <FaSelect
+      v-model="popperValue"
+      :options="options"
+      position="popper"
+    />
+    <FaSelect
+      v-model="itemAlignedValue"
+      :options="options"
+      position="item-aligned"
+    />
   </div>
 </template>

apps/example/src/views/component_example/select/_demo5.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const modal = shallowRef(false)
+const cityInFaModal = shallowRef('shanghai')
+
+const options = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex gap-2">
+      <FaButton @click="modal = true">
+        打开 FaModal
+      </FaButton>
+    </div>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的选择器"
+      description="在模态框内容区内使用 FaSelect"
+      :footer="false"
+      class="sm:max-w-lg"
+      content-class="min-h-auto"
+    >
+      <div class="py-4 flex flex-col gap-4">
+        <FaSelect
+          v-model="cityInFaModal"
+          :options="options"
+          placeholder="请选择城市"
+          class="w-full"
+        />
+        <div class="text-sm text-muted-foreground">
+          当前值：{{ cityInFaModal }}
+        </div>
+      </div>
+    </FaModal>
+  </div>
+</template>

apps/example/src/views/component_example/select/index.vue

@@ -3,6 +3,7 @@ import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
 import Demo3 from './_demo3.vue'
 import Demo4 from './_demo4.vue'
+import Demo5 from './_demo5.vue'
 </script>
 
 <template>
@@ -23,10 +24,15 @@ import Demo4 from './_demo4.vue'
         <Demo3 />
       </div>
     </FaPageMain>
-    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+    <FaPageMain title="定位模式" main-class="p-0">
       <div class="p-4">
         <Demo4 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo5 />
+      </div>
+    </FaPageMain>
   </div>
 </template>