diff --git a/README.md b/README.md index 36c335b355f..e16de152411 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,7 @@ Support modern browsers, not IE ## Maintainer -[@Vben](https://github.com/anncwb)。 +[@Vben](https://github.com/anncwb) ## Donate @@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o ![donate](https://anncwb.github.io/anncwb/images/sponsor.png) -[Paypal Me](https://www.paypal.com/paypalme/cvvben) +Paypal Me ## Discord diff --git a/README.zh-CN.md b/README.zh-CN.md index 78379d881ec..2fb99374152 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -156,7 +156,7 @@ yarn build ![donate](https://anncwb.github.io/anncwb/images/sponsor.png) -[Paypal Me](https://www.paypal.com/paypalme/cvvben) +Paypal Me ## 交流 diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts index d266826924d..d8a7a4fc120 100644 --- a/src/components/Description/index.ts +++ b/src/components/Description/index.ts @@ -1,7 +1,7 @@ // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; // export const Description = createAsyncComponent(() => import('./src/index')); -import Description from './src/index'; +import Description from './src/index.vue'; export { Description }; export * from './src/types'; diff --git a/src/components/Description/src/index.tsx b/src/components/Description/src/index.tsx deleted file mode 100644 index a6ab9955928..00000000000 --- a/src/components/Description/src/index.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import type { DescOptions, DescInstance, DescItem } from './types'; - -import { defineComponent, computed, ref, unref, CSSProperties } from 'vue'; -import { get } from 'lodash-es'; -import { Descriptions } from 'ant-design-vue'; -import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index'; -import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index'; - -import descProps from './props'; - -import { isFunction } from '/@/utils/is'; -import { getSlot } from '/@/utils/helper/tsxHelper'; -import { cloneDeep } from 'lodash-es'; -import { deepMerge } from '/@/utils'; - -const prefixCls = 'description'; -export default defineComponent({ - name: 'Description', - props: descProps, - emits: ['register'], - setup(props, { attrs, slots, emit }) { - const propsRef = ref | null>(null); - - // Custom title component: get title - const getMergeProps = computed(() => { - return { - ...props, - ...(unref(propsRef) as Recordable), - } as DescOptions; - }); - - const getProps = computed(() => { - const opt = { - ...unref(getMergeProps), - title: undefined, - }; - return opt as DescOptions; - }); - - /** - * @description: Whether to setting title - */ - const useWrapper = computed(() => !!unref(getMergeProps).title); - - /** - * @description: Get configuration Collapse - */ - const getCollapseOptions = computed( - (): CollapseContainerOptions => { - return { - // Cannot be expanded by default - canExpand: false, - ...unref(getProps).collapseOptions, - }; - } - ); - - const getDescriptionsProps = computed(() => { - return { ...attrs, ...unref(getProps) } as DescriptionsProps; - }); - - /** - * @description:设置desc - */ - function setDescProps(descProps: Partial): void { - // Keep the last setDrawerProps - const mergeProps = deepMerge(unref(propsRef) || {}, descProps); - propsRef.value = cloneDeep(mergeProps); - } - - // Prevent line breaks - function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) { - if (!labelStyle && !labelMinWidth) { - return label; - } - - const labelStyles: CSSProperties = { - ...labelStyle, - - minWidth: `${labelMinWidth}px `, - }; - return
{label}
; - } - - function renderItem() { - const { schema, data } = unref(getProps); - return unref(schema) - .map((item) => { - const { render, field, span, show, contentMinWidth } = item; - - if (show && isFunction(show) && !show(data)) { - return null; - } - - const getContent = () => { - const _data = unref(data); - const getField = get(_data, field); - return isFunction(render) ? render(getField, _data) : getField ?? ''; - }; - - const width = contentMinWidth; - return ( - - {() => { - if (!contentMinWidth) { - return getContent(); - } - const style: CSSProperties = { - minWidth: `${width}px`, - }; - return
{getContent()}
; - }} -
- ); - }) - .filter((item) => !!item); - } - - const renderDesc = () => { - return ( - - {renderItem()} - - ); - }; - - const renderContainer = () => { - const content = props.useCollapse ? renderDesc() :
{renderDesc()}
; - // Reduce the dom level - - if (!props.useCollapse) { - return content; - } - - const { canExpand, helpMessage } = unref(getCollapseOptions); - const { title } = unref(getMergeProps); - - return ( - - {{ - default: () => content, - action: () => getSlot(slots, 'action'), - }} - - ); - }; - - const methods: DescInstance = { - setDescProps, - }; - - emit('register', methods); - return () => (unref(useWrapper) ? renderContainer() : renderDesc()); - }, -}); diff --git a/src/components/Description/src/index.vue b/src/components/Description/src/index.vue new file mode 100644 index 00000000000..129c7d6d049 --- /dev/null +++ b/src/components/Description/src/index.vue @@ -0,0 +1,164 @@ + diff --git a/src/components/Description/src/props.ts b/src/components/Description/src/props.ts index 7cd920030cb..0c81d4df8a4 100644 --- a/src/components/Description/src/props.ts +++ b/src/components/Description/src/props.ts @@ -1,24 +1,18 @@ import type { PropType } from 'vue'; import type { CollapseContainerOptions } from '/@/components/Container'; import type { DescItem } from './types'; - import { propTypes } from '/@/utils/propTypes'; export default { useCollapse: propTypes.bool.def(true), - title: propTypes.string.def(''), - size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'), - bordered: propTypes.bool.def(true), - column: { type: [Number, Object] as PropType, default: () => { return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }; }, }, - collapseOptions: { type: Object as PropType, default: null, diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue index 1bfb696217b..07d0d8f596c 100644 --- a/src/components/Page/src/PageFooter.vue +++ b/src/components/Page/src/PageFooter.vue @@ -17,6 +17,7 @@ export default defineComponent({ name: 'PageFooter', + inheritAttrs: false, setup() { const { prefixCls } = useDesign('page-footer'); const { getCalcContentWidth } = useMenuSetting(); diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue index 045981aecbb..8ef95e3d36a 100644 --- a/src/components/Page/src/PageWrapper.vue +++ b/src/components/Page/src/PageWrapper.vue @@ -37,6 +37,7 @@ import { PageHeader } from 'ant-design-vue'; export default defineComponent({ name: 'PageWrapper', + inheritAttrs: false, components: { PageFooter, PageHeader }, props: { dense: propTypes.bool, diff --git a/src/views/demo/comp/desc/index.vue b/src/views/demo/comp/desc/index.vue index fce2caa68b7..2074fbf5ae6 100644 --- a/src/views/demo/comp/desc/index.vue +++ b/src/views/demo/comp/desc/index.vue @@ -72,12 +72,13 @@ schema: schema, }); - const [register1] = useDescription({ + const [register1, { setDescProps }] = useDescription({ title: '无边框', bordered: false, data: mockData, schema: schema, }); + return { mockData, schema, register, register1 }; }, });