comic-plus/lib/components/tag/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/tag.css");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = { class: "cu-tag-content" };
const _hoisted_2 = { class: "cu-tag-content" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuTag"
  },
  __name: "main",
  props: main_props.tagProps,
  emits: main_props.tagEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    function handleClose() {
      emit("close");
    }
    const tagMode = vue.computed(() => {
      return props.plain ? "plain" : props.light ? "light" : void 0;
    });
    const customStyle = vue.computed(() => {
      if (!props.color) return void 0;
      let calcColor = tagMode.value === "plain" ? `color-mix(in srgb, ${props.color}, white 90%)` : tagMode.value === "light" ? "#fff" : props.color;
      return {
        borderColor: props.color,
        backgroundColor: calcColor,
        color: tagMode.value ? props.color : "#fff"
      };
    });
    const handleVNodeMounted = (vnode) => {
      vnode.component.subTree.component.bum = null;
    };
    return (_ctx, _cache) => {
      return !_ctx.transition ? (vue.openBlock(), vue.createElementBlock("span", {
        key: 0,
        class: vue.normalizeClass(["cu-tag", [
          _ctx.type ? "cu-tag--" + _ctx.type : void 0,
          tagMode.value ? "is-" + tagMode.value : void 0,
          { "is-border": _ctx.border },
          { "is-round": _ctx.round }
        ]]),
        style: vue.normalizeStyle([{ "--tag-size": _ctx.size + "px" }, customStyle.value])
      }, [
        vue.createElementVNode("span", _hoisted_1, [
          vue.renderSlot(_ctx.$slots, "default")
        ]),
        _ctx.closable ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagMode.value ? vue.unref(components.CloseSmall) : vue.unref(components.CloseOne)), {
          key: 0,
          class: "closeicon",
          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
        })) : vue.createCommentVNode("", true)
      ], 6)) : (vue.openBlock(), vue.createBlock(vue.Transition, {
        key: 1,
        name: "cu-zoom-x",
        appear: "",
        onVnodeMounted: handleVNodeMounted
      }, {
        default: vue.withCtx(() => [
          vue.createElementVNode("span", {
            class: vue.normalizeClass(["cu-tag", [
              _ctx.type ? "cu-tag--" + _ctx.type : void 0,
              tagMode.value ? "is-" + tagMode.value : void 0,
              { "is-border": _ctx.border },
              { "is-round": _ctx.round }
            ]]),
            style: vue.normalizeStyle([{ "--tag-size": _ctx.size + "px" }, customStyle.value])
          }, [
            vue.createElementVNode("span", _hoisted_2, [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _ctx.closable ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagMode.value ? vue.unref(components.CloseSmall) : vue.unref(components.CloseOne)), {
              key: 0,
              class: "closeicon",
              onClick: handleClose
            })) : vue.createCommentVNode("", true)
          ], 6)
        ]),
        _: 3
      }, 512));
    };
  }
});
exports.default = _sfc_main;