zmp-vue/cjs/components/chip.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

var _useTooltip = require("../shared/use-tooltip");

var _useIcon = require("../shared/use-icon");

var _useIcon2 = _interopRequireDefault(require("./use-icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _hoisted_1 = {
  key: 1,
  class: "chip-label"
};

function render(_ctx, _cache) {
  var _component_zmp_use_icon = (0, _vue.resolveComponent)("zmp-use-icon");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    ref: "elRef",
    class: _ctx.classes
  }, [_ctx.hasMedia ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 0,
    class: _ctx.mediaClasses
  }, [_ctx.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_zmp_use_icon, {
    key: 0,
    icon: _ctx.icon
  }, null, 8, ["icon"])) : (0, _vue.createCommentVNode)("", true), (0, _vue.createTextVNode)(" " + (0, _vue.toDisplayString)(_ctx.media) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "media")], 2)) : (0, _vue.createCommentVNode)("", true), _ctx.hasLabel ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.text) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "text"), (0, _vue.renderSlot)(_ctx.$slots, "default")])) : (0, _vue.createCommentVNode)("", true), _ctx.deleteable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("a", {
    key: 2,
    class: "chip-delete",
    onClick: _cache[1] || (_cache[1] = function () {
      return _ctx.onDeleteClick && _ctx.onDeleteClick.apply(_ctx, arguments);
    })
  })) : (0, _vue.createCommentVNode)("", true)], 2);
}

var _default = {
  name: 'zmp-chip',
  render: render,
  components: {
    zmpUseIcon: _useIcon2.default
  },
  props: _extends({
    media: String,
    text: [String, Number],
    deleteable: Boolean,
    mediaBgColor: String,
    mediaTextColor: String,
    outline: Boolean,
    tooltip: String,
    tooltipTrigger: String
  }, _mixins.iconProps, _mixins.colorProps),
  emits: ['delete'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
        emit = _ref.emit;
    var elRef = (0, _vue.ref)(null);

    var onDeleteClick = function onDeleteClick(event) {
      emit('delete', event);
    };

    (0, _useTooltip.useTooltip)(elRef, props);
    var icon = (0, _vue.computed)(function () {
      return (0, _useIcon.useIcon)(props);
    });
    var mediaClasses = (0, _vue.computed)(function () {
      return (0, _utils.classNames)('chip-media', props.mediaTextColor && "text-color-" + props.mediaTextColor, props.mediaBgColor && "bg-color-" + props.mediaBgColor);
    });
    var classes = (0, _vue.computed)(function () {
      return (0, _utils.classNames)('chip', {
        'chip-outline': props.outline
      }, (0, _mixins.colorClasses)(props));
    });
    var hasLabel = (0, _vue.computed)(function () {
      return props.text || slots && (slots.text || slots.default);
    });
    var hasMedia = (0, _vue.computed)(function () {
      return props.media || icon.value || slots && slots.media;
    });
    return {
      classes: classes,
      icon: icon,
      mediaClasses: mediaClasses,
      elRef: elRef,
      hasLabel: hasLabel,
      hasMedia: hasMedia,
      onDeleteClick: onDeleteClick
    };
  }
};
exports.default = _default;