comic-plus/lib/components/button/src/main.vue.js

<p align="center"> <img width="200px" src="./logo.png"/> </p>

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/button.css");
const type = require("../../form/src/type.js");
const main_props = require("./main.props.js");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const type$1 = require("./type.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = ["disabled"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuButton"
  },
  __name: "main",
  props: main_props.buttonProps,
  emits: main_props.buttonEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const { globalSize } = config.useGlobal();
    const form = vue.inject(type.FORM_PROVIDE, void 0);
    const group = vue.inject(type$1.BUTTONGROUP_PROVIDE, void 0);
    const currentSize = vue.computed(() => {
      return props.size ?? (group == null ? void 0 : group.props.size) ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
    });
    const buttonExtraClass = vue.computed(() => {
      return props.plain ? "plain" : props.light ? "light" : props.dashed ? "dashed" : props.text ? "text" : void 0;
    });
    const buttonClassList = vue.computed(() => {
      return [
        props.type && "cu-button--" + props.type,
        currentSize.value,
        { "is-raised": props.raised },
        { "is-circle": props.circle },
        { "is-round": props.round },
        buttonExtraClass.value && "is-" + buttonExtraClass.value
      ];
    });
    const buttonStyle = vue.computed(() => {
      if (props.color) {
        if (props.plain) {
          return {
            "--cu-button-color": props.color,
            "--cu-button-color-hover": "#ffffff",
            "--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
            "--cu-button-border": props.color,
            "--cu-button-border-hover": props.color,
            "--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
            "--cu-button-background": `color-mix(in srgb, ${props.color}, white 90%)`,
            "--cu-button-background-hover": props.color,
            "--cu-button-background-disabled": `color-mix(in srgb, ${props.color}, white 90%)`
          };
        } else if (props.light) {
          return {
            "--cu-button-color": props.color,
            "--cu-button-color-hover": props.color,
            "--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
            "--cu-button-border": props.color,
            "--cu-button-border-hover": props.color,
            "--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
            "--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 90%)`,
            "--cu-button-border-active": `color-mix(in srgb, ${props.color}, white 80%)`
          };
        } else if (props.text) {
          return {
            "--cu-button-color": props.color,
            "--cu-button-color-hover": props.color,
            "--cu-button-color-disabled": `color-mix(in srgb, ${props.color}, white 40%)`,
            "--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 90%)`,
            "--cu-button-background-active": `color-mix(in srgb, ${props.color}, white 80%)`
          };
        } else if (props.dashed) {
          return {
            "--cu-button-color-hover": props.color,
            "--cu-button-border-hover": props.color,
            "--cu-button-border-active": `color-mix(in srgb, ${props.color}, white 80%)`
          };
        } else {
          return {
            "--cu-button-background": props.color,
            "--cu-button-border-hover": `color-mix(in srgb, ${props.color}, white 30%)`,
            "--cu-button-border": props.color,
            "--cu-button-background-hover": `color-mix(in srgb, ${props.color}, white 30%)`,
            "--cu-button-color": "#ffffff",
            "--cu-button-border-disabled": `color-mix(in srgb, ${props.color}, white 50%)`,
            "--cu-button-color-disabled": "#ffffff",
            "--cu-button-background-disabled": `color-mix(in srgb, ${props.color}, white 50%)`
          };
        }
      }
      return void 0;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("button", {
        class: vue.normalizeClass(["cu-button", buttonClassList.value]),
        disabled: _ctx.disabled || _ctx.loading,
        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)),
        style: vue.normalizeStyle(buttonStyle.value)
      }, [
        _ctx.loading || _ctx.icon ? (vue.openBlock(), vue.createElementBlock("i", {
          key: 0,
          class: vue.normalizeClass(["cu-button__icon", [{ "is-loading": _ctx.loading }]]),
          style: vue.normalizeStyle({ marginRight: _ctx.$slots.default ? "8px" : void 0 })
        }, [
          _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(typescript.isVueComponent)(_ctx.loadingIcon) ? _ctx.loadingIcon : vue.unref(components.Loading)), { key: 0 })) : vue.unref(typescript.isVueComponent)(_ctx.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), { key: 1 })) : vue.createCommentVNode("", true)
        ], 6)) : vue.createCommentVNode("", true),
        vue.renderSlot(_ctx.$slots, "default")
      ], 14, _hoisted_1);
    };
  }
});
exports.default = _sfc_main;