ant-design-vue/components/divider/index.tsx

72 lines
2.0 KiB
Vue
Raw Normal View History

2020-10-24 13:15:55 +00:00
import { flattenChildren } from '../_util/props-util';
2021-05-11 08:23:49 +00:00
import { computed, defineComponent, ExtractPropTypes, inject, PropType } from 'vue';
import { defaultConfigProvider } from '../config-provider';
2020-11-01 07:03:33 +00:00
import { withInstall } from '../_util/type';
2021-05-11 08:23:49 +00:00
export const dividerProps = {
prefixCls: String,
type: {
type: String as PropType<'horizontal' | 'vertical' | ''>,
default: 'horizontal',
},
dashed: {
type: Boolean,
default: false,
},
orientation: {
type: String as PropType<'left' | 'right' | 'center'>,
default: 'center',
},
plain: {
type: Boolean,
default: false,
},
};
export type DividerProps = ExtractPropTypes<typeof dividerProps>;
const Divider = defineComponent({
name: 'ADivider',
2021-05-11 08:23:49 +00:00
props: dividerProps,
setup(props, { slots }) {
2021-05-11 08:23:49 +00:00
const configProvider = inject('configProvider', defaultConfigProvider);
const prefixClsRef = computed(() => configProvider.getPrefixCls('divider', props.prefixCls));
const classString = computed(() => {
2021-05-11 08:23:49 +00:00
const { type, dashed, plain } = props;
const prefixCls = prefixClsRef.value;
return {
2021-05-11 08:23:49 +00:00
[prefixCls]: true,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: configProvider.direction === 'rtl',
};
});
2021-05-11 08:23:49 +00:00
const orientationPrefix = computed(() =>
props.orientation.length > 0 ? '-' + props.orientation : props.orientation,
);
return () => {
2020-10-24 13:15:55 +00:00
const children = flattenChildren(slots.default?.());
return (
2021-05-11 08:23:49 +00:00
<div
class={[
classString.value,
children.length
? `${prefixClsRef.value}-with-text ${prefixClsRef.value}-with-text${orientationPrefix.value}`
: '',
]}
role="separator"
>
{children.length ? (
<span class={`${prefixClsRef.value}-inner-text`}>{children}</span>
) : null}
</div>
);
};
},
});
2020-11-01 07:03:33 +00:00
export default withInstall(Divider);