@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.tsx

@@ -0,0 +1,72 @@
+import { CTX, IControlController } from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { defineComponent, inject, PropType, VNode } from 'vue';
+import { useNamespace, useSemanticNode } from '../../use';
+import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+import './panel-ctrl-pos.scss';
+
+/**
+ * 面板部件占位
+ * @primary
+ * @description 面板中的动态部件占位组件，用于绘制实体部件。
+ */
+export const PanelCtrlPos = defineComponent({
+  name: 'IBizPanelCtrlPos',
+  props: {
+    /**
+     * @description 面板部件占位模型数据
+     */
+    modelData: {
+      type: Object as PropType<IPanelCtrlPos>,
+      required: true,
+    },
+    /**
+     * @description 面板部件占位控制器
+     */
+    controller: {
+      type: Object as PropType<PanelCtrlPosController>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-ctrl-pos');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+    // 上下文里提前预告部件
+    const ctx = inject('ctx') as CTX;
+    ctx.evt.on('onRegister', (name, c) => {
+      if (name === props.modelData.id) {
+        props.controller.bindControl(c as IControlController);
+      }
+    });
+
+    return { ns, semanticClass, semanticStyle };
+  },
+  render() {
+    const { state } = this.controller;
+    let content: VNode | VNode[] | undefined;
+
+    if (this.$slots.default) {
+      content = this.$slots.default();
+    }
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.ns.m(this.modelData.id),
+          this.semanticClass('root'),
+          ...this.controller.containerClass,
+          this.ns.is('hidden', !state.visible),
+        ]}
+        style={this.semanticStyle('root')}
+      >
+        {content ||
+          (ibiz.env.dev
+            ? ibiz.i18n.t('vue3Util.panelComponent.noProvidedSlot', {
+                id: this.modelData.id,
+              })
+            : '')}
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-ctrl-view-page-caption/index.ts

@@ -0,0 +1,18 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelCtrlViewPageCaption } from './panel-ctrl-view-page-caption';
+import { PanelCtrlViewPageProvider } from './panel-ctrl-view-page-caption.provider';
+
+export const IBizPanelCtrlViewPageCaption = withInstall(
+  PanelCtrlViewPageCaption,
+  function (v: App) {
+    v.component(PanelCtrlViewPageCaption.name!, PanelCtrlViewPageCaption);
+    registerPanelItemProvider(
+      'CTRLPOS_VIEW_PAGECAPTION',
+      () => new PanelCtrlViewPageProvider(),
+    );
+  },
+);
+
+export default IBizPanelCtrlViewPageCaption;

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.controller.ts

@@ -0,0 +1,32 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { viewPageCaptionState } from './panel-ctrl-view-page-caption.state';
+
+export class PanelCtrlViewPageCaptionController extends PanelItemController {
+  /**
+   * @description 视图标题状态
+   * @exposedoc
+   * @type {PanelFieldState}
+   * @memberof PanelCtrlViewPageCaptionController
+   */
+  declare state: viewPageCaptionState;
+
+  /**
+   * 初始化
+   *
+   * @protected
+   * @return {*}  {Promise<void>}
+   * @memberof PanelCtrlViewPageCaptionController
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    this.state.caption = this.panel.view.model.caption || '';
+    this.panel.view.evt.on(
+      'onViewInfoChange',
+      ({ caption: _caption, dataInfo }) => {
+        this.state.caption = `${this.panel.view.model.caption}${
+          dataInfo ? `-${dataInfo}` : ''
+        }`;
+      },
+    );
+  }
+}

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { PanelCtrlViewPageCaptionController } from './panel-ctrl-view-page-caption.controller';
+
+/**
+ * 面板控件占位适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelCtrlPosProvider
+ * @implements {EditorProvider}
+ */
+export class PanelCtrlViewPageProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelCtrlViewPageCaption';
+
+  async createController(
+    panelItem: IPanelCtrlPos,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelCtrlViewPageCaptionController> {
+    const c = new PanelCtrlViewPageCaptionController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.scss

@@ -0,0 +1,13 @@
+@include b('panel-ctrl-view-page-caption') {
+  @include when(mob) {
+    @include b(panel-ctrl-view-page-caption-content) { 
+      @include utils-ellipsis; 
+
+      font-size: getCssVar(view-page-caption, font-size);
+      font-weight: getCssVar(view-page-caption, font-weight);
+      line-height: getCssVar(view-page-caption, line-height);
+      color: getCssVar(view-page-caption, color);
+      text-align: getCssVar(view-page-caption, text-align); 
+    }
+  }
+}

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.state.ts

@@ -0,0 +1,17 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * @description 视图标题状态
+ * @export
+ * @class viewPageCaptionState
+ * @extends {PanelItemState}
+ */
+export class viewPageCaptionState extends PanelItemState {
+  /**
+   * @description 标题
+   * @exposedoc
+   * @type {string}
+   * @memberof viewPageCaptionState
+   */
+  caption: string = '';
+}

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.tsx

@@ -0,0 +1,77 @@
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { computed, defineComponent, PropType } from 'vue';
+import { useNamespace, useSemanticNode } from '../../use';
+import { PanelCtrlViewPageCaptionController } from './panel-ctrl-view-page-caption.controller';
+import './panel-ctrl-view-page-caption.scss';
+
+/**
+ * 视图标题
+ * @primary
+ * @description 视图的标题组件，只存在于视图布局面板中。
+ */
+export const PanelCtrlViewPageCaption = defineComponent({
+  name: 'IBizPanelCtrlViewPageCaption',
+  props: {
+    /**
+     * @description 视图标题模型
+     */
+    modelData: {
+      type: Object as PropType<IPanelCtrlPos>,
+      required: true,
+    },
+    /**
+     * @description 视图标题控制器
+     */
+    controller: {
+      type: Object as PropType<PanelCtrlViewPageCaptionController>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-ctrl-view-page-caption');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    const classArr = computed(() => {
+      const { id } = props.modelData;
+      const result: Array<string | false> = [
+        ns.b(),
+        ns.m(id),
+        ns.is('mob', ibiz.env.isMob),
+      ];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+
+    return {
+      ns,
+      classArr,
+      semanticClass,
+      semanticStyle,
+    };
+  },
+  render() {
+    // 编辑器内容
+    let editor = null;
+    if (this.controller.data) {
+      editor = (
+        <span
+          class={[this.ns.b('content'), this.semanticClass('content')]}
+          style={this.semanticStyle('content')}
+        >
+          {this.controller.state.caption}
+        </span>
+      );
+    }
+
+    return (
+      <div
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
+        onClick={event => this.controller.onClick(event)}
+      >
+        {editor}
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-field/index.ts

@@ -0,0 +1,14 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { withInstall } from '../../util';
+import { PanelField } from './panel-field';
+import { PanelFieldProvider } from './panel-field.provider';
+
+export * from './panel-field.controller';
+
+export const IBizPanelField = withInstall(PanelField, function (v: App) {
+  v.component(PanelField.name!, PanelField);
+  registerPanelItemProvider('FIELD', () => new PanelFieldProvider());
+});
+
+export default IBizPanelField;

package/src/panel-component/panel-field/panel-field.controller.ts

@@ -0,0 +1,272 @@
+import {
+  getEditorProvider,
+  IEditorContainerController,
+  IEditorController,
+  IEditorProvider,
+  PanelItemController,
+  PanelItemEventName,
+} from '@ibiz-template/runtime';
+import { IPanelField } from '@ibiz/model-core';
+import { PanelFieldState } from './panel-field.state';
+
+/**
+ * 面板属性项控制器
+ *
+ * @export
+ * @class PanelFieldController
+ * @extends {PanelItemController<IPanelField>}
+ */
+export class PanelFieldController
+  extends PanelItemController<IPanelField>
+  implements IEditorContainerController
+{
+  /**
+   * @description 面板属性项控制器状态
+   * @exposedoc
+   * @type {PanelFieldState}
+   * @memberof PanelFieldController
+   */
+  declare state: PanelFieldState;
+
+  /**
+   * @description 单位名称
+   * @exposedoc
+   * @type {(string | undefined)}
+   * @memberof PanelFieldController
+   */
+  unitName: string | undefined = undefined;
+
+  /**
+   * @description 可冒泡点击事件的编辑器类型
+   * @static
+   * @memberof PanelFieldController
+   */
+  static enableClickType: string[] = [
+    'SPAN',
+    'SPAN_LINK',
+    'RAW',
+    'MOB2DBARCODEREADER',
+    'FIELD_CAROUSEL_PICTURE',
+    'FIELD_IMAGE_PICTURE_ONE',
+  ];
+
+  /**
+   * @exposedoc
+   * @description 值格式化
+   * @readonly
+   * @type {(string | undefined)}
+   * @memberof PanelFieldController
+   */
+  get valueFormat(): string | undefined {
+    return this.model.valueFormat;
+  }
+
+  /**
+   * @exposedoc
+   * @description 数据类型
+   * @readonly
+   * @type {(number | undefined)}
+   * @memberof PanelFieldController
+   */
+  get dataType(): number | undefined {
+    return undefined;
+  }
+
+  /**
+   * @exposedoc
+   * @description 上下文
+   * @readonly
+   * @type {IContext}
+   * @memberof PanelFieldController
+   */
+  get context(): IContext {
+    return this.panel.context;
+  }
+
+  /**
+   * @exposedoc
+   * @description 视图参数
+   * @readonly
+   * @type {IParams}
+   * @memberof PanelFieldController
+   */
+  get params(): IParams {
+    return this.panel.params;
+  }
+
+  /**
+   * @exposedoc
+   * @description 父容器数据对象数据
+   * @readonly
+   * @type {IData}
+   * @memberof PanelFieldController
+   */
+  get data(): IData {
+    return this.dataParent.data;
+  }
+
+  /**
+   * @exposedoc
+   * @description 面板属性成员的值
+   * @readonly
+   * @type {(string | number)}
+   * @memberof PanelFieldController
+   */
+  get value(): string | number {
+    return this.data[this.model.id!];
+  }
+
+  /**
+   * @exposedoc
+   * @description 编辑器控制器
+   * @type {IEditorController}
+   * @memberof PanelFieldController
+   */
+  editor?: IEditorController;
+
+  /**
+   * @description 编辑器适配器
+   * @type {IEditorProvider}
+   * @memberof PanelFieldController
+   */
+  editorProvider?: IEditorProvider;
+
+  protected createState(): PanelFieldState {
+    return new PanelFieldState(this.parent?.state);
+  }
+
+  /**
+   * @description 值校验
+   * @returns {*}  {Promise<boolean>}
+   * @memberof PanelFieldController
+   */
+  async validate(): Promise<boolean> {
+    // 目前仅支持空值校验
+    if (this.state.visible && this.state.required && !this.value) {
+      this.state.error =
+        this.editor?.model.placeHolder ||
+        ibiz.i18n.t('vue3Util.panelComponent.cannotEmpty', {
+          caption: this.model.caption,
+        });
+      return false;
+    }
+    this.state.error = null;
+    return true;
+  }
+
+  /**
+   * @description 初始化
+   * @protected
+   * @returns {*}  {Promise<void>}
+   * @memberof PanelFieldController
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    // 空输入默认值
+    this.state.required = !this.model.allowEmpty;
+    if (
+      this.context.srfreadonly !== true &&
+      this.context.srfreadonly !== 'true' &&
+      this.model.editor?.readOnly
+    ) {
+      this.state.readonly = this.model.editor?.readOnly || false;
+    }
+    // 初始化编辑器控制器,除了隐藏都会需要适配器
+    if (this.model.editor && this.model.editor.editorType !== 'HIDDEN') {
+      this.editorProvider = await getEditorProvider(
+        this.model.editor,
+        this.panel.model,
+      );
+      if (this.editorProvider) {
+        this.editor = await this.editorProvider.createController(
+          this.model.editor,
+          this,
+        );
+      }
+    }
+  }
+
+  /**
+   * @exposedoc
+   * @description 设置面板数据的值
+   * @param {unknown} value
+   * @param {string} [name]
+   * @returns {*}  {Promise<void>}
+   * @memberof PanelFieldController
+   */
+  async setDataValue(value: unknown, name?: string): Promise<void> {
+    const { id } = this.model;
+    name = name || id;
+    if (this.dataParent.setDataValue) {
+      await this.dataParent.setDataValue(name!, value);
+    }
+    await this.validate();
+    this.panel.evt.emit('onPanelItemEvent', {
+      panelItemName: this.model.id!,
+      panelItemEventName: PanelItemEventName.CHANGE,
+    });
+  }
+
+  /**
+   * 聚焦事件
+   * @author lxm
+   * @date 2023-10-11 05:03:26
+   */
+  onFocus(event: MouseEvent): void {
+    this.panel.evt.emit('onPanelItemEvent', {
+      panelItemName: this.model.id!,
+      panelItemEventName: PanelItemEventName.FOCUS,
+      event,
+    });
+  }
+
+  /**
+   * 失焦事件
+   * @author lxm
+   * @date 2023-10-11 05:03:26
+   */
+  onBlur(event: MouseEvent): void {
+    this.panel.evt.emit('onPanelItemEvent', {
+      panelItemName: this.model.id!,
+      panelItemEventName: PanelItemEventName.BLUR,
+      event,
+    });
+  }
+
+  /**
+   * 回车事件
+   * @author lxm
+   * @date 2023-10-11 05:03:26
+   */
+  onEnter(event: MouseEvent): void {
+    this.panel.evt.emit('onPanelItemEvent', {
+      panelItemName: this.model.id!,
+      panelItemEventName: PanelItemEventName.ENTER,
+      event,
+    });
+  }
+
+  /**
+   * @description 点击事件
+   * @param {MouseEvent} [event]
+   * @memberof PanelFieldController
+   */
+  onClick(event?: MouseEvent): void {
+    // 在移动端环境下，仅在以下情况下可向上冒泡
+    // 只读，禁用态时
+    // 或者编辑器不会抛值
+    if (ibiz.env.isMob) {
+      const disableEdit = this.state.readonly || this.state.disabled;
+      if (
+        !disableEdit &&
+        this.editor?.model.editorType &&
+        !PanelFieldController.enableClickType.includes(
+          this.editor.model.editorType,
+        )
+      ) {
+        event?.stopPropagation();
+      }
+    }
+    super.onClick(event);
+  }
+}

package/src/panel-component/panel-field/panel-field.provider.ts

@@ -0,0 +1,28 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelFieldController } from './panel-field.controller';
+
+/**
+ * 面板属性适配器
+ *
+ * @export
+ * @class PanelFieldProvider
+ * @implements {IPanelItemProvider}
+ */
+export class PanelFieldProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelField';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelFieldController> {
+    const c = new PanelFieldController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/panel-field/panel-field.scss

@@ -0,0 +1,79 @@
+/* stylelint-disable declaration-empty-line-before */
+/* stylelint-disable order/properties-order */
+/* stylelint-disable selector-class-pattern */
+
+// 面板属性样式
+$panel-field: (
+  'icon-margin': 6px,  // 字段图标外边距
+);
+
+// 面板属性错误提示样式
+$panel-field-error: (
+  'font-size': getCssVar('font-size','small'),         // 错误提示字体大小
+  'padding-top': getCssVar('spacing','super-tight'),   // 错误提示顶部内边距
+  'color': getCssVar(color, danger),                     // 错误提示文本色
+);
+
+// 三块定义该变量的地方，要改的话一起改！
+// form-item, panel-field, grid-edit-item
+// 表单项输入控件样式
+$form-item: (
+  'label-color': getCssVar(color, text, 1),             // 标签字体色
+  'text-color': getCssVar(color, text, 2),              // 输入文本色
+  'hover-color': getCssVar(color, text, 0),             // 悬浮文本色
+  'hover-bg-color': getCssVar(color, fill, 1),          // 悬浮背景色
+  'readonly-color': getCssVar(color, disabled, text),   // 只读状态文本色
+  'border-color': transparent,                          // 边框色
+  'font-size': getCssVar(font-size, regular),           // 字体大小
+  'placeholder-color': getCssVar(color, text, 3),       // 占位符文本色
+  'disabled-color': getCssVar(color, disabled, text),   // 禁用状态文本色
+  'disabled-bg-color': getCssVar(color, disabled, fill), // 禁用状态背景色
+  'disabled-border-color': getCssVar(color, disabled, border), // 禁用状态边框色
+  'active-bg': getCssVar(color, fill, 2),               // 激活态背景色
+  'active-border': getCssVar(active, bg),               // 激活态边框色
+  'focus-bg': getCssVar(color, fill, 0),                // 聚焦态背景色
+  'focus-border': getCssVar(color, focus, border),      // 聚焦态边框色
+  'line-height': getCssVar(editor,default,line-height), // 行高
+  'font-weight': getCssVar(font-weight, regular),       // 字体粗细
+  'hover-edit-padding': getCssVar('spacing','none') 11px, // 悬浮编辑态内边距
+);
+
+@include b(panel-field) {
+  @include set-component-css-var('form-item', $form-item);
+  @include set-component-css-var('panel-field', $panel-field);
+  @include set-component-css-var('panel-field-error', $panel-field-error);
+
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  @include e(error) {
+    left: 0;
+    top: 100%;
+    line-height: 1;
+    font-size: getCssVar('panel-field', error, 'font-size');
+    padding-top: getCssVar('panel-field', error, 'padding-top');
+    position: absolute;
+    color: getCssVar('panel-field', error, 'color');
+  }
+
+  @include when(error) {
+    .el-input__wrapper {
+      box-shadow: 0 0 0 1px getCssVar('panel-field', error, 'color') inset;
+    }
+  }
+
+  @include b(panel-field-content) {
+    line-height: inherit;
+  }
+
+  @include when(mob) {
+    #{getCssVarName('panel-field', 'icon-margin')}: rem(6px);
+    #{getCssVarName(editor, default, text-align)}: left;
+    #{getCssVarName(editor, default, flex-justify-content)}: flex-start;
+
+    @include b(panel-field-content) {
+      line-height: getCssVar(editor, default, line-height);
+    }
+  }
+}

package/src/panel-component/panel-field/panel-field.state.ts

@@ -0,0 +1,17 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * @description 面板属性状态
+ * @export
+ * @class PanelFieldState
+ * @extends {PanelItemState}
+ */
+export class PanelFieldState extends PanelItemState {
+  /**
+   * @exposedoc
+   * @description 错误信息
+   * @type {(string | null)}
+   * @memberof PanelFieldState
+   */
+  error: string | null = null;
+}