@ibiz-template/vue3-util 0.2.11 → 0.2.13

package/src/panel-component/panel-container/panel-container.tsx

@@ -0,0 +1,72 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { useNamespace } from '../../use';
+import { PanelContainerController } from './panel-container.controller';
+import './panel-container.scss';
+
+export const PanelContainer = defineComponent({
+  name: 'IBizPanelContainer',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: PanelContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-container');
+    const { id } = props.modelData;
+
+    // 类名控制
+    const classArr = computed(() => {
+      let result: Array<string | false> = [ns.b(), ns.m(id)];
+      result = [
+        ...result,
+        ...props.controller.containerClass,
+        ns.is('hidden', !props.controller.state.visible),
+      ];
+      return result;
+    });
+
+    return { ns, classArr };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    const content = (
+      <iBizRow slot='content' layout={this.modelData.layout}>
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+    return (
+      <div
+        class={this.classArr}
+        onClick={() => {
+          this.controller.onClick();
+        }}
+      >
+        {this.controller.model.cssStyle ? (
+          <style type='text/css'>{this.controller.model.cssStyle}</style>
+        ) : null}
+        {content}
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-ctrl-pos/index.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelCtrlPos } from './panel-ctrl-pos';
+import { PanelCtrlPosProvider } from './panel-ctrl-pos.provider';
+import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+
+export { PanelCtrlPosController };
+export const IBizPanelCtrlPos = withInstall(PanelCtrlPos, function (v: App) {
+  v.component(PanelCtrlPos.name, PanelCtrlPos);
+  registerPanelItemProvider('CTRLPOS', () => new PanelCtrlPosProvider());
+});
+
+export default IBizPanelCtrlPos;

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.controller.ts

@@ -0,0 +1,53 @@
+import {
+  IControlController,
+  PanelItemController,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+
+/**
+ * 面板控件占位控制器
+ *
+ * @author lxm
+ * @date 2023-02-07 06:05:23
+ * @export
+ * @class PanelButtonController
+ * @extends {PanelItemController}
+ */
+export class PanelCtrlPosController extends PanelItemController<IPanelCtrlPos> {
+  /**
+   * 面板控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:59
+   * @type {PanelController}
+   */
+  declare panel: ViewLayoutPanelController;
+
+  /**
+   * 部件占位对应部件控制器
+   * @author lxm
+   * @date 2023-08-09 10:41:38
+   * @type {IControlController}
+   */
+  control?: IControlController;
+
+  /**
+   * 绑定部件控制器
+   * @author lxm
+   * @date 2023-08-09 10:42:30
+   * @param {IControlController} controller
+   */
+  bindControl(controller: IControlController): void {
+    this.control = controller;
+
+    // 绑定部件，并监听所有事件，通过面板转发部件的事件。
+    controller.evt.onAll((eventName, event) => {
+      this.panel.evt.emit('onControlEvent', {
+        triggerControlName: this.model.id!,
+        triggerEventName: eventName,
+        triggerEvent: event,
+      });
+    });
+  }
+}

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.provider.ts

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

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

@@ -0,0 +1,8 @@
+@include b(panel-ctrl-pos) {
+  width: 100%;
+  height: 100%;
+
+  @include when(hidden) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { CTX, IControlController } from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { defineComponent, inject, PropType, VNode } from 'vue';
+import { useNamespace } from '../../use';
+import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+import './panel-ctrl-pos.scss';
+
+export const PanelCtrlPos = defineComponent({
+  name: 'IBizPanelCtrlPos',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelCtrlPos>,
+      required: true,
+    },
+    controller: {
+      type: Object as PropType<PanelCtrlPosController>,
+      required: true,
+    },
+  },
+  setup(props) {
+    // 上下文里提前预告部件
+    const ctx = inject('ctx') as CTX;
+    ctx.evt.on('onRegister', (name, c) => {
+      if (name === props.modelData.id) {
+        props.controller.bindControl(c as IControlController);
+      }
+    });
+
+    const ns = useNamespace('panel-ctrl-pos');
+    return { ns };
+  },
+  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.controller.containerClass,
+          this.ns.is('hidden', !state.visible),
+        ]}
+      >
+        {content || (ibiz.env.dev ? `未提供${this.modelData.id}插槽` : '')}
+      </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,130 @@
+import {
+  getEditorProvider,
+  IEditorContainerController,
+  IEditorController,
+  IEditorProvider,
+  PanelItemController,
+} 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
+{
+  declare state: PanelFieldState;
+
+  unitName: string | undefined = undefined;
+
+  /**
+   * 值格式化
+   * @author lxm
+   * @date 2023-05-24 05:46:56
+   * @readonly
+   * @type {(string | undefined)}
+   */
+  get valueFormat(): string | undefined {
+    return this.model.valueFormat;
+  }
+
+  get dataType(): number | undefined {
+    return undefined;
+  }
+
+  get context(): IContext {
+    return this.panel.context;
+  }
+
+  get params(): IParams {
+    return this.panel.params;
+  }
+
+  /**
+   * 父容器数据对象数据
+   * @author lxm
+   * @date 2023-07-15 01:33:58
+   * @readonly
+   * @type {IData}
+   */
+  get data(): IData {
+    return this.dataParent.data;
+  }
+
+  /**
+   * 面板属性成员的值
+   * @author lxm
+   * @date 2023-07-14 02:30:58
+   * @readonly
+   */
+  get value(): string | number {
+    return this.data[this.model.id!];
+  }
+
+  /**
+   * 编辑器控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @type {IEditorController}
+   */
+  editor?: IEditorController;
+
+  /**
+   * 编辑器适配器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   */
+  editorProvider?: IEditorProvider;
+
+  protected createState(): PanelFieldState {
+    return new PanelFieldState(this.parent?.state);
+  }
+
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    // 空输入默认值
+    this.state.required = !this.model.allowEmpty;
+    // 初始化编辑器控制器,除了隐藏都会需要适配器
+    if (this.model.editor && this.model.editor.editorType !== 'HIDDEN') {
+      this.editorProvider = await getEditorProvider(this.model.editor);
+      if (this.editorProvider) {
+        this.editor = await this.editorProvider.createController(
+          this.model.editor,
+          this,
+        );
+      }
+    }
+  }
+
+  /**
+   * 设置面板数据的值
+   *
+   * @author lxm
+   * @date 2022-08-24 10:08:40
+   * @param {unknown} value 要设置的值
+   * @param {string} name 要设置的面板数据的属性名称
+   */
+  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);
+    }
+  }
+}

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,36 @@
+$panel-field: (
+  'icon-margin': 6px,
+);
+
+// 三块定义该变量的地方，要改的话一起改！ 
+// 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),
+);
+
+@include b(panel-field) {
+  @include set-component-css-var('form-item', $form-item);
+
+  width: 100%;
+  height: 100%;
+
+  @include b(panel-field-content) {
+    line-height: inherit ;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 面板属性状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class PanelFieldState
+ * @extends {PanelItemState}
+ */
+export class PanelFieldState extends PanelItemState {}

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

@@ -0,0 +1,78 @@
+import { IPanelField } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, resolveComponent, h } from 'vue';
+import { useNamespace } from '../../use';
+import { PanelFieldController } from './panel-field.controller';
+import './panel-field.scss';
+
+export const PanelField = defineComponent({
+  name: 'IBizPanelField',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelField>,
+      required: true,
+    },
+    controller: {
+      type: PanelFieldController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-field');
+
+    // 类名控制
+    const classArr = computed(() => {
+      const { id } = props.modelData;
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+
+    const onValueChange = (val: unknown, name?: string): void => {
+      props.controller.setDataValue(val, name);
+    };
+
+    return {
+      ns,
+      classArr,
+      onValueChange,
+    };
+  },
+  render() {
+    // 编辑器内容
+    let editor = null;
+    if (this.controller.data) {
+      const editorProps = {
+        value: this.controller.value,
+        data: this.controller.data,
+        controller: this.controller.editor,
+        disabled: this.controller.state.disabled,
+        class: this.ns.b('content'),
+        readonly: this.controller.model.editor!.readOnly,
+        onChange: this.onValueChange,
+      };
+      if (this.$slots.default) {
+        editor = this.$slots.default(editorProps);
+      } else if (this.controller.editorProvider) {
+        const component = resolveComponent(
+          this.controller.editorProvider.formEditor,
+        );
+        editor = h(component, {
+          ...editorProps,
+        });
+      } else {
+        editor = <not-supported-editor modelData={this.modelData.editor} />;
+      }
+    }
+
+    return (
+      <div
+        class={this.classArr}
+        onClick={() => {
+          this.controller.onClick();
+        }}
+      >
+        {editor}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,18 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { withInstall } from '../../util';
+import { PanelRawItem } from './panel-rawitem';
+import { PanelRawItemProvider } from './panel-rawitem.provider';
+
+export * from './panel-rawitem.controller';
+
+export const IBizPanelRawItem = withInstall(PanelRawItem, function (v: App) {
+  v.component(PanelRawItem.name, PanelRawItem);
+  registerPanelItemProvider('RAWITEM', () => new PanelRawItemProvider());
+  registerPanelItemProvider(
+    'RAWITEM_STATIC_IMAGE',
+    () => new PanelRawItemProvider(),
+  );
+});
+
+export default IBizPanelRawItem;

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

@@ -0,0 +1,34 @@
+import { IPanelRawItem } from '@ibiz/model-core';
+import { PanelItemController } from '@ibiz-template/runtime';
+
+/**
+ * 面板按钮控制器
+ *
+ * @export
+ * @class PanelRawItemController
+ * @extends {PanelItemController<IPanelRawItem>}
+ */
+export class PanelRawItemController extends PanelItemController<IPanelRawItem> {
+  /**
+   * 父容器数据对象数据
+   * @author lxm
+   * @date 2023-07-15 01:33:58
+   * @readonly
+   * @type {IData}
+   */
+  get data(): IData {
+    return this.dataParent.data!;
+  }
+
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+  }
+}

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

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

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

@@ -0,0 +1,8 @@
+@include b(panel-rawitem) {
+  width: 100%;
+  height: 100%;
+  
+  @include b(panel-rawitem-content) {
+    width: 100%;
+  }
+}

package/src/panel-component/panel-rawitem/panel-rawitem.tsx

@@ -0,0 +1,51 @@
+import { IPanelRawItem } from '@ibiz/model-core';
+import { computed, defineComponent, PropType } from 'vue';
+import { useNamespace } from '../../use';
+import { PanelRawItemController } from './panel-rawitem.controller';
+import './panel-rawitem.scss';
+
+export const PanelRawItem = defineComponent({
+  name: 'IBizPanelRawItem',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelRawItem>,
+      required: true,
+    },
+    controller: {
+      type: PanelRawItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-rawitem');
+
+    // 类名控制
+    const classArr = computed(() => {
+      const { id } = props.modelData;
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+
+    return {
+      ns,
+      classArr,
+    };
+  },
+  render() {
+    // 动态控制显示
+    if (!this.controller.state.visible) {
+      return;
+    }
+    return (
+      <div
+        class={this.classArr}
+        onClick={() => {
+          this.controller.onClick();
+        }}
+      >
+        <iBizRawItem rawItem={this.modelData}></iBizRawItem>
+      </div>
+    );
+  },
+});