@opentiny/vue-renderless/transfer/vue.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
import {
  getObj,
  getSourceData,
  getLeftCheckedData,
  getRightCheckedData,
  getTargetData,
  logicFun,
  onSourceCheckedChange,
  onTargetCheckedChange,
  addToLeft,
  addToRight,
  clearQuery,
  sortableEvent,
  recurseTreeDataToFlagInitDisabled,
  recurseTreeDataToDisabled,
  setCheckedOnMounted
} from "./index";
const api = ["state", "onSourceCheckedChange", "onTargetCheckedChange", "addToLeft", "addToRight", "clearQuery"];
const initState = ({ reactive, computed, api: api2, props, h, slots, Tree }) => {
  const state = reactive({
    leftChecked: [],
    rightChecked: [],
    rightData: computed(() => api2.getRightCheckedData()),
    leftData: computed(() => api2.getLeftCheckedData()),
    dataObj: computed(() => api2.getObj()),
    sourceData: computed(() => api2.getSourceData()),
    targetData: computed(() => api2.getTargetData()),
    hasButtonTexts: computed(() => props.buttonTexts.length === 2),
    isToLeft: false,
    optionRender: computed(() => (option) => {
      if (props.renderContent) {
        return props.renderContent(h, option);
      }
      if (slots.default) {
        return slots.default({ option });
      }
      return h("span", option[props.props.label] || option[props.props.key]);
    }),
    isToLeftBtnDisabled: computed(() => {
      var _a, _b;
      if (((_b = (_a = props.render) == null ? void 0 : _a.plugin) == null ? void 0 : _b.name) === Tree) {
        return props.toLeftDisable && state.leftChecked.length <= props.modelValue.length;
      }
      return props.toLeftDisable && state.leftChecked.length === 0;
    })
  });
  return state;
};
const renderless = (props, { computed, onMounted, reactive, h, watch }, { $prefix, emit, refs, parent, slots, vm }) => {
  var _a, _b;
  const api2 = {};
  const Tree = $prefix + "Tree";
  const Table = $prefix + "Table";
  const state = initState({ reactive, computed, api: api2, props, h, slots, Tree });
  const { DROPPANEL, TRANSFERPANEL } = parent.$constants;
  Object.assign(api2, {
    state,
    getObj: getObj(props),
    clearQuery: clearQuery(refs),
    getSourceData: getSourceData({ props, Tree }),
    addToLeft: addToLeft({ emit, props, state }),
    getLeftCheckedData: getLeftCheckedData({ props, state }),
    getRightCheckedData: getRightCheckedData({ props, state }),
    addToRight: addToRight({ emit, refs, props, state, Tree }),
    onTargetCheckedChange: onTargetCheckedChange({ emit, state }),
    onSourceCheckedChange: onSourceCheckedChange({ emit, state }),
    logicFun: logicFun({ props, emit, state, vm }),
    getTargetData: getTargetData({ props, state, Tree, Table }),
    sortableEvent: sortableEvent({ api: api2, droppanel: DROPPANEL, props, queryDom: TRANSFERPANEL, refs }),
    setCheckedOnMounted: setCheckedOnMounted({ props, vm, Tree })
  });
  if (((_b = (_a = props.render) == null ? void 0 : _a.plugin) == null ? void 0 : _b.name) === Tree) {
    watch(
      props.data,
      (value) => {
        recurseTreeDataToFlagInitDisabled(
          value,
          props.props.children || "children",
          props.props.key || "key",
          props.modelValue
        );
      },
      { immediate: true }
    );
    watch(
      () => props.modelValue,
      (value) => {
        var _a2, _b2;
        if (((_b2 = (_a2 = props.render) == null ? void 0 : _a2.plugin) == null ? void 0 : _b2.name) === Tree) {
          recurseTreeDataToDisabled(props.data, props.props.children || "children", props.props.key || "key", value);
          api2.setCheckedOnMounted();
        }
      }
    );
  }
  onMounted(api2.sortableEvent);
  onMounted(api2.setCheckedOnMounted);
  return api2;
};
export {
  api,
  renderless
};