@meve/ui/es/tag/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Button from '../button';
import Icon from '../icon';
import { createNamespace } from '../utils/create';
import { props } from './props';





var _createNamespace = createNamespace('tag'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var TagPlugin = createComponent({
  props: props,
  methods: {
    handleClick: function handleClick(event) {
      if (this.disabled) {
        return;
      }

      this.$emit('click', event);
    },
    handleTouchstart: function handleTouchstart(event) {
      if (this.disabled) {
        return;
      }

      this.$emit('touchstart', event);
    },
    handleCloseClick: function handleCloseClick(event) {
      event.stopPropagation();

      if (this.disabled) {
        return;
      }

      this.$emit('click', event);

      if (this.readonly) {
        return;
      }

      this.$emit('close');
    },
    renderClose: function renderClose() {
      var _this = this;

      var h = this.$createElement;

      if (!this.closeable) {
        return;
      }

      return h(Button, {
        "class": namespace('__close-button'),
        "attrs": {
          "tag-cover": true,
          "text": true,
          "round": true,
          "disabled": this.disabled
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            _this.handleCloseClick.apply(_this, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "class": namespace('__close-icon'),
        "attrs": {
          "tag-cover": true,
          "name": "close",
          "size": this.closeIconSize
        }
      })]);
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var size = this.size,
        disabled = this.disabled,
        block = this.block,
        text = this.text,
        outline = this.outline,
        type = this.type;
    return h("div", {
      "class": [namespace(), 'm--box', namespace("--" + size), block ? "m--flex " + namespace('--block') : 'm--inline-flex', text ? namespace("--text-" + type) : namespace("--" + type), text ? namespace('--text') : null, outline ? namespace('--outline') : null, !text && disabled ? namespace('--disabled') : null, text && disabled ? namespace('--text-disabled') : null],
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          _this2.handleClick.apply(_this2, [$event].concat(attrs));
        },
        "touchstart": function touchstart($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          _this2.handleTouchstart.apply(_this2, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__content')
    }, [this.slots(), this.renderClose()])]);
  }
});
export var _TagComponent = TagPlugin;
export default TagPlugin;