From 24b9aa44d2c4aedd44323ccad6168b1552a2a05d Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 2 Dec 2024 00:47:06 +0800 Subject: [PATCH 01/15] =?UTF-8?q?chore:=20Revert=20"fix:=20form=20?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E4=B8=8D=E6=94=AF=E6=8C=81field.xxx.xx?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E7=9A=84defaultValue=E9=85=8D=E7=BD=AE=20(#4?= =?UTF-8?q?965)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commliit 12f216c0e7395caca21112064f0734c8ded424b3. --- packages/@core/base/shared/package.json | 2 - packages/@core/base/shared/src/utils/index.ts | 1 - .../ui-kit/form-ui/src/use-form-context.ts | 6 +-- playground/src/views/examples/form/basic.vue | 6 --- pnpm-lock.yaml | 54 ++++++------------- pnpm-workspace.yaml | 6 +-- 6 files changed, 20 insertions(+), 55 deletions(-) diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json index 3c20f70f8..15ba9010c 100644 --- a/packages/@core/base/shared/package.json +++ b/packages/@core/base/shared/package.json @@ -86,14 +86,12 @@ "dayjs": "catalog:", "defu": "catalog:", "lodash.clonedeep": "catalog:", - "lodash.set": "catalog:", "nprogress": "catalog:", "tailwind-merge": "catalog:", "theme-colors": "catalog:" }, "devDependencies": { "@types/lodash.clonedeep": "catalog:", - "@types/lodash.set": "catalog:", "@types/nprogress": "catalog:" } } diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts index 789895f48..2f56c6018 100644 --- a/packages/@core/base/shared/src/utils/index.ts +++ b/packages/@core/base/shared/src/utils/index.ts @@ -15,4 +15,3 @@ export * from './update-css-variables'; export * from './util'; export * from './window'; export { default as cloneDeep } from 'lodash.clonedeep'; -export { default as set } from 'lodash.set'; diff --git a/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/packages/@core/ui-kit/form-ui/src/use-form-context.ts index 7bce3f2ec..05838fc33 100644 --- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts +++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts @@ -3,7 +3,7 @@ import type { FormActions, VbenFormProps } from './types'; import { computed, type ComputedRef, unref, useSlots } from 'vue'; import { createContext } from '@vben-core/shadcn-ui'; -import { isString, set } from '@vben-core/shared/utils'; +import { isString } from '@vben-core/shared/utils'; import { useForm } from 'vee-validate'; import { object, type ZodRawShape } from 'zod'; @@ -41,9 +41,9 @@ export function useFormInitial( const zodObject: ZodRawShape = {}; (unref(props).schema || []).forEach((item) => { if (Reflect.has(item, 'defaultValue')) { - set(initialValues, item.fieldName, item.defaultValue); + initialValues[item.fieldName] = item.defaultValue; } else if (item.rules && !isString(item.rules)) { - set(zodObject, item.fieldName, item.defaultValue); + zodObject[item.fieldName] = item.rules; } }); diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 4f231b731..5124a3cfd 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -291,12 +291,6 @@ const [CustomLayoutForm] = useVbenForm({ formItemClass: 'col-start-1', label: '字符串', }, - { - component: 'Input', - defaultValue: 'field4.path', - fieldName: 'field4.path', - label: 'field4.path', - }, ], // 一共三列 wrapperClass: 'grid-cols-3', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2ff88ff57..731ef2e24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,11 +90,8 @@ catalogs: '@types/lodash.clonedeep': specifier: ^4.5.9 version: 4.5.9 - '@types/lodash.set': - specifier: ^4.3.9 - version: 4.3.9 '@types/node': - specifier: ^22.10.1 + specifier: ^22.10.0 version: 22.10.1 '@types/nprogress': specifier: ^0.2.3 @@ -294,12 +291,9 @@ catalogs: lodash.clonedeep: specifier: ^4.5.0 version: 4.5.0 - lodash.set: - specifier: ^4.3.2 - version: 4.3.2 lucide-vue-next: - specifier: ^0.462.0 - version: 0.462.0 + specifier: ^0.461.0 + version: 0.461.0 medium-zoom: specifier: ^1.1.0 version: 1.1.0 @@ -829,7 +823,7 @@ importers: version: 4.2.6(vue@3.5.13(typescript@5.7.2)) lucide-vue-next: specifier: 'catalog:' - version: 0.462.0(vue@3.5.13(typescript@5.7.2)) + version: 0.461.0(vue@3.5.13(typescript@5.7.2)) medium-zoom: specifier: 'catalog:' version: 1.1.0 @@ -1187,7 +1181,7 @@ importers: version: 4.1.2(vue@3.5.13(typescript@5.7.2)) lucide-vue-next: specifier: 'catalog:' - version: 0.462.0(vue@3.5.13(typescript@5.7.2)) + version: 0.461.0(vue@3.5.13(typescript@5.7.2)) vue: specifier: ^3.5.13 version: 3.5.13(typescript@5.7.2) @@ -1215,9 +1209,6 @@ importers: lodash.clonedeep: specifier: 'catalog:' version: 4.5.0 - lodash.set: - specifier: 'catalog:' - version: 4.3.2 nprogress: specifier: 'catalog:' version: 0.2.0 @@ -1231,9 +1222,6 @@ importers: '@types/lodash.clonedeep': specifier: 'catalog:' version: 4.5.9 - '@types/lodash.set': - specifier: 'catalog:' - version: 4.3.9 '@types/nprogress': specifier: 'catalog:' version: 0.2.3 @@ -1408,7 +1396,7 @@ importers: version: 0.7.1 lucide-vue-next: specifier: 'catalog:' - version: 0.462.0(vue@3.5.13(typescript@5.7.2)) + version: 0.461.0(vue@3.5.13(typescript@5.7.2)) radix-vue: specifier: 'catalog:' version: 1.9.10(vue@3.5.13(typescript@5.7.2)) @@ -4408,9 +4396,6 @@ packages: '@types/lodash.clonedeep@4.5.9': resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==} - '@types/lodash.set@4.3.9': - resolution: {integrity: sha512-KOxyNkZpbaggVmqbpr82N2tDVTx05/3/j0f50Es1prxrWB0XYf9p3QNxqcbWb7P1Q9wlvsUSlCFnwlPCIJ46PQ==} - '@types/lodash@4.17.13': resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==} @@ -7462,9 +7447,6 @@ packages: lodash.once@4.1.1: resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==} - lodash.set@4.3.2: - resolution: {integrity: sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==} - lodash.snakecase@4.1.1: resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==} @@ -7518,8 +7500,8 @@ packages: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} - lucide-vue-next@0.462.0: - resolution: {integrity: sha512-3H+GzhWA+qAW29EpJr/vCtPJK209zejoqsy6pCWSC6niPnywQeOA/yxl/WPQ38ODo3h7r0iGjpMKl8g/LS3+JA==} + lucide-vue-next@0.461.0: + resolution: {integrity: sha512-9qAQq4W3/Ka0VRUjXWDzoFex0lLuPxy8hf6vvs4xkc82tdGqIJhhSx+lAILX4BAiY4e+Hai5C0mGamDno6lHtA==} peerDependencies: vue: ^3.5.13 @@ -13265,7 +13247,7 @@ snapshots: '@types/conventional-commits-parser@5.0.1': dependencies: - '@types/node': 22.10.0 + '@types/node': 22.10.1 '@types/eslint@9.6.1': dependencies: @@ -13279,7 +13261,7 @@ snapshots: '@types/fs-extra@11.0.4': dependencies: '@types/jsonfile': 6.1.4 - '@types/node': 22.10.0 + '@types/node': 22.10.1 optional: true '@types/hast@3.0.4': @@ -13290,13 +13272,13 @@ snapshots: '@types/http-proxy@1.17.15': dependencies: - '@types/node': 22.10.0 + '@types/node': 22.10.1 '@types/json-schema@7.0.15': {} '@types/jsonfile@6.1.4': dependencies: - '@types/node': 22.10.0 + '@types/node': 22.10.1 optional: true '@types/jsonwebtoken@9.0.7': @@ -13315,10 +13297,6 @@ snapshots: dependencies: '@types/lodash': 4.17.13 - '@types/lodash.set@4.3.9': - dependencies: - '@types/lodash': 4.17.13 - '@types/lodash@4.17.13': {} '@types/markdown-it@14.1.2': @@ -13360,7 +13338,7 @@ snapshots: '@types/readdir-glob@1.1.5': dependencies: - '@types/node': 22.10.0 + '@types/node': 22.10.1 '@types/resolve@1.20.2': {} @@ -16781,8 +16759,6 @@ snapshots: lodash.once@4.1.1: {} - lodash.set@4.3.2: {} - lodash.snakecase@4.1.1: {} lodash.sortby@4.7.0: {} @@ -16832,7 +16808,7 @@ snapshots: dependencies: yallist: 4.0.0 - lucide-vue-next@0.462.0(vue@3.5.13(typescript@5.7.2)): + lucide-vue-next@0.461.0(vue@3.5.13(typescript@5.7.2)): dependencies: vue: 3.5.13(typescript@5.7.2) @@ -20195,4 +20171,4 @@ snapshots: zx@8.2.2: optionalDependencies: '@types/fs-extra': 11.0.4 - '@types/node': 22.10.0 + '@types/node': 22.10.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 5b9f48258..8654fc501 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -43,8 +43,7 @@ catalog: '@types/html-minifier-terser': ^7.0.2 '@types/jsonwebtoken': ^9.0.7 '@types/lodash.clonedeep': ^4.5.9 - '@types/node': ^22.10.1 - '@types/lodash.set': ^4.3.9 + '@types/node': ^22.10.0 '@types/nprogress': ^0.2.3 '@types/postcss-import': ^14.0.3 '@types/qrcode': ^1.5.5 @@ -113,8 +112,7 @@ catalog: jsonwebtoken: ^9.0.2 lint-staged: ^15.2.10 lodash.clonedeep: ^4.5.0 - lucide-vue-next: ^0.462.0 - lodash.set: ^4.3.2 + lucide-vue-next: ^0.461.0 medium-zoom: ^1.1.0 naive-ui: ^2.40.2 nitropack: ^2.10.4 From 17c7ce8f21d79a008ca442c2398c4c8d8883348d Mon Sep 17 00:00:00 2001 From: Netfan Date: Wed, 4 Dec 2024 21:40:41 +0800 Subject: [PATCH 02/15] feat: improve `page` component (#5013) * feat: `page` component support fixed header * docs: `page` component documentation * docs: Improve `props` types of `page` * docs: improve `fixedHeader` description of `page` * fix: `page` header border color with fixedHeader * feat: add `headerClass` for `Page` --- docs/.vitepress/config/zh.mts | 10 +++++ docs/src/components/introduction.md | 4 ++ docs/src/components/layout-ui/page.md | 45 +++++++++++++++++++ .../ui-kit/layout-ui/src/vben-layout.vue | 2 +- packages/effects/common-ui/package.json | 1 + .../common-ui/src/components/page/page.vue | 44 ++++++++++++++++-- playground/src/views/examples/form/basic.vue | 23 ++++++++-- playground/src/views/examples/modal/index.vue | 1 + pnpm-lock.yaml | 3 ++ 9 files changed, 126 insertions(+), 7 deletions(-) create mode 100644 docs/src/components/layout-ui/page.md diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts index 6b31658ed..27fb96c04 100644 --- a/docs/.vitepress/config/zh.mts +++ b/docs/.vitepress/config/zh.mts @@ -148,6 +148,16 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] { }, ], }, + { + collapsed: false, + text: '布局组件', + items: [ + { + link: 'layout-ui/page', + text: 'Page 页面', + }, + ], + }, { collapsed: false, text: '通用组件', diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md index 039ec8cd8..438470e9a 100644 --- a/docs/src/components/introduction.md +++ b/docs/src/components/introduction.md @@ -6,6 +6,10 @@ ::: +## 布局组件 + +布局组件一般在页面内容区域用作顶层容器组件，提供一些统一的布局样式和基本功能。 + ## 通用组件 通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。 diff --git a/docs/src/components/layout-ui/page.md b/docs/src/components/layout-ui/page.md new file mode 100644 index 000000000..8a33775c4 --- /dev/null +++ b/docs/src/components/layout-ui/page.md @@ -0,0 +1,45 @@ +--- +outline: deep +--- + +# Page 常规页面组件 + +提供一个常规页面布局的组件，包括头部、内容区域、底部三个部分。 + +::: info 写在前面 + +本组件是一个基本布局组件。如果有更多的通用页面布局需求（比如双列布局等），可以根据实际需求自行封装。 + +::: + +## 基础用法 + +将`Page`作为你的业务页面的根组件即可。 + +### Props + +| 属性名 | 描述 | 类型 | 默认值 | +| --- | --- | --- | --- | +| title | 页面标题 | `string\|slot` | - | +| description | 页面描述（标题下的内容） | `string\|slot` | - | +| contentClass | 内容区域的class | `string` | - | +| headerClass | 头部区域的class | `string` | - | +| footerClass | 底部区域的class | `string` | - | +| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | +| fixedHeader | 固定头部在页面内容区域顶部，在滚动时保持可见 | `boolean` | `false` | + +::: tip 注意 + +如果`title`、`description`、`extra`三者均未提供有效内容（通过`props`或者`slots`均可），则页面头部区域不会渲染。 + +::: + +### Slots + +| 插槽名称 | 描述 | +| ----------- | ------------ | +| default | 页面内容 | +| title | 页面标题 | +| description | 页面描述 | +| extra | 页面头部右侧 | +| footer | 页面底部 | diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index 3cdd3d1ea..336247557 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -503,7 +503,7 @@ function handleHeaderToggle() {
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'; +import { + computed, + nextTick, + onMounted, + ref, + type StyleValue, + useTemplateRef, +} from 'vue'; + +import { preferences } from '@vben-core/preferences'; +import { cn } from '@vben-core/shared/utils'; interface Props { title?: string; @@ -9,6 +19,10 @@ interface Props { * 根据content可见高度自适应 */ autoContentHeight?: boolean; + /** 头部固定 */ + fixedHeader?: boolean; + headerClass?: string; + footerClass?: string; } defineOptions({ @@ -20,6 +34,7 @@ const { description = '', autoContentHeight = false, title = '', + fixedHeader = false, } = defineProps(); const headerHeight = ref(0); @@ -29,6 +44,17 @@ const shouldAutoHeight = ref(false); const headerRef = useTemplateRef('headerRef'); const footerRef = useTemplateRef('footerRef'); +const headerStyle = computed(() => { + return fixedHeader + ? { + position: 'sticky', + zIndex: 200, + top: + preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0, + } + : undefined; +}); + const contentStyle = computed(() => { if (autoContentHeight) { return { @@ -69,7 +95,14 @@ onMounted(() => { $slots.extra " ref="headerRef" - class="bg-card relative px-6 py-4" + :class=" + cn( + 'bg-card relative px-6 py-4', + headerClass, + fixedHeader ? 'border-border border-b' : '', + ) + " + :style="headerStyle" >
@@ -95,7 +128,12 @@ onMounted(() => {
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 5124a3cfd..4c1d3cadc 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -1,13 +1,17 @@