winbox-ui-next/es/tabs/tabs-button.js

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

import { defineComponent, computed, createVNode, isVNode } from "vue";
import IconHover from "../_components/icon-hover.js";
import IconLeft from "../icon/icon-left/index.js";
import IconRight from "../icon/icon-right/index.js";
import IconUp from "../icon/icon-up/index.js";
import IconDown from "../icon/icon-down/index.js";
import { getPrefixCls } from "../_utils/global-config.js";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var TabsButton = defineComponent({
  name: "TabsButton",
  props: {
    type: {
      type: String,
      default: "next"
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    onClick: {
      type: Function,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const prefixCls = getPrefixCls("tabs-nav-button");
    const renderIcon = () => {
      if (props.direction === "horizontal") {
        if (props.type === "next") {
          return createVNode(IconRight, null, null);
        }
        return createVNode(IconLeft, null, null);
      }
      if (props.type === "next") {
        return createVNode(IconDown, null, null);
      }
      return createVNode(IconUp, null, null);
    };
    const cls = computed(() => [prefixCls, {
      [`${prefixCls}-disabled`]: props.disabled,
      [`${prefixCls}-left`]: props.direction === "horizontal" && props.type === "previous",
      [`${prefixCls}-right`]: props.direction === "horizontal" && props.type === "next",
      [`${prefixCls}-up`]: props.direction === "vertical" && props.type === "previous",
      [`${prefixCls}-down`]: props.direction === "vertical" && props.type === "next"
    }]);
    return () => {
      let _slot;
      return createVNode("div", {
        "class": cls.value,
        "onClick": () => props.onClick(props.type)
      }, [createVNode(IconHover, {
        "disabled": props.disabled
      }, _isSlot(_slot = renderIcon()) ? _slot : {
        default: () => [_slot]
      })]);
    };
  }
});
export { TabsButton as default };