mzl-ui
Version:
mzl-ui
1,417 lines • 186 kB
JavaScript
import { useSlots, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, renderSlot, ref, createVNode, Transition, withCtx, Fragment, renderList, toDisplayString, reactive, withDirectives, createTextVNode, withModifiers, pushScopeId, popScopeId, onMounted, createBlock, vShow, render, watchEffect, Teleport, createApp, useCssVars, resolveComponent, TransitionGroup, onBeforeUnmount, getCurrentInstance, inject, watch, nextTick, onUpdated, resolveDynamicComponent, h, defineComponent, provide, markRaw, vModelText } from "vue";
import { ref as ref$1 } from "@vue/reactivity";
var index_vue_vue_type_style_index_0_lang$1 = "";
var index_vue_vue_type_style_index_1_scoped_true_lang = "";
var _export_sfc = (sfc, props2) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props2) {
target[key] = val;
}
return target;
};
const __default__$s = {
name: "mButton"
};
const _sfc_main$A = /* @__PURE__ */ Object.assign(__default__$s, {
props: {
type: {
type: String,
default: "default"
},
disabled: Boolean,
round: Boolean,
size: {
type: String,
default: "default"
},
customColor: {
type: String,
default: ""
},
leftIcon: String,
rightIcon: String,
localing: Boolean
},
setup(__props) {
const props2 = __props;
const mBtnDeaultStyle = {
background: props2.customColor,
border: props2.customColor,
color: "#fff"
};
const $slot = useSlots();
const isClass = computed(() => {
return [
props2.size == "default" ? "mzl-button" : props2.size == "medium" ? "mzl-button-medium" : props2.size == "small" ? "mzl-button-small" : props2.size == "mini" ? "mzl-button-mini" : "mzl-button",
props2.type ? props2.disabled ? "" : `mzl-button-${props2.type}` : "",
props2.disabled ? `mzl-button-${props2.type}-disabled` : "",
{
"mzl-button-round": props2.round
}
];
});
const isIconClass = computed(() => {
return [
"iconfont",
props2.leftIcon || props2.rightIcon,
props2.localing ? props2.leftIcon == "m-icon-loading1" || props2.leftIcon == "m-icon-loading2" || props2.leftIcon == "m-icon-loading3" || props2.leftIcon == "m-icon-loading4" || props2.leftIcon == "m-icon-loading5" || props2.leftIcon == "m-icon-loading6" || props2.rightIcon == "m-icon-loading1" || props2.rightIcon == "m-icon-loading2" || props2.rightIcon == "m-icon-loading3" || props2.rightIcon == "m-icon-loading4" || props2.rightIcon == "m-icon-loading5" || props2.rightIcon == "m-icon-loading6" ? "mzl-icon-loading" : "" : ""
];
});
const styles = computed(() => {
return [
props2.customColor == "" ? {} : props2.type == "default" ? {} : mBtnDeaultStyle
];
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("button", {
class: normalizeClass(unref(isClass)),
style: normalizeStyle(unref(styles))
}, [
__props.leftIcon ? (openBlock(), createElementBlock("i", {
key: 0,
class: normalizeClass(unref(isIconClass))
}, null, 2)) : createCommentVNode("", true),
createElementVNode("span", {
style: normalizeStyle({
"margin-left": unref($slot)["default"] == void 0 ? "0px" : __props.leftIcon ? "4px" : "0px",
"margin-right": unref($slot)["default"] == void 0 ? "0px" : __props.rightIcon ? "4px" : "0px"
})
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 4),
__props.rightIcon ? (openBlock(), createElementBlock("i", {
key: 1,
class: normalizeClass(unref(isIconClass))
}, null, 2)) : createCommentVNode("", true)
], 6);
};
}
});
var mButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-d9588cd2"]]);
mButton.install = (app) => {
app.component(mButton.name, mButton);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$r = "";
const _hoisted_1$u = ["type", "value", "disabled", "placeholder", "autofocus", "readonly", "form"];
const __default__$r = {
name: "mInput"
};
const _sfc_main$z = /* @__PURE__ */ Object.assign(__default__$r, {
props: {
modelValue: String | Number,
disabled: Boolean,
clearable: Boolean,
showPassword: Boolean,
type: String,
size: {
type: String,
default: "default"
},
leftIcon: {
type: String,
default: ""
},
rightIcon: {
type: String,
default: ""
},
placeholder: String,
autofocus: Boolean,
focusColor: {
type: String,
default: "#0e80eb"
},
readonly: Boolean,
form: String
},
emits: ["update:modelValue", "clear", "focus", "blur", "input", "change"],
setup(__props, { emit }) {
const props2 = __props;
const slot = useSlots();
const isStyle = ref({});
const inptype = ref(props2.type);
let focusStyle = {
"width": !!slot.btn ? "auto" : "100%",
"float": !!slot.btn ? "left" : "auto",
"border-radius": !!slot.btn ? "4px 0 0 4px" : "4px",
"border-color": "#dcdfe6f6"
};
isStyle.value = focusStyle;
const focus = (e) => {
focusStyle["border-color"] = "#0e80eb";
isStyle.value = {
"width": !!slot.btn ? "auto" : "100%",
"float": !!slot.btn ? "left" : "auto",
"border-radius": !!slot.btn ? "4px 0 0 4px" : "4px",
"border-color": props2.focusColor
};
emit("focus", e);
};
const blur = (e) => {
isStyle.value = {
"width": !!slot.btn ? "auto" : "100%",
"float": !!slot.btn ? "left" : "auto",
"border-radius": !!slot.btn ? "4px 0 0 4px" : "4px"
};
emit("blur", e);
};
const iptChange = (e) => {
emit("update:modelValue", e.target.value);
emit("input", e.target.value);
};
const change = (e) => {
emit("change", e);
};
const clear = (e) => {
emit("update:modelValue", "");
emit("clear");
};
const showPwd = (e) => {
if (inptype.value == "text") {
inptype.value = "password";
} else {
inptype.value = "text";
}
console.log(e);
};
const isClass = computed(() => {
return [
props2.clearable ? "mzl-input-clearable" : props2.size == "default" ? "mzl-input-default" : `mzl-input-${props2.size}`,
props2.leftIcon != "" ? `mzl-input-left-icon-${props2.size}` : !props2.clearable ? props2.rightIcon != "" ? `mzl-input-right-icon-${props2.size}` : "" : "",
props2.disabled ? "mzl-input-disabled" : "",
props2.type == "password" ? props2.showPassword ? `mzl-input-password-showpassword-${props2.size}` : `mzl-input-password-${props2.size}` : ""
];
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([`mzl-group-input-${__props.size}`]),
style: { "min-width": "auto" }
}, [
createElementVNode("div", {
class: normalizeClass(unref(isClass)),
style: normalizeStyle([isStyle.value, {}])
}, [
!__props.showPassword && __props.leftIcon != "" ? (openBlock(), createElementBlock("i", {
key: 0,
class: normalizeClass(["left-icon", "iconfont", __props.leftIcon])
}, null, 2)) : createCommentVNode("", true),
createElementVNode("input", {
type: inptype.value,
onFocus: focus,
onBlur: blur,
value: __props.modelValue,
onInput: iptChange,
disabled: __props.disabled,
onChange: change,
placeholder: __props.placeholder,
autofocus: __props.autofocus,
readonly: __props.readonly,
form: __props.form
}, null, 40, _hoisted_1$u),
createVNode(Transition, { name: "slide-fade" }, {
default: withCtx(() => [
!__props.showPassword && __props.clearable && __props.modelValue != "" ? (openBlock(), createElementBlock("i", {
key: 0,
class: "clearable-icon iconfont m-icon-close",
onClick: clear
})) : createCommentVNode("", true)
]),
_: 1
}),
!__props.showPassword && __props.rightIcon != "" ? (openBlock(), createElementBlock("i", {
key: 1,
class: normalizeClass(["right-icon", "iconfont", __props.rightIcon])
}, null, 2)) : createCommentVNode("", true),
__props.showPassword ? (openBlock(), createElementBlock("i", {
key: 2,
class: normalizeClass(["password-icon", "iconfont m-icon-browse"]),
onClick: _cache[0] || (_cache[0] = ($event) => showPwd(__props.type))
})) : createCommentVNode("", true)
], 6),
renderSlot(_ctx.$slots, "btn", {}, void 0, true)
], 2);
};
}
});
var mInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-ba8232e2"]]);
mInput.install = (app) => {
app.component(mInput.name, mInput);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$q = "";
const _hoisted_1$t = { key: 0 };
const _hoisted_2$l = { key: 1 };
const _hoisted_3$f = { key: 1 };
const __default__$q = {
name: "mTable"
};
const _sfc_main$y = /* @__PURE__ */ Object.assign(__default__$q, {
props: {
options: {
type: Object,
default: () => {
return {
fileds: [],
datas: []
};
}
},
size: {
type: String,
default: "default"
},
showHeader: {
type: Boolean,
default: true
},
headStyle: {
type: Object,
default: () => {
return {};
}
},
rowStyle: {
type: Object,
default: () => {
return {};
}
},
customClass: String
},
setup(__props) {
const $slot = useSlots();
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([`mzl-table-${__props.size}`, __props.customClass])
}, [
createElementVNode("table", null, [
__props.showHeader ? (openBlock(), createElementBlock("thead", _hoisted_1$t, [
createElementVNode("tr", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options.fileds, (x, n) => {
return openBlock(), createElementBlock("th", {
key: n,
style: normalizeStyle([__props.headStyle, { "text-align": x.align }])
}, [
unref($slot)["head-" + x.field] ? renderSlot(_ctx.$slots, "head-" + x.field, {
key: 0,
scope: x
}, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_2$l, toDisplayString(x.title), 1))
], 4);
}), 128))
])
])) : createCommentVNode("", true),
createElementVNode("tbody", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options.datas, (v, i) => {
return openBlock(), createElementBlock("tr", { key: i }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options.fileds, (m, j) => {
return openBlock(), createElementBlock("td", {
key: j,
style: normalizeStyle([__props.rowStyle, { width: __props.options.fileds[j].width ? __props.options.fileds[j].width : "", "text-align": __props.options.fileds[j].align }])
}, [
unref($slot)[__props.options.fileds[j].field] ? renderSlot(_ctx.$slots, __props.options.fileds[j].field, {
key: 0,
scope: { rowIndex: i, cellIndex: j, row: v }
}, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_3$f, toDisplayString(__props.options.datas[i][__props.options.fileds[j].field]), 1))
], 4);
}), 128))
]);
}), 128))
])
])
], 2);
};
}
});
var mTable = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-24c9ebd4"]]);
mTable.install = (app) => {
app.component(mTable.name, mTable);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$p = "";
const _hoisted_1$s = ["readonly", "placeholder", "disabled", "value"];
const _hoisted_2$k = {
key: 0,
class: "mzl-select-option"
};
const _hoisted_3$e = { class: "mzl-select-option-find" };
const _hoisted_4$c = ["onClick"];
const _hoisted_5$8 = {
key: 0,
class: "iconfont m-icon-select-bold"
};
const __default__$p = {
name: "mSelect"
};
const _sfc_main$x = /* @__PURE__ */ Object.assign(__default__$p, {
props: {
modelValue: String | Array,
placeholder: String,
customClass: String,
disabled: Boolean,
searchable: Boolean,
size: {
type: String,
default: "default"
},
width: {
type: String,
default: "260px"
},
height: {
type: String,
default: ""
},
options: {
type: Array,
default: () => {
return [];
}
},
labelFiled: {
type: String,
default: "label"
},
valueFiled: {
type: String,
default: "value"
},
multiple: Boolean
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props2 = __props;
props2.options.forEach((item, index) => {
if (!props2.multiple) {
item.selected = false;
} else {
props2.modelValue.forEach((item1, index1) => {
if (item[props2.valueFiled] == item1) {
item.selected = true;
}
});
console.log();
}
});
const activeIndex = ref(-1);
const isShow = ref(false);
const rotate = ref("rotate(0deg)");
const optionsData = ref(props2.options || []);
const selVal = ref(props2.multiple ? props2.modelValue : props2.modelValue != "" ? props2.options.filter((item) => {
return item[props2.valueFiled] == props2.modelValue;
})[0][props2.labelFiled] : "");
const fixIcon = reactive({});
const iconClass = computed(() => {
return ["select-icon iconfont m-icon-arrow-down"];
});
const customStyle = computed(() => {
let styles = {};
if (props2.height) {
let height = parseInt(props2.height) < 25 ? "25px" : props2.height;
styles.height = height;
fixIcon.lineHeight = height;
fixIcon.top = 0;
fixIcon.height = "100%";
}
return styles;
});
const selectClass = computed(() => {
return [
`mzl-select-${props2.size}`,
props2.disabled ? `mzl-select-${props2.size}-disabled` : ""
];
});
const selectInputClass = computed(() => {
return [
"mzl-select-input-box",
`mzl-select-input-${props2.size}`,
props2.disabled ? `mzl-select-input-${props2.size}-disabled` : ""
];
});
const blur = (e) => {
isShow.value = false;
rotate.value = "rotate(0deg)";
};
const input = (e) => {
selVal.value = e.target.value;
optionsData.value = [];
let filterList = props2.options.filter((item) => {
return item[props2.labelFiled].indexOf(e.target.value) != -1;
});
filterList.forEach((item, index) => {
optionsData.value.push(item);
});
};
const vClickOutside = {
beforeMount(el) {
let handler = (e) => {
if (!props2.disabled) {
if (!props2.multiple) {
if (el.contains(e.target) && e.target.className.indexOf("mzl-select-option-li") == -1) {
if (!isShow.value) {
isShow.value = !isShow.value;
if (isShow.value) {
rotate.value = "rotate(180deg)";
} else {
rotate.value = "rotate(0deg)";
}
}
} else {
if (isShow.value) {
blur();
}
}
} else {
if (el.contains(e.target)) {
if (!isShow.value) {
isShow.value = !isShow.value;
if (isShow.value) {
rotate.value = "rotate(180deg)";
} else {
rotate.value = "rotate(0deg)";
}
}
} else {
if (isShow.value) {
blur();
}
}
}
}
};
el.handler = handler;
if (typeof document !== "undefined") {
document.addEventListener("click", handler);
}
},
unmounted(el) {
if (typeof document !== "undefined") {
document.removeEventListener("click", el.handler);
}
}
};
let labels = [];
let indexs = [];
const selChange = (item, index) => {
if (!props2.multiple) {
if (!item.disabled) {
activeIndex.value = index;
selVal.value = item[props2.labelFiled];
emit("update:modelValue", item[props2.valueFiled]);
emit("change", { lable: item.label, value: item.value, index });
blur();
}
} else {
if (!item.disabled) {
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val)
return i;
}
return -1;
};
item.selected = !item.selected;
if (item.selected) {
selVal.value.push(item[props2.valueFiled]);
labels.push(item.label);
indexs.push(index);
} else {
selVal.value.splice(selVal.value.indexOf(item[props2.valueFiled]), 1);
labels.splice(labels.indexOf(item.label), 1);
indexs.splice(indexs.indexOf(index), 1);
}
emit("update:modelValue", selVal.value);
emit("change", { lable: labels, value: selVal.value, index: indexs });
}
}
};
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass([unref(selectClass), __props.customClass]),
style: normalizeStyle([
__props.customClass ? {} : { width: parseInt(__props.width) < 100 ? "100px" : __props.width }
])
}, [
createElementVNode("div", {
class: normalizeClass(unref(selectInputClass))
}, [
createElementVNode("input", {
type: "text",
readonly: !__props.searchable,
placeholder: selVal.value == "" ? __props.placeholder : selVal.value,
style: normalizeStyle([__props.customClass ? {} : unref(customStyle)]),
class: normalizeClass([selVal.value == "" ? "mzl-select-input" : "mzl-select-input-value"]),
disabled: __props.disabled,
onInput: input,
value: selVal.value
}, null, 46, _hoisted_1$s),
createElementVNode("i", {
class: normalizeClass(unref(iconClass)),
style: normalizeStyle([{ transform: rotate.value }, unref(fixIcon)])
}, null, 6)
], 2),
createVNode(Transition, { name: "slide-fade" }, {
default: withCtx(() => [
isShow.value ? (openBlock(), createElementBlock("div", _hoisted_2$k, [
createElementVNode("div", _hoisted_3$e, [
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(optionsData.value, (item, index) => {
return openBlock(), createElementBlock("li", {
class: normalizeClass(["mzl-select-option-li", {
"mzl-select-active": activeIndex.value == index || selVal.value == item[__props.labelFiled] || item.selected,
"mzl-select-disabled": item.disabled
}]),
key: index,
onClick: ($event) => selChange(item, index)
}, [
createTextVNode(toDisplayString(item[__props.labelFiled]) + " ", 1),
__props.multiple && item.selected ? (openBlock(), createElementBlock("i", _hoisted_5$8)) : createCommentVNode("", true)
], 10, _hoisted_4$c);
}), 128))
])
])
])) : createCommentVNode("", true)
]),
_: 1
})
], 6)), [
[vClickOutside]
]);
};
}
});
var mSelect = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-997604f4"]]);
mSelect.install = (app) => {
app.component(mSelect.name, mSelect);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$o = "";
const _withScopeId$7 = (n) => (pushScopeId("data-v-8f10669e"), n = n(), popScopeId(), n);
const _hoisted_1$r = /* @__PURE__ */ createTextVNode();
const _hoisted_2$j = /* @__PURE__ */ _withScopeId$7(() => /* @__PURE__ */ createElementVNode("i", { class: "m-icon-arrow-down" }, null, -1));
const _hoisted_3$d = {
key: 0,
class: "mzl-dropdown-item"
};
const _hoisted_4$b = { class: "mzl-dropdown-item-child" };
const _hoisted_5$7 = ["onClick"];
const __default__$o = {
name: "mDropdown"
};
const _sfc_main$w = /* @__PURE__ */ Object.assign(__default__$o, {
props: {
title: String,
trigger: {
type: String,
default: "hover"
},
options: {
type: Array,
default: () => {
return [];
}
},
size: {
type: String,
default: "default"
},
customClass: String
},
emits: ["change"],
setup(__props, { emit }) {
const proprs = __props;
useSlots();
const isShow = ref(false);
reactive({
isOpenStyles: {
height: "0px",
display: "none"
}
});
const mouseover = () => {
if (proprs.trigger == "hover") {
isShow.value = true;
}
};
const mouseleave = () => {
if (proprs.trigger == "hover") {
isShow.value = false;
}
};
const handleChange = (item, index) => {
emit("change", item, index);
isShow.value = false;
};
const handleClick = () => {
if (proprs.trigger == "click") {
isShow.value = !isShow.value;
}
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([`mzl-dropdown-${__props.size}`, __props.customClass]),
onMouseover: mouseover,
onMouseleave: mouseleave,
onClick: handleClick
}, [
createElementVNode("div", {
class: normalizeClass([`mzl-dropdown-${__props.size}-menu`])
}, [
renderSlot(_ctx.$slots, "Img"),
createElementVNode("span", null, toDisplayString(__props.title), 1),
_hoisted_1$r,
_hoisted_2$j
], 2),
createVNode(Transition, { name: "slide-fade" }, {
default: withCtx(() => [
isShow.value ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
createElementVNode("div", _hoisted_4$b, [
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
return openBlock(), createElementBlock("li", {
key: index,
onClick: withModifiers(($event) => handleChange(item, index), ["stop"])
}, [
createElementVNode("i", {
class: normalizeClass(item.icon)
}, null, 2),
createTextVNode(" " + toDisplayString(item.label), 1)
], 8, _hoisted_5$7);
}), 128))
])
])
])) : createCommentVNode("", true)
]),
_: 1
})
], 34);
};
}
});
var mDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-8f10669e"]]);
mDropdown.install = (app) => {
app.component(mDropdown.name, mDropdown);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$n = "";
const _hoisted_1$q = ["onClick"];
const __default__$n = {
name: "mRadio"
};
const _sfc_main$v = /* @__PURE__ */ Object.assign(__default__$n, {
props: {
modelValue: String | Number,
size: {
type: String,
default: "default"
},
options: {
type: Array,
default: () => {
return [];
}
},
labelFiled: {
type: String,
default: "label"
},
valueFiled: {
type: String,
default: "value"
},
customColor: String,
customClass: String,
inline: {
type: Boolean,
default: true
}
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props2 = __props;
const modelVal = ref$1(props2.modelValue || "");
const change = (item, index) => {
if (!item.disabled) {
modelVal.value = item[props2.valueFiled];
emit("update:modelValue", item[props2.valueFiled]);
emit("change", { "value": item[props2.valueFiled], "index": index });
}
};
ref$1(0);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([`mzl-radio-${__props.size}`, __props.customClass])
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
return openBlock(), createElementBlock("label", {
key: index,
class: normalizeClass([{ "mzl-radio-active": modelVal.value == item[__props.valueFiled] }, item.disabled ? modelVal.value == item[__props.valueFiled] ? "mzl-radio-active-disabled" : "mzl-radio-disabled" : ""]),
onClick: ($event) => change(item, index),
style: normalizeStyle({ "display": __props.inline ? "inline-block" : "table", "margin-bottom": __props.inline ? "0" : __props.size == "small" ? "8px" : __props.size == "mini" ? "6px" : "10px" })
}, [
createElementVNode("span", {
class: "mzl-radio-round",
style: normalizeStyle({ "border-color": __props.customColor == "" ? "" : item.disabled ? "" : modelVal.value != item[__props.valueFiled] ? "" : __props.customColor, "background": __props.customColor == "" ? "" : item.disabled ? "" : modelVal.value != item[__props.valueFiled] ? "" : __props.customColor })
}, null, 4),
createElementVNode("span", {
style: normalizeStyle({ "color": __props.customColor == "" ? "" : item.disabled ? "" : modelVal.value != item[__props.valueFiled] ? "" : __props.customColor })
}, toDisplayString(item[__props.labelFiled]), 5)
], 14, _hoisted_1$q);
}), 128))
], 2);
};
}
});
var mRadio = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-0d85fe9a"]]);
mRadio.install = (app) => {
app.component(mRadio.name, mRadio);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$m = "";
const _hoisted_1$p = ["onClick"];
const __default__$m = {
name: "mCheckbox"
};
const _sfc_main$u = /* @__PURE__ */ Object.assign(__default__$m, {
props: {
modelValue: {
type: Array,
default: () => {
return [];
}
},
size: {
type: String,
default: "default"
},
options: {
type: Array,
default: () => {
return [];
}
},
labelFiled: {
type: String,
default: "label"
},
valueFiled: {
type: String,
default: "value"
},
inline: {
type: Boolean,
default: true
},
customColor: String,
customClass: String
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props2 = __props;
const checkOptions = ref(props2.options || []);
checkOptions.value.forEach((item) => {
item.checked = false;
props2.modelValue.forEach((item1) => {
if (item[props2.valueFiled] === item1) {
item.checked = true;
}
});
});
const checkChange = (item, index) => {
let checkData = [];
if (!item.disabled) {
item.checked = !item.checked;
}
checkOptions.value.forEach((item2, index2) => {
if (item2.checked) {
checkData.push(item2[props2.valueFiled]);
}
});
emit("update:modelValue", checkData);
emit("change", { "value": checkData, "index": index });
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([`mzl-checkbox-${__props.size}`, __props.customClass])
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(checkOptions.value, (item, index) => {
return openBlock(), createElementBlock("label", {
key: index,
class: normalizeClass(["mzl-checkbox-label", [{ "mzl-checkbox-label-active": item.checked }, item.checked ? item.disabled ? "mzl-checkbox-label-active-disabled" : "" : item.disabled ? "mzl-checkbox-label-disabled" : ""]]),
onClick: ($event) => checkChange(item, index),
style: normalizeStyle({ "display": __props.inline ? "inline-block" : "table", "margin-bottom": __props.inline ? "0" : __props.size == "small" ? "8px" : __props.size == "mini" ? "6px" : "10px" })
}, [
createElementVNode("span", {
class: "mzl-checkbox-selectbox",
style: normalizeStyle({ "border-color": __props.customColor == "" ? "" : item.disabled ? "" : item.checked ? __props.customColor : "", "background": __props.customColor == "" ? "" : item.disabled ? "" : item.checked ? __props.customColor : "" })
}, null, 4),
createElementVNode("span", {
style: normalizeStyle({ "color": __props.customColor == "" ? "" : item.disabled ? "" : item.checked ? __props.customColor : "" })
}, toDisplayString(item[__props.labelFiled]), 5)
], 14, _hoisted_1$p);
}), 128))
], 2);
};
}
});
var mCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-218a4f87"]]);
mCheckbox.install = (app) => {
app.component(mCheckbox.name, mCheckbox);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$l = "";
const _hoisted_1$o = { class: "text" };
const _sfc_main$t = {
props: {
text: {
type: [String, Object],
default: ""
},
type: {
type: String,
default: "info"
},
icon: String,
textColor: String,
bgColor: String,
customClass: String
},
setup(__props) {
const props2 = __props;
const state = reactive({
style: {
info: {
icon: props2.icon || "m-icon-prompt-filling",
color: "#505050",
backgroundColor: "rgb(229 227 224)",
borderColor: "rgb(229 227 224)"
},
warn: {
icon: props2.icon || "m-icon-warning",
color: "#f57b29",
backgroundColor: "rgb(243 233 220)",
borderColor: "rgb(243 233 220)"
},
error: {
icon: props2.icon || "m-icon-delete-filling",
color: "#ec3437",
backgroundColor: "rgb(251 228 228)",
borderColor: "rgb(251 228 228)"
},
success: {
icon: props2.icon || "m-icon-success",
color: "#09b63d",
backgroundColor: "rgb(223 243 212)",
borderColor: "rgb(223 243 212)"
},
custom: {
icon: props2.icon,
color: props2.textColor,
backgroundColor: props2.bgColor,
borderColor: props2.bgColor
}
}
});
const isShow = ref(false);
const { style } = state;
const isText = computed(() => {
return typeof props2.text === "string";
});
onMounted(() => {
isShow.value = true;
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, { name: "slide-fade" }, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
class: normalizeClass(["mzl-message", __props.customClass]),
style: normalizeStyle(unref(style)[__props.type])
}, [
unref(isText) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createElementVNode("i", {
class: normalizeClass([unref(style)[__props.type].icon])
}, null, 2),
createElementVNode("span", _hoisted_1$o, toDisplayString(__props.text), 1)
], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
], 6), [
[vShow, isShow.value]
])
]),
_: 3
});
};
}
};
var mMessage = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-4860a73a"]]);
var Message = ({ text, type, timeout, icon, textColor, bgColor, customClass }) => {
const div = typeof document !== "undefined" ? typeof document.createElement !== "undefined" ? document.createElement("div") : "" : "";
div.setAttribute("class", "mzlui-meassage-container");
if (typeof document !== "undefined") {
document.body.appendChild(div);
}
let timer = null;
const vnode = createVNode(mMessage, { text, type, timeout, icon, textColor, bgColor, customClass }, [text]);
render(vnode, div);
clearTimeout(timer);
timer = setTimeout(() => {
render(null, div);
if (typeof document !== "undefined") {
document.body.removeChild(div);
}
clearTimeout(timer);
}, timeout || 2500);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$k = "";
const _hoisted_1$n = { class: "mzl-wrapper" };
const _hoisted_2$i = { class: "mzl-header" };
const _hoisted_3$c = { class: "mzl-body" };
const _hoisted_4$a = { class: "mzl-footer" };
const _sfc_main$s = {
props: {
title: {
type: String,
default: "\u63D0\u793A"
},
text: {
type: String,
default: ""
},
icon: {
type: String,
default: "m-icon-warning"
},
confirmText: {
type: String,
default: "\u786E\u8BA4"
},
cancelText: {
type: String,
default: "\u53D6\u6D88"
},
confirmShow: {
type: Boolean,
default: true
},
cancelShow: {
type: Boolean,
default: true
},
closeShow: {
type: Boolean,
default: true
},
customClass: String,
confirmCallback: {
type: Function,
default: () => {
}
},
cancelCallback: {
type: Function,
default: () => {
}
}
},
setup(__props) {
const isShow = ref(false);
onMounted(() => {
isShow.value = true;
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, { name: "fade" }, {
default: withCtx(() => [
isShow.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["mzl-confirm", __props.customClass])
}, [
createElementVNode("div", _hoisted_1$n, [
createElementVNode("div", _hoisted_2$i, [
createElementVNode("h3", null, toDisplayString(__props.title), 1),
__props.closeShow ? (openBlock(), createElementBlock("a", {
key: 0,
href: "JavaScript:;",
class: "m-icon-close",
onClick: _cache[0] || (_cache[0] = (...args) => __props.cancelCallback && __props.cancelCallback(...args))
})) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_3$c, [
createElementVNode("i", {
class: normalizeClass(["icon-warning", __props.icon])
}, null, 2),
createElementVNode("span", null, toDisplayString(__props.text), 1)
]),
createElementVNode("div", _hoisted_4$a, [
__props.cancelShow ? (openBlock(), createBlock(unref(mButton), {
key: 0,
onClick: __props.cancelCallback,
size: "small",
style: { "margin-right": "10px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.cancelText), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
__props.confirmShow ? (openBlock(), createBlock(unref(mButton), {
key: 1,
onClick: __props.confirmCallback,
size: "small",
type: "primary"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.confirmText), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true)
])
])
], 2)) : createCommentVNode("", true)
]),
_: 1
});
};
}
};
var mConfirm = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-158c7471"]]);
const divNode = createVNode("div", { class: "mzlui-confirm-container" });
render(divNode, typeof document !== "undefined" ? document.body : "");
const container = divNode.el;
const Confirm = ({ title, text, icon, confirmText, cancelText, confirmShow, cancelShow, closeShow, customClass }) => {
if (typeof document !== "undefined") {
document.body.style = "overflow:hidden";
}
return new Promise((resolve, reject) => {
const confirmCallback = () => {
resolve();
render(null, container);
if (typeof document !== "undefined") {
document.body.style = "overflow:initial";
}
};
const cancelCallback = () => {
reject();
render(null, container);
if (typeof document !== "undefined") {
document.body.style = "overflow:initial";
}
};
const VNode = createVNode(mConfirm, { title, text, icon, confirmText, cancelText, confirmShow, cancelShow, closeShow, customClass, confirmCallback, cancelCallback });
render(VNode, container);
});
};
var index_vue_vue_type_style_index_0_scoped_true_lang$j = "";
const _hoisted_1$m = { class: "mzl-modal-header" };
const _hoisted_2$h = { key: 1 };
const _hoisted_3$b = { class: "mzl-modal-content" };
const __default__$l = {
name: "mModal"
};
const _sfc_main$r = /* @__PURE__ */ Object.assign(__default__$l, {
props: {
title: {
type: String,
default: "\u6807\u9898"
},
modelValue: Boolean,
align: {
type: String,
default: ""
},
scrollLock: {
type: Boolean,
default: true
},
width: {
type: String,
default: "35%"
},
top: {
type: String,
default: "15%"
},
showClose: {
type: Boolean,
default: true
},
closeOnModal: {
type: Boolean,
default: true
},
customClass: String
},
emits: ["update:modelValue", "close"],
setup(__props, { emit }) {
const props2 = __props;
const $slot = useSlots();
const close = () => {
emit("close");
emit("update:modelValue", false);
};
onMounted(() => {
watchEffect(() => {
if (props2.modelValue) {
if (props2.scrollLock) {
if (typeof document !== "undefined") {
document.body.style["overflow"] = "hidden";
}
}
} else {
if (typeof document !== "undefined") {
document.body.style["overflow"] = "initial";
}
}
});
});
const closeModal = (e) => {
if (props2.closeOnModal) {
if (e.target.className == "mzl-modal-default") {
emit("update:modelValue", false);
emit("close");
}
}
};
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, { to: "body" }, [
createVNode(Transition, { name: "fade" }, {
default: withCtx(() => [
__props.modelValue ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["mzl-modal-default", __props.customClass]),
onClick: _cache[0] || (_cache[0] = ($event) => closeModal($event))
}, [
createElementVNode("div", {
class: "mzl-modal-contentbox",
style: normalizeStyle({ "width": __props.width, "top": __props.top })
}, [
createElementVNode("div", _hoisted_1$m, [
createElementVNode("p", {
class: "mzl-modal-title",
style: normalizeStyle({ "text-align": __props.align == "center" ? __props.align : "" })
}, [
unref($slot)["header"] ? renderSlot(_ctx.$slots, "header", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("span", _hoisted_2$h, toDisplayString(__props.title), 1))
], 4),
__props.showClose ? (openBlock(), createElementBlock("i", {
key: 0,
class: "mzl-modal-close m-icon-close",
onClick: close
})) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_3$b, [
renderSlot(_ctx.$slots, "content", {}, void 0, true)
]),
createElementVNode("div", {
class: "mzl-modal-footer",
style: normalizeStyle({ "text-align": __props.align == "center" ? __props.align : "" })
}, [
renderSlot(_ctx.$slots, "footer", {}, void 0, true)
], 4)
], 4)
], 2)) : createCommentVNode("", true)
]),
_: 3
})
]);
};
}
});
var mModal = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-24eec86e"]]);
mModal.install = (app) => {
app.component(mModal.name, mModal);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$i = "";
const _hoisted_1$l = { class: "mzl-drawer-contain-box" };
const _hoisted_2$g = { key: 2 };
const _hoisted_3$a = {
key: 3,
class: "mzl-drawer-header-btn"
};
const _hoisted_4$9 = {
key: 1,
class: "mzl-drawer-contain-box-footer"
};
const _hoisted_5$6 = { key: 1 };
const __default__$k = {
name: "mDrawer"
};
const _sfc_main$q = /* @__PURE__ */ Object.assign(__default__$k, {
props: {
modelValue: Boolean,
title: {
type: String,
default: "\u6807\u9898"
},
width: {
type: String,
default: "30%"
},
height: {
type: String,
default: "40%"
},
direction: {
type: String,
default: "left"
},
closeOnModal: {
type: Boolean,
default: true
},
showHeader: {
type: Boolean,
default: true
},
showFooter: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
confirmText: {
type: String,
default: "\u786E\u5B9A"
},
cancelText: {
type: String,
default: "\u53D6\u6D88"
},
confirmShow: {
type: Boolean,
default: true
},
cancelShow: {
type: Boolean,
default: true
},
customClass: String
},
emits: ["update:modelValue", "close", "confirm", "cancel"],
setup(__props, { emit }) {
const props2 = __props;
const $slot = useSlots();
const styles = computed(() => {
return [
props2.direction == "left" ? { "top": 0, "left": 0, "width": props2.width, "height": "100%" } : props2.direction == "top" ? { "top": 0, "left": 0, "width": "100%", "height": props2.height } : props2.direction == "right" ? { "top": 0, "right": 0, "width": props2.width, "height": "100%" } : props2.direction == "bottom" ? { "bottom": 0, "left": 0, "width": "100%", "height": props2.height } : {}
];
});
const animateName = computed(() => {
return props2.direction == "left" ? "slide-left" : props2.direction == "top" ? "slide-top" : props2.direction == "right" ? "slide-right" : props2.direction == "bottom" ? "slide-bottom" : "";
});
const close = () => {
emit("update:modelValue", false);
emit("close");
};
const confirmBtn = () => {
emit("confirm");
};
const cancelBtn = () => {
emit("cancel");
};
watchEffect(() => {
if (props2.modelValue) {
if (typeof document !== "undefined") {
document.body.style = "overflow:hidden";
}
} else {
if (typeof document !== "undefined") {
document.body.style = "overflow:initial";
}
}
});
const closeOfModal = (e) => {
if (props2.closeOnModal) {
if (e.target.className == "mzl-drawer-pupop") {
emit("update:modelValue", false);
emit("close");
}
}
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(Transition, { name: "fade-pupop" }, {
default: withCtx(() => [
__props.modelValue ? (openBlock(), createElementBlock("div", {
key: 0,
class: "mzl-drawer-pupop",
onClick: _cache[0] || (_cache[0] = ($event) => closeOfModal($event))
})) : createCommentVNode("", true)
]),
_: 1
}),
createVNode(Transition, { name: unref(animateName) }, {
default: withCtx(() => [
__props.modelValue ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["mzl-drawer-contain", __props.customClass]),
style: normalizeStyle(unref(styles))
}, [
createElementVNode("div", _hoisted_1$l, [
__props.showHeader ? (openBlock(), createElementBlock("div", {
key: 0,
class: "mzl-drawer-contain-box-header",
style: normalizeStyle({ "padding": __props.showClose ? "0 20px 0 45px" : "0 20px 0 20px" })
}, [
unref($slot)["header"] ? renderSlot(_ctx.$slots, "header", { key: 0 }, void 0, true) : createCommentVNode("", true),
__props.showClose ? (openBlock(), createElementBlock("i", {
key: 1,
class: "m-icon-close",
onClick: close
})) : createCommentVNode("", true),
!unref($slot)["header"] ? (openBlock(), createElementBlock("span", _hoisted_2$g, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
!unref($slot)["header"] ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
__props.cancelShow ? (openBlock(), createBlock(unref(mButton), {
key: 0,
size: "small",
style: normalizeStyle({ "margin-right": __props.confirmShow ? "10px" : "0" }),
onClick: cancelBtn
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.cancelText), 1)
]),
_: 1
}, 8, ["style"])) : createCommentVNode("", true),
__props.confirmShow ? (openBlock(), createBlock(unref(mButton), {
key: 1,
size: "small",
type: "primary",
onClick: confirmBtn
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.confirmText), 1)
]),
_: 1
})) : createCommentVNode("", true)
])) : createCommentVNode("", true)
], 4)) : createCommentVNode("", true),
createElementVNode("div", {
class: "mzl-drawer-contain-box-content",
style: normalizeStyle({ "height": __props.showHeader ? __props.showFooter ? "calc(100% - 110px)" : "calc(100% - 55px)" : __props.showFooter ? "calc(100% - 55px)" : "100%" })
}, [
renderSlot(_ctx.$slots, "content", {}, void 0, true)
], 4),
__props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
unref($slot)["footer"] ? renderSlot(_ctx.$slots, "footer", { key: 0 }, void 0, true) : (openBlock(), createElementBlock("span", _hoisted_5$6, "\u4F60\uFF0C\u6211\u751F\u547D\u4E2D\u4E00\u4E2A\u91CD\u8981\u7684\u8FC7\u5BA2\uFF0C\u4E4B\u6240\u4EE5\u662F\u8FC7\u5BA2\uFF0C\u56E0\u4E3A\u4F60\u672A\u66FE\u4E3A\u6211\u505C\u7559\uFF01"))
])) : createCommentVNode("", true)
])
], 6)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["name"])
], 64);
};
}
});
var mDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-cdbb0402"]]);
mDrawer.install = (app) => {
app.component(mDrawer.name, mDrawer);
};
var index_vue_vue_type_style_index_0_scoped_true_lang$h = "";
var index_vue_vue_type_style_index_1_lang = "";
const _hoisted_1$k = ["src"];
const _hoisted_2$f = { key: 2 };
const _sfc_main$p = {
props: {
obj: Object
},
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, { name: "fade-pupop" }, {
default: withCtx(() => [
__props.obj.show ? (openBlock(), createElementBlock("div", {
key: 0,
class: "mzl-loading",
style: normalizeStyle({ "position": __prop