@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/event/index.ts

@@ -0,0 +1,16 @@
+import { transformComponent } from '../__builtins__';
+import { mapProps, connect } from '@formily/vue';
+import _Event from '../base/event/index.vue';
+export type EventProps = typeof _Event;
+const TransformEvent = transformComponent<EventProps>(_Event, {
+    change: 'update:modelValue',
+});
+export const Event = connect(
+    TransformEvent,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default Event;

package/src/components/form/index.ts

@@ -0,0 +1,94 @@
+import { Component, VNode, defineComponent } from 'vue';
+import type, { SetupContext } from 'vue';
+import { Form as FormType, IFormFeedback } from '@formily/core';
+import { FormProvider as _FormProvider, useForm, h } from '@formily/vue';
+
+import { PreviewText } from '../preview-text';
+import { FormLayout, FormLayoutProps } from '../form-layout';
+
+const FormProvider = _FormProvider as unknown as Component;
+
+export interface FormProps extends FormLayoutProps {
+    form?: FormType;
+    component?: Component;
+    previewTextPlaceholder: string | (() => VNode);
+    onAutoSubmit?: (values: any) => any;
+    onAutoSubmitFailed?: (feedbacks: IFormFeedback[]) => void;
+}
+
+export const Form = defineComponent({
+    name: 'FForm',
+    props: [
+        'form',
+        'component',
+        'previewTextPlaceholder',
+        'onAutoSubmit',
+        'onAutoSubmitFailed',
+    ],
+    setup(props: FormProps, { attrs, slots }: SetupContext) {
+        const top = useForm();
+
+        return () => {
+            const {
+                form,
+                component = 'form',
+                onAutoSubmit = attrs.onAutoSubmit,
+                onAutoSubmitFailed = attrs.autoSubmitFailed,
+                previewTextPlaceholder = slots?.previewTextPlaceholder,
+            } = props;
+
+            const renderContent = (form: FormType) => {
+                return h(
+                    PreviewText.Placeholder,
+                    {
+                        value: previewTextPlaceholder,
+                    },
+                    {
+                        default: () => [
+                            h(FormLayout, attrs, {
+                                default: () => [
+                                    h(
+                                        component,
+                                        {
+                                            onSubmit: (e: Event) => {
+                                                e?.stopPropagation?.();
+                                                e?.preventDefault?.();
+                                                form.submit(
+                                                    onAutoSubmit as (
+                                                        e: any
+                                                    ) => void
+                                                ).catch(
+                                                    onAutoSubmitFailed as (
+                                                        e: any
+                                                    ) => void
+                                                );
+                                            },
+                                        },
+                                        slots
+                                    ),
+                                ],
+                            }),
+                        ],
+                    }
+                );
+            };
+
+            if (form) {
+                return h(
+                    FormProvider,
+                    { form },
+                    {
+                        default: () => renderContent(form),
+                    }
+                );
+            }
+
+            if (!top.value)
+                throw new Error('must pass form instance by createForm');
+
+            return renderContent(top.value);
+        };
+    },
+});
+
+export default Form;

package/src/components/form/style.ts

@@ -0,0 +1,3 @@
+// 依赖
+import '../preview-text/style'
+import '../form-layout/style'

package/src/components/form-button-group/index.ts

@@ -0,0 +1,74 @@
+import { h } from '@formily/vue';
+import { defineComponent } from 'vue';
+import { Space, SpaceProps } from '../space';
+import { FormBaseItem } from '../form-item';
+import { stylePrefix } from '../__builtins__';
+
+export type FormButtonGroupProps = Omit<SpaceProps, 'align' | 'size'> & {
+    align?: 'left' | 'right' | 'center';
+    gutter?: number;
+    className?: string;
+    alignFormItem: boolean;
+};
+
+export const FormButtonGroup = defineComponent({
+    name: 'FFormButtonGroup',
+    props: {
+        align: {
+            type: String,
+            default: 'left',
+        },
+        gutter: {
+            type: Number,
+            default: 8,
+        },
+        alignFormItem: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props, { slots, attrs }) {
+        const prefixCls = `${stylePrefix}-form-button-group`;
+        return () => {
+            if (props.alignFormItem) {
+                return h(
+                    FormBaseItem,
+                    {
+                        colon: false,
+                        label: ' ',
+                        ...attrs,
+                        style: {
+                            margin: 0,
+                            padding: 0,
+                            width: '100%',
+                        },
+                    },
+                    {
+                        default: () => h(Space, { size: props.gutter }, slots),
+                    }
+                );
+            } else {
+                return h(
+                    Space,
+                    {
+                        ...attrs,
+                        class: [prefixCls],
+                        style: {
+                            justifyContent:
+                                props.align === 'left'
+                                    ? 'flex-start'
+                                    : props.align === 'right'
+                                    ? 'flex-end'
+                                    : 'center',
+                            display: 'flex',
+                        },
+                        size: props.gutter,
+                    },
+                    slots
+                );
+            }
+        };
+    },
+});
+
+export default FormButtonGroup;

package/src/components/form-button-group/style.ts

@@ -0,0 +1,4 @@
+import './style.scss'
+
+import '../form-item/style'
+import '../space/style'

package/src/components/form-collapse/index.ts

@@ -0,0 +1,215 @@
+import { model } from '@formily/reactive';
+import { computed, defineComponent, PropType } from 'vue';
+import {
+    useField,
+    useFieldSchema,
+    RecursionField,
+    h,
+    Fragment,
+} from '@formily/vue';
+import { observer } from '@formily/reactive-vue';
+import { Schema, SchemaKey } from '@formily/json-schema';
+import { ElCollapse, ElCollapseItem, ElBadge } from '@cicctencent/jtui';
+import { toArr } from '@formily/shared';
+import { GeneralField } from '@formily/core';
+
+import { composeExport, stylePrefix } from '../__builtins__';
+
+type ActiveKeys = string | number | Array<string | number>;
+
+type ActiveKey = string | number;
+
+type Panels = { name: SchemaKey; props: any; schema: Schema }[];
+
+export interface IFormCollapse {
+    activeKeys: ActiveKeys;
+    hasActiveKey(key: ActiveKey): boolean;
+    setActiveKeys(key: ActiveKeys): void;
+    addActiveKey(key: ActiveKey): void;
+    removeActiveKey(key: ActiveKey): void;
+    toggleActiveKey(key: ActiveKey): void;
+}
+
+export interface IFormCollapseProps {
+    formCollapse?: IFormCollapse;
+    activeKey?: ActiveKey;
+}
+
+const usePanels = (collapseField: GeneralField, schema: Schema) => {
+    const panels: Panels = [];
+    schema.mapProperties((schema, name) => {
+        const field = collapseField
+            .query(collapseField.address.concat(name))
+            .take();
+        if (field?.display === 'none' || field?.display === 'hidden') return;
+
+        if (schema['x-component']?.indexOf('FormCollapse.Item') > -1) {
+            panels.push({
+                name,
+                props: {
+                    ...schema?.['x-component-props'],
+                    key: schema?.['x-component-props']?.key || name,
+                },
+                schema,
+            });
+        }
+    });
+    return panels;
+};
+
+const createFormCollapse = (defaultActiveKeys?: ActiveKeys) => {
+    const formCollapse = model({
+        activeKeys: defaultActiveKeys,
+        setActiveKeys(keys: ActiveKeys) {
+            formCollapse.activeKeys = keys;
+        },
+        hasActiveKey(key: ActiveKey) {
+            if (Array.isArray(formCollapse.activeKeys)) {
+                if (formCollapse.activeKeys.includes(key)) {
+                    return true;
+                }
+            } else if (formCollapse.activeKeys == key) {
+                return true;
+            }
+            return false;
+        },
+        addActiveKey(key: ActiveKey) {
+            if (formCollapse.hasActiveKey(key)) return;
+            formCollapse.activeKeys = toArr(formCollapse.activeKeys).concat(
+                key
+            );
+        },
+        removeActiveKey(key: ActiveKey) {
+            if (Array.isArray(formCollapse.activeKeys)) {
+                formCollapse.activeKeys = formCollapse.activeKeys.filter(
+                    item => item != key
+                );
+            } else {
+                formCollapse.activeKeys = '';
+            }
+        },
+        toggleActiveKey(key: ActiveKey) {
+            if (formCollapse.hasActiveKey(key)) {
+                formCollapse.removeActiveKey(key);
+            } else {
+                formCollapse.addActiveKey(key);
+            }
+        },
+    });
+    return formCollapse;
+};
+
+const FormCollapse = observer(
+    defineComponent({
+        inheritAttrs: false,
+        props: {
+            formCollapse: { type: Object as PropType<IFormCollapse> },
+            activeKey: {
+                type: [String, Number],
+            },
+        },
+        setup(props, { attrs, emit }) {
+            const field: any = useField();
+            const schema = useFieldSchema();
+            const prefixCls = `${stylePrefix}-form-collapse`;
+            const formCollapseRef = computed(
+                () => props.formCollapse ?? createFormCollapse()
+            );
+
+            const takeActiveKeys = (panels: Panels) => {
+                if (props.activeKey) return props.activeKey;
+                if (formCollapseRef.value?.activeKeys)
+                    return formCollapseRef.value?.activeKeys;
+                if (attrs.accordion) return panels[0]?.name;
+                return panels.map(item => item.name);
+            };
+
+            const badgedHeader = (key: SchemaKey, props: any) => {
+                const errors = field.value.form.queryFeedbacks({
+                    type: 'error',
+                    address: `${field.value.address.concat(key)}.*`,
+                });
+                if (errors.length > 0) {
+                    return h(
+                        ElBadge,
+                        {
+                            class: [`${prefixCls}-errors-badge`],
+                            value: errors.length,
+                        },
+                        { default: () => props.title }
+                    );
+                }
+                return props.title;
+            };
+
+            return () => {
+                const panels = usePanels(field.value, schema.value as any);
+                const activeKey = takeActiveKeys(panels);
+                return h(
+                    ElCollapse,
+                    {
+                        class: prefixCls,
+                        modelValue: activeKey,
+                        onChange: (key: string | string[]) => {
+                            emit('input', key);
+                            formCollapseRef.value.setActiveKeys(key);
+                        },
+                    },
+                    {
+                        default: () => {
+                            return panels.map(
+                                ({ props, schema, name }, key) => {
+                                    return h(
+                                        ElCollapseItem,
+                                        {
+                                            key,
+                                            ...props,
+                                            name,
+                                        },
+                                        {
+                                            default: () =>
+                                                h(
+                                                    RecursionField,
+                                                    { schema, name },
+                                                    {}
+                                                ),
+                                            title: () =>
+                                                h(
+                                                    'span',
+                                                    {},
+                                                    {
+                                                        default: () => [
+                                                            badgedHeader(
+                                                                name,
+                                                                props
+                                                            ),
+                                                        ],
+                                                    }
+                                                ),
+                                        }
+                                    );
+                                }
+                            );
+                        },
+                    }
+                );
+            };
+        },
+    })
+);
+
+export const FormCollapseItem = defineComponent({
+    name: 'FFormCollapseItem',
+    inheritAttrs: false,
+    setup(_props, { slots }) {
+        return () => h(Fragment, {}, slots);
+    },
+});
+
+const composeFormCollapse = composeExport(FormCollapse, {
+    Item: FormCollapseItem,
+    createFormCollapse,
+});
+
+export { composeFormCollapse as FormCollapse };
+export default composeFormCollapse;

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

@@ -0,0 +1,6 @@
+@import '../__builtins__/styles/common.scss';
+
+.#{$formily-prefix}-form-collapse-errors-badge {
+  line-height: 1;
+  vertical-align: initial;
+}

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

@@ -0,0 +1,4 @@
+import './style.scss'
+import '@cicctencent/jtui/theme-chalk/src/collapse.scss'
+import '@cicctencent/jtui/theme-chalk/src/collapse-item.scss'
+import '@cicctencent/jtui/theme-chalk/src/bdage.scss'