@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/link/index.ts

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

package/src/components/middleware/index.ts

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

package/src/components/one-of/index.ts

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

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

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

package/src/components/placeholder-input/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-input
+      :rows="4"
+      type="textarea"
+      :model-Value="modelValue"
+      @blur="handleBlur"
+      @input="handleInput"
+    ></el-input>
+    <div class="placeholder-group">
+      <div
+        v-for="item in placeholderList"
+        :key="item"
+        class="placeholder-group--item"
+        @click="insertPlaceholder(item)"
+      >
+        {{ item.text }} {{ item.description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'PlaceholderInput',
+  emits: ['change'],
+  props: {
+    modelValue: String,
+    placeholderList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  setup(props, ctx) {
+    // 光标位置
+    const cursorPosition = ref<number>(0);
+
+    // 失焦记录光标位置
+    function handleBlur(e) {
+      cursorPosition.value = e.target.selectionStart;
+    }
+
+    function handleInput(e) {
+      emitValue(e);
+    }
+
+    let time = null;
+    function emitValue(value) {
+      if (time) clearTimeout(time);
+
+      time = setTimeout(() => {
+        ctx.emit('change', value);
+      }, 100);
+    }
+
+    function insertPlaceholder(data) {
+      emitValue(
+        props.modelValue.slice(0, cursorPosition.value) +
+          data.text +
+          props.modelValue.slice(cursorPosition.value)
+      );
+    }
+    return { handleBlur, insertPlaceholder, handleInput };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.placeholder-group {
+  display: flex;
+  flex-wrap: wrap;
+  &--item {
+    border: 1px solid #999;
+    padding: 0px 4px;
+    border-radius: 4px;
+    margin-top: 10px;
+    margin-right: 10px;
+    font-size: 12px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/preview-text/index.ts

@@ -0,0 +1,303 @@
+import { defineComponent, computed, toRef, Ref, h } from 'vue';
+import {
+    createContext,
+    resolveComponent,
+    useContext,
+    composeExport,
+} from '../__builtins__/shared';
+import { Field } from '@formily/core';
+import { observer } from '@formily/reactive-vue';
+import { useField } from '@formily/vue';
+import { isArr, isValid } from '@formily/shared';
+import { stylePrefix } from '../__builtins__/configs';
+import { InputProps } from '../input';
+import type { SelectProps } from '../select';
+import type { CascaderProps } from '../cascader';
+import type { DatePickerProps } from '../date-picker';
+import type { TimePickerProps } from '../time-picker';
+import { Space } from '../space';
+import { ElTag } from '@cicctencent/jtui';
+
+const prefixCls = `${stylePrefix}-preview-text`;
+const PlaceholderContext = createContext('N/A');
+
+export const usePlaceholder = (value?: Ref<any>) => {
+    const placeholderCtx = useContext(PlaceholderContext);
+    const placeholder = computed(() => {
+        return isValid(value?.value) && value?.value !== ''
+            ? value?.value
+            : resolveComponent(placeholderCtx.value) || 'N/A';
+    });
+    return placeholder;
+};
+
+const Input = defineComponent({
+    name: 'FPreviewTextInput',
+    props: ['value'],
+    setup(props, { attrs, slots }) {
+        const value = toRef(props, 'value');
+        const placeholder = usePlaceholder(value);
+        return () => {
+            return h(
+                Space,
+                {
+                    class: [prefixCls],
+                    style: attrs.style,
+                },
+                {
+                    default: () =>
+                        [
+                            slots?.prepend?.(),
+                            slots?.prefix?.(),
+                            placeholder.value,
+                            slots?.suffix?.(),
+                            slots?.append?.(),
+                        ].filter(child => !!child),
+                }
+            );
+        };
+    },
+});
+
+const Select = observer(
+    defineComponent<SelectProps>({
+        name: 'FPreviewTextSelect',
+        setup(_props, { attrs }) {
+            const fieldRef = useField<Field>();
+            const field = fieldRef.value;
+            const props = attrs as unknown as SelectProps;
+            const dataSource: any[] = field?.dataSource?.length
+                ? field.dataSource
+                : props?.options?.length
+                ? props.options
+                : [];
+            const placeholder = usePlaceholder();
+            const getSelected = () => {
+                const value = props.value;
+                if (props.multiple) {
+                    return isArr(value)
+                        ? value.map(val => ({ label: val, value: val }))
+                        : [];
+                } else {
+                    return isValid(value) ? [{ label: value, value }] : [];
+                }
+            };
+
+            const getLabels = () => {
+                const selected = getSelected();
+                if (!selected.length) {
+                    return h(
+                        ElTag,
+                        {},
+                        {
+                            default: () => placeholder.value,
+                        }
+                    );
+                }
+                return selected.map(({ value, label }, key) => {
+                    const text =
+                        dataSource?.find(item => item.value == value)?.label ||
+                        label;
+                    return h(
+                        ElTag,
+                        {
+                            key,
+                            type: 'info',
+                            effect: 'light',
+                        },
+                        {
+                            default: () => text || placeholder.value,
+                        }
+                    );
+                });
+            };
+
+            return () => {
+                return h(
+                    Space,
+                    {
+                        class: [prefixCls],
+                        style: attrs.style,
+                    },
+                    {
+                        default: () => getLabels(),
+                    }
+                );
+            };
+        },
+    })
+);
+
+const Cascader = observer(
+    defineComponent<CascaderProps>({
+        name: 'FPreviewTextCascader',
+        setup(_props, { attrs }) {
+            const fieldRef = useField<Field>();
+            const field = fieldRef.value;
+            const props = attrs as unknown as CascaderProps;
+            const dataSource: any[] = field?.dataSource?.length
+                ? field.dataSource
+                : props?.options?.length
+                ? props.options
+                : [];
+            const placeholder = usePlaceholder();
+            const valueKey = props.props?.value || 'value';
+            const labelKey = props.props?.label || 'label';
+            const getSelected = () => {
+                return isArr(props.value) ? props.value : [];
+            };
+
+            const findLabel: (value: any, dataSource: any) => any = (
+                value,
+                dataSource
+            ) => {
+                for (let i = 0; i < dataSource?.length; i++) {
+                    const item = dataSource[i];
+                    if (item?.[valueKey] === value) {
+                        return item?.[labelKey];
+                    } else {
+                        const childLabel = findLabel(value, item?.children);
+                        if (childLabel) return childLabel;
+                    }
+                }
+            };
+
+            const getLabels = () => {
+                const selected = getSelected();
+                if (!selected?.length) {
+                    return h(
+                        ElTag,
+                        {},
+                        {
+                            default: () => placeholder.value,
+                        }
+                    );
+                }
+                return selected.map((value, key) => {
+                    const text = findLabel(value, dataSource);
+                    return h(
+                        ElTag,
+                        {
+                            key,
+                            type: 'info',
+                            effect: 'light',
+                        },
+                        {
+                            default: () => text || placeholder.value,
+                        }
+                    );
+                });
+            };
+
+            return () => {
+                return h(
+                    Space,
+                    {
+                        class: [prefixCls],
+                        style: attrs.style,
+                    },
+                    {
+                        default: () => getLabels(),
+                    }
+                );
+            };
+        },
+    })
+);
+
+const DatePicker = defineComponent<DatePickerProps>({
+    name: 'FPreviewTextDatePicker',
+    setup(_props, { attrs }) {
+        const props = attrs as unknown as DatePickerProps;
+        const placeholder = usePlaceholder();
+        const getLabels = () => {
+            if (isArr(props.value)) {
+                const labels = (props.value as any[]).map(
+                    (value: string | Date) => value || placeholder.value
+                );
+
+                return labels.join('~');
+            } else {
+                return props.value || placeholder.value;
+            }
+        };
+
+        return () => {
+            return h(
+                'div',
+                {
+                    class: [prefixCls],
+                    style: attrs.style,
+                },
+                {
+                    default: () => getLabels(),
+                }
+            );
+        };
+    },
+});
+
+const TimePicker = defineComponent<TimePickerProps>({
+    name: 'FPreviewTextTimePicker',
+    setup(_props, { attrs }) {
+        const props = attrs as unknown as TimePickerProps;
+        // const format = props.pickerOptions?.format || 'HH:mm:ss'
+        const placeholder = usePlaceholder();
+        const getLabels = () => {
+            if (isArr(props.value)) {
+                const labels = props.value.map(
+                    (value: string | Date) => value || placeholder.value
+                );
+
+                return labels.join('~');
+            } else {
+                return props.value || placeholder.value;
+            }
+        };
+
+        return () => {
+            return h(
+                'div',
+                {
+                    class: [prefixCls],
+                    style: attrs.style,
+                },
+                {
+                    default: () => getLabels(),
+                }
+            );
+        };
+    },
+});
+
+const Text = defineComponent<any>({
+    name: 'FPreviewText',
+    setup(_props, { attrs }) {
+        const placeholder = usePlaceholder();
+
+        return () => {
+            return h(
+                'div',
+                {
+                    class: [prefixCls],
+                    style: attrs.style,
+                },
+                {
+                    default: () => placeholder.value,
+                }
+            );
+        };
+    },
+});
+
+export const PreviewText = composeExport(Text, {
+    Input,
+    Select,
+    Cascader,
+    DatePicker,
+    TimePicker,
+    Placeholder: PlaceholderContext.Provider,
+    usePlaceholder,
+}) as any;
+
+export default PreviewText;

package/src/components/preview-text/style.ts

@@ -0,0 +1,9 @@
+import '@cicctencent/jtui/theme-chalk/src/tag.scss'
+
+// 依赖
+import '../input/style'
+import '../select/style'
+import '../cascader/style'
+import '../time-picker/style'
+import '../date-picker/style'
+import '../space/style'

package/src/components/radio/index.ts

@@ -0,0 +1,109 @@
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import { defineComponent, PropType, h } from 'vue';
+import {
+    composeExport,
+    transformComponent,
+    resolveComponent,
+    SlotTypes,
+} from '../__builtins__/shared';
+import { PreviewText } from '../preview-text';
+
+import { ElRadio, ElRadioGroup, ElRadioButton } from '@cicctencent/jtui';
+
+export type ElRadioProps = typeof ElRadio;
+export type RadioGroupProps = typeof ElRadioGroup & {
+    value: any;
+    options?: (
+        | (Omit<ElRadioProps, 'value'> & {
+              value: ElRadioProps['label'];
+              label: SlotTypes;
+          })
+        | string
+    )[];
+    optionType: 'defalt' | 'button';
+};
+
+const TransformElRadioGroup = transformComponent(ElRadioGroup, {
+    change: 'input',
+});
+
+const RadioGroupOption = defineComponent({
+    name: 'FRadioGroup',
+    props: {
+        options: {
+            type: Array as PropType<RadioGroupProps['options']>,
+            default: () => [],
+        },
+        optionType: {
+            type: String as PropType<RadioGroupProps['optionType']>,
+            default: 'default',
+        },
+    },
+    setup(customProps, { attrs, slots }) {
+        return () => {
+            const options = customProps.options || [];
+            const OptionType =
+                customProps.optionType === 'button' ? ElRadioButton : ElRadio;
+            const children =
+                options.length !== 0
+                    ? {
+                          default: () =>
+                              options.map(option => {
+                                  if (typeof option === 'string') {
+                                      return h(
+                                          OptionType,
+                                          { label: option },
+                                          {
+                                              default: () => [
+                                                  resolveComponent(
+                                                      slots?.option ?? option,
+                                                      { option }
+                                                  ),
+                                              ],
+                                          }
+                                      );
+                                  } else {
+                                      return h(
+                                          OptionType,
+                                          {
+                                              ...option,
+                                              value: undefined,
+                                              label: option.value,
+                                          },
+                                          {
+                                              default: () => [
+                                                  resolveComponent(
+                                                      slots?.option ??
+                                                          option.label,
+                                                      {
+                                                          option,
+                                                      }
+                                                  ),
+                                              ],
+                                          }
+                                      );
+                                  }
+                              }),
+                      }
+                    : slots;
+            return h(
+                TransformElRadioGroup,
+                {
+                    ...attrs,
+                },
+                children
+            );
+        };
+    },
+});
+
+const RadioGroup = connect(
+    RadioGroupOption,
+    mapProps({ dataSource: 'options', value: 'modelValue' }),
+    mapReadPretty(PreviewText.Select)
+);
+export const Radio = composeExport(ElRadio, {
+    Group: RadioGroup,
+});
+
+export default Radio;

package/src/components/radio/style.ts

@@ -0,0 +1,3 @@
+import '@cicctencent/jtui/theme-chalk/src/radio.scss'
+import '@cicctencent/jtui/theme-chalk/src/radio-group.scss'
+import '@cicctencent/jtui/theme-chalk/src/radio-button.scss'

package/src/components/reset/index.ts

@@ -0,0 +1,52 @@
+import { IFieldResetOptions } from '@formily/core'
+import { h, useParentForm } from '@formily/vue'
+import { observer } from '@formily/reactive-vue'
+import { defineComponent } from 'vue'
+
+import type { ElButton as ElButtonProps } from '@cicctencent/jtui'
+import { ElButton } from '@cicctencent/jtui'
+
+export type ResetProps = IFieldResetOptions & typeof ElButtonProps
+
+export const Reset = observer(
+  defineComponent({
+    name: 'FReset',
+    props: {
+      forceClear: {
+        type: Boolean,
+        default: false,
+      },
+      validate: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, { attrs, slots }: any) {
+      const formRef = useParentForm()
+      return () => {
+        const form = formRef?.value
+        return h(
+          ElButton,
+          {
+            ...attrs,
+            onClick: (e: MouseEvent) => {
+              if (attrs?.click) {
+                if (attrs.click(e) === false) return
+              }
+              form
+                ?.reset('*', {
+                  forceClear: props.forceClear,
+                  validate: props.validate,
+                })
+                .then(attrs.resetValidateSuccess as (e: any) => void)
+                .catch(attrs.resetValidateFailed as (e: any) => void)
+            },
+          },
+          slots
+        )
+      }
+    },
+  })
+)
+
+export default Reset

package/src/components/reset/style.ts

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

package/src/components/rich-editor/index.ts

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

package/src/components/row/index.ts

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