@ibiz-template/vue3-util 0.6.0 → 0.6.1-dev.1

package/lib/panel-component/panel-container-group/panel-container-group.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var vue = require('vue');
+var panelContainerGroup_controller = require('./panel-container-group.controller.cjs');
+require('./panel-container-group.css');
+require('../../use/index.cjs');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const PanelContainerGroup = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPanelContainerGroup",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: panelContainerGroup_controller.PanelContainerGroupController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = namespace.useNamespace("panel-container-group");
+    const isCollapse = vue.ref(!props.controller.defaultExpansion);
+    const changeCollapse = () => {
+      if (!props.controller.disableClose) {
+        isCollapse.value = !isCollapse.value;
+      }
+    };
+    const captionText = vue.computed(() => {
+      const {
+        captionItemName,
+        caption,
+        capLanguageRes
+      } = props.modelData;
+      if (captionItemName) {
+        return props.controller.data[captionItemName];
+      }
+      let text = caption;
+      if (capLanguageRes) {
+        text = ibiz.i18n.t(capLanguageRes.lanResTag, caption);
+      }
+      return text;
+    });
+    return {
+      ns,
+      captionText,
+      changeCollapse,
+      isCollapse
+    };
+  },
+  render() {
+    var _a, _b;
+    let _slot;
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass, this.ns.is("hidden", !this.controller.state.visible)];
+    if (this.modelData.showCaption === true) {
+      classArr.push(this.ns.m("show-header"));
+      classArr.push(this.ns.b("collapse"));
+      classArr.push(this.ns.is("collapse", this.isCollapse));
+      if (this.controller.disableClose) {
+        classArr.push(this.ns.bm("collapse", "disable-close"));
+      }
+    }
+    const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
+    const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
+      "slot": "content",
+      "layout": this.modelData.layout
+    }, _isSlot(_slot = defaultSlots.map((slot) => {
+      const props = slot.props;
+      if (!props || !props.controller) {
+        return slot;
+      }
+      return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "layoutPos": props.modelData.layoutPos,
+        "state": props.controller.state
+      }, _isSlot(slot) ? slot : {
+        default: () => [slot]
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+    let header = null;
+    if (this.modelData.showCaption) {
+      header = vue.createVNode("div", {
+        "class": [this.ns.b("header")],
+        "onClick": this.changeCollapse
+      }, [vue.createVNode("div", {
+        "class": [this.ns.be("header", "left")]
+      }, [vue.createVNode("div", {
+        "class": [this.ns.e("caption"), ...this.controller.labelClass]
+      }, [this.captionText])]), vue.createVNode("div", {
+        "class": [this.ns.be("header", "right")]
+      }, [this.modelData.titleBarCloseMode !== void 0 && this.modelData.titleBarCloseMode !== 0 && (this.isCollapse ? vue.createVNode("ion-icon", {
+        "name": "caret-forward-sharp"
+      }, null) : vue.createVNode("ion-icon", {
+        "name": "caret-down-sharp"
+      }, null))])]);
+    }
+    return vue.createVNode("div", {
+      "class": classArr
+    }, [header, vue.createVNode("div", {
+      "class": [this.ns.b("content")]
+    }, [content])]);
+  }
+});
+
+exports.PanelContainerGroup = PanelContainerGroup;

package/lib/panel-component/panel-container-group/panel-container-group.controller.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+var panelContainerGroup_state = require('./panel-container-group.state.cjs');
+
+"use strict";
+class PanelContainerGroupController extends runtime.PanelItemController {
+  createState() {
+    var _a;
+    return new panelContainerGroup_state.PanelContainerGroupState((_a = this.parent) == null ? void 0 : _a.state);
+  }
+  /**
+   * 禁用关闭
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:51
+   * @readonly
+   * @type {boolean}
+   */
+  get disableClose() {
+    const { titleBarCloseMode: mode } = this.model;
+    return mode === 0 || mode === void 0;
+  }
+  /**
+   * 是否默认展开分组
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:09
+   * @readonly
+   */
+  get defaultExpansion() {
+    const { titleBarCloseMode: mode } = this.model;
+    return this.disableClose || mode === 1;
+  }
+}
+
+exports.PanelContainerGroupController = PanelContainerGroupController;

package/lib/panel-component/panel-container-group/panel-container-group.css

@@ -0,0 +1 @@
+.ibiz-panel-container-group{--ibiz-panel-container-group-bg-color:transparent;--ibiz-panel-container-group-header-bg-color:transparent;--ibiz-panel-container-group-header-padding:var(--ibiz-spacing-base-tight);--ibiz-panel-container-group-header-border-color:var(--ibiz-color-border);--ibiz-panel-container-group-header-height:49px;--ibiz-panel-container-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-panel-container-group-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-panel-container-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-panel-container-group-content-bg-color:transparent;--ibiz-panel-container-group-content-padding:var(--ibiz-spacing-tight)}.ibiz-panel-container-group{height:100%;background-color:var(--ibiz-panel-container-group-bg-color);border-radius:var(--ibiz-border-radius-base)}.ibiz-panel-container-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-panel-container-group-caption-font-size);font-weight:var(--ibiz-panel-container-group-caption-font-weight);color:var(--ibiz-panel-container-group-caption-text-color)}.ibiz-panel-container-group-collapse>.ibiz-panel-container-group-content{display:block}.ibiz-panel-container-group-collapse.is-collapse>.ibiz-panel-container-group-content{display:none}.ibiz-panel-container-group-header{display:flex;height:var(--ibiz-panel-container-group-header-height);padding:var(--ibiz-panel-container-group-header-padding);margin:var(--ibiz-panel-container-group-header-margin);border-bottom:1px solid var(--ibiz-panel-container-group-header-border-color)}.ibiz-panel-container-group-header__left,.ibiz-panel-container-group-header__right{display:inline-block;width:50%}.ibiz-panel-container-group-header__right{text-align:right;display:flex;align-items:center;justify-content:flex-end}.ibiz-panel-container-group-content{width:100%;height:100%}.ibiz-panel-container-group-content>.ibiz-row{width:100%;height:100%}.ibiz-panel-container-group--show-header>.ibiz-panel-container-group-content{height:calc(100% - var(--ibiz-panel-container-group-header-height));padding:var(--ibiz-panel-container-group-content-padding);background-color:var(--ibiz-panel-container-group-content-bg-color)}

package/lib/panel-component/panel-container-group/panel-container-group.provider.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var panelContainerGroup_controller = require('./panel-container-group.controller.cjs');
+
+"use strict";
+class PanelContainerGroupProvider {
+  constructor() {
+    this.component = "IBizPanelContainerGroup";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new panelContainerGroup_controller.PanelContainerGroupController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.PanelContainerGroupProvider = PanelContainerGroupProvider;

package/lib/panel-component/panel-container-group/panel-container-group.state.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class PanelContainerGroupState extends runtime.PanelItemState {
+}
+
+exports.PanelContainerGroupState = PanelContainerGroupState;

package/lib/panel-component/panel-container-image/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+require('../../util/index.cjs');
+var panelContainerImage = require('./panel-container-image.cjs');
+var panelContainerImage_provider = require('./panel-container-image.provider.cjs');
+var panelContainerImage_state = require('./panel-container-image.state.cjs');
+var panelContainerImage_controller = require('./panel-container-image.controller.cjs');
+var install = require('../../util/install.cjs');
+
+"use strict";
+const IBizPanelContainerImage = install.withInstall(
+  panelContainerImage.PanelContainerImage,
+  function(v) {
+    v.component(panelContainerImage.PanelContainerImage.name, panelContainerImage.PanelContainerImage);
+    runtime.registerPanelItemProvider(
+      "CONTAINER_CONTAINER_IMAGE",
+      () => new panelContainerImage_provider.PanelContainerImageProvider()
+    );
+  }
+);
+
+exports.PanelContainerImageState = panelContainerImage_state.PanelContainerImageState;
+exports.PanelContainerImageController = panelContainerImage_controller.PanelContainerImageController;
+exports.IBizPanelContainerImage = IBizPanelContainerImage;
+exports.default = IBizPanelContainerImage;

package/lib/panel-component/panel-container-image/panel-container-image.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@ibiz-template/core');
+require('../../use/index.cjs');
+var panelContainerImage_controller = require('./panel-container-image.controller.cjs');
+require('./panel-container-image.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPanelContainerImage",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: panelContainerImage_controller.PanelContainerImageController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = namespace.useNamespace("panel-container-image");
+    const {
+      id
+    } = props.modelData;
+    const classArr = vue.computed(() => {
+      let result = [ns.b(), ns.m(id)];
+      result = [...result, ...props.controller.containerClass, ns.is("hidden", !props.controller.state.visible)];
+      return result;
+    });
+    const backgroundStyle = vue.computed(() => {
+      const image = props.controller.model.sysImage;
+      const styles = {};
+      let imgStr = "";
+      if (image == null ? void 0 : image.rawContent) {
+        if (core.isSvg(image.rawContent)) {
+          imgStr = "url(data:image/svg+xml;base64,".concat(btoa(image.rawContent), ")");
+        } else {
+          imgStr = "url(".concat(image.rawContent, ")");
+        }
+      } else if (image == null ? void 0 : image.imagePath) {
+        imgStr = "url(".concat(image.imagePath, ")");
+      }
+      if (imgStr) {
+        Object.assign(styles, {
+          backgroundImage: imgStr
+        });
+      }
+      return styles;
+    });
+    return {
+      ns,
+      classArr,
+      backgroundStyle
+    };
+  },
+  render() {
+    var _a, _b;
+    let _slot;
+    const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
+    const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
+      "slot": "content",
+      "layout": this.modelData.layout
+    }, _isSlot(_slot = defaultSlots.map((slot) => {
+      const props = slot.props;
+      if (!props || !props.controller) {
+        return slot;
+      }
+      return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "layoutPos": props.modelData.layoutPos,
+        "state": props.controller.state
+      }, _isSlot(slot) ? slot : {
+        default: () => [slot]
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+    return vue.createVNode("div", {
+      "class": this.classArr,
+      "onClick": () => {
+        this.controller.onClick();
+      },
+      "style": this.backgroundStyle
+    }, [this.controller.model.cssStyle ? vue.createVNode("style", {
+      "type": "text/css"
+    }, [this.controller.model.cssStyle]) : null, content]);
+  }
+});
+
+exports.PanelContainerImage = PanelContainerImage;

package/lib/panel-component/panel-container-image/panel-container-image.controller.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+var panelContainerImage_state = require('./panel-container-image.state.cjs');
+
+"use strict";
+class PanelContainerImageController extends runtime.PanelItemController {
+  createState() {
+    var _a;
+    return new panelContainerImage_state.PanelContainerImageState((_a = this.parent) == null ? void 0 : _a.state);
+  }
+}
+
+exports.PanelContainerImageController = PanelContainerImageController;

package/lib/panel-component/panel-container-image/panel-container-image.css

@@ -0,0 +1 @@
+.ibiz-panel-container-image{position:relative;width:100%;height:100%;background-repeat:no-repeat;background-position:center center}.ibiz-panel-container-image>.ibiz-row{height:100%;overflow-x:hidden;overflow-y:auto}.ibiz-panel-container-image.is-hidden{display:none}

package/lib/panel-component/panel-container-image/panel-container-image.provider.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var panelContainerImage_controller = require('./panel-container-image.controller.cjs');
+
+"use strict";
+class PanelContainerImageProvider {
+  constructor() {
+    this.component = "IBizPanelContainerImage";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new panelContainerImage_controller.PanelContainerImageController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.PanelContainerImageProvider = PanelContainerImageProvider;

package/lib/panel-component/panel-container-image/panel-container-image.state.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class PanelContainerImageState extends runtime.PanelItemState {
+}
+
+exports.PanelContainerImageState = PanelContainerImageState;

package/lib/panel-component/panel-ctrl-pos/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+require('../../util/index.cjs');
+var panelCtrlPos = require('./panel-ctrl-pos.cjs');
+var panelCtrlPos_provider = require('./panel-ctrl-pos.provider.cjs');
+var panelCtrlPos_controller = require('./panel-ctrl-pos.controller.cjs');
+var install = require('../../util/install.cjs');
+
+"use strict";
+const IBizPanelCtrlPos = install.withInstall(panelCtrlPos.PanelCtrlPos, function(v) {
+  v.component(panelCtrlPos.PanelCtrlPos.name, panelCtrlPos.PanelCtrlPos);
+  runtime.registerPanelItemProvider("CTRLPOS", () => new panelCtrlPos_provider.PanelCtrlPosProvider());
+});
+
+exports.PanelCtrlPosController = panelCtrlPos_controller.PanelCtrlPosController;
+exports.IBizPanelCtrlPos = IBizPanelCtrlPos;
+exports.default = IBizPanelCtrlPos;

package/lib/panel-component/panel-ctrl-pos/panel-ctrl-pos.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var vue = require('vue');
+require('../../use/index.cjs');
+require('./panel-ctrl-pos.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const PanelCtrlPos = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPanelCtrlPos",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ctx = vue.inject("ctx");
+    ctx.evt.on("onRegister", (name, c) => {
+      if (name === props.modelData.id) {
+        props.controller.bindControl(c);
+      }
+    });
+    const ns = namespace.useNamespace("panel-ctrl-pos");
+    return {
+      ns
+    };
+  },
+  render() {
+    const {
+      state
+    } = this.controller;
+    let content;
+    if (this.$slots.default) {
+      content = this.$slots.default();
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass, this.ns.is("hidden", !state.visible)]
+    }, [content || (ibiz.env.dev ? "\u672A\u63D0\u4F9B".concat(this.modelData.id, "\u63D2\u69FD") : "")]);
+  }
+});
+
+exports.PanelCtrlPos = PanelCtrlPos;

package/lib/panel-component/panel-ctrl-pos/panel-ctrl-pos.controller.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class PanelCtrlPosController extends runtime.PanelItemController {
+  /**
+   * 绑定部件控制器
+   * @author lxm
+   * @date 2023-08-09 10:42:30
+   * @param {IControlController} controller
+   */
+  bindControl(controller) {
+    this.control = controller;
+    controller.evt.onAll((eventName, event) => {
+      this.panel.evt.emit("onControlEvent", {
+        triggerControlName: this.model.id,
+        triggerEventName: eventName,
+        triggerEvent: event
+      });
+    });
+  }
+}
+
+exports.PanelCtrlPosController = PanelCtrlPosController;

package/lib/panel-component/panel-ctrl-pos/panel-ctrl-pos.css

@@ -0,0 +1 @@
+.ibiz-panel-ctrl-pos{width:100%;height:100%}.ibiz-panel-ctrl-pos.is-hidden{display:none}

package/lib/panel-component/panel-ctrl-pos/panel-ctrl-pos.provider.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var panelCtrlPos_controller = require('./panel-ctrl-pos.controller.cjs');
+
+"use strict";
+class PanelCtrlPosProvider {
+  constructor() {
+    this.component = "IBizPanelCtrlPos";
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new panelCtrlPos_controller.PanelCtrlPosController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.PanelCtrlPosProvider = PanelCtrlPosProvider;

package/lib/panel-component/panel-field/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+require('../../util/index.cjs');
+var panelField = require('./panel-field.cjs');
+var panelField_provider = require('./panel-field.provider.cjs');
+var panelField_controller = require('./panel-field.controller.cjs');
+var install = require('../../util/install.cjs');
+
+"use strict";
+const IBizPanelField = install.withInstall(panelField.PanelField, function(v) {
+  v.component(panelField.PanelField.name, panelField.PanelField);
+  runtime.registerPanelItemProvider("FIELD", () => new panelField_provider.PanelFieldProvider());
+});
+
+exports.PanelFieldController = panelField_controller.PanelFieldController;
+exports.IBizPanelField = IBizPanelField;
+exports.default = IBizPanelField;

package/lib/panel-component/panel-field/panel-field.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var vue = require('vue');
+require('../../use/index.cjs');
+var panelField_controller = require('./panel-field.controller.cjs');
+require('./panel-field.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const PanelField = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPanelField",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: panelField_controller.PanelFieldController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = namespace.useNamespace("panel-field");
+    const classArr = vue.computed(() => {
+      const {
+        id
+      } = props.modelData;
+      const result = [ns.b(), ns.m(id)];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+    const onValueChange = (val, name) => {
+      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) => this.controller.onFocus(event),
+        onBlur: (event) => this.controller.onBlur(event),
+        onEnter: (event) => this.controller.onEnter(event)
+      };
+      if (this.$slots.default) {
+        editor = this.$slots.default(editorProps);
+      } else if (this.controller.editorProvider) {
+        const component = vue.resolveComponent(this.controller.editorProvider.formEditor);
+        editor = vue.h(component, {
+          ...editorProps
+        });
+      } else {
+        editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+          "modelData": this.modelData.editor
+        }, null);
+      }
+    }
+    return vue.createVNode("div", {
+      "class": this.classArr,
+      "onClick": () => {
+        this.controller.onClick();
+      }
+    }, [editor]);
+  }
+});
+
+exports.PanelField = PanelField;