提交 ce93e46f 作者: Vben

fix(description): ensure that props respond

上级 ee5fb223
...@@ -148,7 +148,7 @@ Support modern browsers, not IE ...@@ -148,7 +148,7 @@ Support modern browsers, not IE
## Maintainer ## Maintainer
[@Vben](https://github.com/anncwb) [@Vben](https://github.com/anncwb)
## Donate ## Donate
...@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o ...@@ -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) ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/cvvben) <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## Discord ## Discord
......
...@@ -156,7 +156,7 @@ yarn build ...@@ -156,7 +156,7 @@ yarn build
![donate](https://anncwb.github.io/anncwb/images/sponsor.png) ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/cvvben) <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## 交流 ## 交流
......
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const Description = createAsyncComponent(() => import('./src/index')); // export const Description = createAsyncComponent(() => import('./src/index'));
import Description from './src/index'; import Description from './src/index.vue';
export { Description }; export { Description };
export * from './src/types'; export * from './src/types';
......
import type { DescOptions, DescInstance, DescItem } from './types'; <script lang="tsx">
import type { DescOptions, DescInstance, DescItem } from './types';
import { defineComponent, computed, ref, unref, CSSProperties } from 'vue'; import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import { get } from 'lodash-es'; import type { CSSProperties } from 'vue';
import { Descriptions } from 'ant-design-vue'; import type { CollapseContainerOptions } from '/@/components/Container/index';
import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index'; import { defineComponent, computed, ref, unref } from 'vue';
import { get } from 'lodash-es';
import descProps from './props'; import { Descriptions } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container/index';
import { isFunction } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper'; import { useDesign } from '/@/hooks/web/useDesign';
import { cloneDeep } from 'lodash-es';
import { deepMerge } from '/@/utils'; import { isFunction } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
const prefixCls = 'description'; import { cloneDeep } from 'lodash-es';
export default defineComponent({ import { deepMerge } from '/@/utils';
name: 'Description',
props: descProps, import descProps from './props';
emits: ['register'], import { useAttrs } from '/@/hooks/core/useAttrs';
setup(props, { attrs, slots, emit }) {
const propsRef = ref<Partial<DescOptions> | null>(null); export default defineComponent({
name: 'Description',
// Custom title component: get title props: descProps,
const getMergeProps = computed(() => { emits: ['register'],
return { setup(props, { slots, emit }) {
...props, const propsRef = ref<Partial<DescOptions> | null>(null);
...(unref(propsRef) as Recordable),
} as DescOptions; const { prefixCls } = useDesign('description');
}); const attrs = useAttrs();
const getProps = computed(() => { // Custom title component: get title
const opt = { const getMergeProps = computed(() => {
...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 { return {
// Cannot be expanded by default ...props,
canExpand: false, ...(unref(propsRef) as Recordable),
...unref(getProps).collapseOptions, } as DescOptions;
});
const getProps = computed(() => {
const opt = {
...unref(getMergeProps),
title: undefined,
}; };
} return opt as DescOptions;
); });
const getDescriptionsProps = computed(() => { /**
return { ...attrs, ...unref(getProps) } as DescriptionsProps; * @description: Whether to setting title
}); */
const useWrapper = computed(() => !!unref(getMergeProps).title);
/**
* @description:设置desc /**
*/ * @description: Get configuration Collapse
function setDescProps(descProps: Partial<DescOptions>): void { */
// Keep the last setDrawerProps const getCollapseOptions = computed(
const mergeProps = deepMerge(unref(propsRef) || {}, descProps); (): CollapseContainerOptions => {
propsRef.value = cloneDeep(mergeProps); return {
} // Cannot be expanded by default
canExpand: false,
// Prevent line breaks ...unref(getProps).collapseOptions,
function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) { };
if (!labelStyle && !labelMinWidth) { }
return label; );
}
const labelStyles: CSSProperties = { const getDescriptionsProps = computed(() => {
...labelStyle, return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
});
minWidth: `${labelMinWidth}px `, /**
}; * @description:设置desc
return <div style={labelStyles}>{label}</div>; */
} function setDescProps(descProps: Partial<DescOptions>): void {
// Keep the last setDrawerProps
function renderItem() { propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
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; // Prevent line breaks
return ( function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
<Descriptions.Item label={renderLabel(item)} key={field} span={span}> if (!labelStyle && !labelMinWidth) {
{() => { return label;
if (!contentMinWidth) { }
return getContent();
}
const style: CSSProperties = {
minWidth: `${width}px`,
};
return <div style={style}>{getContent()}</div>;
}}
</Descriptions.Item>
);
})
.filter((item) => !!item);
}
const renderDesc = () => {
return (
<Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
{renderItem()}
</Descriptions>
);
};
const renderContainer = () => { const labelStyles: CSSProperties = {
const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>; ...labelStyle,
// Reduce the dom level
if (!props.useCollapse) { minWidth: `${labelMinWidth}px `,
return content; };
return <div style={labelStyles}>{label}</div>;
} }
const { canExpand, helpMessage } = unref(getCollapseOptions); function renderItem() {
const { title } = unref(getMergeProps); 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(getProps)?.data;
if (!_data) return null;
const getField = get(_data, field);
return isFunction(render) ? render(getField, _data) : getField ?? '';
};
const width = contentMinWidth;
return (
<Descriptions.Item label={renderLabel(item)} key={field} span={span}>
{() => {
if (!contentMinWidth) {
return getContent();
}
const style: CSSProperties = {
minWidth: `${width}px`,
};
return <div style={style}>{getContent()}</div>;
}}
</Descriptions.Item>
);
})
.filter((item) => !!item);
}
return ( const renderDesc = () => {
<CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}> return (
{{ <Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
default: () => content, {renderItem()}
action: () => getSlot(slots, 'action'), </Descriptions>
}} );
</CollapseContainer> };
);
}; const renderContainer = () => {
const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
// Reduce the dom level
if (!props.useCollapse) {
return content;
}
const { canExpand, helpMessage } = unref(getCollapseOptions);
const { title } = unref(getMergeProps);
return (
<CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
{{
default: () => content,
action: () => getSlot(slots, 'action'),
}}
</CollapseContainer>
);
};
const methods: DescInstance = { const methods: DescInstance = {
setDescProps, setDescProps,
}; };
emit('register', methods); emit('register', methods);
return () => (unref(useWrapper) ? renderContainer() : renderDesc()); return () => (unref(useWrapper) ? renderContainer() : renderDesc());
}, },
}); });
</script>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container'; import type { CollapseContainerOptions } from '/@/components/Container';
import type { DescItem } from './types'; import type { DescItem } from './types';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
export default { export default {
useCollapse: propTypes.bool.def(true), useCollapse: propTypes.bool.def(true),
title: propTypes.string.def(''), title: propTypes.string.def(''),
size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'), size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
bordered: propTypes.bool.def(true), bordered: propTypes.bool.def(true),
column: { column: {
type: [Number, Object] as PropType<number | Recordable>, type: [Number, Object] as PropType<number | Recordable>,
default: () => { default: () => {
return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }; return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
}, },
}, },
collapseOptions: { collapseOptions: {
type: Object as PropType<CollapseContainerOptions>, type: Object as PropType<CollapseContainerOptions>,
default: null, default: null,
......
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
export default defineComponent({ export default defineComponent({
name: 'PageFooter', name: 'PageFooter',
inheritAttrs: false,
setup() { setup() {
const { prefixCls } = useDesign('page-footer'); const { prefixCls } = useDesign('page-footer');
const { getCalcContentWidth } = useMenuSetting(); const { getCalcContentWidth } = useMenuSetting();
......
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
import { PageHeader } from 'ant-design-vue'; import { PageHeader } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
name: 'PageWrapper', name: 'PageWrapper',
inheritAttrs: false,
components: { PageFooter, PageHeader }, components: { PageFooter, PageHeader },
props: { props: {
dense: propTypes.bool, dense: propTypes.bool,
......
...@@ -72,12 +72,13 @@ ...@@ -72,12 +72,13 @@
schema: schema, schema: schema,
}); });
const [register1] = useDescription({ const [register1, { setDescProps }] = useDescription({
title: '无边框', title: '无边框',
bordered: false, bordered: false,
data: mockData, data: mockData,
schema: schema, schema: schema,
}); });
return { mockData, schema, register, register1 }; return { mockData, schema, register, register1 };
}, },
}); });
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论