by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: improve modal and drawer component documentation and fix known problems (#4264)

Browse Source 
* feat: improve modal and drawer component documentation and fix known problems

* chore: update ci
This commit is contained in:
Vben
2024-08-28 22:26:35 +08:00
committed by GitHub
parent 84816ef769
commit 36e7ca19a1
54 changed files with 882 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/src/demos/vben-drawer/auto-height/drawer.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
const list = ref<number[]>([]);
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
drawerApi.close();
},
onConfirm() {
console.log('onConfirm');
},
onOpenChange(isOpen) {
if (isOpen) {
handleUpdate(10);
}
},
});
function handleUpdate(len: number) {
drawerApi.setState({ loading: true });
setTimeout(() => {
list.value = Array.from({ length: len }, (_v, k) => k + 1);
drawerApi.setState({ loading: false });
}, 2000);
}
</script>
<template>
<Drawer title="自动计算高度">
<div
v-for="item in list"
:key="item"
class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
>
{{ item }}
</div>
<template #prepend-footer>
<VbenButton type="link" @click="handleUpdate(6)">
点击更新数据
</VbenButton>
</template>
</Drawer>
</template>

21
docs/src/demos/vben-drawer/auto-height/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
import ExtraDrawer from './drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: ExtraDrawer,
});
function open() {
drawerApi.open();
}
</script>
<template>
<div>
<Drawer />
<VbenButton @click="open">Open</VbenButton>
</div>
</template>

11
docs/src/demos/vben-drawer/basic/index.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
const [Drawer, drawerApi] = useVbenDrawer();
</script>
<template>
<div>
<VbenButton @click="() => drawerApi.open()">Open</VbenButton>
<Drawer class="w-[600px]" title="基础示例"> drawer content </Drawer>
</div>
</template>

26
docs/src/demos/vben-drawer/dynamic/drawer.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
drawerApi.close();
},
onConfirm() {
console.info('onConfirm');
},
title: '动态修改配置示例',
});
function handleUpdateTitle() {
drawerApi.setState({ title: '内部动态标题' });
}
</script>
<template>
<Drawer>
<div class="flex-col-center">
<VbenButton class="mb-3" type="primary" @click="handleUpdateTitle()">
内部动态修改标题
</VbenButton>
</div>
</Drawer>
</template>

30
docs/src/demos/vben-drawer/dynamic/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
import ExtraDrawer from './drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: ExtraDrawer,
});
function open() {
drawerApi.open();
}
function handleUpdateTitle() {
drawerApi.setState({ title: '外部动态标题' });
drawerApi.open();
}
</script>
<template>
<div>
<Drawer />
<VbenButton @click="open">Open</VbenButton>
<VbenButton class="ml-2" type="primary" @click="handleUpdateTitle">
从外部修改标题并打开
</VbenButton>
</div>
</template>

8
docs/src/demos/vben-drawer/extra/drawer.vue Normal file
View File

@@ -0,0 +1,8 @@
<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
const [Drawer] = useVbenDrawer();
</script>
<template>
<Drawer title="组件抽离示例"> extra drawer content </Drawer>
</template>

21
docs/src/demos/vben-drawer/extra/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
import ExtraDrawer from './drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: ExtraDrawer,
});
function open() {
drawerApi.open();
}
</script>
<template>
<div>
<Drawer />
<VbenButton @click="open">Open</VbenButton>
</div>
</template>

26
docs/src/demos/vben-drawer/shared-data/drawer.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
const data = ref();
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
drawerApi.close();
},
onConfirm() {
console.info('onConfirm');
},
onOpenChange(isOpen: boolean) {
if (isOpen) {
data.value = drawerApi.getData<Record<string, any>>();
}
},
});
</script>
<template>
<Drawer title="数据共享示例">
<div class="flex-col-center">外部传递数据： {{ data }}</div>
</Drawer>
</template>

26
docs/src/demos/vben-drawer/shared-data/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
import ExtraDrawer from './drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: ExtraDrawer,
});
function open() {
drawerApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
drawerApi.open();
}
</script>
<template>
<div>
<Drawer />
<VbenButton @click="open">Open</VbenButton>
</div>
</template>

21
docs/src/demos/vben-modal/auto-height/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import ExtraModal from './modal.vue';
const [Modal, modalApi] = useVbenModal({
// 连接抽离的组件
connectedComponent: ExtraModal,
});
function openModal() {
modalApi.open();
}
</script>
<template>
<div>
<Modal />
<VbenButton @click="openModal">Open</VbenButton>
</div>
</template>

45
docs/src/demos/vben-modal/auto-height/modal.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal, VbenButton } from '@vben/common-ui';
const list = ref<number[]>([]);
const [Modal, modalApi] = useVbenModal({
onCancel() {
modalApi.close();
},
onConfirm() {
console.log('onConfirm');
},
onOpenChange(isOpen) {
if (isOpen) {
handleUpdate(10);
}
},
});
function handleUpdate(len: number) {
modalApi.setState({ loading: true });
setTimeout(() => {
list.value = Array.from({ length: len }, (_v, k) => k + 1);
modalApi.setState({ loading: false });
}, 2000);
}
</script>
<template>
<Modal title="自动计算高度">
<div
v-for="item in list"
:key="item"
class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
>
{{ item }}
</div>
<template #prepend-footer>
<VbenButton type="link" @click="handleUpdate(6)">
点击更新数据
</VbenButton>
</template>
</Modal>
</template>

4
docs/src/demos/vben-modal/basic/index.vue
View File

@@ -5,7 +5,7 @@ const [Modal, modalApi] = useVbenModal();
</script>
<template>
<div>
<VbenButton @click="() => modalApi.open()">打开弹窗</VbenButton>
<Modal title="基础示例"> modal content </Modal>
<VbenButton @click="() => modalApi.open()">Open</VbenButton>
<Modal class="w-[600px]" title="基础示例"> modal content </Modal>
</div>
</template>

21
docs/src/demos/vben-modal/draggable/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import ExtraModal from './modal.vue';
const [Modal, modalApi] = useVbenModal({
// 连接抽离的组件
connectedComponent: ExtraModal,
});
function openModal() {
modalApi.open();
}
</script>
<template>
<div>
<Modal />
<VbenButton @click="openModal">Open</VbenButton>
</div>
</template>

10
docs/src/demos/vben-modal/draggable/modal.vue Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
const [Modal] = useVbenModal({
draggable: true,
});
</script>
<template>
<Modal title="拖拽示例"> modal content </Modal>
</template>

30
docs/src/demos/vben-modal/dynamic/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import ExtraModal from './modal.vue';
const [Modal, modalApi] = useVbenModal({
// 连接抽离的组件
connectedComponent: ExtraModal,
});
function openModal() {
modalApi.open();
}
function handleUpdateTitle() {
modalApi.setState({ title: '外部动态标题' });
modalApi.open();
}
</script>
<template>
<div>
<Modal />
<VbenButton @click="openModal">Open</VbenButton>
<VbenButton class="ml-2" type="primary" @click="handleUpdateTitle">
从外部修改标题并打开
</VbenButton>
</div>
</template>

38
docs/src/demos/vben-modal/dynamic/modal.vue Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
const [Modal, modalApi] = useVbenModal({
draggable: true,
onCancel() {
modalApi.close();
},
onConfirm() {
console.info('onConfirm');
},
title: '动态修改配置示例',
});
const state = modalApi.useStore();
function handleUpdateTitle() {
modalApi.setState({ title: '内部动态标题' });
}
function handleToggleFullscreen() {
modalApi.setState((prev) => {
return { ...prev, fullscreen: !prev.fullscreen };
});
}
</script>
<template>
<Modal>
<div class="flex-col-center">
<VbenButton class="mb-3" type="primary" @click="handleUpdateTitle()">
内部动态修改标题
</VbenButton>
<VbenButton class="mb-3" @click="handleToggleFullscreen()">
{{ state.fullscreen ? '退出全屏' : '打开全屏' }}
</VbenButton>
</div>
</Modal>
</template>

5
docs/src/demos/vben-modal/extra/index.vue
View File

@@ -4,7 +4,7 @@ import { useVbenModal, VbenButton } from '@vben/common-ui';
import ExtraModal from './modal.vue';
const [Modal, modalApi] = useVbenModal({
// 链接抽离的组件
// 连接抽离的组件
connectedComponent: ExtraModal,
});
@@ -16,7 +16,6 @@ function openModal() {
<template>
<div>
<Modal />
<VbenButton @click="openModal">打开弹窗</VbenButton>
<VbenButton @click="openModal">Open</VbenButton>
</div>
</template>

2
docs/src/demos/vben-modal/extra/modal.vue
View File

@@ -4,5 +4,5 @@ import { useVbenModal } from '@vben/common-ui';
const [Modal] = useVbenModal();
</script>
<template>
<Modal title="基础示例"> extra modal content </Modal>
<Modal title="组件抽离示例"> extra modal content </Modal>
</template>

26
docs/src/demos/vben-modal/shared-data/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import ExtraModal from './modal.vue';
const [Modal, modalApi] = useVbenModal({
// 连接抽离的组件
connectedComponent: ExtraModal,
});
function openModal() {
modalApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
modalApi.open();
}
</script>
<template>
<div>
<Modal />
<VbenButton @click="openModal">Open</VbenButton>
</div>
</template>

26
docs/src/demos/vben-modal/shared-data/modal.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
const data = ref();
const [Modal, modalApi] = useVbenModal({
onCancel() {
modalApi.close();
},
onConfirm() {
console.info('onConfirm');
},
onOpenChange(isOpen: boolean) {
if (isOpen) {
data.value = modalApi.getData<Record<string, any>>();
}
},
});
</script>
<template>
<Modal title="数据共享示例">
<div class="flex-col-center">外部传递数据： {{ data }}</div>
</Modal>
</template>