@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/transform/index.ts

@@ -0,0 +1,11 @@
+import {
+    transformSchema,
+} from './transform';
+import { TransformCore } from './core';
+
+export default {
+    transformSchema,
+    TransformCore,
+};
+export { transformSchema };
+export { TransformCore };

package/src/transform/transform.ts

@@ -0,0 +1,59 @@
+import { TransformCore } from './core';
+import { mergePropertiesColors } from './utils/func';
+import { TransformCoreState } from '../typings/common';
+
+/**
+ *  配置转换
+ * @param schema  schema 配置
+ * @param ctx   vue实例,用于处理vue事件
+ * @returns
+ */
+export function transformSchema({ schema, ctx, group = false, layout = 'vertical' }: TransformCoreState) {
+    if (!schema) {
+        return {};
+    }
+    let resConfig: any = {};
+    // 合并 [props,style,event]
+    if ('properties' in schema) {
+        const data: any = { ...schema };
+        formatColor(data);
+        resConfig = { ...data };
+    } else {
+        const properties = { ...schema };
+        const data: any = {
+            type: 'object',
+            properties: properties,
+        };
+        formatColor(data);
+        resConfig = { ...data };
+    }
+    const result: any = new TransformCore({ schema: resConfig, ctx, group,layout }).compile();
+    console.log('[jt-formily Transform]', 'transformSchema', 'result:', result);
+    return result;
+}
+
+// 合并颜色字段
+function mergeColor(properties: any) {
+    let colors: any = mergePropertiesColors(properties);
+    if (colors && JSON.stringify(colors) != '{}') {
+          properties['colorGroup'] = {
+            type:'void',
+            'x-decorator':'ColorGroup',
+            properties:{ ...colors }
+          };
+    }
+}
+
+function formatColor(data: any) {
+    if (!data?.properties) {
+        return;
+    }
+    if ('colorGroup' in data?.properties) {
+        // 存在colorGroup 说明已经转换过了
+        return;
+    }
+    for (const key in data.properties) {
+        formatColor(data.properties[key]);
+    }
+    mergeColor(data.properties);
+}

package/src/transform/utils/constant.ts

@@ -0,0 +1,79 @@
+/** formily协议对应的keys */
+export const FORMILY_KEYS = [
+    'type',
+    'title',
+    'description',
+    'default',
+    'readOnly',
+    'writeOnly',
+    'enum',
+    'const',
+    'multipleOf',
+    'maximum',
+    'exclusiveMaximum',
+    'minimum',
+    'exclusiveMinimum',
+    'maxLength',
+    'minLength',
+    'pattern',
+    'maxItems',
+    'minItems',
+    'uniqueItems',
+    'maxProperties',
+    'minProperties',
+    'required',
+    'format',
+    // 'properties',
+    // 'items'
+    'additionalItems',
+    'patternProperties',
+    'additionalProperties',
+    'definitions',
+    '$ref',
+];
+
+export const FORMILY_EXPAND_KEYS=[
+  'asterisk',  // 控制FormItem 是否显示星号
+]
+
+export const COMMON_KEYS = [
+  'description',
+  'default',
+  'type',
+  'title',
+  'maxLength',
+  'multipleOf',
+  'const',
+  'x-decorator',
+  'x-component',
+  'x-component-props',
+  'x-decorator-props',
+];
+
+// 组件的映射
+export const COMPONENT_MAP = {
+    RadioWidget: 'Radio',
+    UploadWidget: 'UploadButton',
+    'hot-area': 'HotArea',
+    'rich-editor': 'RichEditor',
+    'el-color-picker': 'ColorPicker',
+};
+/** 字段映射 */
+export const FIELD_MAP = {
+    'ui:hidden': 'x-hidden',
+};
+export const FIELD_KEYS = ['ui:hidden'];
+
+/**
+ * 唯一性校验范围
+ */
+export enum UniqueType {
+  /**
+   * 页面内唯一
+   */
+  page = 1,
+  /**
+   * 组件内唯一
+   */
+  component = 2,
+}

package/src/transform/utils/func.ts

@@ -0,0 +1,145 @@
+import { COMPONENT_MAP } from './constant';
+
+/** 获取组件名 */
+export function getComponentName(data): String {
+    // 优先级  x-component -> ui:widget -> enum -> format -> type ->anyOf
+    const keys = Object.keys(data);
+    if (keys.includes('x-component')) {
+        return data['x-component'];
+    } else if (keys.includes('ui:widget')) {
+        return COMPONENT_MAP[data['ui:widget']];
+    } else if (keys.includes('enum')) {
+        return 'Select';
+    } else if (keys.includes('format')) {
+        switch (data['format']) {
+            case 'color':
+                return 'ColorPicker';
+            case 'date-time':
+                return 'DateTime';
+        }
+    } else if (keys.includes('type')) {
+        switch (data['type']) {
+            case 'string':
+                return 'Input';
+            case 'number':
+                return 'InputNumber';
+            case 'boolean':
+                return 'Switch';
+            case 'array':
+                return 'ArrayItems';
+            case 'object':
+                if (keys.includes('oneOf')) {
+                    return 'OneOf';
+                }
+        }
+    } else if (keys.includes('anyOf')) {
+        return 'AnyOf';
+    }
+}
+// 是否是anyOf
+export function isAnyOf(data: object): Boolean {
+    return 'anyOf' in data;
+}
+// 是否是OneOf
+export function isOneOf(data: object): Boolean {
+    return 'oneOf' in data
+}
+/**
+ *  oneOf 转换 Enum
+ * @param oneOfData
+ * @returns
+ */
+export function oneOfTransformEnum(oneOfData: any[]) {
+    const result: Array<{ label: string; value: any }> = [];
+    oneOfData.forEach(o => {
+        const properties = o?.properties;
+        let value = {};
+        for (const key in properties) {
+            if ('default' in properties[key]) {
+                value[key] = properties[key].default;
+            } else if ('properties' in properties[key]) {
+                value[key] = {};
+                Object.keys(properties[key].properties).forEach(oKey => {
+                    value[key][oKey] = properties[key].properties[oKey].default;
+                })
+            }
+        }
+        result.push({ label: o.title, value });
+    });
+    return result;
+}
+/**
+ *  生成enum
+ * @param enumValues
+ * @param enumNames
+ * @returns
+ */
+export function emitEnum(enumValues, enumNames: string[] = []) {
+    if (!Array.isArray(enumValues)) {
+        return [];
+    }
+    if (typeof enumValues[0] === 'object') {
+        // 如果元素是 {} object类型,说明已经是formily协议
+        return enumValues;
+    }
+    const result = [];
+    if (Array.isArray(enumNames) && enumNames.length > 0) {
+        for (let i = 0; i < enumValues.length; i++) {
+            result.push({ label: enumNames[i], value: enumValues[i] });
+        }
+    } else {
+        for (let i = 0; i < enumValues.length; i++) {
+            result.push({ label: enumValues[i], value: enumValues[i] });
+        }
+    }
+    return result;
+}
+
+/**
+ *  合并properties color
+ * @param properties
+ * @returns
+ */
+export function mergePropertiesColors(properties: any) {
+    if (!properties || typeof properties !== 'object') {
+        return {};
+    }
+    const colorGroup = {};
+    for (const key in properties) {
+        if (!properties[key]) {
+            continue;
+        }
+        if (
+            properties[key]?.format === 'color' ||
+            properties[key]?.['x-component'] === 'ColorPicker' ||
+            properties[key]['ui:widget'] === 'el-color-picker'||
+            key.toLocaleUpperCase().indexOf('COLOR')!== -1||
+            key.toLocaleUpperCase() == 'BACKGROUND'
+        ) {
+            colorGroup[key] = properties[key];
+            delete properties[key];
+        }
+    }
+    return colorGroup;
+}
+/** 简易生成SchemaItem */
+export function simpleGenerationSchemaItem(data) {
+    //只满足基本类型 (不包含自定义组件)
+    // default: "文本描述信息"
+    // title: "标题描述"
+    // type: "string"
+    const result = {
+        'x-component': getComponentName(data),
+        'x-decorator': 'FormItem',
+        ...data,
+        'x-decorator-props' : {layout: 'vertical', labelAlign: 'left', labelWrap: true}
+    };
+    return result;
+}
+/**  获取表单额外数据 */
+export function getXData(data){
+  if('x-data' in data){
+    return data['x-data']
+  }
+  return {}
+}

package/src/typings/common.ts

@@ -0,0 +1,37 @@
+import { Schema } from '@formily/json-schema';
+import { JSONSchema4 } from 'json-schema';
+// https://core.formilyjs.org/zh-CN/api/models/field#validate
+export interface IValidateResults {
+    error?: string[];
+    warning?: string[];
+    success?: string[];
+}
+/** 校验错误数据 */
+export interface ValidateError {
+    path:string, // 组件名
+    schema:object // schema
+}
+
+/**
+ *   FormilyValidate State
+ */
+export interface FormilyValidateState {
+    schema: JSONSchema4; // schema配置
+    data: Object; // schema数据
+    validateData?: any[]; // 检验的数据 (用于校验必填项)
+}
+
+export interface TransformCoreState{
+    schema: Schema|any,
+    /**
+     *  vue 实例
+     */
+    ctx: any,
+    /**
+     *  是否进行分组
+     */
+    group?: boolean
+
+    layout?: 'vertical'| 'horizontal'
+}
+

package/src/typings/vue-shim.d.ts

@@ -0,0 +1,7 @@
+declare module "*.vue" {
+  import { App, defineComponent } from "vue";
+  const component: ReturnType<typeof defineComponent> & {
+    install(app: App): void;
+  };
+  export default component;
+}

package/src/typings/vue-test-utils.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPublicInstance } from "vue";
+
+declare module "@vue/test-utils" {
+  interface DOMWrapper<ElementType> {
+    style: CSSStyleDeclaration;
+  }
+
+  interface VueWrapper<T extends ComponentPublicInstance> {
+    style: CSSStyleDeclaration;
+  }
+}

package/src/utils/anyof_utils.ts

@@ -0,0 +1,95 @@
+import {log, isEqual, cloneDeep} from '@cicctencent/ark-util'
+
+const infoLog = log('[jt-formily anyof_utils]')
+/**
+ *  获取Any Of Config
+ * @param schemaList
+ * @param data
+ */
+export function getAnyOfConfig(schemaList:any[],data){
+  infoLog('getAnyOfConfig()',schemaList,data);
+  const { isEmptyProperties, defaultConfig, anyOf_val , maxConfig, anyOfConfig, emptyConfig } = getData(schemaList,data);
+  if(!schemaList.length){
+    return {};
+  }
+  if(!data || isEqual(data,{})){
+    infoLog('data is undefined or {}',schemaList,data)
+      //  空对象, 可能是【没有选项】,可能是没有初始化
+      if(isEmptyProperties){
+        infoLog('走null分支',schemaList,data)
+        // 存在空配置, 那就默认空配置
+        return emptyConfig
+      }
+      else{
+        infoLog('走获取默认配置分支',defaultConfig)
+        return defaultConfig ?? schemaList[0];
+      }
+  }
+  else{
+    if(anyOf_val){
+      infoLog('走anyOf_val分支',schemaList,data)
+      return anyOfConfig ?? {};
+    }else{
+       infoLog('走匹配分支',schemaList,data)
+        return maxConfig ?? {}
+    }
+  }
+}
+
+
+
+
+function getData(schemaList:any[],data:any){
+  const dataKeys = Object.keys(data??{});
+  // 最大匹配度配置
+  let maxConfig = null
+  // 用于计数
+  let maxLength= 0;
+  // 默认配置
+  let defaultConfig = null
+
+  // 通过anyOf_val 获取的配置
+  let anyOf_val= null;
+  let anyOfConfig = null;
+  // 是否存在空的Properties
+  let isEmptyProperties = false;
+
+  // 空配置
+  let emptyConfig = null
+
+  if(data && 'anyOf_val' in data){
+    anyOf_val = data['anyOf_val'];
+  }
+
+  schemaList.forEach(item =>{
+    const propertiesKeys = Object.keys(item?.properties??{});
+
+    if(!propertiesKeys.length){
+      isEmptyProperties = true;
+
+      emptyConfig = cloneDeep(item)
+    }
+
+    if(anyOf_val === item?.title){
+      anyOfConfig = cloneDeep(item);
+    }
+
+    if(dataKeys.length){
+        let length = dataKeys.filter(d => propertiesKeys.includes(d)).length
+        if(length > maxLength){
+          maxLength = length;
+          maxConfig = cloneDeep(item);
+        }
+    }
+
+    if(item && 'x-data' in item){
+      const activity = item['x-data']?.activity
+      if(activity){
+          defaultConfig = cloneDeep(item);
+      }
+    }
+  })
+
+
+  return { maxConfig, defaultConfig, anyOf_val, isEmptyProperties, anyOfConfig, emptyConfig }
+}

package/src/utils/common.ts

@@ -0,0 +1,15 @@
+/**
+ *  是否是Schema配置
+ * @param data 
+ * @returns 
+ */
+export  function isSchemaConfig(data = {}) {
+  if (!data || typeof data !== 'object') {
+    return false;
+  }
+
+  if (data['x-component'] || data['properties'] || data['title'] || data['type']) {
+    return true;
+  }
+  return false;
+}