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

A Component Library for Vue 3

import { defineComponent, h } from 'vue';
import { useField, useFieldSchema, RecursionField } from '@formily/vue';
import { observer } from '@formily/reactive-vue';
import Draggable from 'vuedraggable';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { ArrayBase } from '../../array-base/src/index.mjs';
import '../../__builtins__/shared/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

const isAdditionComponent = (schema) => {
  var _a;
  if (typeof schema["x-component"] !== "string")
    return false;
  return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Addition")) > -1;
};
const ArrayItemsInner = observer(
  defineComponent({
    name: "FArrayItems",
    inheritAttrs: false,
    setup() {
      const fieldRef = useField();
      const schemaRef = useFieldSchema();
      const prefixCls = `${stylePrefix}-array-items`;
      const { getKey, keyMap } = ArrayBase.useKey(schemaRef.value);
      return () => {
        const field = fieldRef.value;
        const schema = schemaRef.value;
        const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
        const renderItems = () => {
          const itemSlot = ({ element, index }) => {
            const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
            const key = getKey(element, index);
            return h(
              "div",
              {},
              h(
                ArrayBase.Item,
                {
                  key,
                  index,
                  record: element
                },
                {
                  default: () => h(
                    "div",
                    {
                      class: [`${prefixCls}-item-inner`],
                      index,
                      key
                    },
                    h(RecursionField, {
                      schema: items,
                      name: index
                    })
                  )
                }
              )
            );
          };
          return h(
            Draggable,
            {
              class: [`${prefixCls}-list`],
              value: [],
              list: dataSource,
              animation: 150,
              handle: `.${stylePrefix}-array-base-sort-handle`,
              itemKey: (item, index) => getKey(item, index),
              onChange(evt) {
                if (evt.moved) {
                  const { oldIndex, newIndex } = evt.moved;
                  if (Array.isArray(keyMap)) {
                    keyMap.splice(newIndex, 0, keyMap.splice(oldIndex, 1)[0]);
                  }
                  field.move(oldIndex, newIndex);
                }
              }
            },
            { item: itemSlot }
          );
        };
        const renderAddition = () => {
          return schema.reduceProperties((addition, schema2) => {
            if (isAdditionComponent(schema2)) {
              return h(RecursionField, {
                schema: schema2,
                name: "addition"
              });
            }
            return addition;
          }, null);
        };
        return h(
          ArrayBase,
          {
            keyMap
          },
          {
            default: () => h(
              "div",
              {
                class: [prefixCls],
                onChange: () => {
                  return;
                }
              },
              {
                default: () => [renderItems(), renderAddition()]
              }
            )
          }
        );
      };
    }
  })
);
const ArrayItemsItem = defineComponent({
  name: "FArrayItemsItem",
  props: ["type"],
  setup(props, { attrs, slots }) {
    const prefixCls = `${stylePrefix}-array-items`;
    return () => h(
      "div",
      {
        class: [`${prefixCls}-${props.type || "card"}`],
        ...attrs,
        onChange: () => {
          return;
        }
      },
      slots
    );
  }
});
const ArrayItems = composeExport(ArrayItemsInner, {
  Item: ArrayItemsItem,
  Index: ArrayBase.Index,
  SortHandle: ArrayBase.SortHandle,
  Addition: ArrayBase.Addition,
  Remove: ArrayBase.Remove,
  MoveDown: ArrayBase.MoveDown,
  MoveUp: ArrayBase.MoveUp,
  useArray: ArrayBase.useArray,
  useIndex: ArrayBase.useIndex,
  useRecord: ArrayBase.useRecord
});

export { ArrayItems, ArrayItems as default };
//# sourceMappingURL=index.mjs.map