@cicctencent/formily 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,642 @@
+import {
+    ref,
+    defineComponent,
+    onMounted,
+    Ref,
+    onBeforeUnmount,
+    watch,
+    provide,
+    h,
+} from 'vue';
+import { isVoidField } from '@formily/core';
+import { connect, mapProps } from '@formily/vue';
+
+// error: () => h('i', { class: 'el-icon-circle-close' }, {}),
+//   success: () => h('i', { class: 'el-icon-circle-check' }, {}),
+//   warning: () => h('i', { class: 'el-icon-warning-outline' }, {}),
+
+import {
+    InfoFilled,
+    CircleClose,
+    CircleCheck,
+    Warning,
+} from '@cicctencent/icons-vue';
+import { useFormLayout, FormLayoutShallowContext } from '../form-layout';
+import { composeExport, resolveComponent, stylePrefix } from '../__builtins__';
+import { Component } from 'vue';
+import { ElTooltip, ElIcon } from '@cicctencent/jtui';
+import ResizeObserver from 'resize-observer-polyfill';
+import { IFormGridProps, useGridColumn } from '../form-grid';
+import './style.scss';
+export type FormItemProps = {
+    className?: string;
+    required?: boolean;
+    label?: string | Component;
+    colon?: boolean;
+    tooltip?: string | Component;
+    layout?: 'vertical' | 'horizontal' | 'inline';
+    labelStyle?: Record<string, any>;
+    labelAlign?: 'left' | 'right';
+    labelWrap?: boolean;
+    labelWidth?: number;
+    wrapperWidth?: number;
+    labelCol?: number;
+    wrapperCol?: number;
+    wrapperAlign?: 'left' | 'right';
+    wrapperWrap?: boolean;
+    wrapperStyle?: Record<string, any>;
+    fullness?: boolean;
+    addonBefore?: string | Component;
+    addonAfter?: string | Component;
+    size?: 'small' | 'default' | 'large';
+    extra?: string;
+    feedbackText?: string | Component;
+    feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none' | (string & {});
+    feedbackStatus?:
+        | 'error'
+        | 'warning'
+        | 'success'
+        | 'pending'
+        | (string & {});
+    tooltipLayout?: 'icon' | 'text';
+    feedbackIcon?: string | Component;
+    asterisk?: boolean;
+    gridSpan?: number | string;
+    bordered?: boolean;
+    inset?: boolean;
+};
+
+const useOverflow = (containerRef: Ref<HTMLElement>) => {
+    const overflow = ref(false);
+    let resizeObserver: ResizeObserver | undefined;
+
+    const cleanup = () => {
+        if (resizeObserver) {
+            resizeObserver.unobserve(containerRef.value);
+            resizeObserver = null;
+        }
+    };
+
+    const observer = () => {
+        const container = containerRef.value;
+        const content = container.querySelector('label');
+        const containerWidth = container.getBoundingClientRect().width;
+        const contentWidth = content.getBoundingClientRect().width;
+
+        if (containerWidth !== 0) {
+            if (contentWidth > containerWidth) {
+                overflow.value = true;
+            } else {
+                overflow.value = false;
+            }
+        }
+    };
+
+    const stopWatch = watch(
+        () => containerRef.value,
+        el => {
+            cleanup();
+
+            if (el) {
+                resizeObserver = new ResizeObserver(observer);
+                resizeObserver.observe(el);
+            }
+        },
+        { immediate: true, flush: 'post' }
+    );
+
+    onBeforeUnmount(() => {
+        cleanup();
+        stopWatch();
+    });
+
+    return overflow;
+};
+const tooltipIcon =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxyZWN0IG9wYWNpdHk9IjAuNiIgd2lkdGg9IjIyLjIyMjIiIGhlaWdodD0iMjQiIGZpbGw9InVybCgjcGF0dGVybjApIi8+CjxkZWZzPgo8cGF0dGVybiBpZD0icGF0dGVybjAiIHBhdHRlcm5Db250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4KPHVzZSB4bGluazpocmVmPSIjaW1hZ2UwXzQzM183NDIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjAwMzgxMjYyKSBzY2FsZSgwLjAxNDcwNTkgMC4wMTM2MTY2KSIvPgo8L3BhdHRlcm4+CjxpbWFnZSBpZD0iaW1hZ2UwXzQzM183NDIwIiB3aWR0aD0iNjgiIGhlaWdodD0iNzQiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBRVFBQUFCS0NBWUFBQUFDR2ZMQ0FBQURNRWxFUVZSNEFlMlpNVzRiUVF4RmZjQTBQa0I2TjZtTkZHbmRHbkNYQXdSd2xTcElrMHRJY3VRN0NEbkVHbC93VDZpUGtiSkRjbFlTd0FFR0k2NVdKUC9iUDdNR2ZEUFZPQ0J3Y3hCVk1CVVFNVUVCS1NCQ1FNSnlTQUVSQWhLV1F3cUlFSkN3SEZKQWhJQ0U1WkFDSWdRa0xJY1VFQ0VnWVRua2tvQnNYbDRuem0vUDN5ZE9YcE5lRndrWGRRaUZmdjd5TUgyNC9UaHI0bDZBV21vc0FnUWdlaUFjZzBVSGpZUXpGTWovUUFBU0o4Vmk1YlZUWUVaQkdRWUV3bHFDSUJhZzVnNkNhdVhDZDlsakNKQVdqRjRRTGFHdHZObFEwb0ZBdUgyYUdTQVVUcXVHM3VPTlU0Rm9vOWxQejRwVXQ2QjJ4a2dEb2cyT2hFSGhJMnFtQUlrMnRsci9udTQrM2UvbmFyMmwzbGxydExZV0NRUEJHOE9lR2IzTzJPMytIUHdldVhDdFp5aVVucmVZMWdrRHNjMzB3a0F6OXZjRTY4bGp6Ni9JZVJJQ29tS1U5cHc0d3lHb28wNzF1aVFOaU9lcEV0aHFzLzEzaG16NnpoRG13SnJoa2hBUVdoenJKWXdNbDdpQjJPMFNjVWMyU09zU3o3WnhBN0dGbzBEd2Uwd0k4SWl3VUsxTFBJZXJHMGpXZHJGZ2tkTWp3Z0xCNTBodkxpRFJwMkFGS0pDTTg4am03SFhjMllHZ1lRdjRLb0ZndjlPVzBmT0RibUcrQXZKT0pCTkk1SUc1dGt5a0lCMmg2MVVEc1hzKzQ2MEFPQVZFTEpJSjVLcmZNdVJ5MVVDeUxaNmRMd0xYZGFoQ1FNU1dkSVZkSXlKc0hudmdlODQzTjVEc2czVUVFTS9mU0NsQUlBYUFJaU1MU0RTUEd3akUyMjNqc2VlUG43Lysvc2ZmQ3NHVHhjVDNQY051RjQ4N1VDc0V4RzZiWHBkQXJJVnc3SE1QRkp2akxFQWlMc2tHWXQzcWhSRjJDQktvUzNxYUFSVGNqL240OUhVL0dXT2Q2dzdjYTkyQnZyd2p0R1ZZVkJ0Q3ZOVElycDBDQk9Lekc1c0RkRVROTkNBUVlQY3hMRHpTS1FyRDg1WnJRVThGMG9LUzFTaWJ4NW1sNEROcnBBTkI0L3IwTXR6U0FwR1JsNkM1RGdGeURBb0Y5R3lsWXlDWWkwS3kxbUZBMkdETExSQ0RDYXRqNGg1T1hzUEsrM1RGZHdBMVlnd0hncVlwVm9YMXhpTkJFTzRpUUZpTWNFNDlmWVZFQ0tNY1lYdkQ1OFdCMkFZZ0VwTU93c3ByU3dHdy9ad2RpRFp6Q2ZGWkhYSUpBTFNIQWlKRUNrZ0JFUUlTbGtNS2lCQ1FzQnhTUUlTQWhPV1FBaUlFSkN5SEZCQWhJR0U1UklDOEFiM1VzWnR1eFNuaEFBQUFBRWxGVGtTdVFtQ0MiLz4KPC9kZWZzPgo8L3N2Zz4K';
+
+const tooltipStyle = {
+    background: `url(${tooltipIcon})`,
+    objectFit: 'cover',
+    width: '22.22px',
+    height: '24px',
+};
+
+const ICON_MAP = {
+    info: () => h(ElIcon, {}, { default: () => h(InfoFilled, {}, {}) }),
+    error: () => h(ElIcon, {}, { default: () => h(CircleClose, {}, {}) }),
+    success: () => h(ElIcon, {}, { default: () => h(CircleCheck, {}, {}) }),
+    warning: () => h(ElIcon, {}, { default: () => h(Warning, {}, {}) }),
+    tooltip: () => h(ElIcon, {}, { default: () => h(Warning, {}, {}) }),
+};
+
+export const FormBaseItem = defineComponent({
+    name: 'FormItem',
+    props: {
+        className: {},
+        required: {},
+        label: {},
+        // 冒号
+        colon: {
+            default: false,
+        },
+        layout: {},
+        tooltip: {},
+        labelStyle: {},
+        labelAlign: {},
+        labelWrap: {},
+        labelWidth: {},
+        wrapperWidth: {},
+        labelCol: {},
+        wrapperCol: {},
+        wrapperAlign: {},
+        wrapperWrap: {},
+        wrapperStyle: {},
+        fullness: {},
+        addonBefore: {},
+        addonAfter: {},
+        size: {},
+        extra: {},
+        feedbackText: {},
+        feedbackLayout: {},
+        tooltipLayout: {},
+        feedbackStatus: {},
+        feedbackIcon: {},
+        asterisk: {},
+        gridSpan: {},
+        bordered: { default: true },
+        inset: { default: false },
+    },
+    setup(props, { slots, attrs }) {
+        const active = ref(false);
+        const deepLayoutRef = useFormLayout();
+        const prefixCls = `${stylePrefix}-form-item`;
+
+        const containerRef = ref<HTMLElement>(null);
+        const overflow = useOverflow(containerRef);
+
+        provide(FormLayoutShallowContext, ref({}));
+
+        return () => {
+            const gridColumn = useGridColumn(props.gridSpan as string);
+            const gridStyles: Record<string, any> = {};
+
+            if (gridColumn) {
+                gridStyles.gridColumn = gridColumn;
+            }
+            const deepLayout = deepLayoutRef.value;
+            const {
+                label,
+                colon = deepLayout.colon ?? true,
+                layout = deepLayout.layout ?? 'horizontal',
+                // TODO 拿不到 x-decorator-props 属性
+                tooltip,
+                labelStyle = {},
+                labelWrap = deepLayout.labelWrap ?? false,
+                labelWidth = deepLayout.labelWidth,
+                wrapperWidth = deepLayout.wrapperWidth,
+                labelCol = deepLayout.labelCol,
+                wrapperCol = deepLayout.wrapperCol,
+                wrapperAlign = deepLayout.wrapperAlign ?? 'left',
+                wrapperWrap = deepLayout.wrapperWrap,
+                wrapperStyle = {},
+                fullness = deepLayout.fullness,
+                addonBefore,
+                addonAfter,
+                size = deepLayout.size,
+                extra,
+                feedbackText,
+                feedbackLayout = deepLayout.feedbackLayout ?? 'loose',
+                tooltipLayout = deepLayout.tooltipLayout ?? 'icon',
+                feedbackStatus,
+                feedbackIcon,
+                asterisk,
+                bordered = deepLayout.bordered,
+                inset = deepLayout.inset,
+            } = props as any;
+            const labelAlign =
+                deepLayout.layout === 'vertical'
+                    ? props.labelAlign ?? deepLayout.labelAlign ?? 'left'
+                    : props.labelAlign ?? deepLayout.labelAlign ?? 'right';
+
+            // 固定宽度
+            let enableCol = false;
+            if (labelWidth || wrapperWidth) {
+                if (labelWidth) {
+                    labelStyle.width = `${labelWidth}px`;
+                    labelStyle.maxWidth = `${labelWidth}px`;
+                }
+                if (wrapperWidth) {
+                    wrapperStyle.width = `${wrapperWidth}px`;
+                    wrapperStyle.maxWidth = `${wrapperWidth}px`;
+                }
+                // 栅格模式
+            } else if (labelCol || wrapperCol) {
+                enableCol = true;
+            }
+
+            const formatChildren =
+                feedbackLayout === 'popover'
+                    ? h(
+                          'el-popover',
+                          {
+                              props: {
+                                  disabled: !feedbackText,
+                                  placement: 'top',
+                              },
+                          },
+                          {
+                              reference: () =>
+                                  h(
+                                      'div',
+                                      {},
+                                      { default: () => slots.default?.() }
+                                  ),
+                              default: () => [
+                                  h(
+                                      'div',
+                                      {
+                                          class: {
+                                              [`${prefixCls}-${feedbackStatus}-help`]:
+                                                  !!feedbackStatus,
+                                              [`${prefixCls}-help`]: true,
+                                          },
+                                      },
+                                      {
+                                          default: () => [
+                                              feedbackStatus &&
+                                              [
+                                                  'error',
+                                                  'success',
+                                                  'warning',
+                                              ].includes(
+                                                  feedbackStatus as string
+                                              )
+                                                  ? ICON_MAP[
+                                                        feedbackStatus as
+                                                            | 'error'
+                                                            | 'success'
+                                                            | 'warning'
+                                                    ]()
+                                                  : '',
+                                              resolveComponent(feedbackText),
+                                          ],
+                                      }
+                                  ),
+                              ],
+                          }
+                      )
+                    : slots.default?.();
+
+            const renderLabelText = () => {
+                const labelChildren = h(
+                    'div',
+                    {
+                        class: `${prefixCls}-label-content`,
+                        ref: 'containerRef',
+                    },
+                    {
+                        default: () => [
+                            asterisk &&
+                                h(
+                                    'span',
+                                    { class: `${prefixCls}-asterisk` },
+                                    { default: () => ['*'] }
+                                ),
+                            h(
+                                'label',
+                                {},
+                                { default: () => [resolveComponent(label)] }
+                            ),
+                        ],
+                    }
+                );
+                const isTextTooltip = tooltip && tooltipLayout === 'text';
+                if (isTextTooltip || overflow.value) {
+                    return h(
+                        ElTooltip,
+                        { effect: 'light', placement: 'bottom' },
+                        {
+                            default: () => [labelChildren],
+                            content: () =>
+                                h(
+                                    'div',
+                                    {},
+                                    {
+                                        default: () => [
+                                            overflow.value &&
+                                                resolveComponent(label),
+                                            isTextTooltip &&
+                                                resolveComponent(tooltip),
+                                        ],
+                                    }
+                                ),
+                        }
+                    );
+                } else {
+                    return labelChildren;
+                }
+            };
+            const renderTooltipIcon = () => {
+                if (tooltip && tooltipLayout === 'icon') {
+                    return h(
+                        'span',
+                        {
+                            class: `${prefixCls}-label-tooltip`,
+                        },
+                        {
+                            default: () => [
+                                h(
+                                    ElTooltip,
+                                    {
+                                        placement: 'bottom',
+                                        effect: 'light',
+                                    },
+                                    {
+                                        default: ICON_MAP.tooltip,
+                                        content: () =>
+                                            h(
+                                                'div',
+                                                {
+                                                    class: `${prefixCls}-label-tooltip-content`,
+                                                },
+                                                {
+                                                    default: () => [
+                                                        resolveComponent(
+                                                            tooltip
+                                                        ),
+                                                    ],
+                                                }
+                                            ),
+                                    }
+                                ),
+                            ],
+                        }
+                    );
+                }
+            };
+            const renderLabel =
+                label &&
+                h(
+                    'div',
+                    {
+                        class: {
+                            [`${prefixCls}-label`]: true,
+                            [`${prefixCls}-label-tooltip`]:
+                                (tooltip && tooltipLayout === 'text') ||
+                                overflow.value,
+                            [`${prefixCls}-item-col-${labelCol}`]:
+                                enableCol && !!labelCol,
+                        },
+                        style: labelStyle,
+                    },
+                    {
+                        default: () => [
+                            // label content
+                            renderLabelText(),
+                            // label tooltip
+                            renderTooltipIcon(),
+                            // label colon
+                            label &&
+                                h(
+                                    'span',
+                                    {
+                                        class: `${prefixCls}-colon`,
+                                    },
+                                    { default: () => [colon ? ':' : ''] }
+                                ),
+                        ],
+                    }
+                );
+
+            const renderFeedback =
+                !!feedbackText &&
+                feedbackLayout !== 'popover' &&
+                feedbackLayout !== 'none' &&
+                h(
+                    'div',
+                    {
+                        class: {
+                            [`${prefixCls}-${feedbackStatus}-help`]:
+                                !!feedbackStatus,
+                            [`${prefixCls}-help`]: true,
+                            [`${prefixCls}-help-enter`]: true,
+                            [`${prefixCls}-help-enter-active`]: true,
+                        },
+                    },
+                    { default: () => [resolveComponent(feedbackText)] }
+                );
+
+            const renderExtra =
+                extra &&
+                h(
+                    'div',
+                    { class: `${prefixCls}-extra` },
+                    { default: () => [extra] }
+                );
+            const renderContent = h(
+                'div',
+                {
+                    class: {
+                        [`${prefixCls}-control`]: true,
+                        [`${prefixCls}-item-col-${wrapperCol}`]:
+                            enableCol && !!wrapperCol,
+                    },
+                },
+                {
+                    default: () => [
+                        h(
+                            'div',
+                            { class: `${prefixCls}-control-content` },
+                            {
+                                default: () => [
+                                    addonBefore &&
+                                        h(
+                                            'div',
+                                            {
+                                                class: `${prefixCls}-addon-before`,
+                                            },
+                                            {
+                                                default: () => [
+                                                    resolveComponent(
+                                                        addonBefore
+                                                    ),
+                                                ],
+                                            }
+                                        ),
+                                    h(
+                                        'div',
+                                        {
+                                            class: {
+                                                [`${prefixCls}-control-content-component`]:
+                                                    true,
+                                                [`${prefixCls}-control-content-component-has-feedback-icon`]:
+                                                    !!feedbackIcon,
+                                            },
+                                            style: wrapperStyle,
+                                        },
+                                        {
+                                            default: () => [
+                                                formatChildren,
+                                                feedbackIcon &&
+                                                    h(
+                                                        'div',
+                                                        {
+                                                            class: `${prefixCls}-feedback-icon`,
+                                                        },
+                                                        {
+                                                            default: () => [
+                                                                typeof feedbackIcon ===
+                                                                'string'
+                                                                    ? h(
+                                                                          'i',
+                                                                          {
+                                                                              class: feedbackIcon,
+                                                                          },
+                                                                          {}
+                                                                      )
+                                                                    : resolveComponent(
+                                                                          feedbackIcon
+                                                                      ),
+                                                            ],
+                                                        }
+                                                    ),
+                                            ],
+                                        }
+                                    ),
+                                    addonAfter &&
+                                        h(
+                                            'div',
+                                            {
+                                                class: `${prefixCls}-addon-after`,
+                                            },
+                                            {
+                                                default: () => [
+                                                    resolveComponent(
+                                                        addonAfter
+                                                    ),
+                                                ],
+                                            }
+                                        ),
+                                ],
+                            }
+                        ),
+                        renderFeedback,
+                        renderExtra,
+                    ],
+                }
+            );
+            return h(
+                'div',
+                {
+                    style: {
+                        ...gridStyles,
+                    },
+                    class: {
+                        [`${prefixCls}`]: true,
+                        [`${prefixCls}-layout-${layout}`]: true,
+                        [`${prefixCls}-${feedbackStatus}`]: !!feedbackStatus,
+                        [`${prefixCls}-feedback-has-text`]: !!feedbackText,
+                        [`${prefixCls}-size-${size}`]: !!size,
+                        [`${prefixCls}-feedback-layout-${feedbackLayout}`]:
+                            !!feedbackLayout,
+                        [`${prefixCls}-fullness`]:
+                            !!fullness || !!inset || !!feedbackIcon,
+                        [`${prefixCls}-inset`]: !!inset,
+                        [`${prefixCls}-active`]: active.value,
+                        [`${prefixCls}-inset-active`]: !!inset && active.value,
+                        [`${prefixCls}-label-align-${labelAlign}`]: true,
+                        [`${prefixCls}-control-align-${wrapperAlign}`]: true,
+                        [`${prefixCls}-label-wrap`]: !!labelWrap,
+                        [`${prefixCls}-control-wrap`]: !!wrapperWrap,
+                        [`${prefixCls}-bordered-none`]:
+                            bordered === false || !!inset || !!feedbackIcon,
+                        [`${props.className}`]: !!props.className,
+                    },
+                    on: {
+                        '!focus': () => {
+                            if (feedbackIcon || inset) {
+                                active.value = true;
+                            }
+                        },
+                        '!blur': () => {
+                            if (feedbackIcon || inset) {
+                                active.value = false;
+                            }
+                        },
+                    },
+                },
+                {
+                    default: () => [renderLabel, renderContent],
+                }
+            );
+        };
+    },
+});
+
+const Item = connect(
+    FormBaseItem,
+    mapProps(
+        { validateStatus: true, title: 'label', required: true },
+        (props, field:any) => {
+            if (isVoidField(field)) return props;
+            if (!field) return props;
+            const takeMessage = () => {
+                const split = (messages: any[]) => {
+                    return messages.reduce((buf, text, index) => {
+                        if (!text) return buf;
+                        return index < messages.length - 1
+                            ? buf.concat([text, ', '])
+                            : buf.concat([text]);
+                    }, []);
+                };
+                if (field.validating) return;
+                if (props.feedbackText) return props.feedbackText;
+                if (field.selfErrors.length) return split(field.selfErrors);
+                if (field.selfWarnings.length) return split(field.selfWarnings);
+                if (field.selfSuccesses.length)
+                    return split(field.selfSuccesses);
+            };
+            const errorMessages = takeMessage();
+            return {
+                feedbackText: Array.isArray(errorMessages)
+                    ? errorMessages.join(', ')
+                    : errorMessages,
+                extra: props.extra || field.description,
+            };
+        },
+        (props, field) => {
+            if (isVoidField(field)) return props;
+            if (!field) return props;
+            return {
+                feedbackStatus:
+                    field.validateStatus === 'validating'
+                        ? 'pending'
+                        : (Array.isArray(field.decorator) &&
+                              field.decorator[1]?.feedbackStatus) ||
+                          field.validateStatus,
+            };
+        },
+        (props, field) => {
+            if (isVoidField(field)) return props;
+
+            if (!field) return props;
+            let asterisk = false;
+            if (field.required && field.pattern !== 'readPretty') {
+                asterisk = true;
+            }
+            if ('asterisk' in props) {
+                asterisk = props.asterisk;
+            }
+            return {
+                asterisk,
+            };
+        }
+    )
+);
+
+export const FormItem = composeExport(Item, {
+    BaseItem: FormBaseItem,
+});
+
+export default FormItem;