@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
230 lines (229 loc) • 8.13 kB
JavaScript
;
const vue = require("vue");
const types = require("./types.js");
const provide = require("./provide.js");
const form = require("./form.js");
const is = require("../_utils/is.js");
const helper = require("../_utils/helper.js");
const log = require("../_utils/log.js");
const _hoisted_1 = { class: "o-form-item-label" };
const _hoisted_2 = { class: "o-form-item-main" };
const _hoisted_3 = { class: "o-form-item-main-wrap" };
const _hoisted_4 = { key: 0 };
const _hoisted_5 = {
key: 1,
class: "o-form-item-extra"
};
const requireSymbol = "*";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OFormItem",
props: types.formItemProps,
setup(__props) {
var _a;
const props = __props;
const formInject = vue.inject(provide.formInjectKey, {});
const align = vue.computed(() => form.getFlexValue(props.labelAlign));
const justify = vue.computed(() => form.getFlexValue(props.labelJustify));
const isRequired = vue.computed(() => {
if (props.required) {
return true;
} else if (is.isArray(props.rules)) {
return props.rules.some((item) => item.required === true);
}
return false;
});
const rules = vue.computed(() => form.groupRules(props.rules, props.required));
const ruleTriggers = vue.computed(() => {
const t = Object.keys(rules.value);
return helper.moveToFirst(t, "change");
});
const fieldResult = vue.ref(null);
const initialVal = ((_a = formInject.model) == null ? void 0 : _a.value) && props.field ? helper.getValueByPath(formInject.model.value, props.field) : void 0;
const runValidate = async (trigger) => {
var _a2;
if (!props.field || !((_a2 = formInject.model) == null ? void 0 : _a2.value)) {
return null;
}
const validators = rules.value[trigger || props.defaultTrigger || ruleTriggers.value[0]];
if (!validators || validators.length === 0) {
return null;
}
const value = helper.getValueByPath(formInject.model.value, props.field);
fieldResult.value = null;
await helper.asyncSome(validators, async (validatorFn) => {
var _a3;
try {
const rlt = await (validatorFn == null ? void 0 : validatorFn(value));
if ((rlt == null ? void 0 : rlt.type) === "danger") {
fieldResult.value = {
type: "danger",
message: rlt.message ? [rlt.message] : []
};
return true;
} else if ((rlt == null ? void 0 : rlt.type) === "warning") {
if (!fieldResult.value) {
fieldResult.value = {
type: "warning",
message: rlt.message ? [rlt.message] : []
};
} else if (rlt.message) {
(_a3 = fieldResult.value.message) == null ? void 0 : _a3.push(rlt.message);
}
return false;
}
} catch (e) {
log.log.error("failed to validate rules");
}
});
return fieldResult.value;
};
const clearValidate = () => {
var _a2;
if (!props.field || !((_a2 = formInject.model) == null ? void 0 : _a2.value)) {
return;
}
fieldResult.value = null;
};
const resetFiled = () => {
var _a2;
if (((_a2 = formInject.model) == null ? void 0 : _a2.value) && props.field) {
helper.setValueByPath(formInject.model.value, props.field, initialVal);
}
};
const fieldHandlers = {
runValidate,
onChange() {
runValidate("change");
},
onFocus() {
runValidate("focus");
},
onInput() {
runValidate("input");
},
onBlur() {
runValidate("blur");
}
};
vue.onMounted(() => {
var _a2;
if (props.field) {
(_a2 = formInject.addFiled) == null ? void 0 : _a2.call(formInject, {
filed: props.field,
validate: runValidate,
clearValidate,
resetFiled
});
}
});
vue.onBeforeUnmount(() => {
var _a2;
if (props.field) {
(_a2 = formInject.removeFiled) == null ? void 0 : _a2.call(formInject, props.field);
}
});
vue.provide(provide.formItemInjectKey, {
fieldHandlers,
fieldResult
});
return (_ctx, _cache) => {
var _a2, _b, _c, _d, _e;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-form-item", [
{
"o-form-item-required": isRequired.value,
"o-form-item-danger": ((_a2 = fieldResult.value) == null ? void 0 : _a2.type) === "danger",
"o-form-item-warning": ((_b = fieldResult.value) == null ? void 0 : _b.type) === "warning"
}
]]),
style: vue.normalizeStyle({
"--form-label-width": props.labelWidth,
"--form-label-align": align.value,
"--form-label-justify": justify.value
})
},
[
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["o-form-require-symbol", {
visible: isRequired.value
}])
},
[
vue.renderSlot(_ctx.$slots, "symbol", {}, () => [
vue.createTextVNode(vue.toDisplayString(requireSymbol))
])
],
2
/* CLASS */
),
vue.renderSlot(_ctx.$slots, "label", {}, () => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(props.label),
1
/* TEXT */
)
])
]),
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "default")
]),
((_c = fieldResult.value) == null ? void 0 : _c.message) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-form-item-message", `type-${fieldResult.value.type}`])
},
[
vue.renderSlot(_ctx.$slots, "message", {
message: (_d = fieldResult.value) == null ? void 0 : _d.message,
type: (_e = fieldResult.value) == null ? void 0 : _e.type
}, () => {
var _a3, _b2, _c2;
return [
!vue.unref(is.isArray)((_a3 = fieldResult.value) == null ? void 0 : _a3.message) ? (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_4,
vue.toDisplayString((_b2 = fieldResult.value) == null ? void 0 : _b2.message),
1
/* TEXT */
)) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList((_c2 = fieldResult.value) == null ? void 0 : _c2.message, (item) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{ key: item },
vue.toDisplayString(item),
1
/* TEXT */
);
}),
128
/* KEYED_FRAGMENT */
))
];
})
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "extra")
])) : vue.createCommentVNode("v-if", true)
])
],
6
/* CLASS, STYLE */
);
};
}
});
module.exports = _sfc_main;