import { defineComponent, computed, createVNode } from 'vue';
import { isNil } from 'lodash-es';
import { noop } from '../_util/utils';

const prefixCls = 'fes-design-icon';
const iconProps = {
  spin: Boolean,
  rotate: [String, Number],
  tabIndex: Number,
  size: Number,
  color: String
};
var IconWrapper = defineComponent({
  name: 'FIconWrapper',
  props: iconProps,
  setup(props, _ref) {
    let {
      slots,
      attrs
    } = _ref;
    const iconTabIndex = computed(() => {
      let tabIndex = props.tabIndex;
      if (tabIndex == null && attrs.onClick) {
        tabIndex = -1;
      }
      return tabIndex;
    });
    const svgStyle = computed(() => {
      return [props.rotate && {
        transform: `rotate(${props.rotate}deg)`
      }, !isNil(props.size) && {
        fontSize: `${props.size}px`
      }, props.color && {
        color: props.color
      }];
    });
    const svgClasses = computed(() => [{
      [prefixCls]: true,
      [`${prefixCls}--spin`]: !!props.spin
    }]);
    return () => createVNode("span", {
      "tabindex": iconTabIndex.value,
      "role": "img",
      "class": svgClasses.value,
      "style": svgStyle.value,
      "onClick": attrs.onClick || noop
    }, [slots.default && slots.default()]);
  }
});

export { IconWrapper as default };
