refactor: refactor naive desc comp
This commit is contained in:
xingyu4j
@@ -1,80 +1,198 @@
|
|||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import type { DescriptionsProps } from 'naive-ui';
|
import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
|
||||||
|
|
||||||
import type { PropType } from 'vue';
|
import type { CSSProperties, PropType, Slots } from 'vue';
|
||||||
|
|
||||||
import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
|
import type { DescriptionItemSchema, DescriptionProps } from './typing';
|
||||||
|
|
||||||
import { defineComponent } from 'vue';
|
import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
|
||||||
|
|
||||||
import { get } from '@vben/utils';
|
import { get, getNestedValue, isFunction } from '@vben/utils';
|
||||||
|
|
||||||
import { NDescriptions, NDescriptionsItem } from 'naive-ui';
|
import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
|
||||||
|
|
||||||
/** 对 Descriptions 进行二次封装 */
|
const props = {
|
||||||
const Description = defineComponent({
|
bordered: { default: true, type: Boolean },
|
||||||
name: 'Descriptions',
|
column: {
|
||||||
props: {
|
default: () => {
|
||||||
data: {
|
return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
|
||||||
type: Object as PropType<Record<string, any>>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
schema: {
|
|
||||||
type: Array as PropType<DescriptionItemSchema[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
// Descriptions 原生 props
|
|
||||||
componentProps: {
|
|
||||||
type: Object as PropType<DescriptionsProps>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
},
|
||||||
|
type: [Number, Object],
|
||||||
},
|
},
|
||||||
|
data: { type: Object },
|
||||||
|
schema: {
|
||||||
|
default: () => [],
|
||||||
|
type: Array as PropType<DescriptionItemSchema[]>,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'small',
|
||||||
|
type: String,
|
||||||
|
validator: (v: string) =>
|
||||||
|
['default', 'middle', 'small', undefined].includes(v),
|
||||||
|
},
|
||||||
|
title: { default: '', type: String },
|
||||||
|
useCard: { default: true, type: Boolean },
|
||||||
|
labelPlacement: { default: 'left', type: String as PropType<'left' | 'top'> },
|
||||||
|
};
|
||||||
|
|
||||||
setup(props: DescriptionsOptions) {
|
function getSlot(slots: Slots, slot: string, data?: any) {
|
||||||
// TODO @xingyu：每个 field 的 slot 的考虑
|
if (!slots || !Reflect.has(slots, slot)) {
|
||||||
// TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
|
return null;
|
||||||
/** 过滤掉不需要展示的 */
|
}
|
||||||
const shouldShowItem = (item: DescriptionItemSchema) => {
|
if (!isFunction(slots[slot])) {
|
||||||
if (item.hidden === undefined) return true;
|
console.error(`${slot} is not a function!`);
|
||||||
return typeof item.hidden === 'function'
|
return null;
|
||||||
? !item.hidden(props.data)
|
}
|
||||||
: !item.hidden;
|
const slotFn = slots[slot];
|
||||||
};
|
if (!slotFn) return null;
|
||||||
/** 渲染内容 */
|
return slotFn({ data });
|
||||||
const renderContent = (item: DescriptionItemSchema) => {
|
}
|
||||||
if (item.content) {
|
|
||||||
return typeof item.content === 'function'
|
export default defineComponent({
|
||||||
? item.content(props.data)
|
name: 'Description',
|
||||||
: item.content;
|
props,
|
||||||
|
setup(props, { slots }) {
|
||||||
|
const propsRef = ref<null | Partial<DescriptionProps>>(null);
|
||||||
|
|
||||||
|
const prefixCls = 'description';
|
||||||
|
const attrs = useAttrs();
|
||||||
|
|
||||||
|
// Custom title component: get title
|
||||||
|
const getMergeProps = computed(() => {
|
||||||
|
return {
|
||||||
|
...props,
|
||||||
|
...(unref(propsRef) as any),
|
||||||
|
} as DescriptionProps;
|
||||||
|
});
|
||||||
|
|
||||||
|
const getProps = computed(() => {
|
||||||
|
const opt = {
|
||||||
|
...unref(getMergeProps),
|
||||||
|
title: undefined,
|
||||||
|
};
|
||||||
|
return opt as DescriptionProps;
|
||||||
|
});
|
||||||
|
|
||||||
|
const useWrapper = computed(() => !!unref(getMergeProps).title);
|
||||||
|
|
||||||
|
const getDescriptionsProps = computed(() => {
|
||||||
|
return { ...unref(attrs), ...unref(getProps) } as NDescriptionsProps;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 防止换行
|
||||||
|
function renderLabel({
|
||||||
|
label,
|
||||||
|
labelMinWidth,
|
||||||
|
labelStyle,
|
||||||
|
}: DescriptionItemSchema) {
|
||||||
|
if (!labelStyle && !labelMinWidth) {
|
||||||
|
return label;
|
||||||
}
|
}
|
||||||
return item.field ? get(props.data, item.field) : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
const labelStyles: CSSProperties = {
|
||||||
<NDescriptions
|
...labelStyle,
|
||||||
{...props}
|
minWidth: `${labelMinWidth}px `,
|
||||||
bordered={props.componentProps?.bordered}
|
};
|
||||||
column={props.componentProps?.column}
|
return <div style={labelStyles}>{label}</div>;
|
||||||
labelPlacement={props.componentProps?.labelPlacement || 'left'}
|
}
|
||||||
size={props.componentProps?.size}
|
|
||||||
title={props.componentProps?.title}
|
function renderItem() {
|
||||||
>
|
const { data, schema } = unref(getProps);
|
||||||
{props.schema?.filter(shouldShowItem).map((item) => (
|
return unref(schema)
|
||||||
<NDescriptionsItem
|
.map((item) => {
|
||||||
contentStyle={item.contentStyle}
|
const { contentMinWidth, field, render, show, span } = item;
|
||||||
key={item.field || String(item.label)}
|
|
||||||
label={item.label as string}
|
if (show && isFunction(show) && !show(data)) {
|
||||||
labelStyle={item.labelStyle}
|
return null;
|
||||||
span={item.span}
|
}
|
||||||
>
|
|
||||||
{renderContent(item)}
|
function getContent() {
|
||||||
</NDescriptionsItem>
|
const _data = unref(getProps)?.data;
|
||||||
))}
|
if (!_data) {
|
||||||
</NDescriptions>
|
return null;
|
||||||
);
|
}
|
||||||
|
const getField = field.includes('.')
|
||||||
|
? (getNestedValue(_data, field) ?? get(_data, field))
|
||||||
|
: get(_data, field);
|
||||||
|
// if (
|
||||||
|
// getField &&
|
||||||
|
// !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
|
||||||
|
// ) {
|
||||||
|
// return isFunction(render) ? render('', _data) : (getField ?? '');
|
||||||
|
// }
|
||||||
|
return isFunction(render)
|
||||||
|
? render(getField, _data)
|
||||||
|
: (getField ?? '');
|
||||||
|
}
|
||||||
|
|
||||||
|
const width = contentMinWidth;
|
||||||
|
return (
|
||||||
|
<NDescriptionsItem key={field} span={span}>
|
||||||
|
{{
|
||||||
|
label: () => {
|
||||||
|
return renderLabel(item);
|
||||||
|
},
|
||||||
|
default: () => {
|
||||||
|
if (item.slot) {
|
||||||
|
const slotContent = getSlot(slots, item.slot, data);
|
||||||
|
return slotContent;
|
||||||
|
}
|
||||||
|
if (!contentMinWidth) {
|
||||||
|
return getContent();
|
||||||
|
}
|
||||||
|
const style: CSSProperties = {
|
||||||
|
minWidth: `${width}px`,
|
||||||
|
};
|
||||||
|
return <div style={style}>{getContent()}</div>;
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
</NDescriptionsItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.filter((item) => !!item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDesc() {
|
||||||
|
return (
|
||||||
|
<NDescriptions
|
||||||
|
class={`${prefixCls}`}
|
||||||
|
{...(unref(getDescriptionsProps) as any)}
|
||||||
|
>
|
||||||
|
{renderItem()}
|
||||||
|
</NDescriptions>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCard() {
|
||||||
|
const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
|
||||||
|
// Reduce the dom level
|
||||||
|
if (!props.useCard) {
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title } = unref(getMergeProps);
|
||||||
|
const extraSlot = getSlot(slots, 'extra');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NCard
|
||||||
|
contentStyle={{ padding: '8px 0' }}
|
||||||
|
headerStyle={{
|
||||||
|
padding: '8px 16px',
|
||||||
|
fontSize: '14px',
|
||||||
|
minHeight: '24px',
|
||||||
|
}}
|
||||||
|
style={{ margin: 0 }}
|
||||||
|
title={title}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
default: () => content,
|
||||||
|
extra: () => extraSlot && <div>{extraSlot}</div>,
|
||||||
|
}}
|
||||||
|
</NCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => (unref(useWrapper) ? renderCard() : renderDesc());
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO @xingyu：from 5.0：emits: ['register'] 事件
|
|
||||||
export default Description;
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,27 +1,41 @@
|
|||||||
import type { DescriptionsProps } from 'naive-ui';
|
import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
|
||||||
|
import type { JSX } from 'vue/jsx-runtime';
|
||||||
|
|
||||||
import type { CSSProperties, VNode } from 'vue';
|
import type { CSSProperties, VNode } from 'vue';
|
||||||
|
|
||||||
// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
|
import type { Recordable } from '@vben/types';
|
||||||
// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
|
|
||||||
// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
|
|
||||||
export interface DescriptionItemSchema {
|
export interface DescriptionItemSchema {
|
||||||
label: string | VNode; // 内容的描述
|
labelMinWidth?: number;
|
||||||
field?: string; // 对应 data 中的字段名
|
contentMinWidth?: number;
|
||||||
content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
|
// 自定义标签样式
|
||||||
span?: number; // 包含列的数量
|
labelStyle?: CSSProperties;
|
||||||
labelStyle?: CSSProperties; // 自定义标签样式
|
// 对应 data 中的字段名
|
||||||
contentStyle?: CSSProperties; // 自定义内容样式
|
field: string;
|
||||||
hidden?: ((data: any) => boolean) | boolean; // 是否显示
|
// 内容的描述
|
||||||
|
label: JSX.Element | string | VNode;
|
||||||
|
// 包含列的数量
|
||||||
|
span?: number;
|
||||||
|
// 是否显示
|
||||||
|
show?: (...arg: any) => boolean;
|
||||||
|
// 插槽名称
|
||||||
|
slot?: string;
|
||||||
|
// 自定义需要展示的内容
|
||||||
|
render?: (
|
||||||
|
val: any,
|
||||||
|
data?: Recordable<any>,
|
||||||
|
) => Element | JSX.Element | number | string | undefined | VNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
|
export interface DescriptionProps extends NDescriptionsProps {
|
||||||
// TODO @xingyu：from 5.0：bordered 默认为 true
|
// 是否包含卡片组件
|
||||||
// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
|
useCard?: boolean;
|
||||||
// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
|
// 描述项配置
|
||||||
// TODO @xingyu：from 5.0：useCollapse 默认为 true
|
schema: DescriptionItemSchema[];
|
||||||
export interface DescriptionsOptions {
|
// 数据
|
||||||
data?: Record<string, any>; // 数据
|
data: Recordable<any>;
|
||||||
schema?: DescriptionItemSchema[]; // 描述项配置
|
}
|
||||||
componentProps?: DescriptionsProps; // antd Descriptions 组件参数
|
|
||||||
|
export interface DescInstance {
|
||||||
|
setDescProps(descProps: Partial<DescriptionProps>): void;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +1,31 @@
|
|||||||
import type { DescriptionsOptions } from './typing';
|
import type { Component } from 'vue';
|
||||||
|
|
||||||
import { defineComponent, h, isReactive, reactive, watch } from 'vue';
|
import type { DescInstance, DescriptionProps } from './typing';
|
||||||
|
|
||||||
|
import { h, reactive } from 'vue';
|
||||||
|
|
||||||
import Description from './description.vue';
|
import Description from './description.vue';
|
||||||
|
|
||||||
/** 描述列表 api 定义 */
|
export function useDescription(options?: Partial<DescriptionProps>) {
|
||||||
class DescriptionApi {
|
const propsState = reactive<Partial<DescriptionProps>>(options || {});
|
||||||
private state = reactive<Record<string, any>>({});
|
|
||||||
|
|
||||||
constructor(options: DescriptionsOptions) {
|
const api: DescInstance = {
|
||||||
this.state = { ...options };
|
setDescProps: (descProps: Partial<DescriptionProps>): void => {
|
||||||
}
|
Object.assign(propsState, descProps);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
getState(): DescriptionsOptions {
|
// 创建一个包装组件，将 propsState 合并到 props 中
|
||||||
return this.state as DescriptionsOptions;
|
const DescriptionWrapper: Component = {
|
||||||
}
|
|
||||||
|
|
||||||
// TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
|
|
||||||
setState(newState: Partial<DescriptionsOptions>) {
|
|
||||||
this.state = { ...this.state, ...newState };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ExtendedDescriptionApi = DescriptionApi;
|
|
||||||
|
|
||||||
export function useDescription(options: DescriptionsOptions) {
|
|
||||||
const IS_REACTIVE = isReactive(options);
|
|
||||||
const api = new DescriptionApi(options);
|
|
||||||
// 扩展 API
|
|
||||||
const extendedApi: ExtendedDescriptionApi = api as never;
|
|
||||||
const Desc = defineComponent({
|
|
||||||
name: 'UseDescription',
|
name: 'UseDescription',
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
setup(_, { attrs, slots }) {
|
setup(_props, { attrs, slots }) {
|
||||||
// 合并props和attrs到state
|
return () => {
|
||||||
api.setState({ ...attrs });
|
// @ts-ignore - 避免类型实例化过深
|
||||||
|
return h(Description, { ...propsState, ...attrs }, slots);
|
||||||
return () =>
|
};
|
||||||
h(
|
|
||||||
Description,
|
|
||||||
{
|
|
||||||
...api.getState(),
|
|
||||||
...attrs,
|
|
||||||
},
|
|
||||||
slots,
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
|
|
||||||
// 响应式支持
|
return [DescriptionWrapper, api] as const;
|
||||||
if (IS_REACTIVE) {
|
|
||||||
watch(
|
|
||||||
() => options.schema,
|
|
||||||
(newSchema) => {
|
|
||||||
api.setState({ schema: newSchema });
|
|
||||||
},
|
|
||||||
{ immediate: true, deep: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => options.data,
|
|
||||||
(newData) => {
|
|
||||||
api.setState({ data: newData });
|
|
||||||
},
|
|
||||||
{ immediate: true, deep: true },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [Desc, extendedApi] as const;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user