@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/form-layout/useResponsiveFormLayout.ts

@@ -0,0 +1,118 @@
+import { isArr, isValid } from '@formily/shared'
+import { onMounted, Ref, ref, getCurrentInstance } from 'vue'
+import type, { ComponentInternalInstance } from 'vue'
+
+interface IProps {
+  breakpoints?: number[]
+  layout?:
+    | 'vertical'
+    | 'horizontal'
+    | 'inline'
+    | ('vertical' | 'horizontal' | 'inline')[]
+  labelCol?: number | number[]
+  wrapperCol?: number | number[]
+  labelAlign?: 'right' | 'left' | ('right' | 'left')[]
+  wrapperAlign?: 'right' | 'left' | ('right' | 'left')[]
+  [props: string]: any
+}
+
+interface ICalcBreakpointIndex {
+  (originalBreakpoints: number[], width: number): number
+}
+
+interface ICalculateProps {
+  (target: Element, props: IProps): IProps
+}
+
+interface IUseResponsiveFormLayout {
+  (props: IProps): {
+    props: Ref<IProps>
+  }
+}
+
+const calcBreakpointIndex: ICalcBreakpointIndex = (breakpoints, width) => {
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (width <= breakpoints[i]) {
+      return i
+    }
+  }
+  return -1
+}
+
+const calcFactor = <T>(value: T | T[], breakpointIndex: number): T => {
+  if (Array.isArray(value)) {
+    if (breakpointIndex === -1) return value[0]
+    return value[breakpointIndex] ?? value[value.length - 1]
+  } else {
+    return value
+  }
+}
+
+const factor = <T>(value: T | T[], breakpointIndex: number): T =>
+  isValid(value) ? calcFactor(value as any, breakpointIndex) : value
+
+const calculateProps: ICalculateProps = (target, props) => {
+  const { clientWidth } = target
+  const {
+    breakpoints,
+    layout,
+    labelAlign,
+    wrapperAlign,
+    labelCol,
+    wrapperCol,
+    ...otherProps
+  } = props
+  const breakpointIndex = calcBreakpointIndex(
+    breakpoints as number[],
+    clientWidth
+  )
+
+  return {
+    layout: factor(layout, breakpointIndex),
+    labelAlign: factor(labelAlign, breakpointIndex),
+    wrapperAlign: factor(wrapperAlign, breakpointIndex),
+    labelCol: factor(labelCol, breakpointIndex),
+    wrapperCol: factor(wrapperCol, breakpointIndex),
+    ...otherProps,
+  }
+}
+
+const useRefs = (): Record<string, unknown> => {
+  const vm: ComponentInternalInstance | null = getCurrentInstance()
+  return vm?.refs || {}
+}
+
+export const useResponsiveFormLayout = (props: any) => {
+  const { breakpoints } = props
+  if (!isArr(breakpoints)) {
+    return {
+      props: ref(props),
+    }
+  }
+  const layoutProps = ref<IProps>({})
+
+  const updateUI = (target: HTMLElement) => {
+    layoutProps.value = calculateProps(target, props)
+  }
+
+  onMounted(() => {
+    const { root } = useRefs()
+    const observer = () => {
+      updateUI(root as HTMLElement)
+    }
+    const resizeObserver = new ResizeObserver(observer)
+    if (root) {
+      resizeObserver.observe(root as Element)
+    }
+
+    updateUI(root as HTMLElement)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  })
+
+  return {
+    props: layoutProps,
+  }
+}

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

@@ -0,0 +1,210 @@
+import { defineComponent, PropType } from 'vue';
+import { action, model, observable } from '@formily/reactive';
+import { VoidField, Form } from '@formily/core';
+import { observer } from '@formily/reactive-vue';
+import {
+    h,
+    useField,
+    useFieldSchema,
+    RecursionField,
+    Fragment,
+} from '@formily/vue';
+import { Schema, SchemaKey } from '@formily/json-schema';
+import { ElSteps, ElStep } from '@cicctencent/jtui';
+import { stylePrefix, composeExport } from '../__builtins__';
+
+export interface IFormStep {
+    connect: (steps: SchemaStep[], field: VoidField) => void;
+    current: number;
+    allowNext: boolean;
+    allowBack: boolean;
+    setCurrent(key: number): void;
+    submit: Form['submit'];
+    next(): void;
+    back(): void;
+}
+
+export interface IFormStepProps {
+    formStep?: IFormStep;
+}
+
+type SchemaStep = {
+    name: SchemaKey;
+    props: any;
+    schema: Schema;
+};
+
+type FormStepEnv = {
+    form: Form;
+    field: VoidField;
+    steps: SchemaStep[];
+};
+
+const parseSteps = (schema: Schema) => {
+    const steps: SchemaStep[] = [];
+    schema.mapProperties((schema, name) => {
+        if (schema['x-component']?.indexOf('StepPane') > -1) {
+            steps.push({
+                name,
+                props: schema['x-component-props'],
+                schema,
+            });
+        }
+    });
+    return steps;
+};
+
+const createFormStep = (defaultCurrent = 0): IFormStep => {
+    const env: FormStepEnv = observable({
+        form: null,
+        field: null,
+        steps: [],
+    });
+
+    const setDisplay = action.bound((target: number) => {
+        const currentStep = env.steps[target];
+        env.steps.forEach(({ name }) => {
+            env.form.query(`${env.field.address}.${name}`).take(field => {
+                if (name === currentStep.name) {
+                    field.setDisplay('visible');
+                } else {
+                    field.setDisplay('hidden');
+                }
+            });
+        });
+    });
+
+    const next = action.bound(() => {
+        if (formStep.allowNext) {
+            setDisplay(formStep.current + 1);
+            formStep.setCurrent(formStep.current + 1);
+        }
+    });
+
+    const back = action.bound(() => {
+        if (formStep.allowBack) {
+            setDisplay(formStep.current - 1);
+            formStep.setCurrent(formStep.current - 1);
+        }
+    });
+
+    const formStep: IFormStep = model({
+        connect(steps, field) {
+            env.steps = steps;
+            env.form = field?.form;
+            env.field = field;
+        },
+        current: defaultCurrent,
+        setCurrent(key: number) {
+            formStep.current = key;
+        },
+        get allowNext() {
+            return formStep.current < env.steps.length - 1;
+        },
+        get allowBack() {
+            return formStep.current > 0;
+        },
+        async next() {
+            try {
+                await env.form.validate();
+                next();
+            } catch {}
+        },
+        async back() {
+            back();
+        },
+        async submit(onSubmit) {
+            return env.form?.submit?.(onSubmit);
+        },
+    });
+    return formStep;
+};
+
+const FormStepInner = observer(
+    defineComponent({
+        name: 'FFormStep',
+        props: {
+            formStep: {
+                type: Object as PropType<IFormStep>,
+                default() {
+                    return {
+                        current: 0,
+                    };
+                },
+            },
+        },
+        setup(props: any, { attrs }) {
+            const field = useField<VoidField>().value;
+            const prefixCls = `${stylePrefix}-form-step`;
+            const fieldSchemaRef = useFieldSchema();
+
+            const steps = parseSteps(fieldSchemaRef.value as any);
+
+            props.formStep.connect?.(steps, field);
+
+            return () => {
+                const current = props.active || props.formStep?.current || 0;
+
+                const renderSteps = (steps: SchemaStep[], callback) => {
+                    return steps.map(callback);
+                };
+
+                return h(
+                    'div',
+                    {
+                        class: [prefixCls],
+                    },
+                    {
+                        default: () => [
+                            h(
+                                ElSteps,
+                                {
+                                    ...attrs,
+                                    active: current,
+                                    style: [
+                                        { marginBottom: '10px' },
+                                        attrs.style,
+                                    ],
+                                },
+                                {
+                                    default: () =>
+                                        renderSteps(steps, ({ props }, key) => {
+                                            return h(
+                                                ElStep,
+                                                { props, key },
+                                                {}
+                                            );
+                                        }),
+                                }
+                            ),
+
+                            renderSteps(steps, ({ name, schema }, key) => {
+                                if (key !== current) return;
+                                return h(
+                                    RecursionField,
+                                    { props: { name, schema }, key },
+                                    {}
+                                );
+                            }),
+                        ],
+                    }
+                );
+            };
+        },
+    })
+);
+
+const StepPane = defineComponent({
+    name: 'FFormStepPane',
+    inheritAttrs: false,
+    setup(_props, { slots }) {
+        return () => h(Fragment, {}, slots);
+    },
+});
+
+export const FormStep = composeExport(FormStepInner, {
+    StepPane,
+    createFormStep,
+});
+
+export default FormStep;

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

@@ -0,0 +1,2 @@
+import '@cicctencent/jtui/theme-chalk/src/steps.scss'
+import '@cicctencent/jtui/theme-chalk/src/step.scss'

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

@@ -0,0 +1,172 @@
+import { defineComponent, reactive, computed, PropType } from 'vue';
+import { observer } from '@formily/reactive-vue';
+import { model } from '@formily/reactive';
+import {
+    h,
+    useField,
+    useFieldSchema,
+    RecursionField,
+    Fragment,
+} from '@formily/vue';
+import { Schema, SchemaKey } from '@formily/json-schema';
+import { ElTabs, ElTabPane, ElBadge } from '@cicctencent/jtui';
+import { stylePrefix, composeExport } from '../__builtins__';
+
+export interface IFormTab {
+    activeKey: string;
+    setActiveKey(key: string): void;
+}
+
+export interface IFormTabProps {
+    formTab?: IFormTab;
+}
+
+export interface IFormTabPaneProps {
+    key: string | number;
+}
+
+type Tabs = { name: SchemaKey; props: any; schema: Schema }[];
+
+const useTabs = () => {
+    const tabsField = useField();
+    const schema = useFieldSchema();
+    const tabs: Tabs = reactive([]);
+    schema.value.mapProperties((schema, name) => {
+        const field = tabsField.value
+            .query(tabsField.value.address.concat(name))
+            .take();
+        if (field?.display === 'none' || field?.display === 'hidden') return;
+
+        if (schema['x-component']?.indexOf('TabPane') > -1) {
+            tabs.push({
+                name,
+                props: {
+                    name: schema?.['x-component-props']?.name || name,
+                    ...schema?.['x-component-props'],
+                },
+                schema:schema as any,
+            });
+        }
+    });
+    return tabs;
+};
+
+const createFormTab = (defaultActiveKey?: string) => {
+    const formTab = model({
+        activeKey: defaultActiveKey,
+        setActiveKey(key: string) {
+            formTab.activeKey = key;
+        },
+    });
+    return formTab;
+};
+
+const FormTab = observer(
+    defineComponent({
+        inheritAttrs: false,
+        props: {
+            formTab: { type: Object as PropType<IFormTab> },
+            value: {
+                type: String,
+            },
+        },
+        setup(props, { attrs, emit }: any) {
+            const field = useField();
+            const prefixCls = `${stylePrefix}-form-tab`;
+            const formTabRef = computed(() => props.formTab ?? createFormTab());
+
+            const takeActiveKey = (tabs: Tabs) => {
+                return (
+                    props?.value ||
+                    formTabRef.value?.activeKey ||
+                    tabs?.[0]?.name
+                );
+            };
+
+            const badgedHeader = (key: SchemaKey, props: any) => {
+                const errors = field.value.form.queryFeedbacks({
+                    type: 'error',
+                    address: `${field.value.address.concat(key)}.*`,
+                });
+                if (errors.length) {
+                    return h(
+                        ElBadge,
+                        {
+                            class: [`${prefixCls}-errors-badge`],
+                            value: errors.length,
+                        },
+                        { default: () => props.label }
+                    );
+                }
+                return props.label;
+            };
+
+            return () => {
+                const tabs = useTabs();
+                const activeKey = takeActiveKey(tabs);
+
+                return h(
+                    ElTabs,
+                    {
+                        ...attrs,
+                        class: [prefixCls],
+                        modelValue: activeKey,
+                        onChange: (key: string) => {
+                            emit('input', key);
+                            formTabRef.value.setActiveKey?.(key);
+                        },
+                    },
+                    {
+                        default: () =>
+                            tabs.map(({ props, schema, name }, key) => {
+                                return h(
+                                    ElTabPane,
+                                    {
+                                        key,
+                                        ...props,
+                                    },
+                                    {
+                                        default: () =>
+                                            h(
+                                                RecursionField,
+                                                { schema, name },
+                                                {}
+                                            ),
+                                        label: () =>
+                                            h(
+                                                'div',
+                                                {},
+                                                {
+                                                    default: () => [
+                                                        badgedHeader(
+                                                            name,
+                                                            props
+                                                        ),
+                                                    ],
+                                                }
+                                            ),
+                                    }
+                                );
+                            }),
+                    }
+                );
+            };
+        },
+    })
+);
+
+const FormTabPane = defineComponent<IFormTabPaneProps>({
+    name: 'FFormTabPane',
+    inheritAttrs: false,
+    setup(_props, { slots }) {
+        return () => h(Fragment, {}, slots);
+    },
+});
+
+export const composeFormTab = composeExport(FormTab, {
+    TabPane: FormTabPane,
+    createFormTab,
+});
+
+export { composeFormTab as FormTab };
+export default composeFormTab;

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

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

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

@@ -0,0 +1,4 @@
+import './style.scss'
+import '@cicctencent/jtui/theme-chalk/src/tabs.scss'
+import '@cicctencent/jtui/theme-chalk/src/tab-pane.scss'
+import '@cicctencent/jtui/theme-chalk/src/badge.scss'

package/src/components/hot-area/index.ts

@@ -0,0 +1,20 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+
+import ElHotArea from '../base/HotArea/index.vue';
+
+export type ElHotAreaProps = typeof ElHotArea;
+
+const TransformHotArea = transformComponent<ElHotAreaProps>(ElHotArea, {
+    change: 'update:modelValue',
+});
+
+export const HotArea = connect(
+    TransformHotArea,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default HotArea;

package/src/components/index.ts

@@ -0,0 +1,49 @@
+export * from './input';
+export * from './select';
+export * from './time-picker';
+export * from './date-picker';
+export * from './cascader';
+export * from './el-form-item';
+export * from './form-layout';
+export * from './submit';
+export * from './preview-text';
+export * from './space';
+export * from './form-grid';
+export * from './form-item';
+export * from './array-base';
+export * from './array-cards';
+export * from './array-collapse';
+export * from './array-items';
+export * from './array-table';
+export * from './array-tabs';
+export * from './upload';
+export * from './transfer';
+export * from './switch';
+export * from './reset';
+export * from './radio';
+export * from './input-number';
+export * from './form-tab';
+export * from './form-step';
+export * from './form-drawer';
+export * from './form-dialog';
+export * from './form-collapse';
+export * from './form-button-group';
+export * from './form';
+export * from './editable';
+export * from './checkbox';
+export * from './upload-button';
+export * from './hot-area';
+export * from './one-of';
+export * from './any-of';
+export * from './rich-editor';
+export * from './data-time';
+export * from './color-group';
+export * from './link';
+export * from './event';
+export * from './layout-group';
+export * from './text';
+export * from './cloud-button';
+export * from './color-picker';
+export * from './middleware';
+export * from './row';
+export * from './placeholder-input';

package/src/components/input/index.ts

@@ -0,0 +1,35 @@
+import { composeExport, transformComponent } from '../__builtins__';
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import { PreviewText } from '../preview-text';
+import ElInput from '../base/Input/index.vue';
+
+export type InputProps = typeof ElInput;
+
+const TransformElInput = transformComponent<InputProps>(ElInput, {
+    change: 'update:modelValue',
+});
+export const Input = connect(
+    TransformElInput,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    }),
+    mapReadPretty(PreviewText.Input)
+);
+
+// const TextArea = connect(
+//     InnerInput,
+//     mapProps(props => {
+//         return {
+//             ...props,
+//             type: 'textarea',
+//         };
+//     }),
+//     mapReadPretty(PreviewText.Input)
+// );
+
+// export const Input = composeExport(InnerInput, {
+//     TextArea,
+// });
+
+export default Input;

package/src/components/input/style.ts

@@ -0,0 +1,4 @@
+import '@cicctencent/jtui/theme-chalk/src/input.scss'
+
+// 依赖
+import '../preview-text/style'

package/src/components/input-number/index.ts

@@ -0,0 +1,36 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import { ElInputNumber } from '@cicctencent/jtui';
+import { PreviewText } from '../preview-text';
+
+export type InputNumberProps = typeof ElInputNumber;
+
+const TransformElInputNumber = transformComponent<InputNumberProps>(
+    ElInputNumber,
+    {
+        change: 'update:modelValue',
+    }
+);
+
+export const InputNumber = connect(
+    TransformElInputNumber,
+    mapProps(
+        {
+            value: 'modelValue',
+            readOnly: 'readonly',
+        },
+        props => {
+            let controlsPosition = '';
+            if (props.controlsPosition) {
+                controlsPosition = props.controlsPosition;
+            }
+            return {
+                controlsPosition,
+                modelValue: props.modelValue,
+            };
+        }
+    ),
+    mapReadPretty(PreviewText.Input)
+);
+
+export default InputNumber;

package/src/components/input-number/style.ts

@@ -0,0 +1,3 @@
+import '@cicctencent/jtui/theme-chalk/src/input-number.scss'
+
+import '../preview-text/style'

package/src/components/layout-group/index.ts

@@ -0,0 +1,18 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+
+import JtLayoutGroup from '../base/LayoutGroup/index.vue';
+
+export type JtLayoutGroupProps = typeof JtLayoutGroup;
+
+const TransformLayoutGroup = transformComponent<JtLayoutGroupProps>(JtLayoutGroup);
+
+export const LayoutGroup = connect(
+  TransformLayoutGroup,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default LayoutGroup;