zhbaor
3aa7e23984
All checks were successful
ci/woodpecker/push/check_format Pipeline was successful
4763 lines
149 KiB
JavaScript
4763 lines
149 KiB
JavaScript
import { inject, getCurrentInstance, watch, onBeforeUnmount, replaceable, h, derived, createTheme, buttonLight, changeColor, createInjectionKey, cB, cM, c, defineComponent, useConfig, useTheme, ref, keysOf, provide, commonVariables as commonVariables$1, cE, computed, formatLength, Transition, resolveWrappedSlot, toRef, createId, formItemInjectionKey, onMounted, createKey, useThemeClass, warn, NBaseIcon, InfoIcon, WarningIcon, ErrorIcon$1 as ErrorIcon, SuccessIcon, fadeInHeightExpandTransition, iconSwitchTransition, throwError, NFadeInExpandTransition, isBrowser, error, Button, NIconSwitchTransition, useMemo, watchEffect, resolveSlot, Teleport, Fragment, useFormItem, useMergedState, nextTick, call, _export_sfc, mergeModels, storeToRefs, usePlanStore, useModel, createBlock, openBlock, withCtx, createVNode, unref, SlickList, SlickItem } from "./index.js";
|
|
import { get } from "./Tooltip.js";
|
|
import { __unplugin_components_4, DownloadIcon, NImageGroup } from "./Image.js";
|
|
import { EyeIcon } from "./Checkbox.js";
|
|
import { download } from "./download.js";
|
|
import { AddIcon } from "./Add.js";
|
|
import { render_op_label, match, render_op_tag } from "./common.js";
|
|
import { __unplugin_components_5 } from "./Select.js";
|
|
function useInjectionInstanceCollection(injectionName, collectionKey, registerKeyRef) {
|
|
var _a;
|
|
const injection = inject(injectionName, null);
|
|
if (injection === null) return;
|
|
const vm = (_a = getCurrentInstance()) === null || _a === void 0 ? void 0 : _a.proxy;
|
|
watch(registerKeyRef, registerInstance);
|
|
registerInstance(registerKeyRef.value);
|
|
onBeforeUnmount(() => {
|
|
registerInstance(void 0, registerKeyRef.value);
|
|
});
|
|
function registerInstance(key, oldKey) {
|
|
if (!injection) return;
|
|
const collection = injection[collectionKey];
|
|
if (oldKey !== void 0) removeInstance(collection, oldKey);
|
|
if (key !== void 0) addInstance(collection, key);
|
|
}
|
|
function removeInstance(collection, key) {
|
|
if (!collection[key]) collection[key] = [];
|
|
collection[key].splice(collection[key].findIndex((instance) => instance === vm), 1);
|
|
}
|
|
function addInstance(collection, key) {
|
|
if (!collection[key]) collection[key] = [];
|
|
if (!~collection[key].findIndex((instance) => instance === vm)) {
|
|
collection[key].push(vm);
|
|
}
|
|
}
|
|
}
|
|
const AttachIcon = replaceable("attach", () => h("svg", {
|
|
viewBox: "0 0 16 16",
|
|
version: "1.1",
|
|
xmlns: "http://www.w3.org/2000/svg"
|
|
}, h("g", {
|
|
stroke: "none",
|
|
"stroke-width": "1",
|
|
fill: "none",
|
|
"fill-rule": "evenodd"
|
|
}, h("g", {
|
|
fill: "currentColor",
|
|
"fill-rule": "nonzero"
|
|
}, h("path", {
|
|
d: "M3.25735931,8.70710678 L7.85355339,4.1109127 C8.82986412,3.13460197 10.4127766,3.13460197 11.3890873,4.1109127 C12.365398,5.08722343 12.365398,6.67013588 11.3890873,7.64644661 L6.08578644,12.9497475 C5.69526215,13.3402718 5.06209717,13.3402718 4.67157288,12.9497475 C4.28104858,12.5592232 4.28104858,11.9260582 4.67157288,11.5355339 L9.97487373,6.23223305 C10.1701359,6.0369709 10.1701359,5.72038841 9.97487373,5.52512627 C9.77961159,5.32986412 9.4630291,5.32986412 9.26776695,5.52512627 L3.96446609,10.8284271 C3.18341751,11.6094757 3.18341751,12.8758057 3.96446609,13.6568542 C4.74551468,14.4379028 6.01184464,14.4379028 6.79289322,13.6568542 L12.0961941,8.35355339 C13.4630291,6.98671837 13.4630291,4.77064094 12.0961941,3.40380592 C10.7293591,2.0369709 8.51328163,2.0369709 7.14644661,3.40380592 L2.55025253,8 C2.35499039,8.19526215 2.35499039,8.51184464 2.55025253,8.70710678 C2.74551468,8.90236893 3.06209717,8.90236893 3.25735931,8.70710678 Z"
|
|
})))));
|
|
const CancelIcon = replaceable("cancel", () => h("svg", {
|
|
viewBox: "0 0 16 16",
|
|
version: "1.1",
|
|
xmlns: "http://www.w3.org/2000/svg"
|
|
}, h("g", {
|
|
stroke: "none",
|
|
"stroke-width": "1",
|
|
fill: "none",
|
|
"fill-rule": "evenodd"
|
|
}, h("g", {
|
|
fill: "currentColor",
|
|
"fill-rule": "nonzero"
|
|
}, h("path", {
|
|
d: "M2.58859116,2.7156945 L2.64644661,2.64644661 C2.82001296,2.47288026 3.08943736,2.45359511 3.2843055,2.58859116 L3.35355339,2.64644661 L8,7.293 L12.6464466,2.64644661 C12.8417088,2.45118446 13.1582912,2.45118446 13.3535534,2.64644661 C13.5488155,2.84170876 13.5488155,3.15829124 13.3535534,3.35355339 L8.707,8 L13.3535534,12.6464466 C13.5271197,12.820013 13.5464049,13.0894374 13.4114088,13.2843055 L13.3535534,13.3535534 C13.179987,13.5271197 12.9105626,13.5464049 12.7156945,13.4114088 L12.6464466,13.3535534 L8,8.707 L3.35355339,13.3535534 C3.15829124,13.5488155 2.84170876,13.5488155 2.64644661,13.3535534 C2.45118446,13.1582912 2.45118446,12.8417088 2.64644661,12.6464466 L7.293,8 L2.64644661,3.35355339 C2.47288026,3.17998704 2.45359511,2.91056264 2.58859116,2.7156945 L2.64644661,2.64644661 L2.58859116,2.7156945 Z"
|
|
})))));
|
|
const RetryIcon = replaceable("retry", () => h("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 512 512"
|
|
}, h("path", {
|
|
d: "M320,146s24.36-12-64-12A160,160,0,1,0,416,294",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 32px;"
|
|
}), h("polyline", {
|
|
points: "256 58 336 138 256 218",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"
|
|
})));
|
|
const TrashIcon = replaceable("trash", () => h("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 512 512"
|
|
}, h("path", {
|
|
d: "M432,144,403.33,419.74A32,32,0,0,1,371.55,448H140.46a32,32,0,0,1-31.78-28.26L80,144",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"
|
|
}), h("rect", {
|
|
x: "32",
|
|
y: "64",
|
|
width: "448",
|
|
height: "80",
|
|
rx: "16",
|
|
ry: "16",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"
|
|
}), h("line", {
|
|
x1: "312",
|
|
y1: "240",
|
|
x2: "200",
|
|
y2: "352",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"
|
|
}), h("line", {
|
|
x1: "312",
|
|
y1: "352",
|
|
x2: "200",
|
|
y2: "240",
|
|
style: "fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"
|
|
})));
|
|
const commonVariables = {
|
|
feedbackPadding: "4px 0 0 2px",
|
|
feedbackHeightSmall: "24px",
|
|
feedbackHeightMedium: "24px",
|
|
feedbackHeightLarge: "26px",
|
|
feedbackFontSizeSmall: "13px",
|
|
feedbackFontSizeMedium: "14px",
|
|
feedbackFontSizeLarge: "14px",
|
|
labelFontSizeLeftSmall: "14px",
|
|
labelFontSizeLeftMedium: "14px",
|
|
labelFontSizeLeftLarge: "15px",
|
|
labelFontSizeTopSmall: "13px",
|
|
labelFontSizeTopMedium: "14px",
|
|
labelFontSizeTopLarge: "14px",
|
|
labelHeightSmall: "24px",
|
|
labelHeightMedium: "26px",
|
|
labelHeightLarge: "28px",
|
|
labelPaddingVertical: "0 0 6px 2px",
|
|
labelPaddingHorizontal: "0 12px 0 0",
|
|
labelTextAlignVertical: "left",
|
|
labelTextAlignHorizontal: "right",
|
|
labelFontWeight: "400"
|
|
};
|
|
function self$2(vars) {
|
|
const {
|
|
heightSmall,
|
|
heightMedium,
|
|
heightLarge,
|
|
textColor1,
|
|
errorColor,
|
|
warningColor,
|
|
lineHeight,
|
|
textColor3
|
|
} = vars;
|
|
return Object.assign(Object.assign({}, commonVariables), {
|
|
blankHeightSmall: heightSmall,
|
|
blankHeightMedium: heightMedium,
|
|
blankHeightLarge: heightLarge,
|
|
lineHeight,
|
|
labelTextColor: textColor1,
|
|
asteriskColor: errorColor,
|
|
feedbackTextColorError: errorColor,
|
|
feedbackTextColorWarning: warningColor,
|
|
feedbackTextColor: textColor3
|
|
});
|
|
}
|
|
const formLight = {
|
|
common: derived,
|
|
self: self$2
|
|
};
|
|
function self$1(vars) {
|
|
const {
|
|
infoColor,
|
|
successColor,
|
|
warningColor,
|
|
errorColor,
|
|
textColor2,
|
|
progressRailColor,
|
|
fontSize,
|
|
fontWeight
|
|
} = vars;
|
|
return {
|
|
fontSize,
|
|
fontSizeCircle: "28px",
|
|
fontWeightCircle: fontWeight,
|
|
railColor: progressRailColor,
|
|
railHeight: "8px",
|
|
iconSizeCircle: "36px",
|
|
iconSizeLine: "18px",
|
|
iconColor: infoColor,
|
|
iconColorInfo: infoColor,
|
|
iconColorSuccess: successColor,
|
|
iconColorWarning: warningColor,
|
|
iconColorError: errorColor,
|
|
textColorCircle: textColor2,
|
|
textColorLineInner: "rgb(255, 255, 255)",
|
|
textColorLineOuter: textColor2,
|
|
fillColor: infoColor,
|
|
fillColorInfo: infoColor,
|
|
fillColorSuccess: successColor,
|
|
fillColorWarning: warningColor,
|
|
fillColorError: errorColor,
|
|
lineBgProcessing: "linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%)"
|
|
};
|
|
}
|
|
const progressLight = {
|
|
name: "Progress",
|
|
common: derived,
|
|
self: self$1
|
|
};
|
|
function self(vars) {
|
|
const {
|
|
iconColor,
|
|
primaryColor,
|
|
errorColor,
|
|
textColor2,
|
|
successColor,
|
|
opacityDisabled,
|
|
actionColor,
|
|
borderColor,
|
|
hoverColor,
|
|
lineHeight,
|
|
borderRadius,
|
|
fontSize
|
|
} = vars;
|
|
return {
|
|
fontSize,
|
|
lineHeight,
|
|
borderRadius,
|
|
draggerColor: actionColor,
|
|
draggerBorder: `1px dashed ${borderColor}`,
|
|
draggerBorderHover: `1px dashed ${primaryColor}`,
|
|
itemColorHover: hoverColor,
|
|
itemColorHoverError: changeColor(errorColor, {
|
|
alpha: 0.06
|
|
}),
|
|
itemTextColor: textColor2,
|
|
itemTextColorError: errorColor,
|
|
itemTextColorSuccess: successColor,
|
|
itemIconColor: iconColor,
|
|
itemDisabledOpacity: opacityDisabled,
|
|
itemBorderImageCardError: `1px solid ${errorColor}`,
|
|
itemBorderImageCard: `1px solid ${borderColor}`
|
|
};
|
|
}
|
|
const uploadLight = createTheme({
|
|
name: "Upload",
|
|
common: derived,
|
|
peers: {
|
|
Button: buttonLight,
|
|
Progress: progressLight
|
|
},
|
|
self
|
|
});
|
|
const formInjectionKey = createInjectionKey("n-form");
|
|
const formItemInstsInjectionKey = createInjectionKey("n-form-item-insts");
|
|
const style$3 = cB("form", [cM("inline", `
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
align-content: space-around;
|
|
`, [cB("form-item", {
|
|
width: "auto",
|
|
marginRight: "18px"
|
|
}, [c("&:last-child", {
|
|
marginRight: 0
|
|
})])])]);
|
|
var __awaiter$4 = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
const formProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
inline: Boolean,
|
|
labelWidth: [Number, String],
|
|
labelAlign: String,
|
|
labelPlacement: {
|
|
type: String,
|
|
default: "top"
|
|
},
|
|
model: {
|
|
type: Object,
|
|
default: () => {
|
|
}
|
|
},
|
|
rules: Object,
|
|
disabled: Boolean,
|
|
size: String,
|
|
showRequireMark: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
requireMarkPlacement: String,
|
|
showFeedback: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
onSubmit: {
|
|
type: Function,
|
|
default: (e) => {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
showLabel: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
validateMessages: Object
|
|
});
|
|
const __unplugin_components_17 = defineComponent({
|
|
name: "Form",
|
|
props: formProps,
|
|
setup(props) {
|
|
const {
|
|
mergedClsPrefixRef
|
|
} = useConfig(props);
|
|
useTheme("Form", "-form", style$3, formLight, props, mergedClsPrefixRef);
|
|
const formItems = {};
|
|
const maxChildLabelWidthRef = ref(void 0);
|
|
const deriveMaxChildLabelWidth = (currentWidth) => {
|
|
const currentMaxChildLabelWidth = maxChildLabelWidthRef.value;
|
|
if (currentMaxChildLabelWidth === void 0 || currentWidth >= currentMaxChildLabelWidth) {
|
|
maxChildLabelWidthRef.value = currentWidth;
|
|
}
|
|
};
|
|
function validate(validateCallback_1) {
|
|
return __awaiter$4(this, arguments, void 0, function* (validateCallback, shouldRuleBeApplied = () => true) {
|
|
return yield new Promise((resolve, reject) => {
|
|
const formItemValidationPromises = [];
|
|
for (const key of keysOf(formItems)) {
|
|
const formItemInstances = formItems[key];
|
|
for (const formItemInstance of formItemInstances) {
|
|
if (formItemInstance.path) {
|
|
formItemValidationPromises.push(formItemInstance.internalValidate(null, shouldRuleBeApplied));
|
|
}
|
|
}
|
|
}
|
|
void Promise.all(formItemValidationPromises).then((results) => {
|
|
const formInvalid = results.some((result) => !result.valid);
|
|
const errors = [];
|
|
const warnings = [];
|
|
results.forEach((result) => {
|
|
var _a, _b;
|
|
if ((_a = result.errors) === null || _a === void 0 ? void 0 : _a.length) {
|
|
errors.push(result.errors);
|
|
}
|
|
if ((_b = result.warnings) === null || _b === void 0 ? void 0 : _b.length) {
|
|
warnings.push(result.warnings);
|
|
}
|
|
});
|
|
if (validateCallback) {
|
|
validateCallback(errors.length ? errors : void 0, {
|
|
warnings: warnings.length ? warnings : void 0
|
|
});
|
|
}
|
|
if (formInvalid) {
|
|
reject(errors.length ? errors : void 0);
|
|
} else {
|
|
resolve({
|
|
warnings: warnings.length ? warnings : void 0
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
function restoreValidation() {
|
|
for (const key of keysOf(formItems)) {
|
|
const formItemInstances = formItems[key];
|
|
for (const formItemInstance of formItemInstances) {
|
|
formItemInstance.restoreValidation();
|
|
}
|
|
}
|
|
}
|
|
provide(formInjectionKey, {
|
|
props,
|
|
maxChildLabelWidthRef,
|
|
deriveMaxChildLabelWidth
|
|
});
|
|
provide(formItemInstsInjectionKey, {
|
|
formItems
|
|
});
|
|
const formExposedMethod = {
|
|
validate,
|
|
restoreValidation
|
|
};
|
|
return Object.assign(formExposedMethod, {
|
|
mergedClsPrefix: mergedClsPrefixRef
|
|
});
|
|
},
|
|
render() {
|
|
const {
|
|
mergedClsPrefix
|
|
} = this;
|
|
return h("form", {
|
|
class: [`${mergedClsPrefix}-form`, this.inline && `${mergedClsPrefix}-form--inline`],
|
|
onSubmit: this.onSubmit
|
|
}, this.$slots);
|
|
}
|
|
});
|
|
function _extends() {
|
|
_extends = Object.assign ? Object.assign.bind() : function(target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
for (var key in source) {
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
return target;
|
|
};
|
|
return _extends.apply(this, arguments);
|
|
}
|
|
function _inheritsLoose(subClass, superClass) {
|
|
subClass.prototype = Object.create(superClass.prototype);
|
|
subClass.prototype.constructor = subClass;
|
|
_setPrototypeOf(subClass, superClass);
|
|
}
|
|
function _getPrototypeOf(o) {
|
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
|
|
return o2.__proto__ || Object.getPrototypeOf(o2);
|
|
};
|
|
return _getPrototypeOf(o);
|
|
}
|
|
function _setPrototypeOf(o, p) {
|
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
|
|
o2.__proto__ = p2;
|
|
return o2;
|
|
};
|
|
return _setPrototypeOf(o, p);
|
|
}
|
|
function _isNativeReflectConstruct() {
|
|
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
|
if (Reflect.construct.sham) return false;
|
|
if (typeof Proxy === "function") return true;
|
|
try {
|
|
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
|
|
}));
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
function _construct(Parent, args, Class) {
|
|
if (_isNativeReflectConstruct()) {
|
|
_construct = Reflect.construct.bind();
|
|
} else {
|
|
_construct = function _construct2(Parent2, args2, Class2) {
|
|
var a = [null];
|
|
a.push.apply(a, args2);
|
|
var Constructor = Function.bind.apply(Parent2, a);
|
|
var instance = new Constructor();
|
|
if (Class2) _setPrototypeOf(instance, Class2.prototype);
|
|
return instance;
|
|
};
|
|
}
|
|
return _construct.apply(null, arguments);
|
|
}
|
|
function _isNativeFunction(fn) {
|
|
return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
|
}
|
|
function _wrapNativeSuper(Class) {
|
|
var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
|
|
_wrapNativeSuper = function _wrapNativeSuper2(Class2) {
|
|
if (Class2 === null || !_isNativeFunction(Class2)) return Class2;
|
|
if (typeof Class2 !== "function") {
|
|
throw new TypeError("Super expression must either be null or a function");
|
|
}
|
|
if (typeof _cache !== "undefined") {
|
|
if (_cache.has(Class2)) return _cache.get(Class2);
|
|
_cache.set(Class2, Wrapper);
|
|
}
|
|
function Wrapper() {
|
|
return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
|
|
}
|
|
Wrapper.prototype = Object.create(Class2.prototype, {
|
|
constructor: {
|
|
value: Wrapper,
|
|
enumerable: false,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
return _setPrototypeOf(Wrapper, Class2);
|
|
};
|
|
return _wrapNativeSuper(Class);
|
|
}
|
|
var formatRegExp = /%[sdj%]/g;
|
|
var warning = function warning2() {
|
|
};
|
|
function convertFieldsError(errors) {
|
|
if (!errors || !errors.length) return null;
|
|
var fields = {};
|
|
errors.forEach(function(error2) {
|
|
var field = error2.field;
|
|
fields[field] = fields[field] || [];
|
|
fields[field].push(error2);
|
|
});
|
|
return fields;
|
|
}
|
|
function format(template) {
|
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
args[_key - 1] = arguments[_key];
|
|
}
|
|
var i = 0;
|
|
var len = args.length;
|
|
if (typeof template === "function") {
|
|
return template.apply(null, args);
|
|
}
|
|
if (typeof template === "string") {
|
|
var str = template.replace(formatRegExp, function(x) {
|
|
if (x === "%%") {
|
|
return "%";
|
|
}
|
|
if (i >= len) {
|
|
return x;
|
|
}
|
|
switch (x) {
|
|
case "%s":
|
|
return String(args[i++]);
|
|
case "%d":
|
|
return Number(args[i++]);
|
|
case "%j":
|
|
try {
|
|
return JSON.stringify(args[i++]);
|
|
} catch (_) {
|
|
return "[Circular]";
|
|
}
|
|
break;
|
|
default:
|
|
return x;
|
|
}
|
|
});
|
|
return str;
|
|
}
|
|
return template;
|
|
}
|
|
function isNativeStringType(type4) {
|
|
return type4 === "string" || type4 === "url" || type4 === "hex" || type4 === "email" || type4 === "date" || type4 === "pattern";
|
|
}
|
|
function isEmptyValue(value, type4) {
|
|
if (value === void 0 || value === null) {
|
|
return true;
|
|
}
|
|
if (type4 === "array" && Array.isArray(value) && !value.length) {
|
|
return true;
|
|
}
|
|
if (isNativeStringType(type4) && typeof value === "string" && !value) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
function asyncParallelArray(arr, func, callback) {
|
|
var results = [];
|
|
var total = 0;
|
|
var arrLength = arr.length;
|
|
function count(errors) {
|
|
results.push.apply(results, errors || []);
|
|
total++;
|
|
if (total === arrLength) {
|
|
callback(results);
|
|
}
|
|
}
|
|
arr.forEach(function(a) {
|
|
func(a, count);
|
|
});
|
|
}
|
|
function asyncSerialArray(arr, func, callback) {
|
|
var index = 0;
|
|
var arrLength = arr.length;
|
|
function next(errors) {
|
|
if (errors && errors.length) {
|
|
callback(errors);
|
|
return;
|
|
}
|
|
var original = index;
|
|
index = index + 1;
|
|
if (original < arrLength) {
|
|
func(arr[original], next);
|
|
} else {
|
|
callback([]);
|
|
}
|
|
}
|
|
next([]);
|
|
}
|
|
function flattenObjArr(objArr) {
|
|
var ret = [];
|
|
Object.keys(objArr).forEach(function(k) {
|
|
ret.push.apply(ret, objArr[k] || []);
|
|
});
|
|
return ret;
|
|
}
|
|
var AsyncValidationError = /* @__PURE__ */ function(_Error) {
|
|
_inheritsLoose(AsyncValidationError2, _Error);
|
|
function AsyncValidationError2(errors, fields) {
|
|
var _this;
|
|
_this = _Error.call(this, "Async Validation Error") || this;
|
|
_this.errors = errors;
|
|
_this.fields = fields;
|
|
return _this;
|
|
}
|
|
return AsyncValidationError2;
|
|
}(/* @__PURE__ */ _wrapNativeSuper(Error));
|
|
function asyncMap(objArr, option, func, callback, source) {
|
|
if (option.first) {
|
|
var _pending = new Promise(function(resolve, reject) {
|
|
var next = function next2(errors) {
|
|
callback(errors);
|
|
return errors.length ? reject(new AsyncValidationError(errors, convertFieldsError(errors))) : resolve(source);
|
|
};
|
|
var flattenArr = flattenObjArr(objArr);
|
|
asyncSerialArray(flattenArr, func, next);
|
|
});
|
|
_pending["catch"](function(e) {
|
|
return e;
|
|
});
|
|
return _pending;
|
|
}
|
|
var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || [];
|
|
var objArrKeys = Object.keys(objArr);
|
|
var objArrLength = objArrKeys.length;
|
|
var total = 0;
|
|
var results = [];
|
|
var pending = new Promise(function(resolve, reject) {
|
|
var next = function next2(errors) {
|
|
results.push.apply(results, errors);
|
|
total++;
|
|
if (total === objArrLength) {
|
|
callback(results);
|
|
return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source);
|
|
}
|
|
};
|
|
if (!objArrKeys.length) {
|
|
callback(results);
|
|
resolve(source);
|
|
}
|
|
objArrKeys.forEach(function(key) {
|
|
var arr = objArr[key];
|
|
if (firstFields.indexOf(key) !== -1) {
|
|
asyncSerialArray(arr, func, next);
|
|
} else {
|
|
asyncParallelArray(arr, func, next);
|
|
}
|
|
});
|
|
});
|
|
pending["catch"](function(e) {
|
|
return e;
|
|
});
|
|
return pending;
|
|
}
|
|
function isErrorObj(obj) {
|
|
return !!(obj && obj.message !== void 0);
|
|
}
|
|
function getValue(value, path) {
|
|
var v = value;
|
|
for (var i = 0; i < path.length; i++) {
|
|
if (v == void 0) {
|
|
return v;
|
|
}
|
|
v = v[path[i]];
|
|
}
|
|
return v;
|
|
}
|
|
function complementError(rule, source) {
|
|
return function(oe) {
|
|
var fieldValue;
|
|
if (rule.fullFields) {
|
|
fieldValue = getValue(source, rule.fullFields);
|
|
} else {
|
|
fieldValue = source[oe.field || rule.fullField];
|
|
}
|
|
if (isErrorObj(oe)) {
|
|
oe.field = oe.field || rule.fullField;
|
|
oe.fieldValue = fieldValue;
|
|
return oe;
|
|
}
|
|
return {
|
|
message: typeof oe === "function" ? oe() : oe,
|
|
fieldValue,
|
|
field: oe.field || rule.fullField
|
|
};
|
|
};
|
|
}
|
|
function deepMerge(target, source) {
|
|
if (source) {
|
|
for (var s in source) {
|
|
if (source.hasOwnProperty(s)) {
|
|
var value = source[s];
|
|
if (typeof value === "object" && typeof target[s] === "object") {
|
|
target[s] = _extends({}, target[s], value);
|
|
} else {
|
|
target[s] = value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return target;
|
|
}
|
|
var required$1 = function required(rule, value, source, errors, options, type4) {
|
|
if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type4 || rule.type))) {
|
|
errors.push(format(options.messages.required, rule.fullField));
|
|
}
|
|
};
|
|
var whitespace = function whitespace2(rule, value, source, errors, options) {
|
|
if (/^\s+$/.test(value) || value === "") {
|
|
errors.push(format(options.messages.whitespace, rule.fullField));
|
|
}
|
|
};
|
|
var urlReg;
|
|
var getUrlRegex = function() {
|
|
if (urlReg) {
|
|
return urlReg;
|
|
}
|
|
var word = "[a-fA-F\\d:]";
|
|
var b = function b2(options) {
|
|
return options && options.includeBoundaries ? "(?:(?<=\\s|^)(?=" + word + ")|(?<=" + word + ")(?=\\s|$))" : "";
|
|
};
|
|
var v4 = "(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)(?:\\.(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)){3}";
|
|
var v6seg = "[a-fA-F\\d]{1,4}";
|
|
var v6 = ("\n(?:\n(?:" + v6seg + ":){7}(?:" + v6seg + "|:)| // 1:2:3:4:5:6:7:: 1:2:3:4:5:6:7:8\n(?:" + v6seg + ":){6}(?:" + v4 + "|:" + v6seg + "|:)| // 1:2:3:4:5:6:: 1:2:3:4:5:6::8 1:2:3:4:5:6::8 1:2:3:4:5:6::1.2.3.4\n(?:" + v6seg + ":){5}(?::" + v4 + "|(?::" + v6seg + "){1,2}|:)| // 1:2:3:4:5:: 1:2:3:4:5::7:8 1:2:3:4:5::8 1:2:3:4:5::7:1.2.3.4\n(?:" + v6seg + ":){4}(?:(?::" + v6seg + "){0,1}:" + v4 + "|(?::" + v6seg + "){1,3}|:)| // 1:2:3:4:: 1:2:3:4::6:7:8 1:2:3:4::8 1:2:3:4::6:7:1.2.3.4\n(?:" + v6seg + ":){3}(?:(?::" + v6seg + "){0,2}:" + v4 + "|(?::" + v6seg + "){1,4}|:)| // 1:2:3:: 1:2:3::5:6:7:8 1:2:3::8 1:2:3::5:6:7:1.2.3.4\n(?:" + v6seg + ":){2}(?:(?::" + v6seg + "){0,3}:" + v4 + "|(?::" + v6seg + "){1,5}|:)| // 1:2:: 1:2::4:5:6:7:8 1:2::8 1:2::4:5:6:7:1.2.3.4\n(?:" + v6seg + ":){1}(?:(?::" + v6seg + "){0,4}:" + v4 + "|(?::" + v6seg + "){1,6}|:)| // 1:: 1::3:4:5:6:7:8 1::8 1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::" + v6seg + "){0,5}:" + v4 + "|(?::" + v6seg + "){1,7}|:)) // ::2:3:4:5:6:7:8 ::2:3:4:5:6:7:8 ::8 ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})? // %eth0 %1\n").replace(/\s*\/\/.*$/gm, "").replace(/\n/g, "").trim();
|
|
var v46Exact = new RegExp("(?:^" + v4 + "$)|(?:^" + v6 + "$)");
|
|
var v4exact = new RegExp("^" + v4 + "$");
|
|
var v6exact = new RegExp("^" + v6 + "$");
|
|
var ip = function ip2(options) {
|
|
return options && options.exact ? v46Exact : new RegExp("(?:" + b(options) + v4 + b(options) + ")|(?:" + b(options) + v6 + b(options) + ")", "g");
|
|
};
|
|
ip.v4 = function(options) {
|
|
return options && options.exact ? v4exact : new RegExp("" + b(options) + v4 + b(options), "g");
|
|
};
|
|
ip.v6 = function(options) {
|
|
return options && options.exact ? v6exact : new RegExp("" + b(options) + v6 + b(options), "g");
|
|
};
|
|
var protocol = "(?:(?:[a-z]+:)?//)";
|
|
var auth = "(?:\\S+(?::\\S*)?@)?";
|
|
var ipv4 = ip.v4().source;
|
|
var ipv6 = ip.v6().source;
|
|
var host = "(?:(?:[a-z\\u00a1-\\uffff0-9][-_]*)*[a-z\\u00a1-\\uffff0-9]+)";
|
|
var domain = "(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*";
|
|
var tld = "(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))";
|
|
var port = "(?::\\d{2,5})?";
|
|
var path = '(?:[/?#][^\\s"]*)?';
|
|
var regex = "(?:" + protocol + "|www\\.)" + auth + "(?:localhost|" + ipv4 + "|" + ipv6 + "|" + host + domain + tld + ")" + port + path;
|
|
urlReg = new RegExp("(?:^" + regex + "$)", "i");
|
|
return urlReg;
|
|
};
|
|
var pattern$2 = {
|
|
// http://emailregex.com/
|
|
email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/,
|
|
// url: new RegExp(
|
|
// '^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
|
|
// 'i',
|
|
// ),
|
|
hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
|
|
};
|
|
var types = {
|
|
integer: function integer(value) {
|
|
return types.number(value) && parseInt(value, 10) === value;
|
|
},
|
|
"float": function float(value) {
|
|
return types.number(value) && !types.integer(value);
|
|
},
|
|
array: function array(value) {
|
|
return Array.isArray(value);
|
|
},
|
|
regexp: function regexp(value) {
|
|
if (value instanceof RegExp) {
|
|
return true;
|
|
}
|
|
try {
|
|
return !!new RegExp(value);
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
date: function date(value) {
|
|
return typeof value.getTime === "function" && typeof value.getMonth === "function" && typeof value.getYear === "function" && !isNaN(value.getTime());
|
|
},
|
|
number: function number(value) {
|
|
if (isNaN(value)) {
|
|
return false;
|
|
}
|
|
return typeof value === "number";
|
|
},
|
|
object: function object(value) {
|
|
return typeof value === "object" && !types.array(value);
|
|
},
|
|
method: function method(value) {
|
|
return typeof value === "function";
|
|
},
|
|
email: function email(value) {
|
|
return typeof value === "string" && value.length <= 320 && !!value.match(pattern$2.email);
|
|
},
|
|
url: function url(value) {
|
|
return typeof value === "string" && value.length <= 2048 && !!value.match(getUrlRegex());
|
|
},
|
|
hex: function hex(value) {
|
|
return typeof value === "string" && !!value.match(pattern$2.hex);
|
|
}
|
|
};
|
|
var type$1 = function type(rule, value, source, errors, options) {
|
|
if (rule.required && value === void 0) {
|
|
required$1(rule, value, source, errors, options);
|
|
return;
|
|
}
|
|
var custom = ["integer", "float", "array", "regexp", "object", "method", "email", "number", "date", "url", "hex"];
|
|
var ruleType = rule.type;
|
|
if (custom.indexOf(ruleType) > -1) {
|
|
if (!types[ruleType](value)) {
|
|
errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
|
|
}
|
|
} else if (ruleType && typeof value !== rule.type) {
|
|
errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
|
|
}
|
|
};
|
|
var range = function range2(rule, value, source, errors, options) {
|
|
var len = typeof rule.len === "number";
|
|
var min = typeof rule.min === "number";
|
|
var max = typeof rule.max === "number";
|
|
var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
|
|
var val = value;
|
|
var key = null;
|
|
var num = typeof value === "number";
|
|
var str = typeof value === "string";
|
|
var arr = Array.isArray(value);
|
|
if (num) {
|
|
key = "number";
|
|
} else if (str) {
|
|
key = "string";
|
|
} else if (arr) {
|
|
key = "array";
|
|
}
|
|
if (!key) {
|
|
return false;
|
|
}
|
|
if (arr) {
|
|
val = value.length;
|
|
}
|
|
if (str) {
|
|
val = value.replace(spRegexp, "_").length;
|
|
}
|
|
if (len) {
|
|
if (val !== rule.len) {
|
|
errors.push(format(options.messages[key].len, rule.fullField, rule.len));
|
|
}
|
|
} else if (min && !max && val < rule.min) {
|
|
errors.push(format(options.messages[key].min, rule.fullField, rule.min));
|
|
} else if (max && !min && val > rule.max) {
|
|
errors.push(format(options.messages[key].max, rule.fullField, rule.max));
|
|
} else if (min && max && (val < rule.min || val > rule.max)) {
|
|
errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
|
|
}
|
|
};
|
|
var ENUM$1 = "enum";
|
|
var enumerable$1 = function enumerable(rule, value, source, errors, options) {
|
|
rule[ENUM$1] = Array.isArray(rule[ENUM$1]) ? rule[ENUM$1] : [];
|
|
if (rule[ENUM$1].indexOf(value) === -1) {
|
|
errors.push(format(options.messages[ENUM$1], rule.fullField, rule[ENUM$1].join(", ")));
|
|
}
|
|
};
|
|
var pattern$1 = function pattern(rule, value, source, errors, options) {
|
|
if (rule.pattern) {
|
|
if (rule.pattern instanceof RegExp) {
|
|
rule.pattern.lastIndex = 0;
|
|
if (!rule.pattern.test(value)) {
|
|
errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
|
|
}
|
|
} else if (typeof rule.pattern === "string") {
|
|
var _pattern = new RegExp(rule.pattern);
|
|
if (!_pattern.test(value)) {
|
|
errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var rules = {
|
|
required: required$1,
|
|
whitespace,
|
|
type: type$1,
|
|
range,
|
|
"enum": enumerable$1,
|
|
pattern: pattern$1
|
|
};
|
|
var string = function string2(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value, "string") && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options, "string");
|
|
if (!isEmptyValue(value, "string")) {
|
|
rules.type(rule, value, source, errors, options);
|
|
rules.range(rule, value, source, errors, options);
|
|
rules.pattern(rule, value, source, errors, options);
|
|
if (rule.whitespace === true) {
|
|
rules.whitespace(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var method2 = function method3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var number2 = function number3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (value === "") {
|
|
value = void 0;
|
|
}
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
rules.range(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var _boolean = function _boolean2(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var regexp2 = function regexp3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (!isEmptyValue(value)) {
|
|
rules.type(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var integer2 = function integer3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
rules.range(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var floatFn = function floatFn2(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
rules.range(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var array2 = function array3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if ((value === void 0 || value === null) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options, "array");
|
|
if (value !== void 0 && value !== null) {
|
|
rules.type(rule, value, source, errors, options);
|
|
rules.range(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var object2 = function object3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules.type(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var ENUM = "enum";
|
|
var enumerable2 = function enumerable3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (value !== void 0) {
|
|
rules[ENUM](rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var pattern2 = function pattern3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value, "string") && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (!isEmptyValue(value, "string")) {
|
|
rules.pattern(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var date2 = function date3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value, "date") && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
if (!isEmptyValue(value, "date")) {
|
|
var dateObject;
|
|
if (value instanceof Date) {
|
|
dateObject = value;
|
|
} else {
|
|
dateObject = new Date(value);
|
|
}
|
|
rules.type(rule, dateObject, source, errors, options);
|
|
if (dateObject) {
|
|
rules.range(rule, dateObject.getTime(), source, errors, options);
|
|
}
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var required2 = function required3(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var type4 = Array.isArray(value) ? "array" : typeof value;
|
|
rules.required(rule, value, source, errors, options, type4);
|
|
callback(errors);
|
|
};
|
|
var type2 = function type3(rule, value, callback, source, options) {
|
|
var ruleType = rule.type;
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value, ruleType) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options, ruleType);
|
|
if (!isEmptyValue(value, ruleType)) {
|
|
rules.type(rule, value, source, errors, options);
|
|
}
|
|
}
|
|
callback(errors);
|
|
};
|
|
var any = function any2(rule, value, callback, source, options) {
|
|
var errors = [];
|
|
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
|
|
if (validate) {
|
|
if (isEmptyValue(value) && !rule.required) {
|
|
return callback();
|
|
}
|
|
rules.required(rule, value, source, errors, options);
|
|
}
|
|
callback(errors);
|
|
};
|
|
var validators = {
|
|
string,
|
|
method: method2,
|
|
number: number2,
|
|
"boolean": _boolean,
|
|
regexp: regexp2,
|
|
integer: integer2,
|
|
"float": floatFn,
|
|
array: array2,
|
|
object: object2,
|
|
"enum": enumerable2,
|
|
pattern: pattern2,
|
|
date: date2,
|
|
url: type2,
|
|
hex: type2,
|
|
email: type2,
|
|
required: required2,
|
|
any
|
|
};
|
|
function newMessages() {
|
|
return {
|
|
"default": "Validation error on field %s",
|
|
required: "%s is required",
|
|
"enum": "%s must be one of %s",
|
|
whitespace: "%s cannot be empty",
|
|
date: {
|
|
format: "%s date %s is invalid for format %s",
|
|
parse: "%s date could not be parsed, %s is invalid ",
|
|
invalid: "%s date %s is invalid"
|
|
},
|
|
types: {
|
|
string: "%s is not a %s",
|
|
method: "%s is not a %s (function)",
|
|
array: "%s is not an %s",
|
|
object: "%s is not an %s",
|
|
number: "%s is not a %s",
|
|
date: "%s is not a %s",
|
|
"boolean": "%s is not a %s",
|
|
integer: "%s is not an %s",
|
|
"float": "%s is not a %s",
|
|
regexp: "%s is not a valid %s",
|
|
email: "%s is not a valid %s",
|
|
url: "%s is not a valid %s",
|
|
hex: "%s is not a valid %s"
|
|
},
|
|
string: {
|
|
len: "%s must be exactly %s characters",
|
|
min: "%s must be at least %s characters",
|
|
max: "%s cannot be longer than %s characters",
|
|
range: "%s must be between %s and %s characters"
|
|
},
|
|
number: {
|
|
len: "%s must equal %s",
|
|
min: "%s cannot be less than %s",
|
|
max: "%s cannot be greater than %s",
|
|
range: "%s must be between %s and %s"
|
|
},
|
|
array: {
|
|
len: "%s must be exactly %s in length",
|
|
min: "%s cannot be less than %s in length",
|
|
max: "%s cannot be greater than %s in length",
|
|
range: "%s must be between %s and %s in length"
|
|
},
|
|
pattern: {
|
|
mismatch: "%s value %s does not match pattern %s"
|
|
},
|
|
clone: function clone() {
|
|
var cloned = JSON.parse(JSON.stringify(this));
|
|
cloned.clone = this.clone;
|
|
return cloned;
|
|
}
|
|
};
|
|
}
|
|
var messages = newMessages();
|
|
var Schema = /* @__PURE__ */ function() {
|
|
function Schema2(descriptor) {
|
|
this.rules = null;
|
|
this._messages = messages;
|
|
this.define(descriptor);
|
|
}
|
|
var _proto = Schema2.prototype;
|
|
_proto.define = function define(rules2) {
|
|
var _this = this;
|
|
if (!rules2) {
|
|
throw new Error("Cannot configure a schema with no rules");
|
|
}
|
|
if (typeof rules2 !== "object" || Array.isArray(rules2)) {
|
|
throw new Error("Rules must be an object");
|
|
}
|
|
this.rules = {};
|
|
Object.keys(rules2).forEach(function(name) {
|
|
var item = rules2[name];
|
|
_this.rules[name] = Array.isArray(item) ? item : [item];
|
|
});
|
|
};
|
|
_proto.messages = function messages2(_messages) {
|
|
if (_messages) {
|
|
this._messages = deepMerge(newMessages(), _messages);
|
|
}
|
|
return this._messages;
|
|
};
|
|
_proto.validate = function validate(source_, o, oc) {
|
|
var _this2 = this;
|
|
if (o === void 0) {
|
|
o = {};
|
|
}
|
|
if (oc === void 0) {
|
|
oc = function oc2() {
|
|
};
|
|
}
|
|
var source = source_;
|
|
var options = o;
|
|
var callback = oc;
|
|
if (typeof options === "function") {
|
|
callback = options;
|
|
options = {};
|
|
}
|
|
if (!this.rules || Object.keys(this.rules).length === 0) {
|
|
if (callback) {
|
|
callback(null, source);
|
|
}
|
|
return Promise.resolve(source);
|
|
}
|
|
function complete(results) {
|
|
var errors = [];
|
|
var fields = {};
|
|
function add(e) {
|
|
if (Array.isArray(e)) {
|
|
var _errors;
|
|
errors = (_errors = errors).concat.apply(_errors, e);
|
|
} else {
|
|
errors.push(e);
|
|
}
|
|
}
|
|
for (var i = 0; i < results.length; i++) {
|
|
add(results[i]);
|
|
}
|
|
if (!errors.length) {
|
|
callback(null, source);
|
|
} else {
|
|
fields = convertFieldsError(errors);
|
|
callback(errors, fields);
|
|
}
|
|
}
|
|
if (options.messages) {
|
|
var messages$1 = this.messages();
|
|
if (messages$1 === messages) {
|
|
messages$1 = newMessages();
|
|
}
|
|
deepMerge(messages$1, options.messages);
|
|
options.messages = messages$1;
|
|
} else {
|
|
options.messages = this.messages();
|
|
}
|
|
var series = {};
|
|
var keys = options.keys || Object.keys(this.rules);
|
|
keys.forEach(function(z) {
|
|
var arr = _this2.rules[z];
|
|
var value = source[z];
|
|
arr.forEach(function(r) {
|
|
var rule = r;
|
|
if (typeof rule.transform === "function") {
|
|
if (source === source_) {
|
|
source = _extends({}, source);
|
|
}
|
|
value = source[z] = rule.transform(value);
|
|
}
|
|
if (typeof rule === "function") {
|
|
rule = {
|
|
validator: rule
|
|
};
|
|
} else {
|
|
rule = _extends({}, rule);
|
|
}
|
|
rule.validator = _this2.getValidationMethod(rule);
|
|
if (!rule.validator) {
|
|
return;
|
|
}
|
|
rule.field = z;
|
|
rule.fullField = rule.fullField || z;
|
|
rule.type = _this2.getType(rule);
|
|
series[z] = series[z] || [];
|
|
series[z].push({
|
|
rule,
|
|
value,
|
|
source,
|
|
field: z
|
|
});
|
|
});
|
|
});
|
|
var errorFields = {};
|
|
return asyncMap(series, options, function(data, doIt) {
|
|
var rule = data.rule;
|
|
var deep = (rule.type === "object" || rule.type === "array") && (typeof rule.fields === "object" || typeof rule.defaultField === "object");
|
|
deep = deep && (rule.required || !rule.required && data.value);
|
|
rule.field = data.field;
|
|
function addFullField(key, schema) {
|
|
return _extends({}, schema, {
|
|
fullField: rule.fullField + "." + key,
|
|
fullFields: rule.fullFields ? [].concat(rule.fullFields, [key]) : [key]
|
|
});
|
|
}
|
|
function cb(e) {
|
|
if (e === void 0) {
|
|
e = [];
|
|
}
|
|
var errorList = Array.isArray(e) ? e : [e];
|
|
if (!options.suppressWarning && errorList.length) {
|
|
Schema2.warning("async-validator:", errorList);
|
|
}
|
|
if (errorList.length && rule.message !== void 0) {
|
|
errorList = [].concat(rule.message);
|
|
}
|
|
var filledErrors = errorList.map(complementError(rule, source));
|
|
if (options.first && filledErrors.length) {
|
|
errorFields[rule.field] = 1;
|
|
return doIt(filledErrors);
|
|
}
|
|
if (!deep) {
|
|
doIt(filledErrors);
|
|
} else {
|
|
if (rule.required && !data.value) {
|
|
if (rule.message !== void 0) {
|
|
filledErrors = [].concat(rule.message).map(complementError(rule, source));
|
|
} else if (options.error) {
|
|
filledErrors = [options.error(rule, format(options.messages.required, rule.field))];
|
|
}
|
|
return doIt(filledErrors);
|
|
}
|
|
var fieldsSchema = {};
|
|
if (rule.defaultField) {
|
|
Object.keys(data.value).map(function(key) {
|
|
fieldsSchema[key] = rule.defaultField;
|
|
});
|
|
}
|
|
fieldsSchema = _extends({}, fieldsSchema, data.rule.fields);
|
|
var paredFieldsSchema = {};
|
|
Object.keys(fieldsSchema).forEach(function(field) {
|
|
var fieldSchema = fieldsSchema[field];
|
|
var fieldSchemaList = Array.isArray(fieldSchema) ? fieldSchema : [fieldSchema];
|
|
paredFieldsSchema[field] = fieldSchemaList.map(addFullField.bind(null, field));
|
|
});
|
|
var schema = new Schema2(paredFieldsSchema);
|
|
schema.messages(options.messages);
|
|
if (data.rule.options) {
|
|
data.rule.options.messages = options.messages;
|
|
data.rule.options.error = options.error;
|
|
}
|
|
schema.validate(data.value, data.rule.options || options, function(errs) {
|
|
var finalErrors = [];
|
|
if (filledErrors && filledErrors.length) {
|
|
finalErrors.push.apply(finalErrors, filledErrors);
|
|
}
|
|
if (errs && errs.length) {
|
|
finalErrors.push.apply(finalErrors, errs);
|
|
}
|
|
doIt(finalErrors.length ? finalErrors : null);
|
|
});
|
|
}
|
|
}
|
|
var res;
|
|
if (rule.asyncValidator) {
|
|
res = rule.asyncValidator(rule, data.value, cb, data.source, options);
|
|
} else if (rule.validator) {
|
|
try {
|
|
res = rule.validator(rule, data.value, cb, data.source, options);
|
|
} catch (error2) {
|
|
console.error == null ? void 0 : console.error(error2);
|
|
if (!options.suppressValidatorError) {
|
|
setTimeout(function() {
|
|
throw error2;
|
|
}, 0);
|
|
}
|
|
cb(error2.message);
|
|
}
|
|
if (res === true) {
|
|
cb();
|
|
} else if (res === false) {
|
|
cb(typeof rule.message === "function" ? rule.message(rule.fullField || rule.field) : rule.message || (rule.fullField || rule.field) + " fails");
|
|
} else if (res instanceof Array) {
|
|
cb(res);
|
|
} else if (res instanceof Error) {
|
|
cb(res.message);
|
|
}
|
|
}
|
|
if (res && res.then) {
|
|
res.then(function() {
|
|
return cb();
|
|
}, function(e) {
|
|
return cb(e);
|
|
});
|
|
}
|
|
}, function(results) {
|
|
complete(results);
|
|
}, source);
|
|
};
|
|
_proto.getType = function getType(rule) {
|
|
if (rule.type === void 0 && rule.pattern instanceof RegExp) {
|
|
rule.type = "pattern";
|
|
}
|
|
if (typeof rule.validator !== "function" && rule.type && !validators.hasOwnProperty(rule.type)) {
|
|
throw new Error(format("Unknown rule type %s", rule.type));
|
|
}
|
|
return rule.type || "string";
|
|
};
|
|
_proto.getValidationMethod = function getValidationMethod(rule) {
|
|
if (typeof rule.validator === "function") {
|
|
return rule.validator;
|
|
}
|
|
var keys = Object.keys(rule);
|
|
var messageIndex = keys.indexOf("message");
|
|
if (messageIndex !== -1) {
|
|
keys.splice(messageIndex, 1);
|
|
}
|
|
if (keys.length === 1 && keys[0] === "required") {
|
|
return validators.required;
|
|
}
|
|
return validators[this.getType(rule)] || void 0;
|
|
};
|
|
return Schema2;
|
|
}();
|
|
Schema.register = function register(type4, validator) {
|
|
if (typeof validator !== "function") {
|
|
throw new Error("Cannot register a validator by type, validator is not a function");
|
|
}
|
|
validators[type4] = validator;
|
|
};
|
|
Schema.warning = warning;
|
|
Schema.messages = messages;
|
|
Schema.validators = validators;
|
|
const {
|
|
cubicBezierEaseInOut
|
|
} = commonVariables$1;
|
|
function fadeDownTransition({
|
|
name = "fade-down",
|
|
fromOffset = "-4px",
|
|
enterDuration = ".3s",
|
|
leaveDuration = ".3s",
|
|
enterCubicBezier = cubicBezierEaseInOut,
|
|
leaveCubicBezier = cubicBezierEaseInOut
|
|
} = {}) {
|
|
return [c(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, {
|
|
opacity: 0,
|
|
transform: `translateY(${fromOffset})`
|
|
}), c(`&.${name}-transition-enter-to, &.${name}-transition-leave-from`, {
|
|
opacity: 1,
|
|
transform: "translateY(0)"
|
|
}), c(`&.${name}-transition-leave-active`, {
|
|
transition: `opacity ${leaveDuration} ${leaveCubicBezier}, transform ${leaveDuration} ${leaveCubicBezier}`
|
|
}), c(`&.${name}-transition-enter-active`, {
|
|
transition: `opacity ${enterDuration} ${enterCubicBezier}, transform ${enterDuration} ${enterCubicBezier}`
|
|
})];
|
|
}
|
|
const style$2 = cB("form-item", `
|
|
display: grid;
|
|
line-height: var(--n-line-height);
|
|
`, [cB("form-item-label", `
|
|
grid-area: label;
|
|
align-items: center;
|
|
line-height: 1.25;
|
|
text-align: var(--n-label-text-align);
|
|
font-size: var(--n-label-font-size);
|
|
min-height: var(--n-label-height);
|
|
padding: var(--n-label-padding);
|
|
color: var(--n-label-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
box-sizing: border-box;
|
|
font-weight: var(--n-label-font-weight);
|
|
`, [cE("asterisk", `
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
color: var(--n-asterisk-color);
|
|
transition: color .3s var(--n-bezier);
|
|
`), cE("asterisk-placeholder", `
|
|
grid-area: mark;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
visibility: hidden;
|
|
`)]), cB("form-item-blank", `
|
|
grid-area: blank;
|
|
min-height: var(--n-blank-height);
|
|
`), cM("auto-label-width", [cB("form-item-label", "white-space: nowrap;")]), cM("left-labelled", `
|
|
grid-template-areas:
|
|
"label blank"
|
|
"label feedback";
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
grid-template-rows: auto 1fr;
|
|
align-items: flex-start;
|
|
`, [cB("form-item-label", `
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
min-height: var(--n-blank-height);
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
`, [cM("reverse-columns-space", `
|
|
grid-template-columns: auto 1fr;
|
|
`), cM("left-mark", `
|
|
grid-template-areas:
|
|
"mark text"
|
|
". text";
|
|
`), cM("right-mark", `
|
|
grid-template-areas:
|
|
"text mark"
|
|
"text .";
|
|
`), cM("right-hanging-mark", `
|
|
grid-template-areas:
|
|
"text mark"
|
|
"text .";
|
|
`), cE("text", `
|
|
grid-area: text;
|
|
`), cE("asterisk", `
|
|
grid-area: mark;
|
|
align-self: end;
|
|
`)])]), cM("top-labelled", `
|
|
grid-template-areas:
|
|
"label"
|
|
"blank"
|
|
"feedback";
|
|
grid-template-rows: minmax(var(--n-label-height), auto) 1fr;
|
|
grid-template-columns: minmax(0, 100%);
|
|
`, [cM("no-label", `
|
|
grid-template-areas:
|
|
"blank"
|
|
"feedback";
|
|
grid-template-rows: 1fr;
|
|
`), cB("form-item-label", `
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: var(--n-label-text-align);
|
|
`)]), cB("form-item-blank", `
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
`), cB("form-item-feedback-wrapper", `
|
|
grid-area: feedback;
|
|
box-sizing: border-box;
|
|
min-height: var(--n-feedback-height);
|
|
font-size: var(--n-feedback-font-size);
|
|
line-height: 1.25;
|
|
transform-origin: top left;
|
|
`, [c("&:not(:empty)", `
|
|
padding: var(--n-feedback-padding);
|
|
`), cB("form-item-feedback", {
|
|
transition: "color .3s var(--n-bezier)",
|
|
color: "var(--n-feedback-text-color)"
|
|
}, [cM("warning", {
|
|
color: "var(--n-feedback-text-color-warning)"
|
|
}), cM("error", {
|
|
color: "var(--n-feedback-text-color-error)"
|
|
}), fadeDownTransition({
|
|
fromOffset: "-3px",
|
|
enterDuration: ".3s",
|
|
leaveDuration: ".2s"
|
|
})])])]);
|
|
function formItemSize(props) {
|
|
const NForm = inject(formInjectionKey, null);
|
|
return {
|
|
mergedSize: computed(() => {
|
|
if (props.size !== void 0) return props.size;
|
|
if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.size) !== void 0) return NForm.props.size;
|
|
return "medium";
|
|
})
|
|
};
|
|
}
|
|
function formItemMisc(props) {
|
|
const NForm = inject(formInjectionKey, null);
|
|
const mergedLabelPlacementRef = computed(() => {
|
|
const {
|
|
labelPlacement
|
|
} = props;
|
|
if (labelPlacement !== void 0) return labelPlacement;
|
|
if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelPlacement) return NForm.props.labelPlacement;
|
|
return "top";
|
|
});
|
|
const isAutoLabelWidthRef = computed(() => {
|
|
return mergedLabelPlacementRef.value === "left" && (props.labelWidth === "auto" || (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) === "auto");
|
|
});
|
|
const mergedLabelWidthRef = computed(() => {
|
|
if (mergedLabelPlacementRef.value === "top") return;
|
|
const {
|
|
labelWidth
|
|
} = props;
|
|
if (labelWidth !== void 0 && labelWidth !== "auto") {
|
|
return formatLength(labelWidth);
|
|
}
|
|
if (isAutoLabelWidthRef.value) {
|
|
const autoComputedWidth = NForm === null || NForm === void 0 ? void 0 : NForm.maxChildLabelWidthRef.value;
|
|
if (autoComputedWidth !== void 0) {
|
|
return formatLength(autoComputedWidth);
|
|
} else {
|
|
return void 0;
|
|
}
|
|
}
|
|
if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) !== void 0) {
|
|
return formatLength(NForm.props.labelWidth);
|
|
}
|
|
return void 0;
|
|
});
|
|
const mergedLabelAlignRef = computed(() => {
|
|
const {
|
|
labelAlign
|
|
} = props;
|
|
if (labelAlign) return labelAlign;
|
|
if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelAlign) return NForm.props.labelAlign;
|
|
return void 0;
|
|
});
|
|
const mergedLabelStyleRef = computed(() => {
|
|
var _a;
|
|
return [(_a = props.labelProps) === null || _a === void 0 ? void 0 : _a.style, props.labelStyle, {
|
|
width: mergedLabelWidthRef.value
|
|
}];
|
|
});
|
|
const mergedShowRequireMarkRef = computed(() => {
|
|
const {
|
|
showRequireMark
|
|
} = props;
|
|
if (showRequireMark !== void 0) return showRequireMark;
|
|
return NForm === null || NForm === void 0 ? void 0 : NForm.props.showRequireMark;
|
|
});
|
|
const mergedRequireMarkPlacementRef = computed(() => {
|
|
const {
|
|
requireMarkPlacement
|
|
} = props;
|
|
if (requireMarkPlacement !== void 0) return requireMarkPlacement;
|
|
return (NForm === null || NForm === void 0 ? void 0 : NForm.props.requireMarkPlacement) || "right";
|
|
});
|
|
const validationErroredRef = ref(false);
|
|
const validationWarnedRef = ref(false);
|
|
const mergedValidationStatusRef = computed(() => {
|
|
const {
|
|
validationStatus
|
|
} = props;
|
|
if (validationStatus !== void 0) return validationStatus;
|
|
if (validationErroredRef.value) return "error";
|
|
if (validationWarnedRef.value) return "warning";
|
|
return void 0;
|
|
});
|
|
const mergedShowFeedbackRef = computed(() => {
|
|
const {
|
|
showFeedback
|
|
} = props;
|
|
if (showFeedback !== void 0) return showFeedback;
|
|
if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showFeedback) !== void 0) return NForm.props.showFeedback;
|
|
return true;
|
|
});
|
|
const mergedShowLabelRef = computed(() => {
|
|
const {
|
|
showLabel
|
|
} = props;
|
|
if (showLabel !== void 0) return showLabel;
|
|
if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showLabel) !== void 0) return NForm.props.showLabel;
|
|
return true;
|
|
});
|
|
return {
|
|
validationErrored: validationErroredRef,
|
|
validationWarned: validationWarnedRef,
|
|
mergedLabelStyle: mergedLabelStyleRef,
|
|
mergedLabelPlacement: mergedLabelPlacementRef,
|
|
mergedLabelAlign: mergedLabelAlignRef,
|
|
mergedShowRequireMark: mergedShowRequireMarkRef,
|
|
mergedRequireMarkPlacement: mergedRequireMarkPlacementRef,
|
|
mergedValidationStatus: mergedValidationStatusRef,
|
|
mergedShowFeedback: mergedShowFeedbackRef,
|
|
mergedShowLabel: mergedShowLabelRef,
|
|
isAutoLabelWidth: isAutoLabelWidthRef
|
|
};
|
|
}
|
|
function formItemRule(props) {
|
|
const NForm = inject(formInjectionKey, null);
|
|
const compatibleRulePathRef = computed(() => {
|
|
const {
|
|
rulePath
|
|
} = props;
|
|
if (rulePath !== void 0) return rulePath;
|
|
const {
|
|
path
|
|
} = props;
|
|
if (path !== void 0) return path;
|
|
return void 0;
|
|
});
|
|
const mergedRulesRef = computed(() => {
|
|
const rules2 = [];
|
|
const {
|
|
rule
|
|
} = props;
|
|
if (rule !== void 0) {
|
|
if (Array.isArray(rule)) rules2.push(...rule);
|
|
else rules2.push(rule);
|
|
}
|
|
if (NForm) {
|
|
const {
|
|
rules: formRules
|
|
} = NForm.props;
|
|
const {
|
|
value: rulePath
|
|
} = compatibleRulePathRef;
|
|
if (formRules !== void 0 && rulePath !== void 0) {
|
|
const formRule = get(formRules, rulePath);
|
|
if (formRule !== void 0) {
|
|
if (Array.isArray(formRule)) {
|
|
rules2.push(...formRule);
|
|
} else {
|
|
rules2.push(formRule);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return rules2;
|
|
});
|
|
const hasRequiredRuleRef = computed(() => {
|
|
return mergedRulesRef.value.some((rule) => rule.required);
|
|
});
|
|
const mergedRequiredRef = computed(() => {
|
|
return hasRequiredRuleRef.value || props.required;
|
|
});
|
|
return {
|
|
mergedRules: mergedRulesRef,
|
|
mergedRequired: mergedRequiredRef
|
|
};
|
|
}
|
|
var __awaiter$3 = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
const formItemProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
label: String,
|
|
labelWidth: [Number, String],
|
|
labelStyle: [String, Object],
|
|
labelAlign: String,
|
|
labelPlacement: String,
|
|
path: String,
|
|
first: Boolean,
|
|
rulePath: String,
|
|
required: Boolean,
|
|
showRequireMark: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
requireMarkPlacement: String,
|
|
showFeedback: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
rule: [Object, Array],
|
|
size: String,
|
|
ignorePathChange: Boolean,
|
|
validationStatus: String,
|
|
feedback: String,
|
|
feedbackClass: String,
|
|
feedbackStyle: [String, Object],
|
|
showLabel: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
labelProps: Object
|
|
});
|
|
function wrapValidator(validator, async) {
|
|
return (...args) => {
|
|
try {
|
|
const validateResult = validator(...args);
|
|
if (!async && (typeof validateResult === "boolean" || validateResult instanceof Error || Array.isArray(validateResult)) || (validateResult === null || validateResult === void 0 ? void 0 : validateResult.then)) {
|
|
return validateResult;
|
|
} else if (validateResult === void 0) {
|
|
return true;
|
|
} else {
|
|
warn("form-item/validate", `You return a ${typeof validateResult} typed value in the validator method, which is not recommended. Please use ${async ? "`Promise`" : "`boolean`, `Error` or `Promise`"} typed value instead.`);
|
|
return true;
|
|
}
|
|
} catch (err) {
|
|
warn("form-item/validate", "An error is catched in the validation, so the validation won't be done. Your callback in `validate` method of `n-form` or `n-form-item` won't be called in this validation.");
|
|
console.error(err);
|
|
return void 0;
|
|
}
|
|
};
|
|
}
|
|
const __unplugin_components_14 = defineComponent({
|
|
name: "FormItem",
|
|
props: formItemProps,
|
|
setup(props) {
|
|
useInjectionInstanceCollection(formItemInstsInjectionKey, "formItems", toRef(props, "path"));
|
|
const {
|
|
mergedClsPrefixRef,
|
|
inlineThemeDisabled
|
|
} = useConfig(props);
|
|
const NForm = inject(formInjectionKey, null);
|
|
const formItemSizeRefs = formItemSize(props);
|
|
const formItemMiscRefs = formItemMisc(props);
|
|
const {
|
|
validationErrored: validationErroredRef,
|
|
validationWarned: validationWarnedRef
|
|
} = formItemMiscRefs;
|
|
const {
|
|
mergedRequired: mergedRequiredRef,
|
|
mergedRules: mergedRulesRef
|
|
} = formItemRule(props);
|
|
const {
|
|
mergedSize: mergedSizeRef
|
|
} = formItemSizeRefs;
|
|
const {
|
|
mergedLabelPlacement: labelPlacementRef,
|
|
mergedLabelAlign: labelTextAlignRef,
|
|
mergedRequireMarkPlacement: mergedRequireMarkPlacementRef
|
|
} = formItemMiscRefs;
|
|
const renderExplainsRef = ref([]);
|
|
const feedbackIdRef = ref(createId());
|
|
const mergedDisabledRef = NForm ? toRef(NForm.props, "disabled") : ref(false);
|
|
const themeRef = useTheme("Form", "-form-item", style$2, formLight, props, mergedClsPrefixRef);
|
|
watch(toRef(props, "path"), () => {
|
|
if (props.ignorePathChange) return;
|
|
restoreValidation();
|
|
});
|
|
function restoreValidation() {
|
|
renderExplainsRef.value = [];
|
|
validationErroredRef.value = false;
|
|
validationWarnedRef.value = false;
|
|
if (props.feedback) {
|
|
feedbackIdRef.value = createId();
|
|
}
|
|
}
|
|
const internalValidate = (...args_1) => __awaiter$3(this, [...args_1], void 0, function* (trigger = null, shouldRuleBeApplied = () => true, options = {
|
|
suppressWarning: true
|
|
}) {
|
|
const {
|
|
path
|
|
} = props;
|
|
if (!options) {
|
|
options = {};
|
|
} else {
|
|
if (!options.first) options.first = props.first;
|
|
}
|
|
const {
|
|
value: rules2
|
|
} = mergedRulesRef;
|
|
const value = NForm ? get(NForm.props.model, path || "") : void 0;
|
|
const messageRenderers = {};
|
|
const originalMessageRendersMessage = {};
|
|
const activeRules = (!trigger ? rules2 : rules2.filter((rule) => {
|
|
if (Array.isArray(rule.trigger)) {
|
|
return rule.trigger.includes(trigger);
|
|
} else {
|
|
return rule.trigger === trigger;
|
|
}
|
|
})).filter(shouldRuleBeApplied).map((rule, i) => {
|
|
const shallowClonedRule = Object.assign({}, rule);
|
|
if (shallowClonedRule.validator) {
|
|
shallowClonedRule.validator = wrapValidator(shallowClonedRule.validator, false);
|
|
}
|
|
if (shallowClonedRule.asyncValidator) {
|
|
shallowClonedRule.asyncValidator = wrapValidator(shallowClonedRule.asyncValidator, true);
|
|
}
|
|
if (shallowClonedRule.renderMessage) {
|
|
const rendererKey = `__renderMessage__${i}`;
|
|
originalMessageRendersMessage[rendererKey] = shallowClonedRule.message;
|
|
shallowClonedRule.message = rendererKey;
|
|
messageRenderers[rendererKey] = shallowClonedRule.renderMessage;
|
|
}
|
|
return shallowClonedRule;
|
|
});
|
|
const activeErrorRules = activeRules.filter((r) => r.level !== "warning");
|
|
const activeWarningRules = activeRules.filter((r) => r.level === "warning");
|
|
const validationResult = {
|
|
valid: true,
|
|
errors: void 0,
|
|
warnings: void 0
|
|
};
|
|
if (!activeRules.length) return validationResult;
|
|
const mergedPath = path !== null && path !== void 0 ? path : "__n_no_path__";
|
|
const validator = new Schema({
|
|
[mergedPath]: activeErrorRules
|
|
});
|
|
const warningValidator = new Schema({
|
|
[mergedPath]: activeWarningRules
|
|
});
|
|
const {
|
|
validateMessages
|
|
} = (NForm === null || NForm === void 0 ? void 0 : NForm.props) || {};
|
|
if (validateMessages) {
|
|
validator.messages(validateMessages);
|
|
warningValidator.messages(validateMessages);
|
|
}
|
|
const renderMessages = (errors) => {
|
|
renderExplainsRef.value = errors.map((error2) => {
|
|
const transformedMessage = (error2 === null || error2 === void 0 ? void 0 : error2.message) || "";
|
|
return {
|
|
key: transformedMessage,
|
|
render: () => {
|
|
if (transformedMessage.startsWith("__renderMessage__")) {
|
|
return messageRenderers[transformedMessage]();
|
|
}
|
|
return transformedMessage;
|
|
}
|
|
};
|
|
});
|
|
errors.forEach((error2) => {
|
|
var _a;
|
|
if ((_a = error2.message) === null || _a === void 0 ? void 0 : _a.startsWith("__renderMessage__")) {
|
|
error2.message = originalMessageRendersMessage[error2.message];
|
|
}
|
|
});
|
|
};
|
|
if (activeErrorRules.length) {
|
|
const errors = yield new Promise((resolve) => {
|
|
void validator.validate({
|
|
[mergedPath]: value
|
|
}, options, resolve);
|
|
});
|
|
if (errors === null || errors === void 0 ? void 0 : errors.length) {
|
|
validationResult.valid = false;
|
|
validationResult.errors = errors;
|
|
renderMessages(errors);
|
|
}
|
|
}
|
|
if (activeWarningRules.length && !validationResult.errors) {
|
|
const warnings = yield new Promise((resolve) => {
|
|
void warningValidator.validate({
|
|
[mergedPath]: value
|
|
}, options, resolve);
|
|
});
|
|
if (warnings === null || warnings === void 0 ? void 0 : warnings.length) {
|
|
renderMessages(warnings);
|
|
validationResult.warnings = warnings;
|
|
}
|
|
}
|
|
if (!validationResult.errors && !validationResult.warnings) {
|
|
restoreValidation();
|
|
} else {
|
|
validationErroredRef.value = !!validationResult.errors;
|
|
validationWarnedRef.value = !!validationResult.warnings;
|
|
}
|
|
return validationResult;
|
|
});
|
|
function handleContentBlur() {
|
|
void internalValidate("blur");
|
|
}
|
|
function handleContentChange() {
|
|
void internalValidate("change");
|
|
}
|
|
function handleContentFocus() {
|
|
void internalValidate("focus");
|
|
}
|
|
function handleContentInput() {
|
|
void internalValidate("input");
|
|
}
|
|
function validate(options, callback) {
|
|
return __awaiter$3(this, void 0, void 0, function* () {
|
|
let trigger;
|
|
let validateCallback;
|
|
let shouldRuleBeApplied;
|
|
let asyncValidatorOptions;
|
|
if (typeof options === "string") {
|
|
trigger = options;
|
|
validateCallback = callback;
|
|
} else if (options !== null && typeof options === "object") {
|
|
trigger = options.trigger;
|
|
validateCallback = options.callback;
|
|
shouldRuleBeApplied = options.shouldRuleBeApplied;
|
|
asyncValidatorOptions = options.options;
|
|
}
|
|
return yield new Promise((resolve, reject) => {
|
|
void internalValidate(trigger, shouldRuleBeApplied, asyncValidatorOptions).then(({
|
|
valid,
|
|
errors,
|
|
warnings
|
|
}) => {
|
|
if (valid) {
|
|
if (validateCallback) {
|
|
validateCallback(void 0, {
|
|
warnings
|
|
});
|
|
}
|
|
resolve({
|
|
warnings
|
|
});
|
|
} else {
|
|
if (validateCallback) {
|
|
validateCallback(errors, {
|
|
warnings
|
|
});
|
|
}
|
|
reject(errors);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
provide(formItemInjectionKey, {
|
|
path: toRef(props, "path"),
|
|
disabled: mergedDisabledRef,
|
|
mergedSize: formItemSizeRefs.mergedSize,
|
|
mergedValidationStatus: formItemMiscRefs.mergedValidationStatus,
|
|
restoreValidation,
|
|
handleContentBlur,
|
|
handleContentChange,
|
|
handleContentFocus,
|
|
handleContentInput
|
|
});
|
|
const exposedRef = {
|
|
validate,
|
|
restoreValidation,
|
|
internalValidate
|
|
};
|
|
const labelElementRef = ref(null);
|
|
onMounted(() => {
|
|
if (!formItemMiscRefs.isAutoLabelWidth.value) return;
|
|
const labelElement = labelElementRef.value;
|
|
if (labelElement !== null) {
|
|
const memoizedWhitespace = labelElement.style.whiteSpace;
|
|
labelElement.style.whiteSpace = "nowrap";
|
|
labelElement.style.width = "";
|
|
NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElement).width.slice(0, -2)));
|
|
labelElement.style.whiteSpace = memoizedWhitespace;
|
|
}
|
|
});
|
|
const cssVarsRef = computed(() => {
|
|
var _a;
|
|
const {
|
|
value: size
|
|
} = mergedSizeRef;
|
|
const {
|
|
value: labelPlacement
|
|
} = labelPlacementRef;
|
|
const direction = labelPlacement === "top" ? "vertical" : "horizontal";
|
|
const {
|
|
common: {
|
|
cubicBezierEaseInOut: cubicBezierEaseInOut2
|
|
},
|
|
self: {
|
|
labelTextColor,
|
|
asteriskColor,
|
|
lineHeight,
|
|
feedbackTextColor,
|
|
feedbackTextColorWarning,
|
|
feedbackTextColorError,
|
|
feedbackPadding,
|
|
labelFontWeight,
|
|
[createKey("labelHeight", size)]: labelHeight,
|
|
[createKey("blankHeight", size)]: blankHeight,
|
|
[createKey("feedbackFontSize", size)]: feedbackFontSize,
|
|
[createKey("feedbackHeight", size)]: feedbackHeight,
|
|
[createKey("labelPadding", direction)]: labelPadding,
|
|
[createKey("labelTextAlign", direction)]: labelTextAlign,
|
|
[createKey(createKey("labelFontSize", labelPlacement), size)]: labelFontSize
|
|
}
|
|
} = themeRef.value;
|
|
let mergedLabelTextAlign = (_a = labelTextAlignRef.value) !== null && _a !== void 0 ? _a : labelTextAlign;
|
|
if (labelPlacement === "top") {
|
|
mergedLabelTextAlign = mergedLabelTextAlign === "right" ? "flex-end" : "flex-start";
|
|
}
|
|
const cssVars = {
|
|
"--n-bezier": cubicBezierEaseInOut2,
|
|
"--n-line-height": lineHeight,
|
|
"--n-blank-height": blankHeight,
|
|
"--n-label-font-size": labelFontSize,
|
|
"--n-label-text-align": mergedLabelTextAlign,
|
|
"--n-label-height": labelHeight,
|
|
"--n-label-padding": labelPadding,
|
|
"--n-label-font-weight": labelFontWeight,
|
|
"--n-asterisk-color": asteriskColor,
|
|
"--n-label-text-color": labelTextColor,
|
|
"--n-feedback-padding": feedbackPadding,
|
|
"--n-feedback-font-size": feedbackFontSize,
|
|
"--n-feedback-height": feedbackHeight,
|
|
"--n-feedback-text-color": feedbackTextColor,
|
|
"--n-feedback-text-color-warning": feedbackTextColorWarning,
|
|
"--n-feedback-text-color-error": feedbackTextColorError
|
|
};
|
|
return cssVars;
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled ? useThemeClass("form-item", computed(() => {
|
|
var _a;
|
|
return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ""}`;
|
|
}), cssVarsRef, props) : void 0;
|
|
const reverseColSpaceRef = computed(() => {
|
|
return labelPlacementRef.value === "left" && mergedRequireMarkPlacementRef.value === "left" && labelTextAlignRef.value === "left";
|
|
});
|
|
return Object.assign(Object.assign(Object.assign(Object.assign({
|
|
labelElementRef,
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
mergedRequired: mergedRequiredRef,
|
|
feedbackId: feedbackIdRef,
|
|
renderExplains: renderExplainsRef,
|
|
reverseColSpace: reverseColSpaceRef
|
|
}, formItemMiscRefs), formItemSizeRefs), exposedRef), {
|
|
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
|
});
|
|
},
|
|
render() {
|
|
const {
|
|
$slots,
|
|
mergedClsPrefix,
|
|
mergedShowLabel,
|
|
mergedShowRequireMark,
|
|
mergedRequireMarkPlacement,
|
|
onRender
|
|
} = this;
|
|
const renderedShowRequireMark = mergedShowRequireMark !== void 0 ? mergedShowRequireMark : this.mergedRequired;
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
|
const renderLabel = () => {
|
|
const labelText = this.$slots.label ? this.$slots.label() : this.label;
|
|
if (!labelText) return null;
|
|
const textNode = h("span", {
|
|
class: `${mergedClsPrefix}-form-item-label__text`
|
|
}, labelText);
|
|
const markNode = renderedShowRequireMark ? h("span", {
|
|
class: `${mergedClsPrefix}-form-item-label__asterisk`
|
|
}, mergedRequireMarkPlacement !== "left" ? " *" : "* ") : mergedRequireMarkPlacement === "right-hanging" && h("span", {
|
|
class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder`
|
|
}, " *");
|
|
const {
|
|
labelProps
|
|
} = this;
|
|
return h("label", Object.assign({}, labelProps, {
|
|
class: [labelProps === null || labelProps === void 0 ? void 0 : labelProps.class, `${mergedClsPrefix}-form-item-label`, `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`, this.reverseColSpace && `${mergedClsPrefix}-form-item-label--reverse-columns-space`],
|
|
style: this.mergedLabelStyle,
|
|
ref: "labelElementRef"
|
|
}), mergedRequireMarkPlacement === "left" ? [markNode, textNode] : [textNode, markNode]);
|
|
};
|
|
return h("div", {
|
|
class: [`${mergedClsPrefix}-form-item`, this.themeClass, `${mergedClsPrefix}-form-item--${this.mergedSize}-size`, `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`, this.isAutoLabelWidth && `${mergedClsPrefix}-form-item--auto-label-width`, !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`],
|
|
style: this.cssVars
|
|
}, mergedShowLabel && renderLabel(), h("div", {
|
|
class: [`${mergedClsPrefix}-form-item-blank`, this.mergedValidationStatus && `${mergedClsPrefix}-form-item-blank--${this.mergedValidationStatus}`]
|
|
}, $slots), this.mergedShowFeedback ? h("div", {
|
|
key: this.feedbackId,
|
|
style: this.feedbackStyle,
|
|
class: [`${mergedClsPrefix}-form-item-feedback-wrapper`, this.feedbackClass]
|
|
}, h(Transition, {
|
|
name: "fade-down-transition",
|
|
mode: "out-in"
|
|
}, {
|
|
default: () => {
|
|
const {
|
|
mergedValidationStatus
|
|
} = this;
|
|
return resolveWrappedSlot($slots.feedback, (children) => {
|
|
var _a;
|
|
const {
|
|
feedback
|
|
} = this;
|
|
const feedbackNodes = children || feedback ? h("div", {
|
|
key: "__feedback__",
|
|
class: `${mergedClsPrefix}-form-item-feedback__line`
|
|
}, children || feedback) : this.renderExplains.length ? (_a = this.renderExplains) === null || _a === void 0 ? void 0 : _a.map(({
|
|
key,
|
|
render
|
|
}) => h("div", {
|
|
key,
|
|
class: `${mergedClsPrefix}-form-item-feedback__line`
|
|
}, render())) : null;
|
|
return feedbackNodes ? mergedValidationStatus === "warning" ? h("div", {
|
|
key: "controlled-warning",
|
|
class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--warning`
|
|
}, feedbackNodes) : mergedValidationStatus === "error" ? h("div", {
|
|
key: "controlled-error",
|
|
class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--error`
|
|
}, feedbackNodes) : mergedValidationStatus === "success" ? h("div", {
|
|
key: "controlled-success",
|
|
class: `${mergedClsPrefix}-form-item-feedback ${mergedClsPrefix}-form-item-feedback--success`
|
|
}, feedbackNodes) : h("div", {
|
|
key: "controlled-default",
|
|
class: `${mergedClsPrefix}-form-item-feedback`
|
|
}, feedbackNodes) : null;
|
|
});
|
|
}
|
|
})) : null);
|
|
}
|
|
});
|
|
const iconMap$1 = {
|
|
success: h(SuccessIcon, null),
|
|
error: h(ErrorIcon, null),
|
|
warning: h(WarningIcon, null),
|
|
info: h(InfoIcon, null)
|
|
};
|
|
const Circle = defineComponent({
|
|
name: "ProgressCircle",
|
|
props: {
|
|
clsPrefix: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
fillColor: [String, Object],
|
|
railColor: String,
|
|
railStyle: [String, Object],
|
|
percentage: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
offsetDegree: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
showIndicator: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
indicatorTextColor: String,
|
|
unit: String,
|
|
viewBoxWidth: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
gapDegree: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
gapOffsetDegree: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
function getPathStyles(percent, offsetDegree, strokeColor, type4) {
|
|
const {
|
|
gapDegree,
|
|
viewBoxWidth,
|
|
strokeWidth
|
|
} = props;
|
|
const radius = 50;
|
|
const beginPositionX = 0;
|
|
const beginPositionY = radius;
|
|
const endPositionX = 0;
|
|
const endPositionY = 2 * radius;
|
|
const centerX = 50 + strokeWidth / 2;
|
|
const pathString = `M ${centerX},${centerX} m ${beginPositionX},${beginPositionY}
|
|
a ${radius},${radius} 0 1 1 ${endPositionX},${-100}
|
|
a ${radius},${radius} 0 1 1 ${-0},${endPositionY}`;
|
|
const len = Math.PI * 2 * radius;
|
|
const pathStyle = {
|
|
stroke: type4 === "rail" ? strokeColor : typeof props.fillColor === "object" ? "url(#gradient)" : strokeColor,
|
|
strokeDasharray: `${percent / 100 * (len - gapDegree)}px ${viewBoxWidth * 8}px`,
|
|
strokeDashoffset: `-${gapDegree / 2}px`,
|
|
transformOrigin: offsetDegree ? "center" : void 0,
|
|
transform: offsetDegree ? `rotate(${offsetDegree}deg)` : void 0
|
|
};
|
|
return {
|
|
pathString,
|
|
pathStyle
|
|
};
|
|
}
|
|
const createGradientNode = () => {
|
|
const isGradient = typeof props.fillColor === "object";
|
|
const from = isGradient ? props.fillColor.stops[0] : "";
|
|
const to = isGradient ? props.fillColor.stops[1] : "";
|
|
return isGradient && h("defs", null, h("linearGradient", {
|
|
id: "gradient",
|
|
x1: "0%",
|
|
y1: "100%",
|
|
x2: "100%",
|
|
y2: "0%"
|
|
}, h("stop", {
|
|
offset: "0%",
|
|
"stop-color": from
|
|
}), h("stop", {
|
|
offset: "100%",
|
|
"stop-color": to
|
|
})));
|
|
};
|
|
return () => {
|
|
const {
|
|
fillColor,
|
|
railColor,
|
|
strokeWidth,
|
|
offsetDegree,
|
|
status,
|
|
percentage,
|
|
showIndicator,
|
|
indicatorTextColor,
|
|
unit,
|
|
gapOffsetDegree,
|
|
clsPrefix
|
|
} = props;
|
|
const {
|
|
pathString: railPathString,
|
|
pathStyle: railPathStyle
|
|
} = getPathStyles(100, 0, railColor, "rail");
|
|
const {
|
|
pathString: fillPathString,
|
|
pathStyle: fillPathStyle
|
|
} = getPathStyles(percentage, offsetDegree, fillColor, "fill");
|
|
const viewBoxSize = 100 + strokeWidth;
|
|
return h("div", {
|
|
class: `${clsPrefix}-progress-content`,
|
|
role: "none"
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph`,
|
|
"aria-hidden": true
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph-circle`,
|
|
style: {
|
|
transform: gapOffsetDegree ? `rotate(${gapOffsetDegree}deg)` : void 0
|
|
}
|
|
}, h("svg", {
|
|
viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`
|
|
}, createGradientNode(), h("g", null, h("path", {
|
|
class: `${clsPrefix}-progress-graph-circle-rail`,
|
|
d: railPathString,
|
|
"stroke-width": strokeWidth,
|
|
"stroke-linecap": "round",
|
|
fill: "none",
|
|
style: railPathStyle
|
|
})), h("g", null, h("path", {
|
|
class: [`${clsPrefix}-progress-graph-circle-fill`, percentage === 0 && `${clsPrefix}-progress-graph-circle-fill--empty`],
|
|
d: fillPathString,
|
|
"stroke-width": strokeWidth,
|
|
"stroke-linecap": "round",
|
|
fill: "none",
|
|
style: fillPathStyle
|
|
}))))), showIndicator ? h("div", null, slots.default ? h("div", {
|
|
class: `${clsPrefix}-progress-custom-content`,
|
|
role: "none"
|
|
}, slots.default()) : status !== "default" ? h("div", {
|
|
class: `${clsPrefix}-progress-icon`,
|
|
"aria-hidden": true
|
|
}, h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => iconMap$1[status]
|
|
})) : h("div", {
|
|
class: `${clsPrefix}-progress-text`,
|
|
style: {
|
|
color: indicatorTextColor
|
|
},
|
|
role: "none"
|
|
}, h("span", {
|
|
class: `${clsPrefix}-progress-text__percentage`
|
|
}, percentage), h("span", {
|
|
class: `${clsPrefix}-progress-text__unit`
|
|
}, unit))) : null);
|
|
};
|
|
}
|
|
});
|
|
const iconMap = {
|
|
success: h(SuccessIcon, null),
|
|
error: h(ErrorIcon, null),
|
|
warning: h(WarningIcon, null),
|
|
info: h(InfoIcon, null)
|
|
};
|
|
const Line = defineComponent({
|
|
name: "ProgressLine",
|
|
props: {
|
|
clsPrefix: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
percentage: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
railColor: String,
|
|
railStyle: [String, Object],
|
|
fillColor: [String, Object],
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
indicatorPlacement: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
indicatorTextColor: String,
|
|
unit: {
|
|
type: String,
|
|
default: "%"
|
|
},
|
|
processing: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
showIndicator: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
height: [String, Number],
|
|
railBorderRadius: [String, Number],
|
|
fillBorderRadius: [String, Number]
|
|
},
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const styleHeightRef = computed(() => {
|
|
return formatLength(props.height);
|
|
});
|
|
const styleFillColorRef = computed(() => {
|
|
var _a, _b;
|
|
return typeof props.fillColor === "object" ? `linear-gradient(to right, ${(_a = props.fillColor) === null || _a === void 0 ? void 0 : _a.stops[0]} , ${(_b = props.fillColor) === null || _b === void 0 ? void 0 : _b.stops[1]})` : props.fillColor;
|
|
});
|
|
const styleRailBorderRadiusRef = computed(() => {
|
|
if (props.railBorderRadius !== void 0) {
|
|
return formatLength(props.railBorderRadius);
|
|
}
|
|
if (props.height !== void 0) {
|
|
return formatLength(props.height, {
|
|
c: 0.5
|
|
});
|
|
}
|
|
return "";
|
|
});
|
|
const styleFillBorderRadiusRef = computed(() => {
|
|
if (props.fillBorderRadius !== void 0) {
|
|
return formatLength(props.fillBorderRadius);
|
|
}
|
|
if (props.railBorderRadius !== void 0) {
|
|
return formatLength(props.railBorderRadius);
|
|
}
|
|
if (props.height !== void 0) {
|
|
return formatLength(props.height, {
|
|
c: 0.5
|
|
});
|
|
}
|
|
return "";
|
|
});
|
|
return () => {
|
|
const {
|
|
indicatorPlacement,
|
|
railColor,
|
|
railStyle,
|
|
percentage,
|
|
unit,
|
|
indicatorTextColor,
|
|
status,
|
|
showIndicator,
|
|
processing,
|
|
clsPrefix
|
|
} = props;
|
|
return h("div", {
|
|
class: `${clsPrefix}-progress-content`,
|
|
role: "none"
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph`,
|
|
"aria-hidden": true
|
|
}, h("div", {
|
|
class: [`${clsPrefix}-progress-graph-line`, {
|
|
[`${clsPrefix}-progress-graph-line--indicator-${indicatorPlacement}`]: true
|
|
}]
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph-line-rail`,
|
|
style: [{
|
|
backgroundColor: railColor,
|
|
height: styleHeightRef.value,
|
|
borderRadius: styleRailBorderRadiusRef.value
|
|
}, railStyle]
|
|
}, h("div", {
|
|
class: [`${clsPrefix}-progress-graph-line-fill`, processing && `${clsPrefix}-progress-graph-line-fill--processing`],
|
|
style: {
|
|
maxWidth: `${props.percentage}%`,
|
|
background: styleFillColorRef.value,
|
|
height: styleHeightRef.value,
|
|
lineHeight: styleHeightRef.value,
|
|
borderRadius: styleFillBorderRadiusRef.value
|
|
}
|
|
}, indicatorPlacement === "inside" ? h("div", {
|
|
class: `${clsPrefix}-progress-graph-line-indicator`,
|
|
style: {
|
|
color: indicatorTextColor
|
|
}
|
|
}, slots.default ? slots.default() : `${percentage}${unit}`) : null)))), showIndicator && indicatorPlacement === "outside" ? h("div", null, slots.default ? h("div", {
|
|
class: `${clsPrefix}-progress-custom-content`,
|
|
style: {
|
|
color: indicatorTextColor
|
|
},
|
|
role: "none"
|
|
}, slots.default()) : status === "default" ? h("div", {
|
|
role: "none",
|
|
class: `${clsPrefix}-progress-icon ${clsPrefix}-progress-icon--as-text`,
|
|
style: {
|
|
color: indicatorTextColor
|
|
}
|
|
}, percentage, unit) : h("div", {
|
|
class: `${clsPrefix}-progress-icon`,
|
|
"aria-hidden": true
|
|
}, h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => iconMap[status]
|
|
}))) : null);
|
|
};
|
|
}
|
|
});
|
|
function circlePath(r, sw, vw = 100) {
|
|
return `m ${vw / 2} ${vw / 2 - r} a ${r} ${r} 0 1 1 0 ${2 * r} a ${r} ${r} 0 1 1 0 -${2 * r}`;
|
|
}
|
|
const MultipleCircle = defineComponent({
|
|
name: "ProgressMultipleCircle",
|
|
props: {
|
|
clsPrefix: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
viewBoxWidth: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
percentage: {
|
|
type: Array,
|
|
default: [0]
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
circleGap: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
showIndicator: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
fillColor: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
railColor: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
railStyle: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const strokeDasharrayRef = computed(() => {
|
|
const strokeDasharrays = props.percentage.map((v, i) => `${Math.PI * v / 100 * (props.viewBoxWidth / 2 - props.strokeWidth / 2 * (1 + 2 * i) - props.circleGap * i) * 2}, ${props.viewBoxWidth * 8}`);
|
|
return strokeDasharrays;
|
|
});
|
|
const createGradientNode = (p, index) => {
|
|
const item = props.fillColor[index];
|
|
const form = typeof item === "object" ? item.stops[0] : "";
|
|
const to = typeof item === "object" ? item.stops[1] : "";
|
|
return typeof props.fillColor[index] === "object" && h("linearGradient", {
|
|
id: `gradient-${index}`,
|
|
x1: "100%",
|
|
y1: "0%",
|
|
x2: "0%",
|
|
y2: "100%"
|
|
}, h("stop", {
|
|
offset: "0%",
|
|
"stop-color": form
|
|
}), h("stop", {
|
|
offset: "100%",
|
|
"stop-color": to
|
|
}));
|
|
};
|
|
return () => {
|
|
const {
|
|
viewBoxWidth,
|
|
strokeWidth,
|
|
circleGap,
|
|
showIndicator,
|
|
fillColor,
|
|
railColor,
|
|
railStyle,
|
|
percentage,
|
|
clsPrefix
|
|
} = props;
|
|
return h("div", {
|
|
class: `${clsPrefix}-progress-content`,
|
|
role: "none"
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph`,
|
|
"aria-hidden": true
|
|
}, h("div", {
|
|
class: `${clsPrefix}-progress-graph-circle`
|
|
}, h("svg", {
|
|
viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`
|
|
}, h("defs", null, percentage.map((p, index) => {
|
|
return createGradientNode(p, index);
|
|
})), percentage.map((p, index) => {
|
|
return h("g", {
|
|
key: index
|
|
}, h("path", {
|
|
class: `${clsPrefix}-progress-graph-circle-rail`,
|
|
d: circlePath(viewBoxWidth / 2 - strokeWidth / 2 * (1 + 2 * index) - circleGap * index, strokeWidth, viewBoxWidth),
|
|
"stroke-width": strokeWidth,
|
|
"stroke-linecap": "round",
|
|
fill: "none",
|
|
style: [{
|
|
strokeDashoffset: 0,
|
|
stroke: railColor[index]
|
|
}, railStyle[index]]
|
|
}), h("path", {
|
|
class: [`${clsPrefix}-progress-graph-circle-fill`, p === 0 && `${clsPrefix}-progress-graph-circle-fill--empty`],
|
|
d: circlePath(viewBoxWidth / 2 - strokeWidth / 2 * (1 + 2 * index) - circleGap * index, strokeWidth, viewBoxWidth),
|
|
"stroke-width": strokeWidth,
|
|
"stroke-linecap": "round",
|
|
fill: "none",
|
|
style: {
|
|
strokeDasharray: strokeDasharrayRef.value[index],
|
|
strokeDashoffset: 0,
|
|
stroke: typeof fillColor[index] === "object" ? `url(#gradient-${index})` : fillColor[index]
|
|
}
|
|
}));
|
|
})))), showIndicator && slots.default ? h("div", null, h("div", {
|
|
class: `${clsPrefix}-progress-text`
|
|
}, slots.default())) : null);
|
|
};
|
|
}
|
|
});
|
|
const style$1 = c([cB("progress", {
|
|
display: "inline-block"
|
|
}, [cB("progress-icon", `
|
|
color: var(--n-icon-color);
|
|
transition: color .3s var(--n-bezier);
|
|
`), cM("line", `
|
|
width: 100%;
|
|
display: block;
|
|
`, [cB("progress-content", `
|
|
display: flex;
|
|
align-items: center;
|
|
`, [cB("progress-graph", {
|
|
flex: 1
|
|
})]), cB("progress-custom-content", {
|
|
marginLeft: "14px"
|
|
}), cB("progress-icon", `
|
|
width: 30px;
|
|
padding-left: 14px;
|
|
height: var(--n-icon-size-line);
|
|
line-height: var(--n-icon-size-line);
|
|
font-size: var(--n-icon-size-line);
|
|
`, [cM("as-text", `
|
|
color: var(--n-text-color-line-outer);
|
|
text-align: center;
|
|
width: 40px;
|
|
font-size: var(--n-font-size);
|
|
padding-left: 4px;
|
|
transition: color .3s var(--n-bezier);
|
|
`)])]), cM("circle, dashboard", {
|
|
width: "120px"
|
|
}, [cB("progress-custom-content", `
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`), cB("progress-text", `
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: inherit;
|
|
font-size: var(--n-font-size-circle);
|
|
color: var(--n-text-color-circle);
|
|
font-weight: var(--n-font-weight-circle);
|
|
transition: color .3s var(--n-bezier);
|
|
white-space: nowrap;
|
|
`), cB("progress-icon", `
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--n-icon-color);
|
|
font-size: var(--n-icon-size-circle);
|
|
`)]), cM("multiple-circle", `
|
|
width: 200px;
|
|
color: inherit;
|
|
`, [cB("progress-text", `
|
|
font-weight: var(--n-font-weight-circle);
|
|
color: var(--n-text-color-circle);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color .3s var(--n-bezier);
|
|
`)]), cB("progress-content", {
|
|
position: "relative"
|
|
}), cB("progress-graph", {
|
|
position: "relative"
|
|
}, [cB("progress-graph-circle", [c("svg", {
|
|
verticalAlign: "bottom"
|
|
}), cB("progress-graph-circle-fill", `
|
|
stroke: var(--n-fill-color);
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
stroke .3s var(--n-bezier),
|
|
stroke-dasharray .3s var(--n-bezier);
|
|
`, [cM("empty", {
|
|
opacity: 0
|
|
})]), cB("progress-graph-circle-rail", `
|
|
transition: stroke .3s var(--n-bezier);
|
|
overflow: hidden;
|
|
stroke: var(--n-rail-color);
|
|
`)]), cB("progress-graph-line", [cM("indicator-inside", [cB("progress-graph-line-rail", `
|
|
height: 16px;
|
|
line-height: 16px;
|
|
border-radius: 10px;
|
|
`, [cB("progress-graph-line-fill", `
|
|
height: inherit;
|
|
border-radius: 10px;
|
|
`), cB("progress-graph-line-indicator", `
|
|
background: #0000;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
margin-left: 14px;
|
|
margin-right: 14px;
|
|
height: inherit;
|
|
font-size: 12px;
|
|
color: var(--n-text-color-line-inner);
|
|
transition: color .3s var(--n-bezier);
|
|
`)])]), cM("indicator-inside-label", `
|
|
height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
`, [cB("progress-graph-line-rail", `
|
|
flex: 1;
|
|
transition: background-color .3s var(--n-bezier);
|
|
`), cB("progress-graph-line-indicator", `
|
|
background: var(--n-fill-color);
|
|
font-size: 12px;
|
|
transform: translateZ(0);
|
|
display: flex;
|
|
vertical-align: middle;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
color: var(--n-text-color-line-inner);
|
|
transition:
|
|
right .2s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
`)]), cB("progress-graph-line-rail", `
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: var(--n-rail-height);
|
|
border-radius: 5px;
|
|
background-color: var(--n-rail-color);
|
|
transition: background-color .3s var(--n-bezier);
|
|
`, [cB("progress-graph-line-fill", `
|
|
background: var(--n-fill-color);
|
|
position: relative;
|
|
border-radius: 5px;
|
|
height: inherit;
|
|
width: 100%;
|
|
max-width: 0%;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
max-width .2s var(--n-bezier);
|
|
`, [cM("processing", [c("&::after", `
|
|
content: "";
|
|
background-image: var(--n-line-bg-processing);
|
|
animation: progress-processing-animation 2s var(--n-bezier) infinite;
|
|
`)])])])])])]), c("@keyframes progress-processing-animation", `
|
|
0% {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 100%;
|
|
opacity: 1;
|
|
}
|
|
66% {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
}
|
|
`)]);
|
|
const progressProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
processing: Boolean,
|
|
type: {
|
|
type: String,
|
|
default: "line"
|
|
},
|
|
gapDegree: Number,
|
|
gapOffsetDegree: Number,
|
|
status: {
|
|
type: String,
|
|
default: "default"
|
|
},
|
|
railColor: [String, Array],
|
|
railStyle: [String, Array],
|
|
color: [String, Array, Object],
|
|
viewBoxWidth: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 7
|
|
},
|
|
percentage: [Number, Array],
|
|
unit: {
|
|
type: String,
|
|
default: "%"
|
|
},
|
|
showIndicator: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
indicatorPosition: {
|
|
type: String,
|
|
default: "outside"
|
|
},
|
|
indicatorPlacement: {
|
|
type: String,
|
|
default: "outside"
|
|
},
|
|
indicatorTextColor: String,
|
|
circleGap: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
height: Number,
|
|
borderRadius: [String, Number],
|
|
fillBorderRadius: [String, Number],
|
|
offsetDegree: Number
|
|
});
|
|
const NProgress = defineComponent({
|
|
name: "Progress",
|
|
props: progressProps,
|
|
setup(props) {
|
|
const mergedIndicatorPlacementRef = computed(() => {
|
|
return props.indicatorPlacement || props.indicatorPosition;
|
|
});
|
|
const gapDeg = computed(() => {
|
|
if (props.gapDegree || props.gapDegree === 0) {
|
|
return props.gapDegree;
|
|
}
|
|
if (props.type === "dashboard") {
|
|
return 75;
|
|
}
|
|
return void 0;
|
|
});
|
|
const {
|
|
mergedClsPrefixRef,
|
|
inlineThemeDisabled
|
|
} = useConfig(props);
|
|
const themeRef = useTheme("Progress", "-progress", style$1, progressLight, props, mergedClsPrefixRef);
|
|
const cssVarsRef = computed(() => {
|
|
const {
|
|
status
|
|
} = props;
|
|
const {
|
|
common: {
|
|
cubicBezierEaseInOut: cubicBezierEaseInOut2
|
|
},
|
|
self: {
|
|
fontSize,
|
|
fontSizeCircle,
|
|
railColor,
|
|
railHeight,
|
|
iconSizeCircle,
|
|
iconSizeLine,
|
|
textColorCircle,
|
|
textColorLineInner,
|
|
textColorLineOuter,
|
|
lineBgProcessing,
|
|
fontWeightCircle,
|
|
[createKey("iconColor", status)]: iconColor,
|
|
[createKey("fillColor", status)]: fillColor
|
|
}
|
|
} = themeRef.value;
|
|
return {
|
|
"--n-bezier": cubicBezierEaseInOut2,
|
|
"--n-fill-color": fillColor,
|
|
"--n-font-size": fontSize,
|
|
"--n-font-size-circle": fontSizeCircle,
|
|
"--n-font-weight-circle": fontWeightCircle,
|
|
"--n-icon-color": iconColor,
|
|
"--n-icon-size-circle": iconSizeCircle,
|
|
"--n-icon-size-line": iconSizeLine,
|
|
"--n-line-bg-processing": lineBgProcessing,
|
|
"--n-rail-color": railColor,
|
|
"--n-rail-height": railHeight,
|
|
"--n-text-color-circle": textColorCircle,
|
|
"--n-text-color-line-inner": textColorLineInner,
|
|
"--n-text-color-line-outer": textColorLineOuter
|
|
};
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled ? useThemeClass("progress", computed(() => props.status[0]), cssVarsRef, props) : void 0;
|
|
return {
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
mergedIndicatorPlacement: mergedIndicatorPlacementRef,
|
|
gapDeg,
|
|
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
|
};
|
|
},
|
|
render() {
|
|
const {
|
|
type: type4,
|
|
cssVars,
|
|
indicatorTextColor,
|
|
showIndicator,
|
|
status,
|
|
railColor,
|
|
railStyle,
|
|
color,
|
|
percentage,
|
|
viewBoxWidth,
|
|
strokeWidth,
|
|
mergedIndicatorPlacement,
|
|
unit,
|
|
borderRadius,
|
|
fillBorderRadius,
|
|
height,
|
|
processing,
|
|
circleGap,
|
|
mergedClsPrefix,
|
|
gapDeg,
|
|
gapOffsetDegree,
|
|
themeClass,
|
|
$slots,
|
|
onRender
|
|
} = this;
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
|
return h("div", {
|
|
class: [themeClass, `${mergedClsPrefix}-progress`, `${mergedClsPrefix}-progress--${type4}`, `${mergedClsPrefix}-progress--${status}`],
|
|
style: cssVars,
|
|
"aria-valuemax": 100,
|
|
"aria-valuemin": 0,
|
|
"aria-valuenow": percentage,
|
|
role: type4 === "circle" || type4 === "line" || type4 === "dashboard" ? "progressbar" : "none"
|
|
}, type4 === "circle" || type4 === "dashboard" ? h(Circle, {
|
|
clsPrefix: mergedClsPrefix,
|
|
status,
|
|
showIndicator,
|
|
indicatorTextColor,
|
|
railColor,
|
|
fillColor: color,
|
|
railStyle,
|
|
offsetDegree: this.offsetDegree,
|
|
percentage,
|
|
viewBoxWidth,
|
|
strokeWidth,
|
|
gapDegree: gapDeg === void 0 ? type4 === "dashboard" ? 75 : 0 : gapDeg,
|
|
gapOffsetDegree,
|
|
unit
|
|
}, $slots) : type4 === "line" ? h(Line, {
|
|
clsPrefix: mergedClsPrefix,
|
|
status,
|
|
showIndicator,
|
|
indicatorTextColor,
|
|
railColor,
|
|
fillColor: color,
|
|
railStyle,
|
|
percentage,
|
|
processing,
|
|
indicatorPlacement: mergedIndicatorPlacement,
|
|
unit,
|
|
fillBorderRadius,
|
|
railBorderRadius: borderRadius,
|
|
height
|
|
}, $slots) : type4 === "multiple-circle" ? h(MultipleCircle, {
|
|
clsPrefix: mergedClsPrefix,
|
|
strokeWidth,
|
|
railColor,
|
|
fillColor: color,
|
|
railStyle,
|
|
viewBoxWidth,
|
|
percentage,
|
|
showIndicator,
|
|
circleGap
|
|
}, $slots) : null);
|
|
}
|
|
});
|
|
const uploadInjectionKey = createInjectionKey("n-upload");
|
|
const style = c([cB("upload", "width: 100%;", [cM("dragger-inside", [cB("upload-trigger", `
|
|
display: block;
|
|
`)]), cM("drag-over", [cB("upload-dragger", `
|
|
border: var(--n-dragger-border-hover);
|
|
`)])]), cB("upload-dragger", `
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
text-align: center;
|
|
border-radius: var(--n-border-radius);
|
|
padding: 24px;
|
|
opacity: 1;
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
background-color: var(--n-dragger-color);
|
|
border: var(--n-dragger-border);
|
|
`, [c("&:hover", `
|
|
border: var(--n-dragger-border-hover);
|
|
`), cM("disabled", `
|
|
cursor: not-allowed;
|
|
`)]), cB("upload-trigger", `
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
`, [c("+", [cB("upload-file-list", "margin-top: 8px;")]), cM("disabled", `
|
|
opacity: var(--n-item-disabled-opacity);
|
|
cursor: not-allowed;
|
|
`), cM("image-card", `
|
|
width: 96px;
|
|
height: 96px;
|
|
`, [cB("base-icon", `
|
|
font-size: 24px;
|
|
`), cB("upload-dragger", `
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`)])]), cB("upload-file-list", `
|
|
line-height: var(--n-line-height);
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
`, [c("a, img", "outline: none;"), cM("disabled", `
|
|
opacity: var(--n-item-disabled-opacity);
|
|
cursor: not-allowed;
|
|
`, [cB("upload-file", "cursor: not-allowed;")]), cM("grid", `
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 96px);
|
|
grid-gap: 8px;
|
|
margin-top: 0;
|
|
`), cB("upload-file", `
|
|
display: block;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
padding: 0px 12px 0 6px;
|
|
transition: background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-border-radius);
|
|
`, [fadeInHeightExpandTransition(), cB("progress", [fadeInHeightExpandTransition({
|
|
foldPadding: true
|
|
})]), c("&:hover", `
|
|
background-color: var(--n-item-color-hover);
|
|
`, [cB("upload-file-info", [cE("action", `
|
|
opacity: 1;
|
|
`)])]), cM("image-type", `
|
|
border-radius: var(--n-border-radius);
|
|
text-decoration: underline;
|
|
text-decoration-color: #0000;
|
|
`, [cB("upload-file-info", `
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
`, [cB("progress", `
|
|
padding: 2px 0;
|
|
margin-bottom: 0;
|
|
`), cE("name", `
|
|
padding: 0 8px;
|
|
`), cE("thumbnail", `
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 28px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`, [c("img", `
|
|
width: 100%;
|
|
`)])])]), cM("text-type", [cB("progress", `
|
|
box-sizing: border-box;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
`)]), cM("image-card-type", `
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
border: var(--n-item-border-image-card);
|
|
border-radius: var(--n-border-radius);
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: border-color .3s var(--n-bezier), background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-border-radius);
|
|
overflow: hidden;
|
|
`, [cB("progress", `
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
width: unset;
|
|
`), cB("upload-file-info", `
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
`, [cE("thumbnail", `
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
`, [c("img", `
|
|
width: 100%;
|
|
`)])]), c("&::before", `
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
opacity: 0;
|
|
transition: opacity .2s var(--n-bezier);
|
|
content: "";
|
|
`), c("&:hover", [c("&::before", "opacity: 1;"), cB("upload-file-info", [cE("thumbnail", "opacity: .12;")])])]), cM("error-status", [c("&:hover", `
|
|
background-color: var(--n-item-color-hover-error);
|
|
`), cB("upload-file-info", [cE("name", "color: var(--n-item-text-color-error);"), cE("thumbnail", "color: var(--n-item-text-color-error);")]), cM("image-card-type", `
|
|
border: var(--n-item-border-image-card-error);
|
|
`)]), cM("with-url", `
|
|
cursor: pointer;
|
|
`, [cB("upload-file-info", [cE("name", `
|
|
color: var(--n-item-text-color-success);
|
|
text-decoration-color: var(--n-item-text-color-success);
|
|
`, [c("a", `
|
|
text-decoration: underline;
|
|
`)])])]), cB("upload-file-info", `
|
|
position: relative;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
`, [cE("thumbnail", `
|
|
font-size: 18px;
|
|
opacity: 1;
|
|
transition: opacity .2s var(--n-bezier);
|
|
color: var(--n-item-icon-color);
|
|
`, [cB("base-icon", `
|
|
margin-right: 2px;
|
|
vertical-align: middle;
|
|
transition: color .3s var(--n-bezier);
|
|
`)]), cE("action", `
|
|
padding-top: inherit;
|
|
padding-bottom: inherit;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: opacity .2s var(--n-bezier);
|
|
justify-content: flex-end;
|
|
opacity: 0;
|
|
`, [cB("button", [c("&:not(:last-child)", {
|
|
marginRight: "4px"
|
|
}), cB("base-icon", [c("svg", [iconSwitchTransition()])])]), cM("image-type", `
|
|
position: relative;
|
|
max-width: 80px;
|
|
width: auto;
|
|
`), cM("image-card-type", `
|
|
z-index: 2;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`)]), cE("name", `
|
|
color: var(--n-item-text-color);
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
text-decoration-color: #0000;
|
|
font-size: var(--n-font-size);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
text-decoration-color .3s var(--n-bezier);
|
|
`, [c("a", `
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
`)])])])]), cB("upload-file-input", `
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
`)]);
|
|
const uploadDraggerKey = "__UPLOAD_DRAGGER__";
|
|
const NUploadDragger = defineComponent({
|
|
name: "UploadDragger",
|
|
[uploadDraggerKey]: true,
|
|
setup(_, {
|
|
slots
|
|
}) {
|
|
const NUpload = inject(uploadInjectionKey, null);
|
|
if (!NUpload) {
|
|
throwError("upload-dragger", "`n-upload-dragger` must be placed inside `n-upload`.");
|
|
}
|
|
return () => {
|
|
const {
|
|
mergedClsPrefixRef: {
|
|
value: mergedClsPrefix
|
|
},
|
|
mergedDisabledRef: {
|
|
value: mergedDisabled
|
|
},
|
|
maxReachedRef: {
|
|
value: maxReached
|
|
}
|
|
} = NUpload;
|
|
return h("div", {
|
|
class: [`${mergedClsPrefix}-upload-dragger`, (mergedDisabled || maxReached) && `${mergedClsPrefix}-upload-dragger--disabled`]
|
|
}, slots);
|
|
};
|
|
}
|
|
});
|
|
const renderImageIcon = h("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 28 28"
|
|
}, h("g", {
|
|
fill: "none"
|
|
}, h("path", {
|
|
d: "M21.75 3A3.25 3.25 0 0 1 25 6.25v15.5A3.25 3.25 0 0 1 21.75 25H6.25A3.25 3.25 0 0 1 3 21.75V6.25A3.25 3.25 0 0 1 6.25 3h15.5zm.583 20.4l-7.807-7.68a.75.75 0 0 0-.968-.07l-.084.07l-7.808 7.68c.183.065.38.1.584.1h15.5c.204 0 .4-.035.583-.1l-7.807-7.68l7.807 7.68zM21.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v15.5c0 .208.036.408.103.593l7.82-7.692a2.25 2.25 0 0 1 3.026-.117l.129.117l7.82 7.692c.066-.185.102-.385.102-.593V6.25a1.75 1.75 0 0 0-1.75-1.75zm-3.25 3a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5zm0 1.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2z",
|
|
fill: "currentColor"
|
|
})));
|
|
const renderDocumentIcon = h("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 28 28"
|
|
}, h("g", {
|
|
fill: "none"
|
|
}, h("path", {
|
|
d: "M6.4 2A2.4 2.4 0 0 0 4 4.4v19.2A2.4 2.4 0 0 0 6.4 26h15.2a2.4 2.4 0 0 0 2.4-2.4V11.578c0-.729-.29-1.428-.805-1.944l-6.931-6.931A2.4 2.4 0 0 0 14.567 2H6.4zm-.9 2.4a.9.9 0 0 1 .9-.9H14V10a2 2 0 0 0 2 2h6.5v11.6a.9.9 0 0 1-.9.9H6.4a.9.9 0 0 1-.9-.9V4.4zm16.44 6.1H16a.5.5 0 0 1-.5-.5V4.06l6.44 6.44z",
|
|
fill: "currentColor"
|
|
})));
|
|
const NUploadProgress = defineComponent({
|
|
name: "UploadProgress",
|
|
props: {
|
|
show: Boolean,
|
|
percentage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
setup() {
|
|
const NUpload = inject(uploadInjectionKey);
|
|
return {
|
|
mergedTheme: NUpload.mergedThemeRef
|
|
};
|
|
},
|
|
render() {
|
|
return h(NFadeInExpandTransition, null, {
|
|
default: () => this.show ? h(NProgress, {
|
|
type: "line",
|
|
showIndicator: false,
|
|
percentage: this.percentage,
|
|
status: this.status,
|
|
height: 2,
|
|
theme: this.mergedTheme.peers.Progress,
|
|
themeOverrides: this.mergedTheme.peerOverrides.Progress
|
|
}) : null
|
|
});
|
|
}
|
|
});
|
|
var __awaiter$2 = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
function isImageFileType(type4) {
|
|
return type4.includes("image/");
|
|
}
|
|
function getExtname(url2 = "") {
|
|
const temp = url2.split("/");
|
|
const filename = temp[temp.length - 1];
|
|
const filenameWithoutSuffix = filename.split(/#|\?/)[0];
|
|
return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
|
|
}
|
|
const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
|
|
const isImageFile = (file) => {
|
|
if (file.type) {
|
|
return isImageFileType(file.type);
|
|
}
|
|
const fileNameExtension = getExtname(file.name || "");
|
|
if (imageExtensionRegex.test(fileNameExtension)) {
|
|
return true;
|
|
}
|
|
const url2 = file.thumbnailUrl || file.url || "";
|
|
const urlExtension = getExtname(url2);
|
|
if (/^data:image\//.test(url2) || imageExtensionRegex.test(urlExtension)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
function createImageDataUrl(file) {
|
|
return __awaiter$2(this, void 0, void 0, function* () {
|
|
return yield new Promise((resolve) => {
|
|
if (!file.type || !isImageFileType(file.type)) {
|
|
resolve("");
|
|
return;
|
|
}
|
|
resolve(window.URL.createObjectURL(file));
|
|
});
|
|
});
|
|
}
|
|
const environmentSupportFile = isBrowser && window.FileReader && window.File;
|
|
function isFileSystemDirectoryEntry(item) {
|
|
return item.isDirectory;
|
|
}
|
|
function isFileSystemFileEntry(item) {
|
|
return item.isFile;
|
|
}
|
|
function getFilesFromEntries(entries, directory) {
|
|
return __awaiter$2(this, void 0, void 0, function* () {
|
|
const fileAndEntries = [];
|
|
function _getFilesFromEntries(entries2) {
|
|
return __awaiter$2(this, void 0, void 0, function* () {
|
|
for (const entry of entries2) {
|
|
if (!entry) continue;
|
|
if (directory && isFileSystemDirectoryEntry(entry)) {
|
|
const directoryReader = entry.createReader();
|
|
let allEntries = [];
|
|
let readEntries;
|
|
try {
|
|
do {
|
|
readEntries = yield new Promise((resolve, reject) => {
|
|
directoryReader.readEntries(resolve, reject);
|
|
});
|
|
allEntries = allEntries.concat(readEntries);
|
|
} while (readEntries.length > 0);
|
|
} catch (e) {
|
|
error("upload", "error happens when handling directory upload", e);
|
|
}
|
|
yield _getFilesFromEntries(allEntries);
|
|
} else if (isFileSystemFileEntry(entry)) {
|
|
try {
|
|
const file = yield new Promise((resolve, reject) => {
|
|
entry.file(resolve, reject);
|
|
});
|
|
fileAndEntries.push({
|
|
file,
|
|
entry,
|
|
source: "dnd"
|
|
});
|
|
} catch (e) {
|
|
error("upload", "error happens when handling file upload", e);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
yield _getFilesFromEntries(entries);
|
|
return fileAndEntries;
|
|
});
|
|
}
|
|
function createSettledFileInfo(fileInfo) {
|
|
const {
|
|
id,
|
|
name,
|
|
percentage,
|
|
status,
|
|
url: url2,
|
|
file,
|
|
thumbnailUrl,
|
|
type: type4,
|
|
fullPath,
|
|
batchId
|
|
} = fileInfo;
|
|
return {
|
|
id,
|
|
name,
|
|
percentage: percentage !== null && percentage !== void 0 ? percentage : null,
|
|
status,
|
|
url: url2 !== null && url2 !== void 0 ? url2 : null,
|
|
file: file !== null && file !== void 0 ? file : null,
|
|
thumbnailUrl: thumbnailUrl !== null && thumbnailUrl !== void 0 ? thumbnailUrl : null,
|
|
type: type4 !== null && type4 !== void 0 ? type4 : null,
|
|
fullPath: fullPath !== null && fullPath !== void 0 ? fullPath : null,
|
|
batchId: batchId !== null && batchId !== void 0 ? batchId : null
|
|
};
|
|
}
|
|
function matchType(name, mimeType, accept) {
|
|
name = name.toLowerCase();
|
|
mimeType = mimeType.toLocaleLowerCase();
|
|
accept = accept.toLocaleLowerCase();
|
|
const acceptAtoms = accept.split(",").map((acceptAtom) => acceptAtom.trim()).filter(Boolean);
|
|
return acceptAtoms.some((acceptAtom) => {
|
|
if (acceptAtom.startsWith(".")) {
|
|
if (name.endsWith(acceptAtom)) return true;
|
|
} else if (acceptAtom.includes("/")) {
|
|
const [type4, subtype] = mimeType.split("/");
|
|
const [acceptType, acceptSubtype] = acceptAtom.split("/");
|
|
if (acceptType === "*" || type4 && acceptType && acceptType === type4) {
|
|
if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
|
|
return true;
|
|
}
|
|
}
|
|
} else {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
var __awaiter$1 = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
const buttonThemeOverrides = {
|
|
paddingMedium: "0 3px",
|
|
heightMedium: "24px",
|
|
iconSizeMedium: "18px"
|
|
};
|
|
const NUploadFile = defineComponent({
|
|
name: "UploadFile",
|
|
props: {
|
|
clsPrefix: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
file: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
listType: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
index: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const NUpload = inject(uploadInjectionKey);
|
|
const imageRef = ref(null);
|
|
const thumbnailUrlRef = ref("");
|
|
const progressStatusRef = computed(() => {
|
|
const {
|
|
file
|
|
} = props;
|
|
if (file.status === "finished") return "success";
|
|
if (file.status === "error") return "error";
|
|
return "info";
|
|
});
|
|
const buttonTypeRef = computed(() => {
|
|
const {
|
|
file
|
|
} = props;
|
|
if (file.status === "error") return "error";
|
|
return void 0;
|
|
});
|
|
const showProgressRef = computed(() => {
|
|
const {
|
|
file
|
|
} = props;
|
|
return file.status === "uploading";
|
|
});
|
|
const showCancelButtonRef = computed(() => {
|
|
if (!NUpload.showCancelButtonRef.value) return false;
|
|
const {
|
|
file
|
|
} = props;
|
|
return ["uploading", "pending", "error"].includes(file.status);
|
|
});
|
|
const showRemoveButtonRef = computed(() => {
|
|
if (!NUpload.showRemoveButtonRef.value) return false;
|
|
const {
|
|
file
|
|
} = props;
|
|
return ["finished"].includes(file.status);
|
|
});
|
|
const showDownloadButtonRef = computed(() => {
|
|
if (!NUpload.showDownloadButtonRef.value) return false;
|
|
const {
|
|
file
|
|
} = props;
|
|
return ["finished"].includes(file.status);
|
|
});
|
|
const showRetryButtonRef = computed(() => {
|
|
if (!NUpload.showRetryButtonRef.value) return false;
|
|
const {
|
|
file
|
|
} = props;
|
|
return ["error"].includes(file.status);
|
|
});
|
|
const mergedThumbnailUrlRef = useMemo(() => {
|
|
return thumbnailUrlRef.value || props.file.thumbnailUrl || props.file.url;
|
|
});
|
|
const showPreviewButtonRef = computed(() => {
|
|
if (!NUpload.showPreviewButtonRef.value) return false;
|
|
const {
|
|
file: {
|
|
status
|
|
},
|
|
listType
|
|
} = props;
|
|
return ["finished"].includes(status) && mergedThumbnailUrlRef.value && listType === "image-card";
|
|
});
|
|
function handleRetryClick() {
|
|
return __awaiter$1(this, void 0, void 0, function* () {
|
|
const onRetry = NUpload.onRetryRef.value;
|
|
if (onRetry) {
|
|
const onRetryReturn = yield onRetry({
|
|
file: props.file
|
|
});
|
|
if (onRetryReturn === false) {
|
|
return;
|
|
}
|
|
}
|
|
NUpload.submit(props.file.id);
|
|
});
|
|
}
|
|
function handleRemoveOrCancelClick(e) {
|
|
e.preventDefault();
|
|
const {
|
|
file
|
|
} = props;
|
|
if (["finished", "pending", "error"].includes(file.status)) {
|
|
handleRemove(file);
|
|
} else if (["uploading"].includes(file.status)) {
|
|
handleAbort(file);
|
|
} else {
|
|
warn("upload", "The button clicked type is unknown.");
|
|
}
|
|
}
|
|
function handleDownloadClick(e) {
|
|
e.preventDefault();
|
|
handleDownload(props.file);
|
|
}
|
|
function handleRemove(file) {
|
|
const {
|
|
xhrMap,
|
|
doChange,
|
|
onRemoveRef: {
|
|
value: onRemove
|
|
},
|
|
mergedFileListRef: {
|
|
value: mergedFileList
|
|
}
|
|
} = NUpload;
|
|
void Promise.resolve(onRemove ? onRemove({
|
|
file: Object.assign({}, file),
|
|
fileList: mergedFileList,
|
|
index: props.index
|
|
}) : true).then((result) => {
|
|
if (result === false) return;
|
|
const fileAfterChange = Object.assign({}, file, {
|
|
status: "removed"
|
|
});
|
|
xhrMap.delete(file.id);
|
|
doChange(fileAfterChange, void 0, {
|
|
remove: true
|
|
});
|
|
});
|
|
}
|
|
function handleDownload(file) {
|
|
const {
|
|
onDownloadRef: {
|
|
value: onDownload
|
|
}
|
|
} = NUpload;
|
|
void Promise.resolve(onDownload ? onDownload(Object.assign({}, file)) : true).then((res) => {
|
|
if (res !== false) {
|
|
download(file.url, file.name);
|
|
}
|
|
});
|
|
}
|
|
function handleAbort(file) {
|
|
const {
|
|
xhrMap
|
|
} = NUpload;
|
|
const xhr = xhrMap.get(file.id);
|
|
xhr === null || xhr === void 0 ? void 0 : xhr.abort();
|
|
handleRemove(Object.assign({}, file));
|
|
}
|
|
function handlePreviewClick(e) {
|
|
const {
|
|
onPreviewRef: {
|
|
value: onPreview
|
|
}
|
|
} = NUpload;
|
|
if (onPreview) {
|
|
onPreview(props.file, {
|
|
event: e
|
|
});
|
|
} else if (props.listType === "image-card") {
|
|
const {
|
|
value
|
|
} = imageRef;
|
|
if (!value) return;
|
|
value.click();
|
|
}
|
|
}
|
|
const deriveFileThumbnailUrl = () => __awaiter$1(this, void 0, void 0, function* () {
|
|
const {
|
|
listType
|
|
} = props;
|
|
if (listType !== "image" && listType !== "image-card") {
|
|
return;
|
|
}
|
|
if (NUpload.shouldUseThumbnailUrlRef.value(props.file)) {
|
|
thumbnailUrlRef.value = yield NUpload.getFileThumbnailUrlResolver(props.file);
|
|
}
|
|
});
|
|
watchEffect(() => {
|
|
void deriveFileThumbnailUrl();
|
|
});
|
|
return {
|
|
mergedTheme: NUpload.mergedThemeRef,
|
|
progressStatus: progressStatusRef,
|
|
buttonType: buttonTypeRef,
|
|
showProgress: showProgressRef,
|
|
disabled: NUpload.mergedDisabledRef,
|
|
showCancelButton: showCancelButtonRef,
|
|
showRemoveButton: showRemoveButtonRef,
|
|
showDownloadButton: showDownloadButtonRef,
|
|
showRetryButton: showRetryButtonRef,
|
|
showPreviewButton: showPreviewButtonRef,
|
|
mergedThumbnailUrl: mergedThumbnailUrlRef,
|
|
shouldUseThumbnailUrl: NUpload.shouldUseThumbnailUrlRef,
|
|
renderIcon: NUpload.renderIconRef,
|
|
imageRef,
|
|
handleRemoveOrCancelClick,
|
|
handleDownloadClick,
|
|
handleRetryClick,
|
|
handlePreviewClick
|
|
};
|
|
},
|
|
render() {
|
|
const {
|
|
clsPrefix,
|
|
mergedTheme,
|
|
listType,
|
|
file,
|
|
renderIcon
|
|
} = this;
|
|
let icon;
|
|
const isImageType = listType === "image";
|
|
const isImageCardType = listType === "image-card";
|
|
if (isImageType || isImageCardType) {
|
|
icon = !this.shouldUseThumbnailUrl(file) || !this.mergedThumbnailUrl ? h("span", {
|
|
class: `${clsPrefix}-upload-file-info__thumbnail`
|
|
}, renderIcon ? renderIcon(file) : isImageFile(file) ? h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: renderImageIcon
|
|
}) : h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: renderDocumentIcon
|
|
})) : h("a", {
|
|
rel: "noopener noreferer",
|
|
target: "_blank",
|
|
href: file.url || void 0,
|
|
class: `${clsPrefix}-upload-file-info__thumbnail`,
|
|
onClick: this.handlePreviewClick
|
|
}, listType === "image-card" ? h(__unplugin_components_4, {
|
|
src: this.mergedThumbnailUrl || void 0,
|
|
previewSrc: file.url || void 0,
|
|
alt: file.name,
|
|
ref: "imageRef"
|
|
}) : h("img", {
|
|
src: this.mergedThumbnailUrl || void 0,
|
|
alt: file.name
|
|
}));
|
|
} else {
|
|
icon = h("span", {
|
|
class: `${clsPrefix}-upload-file-info__thumbnail`
|
|
}, renderIcon ? renderIcon(file) : h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => h(AttachIcon, null)
|
|
}));
|
|
}
|
|
const progress = h(NUploadProgress, {
|
|
show: this.showProgress,
|
|
percentage: file.percentage || 0,
|
|
status: this.progressStatus
|
|
});
|
|
const showName = listType === "text" || listType === "image";
|
|
return h("div", {
|
|
class: [`${clsPrefix}-upload-file`, `${clsPrefix}-upload-file--${this.progressStatus}-status`, file.url && file.status !== "error" && listType !== "image-card" && `${clsPrefix}-upload-file--with-url`, `${clsPrefix}-upload-file--${listType}-type`]
|
|
}, h("div", {
|
|
class: `${clsPrefix}-upload-file-info`
|
|
}, icon, h("div", {
|
|
class: `${clsPrefix}-upload-file-info__name`
|
|
}, showName && (file.url && file.status !== "error" ? h("a", {
|
|
rel: "noopener noreferer",
|
|
target: "_blank",
|
|
href: file.url || void 0,
|
|
onClick: this.handlePreviewClick
|
|
}, file.name) : h("span", {
|
|
onClick: this.handlePreviewClick
|
|
}, file.name)), isImageType && progress), h("div", {
|
|
class: [`${clsPrefix}-upload-file-info__action`, `${clsPrefix}-upload-file-info__action--${listType}-type`]
|
|
}, this.showPreviewButton ? h(Button, {
|
|
key: "preview",
|
|
quaternary: true,
|
|
type: this.buttonType,
|
|
onClick: this.handlePreviewClick,
|
|
theme: mergedTheme.peers.Button,
|
|
themeOverrides: mergedTheme.peerOverrides.Button,
|
|
builtinThemeOverrides: buttonThemeOverrides
|
|
}, {
|
|
icon: () => h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => h(EyeIcon, null)
|
|
})
|
|
}) : null, (this.showRemoveButton || this.showCancelButton) && !this.disabled && h(Button, {
|
|
key: "cancelOrTrash",
|
|
theme: mergedTheme.peers.Button,
|
|
themeOverrides: mergedTheme.peerOverrides.Button,
|
|
quaternary: true,
|
|
builtinThemeOverrides: buttonThemeOverrides,
|
|
type: this.buttonType,
|
|
onClick: this.handleRemoveOrCancelClick
|
|
}, {
|
|
icon: () => h(NIconSwitchTransition, null, {
|
|
default: () => this.showRemoveButton ? h(NBaseIcon, {
|
|
clsPrefix,
|
|
key: "trash"
|
|
}, {
|
|
default: () => h(TrashIcon, null)
|
|
}) : h(NBaseIcon, {
|
|
clsPrefix,
|
|
key: "cancel"
|
|
}, {
|
|
default: () => h(CancelIcon, null)
|
|
})
|
|
})
|
|
}), this.showRetryButton && !this.disabled && h(Button, {
|
|
key: "retry",
|
|
quaternary: true,
|
|
type: this.buttonType,
|
|
onClick: this.handleRetryClick,
|
|
theme: mergedTheme.peers.Button,
|
|
themeOverrides: mergedTheme.peerOverrides.Button,
|
|
builtinThemeOverrides: buttonThemeOverrides
|
|
}, {
|
|
icon: () => h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => h(RetryIcon, null)
|
|
})
|
|
}), this.showDownloadButton ? h(Button, {
|
|
key: "download",
|
|
quaternary: true,
|
|
type: this.buttonType,
|
|
onClick: this.handleDownloadClick,
|
|
theme: mergedTheme.peers.Button,
|
|
themeOverrides: mergedTheme.peerOverrides.Button,
|
|
builtinThemeOverrides: buttonThemeOverrides
|
|
}, {
|
|
icon: () => h(NBaseIcon, {
|
|
clsPrefix
|
|
}, {
|
|
default: () => h(DownloadIcon, null)
|
|
})
|
|
}) : null)), !isImageType && progress);
|
|
}
|
|
});
|
|
const NUploadTrigger = defineComponent({
|
|
name: "UploadTrigger",
|
|
props: {
|
|
abstract: Boolean
|
|
},
|
|
slots: Object,
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const NUpload = inject(uploadInjectionKey, null);
|
|
if (!NUpload) {
|
|
throwError("upload-trigger", "`n-upload-trigger` must be placed inside `n-upload`.");
|
|
}
|
|
const {
|
|
mergedClsPrefixRef,
|
|
mergedDisabledRef,
|
|
maxReachedRef,
|
|
listTypeRef,
|
|
dragOverRef,
|
|
openOpenFileDialog,
|
|
draggerInsideRef,
|
|
handleFileAddition,
|
|
mergedDirectoryDndRef,
|
|
triggerClassRef,
|
|
triggerStyleRef
|
|
} = NUpload;
|
|
const isImageCardTypeRef = computed(() => listTypeRef.value === "image-card");
|
|
function handleTriggerClick() {
|
|
if (mergedDisabledRef.value || maxReachedRef.value) return;
|
|
openOpenFileDialog();
|
|
}
|
|
function handleTriggerDragOver(e) {
|
|
e.preventDefault();
|
|
dragOverRef.value = true;
|
|
}
|
|
function handleTriggerDragEnter(e) {
|
|
e.preventDefault();
|
|
dragOverRef.value = true;
|
|
}
|
|
function handleTriggerDragLeave(e) {
|
|
e.preventDefault();
|
|
dragOverRef.value = false;
|
|
}
|
|
function handleTriggerDrop(e) {
|
|
var _a;
|
|
e.preventDefault();
|
|
if (!draggerInsideRef.value || mergedDisabledRef.value || maxReachedRef.value) {
|
|
dragOverRef.value = false;
|
|
return;
|
|
}
|
|
const dataTransferItems = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
|
|
if (dataTransferItems === null || dataTransferItems === void 0 ? void 0 : dataTransferItems.length) {
|
|
void getFilesFromEntries(Array.from(dataTransferItems).map((item) => item.webkitGetAsEntry()), mergedDirectoryDndRef.value).then((files) => {
|
|
handleFileAddition(files);
|
|
}).finally(() => {
|
|
dragOverRef.value = false;
|
|
});
|
|
} else {
|
|
dragOverRef.value = false;
|
|
}
|
|
}
|
|
return () => {
|
|
var _a;
|
|
const {
|
|
value: mergedClsPrefix
|
|
} = mergedClsPrefixRef;
|
|
return props.abstract ? (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, {
|
|
handleClick: handleTriggerClick,
|
|
handleDrop: handleTriggerDrop,
|
|
handleDragOver: handleTriggerDragOver,
|
|
handleDragEnter: handleTriggerDragEnter,
|
|
handleDragLeave: handleTriggerDragLeave
|
|
}) : h("div", {
|
|
class: [`${mergedClsPrefix}-upload-trigger`, (mergedDisabledRef.value || maxReachedRef.value) && `${mergedClsPrefix}-upload-trigger--disabled`, isImageCardTypeRef.value && `${mergedClsPrefix}-upload-trigger--image-card`, triggerClassRef.value],
|
|
style: triggerStyleRef.value,
|
|
onClick: handleTriggerClick,
|
|
onDrop: handleTriggerDrop,
|
|
onDragover: handleTriggerDragOver,
|
|
onDragenter: handleTriggerDragEnter,
|
|
onDragleave: handleTriggerDragLeave
|
|
}, isImageCardTypeRef.value ? h(NUploadDragger, null, {
|
|
default: () => resolveSlot(slots.default, () => [h(NBaseIcon, {
|
|
clsPrefix: mergedClsPrefix
|
|
}, {
|
|
default: () => h(AddIcon, null)
|
|
})])
|
|
}) : slots);
|
|
};
|
|
}
|
|
});
|
|
const NUploadFileList = defineComponent({
|
|
name: "UploadFileList",
|
|
setup(_, {
|
|
slots
|
|
}) {
|
|
const NUpload = inject(uploadInjectionKey, null);
|
|
if (!NUpload) {
|
|
throwError("upload-file-list", "`n-upload-file-list` must be placed inside `n-upload`.");
|
|
}
|
|
const {
|
|
abstractRef,
|
|
mergedClsPrefixRef,
|
|
listTypeRef,
|
|
mergedFileListRef,
|
|
fileListClassRef,
|
|
fileListStyleRef,
|
|
cssVarsRef,
|
|
themeClassRef,
|
|
maxReachedRef,
|
|
showTriggerRef,
|
|
imageGroupPropsRef
|
|
} = NUpload;
|
|
const isImageCardTypeRef = computed(() => listTypeRef.value === "image-card");
|
|
const renderFileList = () => mergedFileListRef.value.map((file, index) => h(NUploadFile, {
|
|
clsPrefix: mergedClsPrefixRef.value,
|
|
key: file.id,
|
|
file,
|
|
index,
|
|
listType: listTypeRef.value
|
|
}));
|
|
const renderUploadFileList = () => isImageCardTypeRef.value ? h(NImageGroup, Object.assign({}, imageGroupPropsRef.value), {
|
|
default: renderFileList
|
|
}) : h(NFadeInExpandTransition, {
|
|
group: true
|
|
}, {
|
|
default: renderFileList
|
|
});
|
|
return () => {
|
|
const {
|
|
value: mergedClsPrefix
|
|
} = mergedClsPrefixRef;
|
|
const {
|
|
value: abstract
|
|
} = abstractRef;
|
|
return h("div", {
|
|
class: [`${mergedClsPrefix}-upload-file-list`, isImageCardTypeRef.value && `${mergedClsPrefix}-upload-file-list--grid`, abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : void 0, fileListClassRef.value],
|
|
style: [abstract && cssVarsRef ? cssVarsRef.value : "", fileListStyleRef.value]
|
|
}, renderUploadFileList(), showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && h(NUploadTrigger, null, slots));
|
|
};
|
|
}
|
|
});
|
|
var __awaiter = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
function createXhrHandlers(inst, file, xhr) {
|
|
const {
|
|
doChange,
|
|
xhrMap
|
|
} = inst;
|
|
let percentage = 0;
|
|
function handleXHRError(e) {
|
|
var _a;
|
|
let fileAfterChange = Object.assign({}, file, {
|
|
status: "error",
|
|
percentage
|
|
});
|
|
xhrMap.delete(file.id);
|
|
fileAfterChange = createSettledFileInfo(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, {
|
|
file: fileAfterChange,
|
|
event: e
|
|
})) || fileAfterChange);
|
|
doChange(fileAfterChange, e);
|
|
}
|
|
function handleXHRLoad(e) {
|
|
var _a;
|
|
if (inst.isErrorState) {
|
|
if (inst.isErrorState(xhr)) {
|
|
handleXHRError(e);
|
|
return;
|
|
}
|
|
} else {
|
|
if (xhr.status < 200 || xhr.status >= 300) {
|
|
handleXHRError(e);
|
|
return;
|
|
}
|
|
}
|
|
let fileAfterChange = Object.assign({}, file, {
|
|
status: "finished",
|
|
percentage
|
|
});
|
|
xhrMap.delete(file.id);
|
|
fileAfterChange = createSettledFileInfo(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, {
|
|
file: fileAfterChange,
|
|
event: e
|
|
})) || fileAfterChange);
|
|
doChange(fileAfterChange, e);
|
|
}
|
|
return {
|
|
handleXHRLoad,
|
|
handleXHRError,
|
|
handleXHRAbort(e) {
|
|
const fileAfterChange = Object.assign({}, file, {
|
|
status: "removed",
|
|
file: null,
|
|
percentage
|
|
});
|
|
xhrMap.delete(file.id);
|
|
doChange(fileAfterChange, e);
|
|
},
|
|
handleXHRProgress(e) {
|
|
const fileAfterChange = Object.assign({}, file, {
|
|
status: "uploading"
|
|
});
|
|
if (e.lengthComputable) {
|
|
const progress = Math.ceil(e.loaded / e.total * 100);
|
|
fileAfterChange.percentage = progress;
|
|
percentage = progress;
|
|
}
|
|
doChange(fileAfterChange, e);
|
|
}
|
|
};
|
|
}
|
|
function customSubmitImpl(options) {
|
|
const {
|
|
inst,
|
|
file,
|
|
data,
|
|
headers,
|
|
withCredentials,
|
|
action,
|
|
customRequest
|
|
} = options;
|
|
const {
|
|
doChange
|
|
} = options.inst;
|
|
let percentage = 0;
|
|
customRequest({
|
|
file,
|
|
data,
|
|
headers,
|
|
withCredentials,
|
|
action,
|
|
onProgress(event) {
|
|
const fileAfterChange = Object.assign({}, file, {
|
|
status: "uploading"
|
|
});
|
|
const progress = event.percent;
|
|
fileAfterChange.percentage = progress;
|
|
percentage = progress;
|
|
doChange(fileAfterChange);
|
|
},
|
|
onFinish() {
|
|
var _a;
|
|
let fileAfterChange = Object.assign({}, file, {
|
|
status: "finished",
|
|
percentage
|
|
});
|
|
fileAfterChange = createSettledFileInfo(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, {
|
|
file: fileAfterChange
|
|
})) || fileAfterChange);
|
|
doChange(fileAfterChange);
|
|
},
|
|
onError() {
|
|
var _a;
|
|
let fileAfterChange = Object.assign({}, file, {
|
|
status: "error",
|
|
percentage
|
|
});
|
|
fileAfterChange = createSettledFileInfo(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, {
|
|
file: fileAfterChange
|
|
})) || fileAfterChange);
|
|
doChange(fileAfterChange);
|
|
}
|
|
});
|
|
}
|
|
function registerHandler(inst, file, request) {
|
|
const handlers = createXhrHandlers(inst, file, request);
|
|
request.onabort = handlers.handleXHRAbort;
|
|
request.onerror = handlers.handleXHRError;
|
|
request.onload = handlers.handleXHRLoad;
|
|
if (request.upload) {
|
|
request.upload.onprogress = handlers.handleXHRProgress;
|
|
}
|
|
}
|
|
function unwrapFunctionValue(data, file) {
|
|
if (typeof data === "function") {
|
|
return data({
|
|
file
|
|
});
|
|
}
|
|
if (data) return data;
|
|
return {};
|
|
}
|
|
function setHeaders(request, headers, file) {
|
|
const headersObject = unwrapFunctionValue(headers, file);
|
|
if (!headersObject) return;
|
|
Object.keys(headersObject).forEach((key) => {
|
|
request.setRequestHeader(key, headersObject[key]);
|
|
});
|
|
}
|
|
function appendData(formData, data, file) {
|
|
const dataObject = unwrapFunctionValue(data, file);
|
|
if (!dataObject) return;
|
|
Object.keys(dataObject).forEach((key) => {
|
|
formData.append(key, dataObject[key]);
|
|
});
|
|
}
|
|
function submitImpl(inst, fieldName, file, {
|
|
method: method4,
|
|
action,
|
|
withCredentials,
|
|
responseType,
|
|
headers,
|
|
data
|
|
}) {
|
|
const request = new XMLHttpRequest();
|
|
request.responseType = responseType;
|
|
inst.xhrMap.set(file.id, request);
|
|
request.withCredentials = withCredentials;
|
|
const formData = new FormData();
|
|
appendData(formData, data, file);
|
|
if (file.file !== null) {
|
|
formData.append(fieldName, file.file);
|
|
}
|
|
registerHandler(inst, file, request);
|
|
if (action !== void 0) {
|
|
request.open(method4.toUpperCase(), action);
|
|
setHeaders(request, headers, file);
|
|
request.send(formData);
|
|
const fileAfterChange = Object.assign({}, file, {
|
|
status: "uploading"
|
|
});
|
|
inst.doChange(fileAfterChange);
|
|
}
|
|
}
|
|
const uploadProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
name: {
|
|
type: String,
|
|
default: "file"
|
|
},
|
|
accept: String,
|
|
action: String,
|
|
customRequest: Function,
|
|
directory: Boolean,
|
|
directoryDnd: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
method: {
|
|
type: String,
|
|
default: "POST"
|
|
},
|
|
multiple: Boolean,
|
|
showFileList: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
data: [Object, Function],
|
|
headers: [Object, Function],
|
|
withCredentials: Boolean,
|
|
responseType: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
onChange: Function,
|
|
onRemove: Function,
|
|
onFinish: Function,
|
|
onError: Function,
|
|
onRetry: Function,
|
|
onBeforeUpload: Function,
|
|
isErrorState: Function,
|
|
/** currently not used */
|
|
onDownload: Function,
|
|
defaultUpload: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
fileList: Array,
|
|
"onUpdate:fileList": [Function, Array],
|
|
onUpdateFileList: [Function, Array],
|
|
fileListClass: String,
|
|
fileListStyle: [String, Object],
|
|
defaultFileList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
showCancelButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showRemoveButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showDownloadButton: Boolean,
|
|
showRetryButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showPreviewButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
listType: {
|
|
type: String,
|
|
default: "text"
|
|
},
|
|
onPreview: Function,
|
|
shouldUseThumbnailUrl: {
|
|
type: Function,
|
|
default: (file) => {
|
|
if (!environmentSupportFile) return false;
|
|
return isImageFile(file);
|
|
}
|
|
},
|
|
createThumbnailUrl: Function,
|
|
abstract: Boolean,
|
|
max: Number,
|
|
showTrigger: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
imageGroupProps: Object,
|
|
inputProps: Object,
|
|
triggerClass: String,
|
|
triggerStyle: [String, Object],
|
|
renderIcon: Function
|
|
});
|
|
const __unplugin_components_7 = defineComponent({
|
|
name: "Upload",
|
|
props: uploadProps,
|
|
setup(props) {
|
|
if (props.abstract && props.listType === "image-card") {
|
|
throwError("upload", "when the list-type is image-card, abstract is not supported.");
|
|
}
|
|
const {
|
|
mergedClsPrefixRef,
|
|
inlineThemeDisabled
|
|
} = useConfig(props);
|
|
const themeRef = useTheme("Upload", "-upload", style, uploadLight, props, mergedClsPrefixRef);
|
|
const formItem = useFormItem(props);
|
|
const uncontrolledFileListRef = ref(props.defaultFileList);
|
|
const controlledFileListRef = toRef(props, "fileList");
|
|
const inputElRef = ref(null);
|
|
const draggerInsideRef = {
|
|
value: false
|
|
};
|
|
const dragOverRef = ref(false);
|
|
const xhrMap = /* @__PURE__ */ new Map();
|
|
const _mergedFileListRef = useMergedState(controlledFileListRef, uncontrolledFileListRef);
|
|
const mergedFileListRef = computed(() => _mergedFileListRef.value.map(createSettledFileInfo));
|
|
const maxReachedRef = computed(() => {
|
|
const {
|
|
max
|
|
} = props;
|
|
if (max !== void 0) {
|
|
return mergedFileListRef.value.length >= max;
|
|
}
|
|
return false;
|
|
});
|
|
function openOpenFileDialog() {
|
|
var _a;
|
|
(_a = inputElRef.value) === null || _a === void 0 ? void 0 : _a.click();
|
|
}
|
|
function handleFileInputChange(e) {
|
|
const target = e.target;
|
|
handleFileAddition(target.files ? Array.from(target.files).map((file) => ({
|
|
file,
|
|
entry: null,
|
|
source: "input"
|
|
})) : null, e);
|
|
target.value = "";
|
|
}
|
|
function doUpdateFileList(files) {
|
|
const {
|
|
"onUpdate:fileList": _onUpdateFileList,
|
|
onUpdateFileList
|
|
} = props;
|
|
if (_onUpdateFileList) call(_onUpdateFileList, files);
|
|
if (onUpdateFileList) call(onUpdateFileList, files);
|
|
uncontrolledFileListRef.value = files;
|
|
}
|
|
const mergedMultipleRef = computed(() => props.multiple || props.directory);
|
|
const doChange = (fileAfterChange, event, options = {
|
|
append: false,
|
|
remove: false
|
|
}) => {
|
|
const {
|
|
append,
|
|
remove
|
|
} = options;
|
|
const fileListAfterChange = Array.from(mergedFileListRef.value);
|
|
const fileIndex = fileListAfterChange.findIndex((file) => file.id === fileAfterChange.id);
|
|
if (append || remove || ~fileIndex) {
|
|
if (append) {
|
|
fileListAfterChange.push(fileAfterChange);
|
|
} else if (remove) {
|
|
fileListAfterChange.splice(fileIndex, 1);
|
|
} else {
|
|
fileListAfterChange.splice(fileIndex, 1, fileAfterChange);
|
|
}
|
|
const {
|
|
onChange
|
|
} = props;
|
|
if (onChange) {
|
|
onChange({
|
|
file: fileAfterChange,
|
|
fileList: fileListAfterChange,
|
|
event
|
|
});
|
|
}
|
|
doUpdateFileList(fileListAfterChange);
|
|
}
|
|
};
|
|
function handleFileAddition(fileAndEntries, e) {
|
|
if (!fileAndEntries || fileAndEntries.length === 0) return;
|
|
const {
|
|
onBeforeUpload
|
|
} = props;
|
|
fileAndEntries = mergedMultipleRef.value ? fileAndEntries : [fileAndEntries[0]];
|
|
const {
|
|
max,
|
|
accept
|
|
} = props;
|
|
fileAndEntries = fileAndEntries.filter(({
|
|
file,
|
|
source
|
|
}) => {
|
|
if (source === "dnd" && (accept === null || accept === void 0 ? void 0 : accept.trim())) {
|
|
return matchType(file.name, file.type, accept);
|
|
} else {
|
|
return true;
|
|
}
|
|
});
|
|
if (max) {
|
|
fileAndEntries = fileAndEntries.slice(0, max - mergedFileListRef.value.length);
|
|
}
|
|
const batchId = createId();
|
|
void Promise.all(fileAndEntries.map((_a) => __awaiter(this, [_a], void 0, function* ({
|
|
file,
|
|
entry
|
|
}) {
|
|
var _b;
|
|
const fileInfo = {
|
|
id: createId(),
|
|
batchId,
|
|
name: file.name,
|
|
status: "pending",
|
|
percentage: 0,
|
|
file,
|
|
url: null,
|
|
type: file.type,
|
|
thumbnailUrl: null,
|
|
fullPath: (_b = entry === null || entry === void 0 ? void 0 : entry.fullPath) !== null && _b !== void 0 ? _b : `/${file.webkitRelativePath || file.name}`
|
|
};
|
|
if (!onBeforeUpload || (yield onBeforeUpload({
|
|
file: fileInfo,
|
|
fileList: mergedFileListRef.value
|
|
})) !== false) {
|
|
return fileInfo;
|
|
}
|
|
return null;
|
|
}))).then((fileInfos) => __awaiter(this, void 0, void 0, function* () {
|
|
let nextTickChain = Promise.resolve();
|
|
fileInfos.forEach((fileInfo) => {
|
|
nextTickChain = nextTickChain.then(nextTick).then(() => {
|
|
if (fileInfo) {
|
|
doChange(fileInfo, e, {
|
|
append: true
|
|
});
|
|
}
|
|
});
|
|
});
|
|
yield nextTickChain;
|
|
})).then(() => {
|
|
if (props.defaultUpload) {
|
|
submit();
|
|
}
|
|
});
|
|
}
|
|
function submit(fileId) {
|
|
const {
|
|
method: method4,
|
|
action,
|
|
withCredentials,
|
|
headers,
|
|
data,
|
|
name: fieldName
|
|
} = props;
|
|
const filesToUpload = fileId !== void 0 ? mergedFileListRef.value.filter((file) => file.id === fileId) : mergedFileListRef.value;
|
|
const shouldReupload = fileId !== void 0;
|
|
filesToUpload.forEach((file) => {
|
|
const {
|
|
status
|
|
} = file;
|
|
if (status === "pending" || status === "error" && shouldReupload) {
|
|
if (props.customRequest) {
|
|
customSubmitImpl({
|
|
inst: {
|
|
doChange,
|
|
xhrMap,
|
|
onFinish: props.onFinish,
|
|
onError: props.onError
|
|
},
|
|
file,
|
|
action,
|
|
withCredentials,
|
|
headers,
|
|
data,
|
|
customRequest: props.customRequest
|
|
});
|
|
} else {
|
|
submitImpl({
|
|
doChange,
|
|
xhrMap,
|
|
onFinish: props.onFinish,
|
|
onError: props.onError,
|
|
isErrorState: props.isErrorState
|
|
}, fieldName, file, {
|
|
method: method4,
|
|
action,
|
|
withCredentials,
|
|
responseType: props.responseType,
|
|
headers,
|
|
data
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function getFileThumbnailUrlResolver(file) {
|
|
var _a;
|
|
if (file.thumbnailUrl) return file.thumbnailUrl;
|
|
const {
|
|
createThumbnailUrl
|
|
} = props;
|
|
if (createThumbnailUrl) {
|
|
return (_a = createThumbnailUrl(file.file, file)) !== null && _a !== void 0 ? _a : file.url || "";
|
|
}
|
|
if (file.url) {
|
|
return file.url;
|
|
} else if (file.file) {
|
|
return createImageDataUrl(file.file);
|
|
}
|
|
return "";
|
|
}
|
|
const cssVarsRef = computed(() => {
|
|
const {
|
|
common: {
|
|
cubicBezierEaseInOut: cubicBezierEaseInOut2
|
|
},
|
|
self: {
|
|
draggerColor,
|
|
draggerBorder,
|
|
draggerBorderHover,
|
|
itemColorHover,
|
|
itemColorHoverError,
|
|
itemTextColorError,
|
|
itemTextColorSuccess,
|
|
itemTextColor,
|
|
itemIconColor,
|
|
itemDisabledOpacity,
|
|
lineHeight,
|
|
borderRadius,
|
|
fontSize,
|
|
itemBorderImageCardError,
|
|
itemBorderImageCard
|
|
}
|
|
} = themeRef.value;
|
|
return {
|
|
"--n-bezier": cubicBezierEaseInOut2,
|
|
"--n-border-radius": borderRadius,
|
|
"--n-dragger-border": draggerBorder,
|
|
"--n-dragger-border-hover": draggerBorderHover,
|
|
"--n-dragger-color": draggerColor,
|
|
"--n-font-size": fontSize,
|
|
"--n-item-color-hover": itemColorHover,
|
|
"--n-item-color-hover-error": itemColorHoverError,
|
|
"--n-item-disabled-opacity": itemDisabledOpacity,
|
|
"--n-item-icon-color": itemIconColor,
|
|
"--n-item-text-color": itemTextColor,
|
|
"--n-item-text-color-error": itemTextColorError,
|
|
"--n-item-text-color-success": itemTextColorSuccess,
|
|
"--n-line-height": lineHeight,
|
|
"--n-item-border-image-card-error": itemBorderImageCardError,
|
|
"--n-item-border-image-card": itemBorderImageCard
|
|
};
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled ? useThemeClass("upload", void 0, cssVarsRef, props) : void 0;
|
|
provide(uploadInjectionKey, {
|
|
mergedClsPrefixRef,
|
|
mergedThemeRef: themeRef,
|
|
showCancelButtonRef: toRef(props, "showCancelButton"),
|
|
showDownloadButtonRef: toRef(props, "showDownloadButton"),
|
|
showRemoveButtonRef: toRef(props, "showRemoveButton"),
|
|
showRetryButtonRef: toRef(props, "showRetryButton"),
|
|
onRemoveRef: toRef(props, "onRemove"),
|
|
onDownloadRef: toRef(props, "onDownload"),
|
|
mergedFileListRef,
|
|
triggerClassRef: toRef(props, "triggerClass"),
|
|
triggerStyleRef: toRef(props, "triggerStyle"),
|
|
shouldUseThumbnailUrlRef: toRef(props, "shouldUseThumbnailUrl"),
|
|
renderIconRef: toRef(props, "renderIcon"),
|
|
xhrMap,
|
|
submit,
|
|
doChange,
|
|
showPreviewButtonRef: toRef(props, "showPreviewButton"),
|
|
onPreviewRef: toRef(props, "onPreview"),
|
|
getFileThumbnailUrlResolver,
|
|
listTypeRef: toRef(props, "listType"),
|
|
dragOverRef,
|
|
openOpenFileDialog,
|
|
draggerInsideRef,
|
|
handleFileAddition,
|
|
mergedDisabledRef: formItem.mergedDisabledRef,
|
|
maxReachedRef,
|
|
fileListClassRef: toRef(props, "fileListClass"),
|
|
fileListStyleRef: toRef(props, "fileListStyle"),
|
|
abstractRef: toRef(props, "abstract"),
|
|
acceptRef: toRef(props, "accept"),
|
|
cssVarsRef: inlineThemeDisabled ? void 0 : cssVarsRef,
|
|
themeClassRef: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
|
|
showTriggerRef: toRef(props, "showTrigger"),
|
|
imageGroupPropsRef: toRef(props, "imageGroupProps"),
|
|
mergedDirectoryDndRef: computed(() => {
|
|
var _a;
|
|
return (_a = props.directoryDnd) !== null && _a !== void 0 ? _a : props.directory;
|
|
}),
|
|
onRetryRef: toRef(props, "onRetry")
|
|
});
|
|
const exposedMethods = {
|
|
clear: () => {
|
|
uncontrolledFileListRef.value = [];
|
|
},
|
|
submit,
|
|
openOpenFileDialog
|
|
};
|
|
return Object.assign({
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
draggerInsideRef,
|
|
inputElRef,
|
|
mergedTheme: themeRef,
|
|
dragOver: dragOverRef,
|
|
mergedMultiple: mergedMultipleRef,
|
|
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
|
|
handleFileInputChange
|
|
}, exposedMethods);
|
|
},
|
|
render() {
|
|
var _a, _b;
|
|
const {
|
|
draggerInsideRef,
|
|
mergedClsPrefix,
|
|
$slots,
|
|
directory,
|
|
onRender
|
|
} = this;
|
|
if ($slots.default && !this.abstract) {
|
|
const firstChild = $slots.default()[0];
|
|
if ((_a = firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === null || _a === void 0 ? void 0 : _a[uploadDraggerKey]) {
|
|
draggerInsideRef.value = true;
|
|
}
|
|
}
|
|
const inputNode = h("input", Object.assign({}, this.inputProps, {
|
|
ref: "inputElRef",
|
|
type: "file",
|
|
class: `${mergedClsPrefix}-upload-file-input`,
|
|
accept: this.accept,
|
|
multiple: this.mergedMultiple,
|
|
onChange: this.handleFileInputChange,
|
|
// @ts-expect-error // seems vue-tsc will add the prop, so we can't use expect-error
|
|
webkitdirectory: directory || void 0,
|
|
directory: directory || void 0
|
|
}));
|
|
if (this.abstract) {
|
|
return h(Fragment, null, (_b = $slots.default) === null || _b === void 0 ? void 0 : _b.call($slots), h(Teleport, {
|
|
to: "body"
|
|
}, inputNode));
|
|
}
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
|
return h("div", {
|
|
class: [`${mergedClsPrefix}-upload`, draggerInsideRef.value && `${mergedClsPrefix}-upload--dragger-inside`, this.dragOver && `${mergedClsPrefix}-upload--drag-over`, this.themeClass],
|
|
style: this.cssVars
|
|
}, inputNode, this.showTrigger && this.listType !== "image-card" && h(NUploadTrigger, null, $slots), this.showFileList && h(NUploadFileList, null, $slots));
|
|
}
|
|
});
|
|
const _sfc_main = {
|
|
__name: "SlickOperatorSelect",
|
|
props: /* @__PURE__ */ mergeModels({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
select_placeholder: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
}, {
|
|
"modelValue": {},
|
|
"modelModifiers": {}
|
|
}),
|
|
emits: ["update:modelValue"],
|
|
setup(__props) {
|
|
const { operators } = storeToRefs(usePlanStore());
|
|
const operatorValue = useModel(__props, "modelValue");
|
|
const props = __props;
|
|
const render_op_slick_tag = ({ option, handleClose }) => {
|
|
return h(
|
|
SlickItem,
|
|
{
|
|
key: option.value,
|
|
index: operatorValue.value.findIndex((value) => value == option.value),
|
|
disabled: props.disabled,
|
|
style: "z-index: 999;display: inline;"
|
|
},
|
|
() => render_op_tag({ option, handleClose })
|
|
);
|
|
};
|
|
const deleteRepeat = function(operatorList) {
|
|
for (var i = 0; i < operatorList.length; i++) {
|
|
for (var j = i + 1; j < operatorList.length; j++) {
|
|
if (operatorList[i] == operatorList[j]) {
|
|
operatorList.splice(j--, 1);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return (_ctx, _cache) => {
|
|
const _component_n_select = __unplugin_components_5;
|
|
return openBlock(), createBlock(unref(SlickList), {
|
|
list: operatorValue.value,
|
|
"onUpdate:list": [
|
|
_cache[1] || (_cache[1] = ($event) => operatorValue.value = $event),
|
|
deleteRepeat
|
|
],
|
|
axis: "xy",
|
|
appendTo: ".n-select",
|
|
distance: 5,
|
|
class: "width100",
|
|
group: "operator",
|
|
accept: !props.disabled
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_select, {
|
|
disabled: props.disabled,
|
|
multiple: "",
|
|
filterable: "",
|
|
options: unref(operators),
|
|
placeholder: props.select_placeholder,
|
|
value: operatorValue.value,
|
|
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => operatorValue.value = $event),
|
|
filter: (p, o) => unref(match)(o.label, p),
|
|
"render-label": unref(render_op_label),
|
|
"render-tag": render_op_slick_tag
|
|
}, null, 8, ["disabled", "options", "placeholder", "value", "filter", "render-label"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["list", "accept"]);
|
|
};
|
|
}
|
|
};
|
|
const __unplugin_components_16 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67be031c"]]);
|
|
export {
|
|
__unplugin_components_14,
|
|
__unplugin_components_16,
|
|
__unplugin_components_17,
|
|
__unplugin_components_7
|
|
};
|