vue-admin-core/es/formily/array-base/src/index.mjs

A Component Library for Vue 3

import { inject, toRefs, ref, toRef, onBeforeUnmount, defineComponent, provide, h, computed } from 'vue';
import { useField, useFieldSchema, FragmentComponent } from '@formily/vue';
import { uid, isValid, clone } from '@formily/shared';
import { ElButton, ElMessageBox, ElPopconfirm } from 'element-plus';
import { Rank, Plus, Delete, ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import '../../__builtins__/shared/index.mjs';
import { isPromise } from 'element-plus/es/utils/index';
import { omit } from 'lodash-es';
import { resolveComponent } from '../../__builtins__/shared/resolve-component.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

const ArrayBaseSymbol = Symbol("ArrayBaseContext");
const ItemSymbol = Symbol("ItemContext");
const useArray = () => {
  return inject(ArrayBaseSymbol, null);
};
const useIndex = (index) => {
  const { index: indexRef } = toRefs(inject(ItemSymbol));
  return indexRef != null ? indexRef : ref(index);
};
const useRecord = (record) => {
  var _a;
  const { record: recordRef } = toRefs(inject(ItemSymbol));
  return (_a = recordRef.value) != null ? _a : ref(record);
};
const useItemScope = () => {
  return toRef(inject(ItemSymbol));
};
const isObjectValue = (schema) => {
  var _a, _b;
  if (Array.isArray(schema == null ? void 0 : schema.items))
    return isObjectValue(schema.items[0]);
  if (((_a = schema == null ? void 0 : schema.items) == null ? void 0 : _a.type) === "array" || ((_b = schema == null ? void 0 : schema.items) == null ? void 0 : _b.type) === "object") {
    return true;
  }
  return false;
};
const useKey = (schema) => {
  const isObject = isObjectValue(schema);
  let keyMap = null;
  if (isObject) {
    keyMap = /* @__PURE__ */ new WeakMap();
  } else {
    keyMap = [];
  }
  onBeforeUnmount(() => {
    keyMap = null;
  });
  return {
    keyMap,
    getKey: (record, index) => {
      if (keyMap instanceof WeakMap) {
        if (!keyMap.has(record)) {
          keyMap.set(record, uid());
        }
        return `${keyMap.get(record)}-${index}`;
      }
      if (keyMap && !keyMap[index]) {
        keyMap[index] = uid();
      }
      return keyMap ? `${keyMap[index]}-${index}` : void 0;
    }
  };
};
const getDefaultValue = (defaultValue, schema) => {
  var _a, _b, _c, _d, _e, _f, _g;
  if (isValid(defaultValue))
    return clone(defaultValue);
  if (Array.isArray(schema == null ? void 0 : schema.items))
    return getDefaultValue(defaultValue, schema.items[0]);
  if (((_a = schema == null ? void 0 : schema.items) == null ? void 0 : _a.type) === "array")
    return [];
  if (((_b = schema == null ? void 0 : schema.items) == null ? void 0 : _b.type) === "boolean")
    return true;
  if (((_c = schema == null ? void 0 : schema.items) == null ? void 0 : _c.type) === "date")
    return "";
  if (((_d = schema == null ? void 0 : schema.items) == null ? void 0 : _d.type) === "datetime")
    return "";
  if (((_e = schema == null ? void 0 : schema.items) == null ? void 0 : _e.type) === "number")
    return 0;
  if (((_f = schema == null ? void 0 : schema.items) == null ? void 0 : _f.type) === "object")
    return {};
  if (((_g = schema == null ? void 0 : schema.items) == null ? void 0 : _g.type) === "string")
    return "";
  return null;
};
const ArrayBaseInner = defineComponent({
  name: "ArrayBase",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    keyMap: {
      type: [WeakMap, Array]
    }
  },
  setup(props, { slots, attrs }) {
    const field = useField();
    const schema = useFieldSchema();
    provide(ArrayBaseSymbol, {
      field,
      schema,
      props,
      attrs,
      keyMap: props.keyMap
    });
    return () => {
      return h(FragmentComponent, {}, slots);
    };
  }
});
const ArrayBaseButton = defineComponent({
  name: "ArrayBaseButton",
  props: {
    ...ElButton.props,
    popconfirmProps: {
      type: Object
    },
    messageBoxOptions: {
      type: Object
    },
    title: {
      type: String
    },
    link: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "small"
    },
    onClick: {
      type: Function
    }
  },
  emits: ["click"],
  setup(props, { attrs }) {
    const scope = useItemScope();
    const field = useField();
    const base = useArray();
    const schema = useFieldSchema();
    const buttonProps = omit(props, ["popconfirmProps", "messageBoxOptions"]);
    const popconfirmProps2 = computed(() => props.popconfirmProps);
    const messageBoxOptions = computed(() => props.messageBoxOptions);
    const loading = ref(false);
    return () => {
      if ((base == null ? void 0 : base.field.value.pattern) !== "editable")
        return null;
      const ButtonNode = h(
        ElButton,
        {
          ...buttonProps,
          ...attrs,
          type: buttonProps.type || "primary",
          loading: loading.value,
          onClick: async (e) => {
            e.stopPropagation();
            if (messageBoxOptions.value) {
              ElMessageBox.confirm("", {
                type: "warning",
                ...messageBoxOptions.value
              }).then(async () => {
                var _a, _b;
                loading.value = true;
                await ((_b = (_a = messageBoxOptions.value) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, e, scope.value));
                loading.value = false;
              }).catch(async (action) => {
                var _a, _b;
                loading.value = true;
                await ((_b = (_a = messageBoxOptions.value) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a, e, scope.value, action));
                loading.value = false;
              });
            } else {
              if (typeof props.onClick === "function") {
                loading.value = true;
                await props.onClick(e, scope.value);
                loading.value = false;
              }
            }
          }
        },
        {
          default: () => {
            var _a, _b;
            return [
              resolveComponent((_b = (_a = schema.value)["x-render"]) == null ? void 0 : _b.call(_a, scope.value)) || field.value.title || props.title
            ];
          }
        }
      );
      if (popconfirmProps2.value) {
        return h(
          ElPopconfirm,
          {
            ...popconfirmProps2.value,
            onCancel: async (e) => {
              var _a, _b;
              loading.value = true;
              await ((_b = (_a = popconfirmProps2.value) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a, e, scope.value));
              loading.value = false;
            },
            onConfirm: async (e) => {
              var _a, _b;
              loading.value = true;
              (_b = (_a = popconfirmProps2.value) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, e, scope.value);
              loading.value = false;
            }
          },
          {
            reference: () => ButtonNode
          }
        );
      }
      return ButtonNode;
    };
  }
});
const ArrayBaseItem = defineComponent({
  name: "ArrayBaseItem",
  props: ["index", "record"],
  setup(props, { slots }) {
    provide(ItemSymbol, props);
    return () => {
      return h(FragmentComponent, {}, slots);
    };
  }
});
const ArrayBaseSortHandle = defineComponent({
  name: "ArrayBaseSortHandle",
  props: ["index"],
  setup(props, { attrs }) {
    const array = useArray();
    const prefixCls = `${stylePrefix}-array-base`;
    return () => {
      var _a;
      if (!array)
        return null;
      if (((_a = array.field.value) == null ? void 0 : _a.pattern) !== "editable")
        return null;
      return h(
        ElButton,
        {
          directives: [{ name: "handle" }],
          size: "small",
          type: "primary",
          text: true,
          icon: Rank,
          ...attrs,
          class: [`${prefixCls}-sort-handle`].concat(attrs.class)
        },
        {}
      );
    };
  }
});
const ArrayBaseIndex = defineComponent({
  name: "ArrayBaseIndex",
  setup(props, { attrs }) {
    const index = useIndex();
    const prefixCls = `${stylePrefix}-array-base`;
    return () => {
      const { class: className, ...other } = attrs;
      return h(
        "span",
        {
          class: [`${prefixCls}-index`, className],
          ...other
        },
        {
          default: () => [`${index.value + 1}`]
        }
      );
    };
  }
});
const ArrayBaseAddition = defineComponent({
  name: "ArrayBaseAddition",
  props: ["method", "defaultValue", "title"],
  setup(props, { attrs }) {
    const self = useField();
    const array = useArray();
    const prefixCls = `${stylePrefix}-array-base`;
    return () => {
      if (!array)
        return null;
      if ((array == null ? void 0 : array.field.value.pattern) !== "editable")
        return null;
      const { class: className, ...other } = attrs;
      return h(
        ElButton,
        {
          class: [`${prefixCls}-addition`, className],
          icon: Plus,
          ...other,
          ...props,
          onClick: (e) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
            if ((_a = array.props) == null ? void 0 : _a.disabled)
              return;
            const defaultValue = getDefaultValue(props.defaultValue, array == null ? void 0 : array.schema.value);
            if (props.method === "unshift") {
              (_b = array == null ? void 0 : array.field) == null ? void 0 : _b.value.unshift(defaultValue);
              (_d = (_c = array.attrs) == null ? void 0 : _c.add) == null ? void 0 : _d.call(_c, 0);
            } else {
              (_e = array == null ? void 0 : array.field) == null ? void 0 : _e.value.push(defaultValue);
              (_j = (_f = array.attrs) == null ? void 0 : _f.add) == null ? void 0 : _j.call(_f, ((_i = (_h = (_g = array == null ? void 0 : array.field) == null ? void 0 : _g.value) == null ? void 0 : _h.value) == null ? void 0 : _i.length) - 1);
            }
            if (typeof attrs.onClick === "function") {
              attrs.onClick(e);
            }
          }
        },
        {
          default: () => [self.value.title || props.title]
        }
      );
    };
  }
});
const ArrayBaseRemove = defineComponent({
  name: "ArrayBaseRemove",
  props: {
    ...ArrayBaseButton.props,
    index: {
      type: Number
    },
    onClick: {
      type: Function
    }
  },
  setup(props, { attrs }) {
    const indexRef = useIndex(props.index);
    const self = useField();
    const base = useArray();
    const prefixCls = `${stylePrefix}-array-base`;
    const remove = async (e) => {
      var _a, _b;
      e.stopPropagation();
      if (typeof props.onClick === "function") {
        const fn = await props.onClick(e);
        if (isPromise(fn)) {
          await fn;
        }
      }
      base == null ? void 0 : base.field.value.remove(indexRef.value);
      (_b = (_a = base == null ? void 0 : base.attrs) == null ? void 0 : _a.remove) == null ? void 0 : _b.call(_a, indexRef.value);
    };
    const popconfirmProps2 = {
      title: "\u662F\u5426\u8BE5\u5220\u9664\u6570\u636E",
      ...props.popconfirmProps,
      onConfirm: async (...args) => {
        var _a, _b, _c, _d;
        await ((_b = (_a = props.popconfirmProps) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, ...args));
        base == null ? void 0 : base.field.value.remove(indexRef.value);
        (_d = (_c = base == null ? void 0 : base.attrs) == null ? void 0 : _c.remove) == null ? void 0 : _d.call(_c, indexRef.value);
      }
    };
    const messageBoxOptions = {
      message: "\u662F\u5426\u8BE5\u5220\u9664\u6570\u636E",
      ...props.messageBoxOptions,
      onConfirm: async (...args) => {
        var _a, _b, _c, _d;
        await ((_b = (_a = props.messageBoxOptions) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, ...args));
        base == null ? void 0 : base.field.value.remove(indexRef.value);
        (_d = (_c = base == null ? void 0 : base.attrs) == null ? void 0 : _c.remove) == null ? void 0 : _d.call(_c, indexRef.value);
      }
    };
    return () => {
      if ((base == null ? void 0 : base.field.value.pattern) !== "editable")
        return null;
      const { class: className, ...other } = attrs;
      return h(
        ArrayBaseButton,
        {
          class: [`${prefixCls}-remove`, className],
          link: true,
          size: "small",
          icon: Delete,
          ...props,
          ...other,
          type: props.type ? props.type : "danger",
          onClick: props.popconfirmProps || props.messageBoxOptions ? () => {
          } : remove,
          popconfirmProps: props.popconfirmProps ? popconfirmProps2 : null,
          messageBoxOptions: props.messageBoxOptions ? messageBoxOptions : null
        },
        {
          default: () => [self.value.title || props.title]
        }
      );
    };
  }
});
const ArrayBaseMoveDown = defineComponent({
  name: "ArrayBaseMoveDown",
  props: ["index", "title"],
  setup(props, { attrs }) {
    const indexRef = useIndex(props.index);
    const self = useField();
    const base = useArray();
    const prefixCls = `${stylePrefix}-array-base`;
    return () => {
      if ((base == null ? void 0 : base.field.value.pattern) !== "editable")
        return null;
      const { class: className, ...other } = attrs;
      return h(
        ElButton,
        {
          class: [`${prefixCls}-move-down`, className],
          size: "small",
          type: "primary",
          link: true,
          icon: ArrowDown,
          ...other,
          onClick: async (e) => {
            var _a, _b;
            e.stopPropagation();
            if (typeof attrs.onClick === "function") {
              const fn = attrs.onClick(e);
              if (isPromise(fn)) {
                await fn;
              }
            }
            if (Array.isArray(base == null ? void 0 : base.keyMap)) {
              base.keyMap.splice(indexRef.value + 1, 0, base.keyMap.splice(indexRef.value, 1)[0]);
            }
            base == null ? void 0 : base.field.value.moveDown(indexRef.value);
            (_b = (_a = base == null ? void 0 : base.attrs) == null ? void 0 : _a.moveDown) == null ? void 0 : _b.call(_a, indexRef.value);
          }
        },
        {
          default: () => [self.value.title || props.title]
        }
      );
    };
  }
});
const ArrayBaseMoveUp = defineComponent({
  name: "ArrayBaseMoveUp",
  props: ["index", "title"],
  setup(props, { attrs }) {
    const indexRef = useIndex(props.index);
    const self = useField();
    const base = useArray();
    const prefixCls = `${stylePrefix}-array-base`;
    return () => {
      if ((base == null ? void 0 : base.field.value.pattern) !== "editable")
        return null;
      const { class: className, ...other } = attrs;
      return h(
        ElButton,
        {
          class: [`${prefixCls}-move-up`, className],
          size: "small",
          type: "primary",
          link: true,
          icon: ArrowUp,
          ...other,
          onClick: async (e) => {
            var _a, _b;
            e.stopPropagation();
            if (typeof attrs.onClick === "function") {
              const fn = attrs.onClick(e);
              if (isPromise(fn)) {
                await fn;
              }
            }
            if (Array.isArray(base == null ? void 0 : base.keyMap)) {
              base.keyMap.splice(indexRef.value - 1, 0, base.keyMap.splice(indexRef.value, 1)[0]);
            }
            base == null ? void 0 : base.field.value.moveUp(indexRef.value);
            (_b = (_a = base == null ? void 0 : base.attrs) == null ? void 0 : _a.moveUp) == null ? void 0 : _b.call(_a, indexRef.value);
          }
        },
        {
          default: () => [self.value.title || props.title]
        }
      );
    };
  }
});
const ArrayBaseButtonGroup = defineComponent({
  name: "ArrayBaseButtonGroup",
  inheritAttrs: false,
  props: ["index"],
  setup(props) {
    const indexRef = useIndex(props.index);
    const record = useRecord();
    const schema = useFieldSchema();
    const base = useArray();
    return () => {
      if ((base == null ? void 0 : base.field.value.pattern) !== "editable")
        return null;
      return h(
        FragmentComponent,
        {},
        {
          default: () => {
            var _a, _b;
            return resolveComponent((_b = (_a = schema.value)["x-render"]) == null ? void 0 : _b.call(_a, { row: record, $index: indexRef.value }));
          }
        }
      );
    };
  }
});
const ArrayBase = composeExport(ArrayBaseInner, {
  Index: ArrayBaseIndex,
  Item: ArrayBaseItem,
  SortHandle: ArrayBaseSortHandle,
  Addition: ArrayBaseAddition,
  Remove: ArrayBaseRemove,
  MoveDown: ArrayBaseMoveDown,
  MoveUp: ArrayBaseMoveUp,
  Button: ArrayBaseButton,
  ButtonGroup: ArrayBaseButtonGroup,
  useArray,
  useIndex,
  useKey,
  useRecord
});

export { ArrayBase };
//# sourceMappingURL=index.mjs.map