@arco-design/web-vue/lib/tag/tag.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var iconHover = require("../_components/icon-hover.js");
var index = require("../icon/icon-close/index.js");
var index$1 = require("../icon/icon-loading/index.js");
var _interface = require("./interface.js");
var useSize = require("../_hooks/use-size.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const _sfc_main = vue.defineComponent({
  name: "Tag",
  components: {
    IconHover: iconHover,
    IconClose: index,
    IconLoading: index$1
  },
  props: {
    color: {
      type: String
    },
    size: {
      type: String
    },
    bordered: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: void 0
    },
    defaultVisible: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    closable: {
      type: Boolean,
      default: false
    },
    checkable: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: void 0
    },
    defaultChecked: {
      type: Boolean,
      default: true
    },
    nowrap: {
      type: Boolean,
      default: false
    }
  },
  emits: {
    "update:visible": (visible) => true,
    "update:checked": (checked) => true,
    "close": (ev) => true,
    "check": (checked, ev) => true
  },
  setup(props, { emit }) {
    const { size } = vue.toRefs(props);
    const prefixCls = globalConfig.getPrefixCls("tag");
    const isBuiltInColor = vue.computed(
      () => props.color && _interface.TAG_COLORS.includes(props.color)
    );
    const isCustomColor = vue.computed(
      () => props.color && !_interface.TAG_COLORS.includes(props.color)
    );
    const _visible = vue.ref(props.defaultVisible);
    const _checked = vue.ref(props.defaultChecked);
    const computedVisible = vue.computed(() => {
      var _a;
      return (_a = props.visible) != null ? _a : _visible.value;
    });
    const computedChecked = vue.computed(
      () => {
        var _a;
        return props.checkable ? (_a = props.checked) != null ? _a : _checked.value : true;
      }
    );
    const { mergedSize: _mergedSize } = useSize.useSize(size);
    const mergedSize = vue.computed(() => {
      if (_mergedSize.value === "mini") {
        return "small";
      }
      return _mergedSize.value;
    });
    const handleClose = (ev) => {
      _visible.value = false;
      emit("update:visible", false);
      emit("close", ev);
    };
    const handleClick = (ev) => {
      if (props.checkable) {
        const newChecked = !computedChecked.value;
        _checked.value = newChecked;
        emit("update:checked", newChecked);
        emit("check", newChecked, ev);
      }
    };
    const cls = vue.computed(() => [
      prefixCls,
      `${prefixCls}-size-${mergedSize.value}`,
      {
        [`${prefixCls}-loading`]: props.loading,
        [`${prefixCls}-hide`]: !computedVisible.value,
        [`${prefixCls}-${props.color}`]: isBuiltInColor.value,
        [`${prefixCls}-bordered`]: props.bordered,
        [`${prefixCls}-checkable`]: props.checkable,
        [`${prefixCls}-checked`]: computedChecked.value,
        [`${prefixCls}-custom-color`]: isCustomColor.value
      }
    ]);
    const style = vue.computed(() => {
      if (isCustomColor.value) {
        return {
          backgroundColor: props.color
        };
      }
      return void 0;
    });
    return {
      prefixCls,
      cls,
      style,
      computedVisible,
      computedChecked,
      handleClick,
      handleClose
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_icon_close = vue.resolveComponent("icon-close");
  const _component_icon_hover = vue.resolveComponent("icon-hover");
  const _component_icon_loading = vue.resolveComponent("icon-loading");
  return _ctx.computedVisible ? (vue.openBlock(), vue.createElementBlock("span", {
    key: 0,
    class: vue.normalizeClass(_ctx.cls),
    style: vue.normalizeStyle(_ctx.style),
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
  }, [
    _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 0,
      class: vue.normalizeClass(`${_ctx.prefixCls}-icon`)
    }, [
      vue.renderSlot(_ctx.$slots, "icon")
    ], 2)) : vue.createCommentVNode("v-if", true),
    _ctx.nowrap ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 1,
      class: vue.normalizeClass(`${_ctx.prefixCls}-text`)
    }, [
      vue.renderSlot(_ctx.$slots, "default")
    ], 2)) : vue.renderSlot(_ctx.$slots, "default", { key: 2 }),
    _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_icon_hover, {
      key: 3,
      role: "button",
      "aria-label": "Close",
      prefix: _ctx.prefixCls,
      class: vue.normalizeClass(`${_ctx.prefixCls}-close-btn`),
      onClick: vue.withModifiers(_ctx.handleClose, ["stop"])
    }, {
      default: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "close-icon", {}, () => [
          vue.createVNode(_component_icon_close)
        ])
      ]),
      _: 3
    }, 8, ["prefix", "class", "onClick"])) : vue.createCommentVNode("v-if", true),
    _ctx.loading ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 4,
      class: vue.normalizeClass(`${_ctx.prefixCls}-loading-icon`)
    }, [
      vue.createVNode(_component_icon_loading)
    ], 2)) : vue.createCommentVNode("v-if", true)
  ], 6)) : vue.createCommentVNode("v-if", true);
}
var _Tag = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Tag;