@xdp/button/esm/cip-button-collapse/index.js

button el-button vue3

import { ref, computed, onMounted, watch, nextTick, onUnmounted, createVNode, createTextVNode, isVNode } from 'vue';
import { ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { ArrowDown, CaretBottom } from '@element-plus/icons-vue';
import CipButtonText from '../cip-button-text';
import CipButton from '../cip-button';
import CipButtonPop from '../cip-button-pop';
import { getUsingConfig } from '@xdp/config';
import { useTable } from '@d-render/shared';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const getButtonInfo = (vnode) => {
  if (vnode.component) {
    const text = vnode.component.slots.default();
    const info = __spreadValues(__spreadValues({}, vnode.component.ctx._.props), vnode.component.ctx._.attrs);
    const {
      onClick = (e) => vnode.component.ctx._.emit("click", e)
    } = info;
    return __spreadProps(__spreadValues({}, info), {
      onClick,
      text
    });
  }
  return {};
};
const RenderComponent = (props) => {
  const list = props.buttonList;
  let dropDownNode;
  let buttonNodeList = list;
  if (list.length > props.limit) {
    buttonNodeList = list.slice(0, props.limit - 1);
    dropDownNode = createVNode(ElDropdown, {
      "style": "margin-left: 8px",
      "size": props.size
    }, {
      default: () => props.buttonComp === "button" ? createVNode(CipButton, {
        "square": true,
        "icon": ArrowDown
      }, null) : createVNode(CipButtonText, null, {
        default: () => [createTextVNode("\u66F4\u591A "), createVNode(ElIcon, null, {
          default: () => [createVNode(CaretBottom, null, null)]
        })]
      }),
      dropdown: () => {
        let _slot;
        return createVNode(ElDropdownMenu, null, _isSlot(_slot = list.slice(props.limit - 1).map((item) => {
          const {
            onClick,
            text,
            disabled
          } = getButtonInfo(item);
          return createVNode(ElDropdownItem, {
            "onClick": disabled ? void 0 : onClick,
            "disabled": disabled
          }, _isSlot(text) ? text : {
            default: () => [text]
          });
        })) ? _slot : {
          default: () => [_slot]
        });
      }
    });
  }
  const result = buttonNodeList.map((item) => {
    const {
      onClick,
      text,
      type,
      showDisabledButton,
      dangerButton,
      needPop,
      popTitle,
      popPlacement,
      icon,
      disabled
    } = getButtonInfo(item);
    let ButtonComponent = props.buttonComp === "button" ? CipButton : CipButtonText;
    if (props.buttonComp && needPop)
      ButtonComponent = CipButtonPop;
    const buttonProps = {
      type,
      disabled,
      showDisabledButton,
      dangerButton,
      icon,
      onClick
    };
    if (needPop) {
      buttonProps.popTitle = popTitle;
      buttonProps.popPlacement = popPlacement;
    }
    return createVNode(ButtonComponent, buttonProps, _isSlot(text) ? text : {
      default: () => [text]
    });
  });
  if (dropDownNode) {
    result.push(dropDownNode);
  }
  return result;
};
var index = {
  name: "CipButtonCollapse",
  props: {
    limit: {
      type: Number
    },
    row: {
      type: Object,
      required: true
    },
    buttonComp: {
      type: String,
      default: "text",
      validate: (val) => ["text", "button"].includes(val)
    },
    showDisabled: {
      type: Boolean,
      default: void 0
    }
  },
  setup(props, {
    slots
  }) {
    const cipTable = useTable();
    const buttonList = ref([]);
    const originRef = ref();
    const handlerLimit = computed(() => {
      return getUsingConfig(props.limit, props.buttonComp === "text" ? 3 : 4);
    });
    const showDisabledButton = computed(() => {
      return getUsingConfig(props.showDisabled, cipTable.showDisabledButton, true);
    });
    let vnodeList = [];
    onMounted(() => {
      const unwatch = watch(() => props.row, () => {
        nextTick().then(() => collectButtons());
      }, {
        immediate: true,
        deep: true
      });
      onUnmounted(() => {
        console.log("originRef.value", originRef.value);
        unwatch();
        vnodeList = [];
      });
    });
    const collectButtons = () => {
      buttonList.value = [];
      vnodeList.forEach((vnode) => getButtons(vnode));
    };
    const getButtons = (vnode) => {
      if (vnode.shapeFlag === 16) {
        vnode.children.forEach((v) => getButtons(v));
      }
      if (vnode.shapeFlag === 17) {
        vnode.children.forEach((v) => getButtons(v));
      }
      if (vnode.shapeFlag === 36) {
        const componentName = (vnode.type.name || "").toLowerCase();
        if (componentName.indexOf("button") > -1) {
          const info = getButtonInfo(vnode);
          if (showDisabledButton.value === false && info.disabled) {
            console.log("button \u4E0D\u7B26\u5408\u5C55\u793A\u6761\u4EF6");
          } else {
            buttonList.value.push(vnode);
          }
        } else {
          if (vnode.component) {
            const children = vnode.component.subTree.children || [];
            children.forEach((v) => getButtons(v));
          }
        }
      }
    };
    return () => {
      var _a;
      vnodeList = (_a = slots.default) == null ? void 0 : _a.call(slots);
      return createVNode("div", {
        "class": "cip-table-handler"
      }, [createVNode("div", {
        "ref": (el) => {
          originRef.value = el;
        },
        "style": "display: none"
      }, [vnodeList]), createVNode(RenderComponent, {
        "limit": handlerLimit.value,
        "size": cipTable.size,
        "buttonList": buttonList.value,
        "buttonComp": props.buttonComp
      }, null)]);
    };
  }
};

export { index as default };