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

A Component Library for Vue 3

import { defineComponent, h } from 'vue';
import { ElCard, ElRow, ElEmpty } from 'element-plus';
import { useField, useFieldSchema, RecursionField } from '@formily/vue';
import { observer } from '@formily/reactive-vue';
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 isIndexComponent = (schema) => {
  var _a;
  if (typeof schema["x-component"] !== "string")
    return false;
  return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Index")) > -1;
};
const isRemoveComponent = (schema) => {
  var _a;
  if (typeof schema["x-component"] !== "string")
    return false;
  return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Remove")) > -1;
};
const isMoveUpComponent = (schema) => {
  var _a;
  if (typeof schema["x-component"] !== "string")
    return false;
  return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("MoveUp")) > -1;
};
const isMoveDownComponent = (schema) => {
  var _a;
  if (typeof schema["x-component"] !== "string")
    return false;
  return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("MoveDown")) > -1;
};
const isOperationComponent = (schema) => {
  return isAdditionComponent(schema) || isRemoveComponent(schema) || isMoveDownComponent(schema) || isMoveUpComponent(schema);
};
const ArrayCardsInner = observer(
  defineComponent({
    name: "FArrayCards",
    inheritAttrs: false,
    props: ["onChange"],
    setup(props, { attrs }) {
      const fieldRef = useField();
      const schemaRef = useFieldSchema();
      const prefixCls = `${stylePrefix}-array-cards`;
      const { getKey, keyMap } = ArrayBase.useKey(schemaRef.value);
      return () => {
        const field = fieldRef.value;
        const schema = schemaRef.value;
        const dataSource = Array.isArray(field.value) ? field.value : [];
        if (!schema)
          throw new Error("can not found schema object");
        const renderItems = () => {
          return dataSource == null ? void 0 : dataSource.map((item, index) => {
            const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
            const title = h(
              "span",
              {},
              {
                default: () => [
                  h(
                    RecursionField,
                    {
                      schema: items,
                      name: index,
                      filterProperties: (schema2) => {
                        if (!isIndexComponent(schema2))
                          return false;
                        return true;
                      },
                      onlyRenderProperties: true
                    },
                    {}
                  ),
                  attrs.title || field.title
                ]
              }
            );
            const extra = h(
              "span",
              {},
              {
                default: () => [
                  h(
                    RecursionField,
                    {
                      schema: items,
                      name: index,
                      filterProperties: (schema2) => {
                        if (!isOperationComponent(schema2))
                          return false;
                        return true;
                      },
                      onlyRenderProperties: true
                    },
                    {}
                  ),
                  attrs.extra
                ]
              }
            );
            const content = h(
              RecursionField,
              {
                schema: items,
                name: index,
                filterProperties: (schema2) => {
                  if (isIndexComponent(schema2))
                    return false;
                  if (isOperationComponent(schema2))
                    return false;
                  return true;
                }
              },
              {}
            );
            return h(
              ArrayBase.Item,
              {
                key: getKey(item, index),
                index,
                record: item
              },
              {
                default: () => h(
                  ElCard,
                  {
                    shadow: "never",
                    ...attrs,
                    class: [`${prefixCls}-item`].concat(attrs.class)
                  },
                  {
                    default: () => [content],
                    header: () => h(
                      ElRow,
                      {
                        type: "flex",
                        justify: "space-between"
                      },
                      {
                        default: () => [title, extra]
                      }
                    )
                  }
                )
              }
            );
          });
        };
        const renderAddition = () => {
          return schema.reduceProperties((addition, schema2) => {
            if (isAdditionComponent(schema2)) {
              return h(
                RecursionField,
                {
                  schema: schema2,
                  name: "addition"
                },
                {}
              );
            }
            return addition;
          }, null);
        };
        const renderEmpty = () => {
          if (dataSource == null ? void 0 : dataSource.length)
            return;
          return h(
            ElCard,
            {
              class: [`${prefixCls}-item`],
              shadow: "never",
              ...attrs,
              header: attrs.title || field.title
            },
            {
              default: () => h(ElEmpty, { props: { description: "No Data", imageSize: 100 } }, {})
            }
          );
        };
        return h(
          "div",
          {
            class: [prefixCls]
          },
          h(
            ArrayBase,
            {
              keyMap
            },
            {
              default: () => {
                return [renderEmpty(), renderItems(), renderAddition()];
              }
            }
          )
        );
      };
    }
  })
);
const ArrayCards = composeExport(ArrayCardsInner, {
  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 { ArrayCards, ArrayCards as default };
//# sourceMappingURL=index.mjs.map