song-ui-u/lib/components/tag/src/index.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index$1 = require('../../../hook/use-namespace/index.cjs');
var icons = require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');

var Tag = /* @__PURE__ */ vue.defineComponent({
  name: "x-tag",
  props: {
    type: {
      type: String,
      default: "primary"
    },
    closable: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "medium"
    },
    // Tag 的颜色
    bgColor: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: ""
    },
    // Tag 的主题
    effect: {
      type: String,
      default: "light",
      validator: (value) => {
        return ["light", "dark", "plain"].includes(value);
      }
    }
  },
  setup(props, {
    slots,
    emit
  }) {
    const ns = index$1.useNamespace("tag");
    const handelClose = (e) => {
      e.stopPropagation();
      e.preventDefault();
      emit("close", e);
    };
    return () => vue.createVNode("div", {
      "class": [ns.b(), ns.m(props.type), ns.m("effect", props.effect), ns.m(props.size), ns.is("round", props.round)],
      "style": {
        backgroundColor: props.bgColor,
        color: props.textColor
      }
    }, [vue.createVNode("div", {
      "class": [ns.e("main")]
    }, [slots.default?.()]), props.closable && vue.createVNode("div", {
      "onClick": (e) => handelClose(e),
      "class": ns.e("close")
    }, [vue.createVNode(index.XIcon, {
      "size": "12"
    }, {
      default: () => [vue.createVNode(icons.X, null, null)]
    })])]);
  }
});

module.exports = Tag;
//# sourceMappingURL=index.cjs.map