@farris/cli 2.0.0-beta.7 → 2.0.0-beta.8

package/templates/lib/components/common/src/compositions/use-resize-observer/utils.ts

@@ -0,0 +1,37 @@
+/* eslint-disable no-use-before-define */
+import { ComponentPublicInstance, Ref, unref, getCurrentScope, onScopeDispose } from 'vue';
+import { inBrowser } from '../../utils';
+
+export const defaultWindow = inBrowser ? window : undefined;
+
+export type MaybeRef<T> = T | Ref<T>;
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T);
+
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
+export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
+
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
+  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
+
+export type AnyFn = (...args: any[]) => any;
+
+export function toValue<T>(r: MaybeRefOrGetter<T>): T {
+  return typeof r === 'function'
+    ? (r as AnyFn)()
+    : unref(r);
+}
+
+export function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T> {
+  const plain = toValue(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}
+
+export function tryOnScopeDispose(fn: (() => void)) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}

package/templates/lib/components/common/src/compositions/use-scroll-parent/index.ts

@@ -0,0 +1,42 @@
+import { ref, Ref, onMounted } from 'vue';
+import { inBrowser } from '../../utils';
+
+type ScrollElement = HTMLElement | Window;
+
+const overflowScrollReg = /scroll|auto|overlay/i;
+const defaultRoot = inBrowser ? window : undefined;
+
+function isElement(node: Element) {
+  const ELEMENT_NODE_TYPE = 1;
+  return (
+    node.tagName !== 'HTML' &&
+    node.tagName !== 'BODY' &&
+    node.nodeType === ELEMENT_NODE_TYPE
+  );
+}
+
+export function getScrollParent(el: Element, root: ScrollElement | undefined = defaultRoot) {
+  let node = el;
+
+  while (node && node !== root && isElement(node)) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+    node = node.parentNode as Element;
+  }
+
+  return root;
+}
+
+export function useScrollParent(el: Ref<Element | undefined>, root: ScrollElement | undefined = defaultRoot) {
+  const scrollParent = ref<Element | Window>();
+
+  onMounted(() => {
+    if (el.value) {
+      scrollParent.value = getScrollParent(el.value, root);
+    }
+  });
+
+  return scrollParent;
+}

package/templates/lib/components/common/src/compositions/use-touch/index.ts

@@ -0,0 +1,82 @@
+import { ref } from 'vue';
+
+export const TAP_OFFSET = 5;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y) {
+    return 'horizontal';
+  }
+  if (y > x) {
+    return 'vertical';
+  }
+  return '';
+}
+
+export function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref<Direction>('');
+  const isTap = ref(true);
+
+  const isVertical = () => direction.value === 'vertical';
+  const isHorizontal = () => direction.value === 'horizontal';
+
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = '';
+    isTap.value = true;
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+    // safari back will set clientX to negative number
+    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+
+    // lock direction when distance is greater than a certain value
+    const LOCK_DIRECTION_DISTANCE = 10;
+    if (
+      !direction.value ||
+      (offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE)
+    ) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+
+    if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
+      isTap.value = false;
+    }
+  }) as EventListener;
+
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal,
+    isTap
+  };
+}

package/templates/lib/components/common/src/compositions/use-touch-move/index.ts

@@ -0,0 +1,120 @@
+import { reactive, ref, Ref } from 'vue';
+import { throttle } from '../../utils';
+import { useEventListener } from '../use-event-listener';
+
+const MIN_DISTANCE = 10;
+
+type TouchDirection = 'horizontal' | 'vertical' | '';
+
+export type TouchOffset = {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  offsetX: number;
+  offsetY: number;
+  direction: TouchDirection;
+};
+
+type TouchListener = {
+  onTouchStart?: (event: Event) => void;
+  onTouchMove?: (event: Event) => void;
+  onTouchEnd?: (event: Event) => void;
+  onTouchCancel?: (event: Event) => void;
+};
+
+function getDirection(x: number, y: number): TouchDirection {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+const defaultTouchOffset: () => TouchOffset = () => {
+  return {
+    startX: 0,
+    startY: 0,
+    endX: 0,
+    endY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    direction: ''
+  };
+};
+
+export enum DragStatus {
+  NotStarted,
+  Started,
+  Dragging,
+  End
+}
+
+export function useTouchMove(
+  target: Ref<EventTarget | undefined>,
+  listener?: TouchListener,
+  wait = 0
+) {
+  let beginOffset = { offsetX: 0, offsetY: 0 };
+  const offset: TouchOffset = reactive(defaultTouchOffset());
+  const dragStatus = ref(DragStatus.NotStarted);
+
+  const touchStart = (event: any) => {
+    if (!event.touches || !event.touches[0]) {
+      return;
+    }
+    offset.startX = event.touches[0].clientX;
+    offset.startY = event.touches[0].clientY;
+    listener?.onTouchStart && listener.onTouchStart(event);
+    dragStatus.value = DragStatus.Started;
+  };
+
+  const touchMove = (event: any) => {
+    if (!event.touches || !event.touches[0]) {
+      return;
+    }
+    const touch = event.touches[0];
+    offset.offsetX = touch.clientX - offset.startX + beginOffset.offsetX;
+    offset.offsetY = touch.clientY - offset.startY + beginOffset.offsetY;
+    offset.endX = event.touches[0].clientX;
+    offset.endY = event.touches[0].clientY;
+    offset.direction = getDirection(offset.offsetX, offset.offsetY);
+    listener?.onTouchMove && listener.onTouchMove(event);
+    dragStatus.value = DragStatus.Dragging;
+  };
+
+  const touchEnd = (event: Event) => {
+    beginOffset = { offsetX: offset.offsetX, offsetY: offset.offsetY };
+    listener?.onTouchEnd && listener.onTouchEnd(event);
+    listener?.onTouchCancel && listener.onTouchCancel(event);
+    dragStatus.value = DragStatus.End;
+  };
+
+  const resetTouchStatus = () => {
+    offset.endX = 0;
+    offset.endY = 0;
+    offset.offsetX = 0;
+    offset.offsetY = 0;
+    offset.direction = '';
+    beginOffset = { offsetX: 0, offsetY: 0 };
+    dragStatus.value = DragStatus.NotStarted;
+  };
+
+  if (target) {
+    useEventListener('touchstart', touchStart, { target });
+    useEventListener('touchmove', wait > 0 ? throttle(touchMove, wait) : touchMove, {
+      target,
+      passive: false
+    });
+    useEventListener('touchend', touchEnd, { target });
+  }
+
+  return {
+    offset,
+    dragStatus,
+    resetTouchStatus
+  };
+}

package/templates/lib/components/common/src/entity/base-property.ts

@@ -0,0 +1,129 @@
+import { DesignerComponentInstance, DgControl } from "@/components/designer-canvas";
+import { cloneDeep } from "lodash-es";
+
+/**
+ * 控件属性基类
+ */
+export class BaseControlProperty {
+    public componentId: string;
+
+    public viewModelId: string;
+
+    public eventsEditorUtils: any;
+
+    public formSchemaUtils: any;
+    public formMetadataConverter: any;
+    public designViewModelUtils: any;
+    public designViewModelField: any;
+    public controlCreatorUtils: any;
+    public designerHostService: any;
+
+    schemaService: any = null;
+
+    metadataService: any = null;
+
+    protected propertyConfig = {
+        type: 'object',
+        categories: {}
+    };
+
+    constructor(componentId: string, designerHostService: any) {
+        this.componentId = componentId;
+        this.designerHostService = designerHostService;
+        this.eventsEditorUtils = designerHostService['eventsEditorUtils'];
+        this.formSchemaUtils = designerHostService['formSchemaUtils'];
+        this.formMetadataConverter = designerHostService['formMetadataConverter'];
+        this.viewModelId = this.formSchemaUtils?.getViewModelIdByComponentId(componentId) || '';
+        this.designViewModelUtils = designerHostService['designViewModelUtils'];
+        this.controlCreatorUtils = designerHostService['controlCreatorUtils'];
+        this.metadataService = designerHostService['metadataService'];
+        this.schemaService = designerHostService['schemaService'];
+    }
+
+    getTableInfo() {
+        return this.schemaService?.getTableInfoByViewModelId(this.viewModelId);
+    }
+
+    setDesignViewModelField(propertyData: any) {
+        const bindingFieldId = propertyData.binding && propertyData.binding.type === 'Form' && propertyData.binding.field;
+        // 视图模型中[字段更新时机]属性现在要在控件上维护，所以在控件上复制一份属性值
+        if (bindingFieldId) {
+            if (!this.designViewModelField) {
+                const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+                this.designViewModelField = dgViewModel.fields.find(f => f.id === bindingFieldId);
+            }
+            propertyData.updateOn = this.designViewModelField?.updateOn;
+        }
+    }
+
+    getBasicPropConfig(propertyData: any): any {
+        return {
+            description: 'Basic Information',
+            title: '基本信息',
+            properties: {
+                id: {
+                    description: '组件标识',
+                    title: '标识',
+                    type: 'string',
+                    readonly: true
+                },
+                type: {
+                    description: '组件类型',
+                    title: '控件类型',
+                    type: 'select',
+                    editor: {
+                        type: 'combo-list',
+                        textField: 'name',
+                        valueField: 'value',
+                        editable: false,
+                        data: [{ value: propertyData.type, name: DgControl[propertyData.type] && DgControl[propertyData.type].name }]
+                    }
+                }
+            }
+        };
+
+    }
+
+
+    protected getAppearanceConfig(propertyData = null): any {
+        return {
+            title: "外观",
+            description: "Appearance",
+            properties: {
+                class: {
+                    title: "class样式",
+                    type: "string",
+                    description: "组件的CSS样式",
+                    $converter: "/converter/appearance.converter"
+                },
+                style: {
+                    title: "style样式",
+                    type: "string",
+                    description: "组件的样式",
+                    $converter: "/converter/appearance.converter"
+                }
+            }
+        };
+    }
+
+    /**
+     * 
+     * @param propertyId 
+     * @param componentInstance 
+     * @returns 
+     */
+    public updateElementByParentContainer(propertyId: string, componentInstance: DesignerComponentInstance) {
+        // 1、定位控件父容器
+        const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema'];
+        if (!parentContainer) {
+            return;
+        }
+        const index = parentContainer.contents.findIndex(c => c.id === propertyId);
+        // 通过cloneDeep方式的触发更新
+        const controlSchema = cloneDeep(parentContainer.contents[index]);
+        // 5、替换控件
+        parentContainer.contents.splice(index, 1);
+        parentContainer.contents.splice(index, 0, controlSchema);
+    }
+
+}

package/templates/lib/components/common/src/entity/entity-schema.ts

@@ -0,0 +1,274 @@
+/* eslint-disable no-use-before-define */
+export interface FormSchema {
+    sourceUri: string;
+    id: string;
+    code: string;
+    name: string;
+    entities: FormSchemaEntity[];
+    variables: FormSchemaEntityField[];
+    eapiId: string;
+    extendProperties: { enableStdTimeFormat: boolean };
+    eapiCode?: string;
+    eapiName?: string;
+    eapiNameSpace?: string;
+    voPath?: string;
+    voNameSpace?: string;
+}
+
+/**
+ * 实体
+ */
+export interface FormSchemaEntity {
+    id: string;
+    code: string;
+    name: string;
+    label: string;
+    type: FormSchemaEntityType;
+}
+
+/**
+ * 字段类型枚举
+ */
+export enum FormSchemaEntityField$Type {
+    /**
+     * 简单类型字段
+     */
+    SimpleField = "SimpleField",
+    /**
+     * 关联/UDT类型字段
+     */
+    ComplexField = "ComplexField"
+}
+/**
+ * 字段编辑器对象
+ */
+export interface FormSchemaEntityFieldEditor {
+    $type: string;
+    [propName: string]: any;
+}
+export interface DesignViewModelField extends FormSchemaEntityField {
+    valueChanging: string;
+    valueChanged: string;
+    groupId: string;
+    groupName: string;
+    isSchemaRemoved?: boolean;
+    updateOn?: string;
+}
+/**
+ * 字段
+ */
+export interface FormSchemaEntityField {
+    $type: FormSchemaEntityField$Type;
+    id: string;
+    originalId: string;
+    code: string;
+    label: string;
+    bindingField: string;
+    name: string;
+    defaultValue?: any;
+    require?: boolean;
+    readonly?: boolean;
+    type: FormSchemaEntityFieldType;
+    editor?: FormSchemaEntityFieldEditor;
+    path?: string;
+    bindingPath?: string;
+    multiLanguage?: boolean;
+    expression?: any;
+}
+/**
+ * 字段类型对象中的类型枚举
+ */
+export enum FormSchemaEntityFieldType$Type {
+    /**
+     * 字符串
+     */
+    StringType = "StringType",
+    /**
+     * 备注
+     */
+    TextType = "TextType",
+    /**
+     * 数字（整数、浮点数）
+     */
+    NumericType = "NumericType",
+    /**
+     * 布尔
+     */
+    BooleanType = "BooleanType",
+    /**
+     * 日期
+     */
+    DateType = "DateType",
+    /**
+     * 日期时间
+     */
+    DateTimeType = "DateTimeType",
+    /**
+     * 枚举
+     */
+    EnumType = "EnumType",
+    /**
+     * 实体类
+     */
+    EntityType = "EntityType",
+    /**
+     * 分级码
+     */
+    HierarchyType = "HierarchyType",
+    /**
+     * 对象
+     */
+    ObjectType = "ObjectType",
+    /**
+     * 数字（大数据）
+     */
+    BigNumericType = "BigNumericType"
+}
+/**
+ * 字段类型中的名称
+ */
+export enum FormSchemaEntityFieldTypeName {
+    /**
+     * 简单类型字段
+     */
+    String = "String",
+    /**
+     * 日期时间
+     */
+    DateTime = "DateTime",
+    /**
+     * 日期
+     */
+    Date = "Date",
+    /**
+     * 枚举
+     */
+    Enum = "Enum",
+    /**
+     * 布尔
+     */
+    Boolean = "Boolean",
+    /**
+     * 数字
+     */
+    Number = "Number",
+    /**
+     * 备注
+     */
+    Text = "Text",
+    /**
+     * 大数字
+     */
+    BigNumber = "BigNumber"
+    /**
+     * 人员
+     */
+}
+/**
+ * 枚举类型
+ */
+export interface EnumData {
+    value: string;
+    name: string;
+}
+/**
+ * 实体
+ */
+export interface FormSchemaEntity {
+    id: string;
+    code: string;
+    name: string;
+    label: string;
+    type: FormSchemaEntityType;
+}
+/**
+ * 实体类型对象
+ */
+export interface FormSchemaEntityType {
+    $type: string;
+    name: string;
+    primary: string;
+    fields: FormSchemaEntityField[];
+    entities?: FormSchemaEntity[];
+    displayName?: string;
+}
+/**
+ * 字段类型对象
+ */
+export interface FormSchemaEntityFieldType {
+    $type: FormSchemaEntityFieldType$Type;
+    name: FormSchemaEntityFieldTypeName | any;
+    length?: number;
+    precision?: number;
+    valueType?: FormSchemaEntityFieldType;
+    enumValues?: EnumData[];
+    fields?: FormSchemaEntityField[];
+    displayName?: string;
+    primary?: string;
+    entities?: FormSchemaEntity[];
+    elementType?: GSPElementDataType;
+    extendProperty?: any;
+}
+/**
+ * 字段数据类型
+ */
+export enum GSPElementDataType {
+    /**
+     * 文本
+     */
+    String = "String",
+    /**
+     * 备注
+     */
+    Text = "Text",
+    /**
+     * 整数
+     */
+    Integer = "Integer",
+    /**
+     * 浮点数
+     */
+    Decimal = "Decimal",
+    /**
+     * 布尔型
+     */
+    Boolean = "Boolean",
+    /**
+     * 日期型
+     */
+    Date = "Date",
+    /**
+     * 日期时间型
+     */
+    DateTime = "DateTime",
+    /**
+     * 二进制
+     */
+    Binary = "Binary"
+}
+/**
+ * dom Json ViewModel 节点中states实体
+ */
+export interface FormVariable {
+    id: string;
+    code: string;
+    name: string;
+    value?: any;
+    type: string;
+    category: string;
+    fields?: any[];
+    defaultValue?: any;
+}
+/**
+ * 表单变量
+ */
+export interface DesignFormVariable extends FormVariable {
+    /**
+     * 分组ID
+     */
+    groupId: string;
+    /**
+     * 分组名称
+     */
+    groupName: string;
+}