zmp-vue/cjs/components/icon.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 _useTheme = require("../shared/use-theme");

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); }

function render(_ctx, _cache) {
  return (0, _vue.openBlock)(), (0, _vue.createBlock)("i", {
    ref: "elRef",
    style: {
      fontSize: _ctx.sizeComputed,
      width: _ctx.sizeComputed,
      height: _ctx.sizeComputed
    },
    class: _ctx.classesComputed
  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.iconText) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "default")], 6);
}

var _default = {
  name: 'zmp-icon',
  render: render,
  props: _extends({
    material: String,
    zmp: String,
    icon: String,
    ios: String,
    aurora: String,
    md: String,
    tooltip: String,
    tooltipTrigger: String,
    size: [String, Number]
  }, _mixins.colorProps),
  setup: function setup(props) {
    var elRef = (0, _vue.ref)(null);
    var theme = (0, _useTheme.useTheme)();
    (0, _useTooltip.useTooltip)(elRef, props);
    var classesComputed = (0, _vue.computed)(function () {
      var ios = props.ios,
          md = props.md,
          aurora = props.aurora,
          zmp = props.zmp,
          material = props.material,
          icon = props.icon;
      var classes = {
        icon: true
      };
      var themeIcon;
      if (theme.value && theme.value.ios) themeIcon = ios;else if (theme.value && theme.value.md) themeIcon = md;else if (theme.value && theme.value.aurora) themeIcon = aurora;

      if (themeIcon) {
        var parts = themeIcon.split(':');
        var prop = parts[0];
        var value = parts[1];

        if (prop === 'material' || prop === 'zmp') {
          classes['material-icons'] = prop === 'material';
          classes['zmp-icons'] = prop === 'zmp';
        }

        if (prop === 'icon') {
          classes[value] = true;
        }
      } else {
        classes = {
          icon: true,
          'material-icons': material,
          'zmp-icons': zmp
        };
        if (icon) classes[icon] = true;
      }

      return (0, _utils.classNames)(classes, (0, _mixins.colorClasses)(props));
    });
    var sizeComputed = (0, _vue.computed)(function () {
      var size = props.size;

      if (typeof props.size === 'number' || parseFloat(props.size) === props.size * 1) {
        size = props.size + "px";
      }

      return size;
    });
    var iconText = (0, _vue.computed)(function () {
      var ios = props.ios,
          md = props.md,
          aurora = props.aurora,
          zmp = props.zmp,
          material = props.material;
      var text = material || zmp;

      if (md && theme.value && theme.value.md && (md.indexOf('material:') >= 0 || md.indexOf('zmp:') >= 0)) {
        text = md.split(':')[1];
      } else if (ios && theme.value && theme.value.ios && (ios.indexOf('material:') >= 0 || ios.indexOf('zmp:') >= 0)) {
        text = ios.split(':')[1];
      } else if (aurora && theme.value && theme.value.aurora && (aurora.indexOf('material:') >= 0 || aurora.indexOf('zmp:') >= 0)) {
        text = aurora.split(':')[1];
      }

      return text;
    });
    return {
      elRef: elRef,
      sizeComputed: sizeComputed,
      classesComputed: classesComputed,
      iconText: iconText
    };
  }
};
exports.default = _default;