@fe6/water-pro/es/table-pro/src/components/table-action.js

An enterprise-class UI design language and Vue-based implementation

import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";

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

import { defineComponent, computed } from 'vue';
import { MoreOutlined } from '@ant-design/icons-vue';
import { default as Divider } from '../../../divider';
import { default as Button } from '../../../button';
import { default as Dropdown } from '../../../dropdown';
import { default as Menu } from '../../../menu';
import useConfigInject from '../../../_util/hooks/useConfigInject';
import PropTypes from '../../../_util/vue-types';
import { getSlot } from '../../../_util/props-util';
import { useTableContext } from '../hooks/use-table-context';
import { ACTION_COLUMN_FLAG } from '../const';
export default defineComponent({
  name: 'ATableAction',
  props: {
    actions: {
      type: Array,
      default: null
    },
    dropDownActions: {
      type: Array,
      default: null
    },
    divider: PropTypes.bool.def(true),
    outside: PropTypes.bool,
    trigger: {
      type: Array,
      default: function _default() {
        return ['click'];
      }
    },
    prefixCls: String
  },
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('table-pro-action', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var table = {};

    if (!props.outside) {
      table = useTableContext();
    } // const getSize = computed(() => {
    //   const size = table?.getSize?.();
    //   if (size === 'middle' || !size) {
    //     return;
    //   }
    //   if (size === 'default') {
    //     return 'large';
    //   }
    //   return size;
    // });


    var getActions = computed(function () {
      return (props.actions || []).map(function (action) {
        var popConfirm = action.popConfirm; // const size = unref(getSize);

        return _extends(_extends(_extends({
          type: 'link'
        }, action), popConfirm || {}), {
          onConfirm: popConfirm === null || popConfirm === void 0 ? void 0 : popConfirm.confirm,
          onCancel: popConfirm === null || popConfirm === void 0 ? void 0 : popConfirm.cancel,
          enable: !!popConfirm
        });
      });
    });
    var getDropList = computed(function () {
      return (props.dropDownActions || []).map(function (action, index) {
        var label = action.label;
        return _extends(_extends({}, action), {
          text: label,
          divider: index < props.dropDownActions.length - 1 ? props.divider : false
        });
      });
    });
    var getAlign = computed(function () {
      var _a, _b, _c;

      var columns = ((_b = (_a = table) === null || _a === void 0 ? void 0 : _a.getColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
      var actionColumn = columns.find(function (item) {
        return item.flag === ACTION_COLUMN_FLAG;
      });
      return (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.align) !== null && _c !== void 0 ? _c : 'left';
    });
    return {
      prefixClsNew: prefixClsNew,
      getActions: getActions,
      getDropList: getDropList,
      getAlign: getAlign
    };
  },
  render: function render() {
    var _this = this;

    var defaultSlot = [];
    this.getActions.forEach(function (action, index) {
      var itemNode = _createVNode(Button, action, {
        default: function _default() {
          return [action.label];
        }
      });

      defaultSlot.push(itemNode);

      if (_this.divider && index < _this.getActions.length - (_this.dropDownActions && _this.getDropList.length ? 0 : 1)) {
        defaultSlot.push(_createVNode(Divider, {
          "type": "vertical"
        }, null));
      }
    });
    var dropDownNode = null;

    if (this.dropDownActions && this.getDropList.length) {
      var dropdownDefault = null;
      var dropdownMoreNode = getSlot(this, 'more');

      if (dropdownMoreNode.length) {
        dropdownDefault = dropdownMoreNode;
      } else {
        dropdownDefault = _createVNode(Button, {
          "type": "link",
          "size": "small"
        }, {
          default: function _default() {
            return [_createVNode(MoreOutlined, {
              "class": "icon-more"
            }, null)];
          }
        });
      }

      var overlayInnerNode = [];
      this.getDropList.forEach(function (dropItem) {
        overlayInnerNode.push(_createVNode(Menu.Item, null, {
          default: function _default() {
            return [_createVNode("a", {
              "href": "javascript:;",
              "onClick": dropItem.onClick
            }, [dropItem.label])];
          }
        }));
      });

      var overlayNode = _createVNode(Menu, null, {
        default: function _default() {
          return [overlayInnerNode];
        }
      });

      var dropdownSlots = {
        default: function _default() {
          return dropdownDefault;
        },
        overlay: function overlay() {
          return overlayNode;
        }
      };
      dropDownNode = _createVNode(Dropdown, {
        "trigger": this.trigger
      }, dropdownSlots);
    }

    return _createVNode("div", {
      "class": [this.prefixClsNew, this.getAlign]
    }, [defaultSlot, dropDownNode]);
  }
});