docs: docs modal z-index fixed, update alert docs (vbenjs#5930)

Author: mynetfan

apps/web-ele/src/views/demos/form/basic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { h } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import { ElButton, ElCard, ElCheckbox, ElMessage } from 'element-plus';
 
@@ -17,11 +17,16 @@ const [Form, formApi] = useVbenForm({
   },
   layout: 'horizontal',
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  // wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   handleSubmit: (values) => {
     ElMessage.success(`表单数据：${JSON.stringify(values)}`);
   },
   schema: [
+    {
+      component: 'IconPicker',
+      fieldName: 'icon',
+      label: 'IconPicker',
+    },
     {
       // 组件需要在 #/adapter.ts内注册，并加上类型
       component: 'ApiSelect',
@@ -149,6 +154,8 @@ const [Form, formApi] = useVbenForm({
     },
   ],
 });
+
+const [Drawer, drawerApi] = useVbenDrawer();
 function setFormValues() {
   formApi.setValues({
     string: 'string',
@@ -168,14 +175,17 @@ function setFormValues() {
     description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项"
     title="表单演示"
   >
+    <Drawer class="w-[600px]" title="基础表单示例">
+      <Form />
+    </Drawer>
     <ElCard>
       <template #header>
         <div class="flex items-center">
           <span class="flex-auto">基础表单演示</span>
           <ElButton type="primary" @click="setFormValues">设置表单值</ElButton>
         </div>
       </template>
-      <Form />
+      <ElButton type="primary" @click="drawerApi.open"> 打开抽屉 </ElButton>
     </ElCard>
   </Page>
 </template>

docs/.vitepress/theme/styles/variables.css

@@ -104,6 +104,11 @@
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+
+  /**
+  * modal zIndex
+  */
+  --popup-z-index: 1000;
 }
 
 @media (min-width: 640px) {

docs/src/demos/vben-alert/prompt/index.vue

@@ -3,7 +3,7 @@ import { h } from 'vue';
 
 import { alert, prompt, VbenButton } from '@vben/common-ui';
 
-import { Input, RadioGroup } from 'ant-design-vue';
+import { Input, RadioGroup, Select } from 'ant-design-vue';
 import { BadgeJapaneseYen } from 'lucide-vue-next';
 
 function showPrompt() {
@@ -18,7 +18,7 @@ function showPrompt() {
     });
 }
 
-function showSelectPrompt() {
+function showSlotsPrompt() {
   prompt({
     component: Input,
     componentProps: {
@@ -37,14 +37,36 @@ function showSelectPrompt() {
   });
 }
 
+function showSelectPrompt() {
+  prompt({
+    component: Select,
+    componentProps: {
+      options: [
+        { label: 'Option A', value: 'Option A' },
+        { label: 'Option B', value: 'Option B' },
+        { label: 'Option C', value: 'Option C' },
+      ],
+      placeholder: '请选择',
+      // 弹窗会设置body的pointer-events为none，这回影响下拉框的点击事件
+      popupClassName: 'pointer-events-auto',
+    },
+    content: '此弹窗演示了如何使用component传递自定义组件',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) {
+      alert(`你选择了${val}`);
+    }
+  });
+}
+
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 function showAsyncPrompt() {
   prompt({
     async beforeClose(scope) {
-      console.log(scope);
       if (scope.isConfirm) {
         if (scope.value) {
           // 模拟异步操作，如果不成功，可以返回false
@@ -75,6 +97,7 @@ function showAsyncPrompt() {
 <template>
   <div class="flex gap-4">
     <VbenButton @click="showPrompt">Prompt</VbenButton>
+    <VbenButton @click="showSlotsPrompt"> Prompt With slots </VbenButton>
     <VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
     <VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
   </div>