@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/array-collapse/style.scss

@@ -0,0 +1,38 @@
+@import '../__builtins__/styles/common.scss';
+
+$array-table-prefix-cls: '#{$formily-prefix}-array-collapse';
+
+.#{$array-table-prefix-cls} {
+  .el-card__header {
+    padding-top: 12.5px;
+    padding-bottom: 12.5px;
+  }
+  .el-empty {
+    padding: 0;
+  }
+
+  .#{$array-table-prefix-cls}-item {
+    margin-bottom: 10px;
+  }
+
+  .#{$array-table-prefix-cls}-errors-badge {
+    line-height: 1;
+    vertical-align: initial;
+  }
+
+  .#{$formily-prefix}-array-base-addition {
+    width: 100%;
+    border: $--border-width-base dashed $--border-color-base;
+
+    &:hover {
+      background-color: $--color-white;
+      border-color: $--border-color-hover;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $--color-white;
+      border-color: $--color-primary;
+    }
+  }
+}

package/src/components/array-collapse/style.ts

@@ -0,0 +1,10 @@
+import './style.scss'
+import '@cicctencent/jtui/theme-chalk/src/empty.scss'
+import '@cicctencent/jtui/theme-chalk/src/row.scss'
+import '@cicctencent/jtui/theme-chalk/src/collapse.scss'
+import '@cicctencent/jtui/theme-chalk/src/collapse-item.scss'
+import '@cicctencent/jtui/theme-chalk/src/card.scss'
+import '@cicctencent/jtui/theme-chalk/src/badge.scss'
+
+// 依赖
+import '../array-base/style'

package/src/components/array-items/index.ts

@@ -0,0 +1,213 @@
+import { defineComponent, h } from 'vue';
+import { ArrayField } from '@formily/core';
+import { useField, useFieldSchema, RecursionField } from '@formily/vue';
+import { observer } from '@formily/reactive-vue';
+import { ISchema } from '@formily/json-schema';
+import Draggable from 'vuedraggable';
+
+import { stylePrefix } from '../__builtins__/configs';
+import { ArrayBase } from '../array-base';
+import { composeExport } from '../__builtins__/shared';
+import './style.scss';
+const isAdditionComponent = (schema: ISchema) => {
+    return schema['x-component']?.indexOf('Addition') > -1;
+};
+// todo 完善包含any类型
+export interface IArrayItemsItemProps {
+    type?: 'card' | 'divide';
+}
+
+const ArrayItemsInner = observer(
+    defineComponent({
+        name: 'FArrayItems',
+        inheritAttrs: false,
+        setup() {
+            const fieldRef = useField<ArrayField>();
+            const schemaRef = useFieldSchema();
+
+            const prefixCls = `${stylePrefix}-array-items`;
+            const { getKey, keyMap } = ArrayBase.useKey(schemaRef.value as any);
+
+            return () => {
+                const field = fieldRef.value;
+                const schema = schemaRef.value;
+                const dataSource = Array.isArray(field.value)
+                    ? field.value.slice()
+                    : [];
+                const renderItems = () => {
+                    const itemSlot = ({
+                        element,
+                        index,
+                    }: {
+                        element: any;
+                        index: number;
+                    }) => {
+                        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,
+                                            },
+                                            [
+                                                // renderTitle(index),
+                                                h(
+                                                    'div',
+                                                    {
+                                                        class: [
+                                                            `${prefixCls}-item-list-wrap`,
+                                                        ],
+                                                    },
+                                                    h(RecursionField, {
+                                                        schema: items,
+                                                        name: index,
+                                                    })
+                                                ),
+                                            ]
+                                        ),
+                                }
+                            )
+                        );
+                    };
+
+                    return h(
+                        Draggable,
+                        {
+                            class: [`${prefixCls}-list`],
+                            value: [],
+                            list: dataSource,
+                            handle: `.${stylePrefix}-array-base-sort-handle`,
+                            itemKey: (item: any, index: number) =>
+                                getKey(item, index),
+                            onChange(evt: any) {
+                                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 renderTitle = index => {
+                    return h(ArrayBase.Index);
+                };
+
+                const renderAddition = () => {
+                    const _schema = useFieldSchema();
+                    const schemaJson = _schema.value.toJSON();
+                    let isRender = true;
+                    Object.keys(schemaJson.properties).forEach(key => {
+                      const item = schemaJson.properties[key];
+                      if (
+                        item?.['x-component'] === 'ArrayItems.Addition' &&
+                        item?.['x-component-props']?.maxLength &&
+                        item?.['x-component-props']?.maxLength <= field.value.length
+                      ) {
+                        isRender = false;
+                      }
+                    });
+
+                    if (!isRender) return null;
+
+                    return schema.reduceProperties((addition, schema) => {
+                        if (isAdditionComponent(schema)) {
+                            return h(RecursionField, {
+                                schema,
+                                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
+            );
+    },
+});
+
+export 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 default ArrayItems;

package/src/components/array-items/style.scss

@@ -0,0 +1,82 @@
+@import '../__builtins__/styles/common.scss';
+
+$array-items-prefix-cls: '#{$formily-prefix}-array-items';
+
+.#{$array-items-prefix-cls}-item-inner {
+  visibility: visible;
+  background-color: rgba(216, 220, 230, 0.2);
+  padding: 1px 16px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.#{$array-items-prefix-cls} {
+  .#{$formily-prefix}-array-base-addition {
+    width: 100%;
+    // border: $--border-width-base dashed $--border-color-base;
+
+    // &:hover {
+    //   background-color: $--color-white;
+    //   border-color: $--border-color-hover;
+    // }
+
+
+    // &:active,
+    // &:focus {
+    //   background-color: $--color-white;
+    //   border-color: $--color-primary;
+    // }
+  }
+}
+
+.#{$array-items-prefix-cls}-card {
+  display: flex;
+  border: 1px solid $--card-border-color;
+  margin-bottom: 10px;
+  padding: 3px 6px;
+  background: $--color-white;
+  justify-content: space-between;
+
+  .#{$formily-prefix}-form-item:not(.#{$formily-prefix}-form-item-feedback-layout-popover) {
+    margin-bottom: 0 !important;
+
+    .#{$formily-prefix}-form-item-help {
+      position: absolute;
+      font-size: 12px;
+      top: 100%;
+      background: $--color-white;
+      width: 100%;
+      margin-top: 3px;
+      padding: 3px;
+      z-index: 1;
+      border-radius: 3px;
+      box-shadow: 0 0 10px $--border-color-base;
+    }
+  }
+}
+
+.#{$array-items-prefix-cls}-divide {
+  display: flex;
+  border-bottom: 1px solid $--card-border-color;
+  padding: 10px 0;
+  justify-content: space-between;
+
+  .#{$formily-prefix}-form-item:not(.#{$formily-prefix}-form-item-feedback-layout-popover) {
+    margin-bottom: 0 !important;
+
+    .#{$formily-prefix}-form-item-help {
+      position: absolute;
+      font-size: 12px;
+      top: 100%;
+      background: $--color-white;
+      width: 100%;
+      margin-top: 3px;
+      padding: 3px;
+      z-index: 1;
+      border-radius: 3px;
+      box-shadow: 0 0 10px $--card-border-color;
+    }
+  }
+}

package/src/components/array-items/style.ts

@@ -0,0 +1,4 @@
+import './style.scss'
+
+// 依赖
+import '../array-base/style'