From 494927f29ff8c1008aeef9949d8856741b2c642c Mon Sep 17 00:00:00 2001 From: Binks_ Date: Mon, 25 Sep 2023 15:06:41 +0800 Subject: [PATCH 1/9] =?UTF-8?q?docs(drawer):=20=E6=96=B0=E5=A2=9Edrawer?= =?UTF-8?q?=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=20(#1750)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/en-US/components/drawer/index.md | 170 ++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 packages/devui-vue/docs/en-US/components/drawer/index.md diff --git a/packages/devui-vue/docs/en-US/components/drawer/index.md b/packages/devui-vue/docs/en-US/components/drawer/index.md new file mode 100644 index 0000000000..1258f7ef58 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/drawer/index.md @@ -0,0 +1,170 @@ +# Drawer + +A floating panel assembly that slides out from the edge of the screen. + +#### When To Use + +1. The drawer slides in from the edge of the parent form and covers part of the parent form's contents. Users don't have to leave the current task while operating inside the drawer, and can smoothly return to the original task when the operation is completed. +2. When you need an additional panel to control the contents of the parent form, this panel is called out when needed. For example, to control the display style of the interface, add content to the interface. +3. When temporary tasks need to be inserted into the current task flow to create or preview additional content. For example, displaying the terms of an agreement and creating subobjects. + +### Basic Usage + +:::demo Slides out from the right by default with a width of `300px`. + +```vue + + +``` + +::: + +### Left Pop-up + +:::demo Sets the left slideout via `position`. + +```vue + + +``` + +::: + +### Background Scroll + +:::demo drawer After sliding out, the default background scroll is locked, which can be unlocked by setting `lock-scroll` to `false`. + +```vue + + + +``` + +::: + +### Pre-close Callback + +:::demo `before-close` is called when the user closes the drawer, which can be done by executing the `done` function after certain asynchronous operations have been completed. + +```vue + + + +``` + +::: + +### Service Method + +The :::demo component registers `$drawerService` globally, which can be used as a service, with the content of the drawer passed in as the `content` parameter. The service returns the `close` method for closing the drawer. + +```vue + + + +``` + +::: + +### Drawer Props + +| Parameter | Type | Default | Description | Jump to Demo | +| :--------------------- | :--------------- | :------ | :----------------------------------------------------------------------------------- | :---------------------------------------- | +| v-model | `Boolean` | `false` | Optional, set whether the drawer panel is visible or not | [Basic Usage](#basic-usage) | +| position | `String` | `right` | Optional, where the drawer panel appears, 'left' or 'right' | [Left Pop-up](#left-pop-up) | +| show-overlay | `Boolean` | `true` | Optional, with or without masking layer | [Basic Usage](#basic-usage) | +| lock-scroll | `Boolean` | `true` | Optional, whether to lock scrolling | [Background Scroll](#background-scroll) | +| z-index | `Number` | `1000` | Optional, set the z-index value of the drawer | [Pre-close Callback](#pre-close-callback) | +| esc-key-closeable | `Boolean` | `true` | Optional, set whether the drawer layer can be closed with the esc button. | [Basic Usage](#basic-usage) | +| close-on-click-overlay | `Boolean` | `true` | Optional, sets whether the drawer layer can be closed by clicking on the background. | [Basic Usage](#basic-usage) | +| before-close | `(done) => void` | `-` | Optional, callback before closing the window, call `done` to close the drawer. | [Pre-close Callback](#pre-close-callback) | + +### Drawer Events + +| Parameter | Type | Description | +| :-------- | :--- | :--------------------------- | +| open | `-` | drawer triggered when opened | +| close | `-` | drawer triggered when closed | + +### Drawer Slots + +| Name | Type | Description | Jump to Demo | +| :------ | :-------- | :-------------------- | :-------------------------- | +| default | `default` | drawer board contents | [Basic Usage](#basic-usage) | From 79d8f14c04ffcff701c362c02add1bb5df32483d Mon Sep 17 00:00:00 2001 From: fengjiancai <140487515+fengjiancai@users.noreply.github.com> Date: Tue, 26 Sep 2023 16:47:39 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E7=BD=91=E7=AB=99=E8=A7=86?= =?UTF-8?q?=E8=A7=89=E4=BC=98=E5=8C=96=20(#1752)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: GreatZP --- .../devui-vue/docs/.vitepress/demo/Demo.vue | 6 +- .../docs/.vitepress/devui-theme/Layout.vue | 5 +- .../components/AlgoliaSearchBox.vue | 41 +++-- .../devui-theme/components/BackToTop.vue | 89 +++++----- .../components/NextAndPrevLinks.vue | 12 +- .../devui-theme/components/Page.vue | 166 ++++++++++++++++-- .../devui-theme/components/PageToc.vue | 67 ++++--- .../devui-theme/components/SideBar.vue | 21 ++- .../devui-theme/components/img/github.svg | 9 + .../devui-theme/components/img/gitter.svg | 14 ++ .../devui-theme/components/img/juejin.svg | 9 + .../devui-theme/components/img/logo.svg | 34 ++++ .../devui-theme/components/img/wechat.jpg | Bin 0 -> 127865 bytes .../devui-theme/components/img/wechat.svg | 11 ++ .../devui-theme/components/img/zhihu.svg | 12 ++ .../.vitepress/devui-theme/styles/code.scss | 3 +- .../.vitepress/devui-theme/styles/layout.scss | 7 +- .../devui-theme/styles/sidebar-links.scss | 74 +++++--- 18 files changed, 424 insertions(+), 156 deletions(-) create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/github.svg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/gitter.svg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/juejin.svg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/logo.svg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/wechat.jpg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/wechat.svg create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/components/img/zhihu.svg diff --git a/packages/devui-vue/docs/.vitepress/demo/Demo.vue b/packages/devui-vue/docs/.vitepress/demo/Demo.vue index ec64bbd807..a7d72179b4 100644 --- a/packages/devui-vue/docs/.vitepress/demo/Demo.vue +++ b/packages/devui-vue/docs/.vitepress/demo/Demo.vue @@ -209,7 +209,7 @@ export default { .demo-block { margin: 10px 0; border: solid 1px #ebebeb; - border-radius: 3px; + border-radius: 20px; transition: 0.2s; } @@ -249,8 +249,8 @@ export default { height: 44px; box-sizing: border-box; background-color: #fff; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; text-align: center; margin-top: -1px; color: #d3dce6; diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue index 3f40adbe4e..7b61f925b2 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue @@ -138,15 +138,14 @@ const contributors = computed(() => {