vue-admin-core/lib/formily/array-items/src/index.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vue$1 = require('@formily/vue');
var reactiveVue = require('@formily/reactive-vue');
var Draggable = require('vuedraggable');
var index = require('../../__builtins__/configs/index.js');
var index$1 = require('../../array-base/src/index.js');
require('../../__builtins__/shared/index.js');
var utils = require('../../__builtins__/shared/utils.js');

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 = reactiveVue.observer(
  vue.defineComponent({
    name: "FArrayItems",
    inheritAttrs: false,
    setup() {
      const fieldRef = vue$1.useField();
      const schemaRef = vue$1.useFieldSchema();
      const prefixCls = `${index.stylePrefix}-array-items`;
      const { getKey, keyMap } = index$1.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 vue.h(
              "div",
              {},
              vue.h(
                index$1.ArrayBase.Item,
                {
                  key,
                  index,
                  record: element
                },
                {
                  default: () => vue.h(
                    "div",
                    {
                      class: [`${prefixCls}-item-inner`],
                      index,
                      key
                    },
                    vue.h(vue$1.RecursionField, {
                      schema: items,
                      name: index
                    })
                  )
                }
              )
            );
          };
          return vue.h(
            Draggable,
            {
              class: [`${prefixCls}-list`],
              value: [],
              list: dataSource,
              animation: 150,
              handle: `.${index.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 vue.h(vue$1.RecursionField, {
                schema: schema2,
                name: "addition"
              });
            }
            return addition;
          }, null);
        };
        return vue.h(
          index$1.ArrayBase,
          {
            keyMap
          },
          {
            default: () => vue.h(
              "div",
              {
                class: [prefixCls],
                onChange: () => {
                  return;
                }
              },
              {
                default: () => [renderItems(), renderAddition()]
              }
            )
          }
        );
      };
    }
  })
);
const ArrayItemsItem = vue.defineComponent({
  name: "FArrayItemsItem",
  props: ["type"],
  setup(props, { attrs, slots }) {
    const prefixCls = `${index.stylePrefix}-array-items`;
    return () => vue.h(
      "div",
      {
        class: [`${prefixCls}-${props.type || "card"}`],
        ...attrs,
        onChange: () => {
          return;
        }
      },
      slots
    );
  }
});
const ArrayItems = utils.composeExport(ArrayItemsInner, {
  Item: ArrayItemsItem,
  Index: index$1.ArrayBase.Index,
  SortHandle: index$1.ArrayBase.SortHandle,
  Addition: index$1.ArrayBase.Addition,
  Remove: index$1.ArrayBase.Remove,
  MoveDown: index$1.ArrayBase.MoveDown,
  MoveUp: index$1.ArrayBase.MoveUp,
  useArray: index$1.ArrayBase.useArray,
  useIndex: index$1.ArrayBase.useIndex,
  useRecord: index$1.ArrayBase.useRecord
});

exports.ArrayItems = ArrayItems;
exports.default = ArrayItems;
//# sourceMappingURL=index.js.map