yuang-framework-ui-pc/lib/ele-pro-table/components/tool-column-list.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const VueDraggable = require("vuedraggable");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const _sfc_main = vue.defineComponent({
  name: "ToolColumnList",
  components: {
    VueDraggable,
    ElCheckbox: elementPlus.ElCheckbox,
    ElIcon: elementPlus.ElIcon,
    ElInput: elementPlus.ElInput,
    HolderOutlined: icons.HolderOutlined,
    VerticalRightOutlined: icons.VerticalRightOutlined,
    VerticalLeftOutlined: icons.VerticalLeftOutlined
  },
  props: {
    /** 列配置数据 */
    data: Array,
    /** 父级数据 */
    parent: Object,
    /** 是否开启列拖拽排序 */
    sortable: Boolean,
    /** 是否开启开关固定列 */
    allowFixed: Boolean,
    /** 是否开启列宽设置 */
    allowWidth: Boolean,
    /** 列宽输入框提示文本 */
    columnWidthPlaceholder: String
  },
  emits: {
    sortChange: (_colItems, _parent) => true,
    checkedChange: (_item, _checked) => true,
    fixedLeft: (_item) => true,
    fixedRight: (_item) => true,
    fixedLeftTooltip: (_el) => true,
    fixedRightTooltip: (_el) => true,
    colWidthChange: (_item, _width) => true
  },
  setup(props, { emit }) {
    const handleSortChange = (colItems) => {
      handleChildSortChange(colItems, props.parent);
    };
    const handleCheckedChange = (colItem, checked) => {
      emit("checkedChange", colItem, checked);
    };
    const handleFixedLeft = (colItem) => {
      emit("fixedLeft", colItem);
    };
    const handleFixedRight = (colItem) => {
      emit("fixedRight", colItem);
    };
    const handleFixedLeftTooltip = (e) => {
      handleChildFixedLeftTooltip(e.currentTarget);
    };
    const handleFixedRightTooltip = (e) => {
      handleChildFixedRightTooltip(e.currentTarget);
    };
    const handleChildSortChange = (colItems, parent) => {
      emit("sortChange", colItems, parent);
    };
    const handleChildFixedLeftTooltip = (el) => {
      emit("fixedLeftTooltip", el);
    };
    const handleChildFixedRightTooltip = (el) => {
      emit("fixedRightTooltip", el);
    };
    const handleColWidthChange = (item, width) => {
      emit("colWidthChange", item, width);
    };
    return {
      handleSortChange,
      handleCheckedChange,
      handleFixedLeft,
      handleFixedRight,
      handleFixedLeftTooltip,
      handleFixedRightTooltip,
      handleChildSortChange,
      handleChildFixedLeftTooltip,
      handleChildFixedRightTooltip,
      handleColWidthChange
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { class: "ele-tool-column-item" };
const _hoisted_2 = { class: "ele-tool-column-item-body" };
const _hoisted_3 = {
  key: 0,
  class: "ele-tool-column-handle"
};
const _hoisted_4 = { class: "ele-tool-column-label" };
const _hoisted_5 = {
  key: 1,
  class: "ele-tool-column-fixed"
};
const _hoisted_6 = ["onClick"];
const _hoisted_7 = ["onClick"];
const _hoisted_8 = {
  key: 2,
  class: "ele-tool-column-input"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_HolderOutlined = vue.resolveComponent("HolderOutlined");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
  const _component_VerticalRightOutlined = vue.resolveComponent("VerticalRightOutlined");
  const _component_VerticalLeftOutlined = vue.resolveComponent("VerticalLeftOutlined");
  const _component_ElInput = vue.resolveComponent("ElInput");
  const _component_ToolColumnList = vue.resolveComponent("ToolColumnList", true);
  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
  return vue.openBlock(), vue.createBlock(_component_VueDraggable, {
    itemKey: "uid",
    animation: 300,
    modelValue: _ctx.data,
    setData: () => void 0,
    handle: ".ele-tool-column-handle",
    componentData: { class: "ele-tool-column-list" },
    forceFallback: true,
    "onUpdate:modelValue": _ctx.handleSortChange
  }, {
    item: vue.withCtx(({ element: d }) => [
      vue.createElementVNode("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          _ctx.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
            vue.createVNode(_component_ElIcon, null, {
              default: vue.withCtx(() => [
                vue.createVNode(_component_HolderOutlined)
              ]),
              _: 1
            })
          ])) : vue.createCommentVNode("", true),
          vue.createElementVNode("div", _hoisted_4, [
            vue.createVNode(_component_ElCheckbox, {
              label: d.label,
              modelValue: d.checked,
              "onUpdate:modelValue": (v) => _ctx.handleCheckedChange(d, v)
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue"])
          ]),
          _ctx.allowFixed ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
            vue.createElementVNode("div", {
              class: vue.normalizeClass([
                "ele-tool-column-fixed-item",
                { "is-active": d.fixed === true || d.fixed === "left" }
              ]),
              onClick: ($event) => _ctx.handleFixedLeft(d),
              onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.handleFixedLeftTooltip && _ctx.handleFixedLeftTooltip(...args))
            }, [
              vue.createVNode(_component_ElIcon, null, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_VerticalRightOutlined)
                ]),
                _: 1
              })
            ], 42, _hoisted_6),
            vue.createElementVNode("div", {
              class: vue.normalizeClass([
                "ele-tool-column-fixed-item",
                { "is-active": d.fixed === "right" }
              ]),
              onClick: ($event) => _ctx.handleFixedRight(d),
              onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.handleFixedRightTooltip && _ctx.handleFixedRightTooltip(...args))
            }, [
              vue.createVNode(_component_ElIcon, null, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_VerticalLeftOutlined)
                ]),
                _: 1
              })
            ], 42, _hoisted_7)
          ])) : vue.createCommentVNode("", true),
          _ctx.allowWidth ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
            vue.createVNode(_component_ElInput, {
              size: "small",
              maxlength: 12,
              modelValue: d.width,
              placeholder: _ctx.columnWidthPlaceholder,
              "onUpdate:modelValue": (v) => _ctx.handleColWidthChange(d, v)
            }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
          ])) : vue.createCommentVNode("", true)
        ]),
        d.children && d.children.length ? (vue.openBlock(), vue.createBlock(_component_ToolColumnList, {
          key: 0,
          data: d.children,
          parent: d,
          sortable: _ctx.sortable,
          allowWidth: _ctx.allowWidth,
          columnWidthPlaceholder: _ctx.columnWidthPlaceholder,
          onSortChange: _ctx.handleChildSortChange,
          onCheckedChange: _ctx.handleCheckedChange,
          onFixedLeft: _ctx.handleFixedLeft,
          onFixedRight: _ctx.handleFixedRight,
          onFixedLeftTooltip: _ctx.handleChildFixedLeftTooltip,
          onFixedRightTooltip: _ctx.handleChildFixedRightTooltip,
          onColWidthChange: _ctx.handleColWidthChange
        }, null, 8, ["data", "parent", "sortable", "allowWidth", "columnWidthPlaceholder", "onSortChange", "onCheckedChange", "onFixedLeft", "onFixedRight", "onFixedLeftTooltip", "onFixedRightTooltip", "onColWidthChange"])) : vue.createCommentVNode("", true)
      ])
    ]),
    _: 1
  }, 8, ["modelValue", "onUpdate:modelValue"]);
}
const toolColumnList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = toolColumnList;