@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/array-tabs/index.ts

@@ -0,0 +1,141 @@
+import { defineComponent, ref, h } from 'vue';
+import { observer } from '@formily/reactive-vue';
+import { ArrayField } from '@formily/core';
+import { useField, useFieldSchema, RecursionField } from '@formily/vue';
+import { ElTabs, ElTabPane, ElBadge } from '@cicctencent/jtui';
+import { stylePrefix } from '../__builtins__/configs';
+// todo 完善any类型
+import './style.scss';
+export const ArrayTabs = observer(
+    defineComponent({
+        name: 'ArrayTabs',
+        props: ['onChange'],
+        setup(props, { attrs }) {
+            const fieldRef = useField<ArrayField>();
+            const schemaRef = useFieldSchema();
+
+            const prefixCls = `${stylePrefix}-array-tabs`;
+            const activeKey = ref('tab-0');
+
+            return () => {
+                const field = fieldRef.value;
+                const schema = schemaRef.value;
+                const value = Array.isArray(field.value) ? field.value : [];
+                const dataSource = value?.length ? value : [{}];
+
+                const onEdit = (targetKey: any, type: 'add' | 'remove') => {
+                    if (type == 'add') {
+                        const id = dataSource.length;
+                        if (field?.value?.length) {
+                            field.push(null);
+                        } else {
+                            field.push(null, null);
+                        }
+                        activeKey.value = `tab-${id}`;
+                    } else if (type == 'remove') {
+                        const index = targetKey.match(/-(\d+)/)?.[1];
+                        field.remove(Number(index));
+                        if (activeKey.value === targetKey) {
+                            activeKey.value = `tab-${index - 1}`;
+                        }
+                    }
+                };
+
+                const badgedTab = (index: number) => {
+                    const tab = `${field.title || 'Untitled'} ${index + 1}`;
+                    const path = field.address.concat(index);
+                    const errors = field.form.queryFeedbacks({
+                        type: 'error',
+                        address: `${path}.**`,
+                    });
+                    if (errors.length) {
+                        return h(
+                            'span',
+                            {},
+                            {
+                                default: () => [
+                                    h(
+                                        ElBadge,
+                                        {
+                                            class: [
+                                                `${prefixCls}-errors-badge`,
+                                            ],
+                                            value: errors.length,
+                                        },
+                                        {
+                                            default: () => [tab],
+                                        }
+                                    ),
+                                ],
+                            }
+                        );
+                    }
+                    return h(
+                        'span',
+                        {},
+                        {
+                            default: () => [tab],
+                        }
+                    );
+                };
+
+                const renderItems = () =>
+                    dataSource?.map((item, index) => {
+                        const items = Array.isArray(schema.items)
+                            ? schema.items[index]
+                            : schema.items;
+                        const key = `tab-${index}`;
+
+                        return h(
+                            ElTabPane,
+                            {
+                                key,
+                                closable: index !== 0,
+                                name: key,
+                            },
+                            {
+                                default: () =>
+                                    h(
+                                        RecursionField,
+                                        {
+                                            schema: items,
+                                            name: index,
+                                        },
+                                        {}
+                                    ),
+
+                                label: () => [badgedTab(index)],
+                            }
+                        );
+                    });
+                return h(
+                    ElTabs as any,
+                    {
+                        class: [prefixCls],
+                        ...attrs,
+                        type: 'card',
+                        modelValue: activeKey.value,
+                        addable: true,
+                        'onUpdata:modelValue': (key: any) => {
+                            activeKey.value = key;
+                        },
+                        onModel: (target: any) => {
+                            onEdit(target, 'remove');
+                            !(attrs as any)?.['tab-remove']?.(target);
+                        },
+                        onTabAdd: () => {
+                            onEdit(null, 'add');
+                            !(attrs as any)?.['tab-add']?.();
+                        },
+                        onChange: (...args: any[]) => {},
+                    },
+                    {
+                        default: () => [renderItems()],
+                    }
+                );
+            };
+        },
+    })
+);
+
+export default ArrayTabs;

package/src/components/array-tabs/style.scss

@@ -0,0 +1,16 @@
+@import '../__builtins__/styles/common.scss';
+
+$array-table-prefix-cls: '#{$formily-prefix}-array-tabs';
+
+.#{$array-table-prefix-cls} {
+  .#{$formily-prefix}-array-tabs-addition {
+    position: absolute;
+    right: -56px;
+    top: -1px;
+  }
+
+  .#{$array-table-prefix-cls}-errors-badge {
+    line-height: 1;
+    vertical-align: initial;
+  }
+}

package/src/components/array-tabs/style.ts

@@ -0,0 +1,5 @@
+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'
+import '@cicctencent/jtui/theme-chalk/src/button.scss'

package/src/components/base/AnyOf/index.ts

@@ -0,0 +1,155 @@
+import {
+  createForm,
+  Form,
+  onFormInit,
+  onFormValuesChange,
+  onFormMount
+} from '@formily/core';
+import { computed, getCurrentInstance, ref, onMounted, watch, nextTick } from 'vue';
+import { transformSchema } from '../../../transform';
+import { isEqual, log } from '@cicctencent/ark-util'
+import { getAnyOfConfig } from '../../../utils/anyof_utils';
+const infoLog = log('[any of component]')
+export default function (props, emit) {
+  /** vue实例 */
+  const ctx = getCurrentInstance();
+  /**  */
+  const radioValue = ref();
+  let mountFlag = false;
+
+  /** schema 配置 */
+  const schemaConfig = ref({});
+  /** form表单实例 */
+  const form = ref<Form>();
+
+  /** switch */
+  //switch 状态为 on 时的值
+  const switchActiveValue = ref(true);
+  const switchInactiveValue= ref(false);
+
+  onMounted(() => {
+      init();
+  });
+
+  watch(()=> props.modelValue,(newVal,oldVal)=>{
+    if(!isEqual(newVal,oldVal)){
+      nextTick(()=>{
+        form.value && form.value.setValues(newVal)
+      })
+    }
+  })
+
+  const schemaList = computed(() =>{
+    return JSON.parse(props?.list ?? '[]');
+  })
+
+  // 是否是空的Propeities
+  const isEmpuyProperties = computed(()=>{
+    return  isEqual(curProperties.value?.properties ?? {}, {})
+  })
+
+  function onRadioChange(){
+    emit('change',{ anyOf_val: radioValue.value})
+    mountFlag = false;
+    // updateFlag = true;
+    form.value = null;
+    setTimeout(()=>{
+      generateSchema();
+      generateForm();
+    },100)
+  }
+  // 获取当前的schema
+ const curProperties = computed(() => {
+      if(!Array.isArray(schemaList.value)||!schemaList.value.length||!radioValue.value){
+          return {};
+      }
+      for(let i = 0; i < schemaList.value.length; ++i){
+          if(schemaList.value[i]?.title === radioValue.value){
+              return {
+                type:'object',
+                properties:schemaList.value[i]?.properties ?? {},
+              }
+          }
+      }
+      return {}
+ })
+ // 获取radioGroup options
+ const radioOptions = computed(() => {
+    if(!Array.isArray(schemaList.value)||!schemaList.value.length){
+      return [];
+    }
+    const options = [];
+    schemaList.value.forEach((item, index) =>{
+        options.push({ label: item.title ?? '',key: index })
+    })
+    return options;
+ })
+ // 生成表单
+ function generateSchema(){
+  infoLog('generateSchema',curProperties.value)
+    schemaConfig.value = transformSchema({ schema: curProperties.value, ctx });
+ }
+ /**
+  *  获取默认选择项
+  * @param data
+  * @returns
+  */
+ function isActivity(data){
+    if('x-data' in data){
+      return  data['x-data']?.activity ? true : false;
+    }
+    return false;
+ }
+
+ function init(){
+
+    let config = getAnyOfConfig(schemaList.value,props.modelValue)
+    infoLog('init',config)
+
+     // 处理switch模式的 switch value
+     if(props.type === 'switch'){
+      if(Array.isArray(schemaList.value) && schemaList.value.length === 2){
+        switchActiveValue.value = schemaList.value[0].title
+        switchInactiveValue.value = schemaList.value[1].title
+      }
+    }
+
+    radioValue.value = config?.title
+  // 生成表单
+    generateSchema();
+    generateForm();
+ }
+
+function generateForm(){
+   form.value = null;
+   form.value = createForm({
+    effects(){
+      onFormInit(form => {
+        form.setValues(props.modelValue);
+      })
+      onFormMount(form => {
+        mountFlag = true;
+        form.setValues(Object.assign({},props.modelValue,form.values))
+      })
+      onFormValuesChange(form => {
+        if(mountFlag){
+          const result = { ...form.values}
+          result['anyOf_val'] = radioValue.value;
+          emit('change', result);
+        }
+      })
+    },
+    readOnly: props.readOnly,
+  })
+ }
+  return {
+    onRadioChange,
+    isEmpuyProperties,
+    radioValue,
+    form,
+    schemaConfig,
+    radioOptions,
+    switchActiveValue,
+    switchInactiveValue
+  }
+}

package/src/components/base/AnyOf/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="any-of-wrap">
+        <div class="any-of-wrap--header">
+        <FormItem :label="type ==='switch'? title : ''" :asterisk="required" :layout="type === 'switch'?'horizontal' :'vertical'" label-align="left">
+            <template v-if="type === 'radio'">
+                <el-radio-group v-model="radioValue" :disabled="readOnly" @change="onRadioChange">
+                    <el-radio
+                        v-for="item in radioOptions"
+                        :key="item.key"
+                        :label="item.label"
+                    >
+                        {{ item.label }}
+                    </el-radio>
+                </el-radio-group>
+            </template>
+            <template v-else-if="type === 'switch'">
+                <div class="any-of-wrap--switch-box">
+                    <el-switch :disabled="readOnly" :inactive-value="switchInactiveValue" :active-value="switchActiveValue" v-model="radioValue"  @change="onRadioChange" />
+                </div>
+            </template>
+        </FormItem>
+       </div>
+        <!-- formily -->
+        <div class="any-of-wrap--content" :class="{'padding': !isEmpuyProperties}">
+             <FormProvider :form="form" >
+                <SchemaField :schema="schemaConfig" />
+            </FormProvider>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+//@ts-ignore
+import useAny from './index';
+// @ts-ignore
+import { defineComponent } from 'vue';
+import { FormProvider, createSchemaField } from '@formily/vue';
+import FormItem from '../../form-item';
+
+defineComponent({
+    name:'AnyOf'
+})
+
+const props = defineProps({
+    list: {
+        type: String,
+        default: () => '[]',
+    },
+    modelValue: {
+        type: Object,
+        default: () => {},
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    defaultValue: String,
+    required: {
+        type: Boolean,
+        default: true,
+    },
+    type:{
+        type: String,
+        default: 'radio',
+    },
+    readOnly: {
+        type: Boolean,
+        default: false,
+    }
+});
+
+const emits = defineEmits(['change', 'error', 'fileModalOpen']);
+
+const {
+    radioValue,
+    radioOptions,
+    form,
+    schemaConfig,
+    onRadioChange,
+    switchActiveValue,
+    switchInactiveValue,
+    isEmpuyProperties
+} = useAny(props, emits);
+</script>
+
+<style  lang="scss">
+.any-of-wrap{
+    padding: 0 !important;
+    background-color: transparent !important;
+    &--switch-box{
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        vertical-align: bottom;
+        .el-switch{
+            height: 20px !important;
+            vertical-align: top;
+        }
+    }
+    &--content{
+    //   background-color: #f5f6f7;
+
+      &.padding{
+        padding:16px 17px;
+      }
+    }
+    &--header{
+    }
+}
+
+</style>

package/src/components/base/CloudButton/index.ts

@@ -0,0 +1,46 @@
+import { useField } from "@formily/vue";
+import { isEqual } from "lodash-es";
+import { computed, onMounted } from "vue"
+
+export default function(props,emits){
+
+     const field:any = useField()
+
+     onMounted(()=>{
+        //  存在云组件链接,进行预加载
+        props.exportUrl && emits('preload',props.exportUrl)
+     })
+    /** 编辑状态 */
+    const editorState = computed(() => {
+        return !!props.modelValue && !isEqual(props.modelValue,{})
+    })
+
+    const required = computed( ()=> field.value?.required)
+
+    /** 禁用状态 */
+    const disabled = computed(() => {
+        return !props.exportUrl || isEqual(props.exportUrl,'') || props.readonly
+    })
+
+    /** 点击事件处理 */
+    let timer = null;
+    function onClick(){
+        if(timer){
+            clearTimeout(timer);
+            timer = null;
+        }
+        timer =  setTimeout(()=>{
+            if(props?.exportUrl){
+                const data = Object.assign({}, props?.data ?? {}, props?.modelValue ?? {});
+                emits('openCloud', { exportUrl: props.exportUrl, data,readonly: props.readonly }, (res)=>{
+                   // 只读模式不允许更新数据
+                    if(!disabled.value){
+                      emits('update:modelValue', res);
+                    }
+                })
+            }
+            console.log('onClick CloudButton')
+        },1000)
+    }
+    return { editorState, disabled, onClick, required }
+}

package/src/components/base/CloudButton/index.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="formily-cloud">
+        <div class="formily-cloud--cell">
+            <span class="formily-cloud--cell--label" :class="{'editor-class' : editorState,'formily-cloud--cell--required': required }">{{ label }}</span>
+            <span  :style="{ opacity : editorState ? '.6' : '1' }" class="formily-cloud--cell--value" @click="onClick">编辑</span>
+        </div>
+        <div class="formily-cloud--button" @click="onClick">{{ label }}</div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore
+import { defineComponent } from 'vue';
+// @ts-ignore
+import useCloudButton from './index';
+defineComponent({
+    name:'FormilyCloudButton'
+})
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: null
+    },
+    data:{
+        type: Object,
+        default: ()=> {
+            return {}
+        }
+    },
+    exportUrl:{
+        type: String,
+        default: ''
+    },
+    label:{
+        type: String,
+        default: ''
+    },
+    readonly:{
+        type: Boolean,
+        default: false
+    },
+});
+const emits = defineEmits(['update:modelValue', 'change', 'openCloud', 'preload']);
+
+const { editorState, disabled, onClick, required } = useCloudButton(props, emits);
+</script>
+
+<style lang="scss">
+.formily-cloud{
+    &--button{
+        display: none;
+        background: #F9F4EE;
+        width: 120px;
+        padding: 5px 16px;
+        border: 1px solid #C79156;
+        border-radius: 4px;
+        box-sizing: border-box;
+        color: #C79156;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        text-align: center;
+        cursor: pointer;
+        &:hover{
+            background-color: #f6e3cd;
+        }
+    }
+    &--cell {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        // border-top: 1px solid rgba(0, 0, 0, 0.1);
+        // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        // padding: 16px 18px;
+        border: none !important;
+        padding: 0 18px 16px 18px ;
+        margin: 0 !important;
+        &__disabled{
+            cursor: not-allowed;
+            pointer-events: none;
+            background-image: none;
+        }
+        &--value {
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            /* identical to box height */
+            color: #4B515E;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        &--label {
+            color: rgba(2, 2, 2, 0.4);
+            font-size: 16px;
+            line-height: 24px;
+            font-weight: 600;
+            font-style: normal;
+            &.editor-class{
+              color: #020202 !important;
+            }
+        }
+
+        &--required{
+            position: relative;
+            &::before{
+                content: '*';
+                position: absolute;
+                left: -12px;
+                top: 0px;
+                color: #f56c6c;
+            }
+        }
+    }
+}
+/* 通过样式切换不同类型的风格 */
+.dialog-cloud{
+    .formily-cloud--button{
+        display: block;
+    }
+    .formily-cloud--cell{
+        display: none;
+    }
+}
+
+</style>

package/src/components/base/ColorGroup/index.ts

@@ -0,0 +1,57 @@
+import { getCurrentInstance, onMounted, ref, watch, computed, reactive } from 'vue';
+import { TransformCore } from '../../../transform';
+import {
+    createForm,
+    onFormInit,
+    onFormInputChange,
+    onFormMount,
+    onFormValuesChange,
+} from '@formily/core';
+import { isEqual } from '@cicctencent/ark-util';
+
+export default function (props, emit) {
+    const ctx = getCurrentInstance();
+    // 挂载标识
+    let mountFlag = false;
+    // 创建formily表单
+    const form = reactive(createForm({
+        effects() {
+            onFormMount(form => {
+                form.setValues({ ...props.modelValue });
+                setTimeout(() => {
+                    mountFlag = true;
+                }, 10);
+            });
+            onFormInputChange(form => {
+                // if (mountFlag) {
+                    emit('change', { ...form.values });
+                // }
+            });
+        },
+    }));
+    // schema配置
+    const schemaConfig = ref({});
+
+    onMounted(() => {
+        try {
+            // 因为存在 "x-component"特殊字段,传过来的是JSON字符串,这里需要parse
+            schemaConfig.value = new TransformCore({ schema: JSON.parse(props.schema ?? {}), ctx }).compile();
+        } catch (err) {
+          console.error(err);
+        }
+    });
+    watch(
+        () => props.modelValue,
+        (val, oldValue) => {
+          // 数据回显,有些场景组件渲染的时候, data的值还没有,这里监听modelValue数据首次为非{}的情况下,进行初始化(回显)操作
+          if(!isEqual(val, oldValue)){
+              form.setValues(val)
+            }
+        },{
+          deep:true,
+          immediate:true
+        }
+    );
+
+    return { form, schemaConfig };
+}

package/src/components/base/ColorGroup/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="color-group">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss">
+.color-group {
+    display: flex;
+    padding: 16px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    background-color: rgba(216, 220, 230, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .formily-color-picker {
+        width: 140px;
+    }
+    .formily-element-plus-form-item{
+        margin-right: 10px;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+</style>