152 lines
4.7 KiB
JavaScript
152 lines
4.7 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.colProps = void 0;
|
|
var _vue = require("vue");
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
var _classNames = _interopRequireDefault(require("../_util/classNames"));
|
|
var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
|
|
var _context = require("./context");
|
|
var _style = require("./style");
|
|
function parseFlex(flex) {
|
|
if (typeof flex === 'number') {
|
|
return `${flex} ${flex} auto`;
|
|
}
|
|
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
|
|
return `0 0 ${flex}`;
|
|
}
|
|
return flex;
|
|
}
|
|
const colProps = () => ({
|
|
span: [String, Number],
|
|
order: [String, Number],
|
|
offset: [String, Number],
|
|
push: [String, Number],
|
|
pull: [String, Number],
|
|
xs: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
sm: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
md: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
lg: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
xl: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
xxl: {
|
|
type: [String, Number, Object],
|
|
default: undefined
|
|
},
|
|
prefixCls: String,
|
|
flex: [String, Number]
|
|
});
|
|
exports.colProps = colProps;
|
|
const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
var _default = exports.default = (0, _vue.defineComponent)({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: 'ACol',
|
|
inheritAttrs: false,
|
|
props: colProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
gutter,
|
|
supportFlexGap,
|
|
wrap
|
|
} = (0, _context.useInjectRow)();
|
|
const {
|
|
prefixCls,
|
|
direction
|
|
} = (0, _useConfigInject.default)('col', props);
|
|
const [wrapSSR, hashId] = (0, _style.useColStyle)(prefixCls);
|
|
const classes = (0, _vue.computed)(() => {
|
|
const {
|
|
span,
|
|
order,
|
|
offset,
|
|
push,
|
|
pull
|
|
} = props;
|
|
const pre = prefixCls.value;
|
|
let sizeClassObj = {};
|
|
sizes.forEach(size => {
|
|
let sizeProps = {};
|
|
const propSize = props[size];
|
|
if (typeof propSize === 'number') {
|
|
sizeProps.span = propSize;
|
|
} else if (typeof propSize === 'object') {
|
|
sizeProps = propSize || {};
|
|
}
|
|
sizeClassObj = (0, _extends2.default)((0, _extends2.default)({}, sizeClassObj), {
|
|
[`${pre}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
|
|
[`${pre}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
|
|
[`${pre}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
|
|
[`${pre}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
|
|
[`${pre}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
|
|
[`${pre}-rtl`]: direction.value === 'rtl'
|
|
});
|
|
});
|
|
return (0, _classNames.default)(pre, {
|
|
[`${pre}-${span}`]: span !== undefined,
|
|
[`${pre}-order-${order}`]: order,
|
|
[`${pre}-offset-${offset}`]: offset,
|
|
[`${pre}-push-${push}`]: push,
|
|
[`${pre}-pull-${pull}`]: pull
|
|
}, sizeClassObj, attrs.class, hashId.value);
|
|
});
|
|
const mergedStyle = (0, _vue.computed)(() => {
|
|
const {
|
|
flex
|
|
} = props;
|
|
const gutterVal = gutter.value;
|
|
const style = {};
|
|
// Horizontal gutter use padding
|
|
if (gutterVal && gutterVal[0] > 0) {
|
|
const horizontalGutter = `${gutterVal[0] / 2}px`;
|
|
style.paddingLeft = horizontalGutter;
|
|
style.paddingRight = horizontalGutter;
|
|
}
|
|
// Vertical gutter use padding when gap not support
|
|
if (gutterVal && gutterVal[1] > 0 && !supportFlexGap.value) {
|
|
const verticalGutter = `${gutterVal[1] / 2}px`;
|
|
style.paddingTop = verticalGutter;
|
|
style.paddingBottom = verticalGutter;
|
|
}
|
|
if (flex) {
|
|
style.flex = parseFlex(flex);
|
|
// Hack for Firefox to avoid size issue
|
|
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
|
|
if (wrap.value === false && !style.minWidth) {
|
|
style.minWidth = 0;
|
|
}
|
|
}
|
|
return style;
|
|
});
|
|
return () => {
|
|
var _a;
|
|
return wrapSSR((0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
|
|
"class": classes.value,
|
|
"style": [mergedStyle.value, attrs.style]
|
|
}), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]));
|
|
};
|
|
}
|
|
}); |