ming-ui-plus/lib/index.esm.js

项目地址是ming-ui，由于该名称无法上传npmjs，添加了plus修饰。 ``` yarn add ming-ui-plus -S // 或者 npm install ming-ui-plus -S ```

import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, inject, h, provide, ref, getCurrentInstance, createElementVNode, withDirectives, vModelCheckbox, createTextVNode, toDisplayString, reactive, toRefs, watch, resolveComponent, createVNode, withCtx, Fragment, renderList, createBlock, onMounted, onUnmounted, Transition, normalizeStyle, vShow, render as render$a, resolveDynamicComponent } from 'vue';

var script$9 = defineComponent({
    props: {
        type: {
            type: String,
            default: "primary",
            validator: (val) => {
                return [
                    "primary",
                    "success",
                    "warning",
                    "danger",
                    "default",
                    "info",
                ].includes(val);
            },
        },
        icon: {
            type: String,
            default: "",
        },
        disabled: Boolean,
        loading: Boolean,
        round: Boolean,
        circle: Boolean,
    },
    name: "MButton",
    emits: ['click'],
    setup(props, ctx) {
        const styleClass = computed(() => {
            return [
                "m-button",
                "m-button--" + props.type,
                { "is-disabled": props.disabled },
                { "is-loading": props.loading },
                { "is-round": props.round },
                { "is-circle": props.circle },
            ];
        });
        const handleClick = (e) => {
            ctx.emit("click", e);
        };
        return { styleClass, handleClick };
    },
});

const _hoisted_1$5 = {
  key: 0,
  class: "m-icon-loading"
};
const _hoisted_2$3 = { key: 2 };

function render$9(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("button", {
    class: normalizeClass(_ctx.styleClass),
    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
  }, [
    createCommentVNode(" 处理loading状态时 显示loading图标 "),
    (_ctx.loading)
      ? (openBlock(), createElementBlock("i", _hoisted_1$5))
      : createCommentVNode("v-if", true),
    createCommentVNode(" 不存在loading状态时 才显示icon "),
    (_ctx.icon && !_ctx.loading)
      ? (openBlock(), createElementBlock("i", {
          key: 1,
          class: normalizeClass(_ctx.icon)
        }, null, 2 /* CLASS */))
      : createCommentVNode("v-if", true),
    (_ctx.$slots.default)
      ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
          renderSlot(_ctx.$slots, "default")
        ]))
      : createCommentVNode("v-if", true)
  ], 2 /* CLASS */))
}

script$9.render = render$9;
script$9.__file = "packages/button/src/button.vue";

script$9.install = (app) => {
    app.component(script$9.name, script$9);
};
const _Button = script$9;

var script$8 = defineComponent({
    name: "MIcon",
    props: {
        name: {
            type: String,
            default: "",
        },
    },
});

function render$8(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("i", {
    class: normalizeClass(`m-icon-${_ctx.name}`)
  }, null, 2 /* CLASS */))
}

script$8.render = render$8;
script$8.__file = "packages/icon/src/icon.vue";

script$8.install = (app) => {
    app.component(script$8.name, script$8);
};
const _Icon = script$8;

var script$7 = defineComponent({
    name: "MButtonGroup",
    props: {
        type: {
            type: String,
            default: "",
            validator: (val) => {
                return [
                    "primary",
                    "success",
                    "warning",
                    "danger",
                    "default",
                    "info",
                ].includes(val);
            },
        },
    },
    setup(props) {
        const styleClass = computed(() => {
            return [
                "m-button-group",
                props.type ? "m-button-group--" + props.type : "",
            ];
        });
        return {
            styleClass
        };
    }
});

function render$7(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.styleClass)
  }, [
    renderSlot(_ctx.$slots, "default")
  ], 2 /* CLASS */))
}

script$7.render = render$7;
script$7.__file = "packages/button/src/button-group.vue";

script$7.install = (app) => {
    app.component(script$7.name, script$7);
};
const _ButtonGroup = script$7;

var Col = defineComponent({
    name: "MCol",
    props: {
        tag: {
            type: String,
            default: "div",
        },
        span: {
            type: Number,
            default: 24,
        },
        offset: {
            type: Number,
            default: 0,
        },
        xs: {
            type: Number,
            default: 0,
        },
        sm: {
            type: Number,
            default: 0,
        },
        md: {
            type: Number,
            default: 0,
        },
        lg: {
            type: Number,
            default: 0,
        },
        xl: {
            type: Number,
            default: 0,
        },
    },
    setup(props, { slots }) {
        const gutter = inject("ZRow", 0);
        let styleClass = computed(() => {
            const post = ["span", "offset"];
            const allClass = [];
            post.forEach((item) => {
                const size = props[item];
                if (typeof size === "number" && size > 0) {
                    if (size <= 24) {
                        allClass.push(`m-col-${item}-${props[item]}`);
                    }
                    else {
                        allClass.push(`m-col-${item}-24`);
                    }
                }
            });
            const sizes = ["xs", "sm", "md", "lg", "xl"];
            sizes.forEach((size) => {
                if (typeof props[size] === "number" && props[size] > 0) {
                    allClass.push(`m-col-${size}-${props[size]}`);
                }
            });
            return ["m-col", ...allClass];
        });
        const styles = computed(() => {
            if (gutter) {
                return {
                    paddingLeft: gutter / 2 + "px",
                    paddingRight: gutter / 2 + "px",
                };
            }
        });
        return () => {
            return h(props.tag, {
                class: styleClass.value,
                style: styles.value,
            }, slots.default?.());
        };
    },
});

Col.install = (app) => {
    app.component(Col.component, Col);
};

var Row = defineComponent({
    name: "MRow",
    props: {
        tag: {
            type: String,
            default: "div",
        },
        gutter: {
            type: Number,
            default: 0,
        },
        justify: {
            type: String,
            default: "start",
        },
    },
    setup(props, { slots }) {
        const styleClass = computed(() => [
            "m-row",
            props.justify !== "start" ? `is-justify-${props.justify}` : "",
        ]);
        provide("ZRow", props.gutter);
        const styles = computed(() => {
            if (props.gutter) {
                return {
                    marginLeft: -(props.gutter / 2) + "px",
                    marginRight: -(props.gutter / 2) + "px",
                };
            }
        });
        return () => {
            return h(props.tag, { class: styleClass.value, style: styles.value }, slots.default?.());
        };
    },
});

Row.install = (app) => {
    app.component(Row.component, Row);
};

const useCheckbox = (props) => {
    let isCheckedClass = ref(false);
    // 1:v-model绑定的属性；2:checked属性；3:处理 change 事件
    // 1.从父级传递过来的modelvalue，子组件可以接收，但是无法直接修改并返回，需要借助计算属性，将modelValue进行转化，
    // 使用计算属性的get、set方法，获取值和修改值。 在set里面通过emit派发事件，给父组件返回数据
    // 添加checkboxGroup传递的值
    const { isGroup, checkboxGroup } = useCheckboxGroup();
    const checkboxGroupValue = computed(() => 
    // checkboxGroup.modelValue是checkboxGroup中通过computed获取的props的modelValue的值
    // 如果isGroup为真，说明 checkboxGroup 上设置了v-model
    isGroup ? checkboxGroup.modelValue?.value : props.modelValue);
    const { emit } = getCurrentInstance();
    const model = computed({
        get() {
            // 先判断是否存在checkboxGroupValue数据，group组数据
            return isGroup ? checkboxGroupValue.value : props.modelValue;
        },
        set(newVal) {
            if (isGroup) {
                return checkboxGroup.changeEvent(newVal);
            }
            emit("update:modelValue", newVal);
        },
    });
    // 2.checkbox的 checked 属性设置，更新checkbox的value值，同时更新checked值
    const isChecked = computed(() => {
        const value = model.value;
        // 判断checkboxGroup中选中的值是哪些
        if (Array.isArray(value)) {
            isCheckedClass.value = value.includes(props.label);
            return value.includes(props.label);
        }
        else {
            isCheckedClass.value = value;
            return value;
        }
    });
    // 3 定义checkbox 内 change事件
    const checkboxEvent = (e) => {
        // console.log("checkboxEvent", e.target);
        const target = e.target;
        const changeEventVal = target.checked ? true : false;
        // 通过emit【change】,可以触发到父级定义的event事件
        emit("change", changeEventVal);
    };
    return { model, isChecked, checkboxEvent, isCheckedClass };
};
// 通过checkboxGroup给内部子组件checkbox 注入值
const useCheckboxGroup = () => {
    const checkboxGroup = inject("MCheckboxGroup", {});
    const isGroup = checkboxGroup.name === "MCheckboxGroup";
    return {
        checkboxGroup,
        isGroup,
    };
};
var script$6 = defineComponent({
    name: "MCheckbox",
    props: {
        name: String,
        indeterminate: Boolean,
        checked: Boolean,
        disabled: Boolean,
        label: [String, Number, Boolean],
        modelValue: [String, Number, Boolean],
    },
    emits: ["update:modelValue", "change"],
    setup(props) {
        return useCheckbox(props);
    },
});

const _hoisted_1$4 = { class: "m-checkbox__input" };
const _hoisted_2$2 = ["value", "checked", "name", "disabled", "indeterminate"];
const _hoisted_3$1 = { class: "m-checkbox__label" };

function render$6(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("label", {
    class: normalizeClass(["m-checkbox", [_ctx.isCheckedClass ? 'is-checked': '']])
  }, [
    createElementVNode("span", _hoisted_1$4, [
      withDirectives(createElementVNode("input", {
        type: "checkbox",
        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.model) = $event)),
        value: _ctx.label,
        checked: _ctx.isChecked,
        name: _ctx.label,
        disabled: _ctx.disabled,
        indeterminate: _ctx.indeterminate,
        onChange: _cache[1] || (_cache[1] = (...args) => (_ctx.checkboxEvent && _ctx.checkboxEvent(...args)))
      }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_2$2), [
        [vModelCheckbox, _ctx.model]
      ]),
      createCommentVNode(" vue3中input需要绑定下value的值，现在默认v-model是给modelValue设置值。 ")
    ]),
    createElementVNode("span", _hoisted_3$1, [
      renderSlot(_ctx.$slots, "default", {}, () => [
        createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)
      ])
    ])
  ], 2 /* CLASS */))
}

script$6.render = render$6;
script$6.__file = "packages/checkbox/src/checkbox.vue";

script$6.install = (app) => {
    app.component(script$6.name, script$6);
};
const _Checkbox = script$6;

var script$5 = defineComponent({
  name: "MCheckboxGroup",
  props: {
    modelValue: Array,
  },
  emits: ["change", "update:modelValue"],
  setup(props, { emit }) {
    const modelValue = computed(() => props.modelValue);
    const changeEvent = (val) => {
      emit("change", val); // 更新change事件的val值
      emit("update:modelValue", val); //更新v-model绑定的modelValue
    };
    provide("MCheckboxGroup", {
      name: "MCheckboxGroup",
      modelValue,
      changeEvent,
    });
  },
});

const _hoisted_1$3 = { class: "m-checkbox-group" };

function render$5(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", _hoisted_1$3, [
    renderSlot(_ctx.$slots, "default")
  ]))
}

script$5.render = render$5;
script$5.__file = "packages/checkbox/src/checkbox-group.vue";

script$5.install = (app) => {
    app.component(script$5.name, script$5);
};
const _CheckboxGroup = script$5;

const useCheck = (props, panelState) => {
    const keyProp = computed(() => props.props.key);
    const labelProp = computed(() => props.props.label);
    const disabledProp = computed(() => props.props.disabled);
    const { emit } = getCurrentInstance();
    // 控制半选，如果选中的一部分数据，则title边上的选择框是半选状态
    const computedIndeterminate = ref(false);
    // 过滤掉 有disabled属性的选项
    const getCheckableData = () => {
        return props.data.filter((item) => !item[disabledProp.value]);
    };
    let checkableData = getCheckableData();
    // 点击是否进行全选和取消全选
    const handleIsAllChecked = (val) => {
        panelState.isAllChecked = val;
        console.log(checkableData, panelState.checked, props.data, "全选和取消全选");
        panelState.checked = val
            ? checkableData.map((item) => item[keyProp.value])
            : [];
    };
    watch(() => props.data, (newVal, oldVal) => {
        checkableData = getCheckableData();
        // 原来选中的值
        const stashChecked = newVal.filter((item) => panelState.checked.includes(item.key));
        if (stashChecked.length > 0) {
            panelState.checked = stashChecked.map((item) => item.key);
        }
        else {
            panelState.checked = [];
        }
    });
    watch(() => panelState.checked, (newVal, oldVal) => {
        // 监控显示是否需要全选状态
        let isAllCheckedState = checkableData
            .map((item) => item[keyProp.value])
            .every((item) => panelState.checked.includes(item));
        panelState.isAllChecked = isAllCheckedState;
        // 监控是否需要显示半选状态
        if (newVal.length > 0 && !isAllCheckedState) {
            computedIndeterminate.value = true;
        }
        else {
            computedIndeterminate.value = false;
        }
        emit("checked-change", newVal);
    }, { immediate: true });
    return {
        keyProp,
        labelProp,
        disabledProp,
        computedIndeterminate,
        handleIsAllChecked,
    };
};
var script$4 = defineComponent({
    name: "MTransferPanel",
    components: { MCheckboxGroup: _CheckboxGroup, MCheckbox: _Checkbox },
    props: {
        title: {
            type: String,
        },
        data: {
            type: Array,
            default: () => [],
        },
        props: {
            type: Object,
        },
    },
    emits: ["checked-change"],
    setup(props) {
        const panelState = reactive({
            checked: [],
            isAllChecked: false, //表头中是否全选的值
        });
        return {
            ...toRefs(panelState),
            ...toRefs(useCheck(props, panelState)),
        };
    },
});

const _hoisted_1$2 = { class: "m-transfer__panel" };
const _hoisted_2$1 = { class: "m-transfer__title" };
const _hoisted_3 = { class: "m-transfer__body" };

function render$4(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_m_checkbox = resolveComponent("m-checkbox");
  const _component_m_checkbox_group = resolveComponent("m-checkbox-group");

  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
    createElementVNode("p", _hoisted_2$1, [
      createVNode(_component_m_checkbox, {
        modelValue: _ctx.isAllChecked,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.isAllChecked) = $event)),
        indeterminate: _ctx.computedIndeterminate,
        onChange: _ctx.handleIsAllChecked
      }, {
        default: withCtx(() => [
          createTextVNode(toDisplayString(_ctx.title), 1 /* TEXT */)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["modelValue", "indeterminate", "onChange"])
    ]),
    createElementVNode("div", _hoisted_3, [
      createVNode(_component_m_checkbox_group, {
        modelValue: _ctx.checked,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.checked) = $event))
      }, {
        default: withCtx(() => [
          createCommentVNode(" item[keyProp]而不是item.key写死，这个可以改变这个key值 "),
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
            return (openBlock(), createBlock(_component_m_checkbox, {
              disabled: item[_ctx.disabledProp],
              key: item[_ctx.keyProp],
              label: item[_ctx.keyProp]
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(item[_ctx.labelProp]), 1 /* TEXT */)
              ]),
              _: 2 /* DYNAMIC */
            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "label"]))
          }), 128 /* KEYED_FRAGMENT */))
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["modelValue"])
    ])
  ]))
}

script$4.render = render$4;
script$4.__file = "packages/transfer/src/transfer-panel.vue";

const useComputedData = (props) => {
    const propsKey = computed(() => props.props.key);
    /* const data = computed(() => {
      return props.data.reduce((memo, current) => {
        memo[current[propsKey.value]] = current;
        return memo;
      }, {});
    }); */
    const sourceData = computed(() => {
        return props.data.filter((item) => !props.modelValue.includes(item[propsKey.value]));
    });
    const targetData = computed(() => {
        return props.data.filter((item) => props.modelValue.includes(item[propsKey.value]));
        // return props.modelValue.reduce((memo, key) => {
        //   memo.push(data.value[key]);
        //   return memo;
        // }, []);
    });
    console.log(propsKey, targetData, sourceData);
    return { propsKey, targetData, sourceData };
};

var script$3 = defineComponent({
    name: "MTransfer",
    props: {
        data: {
            type: Array,
        },
        modelValue: { type: Array },
        props: {
            type: Object,
            default: () => ({
                label: "label",
                key: "key",
                disabled: "disabled",
            }),
        },
    },
    components: { ZButton: _Button, MTransferPanel: script$4 },
    setup(props, { emit }) {
        const checkedState = reactive({
            leftChecked: [],
            rightChecked: [],
        });
        const onSelectSource = (leftVal) => {
            checkedState.leftChecked = leftVal;
        };
        const onSelectTarget = (rightVal) => {
            checkedState.rightChecked = rightVal;
        };
        const addToLeft = () => {
            const currentValue = props.modelValue.slice(0);
            checkedState.rightChecked.forEach((item) => {
                let index = currentValue.indexOf(item);
                if (index > -1) {
                    currentValue.splice(index, 1);
                }
            });
            emit("update:modelValue", currentValue);
        };
        const addToRight = () => {
            const currentValue = props.modelValue.slice(0);
            checkedState.leftChecked.forEach((item) => {
                currentValue.push(item);
            });
            // 移动到右侧，左侧选择的内容要清空
            checkedState.leftChecked = [];
            emit("update:modelValue", currentValue);
        };
        return {
            ...toRefs(useComputedData(props)),
            onSelectSource,
            onSelectTarget,
            ...toRefs(checkedState),
            addToLeft,
            addToRight,
        };
    },
});

const _hoisted_1$1 = { class: "m-transfer" };
const _hoisted_2 = { class: "m-transfer__buttons" };

function render$3(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_m_transfer_panel = resolveComponent("m-transfer-panel");
  const _component_m_button = resolveComponent("m-button");

  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
    createVNode(_component_m_transfer_panel, {
      title: "左侧全选",
      data: _ctx.sourceData,
      props: _ctx.props,
      onCheckedChange: _ctx.onSelectSource
    }, null, 8 /* PROPS */, ["data", "props", "onCheckedChange"]),
    createElementVNode("div", _hoisted_2, [
      createVNode(_component_m_button, {
        icon: "m-icon-arrow-left",
        onClick: _ctx.addToLeft,
        disabled: _ctx.rightChecked.length === 0
      }, null, 8 /* PROPS */, ["onClick", "disabled"]),
      createVNode(_component_m_button, {
        icon: "m-icon-arrow-right",
        onClick: _ctx.addToRight,
        disabled: _ctx.leftChecked.length === 0
      }, null, 8 /* PROPS */, ["onClick", "disabled"])
    ]),
    createVNode(_component_m_transfer_panel, {
      title: "右侧全选",
      data: _ctx.targetData,
      props: _ctx.props,
      onCheckedChange: _ctx.onSelectTarget
    }, null, 8 /* PROPS */, ["data", "props", "onCheckedChange"])
  ]))
}

script$3.render = render$3;
script$3.__file = "packages/transfer/src/transfer.vue";

script$3.install = (app) => {
    app.component(script$3.name, script$3);
};
const _Transfer = script$3;

var script$2 = defineComponent({
    props: {
        id: { type: String, default: "" },
        message: { type: String, default: "" },
        type: { type: String, default: "info" },
        duration: { type: Number, default: 2000 },
        center: { type: String, default: "" },
        onClose: { type: Function },
        offset: { type: Number, default: 20 },
    },
    setup(props) {
        const visible = ref(false);
        const compClass = computed(() => [
            "m-message--" + props.type,
            props.center ? "is-center" : "",
        ]);
        let timer = null;
        onMounted(() => {
            visible.value = true;
            timer = setTimeout(() => {
                visible.value = false;
            }, props.duration);
        });
        onUnmounted(() => {
            clearTimeout(timer);
        });
        const compStyle = computed(() => ({
            top: `${props.offset}px`,
        }));
        return { compClass, compStyle, visible };
    },
});

function render$2(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock(Transition, {
    name: "z-message-fade",
    onBeforeLeave: _ctx.onClose,
    onAfterLeave: _cache[0] || (_cache[0] = $event => (_ctx.$emit('destroy')))
  }, {
    default: withCtx(() => [
      withDirectives(createElementVNode("div", {
        class: normalizeClass(["m-message", _ctx.compClass]),
        style: normalizeStyle(_ctx.compStyle)
      }, "message", 6 /* CLASS, STYLE */), [
        [vShow, _ctx.visible]
      ])
    ]),
    _: 1 /* STABLE */
  }, 8 /* PROPS */, ["onBeforeLeave"]))
}

script$2.render = render$2;
script$2.__file = "packages/message/src/message.vue";

let instances = [];
let seed = 1;
const MMessage = (options) => {
    if (typeof options === "string") {
        options = { message: options };
    }
    // 计算多次触发message，多个实例之间的位置偏移
    let verticalOffset = options.offset || 20;
    instances.forEach(({ vm }) => {
        verticalOffset += (vm.el?.offsetHeight || 0) + 16;
    });
    verticalOffset += 16;
    // 劫持用户操作的onClose
    let userOnClose = options.onClose;
    const id = `message_${seed++}`;
    let opts = {
        ...options,
        offset: verticalOffset,
        id,
        onClose: () => {
            close(id, userOnClose);
        },
    };
    const container = document.createElement("div");
    // 把组件 转换成虚拟节点vnode
    const vm = createVNode(script$2, opts);
    vm.props.onDestroy = () => {
        render$a(null, container);
    };
    render$a(vm, container);
    document.body.appendChild(container.firstElementChild);
    instances.push({ vm });
    // 调用实例，最后会返回close函数，调用close函数时,将实例隐藏
    return {
        close: () => (vm.component.props.visible = false),
    };
};
function close(id, userOnClose) {
    const idx = instances.findIndex(({ vm }) => id === vm.component.props.id);
    if (idx === -1)
        return;
    const { vm } = instances[idx];
    if (!vm)
        return;
    userOnClose?.(vm);
    // 实例对象上自身的高度
    const removedHeight = vm.el.offsetHeight;
    instances.splice(idx, 1);
    // 调整其它实例对象的 vertical offset
    const len = instances.length;
    if (len < 1)
        return;
    for (let i = idx; i < len; i++) {
        const pos = Number.parseInt(instances[i].vm.el.style["top"], 10) -
            removedHeight -
            16;
        // 重新设置 实例的偏移 高度
        instances[i].vm.component.props.offset = pos;
    }
}

MMessage.install = (app) => {
    // app.component(Message.name, Message);
    app.config.globalProperties.$message = MMessage;
};

var script$1 = defineComponent({
    name: "MAvatar",
    props: {
        alt: String,
        shape: {
            type: String,
            default: "square",
        },
        fit: {
            type: String,
            default: "cover",
        },
        size: {
            type: [Number, String],
            default: "default",
            validator: (val) => typeof val === "number",
        },
        src: {
            type: String,
            default: "",
        },
        icon: String,
        error: {
            type: Function,
        },
    },
    emits: ["error"],
    setup(props, { emit }) {
        const hasLoadError = ref(false);
        const compStyle = computed(() => {
            if (typeof props.size === "number") {
                return { width: props.size + "px", height: props.size + "px" };
            }
        });
        const compClass = computed(() => {
            return [
                props.shape === "circle" ? "m-avatar--circle" : "m-avatar--square",
                typeof props.size === "string" ? `m-avatar--${props.size}` : "",
            ];
        });
        const imgStyle = computed(() => {
            return { objectFit: props.fit };
        });
        const handleError = (e) => {
            hasLoadError.value = true;
            emit("error", e);
        };
        return { compStyle, compClass, imgStyle, hasLoadError, handleError };
    },
});

const _hoisted_1 = ["src", "alt"];

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_m_icon = resolveComponent("m-icon");

  return (openBlock(), createElementBlock("span", {
    class: normalizeClass(["m-avatar", _ctx.compClass]),
    style: normalizeStyle(_ctx.compStyle)
  }, [
    (_ctx.src && !_ctx.hasLoadError)
      ? (openBlock(), createElementBlock("img", {
          key: 0,
          src: _ctx.src,
          style: normalizeStyle(_ctx.imgStyle),
          alt: _ctx.alt,
          onError: _cache[0] || (_cache[0] = (...args) => (_ctx.handleError && _ctx.handleError(...args)))
        }, null, 44 /* STYLE, PROPS, HYDRATE_EVENTS */, _hoisted_1))
      : (_ctx.icon)
        ? (openBlock(), createBlock(_component_m_icon, { key: 1 }, {
            default: withCtx(() => [
              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
            ]),
            _: 1 /* STABLE */
          }))
        : renderSlot(_ctx.$slots, "default", { key: 2 })
  ], 6 /* CLASS, STYLE */))
}

script$1.render = render$1;
script$1.__file = "packages/avatar/src/avatar.vue";

script$1.install = (app) => {
    app.component(script$1.name, script$1);
};
const _Avatar = script$1;

var script = defineComponent({
    name: "MSwitch",
    setup() { },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", null, "switch"))
}

script.render = render;
script.__file = "packages/switch/src/switch.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _Switch = script;

const components = [
    _Button,
    _Icon,
    _ButtonGroup,
    Col,
    Row,
    _Checkbox,
    _CheckboxGroup,
    _Transfer,
    _Avatar,
    _Switch,
];
const install = (app) => {
    components.forEach((component) => {
        app.component(component.name, component);
    });
};
var index = { install };

export { MMessage, index as default };