vue-admin-core
Version:
A Component Library for Vue 3
477 lines (474 loc) • 15.6 kB
JavaScript
import { ref, watch, onBeforeUnmount, h, defineComponent, provide } from 'vue';
import { isVoidField } from '@formily/core';
import { connect, mapProps } from '@formily/vue';
import { InfoFilled, CircleClose, CircleCheck, Warning } from '@element-plus/icons-vue';
import '../../form-layout/index.mjs';
import '../../__builtins__/index.mjs';
import { ElIcon, ElPopover, ElTooltip } from 'element-plus';
import ResizeObserver from 'resize-observer-polyfill';
import '../../form-grid/index.mjs';
import { useFormLayout, FormLayoutShallowContext } from '../../form-layout/src/index.mjs';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { useGridColumn } from '../../form-grid/src/index.mjs';
import { getStyleNumber } from '../../__builtins__/shared/style.mjs';
import { resolveComponent } from '../../__builtins__/shared/resolve-component.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';
const useOverflow = (containerRef) => {
const overflow = ref(false);
let resizeObserver;
const cleanup = () => {
if (resizeObserver && containerRef.value) {
resizeObserver.unobserve(containerRef.value);
resizeObserver = null;
}
};
const observer = () => {
if (!containerRef.value)
return;
const container = containerRef.value;
const content = container.querySelector("label");
const containerWidth = container.getBoundingClientRect().width;
const contentWidth = (content == null ? void 0 : content.getBoundingClientRect().width) || 0;
if (containerWidth !== 0) {
if (contentWidth > containerWidth) {
overflow.value = true;
} else {
overflow.value = false;
}
}
};
const stopWatch = watch(
() => containerRef.value,
(el) => {
cleanup();
if (el) {
resizeObserver = new ResizeObserver(observer);
resizeObserver.observe(el);
}
},
{ immediate: true, flush: "post" }
);
onBeforeUnmount(() => {
cleanup();
stopWatch();
});
return overflow;
};
const ICON_MAP = {
info: () => h(ElIcon, {}, { default: () => h(InfoFilled, {}, {}) }),
error: () => h(ElIcon, {}, { default: () => h(CircleClose, {}, {}) }),
success: () => h(ElIcon, {}, { default: () => h(CircleCheck, {}, {}) }),
warning: () => h(ElIcon, {}, { default: () => h(Warning, {}, {}) })
};
const FormBaseItem = defineComponent({
name: "FormItem",
inheritAttrs: false,
props: {
className: {},
required: {},
label: {},
colon: {},
layout: {},
tooltip: {},
labelStyle: {},
labelAlign: {},
labelWrap: {},
labelWidth: {},
wrapperWidth: {},
labelCol: {},
wrapperCol: {},
wrapperAlign: {},
wrapperWrap: {},
wrapperStyle: {},
fullness: {},
addonBefore: {},
addonAfter: {},
size: {},
extra: {},
feedbackText: {},
feedbackLayout: {},
tooltipLayout: {},
feedbackStatus: {},
feedbackIcon: {},
hasIcon: {},
asterisk: {},
gridSpan: {},
bordered: { default: true },
inset: { default: false }
},
setup(props, { slots }) {
const active = ref(false);
const deepLayoutRef = useFormLayout();
const prefixCls = `${stylePrefix}-form-item`;
const containerRef = ref();
const overflow = useOverflow(containerRef);
provide(FormLayoutShallowContext, ref({}));
return () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
const gridColumn = useGridColumn(props.gridSpan);
const gridStyles = {};
if (gridColumn) {
gridStyles.gridColumn = gridColumn;
}
const deepLayout = deepLayoutRef.value;
const {
label,
colon = (_a = deepLayout.colon) != null ? _a : true,
layout = (_b = deepLayout.layout) != null ? _b : "horizontal",
// TODO 拿不到 x-decorator-props 属性
tooltip,
labelStyle = {},
labelWrap = (_c = deepLayout.labelWrap) != null ? _c : false,
labelWidth = deepLayout.labelWidth,
wrapperWidth = deepLayout.wrapperWidth,
labelCol = deepLayout.labelCol,
wrapperCol = deepLayout.wrapperCol,
wrapperAlign = (_d = deepLayout.wrapperAlign) != null ? _d : "left",
wrapperWrap = deepLayout.wrapperWrap,
wrapperStyle = {},
fullness = deepLayout.fullness,
addonBefore,
addonAfter,
size = deepLayout.size,
extra,
feedbackText,
feedbackLayout = (_e = deepLayout.feedbackLayout) != null ? _e : "loose",
tooltipLayout = (_f = deepLayout.tooltipLayout) != null ? _f : "icon",
feedbackStatus,
feedbackIcon,
hasIcon,
asterisk,
bordered = deepLayout.bordered,
inset = deepLayout.inset
} = props;
const labelAlign = deepLayout.layout === "vertical" ? (_h = (_g = props.labelAlign) != null ? _g : deepLayout.labelAlign) != null ? _h : "left" : (_j = (_i = props.labelAlign) != null ? _i : deepLayout.labelAlign) != null ? _j : "right";
let enableCol = false;
if (labelWidth || wrapperWidth) {
if (labelWidth) {
labelStyle.width = labelWidth === "auto" ? void 0 : getStyleNumber(labelWidth);
labelStyle.maxWidth = labelWidth === "auto" ? void 0 : getStyleNumber(labelWidth);
}
if (wrapperWidth) {
wrapperStyle.width = wrapperWidth === "auto" ? void 0 : getStyleNumber(wrapperWidth);
wrapperStyle.maxWidth = wrapperWidth === "auto" ? void 0 : getStyleNumber(wrapperWidth);
}
} else if (labelCol || wrapperCol) {
enableCol = true;
}
const formatChildren = feedbackLayout === "popover" ? h(
ElPopover,
{
disabled: !feedbackText,
placement: "top",
popperStyle: { width: "auto", maxWidth: "80%" }
},
{
reference: () => h("div", {}, { default: () => {
var _a2;
return (_a2 = slots.default) == null ? void 0 : _a2.call(slots);
} }),
default: () => [
h(
"div",
{
class: {
[`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
[`${prefixCls}-help`]: true
}
},
{
default: () => [
feedbackStatus && ["error", "success", "warning"].includes(feedbackStatus) ? ICON_MAP[feedbackStatus]() : "",
resolveComponent(feedbackText)
]
}
)
]
}
) : (_k = slots.default) == null ? void 0 : _k.call(slots);
const renderLabelText = () => {
const labelChildren = h(
"div",
{
class: `${prefixCls}-label-content`,
ref: containerRef
},
{
default: () => [
asterisk && h("span", { class: `${prefixCls}-asterisk` }, { default: () => ["*"] }),
h("label", {}, { default: () => [resolveComponent(label)] })
]
}
);
const isTextTooltip = tooltip && tooltipLayout === "text";
if (isTextTooltip || overflow.value) {
return h(
ElTooltip,
{
placement: "top"
},
{
default: () => [labelChildren],
content: () => h(
"div",
{},
{
default: () => [
overflow.value && resolveComponent(label),
isTextTooltip && resolveComponent(tooltip)
]
}
)
}
);
} else {
return labelChildren;
}
};
const renderTooltipIcon = () => {
if (tooltip && tooltipLayout === "icon") {
return h(
"span",
{
class: `${prefixCls}-label-tooltip`
},
{
default: () => [
h(
ElTooltip,
{
props: {
placement: "top"
}
},
{
default: ICON_MAP.info,
content: () => h(
"div",
{
class: `${prefixCls}-label-tooltip-content`
},
{
default: () => [resolveComponent(tooltip)]
}
)
}
)
]
}
);
}
};
const renderLabel = label && h(
"div",
{
class: {
[`${prefixCls}-label`]: true,
[`${prefixCls}-label-tooltip`]: tooltip && tooltipLayout === "text" || overflow.value,
[`${prefixCls}-item-col-${labelCol}`]: enableCol && !!labelCol
},
style: labelStyle
},
{
default: () => [
// label content
renderLabelText(),
// label tooltip
renderTooltipIcon(),
// label colon
label && h(
"span",
{
class: `${prefixCls}-colon`
},
{ default: () => [colon ? ":" : ""] }
)
]
}
);
const renderFeedback = !!feedbackText && feedbackLayout !== "popover" && feedbackLayout !== "none" && h(
"div",
{
class: {
[`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
[`${prefixCls}-help`]: true,
[`${prefixCls}-help-enter`]: true,
[`${prefixCls}-help-enter-active`]: true
}
},
{ default: () => [resolveComponent(feedbackText)] }
);
const renderExtra = extra && h("div", { class: `${prefixCls}-extra` }, { default: () => [extra] });
const renderContent = h(
"div",
{
class: {
[`${prefixCls}-control`]: true,
[`${prefixCls}-item-col-${wrapperCol}`]: enableCol && !!wrapperCol
}
},
{
default: () => [
h(
"div",
{ class: `${prefixCls}-control-content` },
{
default: () => [
addonBefore && h(
"div",
{ class: `${prefixCls}-addon-before` },
{
default: () => [resolveComponent(addonBefore)]
}
),
h(
"div",
{
class: {
[`${prefixCls}-control-content-component`]: true,
[`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
[`${prefixCls}-control-content-component-has-icon`]: !!hasIcon
},
style: wrapperStyle
},
{
default: () => [
formatChildren,
feedbackIcon && h(
"div",
{ class: `${prefixCls}-feedback-icon` },
{
default: () => [
typeof feedbackIcon === "string" ? h("i", { class: feedbackIcon }, {}) : resolveComponent(feedbackIcon)
]
}
)
]
}
),
addonAfter && h(
"div",
{ class: `${prefixCls}-addon-after` },
{
default: () => [resolveComponent(addonAfter)]
}
)
]
}
),
renderFeedback,
renderExtra
]
}
);
return h(
"div",
{
style: {
...gridStyles
},
class: {
[`${prefixCls}`]: true,
[`${prefixCls}-layout-${layout}`]: true,
[`${prefixCls}-${feedbackStatus}`]: !!feedbackStatus,
[`${prefixCls}-feedback-has-text`]: !!feedbackText,
[`${prefixCls}-size-${size}`]: !!size,
[`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
[`${prefixCls}-fullness`]: !!fullness || !!inset || !!feedbackIcon,
[`${prefixCls}-inset`]: !!inset,
[`${prefixCls}-active`]: active.value,
[`${prefixCls}-inset-active`]: !!inset && active.value,
[`${prefixCls}-label-align-${labelAlign}`]: true,
[`${prefixCls}-control-align-${wrapperAlign}`]: true,
[`${prefixCls}-label-wrap`]: !!labelWrap,
[`${prefixCls}-control-wrap`]: !!wrapperWrap,
[`${prefixCls}-bordered-none`]: bordered === false || !!inset || !!feedbackIcon,
[`${props.className}`]: !!props.className
},
on: {
"!focus": () => {
if (feedbackIcon || inset) {
active.value = true;
}
},
"!blur": () => {
if (feedbackIcon || inset) {
active.value = false;
}
}
}
},
{
default: () => [renderLabel, renderContent]
}
);
};
}
});
const Item = connect(
FormBaseItem,
mapProps(
{ validateStatus: true, title: "label", required: true },
(props, field) => {
if (isVoidField(field))
return props;
if (!field)
return props;
const takeMessage = () => {
const split = (messages) => {
return messages.reduce((buf, text, index) => {
if (!text)
return buf;
return index < messages.length - 1 ? buf.concat([text, ", "]) : buf.concat([text]);
}, []);
};
if (field.validating)
return;
if (props.feedbackText)
return props.feedbackText;
if (field.selfErrors.length)
return split(field.selfErrors);
if (field.selfWarnings.length)
return split(field.selfWarnings);
if (field.selfSuccesses.length)
return split(field.selfSuccesses);
};
const errorMessages = takeMessage();
return {
feedbackText: Array.isArray(errorMessages) ? errorMessages.join(", ") : errorMessages,
extra: props.extra || field.description
};
},
(props, field) => {
var _a;
if (isVoidField(field))
return props;
if (!field)
return props;
return {
feedbackStatus: field.validateStatus === "validating" ? "pending" : Array.isArray(field.decorator) && ((_a = field.decorator[1]) == null ? void 0 : _a.feedbackStatus) || field.validateStatus
};
},
(props, field) => {
if (isVoidField(field))
return props;
if (!field)
return props;
let asterisk = false;
if (field.required && field.pattern !== "readPretty") {
asterisk = true;
}
if ("asterisk" in props) {
asterisk = props.asterisk;
}
return {
asterisk
};
}
)
);
const FormItem = composeExport(Item, {
BaseItem: FormBaseItem
});
export { FormBaseItem, FormItem, FormItem as default };
//# sourceMappingURL=index.mjs.map