@ibiz-template/vue3-util 0.6.0 → 0.6.1-alpha.2

package/src/panel-component/panel-container-image/panel-container-image.scss

@@ -1,18 +0,0 @@
-// 默认样式
-@include b(panel-container-image) {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  > .#{bem('row')} {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  @include when(hidden) {
-    display: none;
-  }
-
-}

package/src/panel-component/panel-container-image/panel-container-image.state.ts

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

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

@@ -1,95 +0,0 @@
-import { IPanelContainer } from '@ibiz/model-core';
-import { computed, defineComponent, PropType, VNode } from 'vue';
-import { isSvg } from '@ibiz-template/core';
-import { useNamespace } from '../../use';
-import { PanelContainerImageController } from './panel-container-image.controller';
-import './panel-container-image.scss';
-
-export const PanelContainerImage = defineComponent({
-  name: 'IBizPanelContainerImage',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelContainer>,
-      required: true,
-    },
-    controller: {
-      type: PanelContainerImageController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('panel-container-image');
-    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;
-    });
-
-    const backgroundStyle = computed(() => {
-      const image = props.controller.model.sysImage;
-      const styles = {};
-      let imgStr = '';
-      if (image?.rawContent) {
-        if (isSvg(image.rawContent)) {
-          imgStr = `url(data:image/svg+xml;base64,${btoa(image.rawContent)})`;
-        } else {
-          imgStr = `url(${image.rawContent})`;
-        }
-      } else if (image?.imagePath) {
-        imgStr = `url(${image.imagePath})`;
-      }
-      if (imgStr) {
-        Object.assign(styles, {
-          backgroundImage: imgStr,
-        });
-      }
-      return styles;
-    });
-
-    return { ns, classArr, backgroundStyle };
-  },
-  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();
-        }}
-        style={this.backgroundStyle}
-      >
-        {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

@@ -1,14 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,8 +0,0 @@
-@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

@@ -1,53 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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
-{
-  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);
-    }
-    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,
-    });
-  }
-}

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

@@ -1,28 +0,0 @@
-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

@@ -1,36 +0,0 @@
-$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

@@ -1,12 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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,
-        onFocus: (event: MouseEvent) => this.controller.onFocus(event),
-        onBlur: (event: MouseEvent) => this.controller.onBlur(event),
-        onEnter: (event: MouseEvent) => this.controller.onEnter(event),
-      };
-      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-item-render/index.ts

@@ -1,18 +0,0 @@
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { App } from 'vue';
-import { withInstall } from '../../util';
-import { PanelItemRender } from './panel-item-render';
-import { PanelItemRenderProvider } from './panel-item-render.provider';
-
-export const IBizPanelItemRender = withInstall(
-  PanelItemRender,
-  function (v: App) {
-    v.component(PanelItemRender.name, PanelItemRender);
-    registerPanelItemProvider(
-      'PREDEFINE_RENDER',
-      () => new PanelItemRenderProvider(),
-    );
-  },
-);
-
-export default IBizPanelItemRender;