@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/checkbox/index.ts

@@ -0,0 +1,166 @@
+import { defineComponent, PropType, h, Component } from 'vue';
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import {
+    composeExport,
+    transformComponent,
+    resolveComponent,
+    SlotTypes,
+} from '../__builtins__/shared';
+
+import { ElCheckbox, ElCheckboxGroup, ElCheckboxButton } from '@cicctencent/jtui';
+import { PreviewText } from '../preview-text';
+
+type ElCheckboxProps = Omit<typeof ElCheckbox, 'value'> & {
+    value: ElCheckboxProps['label'];
+};
+
+export interface CheckboxProps extends ElCheckboxProps {
+    option: Omit<typeof ElCheckbox, 'value'> & {
+        value: ElCheckboxProps['label'];
+        label: SlotTypes;
+    };
+}
+
+const CheckboxOption = defineComponent({
+    name: 'FCheckbox',
+    inheritAttrs: false,
+    props: {
+        option: {
+            type: Object,
+            default: null,
+        },
+    },
+    setup(curtomProps, { attrs, slots }) {
+        return () => {
+            const props = attrs as unknown as CheckboxProps;
+            const option = curtomProps?.option;
+            if (option) {
+                const children = {
+                    default: () => [
+                        resolveComponent(slots.default ?? option.label, {
+                            option,
+                        }),
+                    ],
+                };
+                const newProps = {} as Partial<ElCheckboxProps>;
+                Object.assign(newProps, option);
+                newProps.label = option.value;
+                delete newProps.value;
+
+                return h(
+                    attrs.optionType === 'button'
+                        ? ElCheckboxButton
+                        : ElCheckbox,
+                    {
+                        ...newProps,
+                    },
+                    children
+                );
+            }
+
+            return h(
+                ElCheckbox,
+                {
+                    ...props,
+                },
+                slots
+            );
+        };
+    },
+});
+
+export type CheckboxGroupProps = typeof ElCheckboxGroup & {
+    value: any[];
+    options?: Array<CheckboxProps | string>;
+    optionType: 'default' | 'button';
+};
+
+const TransformElCheckboxGroup = transformComponent(ElCheckboxGroup, {
+    change: 'change',
+});
+
+const CheckboxGroupOption: Component = defineComponent({
+    name: 'FCheckboxGroup',
+    props: {
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        optionType: {
+            type: String as PropType<CheckboxGroupProps['optionType']>,
+            default: 'default',
+        },
+    },
+    setup(customProps, { attrs, slots }) {
+        return (): any => {
+            const options = customProps.options || [];
+            const children =
+                options.length !== 0
+                    ? {
+                          default: () =>
+                              options.map(option => {
+                                  if (typeof option === 'string') {
+                                      return h(
+                                          Checkbox,
+                                          {
+                                              option: {
+                                                  label: option,
+                                                  value: option,
+                                              },
+                                              optionType:
+                                                  customProps.optionType,
+                                          },
+                                          slots?.option
+                                              ? {
+                                                    default: () =>
+                                                        slots.option!({
+                                                            option,
+                                                        }),
+                                                }
+                                              : {}
+                                      );
+                                  } else {
+                                      return h(
+                                          Checkbox as any,
+                                          {
+                                              option,
+                                              optionType:
+                                                  customProps.optionType,
+                                          },
+                                          slots?.option
+                                              ? {
+                                                    default: () =>
+                                                        slots.option!({
+                                                            option,
+                                                        }),
+                                                }
+                                              : {}
+                                      );
+                                  }
+                              }),
+                      }
+                    : slots;
+            return h(
+                TransformElCheckboxGroup,
+                {
+                    ...attrs,
+                },
+                children
+            );
+        };
+    },
+});
+
+const CheckboxGroup = connect(
+    CheckboxGroupOption,
+    mapProps({ dataSource: 'options', value: 'modelValue' }),
+    mapReadPretty(PreviewText.Select, {
+        multiple: true,
+    })
+);
+
+export const Checkbox = composeExport(connect(CheckboxOption), {
+    Group: CheckboxGroup,
+});
+
+export default Checkbox;

package/src/components/checkbox/style.ts

@@ -0,0 +1,5 @@
+import '@cicctencent/jtui/theme-chalk/src/checkbox.scss'
+import '@cicctencent/jtui/theme-chalk/src/checkbox-group.scss'
+import '@cicctencent/jtui/theme-chalk/src/checkbox-button.scss'
+// 依赖
+import '../preview-text/style'

package/src/components/cloud-button/index.ts

@@ -0,0 +1,21 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+
+import JtCloudButton from '../base/CloudButton/index.vue';
+
+export type JtCloudButtonProps = typeof JtCloudButton;
+
+const TransformJtCloudButton = transformComponent<JtCloudButtonProps>(
+    JtCloudButton,
+    { change: 'update:modelValue' }
+);
+
+export const CloudButton = connect(
+    TransformJtCloudButton,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default CloudButton;

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

@@ -0,0 +1,18 @@
+import { transformComponent } from '../__builtins__';
+import { mapProps, connect } from '@formily/vue';
+import _ColorGroup from '../base/ColorGroup/index.vue';
+
+export type ColorGroupProps = typeof _ColorGroup;
+
+const TransformColorGroup = transformComponent<ColorGroupProps>(_ColorGroup, {
+    change: 'update:modelValue',
+});
+export const ColorGroup = connect(
+    TransformColorGroup,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default ColorGroup;

package/src/components/color-picker/index.ts

@@ -0,0 +1,18 @@
+import { transformComponent } from '../__builtins__';
+import { mapProps, connect } from '@formily/vue';
+import _ColorPicker from '../base/ColorPicker/index.vue';
+
+export type ColorPickerProps = typeof _ColorPicker;
+
+const TransformColorPicker = transformComponent<ColorPickerProps>(_ColorPicker, {
+    change: 'update:modelValue',
+});
+export const ColorPicker = connect(
+  TransformColorPicker,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default ColorPicker;

package/src/components/container/index.ts

@@ -0,0 +1,18 @@
+import { transformComponent } from '../__builtins__';
+import { mapProps, connect } from '@formily/vue';
+import FormilyContainer from '../base/Container/index.vue';
+
+export type FormilyContainerProps = typeof FormilyContainer;
+
+const TransformFormilyContainer = transformComponent<FormilyContainerProps>(FormilyContainer, {
+    change: 'update:modelValue',
+});
+export const Container = connect(
+    TransformFormilyContainer,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default Container;

package/src/components/data-time/index.ts

@@ -0,0 +1,24 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+// import  ElDatePicker  from '../base/dateTime/index.vue';
+import {ElDatePicker} from '@cicctencent/jtui';
+import 'dayjs/locale/zh-cn';
+export type DateTimeProps = typeof ElDatePicker;
+
+const TransformDateTime = transformComponent<DateTimeProps>(ElDatePicker, {
+  change: 'update:modelValue',
+});
+
+export const DateTime = connect(
+    TransformDateTime,
+    mapProps(
+        {
+            value: 'modelValue',
+            readOnly: 'readonly',
+        },
+        props => {
+            return Object.assign({type: 'datetimerange'},props);
+        }
+    )
+);
+export default DateTime;

package/src/components/date-picker/index.ts

@@ -0,0 +1,51 @@
+import { transformComponent } from '../__builtins__/shared';
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import { ElDatePicker } from '@cicctencent/jtui';
+
+import { PreviewText } from '../preview-text';
+
+export type DatePickerProps = typeof ElDatePicker;
+
+const TransformElDatePicker = transformComponent<DatePickerProps>(
+    ElDatePicker,
+    {
+        change: 'update:modelValue',
+    }
+);
+
+const getDefaultFormat = (props: DatePickerProps, formatType = 'format') => {
+    const type = props.type;
+
+    if (type === 'week' && formatType === 'format') {
+        return '[Week] ww';
+    } else if (type === 'month') {
+        return 'YYYY-MM';
+    } else if (type === 'year') {
+        return 'YYYY';
+    } else if (type === 'datetime' || type === 'datetimerange') {
+        return 'YYYY-MM-DD HH:mm:ss';
+    }
+
+    return 'YYYY-MM-DD';
+};
+
+export const DatePicker = connect(
+    TransformElDatePicker,
+    mapProps(
+        {
+            value: 'modelValue',
+            readOnly: 'readonly',
+        },
+        (props: any) => {
+            return {
+                ...props,
+                format: props.format || getDefaultFormat(props),
+                valueFormat:
+                    props.valueFormat || getDefaultFormat(props, 'valueFormat'),
+            };
+        }
+    ),
+    mapReadPretty(PreviewText.DatePicker)
+);
+
+export default DatePicker;

package/src/components/date-picker/style.ts

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

package/src/components/editable/index.ts

@@ -0,0 +1,261 @@
+import { defineComponent, ref, onBeforeUnmount, Ref, h } from 'vue';
+import { observer } from '@formily/reactive-vue';
+import { reaction } from '@formily/reactive';
+import { isVoidField, Field } from '@formily/core';
+import { useField } from '@formily/vue';
+import { ElPopover } from '@cicctencent/jtui';
+import { Edit, ChatDotRound, Close } from '@cicctencent/icons-vue';
+import { stylePrefix } from '../__builtins__/configs';
+import { FormBaseItem, FormItemProps } from '../form-item';
+import { composeExport } from '../__builtins__/shared';
+
+export type EditableProps = FormItemProps;
+export type EditablePopoverProps = typeof ElPopover;
+
+const getParentPattern = (fieldRef: Ref<Field>) => {
+    const field = fieldRef.value;
+    return field?.parent?.pattern || field?.form?.pattern;
+};
+
+const getFormItemProps = (fieldRef: Ref<Field>): FormItemProps => {
+    const field = fieldRef.value;
+
+    if (isVoidField(field)) return {};
+    if (!field) return {};
+    const takeMessage = () => {
+        if (field.selfErrors.length) return field.selfErrors[0];
+        if (field.selfWarnings.length) return field.selfWarnings[0];
+        if (field.selfSuccesses.length) return field.selfSuccesses[0];
+    };
+
+    return {
+        feedbackStatus:
+            field.validateStatus === 'validating'
+                ? 'pending'
+                : field.validateStatus,
+        feedbackText: takeMessage(),
+        extra: field.description,
+    };
+};
+
+const EditableInner = observer(
+    defineComponent<EditableProps>({
+        name: 'FEditable',
+        setup(props, { attrs, slots }) {
+            const fieldRef = useField<Field>();
+            const innerRef = ref(document.body);
+
+            const prefixCls = `${stylePrefix}-editable`;
+            const setEditable = (payload: boolean) => {
+                const pattern = getParentPattern(fieldRef as any);
+
+                if (pattern !== 'editable') return;
+                fieldRef.value.setPattern(payload ? 'editable' : 'readPretty');
+            };
+
+            const dispose = reaction(
+                () => {
+                    const pattern = getParentPattern(fieldRef as any);
+
+                    return pattern;
+                },
+                pattern => {
+                    if (pattern === 'editable') {
+                        fieldRef.value.setPattern('readPretty');
+                    }
+                },
+                {
+                    fireImmediately: true,
+                }
+            );
+
+            onBeforeUnmount(dispose);
+
+            return () => {
+                const field = fieldRef.value;
+                const editable = field.pattern === 'editable';
+                const pattern = getParentPattern(fieldRef as any);
+                const itemProps = getFormItemProps(fieldRef as any);
+
+                const recover = () => {
+                    if (editable && !fieldRef.value?.errors?.length) {
+                        setEditable(false);
+                    }
+                };
+
+                const onClick = (e: MouseEvent) => {
+                    const target = e.target as HTMLElement;
+                    const close = innerRef.value.querySelector(
+                        `.${prefixCls}-close-btn`
+                    );
+
+                    if (target?.contains(close) || close?.contains(target)) {
+                        recover();
+                    } else if (!editable) {
+                        setTimeout(() => {
+                            setEditable(true);
+                            setTimeout(() => {
+                                innerRef.value.querySelector('input')?.focus();
+                            });
+                        });
+                    }
+                };
+
+                const renderEditHelper = () => {
+                    if (editable) return null;
+
+                    return h(
+                        FormBaseItem,
+                        {
+                            ...attrs,
+                            ...itemProps,
+                        },
+                        {
+                            default: () => {
+                                return h(
+                                    pattern === 'editable'
+                                        ? Edit
+                                        : ChatDotRound,
+                                    {
+                                        class: [`${prefixCls}-edit-btn`],
+                                    },
+                                    {}
+                                );
+                            },
+                        }
+                    );
+                };
+
+                const renderCloseHelper = () => {
+                    if (!editable) return null;
+                    return h(
+                        FormBaseItem,
+                        {
+                            ...attrs,
+                        },
+                        {
+                            default: () => {
+                                return h(
+                                    Close,
+                                    {
+                                        class: [`${prefixCls}-close-btn`],
+                                    },
+                                    {}
+                                );
+                            },
+                        }
+                    );
+                };
+
+                return h(
+                    'div',
+                    {
+                        class: prefixCls,
+                        ref: innerRef,
+                        onClick,
+                    },
+                    h(
+                        'div',
+                        {
+                            class: `${prefixCls}-content`,
+                        },
+                        [
+                            h(
+                                FormBaseItem,
+                                {
+                                    ...attrs,
+                                    ...itemProps,
+                                },
+                                slots
+                            ),
+                            renderEditHelper(),
+                            renderCloseHelper(),
+                        ]
+                    )
+                );
+            };
+        },
+    })
+);
+
+const EditablePopover = observer(
+    defineComponent<EditablePopoverProps>({
+        name: 'FEditablePopover',
+        setup(props, { attrs, slots }) {
+            const fieldRef = useField<Field>();
+
+            const prefixCls = `${stylePrefix}-editable`;
+            const visible = ref(false);
+
+            return () => {
+                const field = fieldRef.value;
+                const pattern = getParentPattern(fieldRef as any);
+                return h(
+                    ElPopover as any,
+                    {
+                        ...attrs,
+                        class: [prefixCls].concat(attrs.class as string[]),
+                        title: attrs.title || field.title,
+                        value: visible.value,
+                        trigger: 'click',
+                        onInput: (value: any) => {
+                            visible.value = value;
+                        },
+                    },
+                    {
+                        default: slots.default,
+                        reference: () =>
+                            h(
+                                'div',
+                                { class: prefixCls },
+                                h(
+                                    FormBaseItem,
+                                    { class: [`${prefixCls}-trigger`] },
+                                    {
+                                        default: () =>
+                                            h(
+                                                'div',
+                                                {
+                                                    class: [
+                                                        `${prefixCls}-content`,
+                                                    ],
+                                                },
+                                                [
+                                                    h(
+                                                        'span',
+                                                        {
+                                                            class: [
+                                                                `${prefixCls}-preview`,
+                                                            ],
+                                                        },
+                                                        attrs.title ||
+                                                            field.title
+                                                    ),
+                                                    h(
+                                                        pattern === 'editable'
+                                                            ? Edit
+                                                            : ChatDotRound,
+                                                        {
+                                                            class: [
+                                                                `${prefixCls}-edit-btn`,
+                                                            ],
+                                                        },
+                                                        {}
+                                                    ),
+                                                ]
+                                            ),
+                                    }
+                                )
+                            ),
+                    }
+                );
+            };
+        },
+    })
+);
+
+export const Editable: any = composeExport(EditableInner, {
+    Popover: EditablePopover,
+});
+
+export default Editable;

package/src/components/editable/style.scss

@@ -0,0 +1,55 @@
+@import '../__builtins__/styles/common.scss';
+
+$editable-prefix-cls: '#{$formily-prefix}-editable';
+
+.#{$editable-prefix-cls} {
+  cursor: pointer;
+  display: inline-block !important;
+
+  .#{$formily-prefix}-form-text {
+    .#{$formily-prefix}-tag {
+      transition: none !important;
+    }
+
+    .#{$formily-prefix}-tag:last-child {
+      margin-right: 0 !important;
+    }
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+
+    > * {
+      margin-right: 3px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .#{$editable-prefix-cls}-edit-btn,
+  .#{$editable-prefix-cls}-close-btn {
+    transition: all 0.25s ease-in-out;
+    width: 14px;
+    height: 14px;
+
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+
+  .#{$formily-prefix}-form-text {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$editable-prefix-cls}-preview {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    max-width: 100px;
+    display: block;
+  }
+}

package/src/components/editable/style.ts

@@ -0,0 +1,5 @@
+import './style.scss'
+import '@cicctencent/jtui/theme-chalk/src/popover.scss'
+
+// 依赖
+import '../form-item/style'

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

@@ -0,0 +1,21 @@
+import { isVoidField } from '@formily/core';
+import { connect, mapProps } from '@formily/vue';
+
+import type { ElFormItem as _ElFormItemProps } from '@cicctencent/jtui';
+import { ElFormItem as ElFormItemComponent } from '@cicctencent/jtui';
+
+export type ElFormItemProps = typeof _ElFormItemProps & { title: string };
+
+export const ElFormItem = connect(
+    ElFormItemComponent,
+    mapProps({ title: 'label', required: true }, (props, field) => {
+        return {
+            ...props,
+            error: !isVoidField(field)
+                ? field.selfErrors[0] ?? undefined
+                : undefined,
+        };
+    })
+);
+
+export default ElFormItem;

package/src/components/el-form-item/style.ts

@@ -0,0 +1,3 @@
+import '@cicctencent/jtui/theme-chalk/src/base.scss'
+import '@cicctencent/jtui/theme-chalk/src/form.scss'
+import '@cicctencent/jtui/theme-chalk/src/form-item.scss'