perf: space compact
tangjinzhou
parent
f0649999fb
commit
23b81b0e17
|
|
@ -13,6 +13,7 @@ import VcInput from '../vc-input/Input';
|
|||
import inputProps from './inputProps';
|
||||
import omit from '../_util/omit';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
|
@ -30,6 +31,11 @@ export default defineComponent({
|
|||
const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
|
||||
const { direction, prefixCls, size, autocomplete } = useConfigInject('input', props);
|
||||
|
||||
// ===================== Compact Item =====================
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
const mergedSize = computed(() => {
|
||||
return compactSize.value || size.value;
|
||||
});
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
|
|
@ -140,12 +146,25 @@ export default defineComponent({
|
|||
onFocus={handleFocus}
|
||||
suffix={suffixNode}
|
||||
allowClear={allowClear}
|
||||
addonAfter={addonAfter && <NoFormStatus>{addonAfter}</NoFormStatus>}
|
||||
addonBefore={addonBefore && <NoFormStatus>{addonBefore}</NoFormStatus>}
|
||||
addonAfter={
|
||||
addonAfter && (
|
||||
<NoCompactStyle>
|
||||
<NoFormStatus>{addonAfter}</NoFormStatus>
|
||||
</NoCompactStyle>
|
||||
)
|
||||
}
|
||||
addonBefore={
|
||||
addonBefore && (
|
||||
<NoCompactStyle>
|
||||
<NoFormStatus>{addonBefore}</NoFormStatus>
|
||||
</NoCompactStyle>
|
||||
)
|
||||
}
|
||||
class={[attrs.class, compactItemClassnames.value]}
|
||||
inputClassName={classNames(
|
||||
{
|
||||
[`${prefixClsValue}-sm`]: size.value === 'small',
|
||||
[`${prefixClsValue}-lg`]: size.value === 'large',
|
||||
[`${prefixClsValue}-sm`]: mergedSize.value === 'small',
|
||||
[`${prefixClsValue}-lg`]: mergedSize.value === 'large',
|
||||
[`${prefixClsValue}-rtl`]: direction.value === 'rtl',
|
||||
[`${prefixClsValue}-borderless`]: !bordered,
|
||||
},
|
||||
|
|
@ -154,8 +173,8 @@ export default defineComponent({
|
|||
)}
|
||||
affixWrapperClassName={classNames(
|
||||
{
|
||||
[`${prefixClsValue}-affix-wrapper-sm`]: size.value === 'small',
|
||||
[`${prefixClsValue}-affix-wrapper-lg`]: size.value === 'large',
|
||||
[`${prefixClsValue}-affix-wrapper-sm`]: mergedSize.value === 'small',
|
||||
[`${prefixClsValue}-affix-wrapper-lg`]: mergedSize.value === 'large',
|
||||
[`${prefixClsValue}-affix-wrapper-rtl`]: direction.value === 'rtl',
|
||||
[`${prefixClsValue}-affix-wrapper-borderless`]: !bordered,
|
||||
},
|
||||
|
|
@ -170,8 +189,8 @@ export default defineComponent({
|
|||
)}
|
||||
groupClassName={classNames(
|
||||
{
|
||||
[`${prefixClsValue}-group-wrapper-sm`]: size.value === 'small',
|
||||
[`${prefixClsValue}-group-wrapper-lg`]: size.value === 'large',
|
||||
[`${prefixClsValue}-group-wrapper-sm`]: mergedSize.value === 'small',
|
||||
[`${prefixClsValue}-group-wrapper-lg`]: mergedSize.value === 'large',
|
||||
[`${prefixClsValue}-group-wrapper-rtl`]: direction.value === 'rtl',
|
||||
},
|
||||
getStatusClassNames(`${prefixClsValue}-group-wrapper`, mergedStatus.value, hasFeedback),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import type { PropType, ExtractPropTypes, Ref } from 'vue';
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { booleanType, tuple } from '../_util/type';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import { flattenChildren } from '../_util/props-util';
|
||||
|
||||
export const spaceCompactItemProps = () => ({
|
||||
compactSize: String as PropType<SizeType>,
|
||||
|
|
@ -60,7 +61,7 @@ export const NoCompactStyle = defineComponent({
|
|||
export const spaceCompactProps = () => ({
|
||||
prefixCls: String,
|
||||
size: {
|
||||
type: [String, Number, Array] as PropType<SizeType>,
|
||||
type: String as PropType<SizeType>,
|
||||
},
|
||||
direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
|
||||
align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
|
||||
|
|
@ -98,15 +99,14 @@ const Compact = defineComponent({
|
|||
});
|
||||
|
||||
return () => {
|
||||
const childNodes = flattenChildren(slots.default?.() || []);
|
||||
// =========================== Render ===========================
|
||||
if (slots.default?.()?.length === 0) {
|
||||
if (childNodes.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const childNodes = slots.default?.() || [];
|
||||
|
||||
return wrapSSR(
|
||||
<div class={clx.value} {...attrs}>
|
||||
<div {...attrs} class={[clx.value, attrs.class]}>
|
||||
{childNodes.map((child, i) => {
|
||||
const key = (child && child.key) || `${prefixCls.value}-item-${i}`;
|
||||
const noCompactItemContext = !compactItemContext || isEmpty(compactItemContext);
|
||||
|
|
@ -114,7 +114,7 @@ const Compact = defineComponent({
|
|||
return (
|
||||
<CompactItem
|
||||
key={key}
|
||||
compactSize={props.size}
|
||||
compactSize={props.size ?? 'middle'}
|
||||
compactDirection={props.direction}
|
||||
isFirstItem={i === 0 && (noCompactItemContext || compactItemContext?.isFirstItem)}
|
||||
isLastItem={
|
||||
|
|
|
|||
|
|
@ -194,21 +194,8 @@ Compact Mode for form component.
|
|||
placeholder="Please select"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
>
|
||||
<a-tree-select-node value="parent 1" title="parent 1">
|
||||
<a-tree-select-node value="parent 1-0" title="parent 1-0">
|
||||
<a-tree-select-node value="leaf1" title="leaf1" />
|
||||
<a-tree-select-node value="leaf2" title="leaf2" />
|
||||
</a-tree-select-node>
|
||||
<a-tree-select-node value="parent 1-1" title="parent 1-1">
|
||||
<a-tree-select-node value="leaf3">
|
||||
<template #title>
|
||||
<b :style="{ color: '#08c' }">leaf3</b>
|
||||
</template>
|
||||
</a-tree-select-node>
|
||||
</a-tree-select-node>
|
||||
</a-tree-select-node>
|
||||
</a-tree-select>
|
||||
:tree-data="treeData"
|
||||
></a-tree-select>
|
||||
<a-button type="primary">Submit</a-button>
|
||||
</a-space-compact>
|
||||
<br />
|
||||
|
|
@ -217,11 +204,41 @@ Compact Mode for form component.
|
|||
|
||||
<script lang="ts">
|
||||
import { CopyOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { TreeSelectProps } from 'ant-design-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CopyOutlined,
|
||||
},
|
||||
setup() {
|
||||
const treeData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
title: 'parent 1',
|
||||
value: 'parent 1',
|
||||
children: [
|
||||
{
|
||||
title: 'parent 1-0',
|
||||
value: 'parent 1-0',
|
||||
children: [
|
||||
{
|
||||
title: 'my leaf',
|
||||
value: 'leaf1',
|
||||
},
|
||||
{
|
||||
title: 'your leaf',
|
||||
value: 'leaf2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
value: 'parent 1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
return { treeData };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue