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

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

@@ -0,0 +1,285 @@
+import { BaseControlProperty } from './base-property';
+import { DesignerComponentInstance } from "@/components/designer-canvas";
+import { SchemaDOMMapping } from "@/components/property-panel";
+import { canvasChanged } from "@/components/designer-canvas/src/composition/designer-canvas-changed";
+import { FormSchemaEntityFieldType$Type } from './entity-schema';
+
+export class InputBaseProperty extends BaseControlProperty {
+    constructor(componentId: string, designerHostService: any) {
+        super(componentId, designerHostService);
+    }
+
+    public getPropertyConfig(propertyData: any, componentInstance: DesignerComponentInstance) {
+        // 基本信息
+        this.propertyConfig.categories['basic'] = this.getBasicProperties(propertyData, componentInstance);
+        // 外观
+        this.propertyConfig.categories['appearance'] = this.getAppearanceProperties(propertyData, componentInstance);
+        // 编辑器
+        this.propertyConfig.categories['editor'] = this.getEditorProperties(propertyData);
+        return this.propertyConfig;
+    }
+
+    public getBasicProperties(propertyData, componentInstance): any {
+        const self = this;
+        this.setDesignViewModelField(propertyData);
+        return {
+            description: 'Basic Information',
+            title: '基本信息',
+            properties: {
+                id: {
+                    description: '组件标识',
+                    title: '标识',
+                    type: 'string',
+                    readonly: true
+                },
+                type: {
+                    description: '编辑器类型',
+                    title: '编辑器类型',
+                    type: 'string',
+                    refreshPanelAfterChanged: true,
+                    $converter: '/converter/change-editor.converter',
+                    editor: {
+                        type: 'combo-list',
+                        textField: 'value',
+                        valueField: 'key',
+                        editable: false,
+                        data: self.designViewModelField ? SchemaDOMMapping.getEditorTypesByMDataType(self.designViewModelField.type?.name) : SchemaDOMMapping.getAllInputTypes()
+                    }
+                },
+                label: {
+                    title: "标签",
+                    type: "string",
+                    $converter: '/converter/form-group-label.converter'
+                },
+                binding: {
+                    description: "绑定的表单字段",
+                    title: "绑定",
+                    editor: {
+                        type: "binding-selector",
+                        bindingType: { "enable": false },
+                        editorParams: {
+                            componentSchema: propertyData,
+                            needSyncToViewModel: true,
+                            viewModelId: this.viewModelId,
+                            designerHostService: this.designerHostService,
+                            disableOccupiedFields: true
+                        },
+                        textField: 'bindingField'
+                    }
+                }
+            },
+            setPropertyRelates(changeObject, prop) {
+                if (!changeObject) {
+                    return;
+                }
+                switch (changeObject && changeObject.propertyID) {
+                    case 'type': {
+                        self.changeControlType(propertyData, changeObject, componentInstance);
+                        break;
+                    }
+                    case 'label': {
+                        changeObject.needRefreshControlTree = true;
+                        break;
+                    }
+                }
+            }
+        };
+    }
+    public getAppearanceProperties(propertyData, componentInstance): any {
+
+        const self = this;
+        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"
+                }
+            },
+            setPropertyRelates(changeObject, prop) {
+                if (!changeObject) {
+                    return;
+                }
+                switch (changeObject && changeObject.propertyID) {
+                    case 'class':
+                        self.updateElementByParentContainer(propertyData.id, componentInstance);
+                        break;
+                }
+
+            }
+        };
+    };
+
+    public getEditorProperties(propertyData): any {
+        return this.getComponentConfig(propertyData);
+    }
+
+
+    /**
+     * 卡片控件：切换控件类型后事件
+     * @param propertyData 控件DOM属性
+     * @param newControlType 新控件类型
+     */
+    private changeControlType(propertyData, changeObject, componentInstance: DesignerComponentInstance) {
+        const newControlType = changeObject.propertyValue;
+
+        // 1、定位控件父容器
+        const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema'];
+        if (!parentContainer) {
+            return;
+        }
+
+        const index = parentContainer.contents.findIndex(c => c.id === propertyData.id);
+        const oldControl = parentContainer.contents[index];
+
+        let newControl;
+        // 2、记录绑定字段viewModel的变更
+        if (this.designViewModelField) {
+            const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+            dgViewModel.changeField(this.designViewModelField.id, {
+                editor: {
+                    $type: newControlType
+                },
+                name: this.designViewModelField.name,
+                require: this.designViewModelField.require,
+                readonly: this.designViewModelField.readonly
+            }, false);
+            // 3、创建新控件
+            newControl = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, newControlType);
+        }
+        if (!newControl) {
+            newControl = this.controlCreatorUtils.createFormGroupWithoutField(newControlType);
+        }
+        //  4、保留原id样式等属性
+        Object.assign(newControl, {
+            id: oldControl.id,
+            appearance: oldControl.appearance,
+            size: oldControl.size,
+            label: oldControl.label,
+            binding: oldControl.binding,
+            visible: oldControl.visible
+        });
+        Object.assign(newControl.editor, {
+            isTextArea: newControl.isTextArea && oldControl.isTextArea,
+            placeholder: oldControl.editor?.placeholder,
+            holdPlace: oldControl.editor?.holdPlace,
+            readonly: oldControl.editor?.readonly,
+            required: oldControl.editor?.required,
+        });
+
+        // 5、替换控件
+        parentContainer.contents.splice(index, 1);
+        parentContainer.contents.splice(index, 0, newControl);
+        componentInstance.schema = Object.assign(oldControl, newControl);
+
+        // 6、暂时移除旧控件的选中样式（后续考虑更好的方式）
+        Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf<HTMLElement>).forEach(
+            (element: HTMLElement) => element.classList.remove('dgComponentSelected')
+        );
+
+        Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf<HTMLElement>).forEach(
+            (element: HTMLElement) => element.classList.remove('dgComponentFocused')
+        );
+        // 7、触发刷新
+        canvasChanged.value++;
+
+    }
+
+    public getComponentConfig(propertyData, info = {}, properties = {}, setPropertyRelates?: any) {
+        const editorBasic = Object.assign({
+            description: "编辑器",
+            title: "编辑器",
+            type: "input-group",
+            $converter: "/converter/property-editor.converter"
+        }, info);
+
+        const editorProperties = Object.assign({
+            readonly: {
+                description: "",
+                title: "只读",
+                type: "boolean",
+                editor: {
+                    enableClear: true,
+                    editable: true
+                }
+            },
+            disabled: {
+                description: "",
+                title: "禁用",
+                type: "boolean",
+                visible: false
+            },
+            required: {
+                description: "",
+                title: "必填",
+                type: "boolean",
+                visible: false
+            },
+            placeholder: {
+                description: "空值时，输入控件内的占位文本",
+                title: "提示文本",
+                type: "string",
+                visible: false
+
+            }
+        }, properties);
+
+        return { ...editorBasic, properties: { ...editorProperties }, setPropertyRelates };
+
+    }
+
+
+    /**
+     * 枚举项编辑器
+     * @param propertyData 
+     * @param valueField 
+     * @param textField 
+     * @returns 
+     */
+    protected getItemCollectionEditor(propertyData, valueField, textField) {
+        valueField = valueField || 'value';
+        textField = textField || 'name';
+        return {
+            editor: {
+                columns: [
+                    { field: valueField, title: '值', dataType: 'string' },
+                    { field: textField, title: '名称', dataType: 'string' },
+                    { field: 'disabled', title: '禁用', visible: false, dataType: 'boolean', editor: { type: 'switch' } },
+                ],
+                type: "item-collection-editor",
+                valueField: valueField,
+                nameField: textField,
+                requiredFields: [valueField, textField],
+                uniqueFields: [valueField, textField],
+                readonly: this.checkEnumDataReadonly(propertyData)
+            }
+        };
+    }
+    /**
+     * 判断枚举数据是否只读
+     * 1、没有绑定信息或者绑定变量，可以新增、删除、修改
+     * 2、绑定类型为字段，且字段为枚举字段，则不可新增、删除、修改枚举值。只能从be修改然后同步到表单上。
+     * @param propertyData 下拉框控件属性值
+     */
+    private checkEnumDataReadonly(propertyData: any): boolean {
+        // 没有绑定信息或者绑定变量
+        if (!propertyData.binding || propertyData.binding.type !== 'Form') {
+            return false;
+        }
+        if (this.designViewModelField && this.designViewModelField.type &&
+            this.designViewModelField.type.$type === FormSchemaEntityFieldType$Type.EnumType) {
+            // 低代码、零代码，枚举字段均不可以改
+            return true;
+        }
+        return false;
+    }
+}

package/templates/lib/components/common/src/style/animation/index.scss

@@ -0,0 +1,150 @@
+@keyframes fm-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fm-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fm-fade {
+  &-enter-active {
+    animation: 0.3s fm-fade-in both ease-out;
+  }
+
+  &-leave-active {
+    animation: 0.3s fm-fade-out both ease-in;
+  }
+}
+
+.fm-slide-up {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fm-slide-down {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fm-slide-left {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fm-slide-right {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fm-slide-up-enter-active,
+.fm-slide-down-enter-active,
+.fm-slide-left-enter-active,
+.fm-slide-right-enter-active {
+  transition-timing-function: ease-out;
+}
+.fm-slide-up-leave-active,
+.fm-slide-down-leave-active,
+.fm-slide-left-leave-active,
+.fm-slide-right-leave-active {
+  transition-timing-function: ease-in;
+}
+
+.fm-slide-in-enter-active,
+.fm-slide-in-leave-active,
+.fm-slide-out-enter-active,
+.fm-slide-out-leave-active {
+  will-change: transform;
+  transition: all 0.3s;
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  position: absolute;
+  backface-visibility: hidden;
+  perspective: 1000;
+}
+
+.fm-slide-in-leave-to,
+.fm-slide-out-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.fm-slide-in-enter-from,
+.fm-slide-out-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+@keyframes fm-drop-down-in {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fm-drop-down-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+.fm-drop-down {
+  &-enter-active {
+    animation: 0.3s fm-drop-down-in both ease-out;
+  }
+  &-leave-active {
+    animation: 0.3s fm-drop-down-out both ease-in;
+  }
+}
+@keyframes fm-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120
+  }
+}
+@keyframes fm-rotate {
+  from {
+    -webkit-transform: rotate(0);
+    transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}

package/templates/lib/components/common/src/style/base.scss

@@ -0,0 +1,63 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
+    "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
+    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
+    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
+    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

package/templates/lib/components/common/src/style/icon.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'farrisMobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url(./fonts/farris-mobile-icon.ttf) format('truetype');
+}

package/templates/lib/components/common/src/style/index.scss

@@ -0,0 +1,4 @@
+// @import './base';
+// @import './icon';
+// @import './variables';
+// @import './animation';

package/templates/lib/components/common/src/style/mixins/bem.scss

@@ -0,0 +1,204 @@
+/*  
+基于 BEM（Block Element Modifier）命名规范的 SCSS 混合（mixins）和辅助函数，用于生成符合 BEM 规范的 CSS 类名
+*/
+
+// 命名空间前缀，所有类名都会以 fm- 开头
+$namespace: 'fm';
+// 元素分隔符，用于连接 Block 和 Element，例如 fm-block__element
+$element-separator: '__';
+//修饰符分隔符，用于连接 Block/Element 和 Modifier，例如 fm-block--modifier
+$modifier-separator :'--';
+//状态前缀，用于标识组件的状态，例如 is-active
+$state-prefix: 'is-';
+
+/**
+  功能：将传入的选择器转换为字符串形式，并去掉首尾的引号。
+  用途：在后续函数中用于解析选择器内容。
+*/
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+/*
+  功能：检查选择器是否包含修饰符分隔符 --。
+  用途：判断是否需要特殊处理修饰符规则
+*/
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：检查选择器是否包含状态前缀 .is-。
+  用途：判断是否需要处理状态相关的规则。
+*/
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：检查选择器是否包含伪类（如 :hover、:active 等）。
+  用途：判断是否需要处理伪类规则。
+*/
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：综合判断选择器是否包含修饰符、状态或伪类。
+  用途：决定是否需要特殊嵌套规则。
+*/
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+/*
+  功能：生成 Block 的基础类名。
+  用法：
+    输入： @include b(button) { color: red; }
+    输出：.fm-button { color: red; }
+*/
+@mixin b($block) {
+
+  $B: #{$namespace + '-' + $block} !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/*
+  功能：生成 Element 的类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include e(text) {
+          font-size: 14px;
+        }
+      }
+    输出：
+      .fm-button__text {
+        font-size: 14px;
+      }
+    
+*/
+@mixin e($element, $inheritParent: false) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  $insertSelector: "";
+
+  @each $unit in $element {
+    @if $inheritParent {
+      $currentSelector: #{$currentSelector + $selector + $element-separator + $unit + ","};
+    } @else {
+      $currentSelector: #{$currentSelector + "." + $B + $element-separator + $insertSelector + $unit + ","};
+    }
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+/*
+  功能：生成 Modifier 的类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include m(disabled) {
+          opacity: 0.5;
+        }
+      }
+    输出：
+      .fm-button--disabled {
+        opacity: 0.5;
+      }
+    
+*/
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+/*
+  功能：生成根节点上的 Modifier 类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include e(text) {
+          @include root-m(disabled) {
+            pointer-events: none;
+          }
+        }
+      }
+      
+    输出：
+      .fm-button--disabled {
+        pointer-events: none;
+      }
+*/
+@mixin root-m($modifier) {
+  $selector: #{"." + $B};
+  $currentSelector: "";
+
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +  & + $selector + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}